diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css
index b620104..056441b 100644
--- a/public/css_styles/styles.css
+++ b/public/css_styles/styles.css
@@ -388,6 +388,46 @@
   border: #969696 solid 1px;
 }
 
+.dark-mode {
+  position: absolute;
+  left: calc(100% - 5vw);
+}
+.dark-mode #dark-mode_toogle-switch {
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+.dark-mode label {
+  display: block;
+  width: 4vw;
+  height: 4vh;
+  background-color: #D7FBE8;
+  border-radius: 100px;
+  position: relative;
+  cursor: pointer;
+  transition: 0.5s;
+  box-shadow: 0 0 20px #477a8550;
+}
+.dark-mode label::after {
+  content: "";
+  width: 3.5vh;
+  height: 3.5vh;
+  background-color: #b632eb;
+  position: absolute;
+  border-radius: 100%;
+  top: 0.25vh;
+  left: 0.25vh;
+  transition: 0.5s;
+}
+.dark-mode input:checked + label:after {
+  left: calc(100% - 0.25vh);
+  transform: translateX(-100%);
+  background-color: #D7FBE8;
+}
+.dark-mode input:checked + label {
+  background-color: #b632eb;
+}
+
 html, body {
   margin: 0;
   padding: 0;
diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map
index 52e3619..64b097e 100644
--- a/public/css_styles/styles.css.map
+++ b/public/css_styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss"],"names":[],"mappings":"AACA;EACI,kBCuCS;EDrCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFwBO;;AErBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFQG;EEPH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFFG;EEIH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHwBO;EGvBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHTL;EGUK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH5CE;;;AGqDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN2BU;;AMzBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPGD;EOFC,kBPIF;;;AQ5Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRyBD;EQvBC;EAEA;;AAEA;ERpBZ;EACA;EAQA;EACA;EACA;EQagB;;AAIR;EACI;EACA,kBRUM;;AQNd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;ARRpB;EACI;EACA;;;AAGJ;EACI;EACA,kBA5Be","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss"],"names":[],"mappings":"AACA;EACI,kBCuCS;EDrCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFwBO;;AErBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFQG;EEPH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFFG;EEIH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHwBO;EGvBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHTL;EGUK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH5CE;;;AGqDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN2BU;;AMzBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPGD;EOFC,kBPIF;;;AQ5Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRyBD;EQvBC;EAEA;;AAEA;ERpBZ;EACA;EAQA;EACA;EACA;EQagB;;AAIR;EACI;EACA,kBRUM;;AQNd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;AClEpB;EAEI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBT8BS;ES7BT;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EAEA,kBTMS;;ASHb;EACI;;;ATeR;EACI;EACA;;;AAGJ;EACI;EACA,kBA5Be","file":"styles.css"}
\ No newline at end of file
diff --git a/public/sass_styles/_dark-mode_toogle-switch.scss b/public/sass_styles/_dark-mode_toogle-switch.scss
index 2ae5088..ce36927 100644
--- a/public/sass_styles/_dark-mode_toogle-switch.scss
+++ b/public/sass_styles/_dark-mode_toogle-switch.scss
@@ -1,3 +1,46 @@
-.dark-mode_toogle-switch {
+.dark-mode {
+
+    position: absolute;
+    left: calc(100% - 5vw);
     
-}
\ No newline at end of file
+    #dark-mode_toogle-switch {
+        width: 0;
+        height: 0;
+        visibility: hidden;
+    }
+    
+    label {
+        display: block;
+        width: 4vw;
+        height: 4vh;
+        background-color: $lightest-color;
+        border-radius: 100px;
+        position: relative;
+        cursor: pointer;
+        transition: 0.5s;
+        box-shadow: 0 0 20px #477a8550;
+    }
+
+    label::after {
+        content: "";
+        width: 3.5vh;
+        height: 3.5vh;
+        background-color: #b632eb;
+        position: absolute;
+        border-radius: 100%;
+        top: 0.25vh;
+        left: 0.25vh;
+        transition: 0.5s;
+    }
+
+    input:checked + label:after {
+        left: calc(100% - 0.25vh);
+        transform: translateX(-100%);
+
+        background-color: $lightest-color;
+    }
+
+    input:checked + label{
+        background-color: #b632eb;
+    }
+}
diff --git a/src/components/DarkMode.jsx b/src/components/DarkMode.jsx
index 7308a16..865200a 100644
--- a/src/components/DarkMode.jsx
+++ b/src/components/DarkMode.jsx
@@ -2,9 +2,10 @@ import React from 'react'
 
 const DarkMode = () => {
     return (
-        <input type="checkbox" className=".dark-mode_toogle-switch">
-            
-        </input>
+        <div className="dark-mode">
+            <input type="checkbox" id="dark-mode_toogle-switch"/>
+            <label for="dark-mode_toogle-switch"></label>
+        </div>
     )
 }
 
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index fcc8824..0882419 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,4 +1,5 @@
 import React, {useState} from 'react'
+import DarkMode from './DarkMode'
 import HeaderButton from './HeaderButton'
 
 const Header = () => {
@@ -10,6 +11,7 @@ const Header = () => {
         <header className="header-main-page">
             <a href="/"><h1>Pomodoro Timer</h1></a>
             <h3>Made By <span className="selectable"><a target="_blank" href="https://www.behance.net/franpessano" rel="noreferrer">Francisco Pessano</a></span></h3>
+            <DarkMode />
         </header>
     )
 }