diff --git a/css/style.css b/css/style.css
index e96ce5e..74602a6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,53 +4,56 @@
   --fsm: 85px;
   --fss: 30px;
   --fses: 18px;
-  --accent: #20a4f3;
-  --darkbg: #1e1f21;
-  --darksbg: #2c2d31;
-  --darkfg: #d8dee9;
-  --lightbg: #ffffff;
-  --lightsbg: #f9fafa;
-  --lightfg: #000000; }
+  --accent: #186efd60;
+  --bg: #1e1f21;
+  --sbg: #2c2d31;
+  --fg: #d8dee9; }
   @media only screen and (max-width: 68.75em) {
     :root {
       --fsg: 100px;
       --fsm: 65px;
       --fss: 20px; } }
 
+.lightmode {
+  --accent: #186efdaa;
+  --bg: #f5f5f5;
+  --sbg: #e4e6e6;
+  --fg: #3a3a3a; }
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Open Sans', sans-serif;
-  color: var(--darkfg);
   font-size: 13.5px;
   transition: 0.2s ease-in-out; }
 
-.darkbg {
-  background-color: var(--darkbg); }
-
-.darksbg {
-  background-color: var(--darksbg); }
-
-.darkfg {
-  color: var(--darkfg); }
-
-.lightbg {
-  background-color: var(--lightbg); }
-
-.lightsbg {
-  background-color: var(--lightsbg); }
-
-.lightfg {
-  color: var(--lightfg); }
-
 body {
   width: 100vw;
   height: 100vh;
+  background-color: var(--bg);
   display: flex;
   align-items: center;
   justify-content: center; }
 
+#themeButton {
+  position: absolute;
+  margin: 2em 2em 0 0;
+  right: 0;
+  top: 0;
+  color: var(--fg);
+  border: none;
+  border-radius: 5px;
+  padding: 10px;
+  cursor: pointer;
+  background-color: #00000000;
+  -webkit-appearance: none;
+  -moz-appearance: none; }
+
+.bicon {
+  width: 26px;
+  height: 26px; }
+
 .container {
   width: 150vh;
   height: 85vh;
@@ -68,10 +71,11 @@ body {
 
 .card {
   box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
-  border-radius: 5px; }
+  border-radius: 5px;
+  background-color: var(--sbg); }
   .card:hover {
-    transform: translateY(-0.3rem);
-    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); }
+    transform: translateY(-0.2rem);
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); }
 
 .fblock {
   grid-row: 1 / span 2;
@@ -114,19 +118,21 @@ body {
 #separator,
 #minutes {
   font-size: var(--fsg);
-  font-weight: bolder; }
+  font-weight: bolder;
+  color: var(--fg); }
 
 #month,
 #day {
   font-size: var(--fsm);
-  font-weight: bold; }
+  font-weight: bold;
+  color: var(--fg); }
 
 #day {
   margin-left: 20px; }
 
 #greetings {
   font-size: var(--fses);
-  font-weight: lighter; }
+  color: var(--fg); }
   @media only screen and (max-width: 68.75em) {
     #greetings {
       font-size: var(--fss); } }
@@ -138,11 +144,13 @@ body {
 .temperature-value p {
   font-size: var(--fss);
   font-weight: bolder;
-  margin-left: 15px; }
+  margin-left: 15px;
+  color: var(--fg); }
 
 .temperature-description p {
   font-size: var(--fss);
-  margin-left: 15px; }
+  margin-left: 15px;
+  color: var(--fg); }
 
 .qlink {
   grid-row: 3 / span 2;
@@ -160,13 +168,14 @@ body {
       padding: 20px; } }
   .qlink__icon {
     width: 26px;
-    height: 26px; }
+    height: 26px;
+    color: var(--fg); }
   .qlink__link {
     display: flex;
     justify-content: center;
     align-items: center;
+    background-color: var(--sbg);
     width: 100%;
-    background-color: var(--darksbg);
     box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
     border-radius: 5px; }
     .qlink__link-1 {
@@ -189,10 +198,10 @@ body {
       grid-column: 3; }
     .qlink__link:hover {
       background-color: var(--accent);
-      transform: translateY(-0.3rem);
-      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); }
+      transform: translateY(-0.2rem);
+      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); }
       .qlink__link:hover svg {
-        stroke: var(--darkbg); }
+        stroke: var(--fg); }
 
 .qlist {
   display: flex;
@@ -211,14 +220,16 @@ body {
     margin-top: 30px;
     margin-bottom: 20px;
     width: 30px;
+    color: var(--fg);
     height: 30px; }
   .qlist__link {
     text-decoration: none;
     font-size: var(--fses);
+    color: var(--fg);
     margin-top: 1px;
-    padding: 10px 12px;
+    padding: 6px 12px;
     border-radius: 5px;
     font-weight: bold; }
     .qlist__link:hover {
       background-color: var(--accent);
-      color: var(--darkbg); }
+      color: var(--fg); }
diff --git a/index.html b/index.html
index 6b9f6ed..89d7065 100644
--- a/index.html
+++ b/index.html
@@ -6,30 +6,31 @@
         <link rel="stylesheet" href="css/style.css" />
         <script src="https://unpkg.com/feather-icons"></script>
     </head>
