diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index bd5c376..01a7c57 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: "#FD4F00",
+        brand: "#DC7556",
       }
     },
   },
diff --git a/lib/chronoscope_web/components/layouts/app.html.heex b/lib/chronoscope_web/components/layouts/app.html.heex
index cc5a745..8223b45 100644
--- a/lib/chronoscope_web/components/layouts/app.html.heex
+++ b/lib/chronoscope_web/components/layouts/app.html.heex
@@ -4,7 +4,7 @@
       <a href="/" class="hover:text-zinc-700 dark:hover:text-zinc-400">
         Chronoscope
       </a>
-      <p class="bg-brand/5 dark:bg-brand/70 text-brand dark:text-zinc-900 rounded-full px-2 font-medium leading-6">
+      <p class="bg-brand/10 dark:bg-brand text-brand dark:text-zinc-900 rounded-full px-2 font-medium leading-6">
         v<%= Application.spec(:chronoscope, :vsn) %>
       </p>
     </div>
@@ -19,7 +19,7 @@
   </div>
 </header>
 <main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-7xl">
+  <div class="mx-auto max-w-fit">
     <.flash_group flash={@flash} />
     <%= @inner_content %>
   </div>