diff --git a/assets/css/article.css b/assets/css/article.css
index ef0f82a..1e2dd40 100644
--- a/assets/css/article.css
+++ b/assets/css/article.css
@@ -28,7 +28,11 @@
 }
 
 .article h4 {
-  @apply my-2 font-semibold text-lg leading-8 text-zinc-800;
+  @apply my-2 font-semibold text-lg leading-8 text-stone-800;
+}
+
+.dark .article h4 {
+  @apply text-stone-300;
 }
 
 .article p, .article div {
@@ -47,6 +51,10 @@
   @apply text-cyan-900;
 }
 
+.dark .article a {
+  @apply text-cyan-700;
+}
+
 .article ul {
   @apply pl-6 list-disc my-2;
 }
diff --git a/lib/outlook_web/components/dark_mode_component.ex b/lib/outlook_web/components/dark_mode_component.ex
index d04dd62..f937361 100644
--- a/lib/outlook_web/components/dark_mode_component.ex
+++ b/lib/outlook_web/components/dark_mode_component.ex
@@ -9,29 +9,32 @@ defmodule OutlookWeb.DarkModeComponent do
 
   def dark_mode_widget(assigns) do
     ~H"""
-    <div id="dark-mode-widget" class="relative flex flex-row-reverse p-4" phx-hook="dark_mode_widget">
-      <button type="button" id="headlessui-listbox-button-4" aria-haspopup="true" aria-expanded="true" data-headlessui-state="open" >
-        <span class="dark:hidden">
-          <Heroicons.sun class="w-5 h-5 stroke-slate-400 dark:stroke-slate-500" />
-        </span>
-        <span class="hidden dark:inline">
-          <Heroicons.moon class="w-5 h-5 stroke-slate-400 dark:stroke-slate-500" />
-        </span>
-      </button>
-      <ul class="hidden absolute z-50 top right-2 bg-white rounded-lg ring-1 ring-slate-900/10 shadow-lg overflow-hidden w-36 py-1 text-sm text-slate-700 font-semibold dark:bg-slate-800 dark:ring-0 dark:highlight-white/5 dark:text-slate-300 mt-8" aria-labelledby="headlessui-listbox-label-3" aria-orientation="vertical" id="headlessui-listbox-options-5" role="listbox" tabindex="0" data-headlessui-state="open">
-        <li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-1" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
-          <Heroicons.sun  class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
-          Light
-        </li>
-        <li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-2" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
-          <Heroicons.moon class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
-          Dark
-        </li>
-        <li class="py-1 px-2 flex items-center cursor-pointer text-slate-700 dark:text-slate-300" id="selector-option-3" role="option" tabindex="-1" aria-selected="true" data-headlessui-state="selected">
-          <Heroicons.computer_desktop class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
-          System
-        </li>
-      </ul>
+    <div id="dark-mode-widget" class="absolute flex w-full justify-between p-0" phx-hook="dark_mode_widget">
+      <div class="flex"></div>
+      <div class="flex">
+        <button class="p-2" type="button">
+          <span class="dark:hidden">
+            <Heroicons.sun class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
+          </span>
+          <span class="hidden dark:inline">
+            <Heroicons.moon class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
+          </span>
+        </button>
+        <ul class="hidden absolute z-50 top right-2 bg-white rounded-lg ring-1 ring-slate-900/10 shadow-lg overflow-hidden w-36 py-1 text-sm text-slate-700 font-semibold dark:bg-slate-800 dark:ring-0 dark:highlight-white/5 dark:text-slate-300 mt-8" aria-labelledby="headlessui-listbox-label-3" aria-orientation="vertical" id="headlessui-listbox-options-5" role="listbox" tabindex="0" data-headlessui-state="open">
+          <li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-1" role="option" tabindex="-1">
+            <Heroicons.sun  class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
+            Light
+          </li>
+          <li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-2" role="option" tabindex="-1">
+            <Heroicons.moon class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
+            Dark
+          </li>
+          <li class="py-1 px-2 flex items-center cursor-pointer text-slate-700 dark:text-slate-300" id="selector-option-3" role="option" tabindex="-1" aria-selected="true" data-headlessui-state="selected">
+            <Heroicons.computer_desktop class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
+            System
+          </li>
+        </ul>
+      </div>
     </div>
     """
   end