diff --git a/assets/css/app.css b/assets/css/app.css
index 84caef2..3533280 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -58,10 +58,7 @@
   a[rel] svg { 
     width: 1em;
     fill: rgb(var(--color-foreground));
-  }
-  svg {
-    width: 1.5em;
-  }
+  } 
 
   .alert {
     @apply p-3 mt-3 rounded;
diff --git a/lib/chiya_web/components/admin_components.ex b/lib/chiya_web/components/admin_components.ex
index 1d71c48..94b1757 100644
--- a/lib/chiya_web/components/admin_components.ex
+++ b/lib/chiya_web/components/admin_components.ex
@@ -119,10 +119,7 @@ defmodule ChiyaWeb.AdminComponents do
         </li>
       <% end %>
       <li>
-        <.link href="#" id="dark-mode-toggle" class="text-sm leading-6">
-          <span class="inline dark:hidden bg-blue-900 p-1 rounded">🌙</span>
-          <span class="hidden dark:inline bg-blue-500 p-1 rounded">☀️</span>
-        </.link>
+        <.darkmode_toggle />
       </li>
     </ul>
     """
diff --git a/lib/chiya_web/components/core_components.ex b/lib/chiya_web/components/core_components.ex
index a90874e..605d369 100644
--- a/lib/chiya_web/components/core_components.ex
+++ b/lib/chiya_web/components/core_components.ex
@@ -30,6 +30,15 @@ defmodule ChiyaWeb.CoreComponents do
     """
   end
 
+  def darkmode_toggle(assigns) do
+    ~H"""
+    <.link href="#" id="dark-mode-toggle" class="text-sm leading-6">
+      <span class="hidden dark:inline bg-blue-900 p-1 rounded">🌙</span>
+      <span class="inline dark:hidden bg-blue-600 p-1 rounded">☀️</span>
+    </.link>
+    """
+  end
+
   @doc """
   Renders a modal.
 
diff --git a/lib/chiya_web/components/layouts/public.html.heex b/lib/chiya_web/components/layouts/public.html.heex
index e879404..3d8af17 100644
--- a/lib/chiya_web/components/layouts/public.html.heex
+++ b/lib/chiya_web/components/layouts/public.html.heex
@@ -1,19 +1,2 @@
-<header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-end border-b border-theme-base/10 py-3">
-    <div class="flex items-center gap-4">
-      <%= for channel <- @channels do %>
-        <.link
-          href={~p"/c/#{channel.slug}"}
-          class="font-semibold text-theme-base hover:text-theme-base/75 text-sm"
-        >
-          <%= channel.name %>
-        </.link>
-      <% end %>
-    </div>
-  </div>
-</header>
-
-<section class="mx-auto max-w-2xl px-4 mb-16">
-  <.flash_group flash={@flash} />
-  <%= @inner_content %>
-</section>
+<.flash_group flash={@flash} />
+<%= @inner_content %>
diff --git a/lib/chiya_web/components/layouts/root_public.html.heex b/lib/chiya_web/components/layouts/root_public.html.heex
index e749694..8b0f15e 100644
--- a/lib/chiya_web/components/layouts/root_public.html.heex
+++ b/lib/chiya_web/components/layouts/root_public.html.heex
@@ -26,24 +26,33 @@
       <%= @settings.custom_css %>
     </style>
   </head>
-  <body class="bg-theme-background antialiased min-h-screen flex flex-col">
-    <.admin_bar current_user={@current_user} settings={@settings} />
+  <body class="bg-theme-background mx-3 md:mx-0">
+    <header class="mt-8 max-w-xl mx-auto">
+      <nav>
+        <ul class="flex gap-3">
+          <li>
+            <a href="/" class="text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold"><.icon name="hero-home" /> Home</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
 
-    <main class="flex-1">
+    <main class="mx-auto max-w-xl">
       <%= @inner_content %>
     </main>
 
-    <footer class="px-4 py-1 sm:px-6 lg:px-8 bg-white/30 dark:bg-black/30 text-gray-900 dark:text-gray-100 text-xs leading-6 font-semibold flex">
-      <div>
-        <span class="text-theme-primary">⌘</span> <span>Chiya</span>
-        <span class="rounded-full bg-theme-primary/10 px-2 text-xs font-medium leading-6 text-theme-primary">
-          v<%= Application.spec(:chiya, :vsn) %>
-        </span>
-      </div>
-      <div class="flex-1" />
-      <div><a href="#top">Back to top</a></div>
+    <footer class="mx-auto max-w-xl mt-8 text-theme-base border-t pt-8 border-theme-background1">
+      <span>Served by Chiya v<%= Application.spec(:chiya, :vsn) %></span>
+      <span>·</span>
+      <span>Made by Inhji</span>
+      <span>·</span>
+      <span>Struggling to make a decent website since 2011</span>     
+      <%= for identity <- @identities do %>
+      <span>·</span>
+      <span><a href={identity.url}><%= identity.name %></a></span>
+      <% end %>
+      <span>·</span>
+      <span><a href={~p"/admin"}>Admin</a></span>
     </footer>
-
-    <%= raw(@settings.custom_html) %>
   </body>
 </html>
diff --git a/lib/chiya_web/components/public_components.ex b/lib/chiya_web/components/public_components.ex
index 740a58d..f9c89da 100644
--- a/lib/chiya_web/components/public_components.ex
+++ b/lib/chiya_web/components/public_components.ex
@@ -20,7 +20,7 @@ defmodule ChiyaWeb.PublicComponents do
   end
 
   @doc """
-  Renders a header with title.
+  Renders a note-header with title.
   """
   attr :class, :string, default: nil
   attr :inline, :boolean, default: false
diff --git a/lib/chiya_web/controllers/page_html/home.html.heex b/lib/chiya_web/controllers/page_html/home.html.heex
index 61289eb..d8374d2 100644
--- a/lib/chiya_web/controllers/page_html/home.html.heex
+++ b/lib/chiya_web/controllers/page_html/home.html.heex
@@ -1,28 +1,33 @@
-<div class="mx-auto max-w-xl mx-4 lg:mx-0">
-  <h1 class="mt-16 text-3xl font-extrabold leading-10 tracking-tight text-theme-primary">
+<section class="p-10 bg-theme-background1 mt-8">
+  <h1 class="text-3xl font-extrabold leading-10 tracking-tight text-theme-primary">
     <%= @settings.title %>
   </h1>
-  <p class="mt-4 text-base leading-7 text-theme-base">
+  <p class="mt-4 leading-7 text-theme-base/75 uppercase font-semibold">
     <%= @settings.subtitle %>
   </p>
+</section>
 
-  <div class="w-full mt-6 sm:w-auto">
-    <div class="flex gap-4 text-sm leading-6 text-theme-base">
-      <%= for identity <- @public_identities do %>
-        <div>
-          <a
-            rel={identity.rel}
-            href={identity.url}
-            class="group -mx-2 -my-0.5 inline-flex items-center gap-1 rounded-lg px-2 py-0.5 hover:bg-theme-primary/50 transition"
-          >
-            <%= raw(identity.icon) %>
-            <%= identity.name %>
-          </a>
-        </div>
-      <% end %>
-    </div>
-  </div>
-  <%= if @channel do %>
-    <.note_list notes={@channel.notes} layout={@channel.layout} />
+<section class="mt-8 text-sm">
+  <ul class="flex flex-wrap gap-3">
+    <li>
+      <a href="#" class="text-theme-base px-3 py-2.5  hover:bg-theme-background1 rounded transition font-semibold">
+        <.icon name="hero-megaphone" />
+      </a>
+    </li>
+  <%= for channel <- @channels do %>
+    <li>
+      <a href={~p"/c/#{channel.slug}"} class="text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold">
+        <%= channel.name %>
+      </a>
+    </li>
   <% end %>
-</div>
+  </ul>
+</section>
+
+<%= if @channel do %>
+<section class="mt-8 border-t border-theme-background1">
+  <.note_list notes={@channel.notes} layout={@channel.layout} />  
+</section>
+<% end %>
+
+
