diff --git a/.gitignore b/.gitignore
index 547fc1a..65ed555 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,9 @@
 .env/
 .env
 
+# Frontend
+.vite/
+
 # Python environment
 env/
 .venv/
diff --git a/CREDITS.md b/CREDITS.md
new file mode 100644
index 0000000..4e15e32
--- /dev/null
+++ b/CREDITS.md
@@ -0,0 +1,8 @@
+# Credits
+
+## Frontend
+
+### Food Pixel Art
+
+- Food pixel art was sourced from ghostpixxells on itch.io
+  - <https://ghostpixxells.itch.io/pixelfood>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0e91204..38ffbdf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -830,9 +830,9 @@
       "license": "MIT"
     },
     "node_modules/@eslint/config-array/node_modules/brace-expansion": {
-      "version": "1.1.16",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
-      "integrity": "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw==",
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
+      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -911,9 +911,9 @@
       "license": "MIT"
     },
     "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.16",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
-      "integrity": "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw==",
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
+      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2430,9 +2430,9 @@
       "license": "MIT"
     },
     "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.16",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
-      "integrity": "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw==",
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
+      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 1961075..566c744 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -11,6 +11,7 @@
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
@@ -20,32 +21,27 @@
 }
 
 @keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 .card {
   padding: 2em;
 }
 
