diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 79cd381..ffa561b 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -36,7 +36,7 @@
   }
 
   .dark {
-    --background: 0 0% 0%;
+    --background: 240 67% 2%;
     --foreground: 210 40% 98%;
 
     --card: 222.2 84% 4.9%;
diff --git a/apps/web/components/header.tsx b/apps/web/components/header.tsx
index e7d0cac..fdba2ca 100644
--- a/apps/web/components/header.tsx
+++ b/apps/web/components/header.tsx
@@ -1,18 +1,28 @@
 import React from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
+import { ArrowRight } from 'lucide-react'
+import { Button } from '@/components/ui/button'
 
 export const Header = () => {
   return (
-    <nav className="container z-10 flex items-start justify-between p-5">
-      <Link href="/">
-        <Image
-          src="/full-logo.png"
-          width={101}
-          height={42}
-          alt="BolhaDEV.chat logo featuring a stylized globe and a speech bubble with a language symbol on a dark background."
-        ></Image>
-      </Link>
+    <nav className="w-full border-b border-b-zinc-800 py-6">
+      <div className="container flex items-start justify-between">
+        <Link href="/">
+          <Image
+            src="/full-logo.png"
+            width={173}
+            height={72}
+            alt="BolhaDEV.chat logo featuring a stylized globe and a speech bubble with a language symbol on a dark background."
+          ></Image>
+        </Link>
+        <Link href="room/queue" className="self-center">
+          <Button className="rounded-xl p-6 text-zinc-800">
+            <span className="mr-1 text-base leading-6">Get started</span>
+            <ArrowRight />
+          </Button>
+        </Link>
+      </div>
     </nav>
   )
 }