diff --git a/src/App.vue b/src/App.vue
index 78fdb62..807e8d1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,27 +1,31 @@
 <template>
-    <SideBar />
-    <div class="everythingElse">
-    </div>
-
+  <SideBar :colors="colors"/>
+  <div class="everythingElse">
+  </div>
 </template>
 
 <script>
 import SideBar from './components/SidebarComponents/SideBar.vue';
+import colorsData from '@/assets/colors.json';
 
 export default {
   components: {
     SideBar,
   },
+    provide() {
+    return {
+      colors: colorsData,
+    };
+  }
 };
 </script>
 
 <style>
-
 body, html {
   margin: 0;
   padding: 0;
-  color: white;
-  background-color: #343541;
+  color: var(--text-color);
+  background-color: var(--primary-color);
 }
 
 #app {
@@ -30,8 +34,7 @@ body, html {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.everythingElse{
-  padding-left:200px;
+.everythingElse {
+  padding-left: 200px;
 }
-
 </style>
diff --git a/src/components/ListItems/Timer.vue b/src/components/ListItems/Timer.vue
index e69de29..20fb94e 100644
--- a/src/components/ListItems/Timer.vue
+++ b/src/components/ListItems/Timer.vue
@@ -0,0 +1,13 @@
+<template>
+
+
+</template>
+
+<script>
+
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/SettingsComponents/ColorPicker.vue b/src/components/SettingsComponents/ColorPicker.vue
new file mode 100644
index 0000000..c71fe36
--- /dev/null
+++ b/src/components/SettingsComponents/ColorPicker.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="lists">
+      <h1>BruhList</h1>
+    </div>
+  </template>
+  
+  <script>
+  
+  
+  export default {
+
+  }
+  </script>
+  
+  <style>
+  
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/SidebarComponents/SideBar.vue b/src/components/SidebarComponents/SideBar.vue
index 97b860c..de01ce0 100644
--- a/src/components/SidebarComponents/SideBar.vue
+++ b/src/components/SidebarComponents/SideBar.vue
@@ -1,195 +1,156 @@
 <template>
-    <div :style="{ width: sidebarWidth + 'px', 'background-color': colors.sidebar }" class="sidebar" >
-      <div @click="toggleWidth" class="collapse-icon" :class="{ 'rotate-180': !toggleBar }">></div>
-      <nav class="needPadding">
-        <router-link
-          v-if="!toggleBar"
-          to="/Dashboard"
-          class="sidebarItem"
-          :class="{ 'active': $route.path === '/Dashboard' }"
-          @click="setActiveItem('/Dashboard')"
-        >
-          Dashboard
-        </router-link>
-        <router-link
-          v-if="!toggleBar"
-          to="/Lists"
-          class="sidebarItem"
-          :class="{ 'active': $route.path === '/Lists' }"
-          @click="setActiveItem('/Lists')"
-        >
-          Lists
-        </router-link>
-        <router-link
-          v-if="!toggleBar"
-          to="/Learn"
-          class="sidebarItem"
-          :class="{ 'active': $route.path === '/Learn' }"
-          @click="setActiveItem('/Learn')"
-        >
-          Learn
-        </router-link>
-        <router-link
-          v-if="!toggleBar"
-          to="/Type"
-          class="sidebarItem"
-          :class="{ 'active': $route.path === '/Type' }"
-          @click="setActiveItem('/Type')"
-        >
-          Type
-        </router-link>
-        <router-link
-          v-if="!toggleBar"
-          to="/"
-          class="sidebarItem"
-          :class="{ 'active': $route.path === '/' }"
-          @click="setActiveItem('/')"
-        >
-          About Me
-        </router-link>
-        <router-link
-          v-if="!toggleBar"
-          to="/Settings"
-          class="sidebarItem"
-          :class="{ 'active': $route.path === '/Settings' }"
-          @click="setActiveItem('/Settings')"
-        >
-          Settings
-        </router-link>
-        <router-link
-          v-if="!toggleBar"
-          to="/Login"
-          class="sidebarItem"
-          :class="{ 'active': $route.path === '/Login' }"
-          @click="setActiveItem('/Login')"
-        >
-          Login
-        </router-link>
-      </nav>
-    </div>
-    <router-view :class="{ 'paddingWithSidebar': !toggleBar, 'paddingWithoutSidebar' : toggleBar }">
-    </router-view>
-  </template>
-  
-  <script>
-  import { ref, onMounted, onUnmounted } from 'vue';
-  import colors from '@/assets/colors.json';
- 
-  export default {
-    name: 'SideBar',
-    setup() {
-      const toggleBar = ref(false);
-      const sidebarWidth = ref(180);
-      const activeItem = ref(null);
-  
-      const toggleWidth = () => {
-        toggleBar.value = !toggleBar.value;
-        sidebarWidth.value = toggleBar.value ? 30 : 180;
-      };
-  
-      const setActiveItem = (item) => {
-        activeItem.value = item;
-      };
-  
-      const handleEscapeKey = (event) => {
-        if (event.key === 'Escape') {
-          toggleWidth();
-        }
-      };
-  
-      onMounted(() => {
-        // Add event listener when the component is mounted
-        document.addEventListener('keyup', handleEscapeKey);
-      });
-  
-      onUnmounted(() => {
-        // Remove event listener when the component is unmounted
-        document.removeEventListener('keyup', handleEscapeKey);
-      });
-  
-      return {
-        toggleBar,
-        sidebarWidth,
-        toggleWidth,
-        activeItem,
-        setActiveItem,
-        colors: colors,
-      };
-    },
-
-    beforeRouteUpdate(to, from, next) {
-      // Update the activeItem when the route changes
-      this.setActiveItem(to.path);
-      next();
-    },
-  };
-  </script>
-  
-  <style>
-
-  .sidebar {
-    height: 100%;
-    position: fixed;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    overflow-x: hidden;
-    transition: 0.4s ease-out;
-    padding-top: 30px;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .sidebarItem {
-    width:100%;
-    padding: 10px;
-    padding-left: 10px;
-    white-space: nowrap;
-    text-decoration: none;
-    font-size: 20px;
-    display: block;
-    transition: 0.3s ease-out;
-    text-decoration: none; 
-    color:white;
-    transition: opacity 0.2s;
-  }
-
-  .sidebarItem:hover{
-    background-color:lightgrey;
-  }
-  
-  .sidebarItem.active {
-    background-color: #343541;
-    border-radius:12px;
-    width:85%;
-    padding-left:15px;
-    padding-right:5px;
-  }
-
-  .needPadding{
-    padding-top:30px;
-  }
-
-  .paddingWithoutSidebar{
-    padding-left:30px;
-    transition: 0.4s ease-out;
-  }
-
-  .paddingWithSidebar{
-    padding-left:180px;
-    transition: 0.4s ease-out;
-  }
-
-  .collapse-icon {
-    cursor: pointer;
-    transition: 0.3s linear;
-    display:flex;
-    justify-content: center;
-    font-size:20px;
-  }
-  
-  .rotate-180 { 
-    transform: rotate(180deg);
-  }
-  </style>
-  
\ No newline at end of file
+  <div :style="{ width: sidebarWidth + 'px', backgroundColor: colors.sideBar }" class="sidebar">
+    <div @click="toggleWidth" class="collapse-icon" :class="{ 'rotate-180': !toggleBar }">></div>
+    <nav class="needPadding">
+      <router-link v-if="!toggleBar" to="/Dashboard" class="sidebarItem"
+        :class="{ 'active': $route.path === '/Dashboard' }" @click="setActiveItem('/Dashboard')">
+        Dashboard
+      </router-link>
+      <router-link v-if="!toggleBar" to="/Lists" class="sidebarItem" :class="{ 'active': $route.path === '/Lists' }"
+        @click="setActiveItem('/Lists')">
+        Lists
+      </router-link>
+      <router-link v-if="!toggleBar" to="/Learn" class="sidebarItem" :class="{ 'active': $route.path === '/Learn' }"
+        @click="setActiveItem('/Learn')">
+        Learn
+      </router-link>
+      <router-link v-if="!toggleBar" to="/Type" class="sidebarItem" :class="{ 'active': $route.path === '/Type' }"
+        @click="setActiveItem('/Type')">
+        Type
+      </router-link>
+      <router-link v-if="!toggleBar" to="/" class="sidebarItem" :class="{ 'active': $route.path === '/' }"
+        @click="setActiveItem('/')">
+        About Me
+      </router-link>
+      <router-link v-if="!toggleBar" to="/Settings" class="sidebarItem"
+        :class="{ 'active': $route.path === '/Settings' }" @click="setActiveItem('/Settings')">
+        Settings
+      </router-link>
+      <router-link v-if="!toggleBar" to="/Login" class="sidebarItem" :class="{ 'active': $route.path === '/Login' }"
+        @click="setActiveItem('/Login')">
+        Login
+      </router-link>
+    </nav>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted, computed, inject } from 'vue';
+
+export default {
+  name: 'SideBar',
+  setup() {
+    const colors = inject('colors');
+    const toggleBar = ref(false);
+    const sidebarWidth = ref(180);
+    const activeItem = ref(null);
+
+    const toggleWidth = () => {
+      toggleBar.value = !toggleBar.value;
+      sidebarWidth.value = toggleBar.value ? 30 : 180;
+    };
+
+    const setActiveItem = (item) => {
+      activeItem.value = item;
+    };
+
+    const handleEscapeKey = (event) => {
+      if (event.key === 'Escape') {
+        toggleWidth();
+      }
+    };
+
+    onMounted(() => {
+      // Add event listener when the component is mounted
+      document.addEventListener('keyup', handleEscapeKey);
+    });
+
+    onUnmounted(() => {
+      // Remove event listener when the component is unmounted
+      document.removeEventListener('keyup', handleEscapeKey);
+    });
+
+    return {
+      toggleBar,
+      sidebarWidth,
+      toggleWidth,
+      activeItem,
+      setActiveItem,
+      colors
+    };
+  },
+
+  beforeRouteUpdate(to, from, next) {
+    // Update the activeItem when the route changes
+    this.setActiveItem(to.path);
+    next();
+  },
+};
+</script>
+
+<style>
+.sidebar {
+  height: 100%;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  overflow-x: hidden;
+  transition: 0.4s ease-out;
+  padding-top: 30px;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebarItem {
+  width: 100%;
+  padding: 10px;
+  padding-left: 10px;
+  white-space: nowrap;
+  text-decoration: none;
+  font-size: 20px;
+  display: block;
+  transition: 0.3s ease-out;
+  text-decoration: none;
+  color: white;
+  transition: opacity 0.2s;
+}
+
+.sidebarItem:hover {
+  background-color: lightgrey;
+}
+
+.sidebarItem.active {
+  background-color: #343541;
+  border-radius: 12px;
+  width: 85%;
+  padding-left: 15px;
+  padding-right: 5px;
+}
+
+.needPadding {
+  padding-top: 30px;
+}
+
+.paddingWithoutSidebar {
+  padding-left: 30px;
+  transition: 0.4s ease-out;
+}
+
+.paddingWithSidebar {
+  padding-left: 180px;
+  transition: 0.4s ease-out;
+}
+
+.collapse-icon {
+  cursor: pointer;
+  transition: 0.3s linear;
+  display: flex;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.rotate-180 {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 201347d..9563cd4 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,7 +1,47 @@
 <template>
-    <div class="settings">
-      <h1>BruhSettings</h1>
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Settings Page</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Settings</h1>
+        <div class="settings-section">
+            <h2>General</h2>
+            <div class="setting">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username">
+            </div>
+            <div class="setting">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email">
+            </div>
+        </div>
+        <div class="settings-section">
+            <h2>Appearance</h2>
+            <div class="setting">
+                <label for="theme">Theme</label>
+                <select id="theme" name="theme">
+                    <option value="light">Light</option>
+                    <option value="dark">Dark</option>
+                </select>
+            </div>
+        </div>
+        <div class="settings-section">
+            <h2>Notifications</h2>
+            <div class="setting">
+                <label for="email-notifications">Email Notifications</label>
+                <input type="checkbox" id="email-notifications" name="email-notifications">
+            </div>
+        </div>
     </div>
+</body>
+</html>
+
   </template>
   
   <script>
@@ -16,6 +56,63 @@
   </script>
   
   <style>
-  
+  /* styles.css */
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    width: 60%;
+    margin: 50px auto;
+    background-color: #fff;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.settings-section {
+    margin-bottom: 30px;
+}
+
+h2 {
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+}
+
+.setting {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+label {
+    flex: 1;
+}
+
+input[type="text"],
+input[type="email"],
+select {
+    flex: 2;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+input[type="checkbox"] {
+    margin-left: 20px;
+}
+
   </style>
   
\ No newline at end of file