diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c0ee928..928f88d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "pause": "^0.1.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
+        "react-icons": "^5.5.0",
         "react-router-dom": "^7.9.5",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.14"
@@ -79,7 +80,6 @@
       "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -1534,7 +1534,6 @@
       "integrity": "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1545,7 +1544,6 @@
       "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1596,7 +1594,6 @@
       "integrity": "sha512-gTtSdWX9xiMPA/7MV9STjJOOYtWwIJIYxkQxnSV1U3xcE+mnJSH3f6zI0RYP+ew66WSlZ5ed+h0VCxsvdC1jJg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.41.0",
         "@typescript-eslint/types": "8.41.0",
@@ -1823,7 +1820,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1977,7 +1973,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001737",
         "electron-to-chromium": "^1.5.211",
@@ -2254,7 +2249,6 @@
       "integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3219,7 +3213,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
       "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3236,6 +3229,15 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -3524,7 +3526,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3587,7 +3588,6 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3660,7 +3660,6 @@
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -3774,7 +3773,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/frontend/package.json b/frontend/package.json
index ea1997a..b1e2f3e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "pause": "^0.1.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.9.5",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14"
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2aa6c1e..874346a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,19 +5,13 @@ 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 RenderGooberMenu from "./RenderGooberMenu";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
 function App() {
   // had to add because bootstrap defaults to light mode
   document.documentElement.setAttribute("data-bs-theme", "dark");
 
-  // Current Players data
-  const [currentXP, setXP] = useState(50);
-  const [level, setLevel] = useState(9);
-  const [money, setMoney] = useState(0);
-  const [currentHealth, setHealth] = useState(50);
-
   return (
     <Router>
       <div
@@ -30,22 +24,13 @@ function App() {
         <div>
           <NavBar />
         </div>
-        <GooberMenu
-          setXP={setXP}
-          setLevel={setLevel}
-          setMoney={setMoney}
-          setHealth={setHealth}
-          currentXP={currentXP}
-          level={level}
-          money={money}
-          currentHealth={currentHealth}
-        />
+        
         <Routes>
-          <Route path="/" element={<Home />} />
+          <Route path="/" element={<><RenderGooberMenu /><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/RenderGooberMenu.tsx b/frontend/src/RenderGooberMenu.tsx
new file mode 100644
index 0000000..8e58905
--- /dev/null
+++ b/frontend/src/RenderGooberMenu.tsx
@@ -0,0 +1,27 @@
+
+import React, { useState } from "react";
+import GooberMenu from "./components/GooberMenu";
+import "./index.css";
+
+export default function RenderGooberMenu() {
+
+  // Current Players data
+  const [currentXP, setXP] = useState(50);
+  const [level, setLevel] = useState(9);
+  const [money, setMoney] = useState(0);
+  const [currentHealth, setHealth] = useState(50);
+
+  return(
+        <GooberMenu
+            setXP={setXP}
+            setLevel={setLevel}
+            setMoney={setMoney}
+            setHealth={setHealth}
+            currentXP={currentXP}
+            level={level}
+            money={money}
+            currentHealth={currentHealth}
+          />
+
+  )
+}
\ No newline at end of file
diff --git a/frontend/src/ToDoList.css b/frontend/src/ToDoList.css
new file mode 100644
index 0000000..73f4044
--- /dev/null
+++ b/frontend/src/ToDoList.css
@@ -0,0 +1,23 @@
+.todolist-logo{
+
+}
+
+.todolist-addItem{
+    margin: 30px 10px;
+}
+
+.todolist-item{
+    
+}
+
+.todolist-item button{
+    opacity:0;
+}
+
+.todolist-item:hover button{
+    opacity:1;
+}
+
+.todolist-checkbox{
+    margin:0px 20px;
+}
\ No newline at end of file
diff --git a/frontend/src/ToDoList.tsx b/frontend/src/ToDoList.tsx
index 053ac52..8d737fb 100644
--- a/frontend/src/ToDoList.tsx
+++ b/frontend/src/ToDoList.tsx
@@ -1,5 +1,7 @@
 import { useState } from "react";
+import { FaTrash } from 'react-icons/fa';
 import "./App.css";
+import "./ToDoList.css";
 
 export default function ToDoList() {
   const [items, setItems] = useState([
@@ -61,26 +63,29 @@ export default function ToDoList() {
           margin: "0 auto",
           listStyleType: "none",
           padding: 0,
+          maxHeight: "auto",
         }}
       >
         {items.map((item) => (
           <li key={item} className="todolist-item">
-            <div className="wrapper">
-              <input
-                type="checkbox"
-                id={`checkbox-${item}`}
-                name={item}
-                checked={checkedItems[item]}
-                onChange={() => checkItem(item)}
-              />
-              <label htmlFor={`checkbox-${item}`}>{item}</label>
+            <label htmlFor={`checkbox-${item}`}>
+                <input
+                  type="checkbox"
+                  id={`checkbox-${item}`}
+                  name={item}
+                  checked={checkedItems[item]}
+                  onChange={() => checkItem(item)}
+                  className="todolist-checkbox"
+                />
+              {item}</label>
+            <div>
+              <button
+                className="todolist-trashbutton"
+                onClick={() => removeItem(item)}
+              >
+                <FaTrash />
+              </button>
             </div>
-            <button
-              className="todolist-trashbutton"
-              onClick={() => removeItem(item)}
-            >
-              Del
-            </button>
           </li>
         ))}
       </ul>
diff --git a/frontend/src/components/NavBar.css b/frontend/src/components/NavBar.css
new file mode 100644
index 0000000..9739194
--- /dev/null
+++ b/frontend/src/components/NavBar.css
@@ -0,0 +1,4 @@
+.navbar{
+    margin:20px;
+    gap: 10px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
index f5f3d6b..cb1b64d 100644
--- a/frontend/src/components/NavBar.tsx
+++ b/frontend/src/components/NavBar.tsx
@@ -1,6 +1,7 @@
 import { useNavigate } from "react-router-dom";
 //import { useState } from 'react';
 import "bootstrap/dist/css/bootstrap.min.css";
+import "./NavBar.css";
 
 const NavBar = () => {
     const navigate = useNavigate();
@@ -17,7 +18,7 @@ const NavBar = () => {
         navigate('/todo');
     }
     return (
-        <div>
+        <div className="navbar">
             <button onClick={handleHomeClick}>Home</button>
             <button onClick={handleSettingsClick}>Settings</button>
             <button onClick={handleTimerClick}>Timer</button>