diff --git a/colors(1)/colors.txt b/colors(1)/colors.txt
new file mode 100644
index 0000000..75da141
--- /dev/null
+++ b/colors(1)/colors.txt
@@ -0,0 +1,11 @@
+Your selected colors:
+
+    Primary: #daeafb (RGB: 218, 234, 251)
+    Secondary: #000000 (RGB: 0, 0, 0)
+    Primary Button: #5b9a66 (RGB: 91, 154, 102)
+    Secondary Button: #120320 (RGB: 18, 3, 32)
+    Accent: #b574f1 (RGB: 181, 116, 241)
+
+Realtime Colors link for selected colors: https://realtimecolors.com/?colors=daeafb-000000-5b9a66-120320-b574f1
+
+Thanks for using RealtimeColors.com!
\ No newline at end of file
diff --git a/colors(1)/palette.png b/colors(1)/palette.png
new file mode 100644
index 0000000..580859c
Binary files /dev/null and b/colors(1)/palette.png differ
diff --git a/src/App.vue b/src/App.vue
index 537e268..96b5d87 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@ import { NavigationModel } from "./components/Index.js";
 </script>
 
 <template>
-    <div class="app-containe">
+    <div class="app-container bg-background">
         <NavigationModel />
         <div class="container px-3 mx-auto">
             <router-view class="mt-4" />
diff --git a/src/components/ExerciseList.vue b/src/components/ExerciseList.vue
index 1c3becc..49dd0d7 100644
--- a/src/components/ExerciseList.vue
+++ b/src/components/ExerciseList.vue
@@ -3,7 +3,7 @@
     <div class="flex">
     <div class="exerciseList">
       <ul class="exerciseItem" v-for="exercise in filterExercises()" :key="exercise.name">
-        <button @click="exerciseClick(exercise)" class="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4" >{{ exercise.name }}</button>
+        <button @click="exerciseClick(exercise)" class="btn bg-secondary-button hover:bg-accent text-text font-bold py-2 px-4" >{{ exercise.name }}</button>
       </ul>
     </div>
     <div v-for="selectedExercise in selectedExercises" :key="selectedExercise" class="show">
diff --git a/src/components/NavigationModel.vue b/src/components/NavigationModel.vue
index 773962c..59aab0c 100644
--- a/src/components/NavigationModel.vue
+++ b/src/components/NavigationModel.vue
@@ -25,7 +25,7 @@
     width: 100%;
     height: 4rem;
     justify-content: start;
-    background: rgb(36, 165, 75);
+    background: rgb(91, 154, 102);
 }
 .navbar-nav{
     display: flex;
@@ -39,9 +39,14 @@
     color: white;
     text-decoration: none;
 }
+
 .nav-item:hover{
-    color: orangered;
+    color: rgb(91, 154, 102);
+    background: #4510b7;
+    border-radius: 0.5rem;
+    transition: 0.5s;
 }
+
 .logo{
     display: flex;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index a28ce71..b08ccd5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,15 @@ export default {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'primary-button':'#5b9a66',
+        'secondary-button':'#0d1406',
+        'background':'#000000',
+        'text': '#daeafb',
+        'accent': '#b574f1',
+      }
+    },
   },
   plugins: [],
 }