-    <body class="darkfg darkbg">
+    <body class="">
+        <button id="themeButton"><i class="bicon" data-feather="sun"></i></button>
         <div class="container">
             <div class="fblock">
                 <div class="clock ">
-                    <div id="hour" class="darkfg"></div>
-                    <div id="separator" class="darkfg"></div>
-                    <div id="minutes" class="darkfg"></div>
+                    <div id="hour" class=""></div>
+                    <div id="separator" class=""></div>
+                    <div id="minutes" class=""></div>
                 </div>
-                <div id="greetings" class="darkfg"></div>
+                <div id="greetings" class=""></div>
             </div>
             <div class="sblock">
                 <div class="sblock__date">
-                    <div id="month" class="darkfg"></div>
-                    <div id="day" class="darkfg"></div>
+                    <div id="month" class=""></div>
+                    <div id="day" class=""></div>
                 </div>
                 <div class="sblock__weather">
                     <div class="weather-icon">
                         <img src="icons/unknown.png" />
                     </div>
                     <div class="temperature-value">
-                        <p>- °<span class="darkfg">c</span></p>
+                        <p class="">- °<span class="g">c</span></p>
                     </div>
                     <div class="temperature-description">
-                        <p class="darkfg"></p>
+                        <p class=""></p>
                     </div>
                 </div>
             </div>
@@ -37,9 +38,9 @@
                 <a
                     href="https://github.com/"
                     target="blank"
-                    class="qlink__link qlink__link-1"
+                    class="qlink__link qlink__link-1 "
                 >
-                    <i class="qlink__icon" data-feather="github"></i>
+                    <i class="qlink__icon " data-feather="github"></i>
                 </a>
                 <a
                     target="blank"
@@ -73,7 +74,7 @@
                 </a>
             </div>
 
-            <div class="card darksbg qlist qlist__1">
+            <div class="card qlist qlist__1">
                 <i class="qlist__head" data-feather="music"></i>
                 <a
                     href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
@@ -97,7 +98,7 @@
                 >
             </div>
 
-            <div class="card darksbg qlist qlist__2">
+            <div class="card qlist qlist__2">
                 <i class="qlist__head" data-feather="coffee"></i>
                 <a href="https://www.linkedin.com" class="qlist__link"
                     >LinkedIn</a
@@ -112,6 +113,7 @@
         <script src="js/time.js"></script>
         <script src="js/weather.js"></script>
         <script src="js/greeting.js"></script>
+        <script src="js/theme.js"></script>
         <script>
             feather.replace();
         </script>
diff --git a/js/theme.js b/js/theme.js
index 7ba4d97..50304fd 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -1,23 +1,10 @@
-let dark = document.getElementById('dark');
-let light = document.getElementById('light');
-let body = document.body;
-let theme = localStorage.getItem('theme');
-let toggleTheme = document.getElementById('toggleTheme');
+let darkTheme = localStorage.getItem('darkTheme');
+const themeToggle = document.querySelector('#themeButton');
 
