diff --git a/web/src/components/LeftSidebar.jsx b/web/src/components/LeftSidebar.jsx
index 935157a..246e8e7 100644
--- a/web/src/components/LeftSidebar.jsx
+++ b/web/src/components/LeftSidebar.jsx
@@ -14,7 +14,6 @@ import {
   Settings,
   ChevronUp,
 } from "lucide-react";
-import logo from "../assets/logo.svg";
 import { getUnreadNotificationCount } from "../api/client";
 
 export default function LeftSidebar() {
diff --git a/web/src/components/ShareMenu.jsx b/web/src/components/ShareMenu.jsx
index 67eab42..190a791 100644
--- a/web/src/components/ShareMenu.jsx
+++ b/web/src/components/ShareMenu.jsx
@@ -101,7 +101,40 @@ export default function ShareMenu({ uri, text, customUrl, handle, type, url }) {
   const [isOpen, setIsOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [copiedAturi, setCopiedAturi] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
   const menuRef = useRef(null);
+  const buttonRef = useRef(null);
+
+  const calculatePosition = () => {
+    if (!buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const menuWidth = 220;
+    const menuHeight = 300;
+    const padding = 16;
+
+    let left = rect.left + rect.width / 2 - menuWidth / 2;
+    let top = rect.bottom + 8;
+
+    if (left < padding) {
+      left = padding;
+    } else if (left + menuWidth > window.innerWidth - padding) {
+      left = window.innerWidth - menuWidth - padding;
+    }
+
+    if (top + menuHeight > window.innerHeight - padding) {
+      top = rect.top - menuHeight - 8;
+      if (top < padding) top = padding;
+    }
+
+    setMenuPosition({ top, left });
+  };
+
+  const handleToggle = () => {
+    if (!isOpen) {
+      calculatePosition();
+    }
+    setIsOpen(!isOpen);
+  };
 
   const getShareUrl = () => {
     if (customUrl) return customUrl;
@@ -126,24 +159,40 @@ export default function ShareMenu({ uri, text, customUrl, handle, type, url }) {
 
   useEffect(() => {
     const handleClickOutside = (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)) {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(e.target) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(e.target)
+      ) {
         setIsOpen(false);
       }
     };
 
-    const card = menuRef.current?.closest(".card");
+    const card = buttonRef.current?.closest(
+      ".card, .annotation-card, .bookmark-card",
+    );
     if (card) {
       if (isOpen) {
-        card.style.zIndex = "50";
+        card.classList.add("has-open-menu");
       } else {
-        card.style.zIndex = "";
+        card.classList.remove("has-open-menu");
       }
     }
 
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
+      window.addEventListener("scroll", calculatePosition, true);
+      window.addEventListener("resize", calculatePosition);
     }
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", calculatePosition, true);
+      window.removeEventListener("resize", calculatePosition);
+      if (card) {
+        card.classList.remove("has-open-menu");
+      }
+    };
   }, [isOpen]);
 
   const handleShareToFork = (domain) => {
@@ -231,10 +280,11 @@ export default function ShareMenu({ uri, text, customUrl, handle, type, url }) {
   };
 
   return (
-    <div className="share-menu-container" ref={menuRef}>
+    <div className="share-menu-container">
       <button
+        ref={buttonRef}
         className="annotation-action"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={handleToggle}
         title="Share"
       >
         <svg
@@ -256,7 +306,17 @@ export default function ShareMenu({ uri, text, customUrl, handle, type, url }) {
       </button>
 
       {isOpen && (
-        <div className="share-menu">
+        <div
+          className="share-menu"
+          ref={menuRef}
+          style={{
+            position: "fixed",
+            top: menuPosition.top,
+            left: menuPosition.left,
+            right: "auto",
+            transform: "none",
+          }}
+        >
           {isSemble ? (
             <>
               <div className="share-menu-section">
diff --git a/web/src/components/TopNav.jsx b/web/src/components/TopNav.jsx
index 14dc938..d2e7e8c 100644
--- a/web/src/components/TopNav.jsx
+++ b/web/src/components/TopNav.jsx
@@ -31,7 +31,6 @@ import {
 import { FaEdge } from "react-icons/fa";
 import tangledLogo from "../assets/tangled.svg";
 import { getUnreadNotificationCount } from "../api/client";
-import logo from "../assets/logo.svg";
 
 const isFirefox =
   typeof navigator !== "undefined" && /Firefox/i.test(navigator.userAgent);
diff --git a/web/src/css/annotations.css b/web/src/css/annotations.css
index 77584e2..1dc6022 100644
--- a/web/src/css/annotations.css
+++ b/web/src/css/annotations.css
@@ -163,7 +163,7 @@
   gap: 8px;
   padding-left: 0;
   max-width: 100%;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .annotation-source {
diff --git a/web/src/css/cards.css b/web/src/css/cards.css
index 9b4cfb9..f6a2826 100644
--- a/web/src/css/cards.css
+++ b/web/src/css/cards.css
@@ -71,6 +71,7 @@
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -82,6 +83,7 @@
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -96,10 +98,16 @@
 }
 
 .bookmark-card:hover {
-  z-index: 100 !important;
+  z-index: 10;
   overflow: visible !important;
 }
 
+.bookmark-card.has-open-menu,
+.annotation-card.has-open-menu,
+.card.has-open-menu {
+  z-index: 200 !important;
+}
+
 .bookmark-site {
   display: flex;
   align-items: center;
@@ -125,6 +133,7 @@
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
diff --git a/web/src/css/feed.css b/web/src/css/feed.css
index 0d25e8b..5f987ee 100644
--- a/web/src/css/feed.css
+++ b/web/src/css/feed.css
@@ -47,15 +47,17 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .feed > *:last-child {
   border-bottom: 1px solid var(--border);
 }
 
-.feed > *:hover {
-  z-index: 10;
+.feed > *.has-open-menu,
+.feed > *:focus-within {
+  z-index: 200 !important;
+  overflow: visible !important;
 }
 
 .feed-page {
diff --git a/web/src/css/layout.css b/web/src/css/layout.css
index e5620df..0bb49fa 100644
--- a/web/src/css/layout.css
+++ b/web/src/css/layout.css
@@ -13,7 +13,7 @@
 
 @media (max-width: 1024px) {
   .app-layout {
-    grid-template-columns: 240px 1fr;
+    grid-template-columns: 220px 1fr;
   }
 }
 
@@ -44,8 +44,7 @@
 
 .layout-mode-topnav .app-layout {
   grid-template-columns: 1fr;
-  max-width: 1600px;
-  margin: 0 auto;
+  max-width: 100%;
   height: auto;
   overflow: visible;
 }
@@ -60,8 +59,43 @@
 }
 
 .layout-mode-topnav .main-content > * {
-  max-width: 1200px;
+  max-width: 1100px;
   margin: 0 auto;
+  padding: 32px 32px 80px;
+}
+
+@media (min-width: 1400px) {
+  .layout-mode-topnav .main-content > * {
+    max-width: 1300px;
+  }
+}
+
+@media (min-width: 1700px) {
+  .layout-mode-topnav .main-content > * {
+    max-width: 1500px;
+  }
+}
+
+@media (max-width: 768px) {
+  .layout-mode-topnav .app-layout {
+    grid-template-columns: 1fr;
+    max-width: none;
+    height: auto;
+    overflow: visible;
+  }
+
+  .layout-mode-topnav .top-nav {
+    display: none;
+  }
+
+  .layout-mode-topnav .main-content {
+    padding: 16px 12px 100px;
+  }
+
+  .layout-mode-topnav .main-content > * {
+    max-width: 100%;
+    padding: 0 4px;
+  }
 }
 
 .top-nav-inner {
@@ -237,7 +271,7 @@
   border-radius: var(--radius-lg);
   padding: 6px;
   box-shadow: var(--shadow-lg);
-  z-index: 200;
+  z-index: 100;
 }
 
 .dropdown-right {
@@ -335,15 +369,16 @@
   width: 100%;
   padding: 0;
   overflow-y: auto;
+  overflow-x: hidden;
   height: 100%;
   scrollbar-width: thin;
   scrollbar-color: var(--bg-hover) transparent;
 }
 
 .main-content > * {
-  max-width: 800px;
+  max-width: 100%;
   margin: 0 auto;
-  padding: 32px 32px 80px;
+  padding: 32px 40px 80px;
 }
 
 .main-content::-webkit-scrollbar {
@@ -424,11 +459,7 @@
   -webkit-backdrop-filter: blur(12px);
   border-top: 1px solid var(--border);
   padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
-  z-index: 100;
-}
-
-.mobile-bottom-nav {
-  display: none;
+  z-index: 200;
   justify-content: space-around;
   align-items: center;
 }
@@ -574,12 +605,13 @@
   }
 
   .main-content > * {
-    padding: 0;
+    padding: 0 4px;
+    max-width: 100%;
   }
 
   .feed-container {
     border-radius: var(--radius-md);
-    padding: 4px;
+    padding: 0;
   }
 }
 
@@ -601,7 +633,7 @@
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 150;
+  z-index: 300;
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
   animation: fadeIn 0.15s ease-out;
@@ -616,7 +648,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   padding: 6px;
-  z-index: 151;
+  z-index: 301;
   box-shadow: var(--shadow-2xl);
   animation: mobileMenuSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   display: flex;
diff --git a/web/src/css/modals.css b/web/src/css/modals.css
index 90ee00e..5dd820c 100644
--- a/web/src/css/modals.css
+++ b/web/src/css/modals.css
@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: center;
   padding: var(--spacing-md);
-  z-index: 100;
+  z-index: 500;
   animation: fadeIn 0.15s ease-out;
 }
 
diff --git a/web/src/css/utilities.css b/web/src/css/utilities.css
index 1e44cd5..854c9ed 100644
--- a/web/src/css/utilities.css
+++ b/web/src/css/utilities.css
@@ -539,21 +539,17 @@
 
 .share-menu-container {
   position: relative;
-  z-index: 50;
 }
 
 .share-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 8px;
   background: var(--bg-elevated);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
-  min-width: 200px;
+  min-width: 220px;
+  max-width: calc(100vw - 32px);
   padding: 8px;
-  z-index: 1000;
+  z-index: 9999;
   animation: fadeInUp 0.15s ease;
 }
 
diff --git a/web/src/pages/Login.jsx b/web/src/pages/Login.jsx
index aa2e124..1efe5f6 100644
--- a/web/src/pages/Login.jsx
+++ b/web/src/pages/Login.jsx
@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import { searchActors, startLogin } from "../api/client";
 import { AtSign } from "lucide-react";
-import logo from "../assets/logo.svg";
 import SignUpModal from "../components/SignUpModal";
 
 export default function Login() {
diff --git a/web/src/pages/Profile.jsx b/web/src/pages/Profile.jsx
index a3fba01..ed24d76 100644
--- a/web/src/pages/Profile.jsx
+++ b/web/src/pages/Profile.jsx
@@ -41,23 +41,6 @@ function LinkIconComponent({ url }) {
   }
 }
 
-function KeyIcon({ size = 16 }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
-    </svg>
-  );
-}
-
 export default function Profile() {
   const { handle: routeHandle } = useParams();
   const { user, loading: authLoading } = useAuth();
@@ -425,11 +408,3 @@ export default function Profile() {
     </div>
   );
 }
-
-function AppleIcon({ size = 16 }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
-      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
-    </svg>
-  );
-}
diff --git a/web/src/pages/Settings.jsx b/web/src/pages/Settings.jsx
index cac21d9..9ce956f 100644
--- a/web/src/pages/Settings.jsx
+++ b/web/src/pages/Settings.jsx
@@ -3,7 +3,7 @@ import { getAPIKeys, createAPIKey, deleteAPIKey } from "../api/client";
 import { useTheme } from "../context/ThemeContext";
 import { useAuth } from "../context/AuthContext";
 import { Navigate } from "react-router-dom";
-import { Monitor, Columns, Layout } from "lucide-react";
+import { Columns, Layout } from "lucide-react";
 
 function KeyIcon({ size = 16 }) {
   return (