diff --git a/www/app/(auth)/userInfo.tsx b/www/app/(auth)/userInfo.tsx
index d0a8ad02..a8b918b0 100644
--- a/www/app/(auth)/userInfo.tsx
+++ b/www/app/(auth)/userInfo.tsx
@@ -10,34 +10,17 @@ export default function UserInfo() {
   const isAuthenticated = useFiefIsAuthenticated();
   const userinfo = useFiefUserinfo();
 
-  return (
-    <header className="bg-black w-full border-b border-gray-700 flex justify-between items-center py-2 mb-3">
-      {/* Logo on the left */}
-      <Link href="/">
-        <Image
-          src="/reach.png"
-          width={16}
-          height={16}
-          className="h-6 w-auto ml-2"
-          alt="Reflector"
-        />
-      </Link>
-
-      {/* Text link on the right */}
-      {!isAuthenticated && (
-        <span className="text-white hover:underline font-thin px-2">
-          <Link href="/login">Log in or create account</Link>
-        </span>
-      )}
-      {isAuthenticated && (
-        <span className="text-white font-thin px-2">
-          {userinfo?.email} (
-          <span className="hover:underline">
-            <Link href="/logout">Log out</Link>
-          </span>
-          )
-        </span>
-      )}
-    </header>
+  return !isAuthenticated ? (
+    <span className="hover:underline font-thin px-2">
+      <Link href="/login">Log in or create account</Link>
+    </span>
+  ) : (
+    <span className="font-thin px-2">
+      {userinfo?.email} (
+      <span className="hover:underline">
+        <Link href="/logout">Log out</Link>
+      </span>
+      )
+    </span>
   );
 }
diff --git a/www/app/layout.tsx b/www/app/layout.tsx
index c15974a2..3f5a846c 100644
--- a/www/app/layout.tsx
+++ b/www/app/layout.tsx
@@ -1,12 +1,13 @@
 import "./styles/globals.scss";
-import { Roboto } from "next/font/google";
+import { Poppins } from "next/font/google";
 import { Metadata } from "next";
 import FiefWrapper from "./(auth)/fiefWrapper";
 import UserInfo from "./(auth)/userInfo";
 import { ErrorProvider } from "./(errors)/errorContext";
 import ErrorMessage from "./(errors)/errorMessage";
+import Image from "next/image";
 
-const roboto = Roboto({ subsets: ["latin"], weight: "400" });
+const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] });
 
 export const metadata: Metadata = {
   title: {
@@ -55,24 +56,37 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={roboto.className + " flex flex-col min-h-screen"}>
+      <body className={poppins.className + " flex flex-col min-h-screen"}>
         <FiefWrapper>
           <ErrorProvider>
             <ErrorMessage />
-            <div id="container">
-              <div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]">
-                <UserInfo />
-
-                <div className="h-[13svh] flex flex-col justify-center items-center">
-                  <h1 className="text-5xl font-bold text-blue-500">
-                    Reflector
-                  </h1>
-                  <p className="text-gray-500">
-                    Capture The Signal, Not The Noise
-                  </p>
+            {/*TODO lvh or svh ? */}
+            <div
+              id="container"
+              className="flex flex-col items-center min-h-[100svh]"
+            >
+              <header className="flex justify-between items-center p-2 md:p-4 w-full">
+                {/* Logo on the left */}
+                <div className="flex">
+                  <Image
+                    src="/reach.png"
+                    width={16}
+                    height={16}
+                    className="h-10 w-auto mr-2"
+                    alt="Reflector"
+                  />
+                  <div className="hidden flex-col md:flex">
+                    <h1 className="text-4xl font-bold">Reflector</h1>
+                    <p className="text-gray-500">
+                      Capture The Signal, Not The Noise
+                    </p>
+                  </div>
                 </div>
-                {children}
-              </div>
+                {/* Text link on the right */}
+                <UserInfo />
+              </header>
+
+              {children}
             </div>
           </ErrorProvider>
         </FiefWrapper>
diff --git a/www/app/transcripts/new/page.tsx b/www/app/transcripts/new/page.tsx
index f993f93e..eef7d411 100644
--- a/www/app/transcripts/new/page.tsx
+++ b/www/app/transcripts/new/page.tsx
@@ -65,10 +65,8 @@ const TranscriptCreate = () => {
         </>
       ) : (
         <>
-          <div className="flex flex-col items-center justify-center w-fit bg-white px-6 py-8 mt-8 rounded-xl">
-            <h1 className="text-2xl font-bold text-blue-500">
-              Audio Permissions
-            </h1>
+          <div className="flex flex-col items-center justify-center w-fit px-6 py-8 mt-8 rounded-xl">
+            <h1 className="text-2xl font-bold">Audio Permissions</h1>
             {loading ? (
               <p className="text-gray-500 text-center mt-5">
                 Checking permission...
@@ -83,7 +81,7 @@ const TranscriptCreate = () => {
                     : "Please grant permission to continue."}
                 </p>
                 <button
-                  className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-auto"
+                  className="mt-4 bg-black/40 hover:bg-black/60 text-white font-bold py-2 px-4 rounded m-auto"
                   onClick={requestPermission}
                   disabled={permissionDenied}
                 >
