diff --git a/client/addPodcast.html b/client/addPodcast.html
index 962c528..b8f5816 100644
--- a/client/addPodcast.html
+++ b/client/addPodcast.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Add Podcast - PodGrab</title>
-    {{template "commoncss"}}
+    {{template "commoncss" .}}
     <style>
       [v-cloak] {
         display: none;
@@ -33,7 +33,7 @@
               <input
                 type="submit"
                 value="Add Podcast"
-                class="u-full-width button-primary"
+                class="u-full-width button"
               />
             </div>
           </form>
@@ -72,7 +72,7 @@
               <input
                 type="submit"
                 value="Upload"
-                class="u-full-width button-primary"
+                class="u-full-width button"
               />
             </div>
           </form>
@@ -101,7 +101,7 @@
               <input
                 type="submit"
                 value="Search"
-                class="u-full-width button-primary"
+                class="u-full-width button"
               />
             </div>
           </form>
@@ -126,7 +126,7 @@
                   <button
                     v-if="!item.already_saved"
                     v-on:click="addPodcast(item)"
-                    class="button button-primary"
+                    class="button button"
                   >
                     + Add
                   </button>
diff --git a/client/backups.html b/client/backups.html
index 6bb96e2..89189cf 100644
--- a/client/backups.html
+++ b/client/backups.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PodGrab</title>
-    {{template "commoncss"}}
+    {{template "commoncss" .}}
     <style>
         .button-delete{
             background-color: indianred;
diff --git a/client/commoncss.html b/client/commoncss.html
index 782dd40..11adff3 100644
--- a/client/commoncss.html
+++ b/client/commoncss.html
@@ -7,6 +7,37 @@
 />
 <link rel="stylesheet" href="/webassets/fa/fontawesome.min.css" />
 <link rel="stylesheet" href="/webassets/fa/solid.min.css" />
+  {{if .setting.DarkMode}}
+<style>
+
+
+  html{
+    --text-color: #eeeeee;
+    --background: #121212; 
+    --overlay:#000; 
+  }
+  </style>
+  {{else}}
+  <style>
+
+
+    html{
+      --text-color: #222;
+      --background: #fff; 
+      --overlay:#ccc; 
+    }
+    </style>
+  {{end}}
+  <style>
+  *{
+    background: var(--background);
+    color: var(--text-color);
+  }
+  .button,input[type=submit],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea,button,a{
+    background-color: inherit;
+    color: inherit;
+  }
+</style>
 
 <style>
   .container {
diff --git a/client/episodes.html b/client/episodes.html
index f575f7e..1b2878f 100644
--- a/client/episodes.html
+++ b/client/episodes.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{.title}} - PodGrab</title>
-    {{template "commoncss"}}
+    {{template "commoncss" .}}
     <style>
       img {
         display: none;
@@ -120,7 +120,7 @@
 
           {{else}} {{if not $setting.AutoDownload}}
           <a
-            class="button button-primary"
+            class="button button"
             onclick="downloadToDisk('{{.ID}}')"
             title="Download to server"
             download
@@ -128,7 +128,7 @@
           ></a>
           {{else}} {{if eq .DownloadStatus 3}}
           <a
-            class="button button-primary"
+            class="button button"
             onclick="downloadToDisk('{{.ID}}')"
             title="Download to server"
             download
@@ -153,13 +153,13 @@
           {{if .previousPage }}
           <a
             href="?page={{.previousPage}}&downloadedOnly={{.downloadedOnly}}"
-            class="button button-primary"
+            class="button"
             >Newer</a
           >
           {{end}} {{if .nextPage }}
           <a
             href="?page={{.nextPage}}&downloadedOnly={{.downloadedOnly}}"
-            class="button button-primary"
+            class="button"
             >Older</a
           >
           {{end}}
diff --git a/client/index.html b/client/index.html
index 54d1899..ae02456 100644
--- a/client/index.html
+++ b/client/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PodGrab</title>
-    {{template "commoncss"}}
+    {{template "commoncss" .}}
     <style>
       .button-delete {
         color: #d11a2a;
diff --git a/client/navbar.html b/client/navbar.html
index 23a5836..ba30fb1 100644
--- a/client/navbar.html
+++ b/client/navbar.html
@@ -10,7 +10,7 @@
     display: block;
     width: 100%;
     height: 6.5rem;
-    background: #fff;
+    background:var(--background);
     z-index: 99;
     border-top: 1px solid #eee;
     border-bottom: 1px solid #eee; }
@@ -33,7 +33,7 @@
     margin-right: 35px;
     text-decoration: none;
     line-height: 6.5rem;
-    color: #222; }
+    color: var(--text-color);}
   .navbar-link.active {
     color: #33C3F0; }
   .has-docked-nav .navbar {
@@ -62,7 +62,6 @@
   z-index: 1000;
   top: 0;
   left: -160px;
-  background-color: #fff;
   overflow-x: hidden;
   padding-top: 20px;
   overflow-x: hidden; /* Disable horizontal scroll */
@@ -87,11 +86,11 @@
     font-weight: 600;
     letter-spacing: .2rem;
     line-height: 2.5rem;
-    color: #222;
+   
 }
 
 div#overlay{
-  background-color: #ccc;
+  background-color: var(--overlay);
   opacity: 0.5;
   height: 100%;
   width: 100%;
@@ -110,13 +109,13 @@ div#overlay{
 #burger div{
   width: 30px;
   height: 2px;
-  background-color: black;
+  background-color: var(--text-color);;
   margin: 6px 0;
 }
 .bar1, .bar2, .bar3 {
   width: 15px;
   height: 2px;
-  background-color: #333;
+  background-color: var(--text-color);;
   margin: 6px 0;
 }
 #closeDrawer{
diff --git a/client/settings.html b/client/settings.html
index 60f731c..6dcf5ef 100644
--- a/client/settings.html
+++ b/client/settings.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PodGrab</title>
-    {{template "commoncss"}}
+    {{template "commoncss" .}}
     <style>
         .button-delete{
             background-color: indianred;
@@ -77,8 +77,13 @@
             <input type="checkbox" name="appendEpisodeNumberToFileName" v-model="appendEpisodeNumberToFileName">
             <span class="label-body">Append episode number to episode file name</span>
         </label>
+
+        <label for="darkMode">
+            <input type="checkbox" name="darkMode" v-model="darkMode">
+            <span class="label-body">Use Dark Mode</span>
+        </label>
       
-        <input type="submit" value="Save" class="button button-primary">
+        <input type="submit" value="Save" class="button">
     </form>
 </div>
 </div>
@@ -116,7 +121,9 @@
 var app = new Vue({
   delimiters: ['${', '}'],
   el: '#app',
-
+  mounted(){
+    this.originalThemeSetting= this.darkMode;
+  },
   methods:{
       saveSettings:function(e){
           e.preventDefault();
@@ -127,7 +134,8 @@ var app = new Vue({
             initialDownloadCount:self.initialDownloadCount,
             autoDownload:self.autoDownload,
             appendDateToFileName:self.appendDateToFileName,
-            appendEpisodeNumberToFileName:self.appendEpisodeNumberToFileName
+            appendEpisodeNumberToFileName:self.appendEpisodeNumberToFileName,
+            darkMode:self.darkMode
 
         })
         .then(function(response){
@@ -137,8 +145,10 @@ var app = new Vue({
                 position: "top-right",
                 duration : 5000
             })
-
-
+            console.log(self.originalThemeSetting);
+            if(self.originalThemeSetting!= self.darkMode){
+                window.location.reload()
+            }
         })
         .catch(function(error){
             if(error.response){
@@ -163,8 +173,9 @@ var app = new Vue({
     initialDownloadCount: {{ .setting.InitialDownloadCount }},
     autoDownload: {{ .setting.AutoDownload }},
     appendDateToFileName: {{ .setting.AppendDateToFileName }},
-    appendEpisodeNumberToFileName:{{ .setting.AppendEpisodeNumberToFileName }}
-
+    appendEpisodeNumberToFileName:{{ .setting.AppendEpisodeNumberToFileName }},
+    darkMode:{{ .setting.DarkMode }},
+    originalThemeSetting:{{ .setting.DarkMode }}
   },
 
 })
diff --git a/controllers/pages.go b/controllers/pages.go
index ed32d44..8b0e85b 100644
--- a/controllers/pages.go
+++ b/controllers/pages.go
@@ -25,16 +25,18 @@ type SettingModel struct {
 	AutoDownload                  bool `form:"autoDownload" json:"autoDownload" query:"autoDownload"`
 	AppendDateToFileName          bool `form:"appendDateToFileName" json:"appendDateToFileName" query:"appendDateToFileName"`
 	AppendEpisodeNumberToFileName bool `form:"appendEpisodeNumberToFileName" json:"appendEpisodeNumberToFileName" query:"appendEpisodeNumberToFileName"`
+	DarkMode                      bool `form:"darkMode" json:"darkMode" query:"darkMode"`
 }
 
 func AddPage(c *gin.Context) {
-
-	c.HTML(http.StatusOK, "addPodcast.html", gin.H{"title": "Add Podcast"})
+	setting := c.MustGet("setting").(*db.Setting)
+	c.HTML(http.StatusOK, "addPodcast.html", gin.H{"title": "Add Podcast", "setting": setting})
 }
 func HomePage(c *gin.Context) {
 	//var podcasts []db.Podcast
 	podcasts := service.GetAllPodcasts("")
-	c.HTML(http.StatusOK, "index.html", gin.H{"title": "Podgrab", "podcasts": podcasts})
+	setting := c.MustGet("setting").(*db.Setting)
+	c.HTML(http.StatusOK, "index.html", gin.H{"title": "Podgrab", "podcasts": podcasts, "setting": setting})
 }
 func PodcastPage(c *gin.Context) {
 	var searchByIdQuery SearchByIdQuery
diff --git a/controllers/podcast.go b/controllers/podcast.go
index 0456173..e09f39a 100644
--- a/controllers/podcast.go
+++ b/controllers/podcast.go
@@ -258,7 +258,7 @@ func UpdateSetting(c *gin.Context) {
 
 	if err == nil {
 
-		err = service.UpdateSettings(model.DownloadOnAdd, model.InitialDownloadCount, model.AutoDownload, model.AppendDateToFileName, model.AppendEpisodeNumberToFileName)
+		err = service.UpdateSettings(model.DownloadOnAdd, model.InitialDownloadCount, model.AutoDownload, model.AppendDateToFileName, model.AppendEpisodeNumberToFileName, model.DarkMode)
 		if err == nil {
 			c.JSON(200, gin.H{"message": "Success"})
 
diff --git a/db/podcast.go b/db/podcast.go
index dc7e888..10e9c99 100644
--- a/db/podcast.go
+++ b/db/podcast.go
@@ -68,6 +68,7 @@ type Setting struct {
 	AutoDownload                  bool `gorm:"default:true"`
 	AppendDateToFileName          bool `gorm:"default:false"`
 	AppendEpisodeNumberToFileName bool `gorm:"default:false"`
+	DarkMode                      bool `gorm:"default:false"`
 }
 type Migration struct {
 	Base
diff --git a/service/podcastService.go b/service/podcastService.go
index 8e89acf..d15d402 100644
--- a/service/podcastService.go
+++ b/service/podcastService.go
@@ -532,7 +532,7 @@ func GetSearchFromItunes(pod model.ItunesSingleResult) *model.CommonSearchResult
 	return p
 }
 
-func UpdateSettings(downloadOnAdd bool, initialDownloadCount int, autoDownload bool, appendDateToFileName bool, appendEpisodeNumberToFileName bool) error {
+func UpdateSettings(downloadOnAdd bool, initialDownloadCount int, autoDownload bool, appendDateToFileName bool, appendEpisodeNumberToFileName bool, darkMode bool) error {
 	setting := db.GetOrCreateSetting()
 
 	setting.AutoDownload = autoDownload
@@ -540,6 +540,7 @@ func UpdateSettings(downloadOnAdd bool, initialDownloadCount int, autoDownload b
 	setting.InitialDownloadCount = initialDownloadCount
 	setting.AppendDateToFileName = appendDateToFileName
 	setting.AppendEpisodeNumberToFileName = appendEpisodeNumberToFileName
+	setting.DarkMode = darkMode
 
 	return db.UpdateSettings(setting)
 }