-toggleTheme.addEventListener('click', function() {
-    if (body.classList.contains('light')) {
-        body.classList.remove('light');
-        toggleTheme.textContent = 'Dark';
-        localStorage.setItem('theme', 'dark');
-    } else {
-        body.classList.add('light');
-        toggleTheme.textContent = 'Light';
-        localStorage.setItem('theme', 'light');
-  }
-});
-
-function getTheme() {
-    body.classList.add(theme)
-    toggleTheme.textContent = theme;
+const enableDark = () => {
+    
 }
-getTheme();
\ No newline at end of file
+
+themeToggle.addEventListener('click', () => {
+    
+});
diff --git a/js/weather.js b/js/weather.js
index e11a32f..c6d054c 100644
--- a/js/weather.js
+++ b/js/weather.js
@@ -52,6 +52,6 @@ function getWeather(latitude, longitude) {
 // Display Weather info
 function displayWeather() {
     iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
-    tempElement.innerHTML = `${weather.temperature.value}°<span>${tempUnit}</span>`;
+    tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
     descElement.innerHTML = weather.description;
 }
diff --git a/sass/main.scss b/sass/main.scss
index 695ff7c..51fdc6e 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -15,17 +15,11 @@ $bp-smallest: 31.25em;
 
     // C O L O R S
 
-    --accent: #20a4f3;
+    --accent: #186efd60;
 
-    // Colors Dark theme
-    --darkbg: #1e1f21;
-    --darksbg: #2c2d31;
-    --darkfg: #d8dee9;
-
-    // Colors White theme
-    --lightbg: #ffffff;
-    --lightsbg: #f9fafa;
-    --lightfg: #000000;
+    --bg: #1e1f21;
+    --sbg: #2c2d31;
+    --fg: #d8dee9;
 
     @media only screen and (max-width: $bp-large) {
         --fsg: 100px;
@@ -33,49 +27,59 @@ $bp-smallest: 31.25em;
         --fss: 20px;
     }
 }
+.lightmode {
+
+    --accent: #186efdaa;
+    
+    --bg: #f5f5f5;
+    --sbg: #e4e6e6;
+    --fg: #3a3a3a;
+
+}
 
 * {
     margin: 0;
     padding: 0;
-    box-sizing: border-box;font-family: 'Open Sans', sans-serif;
-    color: var(--darkfg);
+    box-sizing: border-box;
+    font-family: 'Open Sans', sans-serif;
     font-size: 13.5px;
 
     transition: 0.2s ease-in-out;
 }
 
-.darkbg {
-    background-color: var(--darkbg);
-}
-
-.darksbg {
-    background-color: var(--darksbg);
-}
-
-.darkfg {
-    color: var(--darkfg);
-}
-
-.lightbg {
-    background-color: var(--lightbg);
-}
-
-.lightsbg {
-    background-color: var(--lightsbg);
-}
-
-
-.lightfg {
-    color: var(--lightfg);
-}
-
 body {
     width: 100vw;
     height: 100vh;
+    background-color: var(--bg);
     display: flex;
     align-items: center;
     justify-content: center;
 }
+
+#themeButton {
+    position: absolute;
+    margin: 2em 2em 0 0;
+    right: 0;
+    top: 0;
+
+    color: var(--fg);
+
+    border: none;
+    border-radius: 5px;
+
+    padding: 10px;
+    cursor: pointer;
+
+    background-color: #00000000;
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+.bicon {
+    width: 26px;
+    height: 26px;
+}
 .container {
     width: 150vh;
     height: 85vh;
@@ -99,10 +103,11 @@ body {
 .card {
     box-shadow: 0 5px 7px rgba(#000000, 0.35);
     border-radius: 5px;
+    background-color: var(--sbg);
 
     &:hover {
-        transform: translateY(-0.3rem);
-        box-shadow: 0 20px 30px rgba(#000000, 0.35);
+        transform: translateY(-0.2rem);
+        box-shadow: 0 10px 10px rgba(#000000, 0.35);
     }
 }
 
@@ -158,12 +163,14 @@ body {
 #minutes {
     font-size: var(--fsg);
     font-weight: bolder;
+    color: var(--fg);
 }
 
 #month,
 #day {
     font-size: var(--fsm);
     font-weight: bold;
+    color: var(--fg);
 }
 #day {
     margin-left: 20px;
@@ -171,7 +178,7 @@ body {
 
 #greetings {
     font-size: var(--fses);
-    font-weight: lighter;
+    color: var(--fg);
 
     @media only screen and (max-width: $bp-large) {
         font-size: var(--fss);
@@ -188,10 +195,12 @@ body {
         font-size: var(--fss);
         font-weight: bolder;
         margin-left: 15px;
+        color: var(--fg);
     }
     &-description p {
         font-size: var(--fss);
         margin-left: 15px;
+        color: var(--fg);
     }
 }
 
@@ -217,14 +226,15 @@ body {
     &__icon {
         width: 26px;
         height: 26px;
+        color: var(--fg);
     }
 
     &__link {
         display: flex;
         justify-content: center;
         align-items: center;
+        background-color: var(--sbg);
         width: 100%;
-        background-color: var(--darksbg);
         box-shadow: 0 5px 7px rgba(#000000, 0.35);
         border-radius: 5px;
         &-1 {
@@ -254,12 +264,12 @@ body {
 
         &:hover {
             background-color: var(--accent);
-            transform: translateY(-0.3rem);
+            transform: translateY(-0.2rem);
 
-            box-shadow: 0 20px 30px rgba(#000000, 0.35);
+            box-shadow: 0 10px 10px rgba(#000000, 0.35);
 
             & svg {
-                stroke: var(--darkbg);
+                stroke: var(--fg);;
             }
         }
     }
@@ -286,19 +296,21 @@ body {
         margin-top: 30px;
         margin-bottom: 20px;
         width: 30px;
+        color: var(--fg);
         height: 30px;
     }
     &__link {
         text-decoration: none;
         font-size: var(--fses);
+        color: var(--fg);
         margin-top: 1px;
-        padding: 10px 12px;
+        padding: 6px 12px;
         border-radius: 5px;
         font-weight: bold;
 
         &:hover {
             background-color: var(--accent);
-            color: var(--darkbg);
+            color: var(--fg);
         }
     }
 }