diff --git a/src/newsreader/scss/components/index.scss b/src/newsreader/scss/components/index.scss
index b82a22d..0240ee1 100644
--- a/src/newsreader/scss/components/index.scss
+++ b/src/newsreader/scss/components/index.scss
@@ -3,6 +3,7 @@
 @import './main/index';
 @import './navbar/index';
 @import './loading-indicator/index';
+@import './theme-switcher/index';
 
 @import './modal/index';
 
diff --git a/src/newsreader/scss/components/navbar/_navbar.scss b/src/newsreader/scss/components/navbar/_navbar.scss
index 60c9f48..5a3051c 100644
--- a/src/newsreader/scss/components/navbar/_navbar.scss
+++ b/src/newsreader/scss/components/navbar/_navbar.scss
@@ -1,6 +1,7 @@
 .nav {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   margin: 0 0 5px 0;
   padding: 10px 0;
diff --git a/src/newsreader/scss/components/theme-switcher/_theme-switcher.scss b/src/newsreader/scss/components/theme-switcher/_theme-switcher.scss
new file mode 100644
index 0000000..78959f2
--- /dev/null
+++ b/src/newsreader/scss/components/theme-switcher/_theme-switcher.scss
@@ -0,0 +1,5 @@
+.theme-switcher {
+  &:hover {
+    cursor: pointer;
+  }
+}
diff --git a/src/newsreader/scss/components/theme-switcher/index.scss b/src/newsreader/scss/components/theme-switcher/index.scss
new file mode 100644
index 0000000..0037786
--- /dev/null
+++ b/src/newsreader/scss/components/theme-switcher/index.scss
@@ -0,0 +1 @@
+@import './theme-switcher';
diff --git a/src/newsreader/templates/base.html b/src/newsreader/templates/base.html
index 66a80db..792997f 100644
--- a/src/newsreader/templates/base.html
+++ b/src/newsreader/templates/base.html
@@ -28,7 +28,7 @@
         {% endif %}
       </ol>
 
-      <button class="theme-switcher"></button>
+      <i class="theme-switcher gg-dark-mode"></i>
     </nav>
 
     {% if messages %}