diff --git a/src/components/IngredientFeed.vue b/src/components/IngredientFeed.vue
index 03b8fc0..0cd91c4 100644
--- a/src/components/IngredientFeed.vue
+++ b/src/components/IngredientFeed.vue
@@ -117,7 +117,15 @@
               <h3>{{ category.name }}</h3>
             </div>
             <div class="row">
-              <ul>
+              <ul :id="category.name + 'scrollbar'">
+                <!-- TODO: Only have them appear when overflow -->
+                <div id="left-scroll-button" class="left-scroll btn scroll">
+                  <i
+                    class="fa fa-chevron-left"
+                    @click="scroll_left(category.name + 'scrollbar')"
+                    aria-hidden="true"
+                  ></i>
+                </div>
                 <div v-for="item in category.items" :key="item">
                   <div class="col-md-auto">
                     <button
@@ -142,6 +150,14 @@
                     </button>
                   </div>
                 </div>
+                <!-- TODO: Only have them appear when overflow -->
+                <div
+                  id="right-scroll-button"
+                  class="right-scroll btn scroll"
+                  @click="scroll_right(category.name + 'scrollbar')"
+                >
+                  <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                </div>
               </ul>
             </div>
           </div>
@@ -266,6 +282,14 @@ export default {
         }
       );
     },
+    scroll_right(categoryToScroll) {
+      let content = document.getElementById(categoryToScroll);
+      content.scrollLeft += 500;
+    },
+    scroll_left(categoryToScroll) {
+      let content = document.getElementById(categoryToScroll);
+      content.scrollLeft -= 500;
+    },
   },
   watch: {
     selected(newVal) {
@@ -397,6 +421,7 @@ ul {
   padding: 0;
   overflow: auto;
   overflow-y: hidden;
+  overflow-x: hidden;
 }
 
 h3 {
diff --git a/src/components/RecipeFeed.vue b/src/components/RecipeFeed.vue
index 20688a9..6f4cb29 100644
--- a/src/components/RecipeFeed.vue
+++ b/src/components/RecipeFeed.vue
@@ -70,7 +70,14 @@
               <h3>{{ name }}</h3>
             </div>
             <div class="row">
-              <ul>
+              <ul :id="name + 'scrollbar'">
+                <div id="left-scroll-button" class="left-scroll btn scroll">
+                  <i
+                    class="fa fa-chevron-left"
+                    @click="scroll_left(name + 'scrollbar')"
+                    aria-hidden="true"
+                  ></i>
+                </div>
                 <div v-for="(recipe, name) in types" :key="name">
                   <div class="col-md-auto">
                     <button type="button" class="btn recipe-item">
@@ -80,6 +87,13 @@
                     </button>
                   </div>
                 </div>
+                <div
+                  id="right-scroll-button"
+                  class="right-scroll btn scroll"
+                  @click="scroll_right(name + 'scrollbar')"
+                >
+                  <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                </div>
               </ul>
             </div>
           </div>
@@ -98,6 +112,16 @@ export default {
       return this.$store.state.auth.user;
     },
   },
+  methods: {
+    scroll_right(categoryToScroll) {
+      let content = document.getElementById(categoryToScroll);
+      content.scrollLeft += 500;
+    },
+    scroll_left(categoryToScroll) {
+      let content = document.getElementById(categoryToScroll);
+      content.scrollLeft -= 500;
+    },
+  },
   mounted() {
     if (!this.currentUser) {
       this.$router.push("/login");
@@ -135,6 +159,34 @@ export default {
             recipeName: "Recipe7",
             recipeType: "Category1",
           },
+          Recipe8: {
+            recipeName: "Recipe1",
+            recipeType: "Category1",
+          },
+          Recipe9: {
+            recipeName: "RecipeNameVeryLong",
+            recipeType: "Category1",
+          },
+          Recipe10: {
+            recipeName: "Recipe3",
+            recipeType: "Category1",
+          },
+          Recipe11: {
+            recipeName: "Recipe4",
+            recipeType: "Category1",
+          },
+          Recipe12: {
+            recipeName: "Recipe5",
+            recipeType: "Category1",
+          },
+          Recipe13: {
+            recipeName: "Recipe6",
+            recipeType: "Category1",
+          },
+          Recipe14: {
+            recipeName: "Recipe7",
+            recipeType: "Category1",
+          },
         },
 
         Category2: {
@@ -159,6 +211,37 @@ export default {
             recipeType: "Category5",
           },
         },
+
+        Category3: {
+          Recipe1: {
+            recipeName: "Recipe1",
+            recipeType: "Category1",
+          },
+          RecipeNameVeryLong: {
+            recipeName: "RecipeNameVeryLong",
+            recipeType: "Category1",
+          },
+          Recipe3: {
+            recipeName: "Recipe3",
+            recipeType: "Category1",
+          },
+          Recipe4: {
+            recipeName: "Recipe4",
+            recipeType: "Category1",
+          },
+          Recipe5: {
+            recipeName: "Recipe5",
+            recipeType: "Category1",
+          },
+          Recipe6: {
+            recipeName: "Recipe6",
+            recipeType: "Category1",
+          },
+          Recipe7: {
+            recipeName: "Recipe7",
+            recipeType: "Category1",
+          },
+        },
       },
     ]);
     return {
@@ -283,6 +366,7 @@ ul {
   padding: 0;
   overflow: auto;
   overflow-y: hidden;
+  overflow-x: hidden;
 }
 
 h3 {
@@ -317,4 +401,20 @@ h3 {
   cursor: pointer;
   width: 100%;
 }
+
+.scroll {
+  position: sticky;
+  z-index: 1;
+  height: fit-content;
+}
+
+.left-scroll {
+  top: 40%;
+  left: 3%;
+}
+
+.right-scroll {
+  top: 40%;
+  right: 3%;
+}
 </style>