diff --git a/appview/pages/templates/repo/fragments/cloneDropdown.html b/appview/pages/templates/repo/fragments/cloneDropdown.html
new file mode 100644
index 00000000..0adad8d8
--- /dev/null
+++ b/appview/pages/templates/repo/fragments/cloneDropdown.html
@@ -0,0 +1,104 @@
+{{ define "repo/fragments/cloneDropdown" }}
+    {{ $knot := .RepoInfo.Knot }}
+    {{ if eq $knot "knot1.tangled.sh" }}
+        {{ $knot = "tangled.sh" }}
+    {{ end }}
+
+    <details id="clone-dropdown" class="relative inline-block text-left group">
+        <summary class="btn-create cursor-pointer list-none flex items-center gap-2">
+            {{ i "download" "w-4 h-4" }}
+            <span>code</span>
+            <span class="group-open:hidden">
+                {{ i "chevron-down" "w-4 h-4" }}
+            </span>
+            <span class="hidden group-open:flex">
+                {{ i "chevron-up" "w-4 h-4" }}
+            </span>
+        </summary>
+
+        <div class="absolute right-0 mt-2 w-96 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white z-[9999]">
+            <div class="p-4">
+                <div class="mb-3">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Clone this repository</h3>
+                </div>
+
+                <!-- HTTPS Clone -->
+                <div class="mb-3">
+                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">HTTPS</label>
+                    <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
+                        <code
+                            class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
+                            onclick="window.getSelection().selectAllChildren(this)"
+                            data-url="https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}"
+                        >https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
+                        <button
+                            onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
+                            class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
+                            title="Copy to clipboard"
+                        >
+                            {{ i "copy" "w-4 h-4" }}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- SSH Clone -->
+                <div class="mb-3">
+                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
+                    <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
+                        <code
+                            class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
+                            onclick="window.getSelection().selectAllChildren(this)"
+                            data-url="git@{{ $knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}"
+                        >git@{{ $knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
+                        <button
+                            onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
+                            class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
+                            title="Copy to clipboard"
+                        >
+                            {{ i "copy" "w-4 h-4" }}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Note for self-hosted -->
+                    <p class="text-xs text-gray-500 dark:text-gray-400">
+                        For self-hosted knots, clone URLs may differ based on your setup.
+                    </p>
+
+                <!-- Download Archive -->
+                <div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
+                    <a
+                        href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
+                        class="flex items-center gap-2 px-3 py-2 text-sm"
+                    >
+                        {{ i "download" "w-4 h-4" }}
+                        Download tar.gz
+                    </a>
+                </div>
+
+            </div>
+        </div>
+    </details>
+
+    <script>
+        function copyToClipboard(button, text) {
+            navigator.clipboard.writeText(text).then(() => {
+                const originalContent = button.innerHTML;
+                button.innerHTML = `{{ i "copy-check" "w-4 h-4" }}`;
+                setTimeout(() => {
+                    button.innerHTML = originalContent;
+                }, 2000);
+            });
+        }
+
+        // Close clone dropdown when clicking outside
+        document.addEventListener('click', function(event) {
+            const cloneDropdown = document.getElementById('clone-dropdown');
+            if (cloneDropdown && cloneDropdown.hasAttribute('open')) {
+                if (!cloneDropdown.contains(event.target)) {
+                    cloneDropdown.removeAttribute('open');
+                }
+            }
+        });
+    </script>
+{{ end }}
diff --git a/appview/pages/templates/repo/fragments/cloneInstructions.html b/appview/pages/templates/repo/fragments/cloneInstructions.html
deleted file mode 100644
index 5d63e537..00000000
--- a/appview/pages/templates/repo/fragments/cloneInstructions.html
+++ /dev/null
@@ -1,55 +0,0 @@
-{{ define "repo/fragments/cloneInstructions" }}
-    {{ $knot := .RepoInfo.Knot }}
-    {{ if eq $knot "knot1.tangled.sh" }}
-        {{ $knot = "tangled.sh" }}
-    {{ end }}
-    <section
-        class="mt-4 p-6 rounded drop-shadow-sm bg-white dark:bg-gray-800 dark:text-white w-full mx-auto overflow-auto flex flex-col gap-4"
-    >
-        <div class="flex flex-col gap-2">
-            <strong>push</strong>
-            <div class="md:pl-4 overflow-x-auto whitespace-nowrap">
-                <code class="dark:text-gray-100"
-                    >git remote add origin
-                    git@{{ $knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code
-                >
-            </div>
-        </div>
-
-        <div class="flex flex-col gap-2">
-            <strong>clone</strong>
-            <div class="md:pl-4 flex flex-col gap-2">
-                <div class="flex items-center gap-3">
-                    <span
-                        class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-white"
-                        >HTTP</span
-                    >
-                    <div class="overflow-x-auto whitespace-nowrap flex-1">
-                        <code class="dark:text-gray-100"
-                            >git clone
-                            https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code
-                        >
-                    </div>
-                </div>
-
-                <div class="flex items-center gap-3">
-                    <span
-                        class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-white"
-                        >SSH</span
-                    >
-                    <div class="overflow-x-auto whitespace-nowrap flex-1">
-                        <code class="dark:text-gray-100"
-                            >git clone
-                            git@{{ $knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code
-                        >
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <p class="py-2 text-gray-500 dark:text-gray-400">
-            Note that for self-hosted knots, clone URLs may be different based
-            on your setup.
-        </p>
-    </section>
-{{ end }}
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
index f7c5bdcc..49881ece 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -47,41 +47,42 @@
 
 
 {{ define "branchSelector" }}
-  <div class="flex gap-2 items-center items-stretch justify-center">
-    <select
-        onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + encodeURIComponent(this.value)"
-        class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
-    >
-        <optgroup label="branches ({{len .Branches}})" class="bold text-sm">
-            {{ range .Branches }}
-                <option
-                    value="{{ .Reference.Name }}"
-                    class="py-1"
-                    {{ if eq .Reference.Name $.Ref }}
-                        selected
-                    {{ end }}
-                >
-                    {{ .Reference.Name }}
-                </option>
-            {{ end }}
-        </optgroup>
-        <optgroup label="tags ({{len .Tags}})" class="bold text-sm">
-            {{ range .Tags }}
-                <option
-                    value="{{ .Reference.Name }}"
-                    class="py-1"
-                    {{ if eq .Reference.Name $.Ref }}
-                        selected
-                    {{ end }}
-                >
-                    {{ .Reference.Name }}
-                </option>
-            {{ else }}
-                <option class="py-1" disabled>no tags found</option>
-            {{ end }}
-        </optgroup>
-    </select>
-    <div class="flex items-center gap-2">
+  <div class="flex gap-2 items-center justify-between w-full">
+    <div class="flex gap-2 items-center">
+      <select
+          onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + encodeURIComponent(this.value)"
+          class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
+      >
+          <optgroup label="branches ({{len .Branches}})" class="bold text-sm">
+              {{ range .Branches }}
+                  <option
+                      value="{{ .Reference.Name }}"
+                      class="py-1"
+                      {{ if eq .Reference.Name $.Ref }}
+                          selected
+                      {{ end }}
+                  >
+                      {{ .Reference.Name }}
+                  </option>
+              {{ end }}
+          </optgroup>
+          <optgroup label="tags ({{len .Tags}})" class="bold text-sm">
+              {{ range .Tags }}
+                  <option
+                      value="{{ .Reference.Name }}"
+                      class="py-1"
+                      {{ if eq .Reference.Name $.Ref }}
+                          selected
+                      {{ end }}
+                  >
+                      {{ .Reference.Name }}
+                  </option>
+              {{ else }}
+                  <option class="py-1" disabled>no tags found</option>
+              {{ end }}
+          </optgroup>
+      </select>
+      <div class="flex items-center gap-2">
     {{ $isOwner := and .LoggedInUser .RepoInfo.Roles.IsOwner }}
     {{ $isCollaborator := and .LoggedInUser .RepoInfo.Roles.IsCollaborator }}
     {{ if and (or $isOwner $isCollaborator) .ForkInfo .ForkInfo.IsFork }}
@@ -115,15 +116,21 @@
           <span>sync</span>
         </button>
     {{ end }}
-        <a
-            href="/{{ .RepoInfo.FullName }}/compare?base={{ $.Ref | urlquery }}"
-            class="btn flex items-center gap-2 no-underline hover:no-underline"
-            title="Compare branches or tags"
-        >
-            {{ i "git-compare" "w-4 h-4" }}
-        </a>
+          <a
+              href="/{{ .RepoInfo.FullName }}/compare?base={{ $.Ref | urlquery }}"
+              class="btn flex items-center gap-2 no-underline hover:no-underline"
+              title="Compare branches or tags"
+          >
+              {{ i "git-compare" "w-4 h-4" }}
+          </a>
+      </div>
     </div>
-</div>
+    
+    <!-- Clone dropdown in top right -->
+    <div class="flex items-center">
+        {{ template "repo/fragments/cloneDropdown" . }}
+    </div>
+  </div>
 {{ end }}
 
 {{ define "fileTree" }}
@@ -363,6 +370,4 @@
                 {{- end -}}</article>
         </section>
     {{- end -}}
-
-    {{ template "repo/fragments/cloneInstructions" . }}
 {{ end }}