diff --git a/index.html b/index.html
index a36ddf5..fa50f8d 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 
     <!-- Google Fonts (clean way) -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/src/components/layout/PublicNavbar.jsx b/src/components/layout/PublicNavbar.jsx
index 4cd455a..4045043 100644
--- a/src/components/layout/PublicNavbar.jsx
+++ b/src/components/layout/PublicNavbar.jsx
@@ -35,6 +35,16 @@ export const PublicNavbar = () => {
   const navRef = useRef(null);
   const glareRef = useRef(null);
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (mobileExpanded && navRef.current && !navRef.current.contains(event.target)) {
+        setMobileExpanded(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [mobileExpanded]);
+
   // Function to update the pill position and width
   const updatePill = (index, smooth = true) => {
     const btn = buttonRefs.current[index];
diff --git a/src/index.css b/src/index.css
index 1ca36a3..dfdcd49 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,6 +25,7 @@
     min-height: 100vh !important;
     display: block !important;
     text-align: left !important;
+    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
   }
 }
 
diff --git a/src/pages/CardBuilder.jsx b/src/pages/CardBuilder.jsx
index 684cf08..8b44bcc 100644
--- a/src/pages/CardBuilder.jsx
+++ b/src/pages/CardBuilder.jsx
@@ -25,10 +25,14 @@ const CardBuilder = () => {
   
   const markdownCode = `[![RankerHub Stats](${devcardUrl})](${baseUrl}/dashboard/profile/${githubUsername})`;
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText(markdownCode);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(markdownCode);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setCopied(false);
+    }
   };
 
   return (
diff --git a/src/pages/Friends.jsx b/src/pages/Friends.jsx
index 1dca192..cb3568e 100644
--- a/src/pages/Friends.jsx
+++ b/src/pages/Friends.jsx
@@ -279,12 +279,25 @@ export const Friends = () => {
           ) : (
             <Card className="p-8 text-center">
               <UsersRound className="w-10 h-10 text-slate-300 dark:text-slate-600 mx-auto mb-3" />
-              <h3 className="font-black text-slate-900 dark:text-white my-0">No developers here yet</h3>
-              <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
-                {activeTab === "leaderboard"
+              <h3 className="font-black text-slate-900 dark:text-white my-0">
+                {activeTab === "friends" ? "No friends yet!" : "No developers here yet"}
+              </h3>
+              <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 mb-5">
+                {activeTab === "friends"
+                  ? "Follow other developers to grow your friend circle and see their activity here."
+                  : activeTab === "leaderboard"
                   ? "Follow other developers to populate your Friends Leaderboard."
                   : "Follow developers from suggestions to grow this section instantly."}
               </p>
+              {activeTab === "friends" && (
+                <Link
+                  to="/dashboard/friends/leaderboard"
+                  className="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-extrabold text-white bg-gradient-to-r from-violet-600 to-indigo-600 border border-violet-500 shadow-[0_4px_15px_rgba(124,58,237,0.25)] hover:shadow-[0_6px_20px_rgba(124,58,237,0.35)] transition-all"
+                >
+                  <Trophy className="w-4 h-4" />
+                  Discover Developers
+                </Link>
+              )}
             </Card>
           )}
         </div>
