diff --git a/src/components/AddIngredientView.vue b/src/components/AddIngredientView.vue
index d5c4357..105ac30 100644
--- a/src/components/AddIngredientView.vue
+++ b/src/components/AddIngredientView.vue
@@ -165,4 +165,23 @@ export default {
 .next {
   text-align: right;
 }
+
+.btn-primary {
+  width: fit-content;
+  box-shadow: none;
+}
+
+.col-md-2 {
+  background-color: #ffffff00 !important;
+}
+
+.col-md-10,
+.col-md-2 {
+  padding-left: 15px !important;
+  padding-right: 15px !important;
+}
+
+.container {
+  background-color: white;
+}
 </style>
diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index b3d11cc..0a17b2f 100644
--- a/src/components/HomeView.vue
+++ b/src/components/HomeView.vue
@@ -71,57 +71,5 @@ export default {
 </script>
 
 <style scoped>
-/* TODO(#16): set script to have the inital tab (IngredientFeed) button active */
-/* TODO(#9): replace this icon with the ones we're using in the figma diagrams */
-.container {
-  padding: 0 !important;
-  margin: 0 !important;
-  max-width: 100%;
-}
-
-.col-md-2,
-.col-md-10 {
-  padding: 0;
-}
-
-.list-group {
-  margin: 0 !important;
-}
-
-.sectionicons {
-  margin-right: 10px;
-}
-
-.pb-2,
-.py-2 {
-  padding: 1.5rem !important;
-  margin: 0 !important;
-}
-
-button {
-  width: 100%;
-  padding: 20px;
-  border: none;
-  background-color: white;
-  text-align: left;
-}
-
-button:hover {
-  color: green;
-  font-weight: bold;
-}
-
-.svg-inline--fa {
-  margin-right: 10px;
-  font-size: 20px;
-}
-
-.white {
-  color: black;
-}
-
-.green {
-  color: #008600;
-  font-weight: bold;
-}
+@import "css/HomeView.css";
 </style>
diff --git a/src/components/IngredientFeed.vue b/src/components/IngredientFeed.vue
index 03b8fc0..f6e15e8 100644
--- a/src/components/IngredientFeed.vue
+++ b/src/components/IngredientFeed.vue
@@ -39,7 +39,7 @@
             placeholder="Search Inventory..."
             v-model="searchString"
             type="text"
-            class="form-control"
+            class="form-control search-feeds"
           />
         </div>
         <button
@@ -298,7 +298,9 @@ export default {
 
 <style scoped>
 /* TODO(41): Extract css into separate file */
-.container {
+@import "css/FeedStyles.css";
+@import "css/IngredientFeed.css";
+/* .container {
   padding: 0 !important;
   margin: 0 !important;
   background-color: #f9f9f9;
@@ -338,9 +340,9 @@ export default {
   border-radius: 50%;
   height: fit-content;
   align-self: center;
-}
+} */
 
-.type-of-food {
+/* .type-of-food {
   width: 10vw;
   height: 5vw;
   border-radius: 15px;
@@ -378,19 +380,19 @@ export default {
     url("../assets/food.png");
   margin: 15px;
   padding: 0;
-}
+} */
 
-.col-md-auto {
+/* .col-md-auto {
   padding: 0;
   margin: 0;
-}
+} */
 
-.categories {
+/* .categories {
   list-style: none;
   display: flex;
-}
+} */
 
-ul {
+/* ul {
   margin: 0;
   display: flex;
   max-width: 80vw;
@@ -402,16 +404,18 @@ ul {
 h3 {
   padding-left: 15px;
   padding-top: 15px;
-}
+} */
 
-.dropdown-menu {
+/* .dropdown-menu {
   display: none;
-}
+} */
 
-.btn-sortBy {
+/* .btn-sortBy {
   color: black !important;
   background-color: white !important;
   border: none;
+  border-radius: 100px;
+  box-shadow: 0px 3px 3px #bdbdbd;
 }
 
 .btn-sortBy:hover,
@@ -419,9 +423,9 @@ h3 {
 .btn-sortBy:focus {
   color: white !important;
   background-color: #008600 !important;
-}
+} */
 
-.dropdown-item.active,
+/* .dropdown-item.active,
 .dropdown-item:active {
   background-color: #008600;
 }
@@ -430,5 +434,5 @@ h3 {
   user-select: none;
   cursor: pointer;
   width: 100%;
-}
+} */
 </style>
diff --git a/src/components/ModalView.vue b/src/components/ModalView.vue
index c203cef..e573607 100644
--- a/src/components/ModalView.vue
+++ b/src/components/ModalView.vue
@@ -80,4 +80,13 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.btn-secondary {
+  width: fit-content;
+  box-shadow: none;
+}
+.btn-primary {
+  width: fit-content;
+  box-shadow: none;
+}
+</style>
diff --git a/src/components/RecipeFeed.vue b/src/components/RecipeFeed.vue
index 20688a9..af76ef7 100644
--- a/src/components/RecipeFeed.vue
+++ b/src/components/RecipeFeed.vue
@@ -40,7 +40,7 @@
             placeholder="Search Recipes..."
             v-model="searchString"
             type="text"
-            class="form-control"
+            class="form-control search-feeds"
           />
         </div>
         <!-- TODO(59): Add a button for search -->
@@ -74,7 +74,7 @@
                 <div v-for="(recipe, name) in types" :key="name">
                   <div class="col-md-auto">
                     <button type="button" class="btn recipe-item">
-                      <div class="col-md-auto text-center recipe-text">
+                      <div class="col-md-auto recipe-text">
                         {{ name }}
                       </div>
                     </button>
@@ -179,49 +179,10 @@ export default {
 <style scoped>
 /* TODO(41): If the styles for this and ingredient are identical, make them share
 css. If not, just extract this into a separate css file */
-.container {
-  padding: 0 !important;
-  margin: 0 !important;
-  background-color: #f9f9f9;
-  max-width: 100%;
-}
-
-.btn {
-  background-color: white;
-  border-radius: 100px;
-  box-shadow: 0px 3px 3px #bdbdbd;
-}
-
-.tool-bar {
-  margin: 0 !important;
-  flex-wrap: wrap;
-  height: fit-content;
-  display: flex;
-  justify-content: space-between;
-}
-
-.form-outline {
-  padding-right: 20px;
-}
-.form-control {
-  border: none;
-  border-radius: 100px !important;
-  box-shadow: 0px 3px 3px #bdbdbd;
-  display: inline-block;
-}
-
-.tool-bar-container {
-  display: flex;
-  padding: 20px;
-}
-
-.btn-floating {
-  border-radius: 50%;
-  height: fit-content;
-  align-self: center;
-}
+@import "css/FeedStyles.css";
+@import "css/RecipeFeed.css";
 
-.type-of-recipe {
+/* .type-of-recipe {
   width: 10vw;
   height: 5vw;
   border-radius: 15px;
@@ -250,7 +211,7 @@ css. If not, just extract this into a separate css file */
   width: 12vw;
   height: 19vw;
   border-radius: 15px;
-  /* TODO(40): Update this to display the image from the ingredient in inventory */
+  /* TODO(40): Update this to display the image from the ingredient in inventory
   background-size: auto;
   background-image: linear-gradient(
       to bottom,
@@ -262,21 +223,22 @@ css. If not, just extract this into a separate css file */
   padding: 0;
 }
 
+li {
+  list-style: none;
+} */
+
+/* 
 .col-md-auto {
   padding: 0;
   margin: 0;
-}
-
-li {
-  list-style: none;
-}
+} */
 
-.categories {
+/* .categories {
   list-style: none;
   display: flex;
-}
+} */
 
-ul {
+/* ul {
   margin: 0;
   display: flex;
   max-width: 80vw;
@@ -288,13 +250,13 @@ ul {
 h3 {
   padding-left: 15px;
   padding-top: 15px;
-}
+} */
 
-.dropdown-menu {
+/* .dropdown-menu {
   display: none;
-}
+} */
 
-.btn-sortBy {
+/* .btn-sortBy {
   color: black !important;
   background-color: white !important;
   border: none;
@@ -305,9 +267,9 @@ h3 {
 .btn-sortBy:focus {
   color: white !important;
   background-color: #008600 !important;
-}
+} */
 
-.dropdown-item.active,
+/* .dropdown-item.active,
 .dropdown-item:active {
   background-color: #008600;
 }
@@ -316,5 +278,5 @@ h3 {
   user-select: none;
   cursor: pointer;
   width: 100%;
-}
+} */
 </style>
diff --git a/src/components/ShoppingListFeed.vue b/src/components/ShoppingListFeed.vue
index 76413c1..934f075 100644
--- a/src/components/ShoppingListFeed.vue
+++ b/src/components/ShoppingListFeed.vue
@@ -37,7 +37,7 @@
             placeholder="Search Shopping List..."
             v-model="searchString"
             type="text"
-            class="form-control"
+            class="form-control search-feeds"
           />
         </div>
         <button
@@ -367,49 +367,10 @@ export default {
 
 <style scoped>
 /* TODO(41): Extract css into separate file */
-.container {
-  padding: 0 !important;
-  margin: 0 !important;
-  background-color: #f9f9f9;
-  max-width: 100%;
-}
-
-.btn {
-  background-color: white;
-  border-radius: 100px;
-  box-shadow: 0px 3px 3px #bdbdbd;
-}
-
-.tool-bar {
-  margin: 0 !important;
-  flex-wrap: wrap;
-  height: fit-content;
-  display: flex;
-  justify-content: space-between;
-}
-
-.form-outline {
-  padding-right: 20px;
-}
-.form-control {
-  border: none;
-  border-radius: 100px !important;
-  box-shadow: 0px 3px 3px #bdbdbd;
-  display: inline-block;
-}
+@import "css/FeedStyles.css";
+@import "css/ShoppingListFeed.css";
 
-.tool-bar-container {
-  display: flex;
-  padding: 20px;
-}
-
-.btn-floating {
-  border-radius: 50%;
-  height: fit-content;
-  align-self: center;
-}
-
-ul {
+/* ul {
   margin: 0;
   display: flex;
   max-width: 80vw;
@@ -421,13 +382,13 @@ ul {
 h3 {
   padding-left: 15px;
   padding-top: 15px;
-}
+} */
 
-.dropdown-menu {
+/* .dropdown-menu {
   display: none;
-}
+} */
 
-.btn-sortBy {
+/* .btn-sortBy {
   color: black !important;
   background-color: white !important;
   border: none;
@@ -438,14 +399,14 @@ h3 {
 .btn-sortBy:focus {
   color: white !important;
   background-color: #008600 !important;
-}
+} */
 
-.dropdown-item.active,
+/* .dropdown-item.active,
 .dropdown-item:active {
   background-color: #008600;
-}
+} */
 
-.shopping-item {
+/* .shopping-item {
   width: 65vw;
   height: 10vw;
   border-radius: 15px;
@@ -506,11 +467,11 @@ h3 {
 .confirm:focus {
   background-color: #33ff00;
   color: white;
-}
+} */
 
-.options {
+/* .options {
   user-select: none;
   cursor: pointer;
   width: 100%;
-}
+} */
 </style>
diff --git a/src/components/css/FeedStyles.css b/src/components/css/FeedStyles.css
new file mode 100644
index 0000000..8285b93
--- /dev/null
+++ b/src/components/css/FeedStyles.css
@@ -0,0 +1,113 @@
+:root {
+  --our-green: #008600;
+  --button-shadows: #bdbdbd;
+  --feed-background: #f9f9f9;
+  --button-focus-blue: #80bdff;
+}
+
+.container {
+  padding: 0 !important;
+  margin: 0 !important;
+  background-color: var(--feed-background);
+  max-width: 100%;
+}
+
+.btn {
+  border-radius: 100px;
+  box-shadow: 0px 3px 3px var(--button-shadows);
+}
+
+.tool-bar {
+  margin: 0 !important;
+  flex-wrap: wrap;
+  height: fit-content;
+  display: flex;
+  justify-content: space-between;
+}
+
+.form-outline {
+  padding-right: 20px;
+}
+
+.col-md-auto {
+  padding: 0;
+  margin: 0;
+}
+
+.search-feeds {
+  border: none !important;
+  border-radius: 100px !important;
+  box-shadow: 0px 3px 3px var(--button-shadows) !important;
+  display: inline-block !important;
+}
+
+.search-feeds:focus {
+  border-color: var(----button-focus-blue) !important;
+  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%) !important;
+}
+
+.tool-bar-container {
+  display: flex;
+  padding: 20px;
+}
+
+.categories {
+  list-style: none;
+  display: flex;
+}
+
+.btn-floating {
+  border-radius: 50% !important;
+  width: fit-content;
+  height: fit-content;
+  align-self: center;
+}
+
+.btn-sortBy {
+  color: black !important;
+  background-color: white;
+  border: none;
+  border-radius: 100px !important;
+  box-shadow: 0px 3px 3px var(--button-shadows) !important;
+}
+
+.btn-sortBy:hover,
+.btn-sortBy:active,
+.btn-sortBy:focus {
+  color: white !important;
+  background-color: var(--our-green);
+}
+
+ul {
+  margin: 0 !important;
+  display: flex;
+  max-width: 80vw;
+  padding: 0;
+  overflow: auto;
+  overflow-y: hidden;
+}
+
+h3 {
+  padding-left: 15px;
+  padding-top: 15px;
+}
+
+.dropdown-menu {
+  display: none;
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  background-color: var(--our-green) !important;
+}
+
+.options {
+  user-select: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+.btn-group {
+  margin: 0 !important;
+  border-radius: 15px !important;
+}
diff --git a/src/components/css/HomeView.css b/src/components/css/HomeView.css
new file mode 100644
index 0000000..d5f7ce9
--- /dev/null
+++ b/src/components/css/HomeView.css
@@ -0,0 +1,59 @@
+:root {
+  --our-green: #008600;
+  --side-bar-color: white;
+}
+
+.container {
+  padding: 0 !important;
+  margin: 0 !important;
+  max-width: 100%;
+}
+
+.col-md-2,
+.col-md-10 {
+  padding: 0 !important;
+}
+
+.col-md-2 {
+  background-color: var(--side-bar-color) !important;
+}
+
+.list-group {
+  margin: 0 !important;
+}
+
+.sectionicons {
+  margin-right: 10px;
+}
+
+.pb-2,
+.py-2 {
+  padding: 1.5rem !important;
+  margin: 0 !important;
+}
+
+.svg-inline--fa {
+  margin-right: 10px;
+  font-size: 20px;
+}
+
+.white, .green {
+  width: 100%;
+  padding: 20px;
+  border: none;
+  background-color: white;
+  text-align: left;
+}
+.white:hover, .green:hover {
+  color: green;
+  font-weight: bold;
+}
+
+.white {
+  color: black;
+}
+
+.green {
+  color: var(--our-green);
+  font-weight: bold;
+}
diff --git a/src/components/css/IngredientFeed.css b/src/components/css/IngredientFeed.css
new file mode 100644
index 0000000..046901d
--- /dev/null
+++ b/src/components/css/IngredientFeed.css
@@ -0,0 +1,44 @@
+:root {
+  --type-color: lightgrey;
+  --text-color: white;
+}
+
+.type-of-food {
+  width: 10vw;
+  height: 5vw;
+  border-radius: 15px;
+  align-items: center;
+  color: black;
+  background-color: var(--type-color);
+  margin: 15px;
+}
+
+.food-text {
+  text-align: left !important;
+  font-size: 1rem;
+  color: var(--text-color);
+  top: 30%;
+  padding: 8% !important;
+}
+
+.type-of-food,
+.food-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.food-item {
+  width: 12vw;
+  height: 19vw;
+  border-radius: 15px;
+  background-size: auto;
+  background-image: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0%),
+      rgb(0 0 0 / 73%)
+    ),
+    url("../../assets/food.png");
+  margin: 15px;
+  padding: 0;
+}
diff --git a/src/components/css/LoginRegisterForm.css b/src/components/css/LoginRegisterForm.css
index 46bfeb5..59d8607 100644
--- a/src/components/css/LoginRegisterForm.css
+++ b/src/components/css/LoginRegisterForm.css
@@ -1,3 +1,12 @@
+:root {
+  --our-green: #008600;
+  --error-color: red;
+  --login-register-btn-color: #006600;
+  --login-register-btn-color-hover: #005600;
+  --login-register-dont-have-account-color: white;
+  --login-register-dont-have-account-color-hover: lightgrey;
+}
+
 label {
   display: block;
   margin-top: 10px;
@@ -64,7 +73,7 @@ body,
 }
 
 .error-feedback {
-  color: red;
+  color: var(--error-color);
 }
 
 .content_center {
@@ -95,28 +104,34 @@ h1 {
 }
 
 .btn-primary {
-  background-color: #008600 !important;
-  border-color: #008600 !important;
+  background-color: var(--our-green) !important;
+  border-color: var(--our-green) !important;
+  box-shadow: none;
 }
 
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
-  background-color: #006600 !important;
-  border-color: #005600 !important;
+  background-color: var(--login-register-btn-color) !important;
+  border-color: var(--login-register-btn-color-hover) !important;
+  font-weight: normal;
 }
 
 .btn-secondary {
-  color: #008600 !important;
-  background-color: white !important;
-  border-color: white !important;
+  color: var(--our-green) !important;
+  background-color: var(--login-register-dont-have-account-color) !important;
+  border-color: var(--login-register-dont-have-account-color) !important;
+  box-shadow: none;
 }
 
 .btn-secondary:hover,
 .btn-secondary:focus,
 .btn-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-secondary.dropdown-toggle {
-  background-color: lightgrey !important;
-  border-color: lightgrey !important;
+  background-color: var(
+    --login-register-dont-have-account-color-hover
+  ) !important;
+  border-color: var(--login-register-dont-have-account-color-hover) !important;
+  font-weight: normal;
 }
diff --git a/src/components/css/RecipeFeed.css b/src/components/css/RecipeFeed.css
new file mode 100644
index 0000000..1275699
--- /dev/null
+++ b/src/components/css/RecipeFeed.css
@@ -0,0 +1,49 @@
+:root {
+  --type-color: lightgrey;
+  --text-color: white;
+}
+
+.type-of-recipe {
+  width: 10vw;
+  height: 5vw;
+  border-radius: 15px !important;
+  align-items: center;
+  color: black;
+  background-color: var(--type-color) !important;
+  margin: 15px !important;
+}
+
+.recipe-text {
+  text-align: left !important;
+  font-size: 1rem;
+  color: var(--text-color);
+  top: 30%;
+  padding: 8% !important;
+}
+
+.type-of-recipe,
+.recipe-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: normal;
+}
+
+.recipe-item {
+  width: 12vw;
+  height: 19vw;
+  border-radius: 15px !important;
+  background-size: auto;
+  background-image: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0%),
+      rgb(0 0 0 / 73%)
+    ),
+    url("../../assets/food.png");
+  margin: 15px !important;
+  padding: 0 !important;
+}
+
+li {
+  list-style: none;
+}
diff --git a/src/components/css/ShoppingListFeed.css b/src/components/css/ShoppingListFeed.css
new file mode 100644
index 0000000..32a5ac0
--- /dev/null
+++ b/src/components/css/ShoppingListFeed.css
@@ -0,0 +1,63 @@
+:root {
+  --confirm-color: red;
+  --cancel-color: #33ff00;
+  --shopping-text: black;
+}
+
+.shopping-item {
+  width: 65vw;
+  height: 10vw;
+  border-radius: 15px !important;
+  padding: 0 !important;
+  display: flex;
+}
+
+.shopping-item-pic {
+  width: 10vw;
+  height: 10vw;
+  border-radius: 15px !important;
+  background-size: auto;
+  background-image: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0%),
+      rgb(0 0 0 / 73%)
+    ),
+    url("../../assets/food.png");
+  padding: 0;
+}
+
+.shopping-text,
+.amount-needed {
+  display: contents;
+  text-align: left !important;
+  color: var(--shopping-text);
+  padding: 10px !important;
+}
+
+.shopping-text {
+  font-size: 1.5rem;
+}
+
+.amount-needed {
+  font-size: 1rem;
+}
+
+.dropdown-toggle-split {
+  width: 5vw;
+  border-radius: 15px !important;
+  font-size: 1.5rem;
+}
+
+.cancel:hover,
+.cancel:active,
+.cancel:focus {
+  background-color: var(--confirm-color) !important;
+  color: white !important;
+}
+
+.confirm:hover,
+.confirm:active,
+.confirm:focus {
+  background-color: var(--cancel-color) !important;
+  color: white !important;
+}