diff --git a/app/pages/home/home.html b/app/pages/home/home.html
index 49ade5f..5f10e96 100644
--- a/app/pages/home/home.html
+++ b/app/pages/home/home.html
@@ -42,7 +42,7 @@
             </div>
         </div>
         <h4>Friends ( {{friendcount}} )</h4>
-        <div class="w-100 p-2 d-flex card-container" style="overflow-x: hidden;min-height: 100px;">
+        <div class="w-100 p-2 d-flex flex-nowrap card-container friends-scroll" style="min-height: 100px;">
             {% for friend in friends %}
                 <a href="/users/{{friend.id}}/profile">
                     <div style="height: fit-content; width:90px;" class="me-3">
diff --git a/app/static/css/home.css b/app/static/css/home.css
index 8ea49a5..68b8739 100644
--- a/app/static/css/home.css
+++ b/app/static/css/home.css
@@ -30,4 +30,18 @@
     display: table;
     margin: 0 auto;
 
-}
\ No newline at end of file
+}
+
+.friends-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    white-space: nowrap;
+}
+
+.friends-scroll a {
+    flex: 0 0 auto;
+}
+
+.friends-scroll::-webkit-scrollbar { display: none; }
+.friends-scroll { -ms-overflow-style: none; scrollbar-width: none; }
\ No newline at end of file