diff --git a/lark-ui/src/lib/BottomNavigation.svelte b/lark-ui/src/lib/BottomNavigation.svelte
index a36e1b7..8a99655 100644
--- a/lark-ui/src/lib/BottomNavigation.svelte
+++ b/lark-ui/src/lib/BottomNavigation.svelte
@@ -267,6 +267,8 @@
   .nav-tabs {
     display: flex;
     gap: 60px;
+    min-width: 0;
+    flex-wrap: wrap;
   }
 
   .nav-item {
@@ -341,7 +343,7 @@
     bottom: 120%;
     left: 50%;
     translate: -50% 0;
-    z-index: 200;
+    z-index: 1001;
     padding: 1.5rem 2rem;
     background-image: url('/shapes/shape-popover-2.svg');
     background-size: contain;
@@ -390,6 +392,14 @@
       font-size: 48px;
     }
     
+    .bottom-nav-items {
+      padding: 0 20px;
+    }
+    
+    .nav-tabs {
+      gap: 20px;
+    }
+    
     .bottom-navigation {
       height: 80px;
       padding: 0 1rem;
@@ -401,6 +411,14 @@
       font-size: 32px;
     }
     
+    .bottom-nav-items {
+      padding: 0 8px;
+    }
+    
+    .nav-tabs {
+      gap: 12px;
+    }
+    
     .bottom-navigation {
       height: 60px;
       padding: 0 0.5rem;
diff --git a/lark-ui/src/routes/+page.svelte b/lark-ui/src/routes/+page.svelte
index 06d74a5..34c412b 100644
--- a/lark-ui/src/routes/+page.svelte
+++ b/lark-ui/src/routes/+page.svelte
@@ -382,10 +382,10 @@
   </section>
 
   <section
-    class="w-full flex flex-col items-center overflow-x-hidden pt-12 md:pt-16"
+    class="w-full flex flex-col items-center pt-12 md:pt-16"
   >
     <div
-      class="bg-[#2A2746] aspect-video w-[110%] sm:w-[95%] md:w-[85%] lg:w-4/5 p-4 flex items-center justify-center mb-8 relative z-10"
+      class="bg-[#2A2746] aspect-video w-[95%] sm:w-[95%] md:w-[85%] lg:w-4/5 p-4 flex items-center justify-center mb-8 relative z-10"
     >
       <iframe
         width="560"
@@ -401,7 +401,7 @@
     </div>
 
     <div
-      class="w-[110%] sm:w-[95%] md:w-[85%] lg:w-4/5 relative block leading-[0]"
+      class="w-[95%] sm:w-[95%] md:w-[85%] lg:w-4/5 relative block leading-[0]"
     >
       <img alt="" class="w-full h-auto block" src="/envelope.svg" />
 
diff --git a/lark-ui/src/routes/app/explore/+page.svelte b/lark-ui/src/routes/app/explore/+page.svelte
index 62b356b..7ea1b93 100644
--- a/lark-ui/src/routes/app/explore/+page.svelte
+++ b/lark-ui/src/routes/app/explore/+page.svelte
@@ -247,7 +247,7 @@
 			<p class="text-[3vh]">No approved projects yet. Check back soon!</p>
 		</div>
 	{:else}
-		<div class="grid grid-cols-4 w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh]">
+		<div class="grid w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh]" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
 			{#each visibleProjects as project (project.id)}
 				<ProjectCard
 					{project}
diff --git a/lark-ui/src/routes/app/explore/Leaderboard.svelte b/lark-ui/src/routes/app/explore/Leaderboard.svelte
index 0cb3993..95af465 100644
--- a/lark-ui/src/routes/app/explore/Leaderboard.svelte
+++ b/lark-ui/src/routes/app/explore/Leaderboard.svelte
@@ -36,7 +36,7 @@
     }
 
     .leaderboard.small {
-        width: 18vw;
+        width: clamp(200px, 18vw, 400px);
         height: 22vh;
         cursor: pointer;
     }
diff --git a/lark-ui/src/routes/app/shop/+page.svelte b/lark-ui/src/routes/app/shop/+page.svelte
index 8ee7bb8..a889bfa 100644
--- a/lark-ui/src/routes/app/shop/+page.svelte
+++ b/lark-ui/src/routes/app/shop/+page.svelte
@@ -76,7 +76,7 @@
         {#if items.length === 0}
             <div class="empty">No items available in the shop yet.</div>
         {:else}
-            <div class="grid grid-cols-4 w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh] text-[#fee1c0]">
+            <div class="grid w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh] text-[#fee1c0]" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
                 {#each items as item}
                     <ShopCard 
                         itemId={item.itemId}