diff --git a/src/app/components/Hero/index.tsx b/src/app/components/Hero/index.tsx
index d4115d096..a76b84f56 100644
--- a/src/app/components/Hero/index.tsx
+++ b/src/app/components/Hero/index.tsx
@@ -43,15 +43,18 @@ export function Hero() {
       >
         <Flex direction="column" align="center" gap="1">
           <Heading size="9" weight="bold" align="center">
-            BlitzKit
-            {isBranchNamed && (
-              <>
-                {' '}
-                <Code color="gray" highContrast variant="solid">
+            <Flex
+              align="center"
+              gap={{ initial: '1', xs: '4' }}
+              direction={{ initial: 'column', xs: 'row' }}
+            >
+              BlitzKit
+              {isBranchNamed && (
+                <Code size="8" color="gray" highContrast variant="outline">
                   {BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH!]}
                 </Code>
-              </>
-            )}
+              )}
+            </Flex>
           </Heading>
 
           {!isBranchNamed && (
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 404486075..1b767cab5 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -78,15 +78,14 @@ export default function Navbar() {
                 weight="bold"
                 onClick={() => setShowHamburgerMenu(false)}
               >
-                BlitzKit
-                {isBranchNamed && (
-                  <>
-                    {' '}
-                    <Code color="gray" highContrast variant="solid">
+                <Flex align="center" gap="1">
+                  BlitzKit
+                  {isBranchNamed && (
+                    <Code color="gray" size="1" highContrast variant="outline">
                       {BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH!]}
                     </Code>
-                  </>
-                )}
+                  )}
+                </Flex>
               </Link>
             </Flex>