-.card.bCard,
-.card {
-  background-color: var(--card-bg) !important;
-  color: var(--text-color) !important;
+.studygatchi-card {
+  background-color: var(--card-bg);
+  color: var(--text-color);
 }
 
-.card-header {
-  background-color: var(--bg-color) !important;
-  color: var(--text-color) !important;
+.studygatchi-card-header {
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
-.card-body {
-  background-color: var(--card-bg) !important;
-  color: var(--text-color) !important;
+.studygatchi-card-body {
+  background-color: var(--card-bg);
+  color: var(--text-color);
 }
 
 .read-the-docs {
@@ -62,12 +58,10 @@
   font-size: 1rem;
   align-items: center;
   justify-content: center;
-  font-size: 1rem;
   margin-bottom: 5px;
 }
 
 .todolist-addItem {
-  box-sizing: border-box;
   margin: 4px 0 0 5px;
   font-size: 12px;
   padding: 4px 12px;
@@ -93,7 +87,6 @@
 }
 
 .todolist-trashbutton {
-  box-sizing: border-box;
   margin: 4px 0 0 5px;
   font-size: 12px;
   padding: 4px 12px;
@@ -138,6 +131,7 @@
   border-radius: 4px;
   background-color: #fff;
 }
+
 .wrapper label::after {
   content: "";
   position: absolute;
@@ -182,4 +176,4 @@
 .settings input {
   margin-top: 0.25rem;
   padding: 0.25rem;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9adf127..6eae781 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,12 +2,12 @@ import "./App.css";
 import { useState } from "react";
 import SettingsMenu from "./components/SettingsMenu";
 import NavBar from "./components/NavBar"; //
-import Home from "./components/Home";
 import Timer from "./components/Timer";
 import ToDoList from "./ToDoList";
 import GooberMenu from "./components/GooberMenu";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { ThemeProvider } from './components/ThemeProvider';
+import "bootstrap/dist/css/bootstrap.min.css";
 
 function App() {
   // had to add because bootstrap defaults to light mode
@@ -43,11 +43,9 @@ function App() {
             currentHealth={currentHealth}
           />
           <Routes>
-            <Route path="/" element={<Home />} />
             <Route path="/settings" element={<SettingsMenu />} />
             <Route path="/timer" element={<Timer />} />
             <Route path="/todo" element={<ToDoList />} />
-            <Route path="*" element={<Home />} />
           </Routes>
         </div>
       </Router>
diff --git a/frontend/src/assets/backgrounds/placeholder.jpg b/frontend/src/assets/backgrounds/placeholder.jpg
new file mode 100644
index 0000000..f626255
Binary files /dev/null and b/frontend/src/assets/backgrounds/placeholder.jpg differ
diff --git a/frontend/src/assets/food/dishes/01_dish.png b/frontend/src/assets/food/dishes/01_dish.png
new file mode 100644
index 0000000..eaf3528
Binary files /dev/null and b/frontend/src/assets/food/dishes/01_dish.png differ
diff --git a/frontend/src/assets/food/dishes/02_dish_2.png b/frontend/src/assets/food/dishes/02_dish_2.png
new file mode 100644
index 0000000..7cda624
Binary files /dev/null and b/frontend/src/assets/food/dishes/02_dish_2.png differ
diff --git a/frontend/src/assets/food/dishes/03_dish_pile.png b/frontend/src/assets/food/dishes/03_dish_pile.png
new file mode 100644
index 0000000..25ae97b
Binary files /dev/null and b/frontend/src/assets/food/dishes/03_dish_pile.png differ
diff --git a/frontend/src/assets/food/dishes/04_bowl.png b/frontend/src/assets/food/dishes/04_bowl.png
new file mode 100644
index 0000000..d9a462d
Binary files /dev/null and b/frontend/src/assets/food/dishes/04_bowl.png differ
diff --git a/frontend/src/assets/food/foods.txt b/frontend/src/assets/food/foods.txt
new file mode 100644
index 0000000..e064ed3
--- /dev/null
+++ b/frontend/src/assets/food/foods.txt
@@ -0,0 +1,103 @@
+01_dish.png
+02_dish_2.png
+03_dish_pile.png
+04_bowl.png
+05_apple_pie.png
+06_apple_pie_dish.png
+07_bread.png
+08_bread_dish.png
+09_baguette.png
+100_taco_dish.png
+101_waffle.png
+102_waffle_dish.png
+10_baguette_dish.png
+11_bun.png
+12_bun_dish.png
+13_bacon.png
+14_bacon_dish.png
+15_burger.png
+16_burger_dish.png
+17_burger_napkin.png
+18_burrito.png
+19_burrito_dish.png
+20_bagel.png
+21_bagel_dish.png
+22_cheesecake.png
+23_cheesecake_dish.png
+24_cheesepuff.png
+25_cheesepuff_bowl.png
+26_chocolate.png
+27_chocolate_dish.png
+28_cookies.png
+29_cookies_dish.png
+30_chocolatecake.png
+31_chocolatecake_dish.png
+32_curry.png
+33_curry_dish.png
+34_donut.png
+35_donut_dish.png
+36_dumplings.png
+37_dumplings_dish.png
+38_friedegg.png
+39_friedegg_dish.png
+40_eggsalad.png
+41_eggsalad_bowl.png
+42_eggtart.png
+43_eggtart_dish.png
+44_frenchfries.png
+45_frenchfries_dish.png
+46_fruitcake.png
+47_fruitcake_dish.png
+48_garlicbread.png
+49_garlicbread_dish.png
+50_giantgummybear.png
+51_giantgummybear_dish.png
+52_gingerbreadman.png
+53_gingerbreadman_dish.png
+54_hotdog.png
+55_hotdog_sauce.png
+56_hotdog_dish.png
+57_icecream.png
+58_icecream_bowl.png
+59_jelly.png
+60_jelly_dish.png
+61_jam.png
+62_jam_dish.png
+63_lemonpie.png
+64_lemonpie_dish.png
+65_loafbread.png
+66_loafbread_dish.png
+67_macncheese.png
+68_macncheese_dish.png
+69_meatball.png
+70_meatball_dish.png
+71_nacho.png
+72_nacho_dish.png
+73_omlet.png
+74_omlet_dish.png
+75_pudding.png
+76_pudding_dish.png
+77_potatochips.png
+78_potatochips_bowl.png
+79_pancakes.png
+80_pancakes_dish.png
+81_pizza.png
+82_pizza_dish.png
+83_popcorn.png
+84_popcorn_bowl.png
+85_roastedchicken.png
+86_roastedchicken_dish.png
+87_ramen.png
+88_salmon.png
+89_salmon_dish.png
+90_strawberrycake.png
+91_strawberrycake_dish.png
+92_sandwich.png
+93_sandwich_dish.png
+94_spaghetti.png
+95_steak.png
+96_steak_dish.png
+97_sushi.png
+98_sushi_dish.png
+99_taco.png
+foods.txt
diff --git a/frontend/src/assets/food/loose-food/05_apple_pie.png b/frontend/src/assets/food/loose-food/05_apple_pie.png
new file mode 100644
index 0000000..6ef1fe8
Binary files /dev/null and b/frontend/src/assets/food/loose-food/05_apple_pie.png differ
diff --git a/frontend/src/assets/food/loose-food/07_bread.png b/frontend/src/assets/food/loose-food/07_bread.png
new file mode 100644
index 0000000..23946d7
Binary files /dev/null and b/frontend/src/assets/food/loose-food/07_bread.png differ
diff --git a/frontend/src/assets/food/loose-food/09_baguette.png b/frontend/src/assets/food/loose-food/09_baguette.png
new file mode 100644
index 0000000..144b5bf
Binary files /dev/null and b/frontend/src/assets/food/loose-food/09_baguette.png differ
diff --git a/frontend/src/assets/food/loose-food/101_waffle.png b/frontend/src/assets/food/loose-food/101_waffle.png
new file mode 100644
index 0000000..14e1eb9
Binary files /dev/null and b/frontend/src/assets/food/loose-food/101_waffle.png differ
diff --git a/frontend/src/assets/food/loose-food/11_bun.png b/frontend/src/assets/food/loose-food/11_bun.png
new file mode 100644
index 0000000..ef73b0d
Binary files /dev/null and b/frontend/src/assets/food/loose-food/11_bun.png differ
diff --git a/frontend/src/assets/food/loose-food/13_bacon.png b/frontend/src/assets/food/loose-food/13_bacon.png
new file mode 100644
index 0000000..a7bb5b9
Binary files /dev/null and b/frontend/src/assets/food/loose-food/13_bacon.png differ
diff --git a/frontend/src/assets/food/loose-food/15_burger.png b/frontend/src/assets/food/loose-food/15_burger.png
new file mode 100644
index 0000000..db502df
Binary files /dev/null and b/frontend/src/assets/food/loose-food/15_burger.png differ
diff --git a/frontend/src/assets/food/loose-food/17_burger_napkin.png b/frontend/src/assets/food/loose-food/17_burger_napkin.png
new file mode 100644
index 0000000..2c5dc1e
Binary files /dev/null and b/frontend/src/assets/food/loose-food/17_burger_napkin.png differ
diff --git a/frontend/src/assets/food/loose-food/18_burrito.png b/frontend/src/assets/food/loose-food/18_burrito.png
new file mode 100644
index 0000000..9b08ed1
Binary files /dev/null and b/frontend/src/assets/food/loose-food/18_burrito.png differ
diff --git a/frontend/src/assets/food/loose-food/20_bagel.png b/frontend/src/assets/food/loose-food/20_bagel.png
new file mode 100644
index 0000000..5dcc25b
Binary files /dev/null and b/frontend/src/assets/food/loose-food/20_bagel.png differ
diff --git a/frontend/src/assets/food/loose-food/22_cheesecake.png b/frontend/src/assets/food/loose-food/22_cheesecake.png
new file mode 100644
index 0000000..ebf58be
Binary files /dev/null and b/frontend/src/assets/food/loose-food/22_cheesecake.png differ
diff --git a/frontend/src/assets/food/loose-food/24_cheesepuff.png b/frontend/src/assets/food/loose-food/24_cheesepuff.png
new file mode 100644
index 0000000..eeb75e6
Binary files /dev/null and b/frontend/src/assets/food/loose-food/24_cheesepuff.png differ
diff --git a/frontend/src/assets/food/loose-food/25_cheesepuff_bowl.png b/frontend/src/assets/food/loose-food/25_cheesepuff_bowl.png
new file mode 100644
index 0000000..25a8645
Binary files /dev/null and b/frontend/src/assets/food/loose-food/25_cheesepuff_bowl.png differ
diff --git a/frontend/src/assets/food/loose-food/26_chocolate.png b/frontend/src/assets/food/loose-food/26_chocolate.png
new file mode 100644
index 0000000..d2280cf
Binary files /dev/null and b/frontend/src/assets/food/loose-food/26_chocolate.png differ
diff --git a/frontend/src/assets/food/loose-food/28_cookies.png b/frontend/src/assets/food/loose-food/28_cookies.png
new file mode 100644
index 0000000..400d4f5
Binary files /dev/null and b/frontend/src/assets/food/loose-food/28_cookies.png differ
diff --git a/frontend/src/assets/food/loose-food/30_chocolatecake.png b/frontend/src/assets/food/loose-food/30_chocolatecake.png
new file mode 100644
index 0000000..0894d48
Binary files /dev/null and b/frontend/src/assets/food/loose-food/30_chocolatecake.png differ
diff --git a/frontend/src/assets/food/loose-food/32_curry.png b/frontend/src/assets/food/loose-food/32_curry.png
new file mode 100644
index 0000000..719edb6
Binary files /dev/null and b/frontend/src/assets/food/loose-food/32_curry.png differ
diff --git a/frontend/src/assets/food/loose-food/34_donut.png b/frontend/src/assets/food/loose-food/34_donut.png
new file mode 100644
index 0000000..9ab69d1
Binary files /dev/null and b/frontend/src/assets/food/loose-food/34_donut.png differ
diff --git a/frontend/src/assets/food/loose-food/36_dumplings.png b/frontend/src/assets/food/loose-food/36_dumplings.png
new file mode 100644
index 0000000..6c12289
Binary files /dev/null and b/frontend/src/assets/food/loose-food/36_dumplings.png differ
diff --git a/frontend/src/assets/food/loose-food/38_friedegg.png b/frontend/src/assets/food/loose-food/38_friedegg.png
new file mode 100644
index 0000000..fd61fe9
Binary files /dev/null and b/frontend/src/assets/food/loose-food/38_friedegg.png differ
diff --git a/frontend/src/assets/food/loose-food/40_eggsalad.png b/frontend/src/assets/food/loose-food/40_eggsalad.png
new file mode 100644
index 0000000..476abc9
Binary files /dev/null and b/frontend/src/assets/food/loose-food/40_eggsalad.png differ
diff --git a/frontend/src/assets/food/loose-food/41_eggsalad_bowl.png b/frontend/src/assets/food/loose-food/41_eggsalad_bowl.png
new file mode 100644
index 0000000..5ecb731
Binary files /dev/null and b/frontend/src/assets/food/loose-food/41_eggsalad_bowl.png differ
diff --git a/frontend/src/assets/food/loose-food/42_eggtart.png b/frontend/src/assets/food/loose-food/42_eggtart.png
new file mode 100644
index 0000000..22bff2c
Binary files /dev/null and b/frontend/src/assets/food/loose-food/42_eggtart.png differ
diff --git a/frontend/src/assets/food/loose-food/44_frenchfries.png b/frontend/src/assets/food/loose-food/44_frenchfries.png
new file mode 100644
index 0000000..739fe37
Binary files /dev/null and b/frontend/src/assets/food/loose-food/44_frenchfries.png differ
diff --git a/frontend/src/assets/food/loose-food/46_fruitcake.png b/frontend/src/assets/food/loose-food/46_fruitcake.png
new file mode 100644
index 0000000..3d0ccf3
Binary files /dev/null and b/frontend/src/assets/food/loose-food/46_fruitcake.png differ
diff --git a/frontend/src/assets/food/loose-food/48_garlicbread.png b/frontend/src/assets/food/loose-food/48_garlicbread.png
new file mode 100644
index 0000000..2ce85b4
Binary files /dev/null and b/frontend/src/assets/food/loose-food/48_garlicbread.png differ
diff --git a/frontend/src/assets/food/loose-food/50_giantgummybear.png b/frontend/src/assets/food/loose-food/50_giantgummybear.png
new file mode 100644
index 0000000..68a9563
Binary files /dev/null and b/frontend/src/assets/food/loose-food/50_giantgummybear.png differ
diff --git a/frontend/src/assets/food/loose-food/52_gingerbreadman.png b/frontend/src/assets/food/loose-food/52_gingerbreadman.png
new file mode 100644
index 0000000..5a094f1
Binary files /dev/null and b/frontend/src/assets/food/loose-food/52_gingerbreadman.png differ
diff --git a/frontend/src/assets/food/loose-food/54_hotdog.png b/frontend/src/assets/food/loose-food/54_hotdog.png
new file mode 100644
index 0000000..b930964
Binary files /dev/null and b/frontend/src/assets/food/loose-food/54_hotdog.png differ
diff --git a/frontend/src/assets/food/loose-food/55_hotdog_sauce.png b/frontend/src/assets/food/loose-food/55_hotdog_sauce.png
new file mode 100644
index 0000000..8ebf427
Binary files /dev/null and b/frontend/src/assets/food/loose-food/55_hotdog_sauce.png differ
diff --git a/frontend/src/assets/food/loose-food/57_icecream.png b/frontend/src/assets/food/loose-food/57_icecream.png
new file mode 100644
index 0000000..4174d05
Binary files /dev/null and b/frontend/src/assets/food/loose-food/57_icecream.png differ
diff --git a/frontend/src/assets/food/loose-food/58_icecream_bowl.png b/frontend/src/assets/food/loose-food/58_icecream_bowl.png
new file mode 100644
index 0000000..d390197
Binary files /dev/null and b/frontend/src/assets/food/loose-food/58_icecream_bowl.png differ
diff --git a/frontend/src/assets/food/loose-food/59_jelly.png b/frontend/src/assets/food/loose-food/59_jelly.png
new file mode 100644
index 0000000..070a44f
Binary files /dev/null and b/frontend/src/assets/food/loose-food/59_jelly.png differ
diff --git a/frontend/src/assets/food/loose-food/61_jam.png b/frontend/src/assets/food/loose-food/61_jam.png
new file mode 100644
index 0000000..2a675de
Binary files /dev/null and b/frontend/src/assets/food/loose-food/61_jam.png differ
diff --git a/frontend/src/assets/food/loose-food/63_lemonpie.png b/frontend/src/assets/food/loose-food/63_lemonpie.png
new file mode 100644
index 0000000..b853f2c
Binary files /dev/null and b/frontend/src/assets/food/loose-food/63_lemonpie.png differ
diff --git a/frontend/src/assets/food/loose-food/65_loafbread.png b/frontend/src/assets/food/loose-food/65_loafbread.png
new file mode 100644
index 0000000..ebf7582
Binary files /dev/null and b/frontend/src/assets/food/loose-food/65_loafbread.png differ
diff --git a/frontend/src/assets/food/loose-food/67_macncheese.png b/frontend/src/assets/food/loose-food/67_macncheese.png
new file mode 100644
index 0000000..b759e0f
Binary files /dev/null and b/frontend/src/assets/food/loose-food/67_macncheese.png differ
diff --git a/frontend/src/assets/food/loose-food/69_meatball.png b/frontend/src/assets/food/loose-food/69_meatball.png
new file mode 100644
index 0000000..89175f3
Binary files /dev/null and b/frontend/src/assets/food/loose-food/69_meatball.png differ
diff --git a/frontend/src/assets/food/loose-food/71_nacho.png b/frontend/src/assets/food/loose-food/71_nacho.png
new file mode 100644
index 0000000..4b42547
Binary files /dev/null and b/frontend/src/assets/food/loose-food/71_nacho.png differ
diff --git a/frontend/src/assets/food/loose-food/73_omlet.png b/frontend/src/assets/food/loose-food/73_omlet.png
new file mode 100644
index 0000000..39b09ca
Binary files /dev/null and b/frontend/src/assets/food/loose-food/73_omlet.png differ
diff --git a/frontend/src/assets/food/loose-food/75_pudding.png b/frontend/src/assets/food/loose-food/75_pudding.png
new file mode 100644
index 0000000..8b82fec
Binary files /dev/null and b/frontend/src/assets/food/loose-food/75_pudding.png differ
diff --git a/frontend/src/assets/food/loose-food/77_potatochips.png b/frontend/src/assets/food/loose-food/77_potatochips.png
new file mode 100644
index 0000000..c3a4a19
Binary files /dev/null and b/frontend/src/assets/food/loose-food/77_potatochips.png differ
diff --git a/frontend/src/assets/food/loose-food/78_potatochips_bowl.png b/frontend/src/assets/food/loose-food/78_potatochips_bowl.png
new file mode 100644
index 0000000..ebf123d
Binary files /dev/null and b/frontend/src/assets/food/loose-food/78_potatochips_bowl.png differ
diff --git a/frontend/src/assets/food/loose-food/79_pancakes.png b/frontend/src/assets/food/loose-food/79_pancakes.png
new file mode 100644
index 0000000..dc83f7d
Binary files /dev/null and b/frontend/src/assets/food/loose-food/79_pancakes.png differ
diff --git a/frontend/src/assets/food/loose-food/81_pizza.png b/frontend/src/assets/food/loose-food/81_pizza.png
new file mode 100644
index 0000000..d2c07b2
Binary files /dev/null and b/frontend/src/assets/food/loose-food/81_pizza.png differ
diff --git a/frontend/src/assets/food/loose-food/83_popcorn.png b/frontend/src/assets/food/loose-food/83_popcorn.png
new file mode 100644
index 0000000..4cd0b90
Binary files /dev/null and b/frontend/src/assets/food/loose-food/83_popcorn.png differ
diff --git a/frontend/src/assets/food/loose-food/84_popcorn_bowl.png b/frontend/src/assets/food/loose-food/84_popcorn_bowl.png
new file mode 100644
index 0000000..6e403fc
Binary files /dev/null and b/frontend/src/assets/food/loose-food/84_popcorn_bowl.png differ
diff --git a/frontend/src/assets/food/loose-food/85_roastedchicken.png b/frontend/src/assets/food/loose-food/85_roastedchicken.png
new file mode 100644
index 0000000..130d8b4
Binary files /dev/null and b/frontend/src/assets/food/loose-food/85_roastedchicken.png differ
diff --git a/frontend/src/assets/food/loose-food/87_ramen.png b/frontend/src/assets/food/loose-food/87_ramen.png
new file mode 100644
index 0000000..0776c5a
Binary files /dev/null and b/frontend/src/assets/food/loose-food/87_ramen.png differ
diff --git a/frontend/src/assets/food/loose-food/88_salmon.png b/frontend/src/assets/food/loose-food/88_salmon.png
new file mode 100644
index 0000000..870491b
Binary files /dev/null and b/frontend/src/assets/food/loose-food/88_salmon.png differ
diff --git a/frontend/src/assets/food/loose-food/90_strawberrycake.png b/frontend/src/assets/food/loose-food/90_strawberrycake.png
new file mode 100644
index 0000000..18b3a1e
Binary files /dev/null and b/frontend/src/assets/food/loose-food/90_strawberrycake.png differ
diff --git a/frontend/src/assets/food/loose-food/92_sandwich.png b/frontend/src/assets/food/loose-food/92_sandwich.png
new file mode 100644
index 0000000..72f20fb
Binary files /dev/null and b/frontend/src/assets/food/loose-food/92_sandwich.png differ
diff --git a/frontend/src/assets/food/loose-food/94_spaghetti.png b/frontend/src/assets/food/loose-food/94_spaghetti.png
new file mode 100644
index 0000000..3d74660
Binary files /dev/null and b/frontend/src/assets/food/loose-food/94_spaghetti.png differ
diff --git a/frontend/src/assets/food/loose-food/95_steak.png b/frontend/src/assets/food/loose-food/95_steak.png
new file mode 100644
index 0000000..be1453b
Binary files /dev/null and b/frontend/src/assets/food/loose-food/95_steak.png differ
diff --git a/frontend/src/assets/food/loose-food/97_sushi.png b/frontend/src/assets/food/loose-food/97_sushi.png
new file mode 100644
index 0000000..f4c1b19
Binary files /dev/null and b/frontend/src/assets/food/loose-food/97_sushi.png differ
diff --git a/frontend/src/assets/food/loose-food/99_taco.png b/frontend/src/assets/food/loose-food/99_taco.png
new file mode 100644
index 0000000..6892761
Binary files /dev/null and b/frontend/src/assets/food/loose-food/99_taco.png differ
diff --git a/frontend/src/assets/food/plated-food/06_apple_pie_dish.png b/frontend/src/assets/food/plated-food/06_apple_pie_dish.png
new file mode 100644
index 0000000..7b2fdd3
Binary files /dev/null and b/frontend/src/assets/food/plated-food/06_apple_pie_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/08_bread_dish.png b/frontend/src/assets/food/plated-food/08_bread_dish.png
new file mode 100644
index 0000000..112cc13
Binary files /dev/null and b/frontend/src/assets/food/plated-food/08_bread_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/100_taco_dish.png b/frontend/src/assets/food/plated-food/100_taco_dish.png
new file mode 100644
index 0000000..a58a7be
Binary files /dev/null and b/frontend/src/assets/food/plated-food/100_taco_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/102_waffle_dish.png b/frontend/src/assets/food/plated-food/102_waffle_dish.png
new file mode 100644
index 0000000..836f012
Binary files /dev/null and b/frontend/src/assets/food/plated-food/102_waffle_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/10_baguette_dish.png b/frontend/src/assets/food/plated-food/10_baguette_dish.png
new file mode 100644
index 0000000..ebef970
Binary files /dev/null and b/frontend/src/assets/food/plated-food/10_baguette_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/12_bun_dish.png b/frontend/src/assets/food/plated-food/12_bun_dish.png
new file mode 100644
index 0000000..bbf883c
Binary files /dev/null and b/frontend/src/assets/food/plated-food/12_bun_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/14_bacon_dish.png b/frontend/src/assets/food/plated-food/14_bacon_dish.png
new file mode 100644
index 0000000..913faa9
Binary files /dev/null and b/frontend/src/assets/food/plated-food/14_bacon_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/16_burger_dish.png b/frontend/src/assets/food/plated-food/16_burger_dish.png
new file mode 100644
index 0000000..122f659
Binary files /dev/null and b/frontend/src/assets/food/plated-food/16_burger_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/19_burrito_dish.png b/frontend/src/assets/food/plated-food/19_burrito_dish.png
new file mode 100644
index 0000000..5d519d5
Binary files /dev/null and b/frontend/src/assets/food/plated-food/19_burrito_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/21_bagel_dish.png b/frontend/src/assets/food/plated-food/21_bagel_dish.png
new file mode 100644
index 0000000..339785d
Binary files /dev/null and b/frontend/src/assets/food/plated-food/21_bagel_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/23_cheesecake_dish.png b/frontend/src/assets/food/plated-food/23_cheesecake_dish.png
new file mode 100644
index 0000000..3fa6d1c
Binary files /dev/null and b/frontend/src/assets/food/plated-food/23_cheesecake_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/27_chocolate_dish.png b/frontend/src/assets/food/plated-food/27_chocolate_dish.png
new file mode 100644
index 0000000..d232b75
Binary files /dev/null and b/frontend/src/assets/food/plated-food/27_chocolate_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/29_cookies_dish.png b/frontend/src/assets/food/plated-food/29_cookies_dish.png
new file mode 100644
index 0000000..af82afe
Binary files /dev/null and b/frontend/src/assets/food/plated-food/29_cookies_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/31_chocolatecake_dish.png b/frontend/src/assets/food/plated-food/31_chocolatecake_dish.png
new file mode 100644
index 0000000..f63e313
Binary files /dev/null and b/frontend/src/assets/food/plated-food/31_chocolatecake_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/33_curry_dish.png b/frontend/src/assets/food/plated-food/33_curry_dish.png
new file mode 100644
index 0000000..9db1aa0
Binary files /dev/null and b/frontend/src/assets/food/plated-food/33_curry_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/35_donut_dish.png b/frontend/src/assets/food/plated-food/35_donut_dish.png
new file mode 100644
index 0000000..6a53a0c
Binary files /dev/null and b/frontend/src/assets/food/plated-food/35_donut_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/37_dumplings_dish.png b/frontend/src/assets/food/plated-food/37_dumplings_dish.png
new file mode 100644
index 0000000..6883e90
Binary files /dev/null and b/frontend/src/assets/food/plated-food/37_dumplings_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/39_friedegg_dish.png b/frontend/src/assets/food/plated-food/39_friedegg_dish.png
new file mode 100644
index 0000000..0130f74
Binary files /dev/null and b/frontend/src/assets/food/plated-food/39_friedegg_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/43_eggtart_dish.png b/frontend/src/assets/food/plated-food/43_eggtart_dish.png
new file mode 100644
index 0000000..ef8ba81
Binary files /dev/null and b/frontend/src/assets/food/plated-food/43_eggtart_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/45_frenchfries_dish.png b/frontend/src/assets/food/plated-food/45_frenchfries_dish.png
new file mode 100644
index 0000000..6e59262
Binary files /dev/null and b/frontend/src/assets/food/plated-food/45_frenchfries_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/47_fruitcake_dish.png b/frontend/src/assets/food/plated-food/47_fruitcake_dish.png
new file mode 100644
index 0000000..0d4996d
Binary files /dev/null and b/frontend/src/assets/food/plated-food/47_fruitcake_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/49_garlicbread_dish.png b/frontend/src/assets/food/plated-food/49_garlicbread_dish.png
new file mode 100644
index 0000000..e1ed0c9
Binary files /dev/null and b/frontend/src/assets/food/plated-food/49_garlicbread_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/51_giantgummybear_dish.png b/frontend/src/assets/food/plated-food/51_giantgummybear_dish.png
new file mode 100644
index 0000000..5318273
Binary files /dev/null and b/frontend/src/assets/food/plated-food/51_giantgummybear_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/53_gingerbreadman_dish.png b/frontend/src/assets/food/plated-food/53_gingerbreadman_dish.png
new file mode 100644
index 0000000..b103d9b
Binary files /dev/null and b/frontend/src/assets/food/plated-food/53_gingerbreadman_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/56_hotdog_dish.png b/frontend/src/assets/food/plated-food/56_hotdog_dish.png
new file mode 100644
index 0000000..4805d0c
Binary files /dev/null and b/frontend/src/assets/food/plated-food/56_hotdog_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/60_jelly_dish.png b/frontend/src/assets/food/plated-food/60_jelly_dish.png
new file mode 100644
index 0000000..9a0104c
Binary files /dev/null and b/frontend/src/assets/food/plated-food/60_jelly_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/62_jam_dish.png b/frontend/src/assets/food/plated-food/62_jam_dish.png
new file mode 100644
index 0000000..e9b78e2
Binary files /dev/null and b/frontend/src/assets/food/plated-food/62_jam_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/64_lemonpie_dish.png b/frontend/src/assets/food/plated-food/64_lemonpie_dish.png
new file mode 100644
index 0000000..0efa813
Binary files /dev/null and b/frontend/src/assets/food/plated-food/64_lemonpie_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/66_loafbread_dish.png b/frontend/src/assets/food/plated-food/66_loafbread_dish.png
new file mode 100644
index 0000000..198d51e
Binary files /dev/null and b/frontend/src/assets/food/plated-food/66_loafbread_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/68_macncheese_dish.png b/frontend/src/assets/food/plated-food/68_macncheese_dish.png
new file mode 100644
index 0000000..27f0516
Binary files /dev/null and b/frontend/src/assets/food/plated-food/68_macncheese_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/70_meatball_dish.png b/frontend/src/assets/food/plated-food/70_meatball_dish.png
new file mode 100644
index 0000000..724a559
Binary files /dev/null and b/frontend/src/assets/food/plated-food/70_meatball_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/72_nacho_dish.png b/frontend/src/assets/food/plated-food/72_nacho_dish.png
new file mode 100644
index 0000000..e0247e0
Binary files /dev/null and b/frontend/src/assets/food/plated-food/72_nacho_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/74_omlet_dish.png b/frontend/src/assets/food/plated-food/74_omlet_dish.png
new file mode 100644
index 0000000..cd25286
Binary files /dev/null and b/frontend/src/assets/food/plated-food/74_omlet_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/76_pudding_dish.png b/frontend/src/assets/food/plated-food/76_pudding_dish.png
new file mode 100644
index 0000000..66cde0f
Binary files /dev/null and b/frontend/src/assets/food/plated-food/76_pudding_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/80_pancakes_dish.png b/frontend/src/assets/food/plated-food/80_pancakes_dish.png
new file mode 100644
index 0000000..3538153
Binary files /dev/null and b/frontend/src/assets/food/plated-food/80_pancakes_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/82_pizza_dish.png b/frontend/src/assets/food/plated-food/82_pizza_dish.png
new file mode 100644
index 0000000..85d50a4
Binary files /dev/null and b/frontend/src/assets/food/plated-food/82_pizza_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/86_roastedchicken_dish.png b/frontend/src/assets/food/plated-food/86_roastedchicken_dish.png
new file mode 100644
index 0000000..6b89987
Binary files /dev/null and b/frontend/src/assets/food/plated-food/86_roastedchicken_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/89_salmon_dish.png b/frontend/src/assets/food/plated-food/89_salmon_dish.png
new file mode 100644
index 0000000..6b304be
Binary files /dev/null and b/frontend/src/assets/food/plated-food/89_salmon_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/91_strawberrycake_dish.png b/frontend/src/assets/food/plated-food/91_strawberrycake_dish.png
new file mode 100644
index 0000000..c9f591d
Binary files /dev/null and b/frontend/src/assets/food/plated-food/91_strawberrycake_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/93_sandwich_dish.png b/frontend/src/assets/food/plated-food/93_sandwich_dish.png
new file mode 100644
index 0000000..4ca670b
Binary files /dev/null and b/frontend/src/assets/food/plated-food/93_sandwich_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/96_steak_dish.png b/frontend/src/assets/food/plated-food/96_steak_dish.png
new file mode 100644
index 0000000..47669ca
Binary files /dev/null and b/frontend/src/assets/food/plated-food/96_steak_dish.png differ
diff --git a/frontend/src/assets/food/plated-food/98_sushi_dish.png b/frontend/src/assets/food/plated-food/98_sushi_dish.png
new file mode 100644
index 0000000..656b5ca
Binary files /dev/null and b/frontend/src/assets/food/plated-food/98_sushi_dish.png differ
diff --git a/frontend/src/components/GooberFoodMenu.css b/frontend/src/components/GooberFoodMenu.css
new file mode 100644
index 0000000..44950c4
--- /dev/null
+++ b/frontend/src/components/GooberFoodMenu.css
@@ -0,0 +1,93 @@
+.goober-food-menu {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.goober-food-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #d9d9d9;
+    border-radius: 14px 14px 0 0;
+    padding: 14px 16px;
+}
+
+.goober-food-title {
+    font-size: 16px;
+    color: #333;
+    text-transform: lowercase;
+}
+
+.goober-food-image {
+    width: 90%;
+    height: 90%;
+    object-fit: contain;
+    object-position: center;
+    display: block;
+    image-rendering: pixelated;
+}
+
+.goober-food-money {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+}
+
+.goober-food-grid {
+    background: #5f8f99;
+    padding: 18px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+
+.goober-food-tile {
+    aspect-ratio: 1 / 1;
+    background: #59c3e6;
+    border: none;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+/* TODO We could instead do an outline for the images if the opacity changing looks odd*/
+.goober-food-tile:hover {
+    outline: none;
+    opacity: 0.75;
+}
+
+
+.goober-food-tile:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+}
+
+.goober-food-empty {
+    grid-column: 1 / -1;
+    color: white;
+    text-align: center;
+    padding: 24px 0;
+}
+
+.goober-food-pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #5f8f99;
+    border-radius: 0 0 18px 18px;
+    padding: 0 18px 18px;
+}
+
+.goober-page-button {
+    min-width: 72px;
+}
+
+.goober-page-indicator {
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+}
\ No newline at end of file
diff --git a/frontend/src/components/GooberFoodMenu.tsx b/frontend/src/components/GooberFoodMenu.tsx
index 5b16850..f6ee434 100644
--- a/frontend/src/components/GooberFoodMenu.tsx
+++ b/frontend/src/components/GooberFoodMenu.tsx
@@ -1,14 +1,138 @@
+import { useMemo, useState } from "react";
+import "./GooberFoodMenu.css";
+
+/*
+TODO:
+- Cut down on margins
+- replace money with exit button to close the food menu
+- Allow clicking the food button again to close the menu
+- Think about scrolling vs pagination for the food menu?
+
+*/
 interface Props {
-  pageSetter: (arg0: string) => void;
+  pageSetter: (page: string) => void;
+  money?: number;
+}
+
+interface FoodItem {
+  id: number;
+  name: string;
+  image: string;
+}
+
+const ITEMS_PER_PAGE = 6;
+
+function fisherYatesShuffle<T>(array: T[]) {
+  const copy = [...array];
+  for (let i = copy.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [copy[i], copy[j]] = [copy[j], copy[i]];
+  }
+  return copy;
 }
 
-export default function GooberFoodMenu({ pageSetter }: Props) {
+function formatFoodName(filename: string) {
+  return filename
+    .replace(/^\d+_/, "")
+    .replace(/\.png$/, "")
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+const foodModules = import.meta.glob("../assets/food/plated-food/*.png", {
+  eager: true,
+}) as Record<string, { default: string }>;
+
+const foodPool: FoodItem[] = Object.entries(foodModules)
+  .map(([path, module]) => {
+    const filename = path.split("/").pop() ?? "";
+    const idMatch = filename.match(/^(\d+)_/);
+    const id = idMatch ? Number(idMatch[1]) : 0;
+
+    return {
+      id,
+      name: formatFoodName(filename),
+      image: module.default,
+    };
+  })
+  .filter((item) => item.image)
+  .sort((a, b) => a.id - b.id);
+
+console.log("foodModules", foodModules);
+console.log("foodPool", foodPool);
+
+export default function GooberFoodMenu({ money = 0 }: Props) {
+  const [page, setPage] = useState(1);
+  const [foods] = useState(() => fisherYatesShuffle(foodPool));
+
+  const totalPages = Math.ceil(foods.length / ITEMS_PER_PAGE);
+
+  const currentItems = useMemo(() => {
+    const start = (page - 1) * ITEMS_PER_PAGE;
+    return foods.slice(start, start + ITEMS_PER_PAGE);
+  }, [foods, page]);
+
+  const handleNextPage = () => {
+    setPage((prev) => (prev < totalPages ? prev + 1 : prev));
+  };
+
+  const handlePrevPage = () => {
+    setPage((prev) => (prev > 1 ? prev - 1 : prev));
+  };
+
   return (
-    <>
-      <div style = {{backgroundColor: "var(--bg-color)", padding: "15px"}}>
-        place gober food menu here
-        <button onClick={() => pageSetter("home")}>home</button>
+    <div className="goober-food-menu">
+      <div className="goober-food-header">
+        <span className="goober-food-title">food</span>
+        <span className="goober-food-money">${money}</span>
+      </div>
+
+      <div className="goober-food-grid">
+        {currentItems.length > 0 ? (
+          currentItems.map((item) => (
+            <div
+              key={item.id}
+              className="goober-food-tile"
+              role="button"
+              tabIndex={0}
+              aria-label={item.name}
+              title={item.name}
+            >
+              <img
+                src={item.image}
+                alt={item.name}
+                className="goober-food-image"
+              />
+            </div>
+          ))
+        ) : (
+          <div className="goober-food-empty">No food found</div>
+        )}
+      </div>
+
+      <div className="goober-food-pagination">
+        <button
+          type="button"
+          className="studygatchi-button goober-page-button"
+          onClick={handlePrevPage}
+          disabled={page === 1}
+        >
+          Prev
+        </button>
+
+        <span className="goober-page-indicator">
+          {page} / {totalPages}
+        </span>
+
+        <button
+          type="button"
+          className="studygatchi-button goober-page-button"
+          onClick={handleNextPage}
+          disabled={page === totalPages}
+        >
+          Next
+        </button>
       </div>
-    </>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/GooberGiftMenu.tsx b/frontend/src/components/GooberGiftMenu.tsx
index 86b5861..81aefbf 100644
--- a/frontend/src/components/GooberGiftMenu.tsx
+++ b/frontend/src/components/GooberGiftMenu.tsx
@@ -7,7 +7,7 @@ export default function GooberGiftMenu({ pageSetter }: Props) {
     <>
       <div style = {{backgroundColor: "var(--bg-color)", padding: "15px"}}>
         place gober gift menu here
-        <button onClick={() => pageSetter("home")}>home</button>
+         <button className="studygatchi-button" onClick={() => pageSetter("home")}>home</button>
       </div>
     </>
   );
diff --git a/frontend/src/components/GooberMenu.css b/frontend/src/components/GooberMenu.css
index f30bfe9..3c65c87 100644
--- a/frontend/src/components/GooberMenu.css
+++ b/frontend/src/components/GooberMenu.css
@@ -1,14 +1,10 @@
-.interactiveNavBtn{
-    background-color: var(--button-bg);
-    border: none;
-    border: 2px solid var(--button-bg);
+.interactionNavBtn {
+  background-color: var(--button-bg);
+  border: none;
 }
-.interactiveNavBtn:hover{
-    background-color: var(--bg-color);
-    color: var(--text-color);
-    border: 2px solid var(--text-color);
-}
-.interactionNavBtn.active{
-    background-color: var(--bg-color);
-    border: 2px solid var(--text-color);
+
+.interactionNavBtn.active {
+  background-color: var(--bg-color);
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
\ No newline at end of file
diff --git a/frontend/src/components/GooberMenu.tsx b/frontend/src/components/GooberMenu.tsx
index 78627eb..d0fcda8 100644
--- a/frontend/src/components/GooberMenu.tsx
+++ b/frontend/src/components/GooberMenu.tsx
@@ -1,6 +1,9 @@
-import "bootstrap/dist/css/bootstrap.min.css";
 import "./GooberMenu.css";
-import GooberImg from "../assets/GooberPlaceholder.png";
+// TODO These are placeholders. 
+// Eventually we're going to want to lazy-load the assets since there will be a lot of them.
+import GooberBackground from "../assets/backgrounds/placeholder.jpg"
+import GooberImg from "../assets/goobers/goober-panda.png";
+
 import { useState } from "react";
 import GooberInfo from "./GooberInfo";
 import GooberPlayMenu from "./GooberPlayMenu";
@@ -32,7 +35,10 @@ export default function GooberMenu({
   const [currentPage, setPage] = useState("home");
 
   return (
-    <div className="card bCard" style={{ width: "400px" }}>
+    <div className="card bCard" style={{
+      width: "100%",
+      maxWidth: "400px"
+    }}>
       <div
         className="card-header"
         style={{
@@ -41,39 +47,67 @@ export default function GooberMenu({
           flexDirection: "row",
         }}
       >
-        <text>{gooberName}</text>
-        <text
+        <span>{gooberName}</span>
+        <span
           style={{
             fontSize: 12,
             marginTop: "auto",
             marginLeft: "auto",
           }}
         >
-          <text style={{ paddingRight: 10 }}>Money</text>
-          <text>Settings</text>
-        </text>
+          <span style={{ paddingRight: 10 }}>Money</span>
+          <span>Settings</span>
+        </span>
       </div>
-      <div className="card-body">
-        <img
-          src={GooberImg}
+
+      <div
+        className="card-body"
+        style={{ spanAlign: "center", padding: 0 }}
+      >
+        <div
           style={{
-            display: "block",
-            margin: "auto",
-            borderRadius: "32px",
-            width: 350,
-            height: 350,
-            paddingBottom: 10,
-            marginRight: -60,
+            position: "relative",
+            width: "90%",
+            margin: "25px auto",
+            borderRadius: 32,
+            overflow: "hidden",
           }}
-        />
+        >
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              backgroundColor: "red",
+              backgroundImage: `url(${GooberBackground})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              zIndex: 0,
+            }}
+          />
+
+          <img
+            src={GooberImg}
+            alt={`${gooberName} placeholder`}
+            style={{
+              position: "relative",
+              zIndex: 1,
+              width: "100%",
+              objectFit: "cover",
+              display: "block",
+            }}
+          />
+        </div>
       </div>
+
       <div
         className="card-footer"
         style={{
-          height: 400,
+          minHeight: 400,
           position: "relative",
           display: "flex",
           flexDirection: "column",
+          overflow: "visible"
         }}
       >
         <div
@@ -87,15 +121,17 @@ export default function GooberMenu({
             color: "black",
           }}
         >
-          <text style={{ padding: "10px" }}>{gooberName}</text>
+          <span style={{ padding: "10px" }}>{gooberName}</span>
         </div>
-        <div className = "gooberInfo"
+
+        <div
+          className="gooberInfo"
           style={{
             display: "grid",
             gridTemplateColumns: "1fr 1fr 1fr",
-            margin: "-16px",
             marginTop: "20px",
             padding: "10px",
+            gap: "8px"
           }}
         >
           <button
@@ -111,7 +147,7 @@ export default function GooberMenu({
           <button
             type="button"
             className={
-              "interactionNavBtn " +
+              "interactionNavBtn" +
               (currentPage === "play" ? "active" : "")
             }
             onClick={() => setPage("play")}
@@ -121,7 +157,7 @@ export default function GooberMenu({
           <button
             type="button"
             className={
-              "interactionNavBtn " +
+              "interactionNavBtn" +
               (currentPage === "gift" ? "active" : "")
             }
             onClick={() => setPage("gift")}
@@ -129,7 +165,17 @@ export default function GooberMenu({
             Gift
           </button>
         </div>
-        <div style={{ paddingTop: "30px" }}>
+
+        <div
+          style={{
+            paddingTop: "30px",
+            paddingLeft: "12px",
+            paddingRight: "12px",
+            paddingBottom: "12px",
+            boxSizing: "border-box",
+            width: "100%",
+          }}
+        >
           {currentPage == "home" && (
             <GooberInfo
               setXP={setXP}
@@ -143,10 +189,10 @@ export default function GooberMenu({
             />
           )}
           {currentPage == "play" && <GooberPlayMenu pageSetter={setPage} />}
-          {currentPage == "food" && <GooberFoodMenu pageSetter={setPage} />}
+          {currentPage == "food" && <GooberFoodMenu pageSetter={setPage} money={money} />}
           {currentPage == "gift" && <GooberGiftMenu pageSetter={setPage} />}
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/GooberPlayMenu.tsx b/frontend/src/components/GooberPlayMenu.tsx
index 9bf5d56..9d6a840 100644
--- a/frontend/src/components/GooberPlayMenu.tsx
+++ b/frontend/src/components/GooberPlayMenu.tsx
@@ -5,9 +5,9 @@ interface Props {
 export default function GooberPlayMenu({ pageSetter }: Props) {
   return (
     <>
-      <div style = {{backgroundColor: "var(--bg-color)", padding: "15px"}}>
+      <div style={{ backgroundColor: "var(--bg-color)", padding: "15px" }}>
         place gober play menu here
-        <button onClick={() => pageSetter("home")}>home</button>
+        <button className="studygatchi-button" onClick={() => pageSetter("home")}>home</button>
       </div>
     </>
   );
diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
index aa58ebf..a13af5e 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/Home.tsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 import oscLogo from "../assets/osc-logo.png";
 import githubLogo from "../assets/github-mark-white.svg";
 import "./Home.css";
-import "bootstrap/dist/css/bootstrap.min.css";
 
 
 const Home = () => {
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
index f5f3d6b..555732e 100644
--- a/frontend/src/components/NavBar.tsx
+++ b/frontend/src/components/NavBar.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 //import { useState } from 'react';
-import "bootstrap/dist/css/bootstrap.min.css";
+
 
 const NavBar = () => {
     const navigate = useNavigate();
@@ -18,10 +18,10 @@ const NavBar = () => {
     }
     return (
         <div>
-            <button onClick={handleHomeClick}>Home</button>
-            <button onClick={handleSettingsClick}>Settings</button>
-            <button onClick={handleTimerClick}>Timer</button>
-            <button onClick={handleToDo}>To Do</button>
+            <button className="studygatchi-button" onClick={handleHomeClick}>Home</button>
+            <button className="studygatchi-button" onClick={handleSettingsClick}>Settings</button>
+            <button className="studygatchi-button" onClick={handleTimerClick}>Timer</button>
+            <button className="studygatchi-button" onClick={handleToDo}>To Do</button>
         </div>
         
     )
diff --git a/frontend/src/components/SettingsMenu.tsx b/frontend/src/components/SettingsMenu.tsx
index cc692ec..d52ae69 100644
--- a/frontend/src/components/SettingsMenu.tsx
+++ b/frontend/src/components/SettingsMenu.tsx
@@ -1,14 +1,13 @@
 import { useState, useEffect, useContext } from "react";
 import "./SettingsMenu.css";
-import "bootstrap/dist/css/bootstrap.min.css";
-import {ThemeContext} from "./ThemeProvider.tsx";
+import { ThemeContext } from "./ThemeProvider.tsx";
 
 export default function SettingsMenu() {
   const context = useContext(ThemeContext);
   if (!context) {
     throw new Error("SettingsMenu must be used within a ThemeProvider");
   }
-  const {theme, setTheme, themes} = context;
+  const { theme, setTheme, themes } = context;
 
   const [firstOption, setFirst] = useState(false);
   const [secondOption, setSecond] = useState(false);
@@ -23,7 +22,7 @@ export default function SettingsMenu() {
           flexDirection: "row",
         }}
       >
-        <button type="button" className="btn-close" aria-label="Close"></button>
+        <button type="button" className="studygatchi-button" aria-label="Close"></button>
         <text
           style={{
             fontSize: 12,
@@ -72,20 +71,20 @@ export default function SettingsMenu() {
           Themes
         </h5>
         <div style={{ display: "flex", gap: 10 }}>
-          <button className="themeChoice" type="button" style ={{backgroundColor: themes.pink.bg}}
+          <button className="themeChoice" type="button" style={{ backgroundColor: themes.pink.bg }}
             onClick={() => setTheme(themes.pink)}
           ></button>
-          <button className="themeChoice" type="button" style ={{backgroundColor: themes.green.bg}}
-             onClick={() => setTheme(themes.green)}
+          <button className="themeChoice" type="button" style={{ backgroundColor: themes.green.bg }}
+            onClick={() => setTheme(themes.green)}
           ></button>
-          <button className="themeChoice" type="button" style ={{backgroundColor: themes.lightblue.bg}}
-             onClick={() =>  setTheme(themes.lightblue)}
+          <button className="themeChoice" type="button" style={{ backgroundColor: themes.lightblue.bg }}
+            onClick={() => setTheme(themes.lightblue)}
           ></button>
-          <button className="themeChoice" type="button" style ={{backgroundColor: themes.white.bg}}
-             onClick={() => setTheme(themes.white)}
+          <button className="themeChoice" type="button" style={{ backgroundColor: themes.white.bg }}
+            onClick={() => setTheme(themes.white)}
           ></button>
-          <button className="themeChoice" type="button" style ={{backgroundColor: themes.black.bg}}
-             onClick={() =>  setTheme(themes.black)}
+          <button className="themeChoice" type="button" style={{ backgroundColor: themes.black.bg }}
+            onClick={() => setTheme(themes.black)}
           ></button>
         </div>
         <h5 className="card-title" style={{ paddingTop: 10 }}>
diff --git a/frontend/src/components/Timer.css b/frontend/src/components/Timer.css
index 8037866..be49e03 100644
--- a/frontend/src/components/Timer.css
+++ b/frontend/src/components/Timer.css
@@ -17,7 +17,7 @@
 
 .progress-ring__progress {
   fill: none;
-  stroke: var(--accent, #00eaff);
+  stroke: var(--accent);
   transition: stroke-dashoffset 0.5s linear;
 }
 
@@ -31,7 +31,7 @@
 
 .timer-content .session-type {
   position: absolute;
-  top: 0px; /* adjust as needed */
+  top: 0px;
   width: 100px;
   left: 50%;
   transform: translateX(-50%);
@@ -52,7 +52,6 @@
   font-size: 2rem;
 }
 
-/* --- Popup Background Overlay --- */
 .settings-popup {
   position: fixed;
   top: 0;
@@ -67,7 +66,6 @@
   z-index: 999;
 }
 
-/* --- Popup Container --- */
 .settings-content {
   background: #191919;
   padding: 1.5rem 2rem;
@@ -77,7 +75,6 @@
   animation: fadeIn 0.2s ease-out;
 }
 
-/* Subtle fade/scale animation */
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -95,7 +92,6 @@
   font-size: 1.3rem;
 }
 
-/* --- Form Layout --- */
 .settings-content label {
   display: flex;
   flex-direction: column;
@@ -115,10 +111,9 @@
 }
 
 .settings-content input:focus {
-  border-color: var(--accent, #00eaff);
+  border-color: var(--accent);
 }
 
-/* --- Actions (Close Button) --- */
 .settings-actions {
   display: flex;
   justify-content: center;
@@ -126,16 +121,6 @@
 }
 
 .settings-actions button {
-  padding: 0.35rem 0.9rem;
-  background: var(--accent, #00eaff);
-  border: none;
-  border-radius: 8px;
+  background: var(--accent);
   color: #fff;
-  cursor: pointer;
-  font-size: 0.95rem;
-  transition: opacity 0.2s;
-}
-
-.settings-actions button:hover {
-  opacity: 0.85;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index be9e8ce..194ffba 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,9 +4,10 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  --bg-color:  #080909;
+  --bg-color: #080909;
   --text-color: rgba(255, 255, 255, 0.87);
   --card-bg: #dd9ec7;
+  --accent: #00eaff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -14,13 +15,17 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
 }
 
 body {
@@ -38,41 +43,34 @@ h1 {
   line-height: 1.1;
 }
 
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
 button {
   border: none;
-  border: 2px solid var(--text-color);
   border-radius: 8px;
-  border: 1px solid transparent;
-  
   padding: 0.6em 1.2em;
-  margin: 3px; 
-  
+  margin: 3px;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
   background-color: var(--button-bg);
   cursor: pointer;
-  transition: border-color 0.25s;
 }
+
 button:hover {
-  background-color: var(--bg-bg);
-  color: var(--text-color);
-  border: 2px solid var(--text-color);
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 7629dc7..2dbac00 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -15,6 +15,11 @@ export default defineConfig({
       ],
     }),
   ],
+  server: {
+    watch: {
+      usePolling: true
+    }
+  },
   build: {
     outDir: 'build',
     rollupOptions: {