--- template/app/src/client/components/NavBar/NavBar.tsx
+++ opensaas-sh/app/src/client/components/NavBar/NavBar.tsx
@@ -3,6 +3,7 @@
 import { Link as ReactRouterLink } from "react-router";
 import { useAuth } from "wasp/client/auth";
 import { Link as WaspRouterLink, routes } from "wasp/client/router";
+import { Button } from "../../../client/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -17,6 +18,7 @@
 import logo from "../../static/logo.webp";
 import { cn } from "../../utils";
 import { DarkModeSwitcher } from "../DarkModeSwitcher";
+import { RepoInfo } from "../RepoInfo";
 import { Announcement } from "./Announcement";
 
 export interface NavigationItem {
@@ -51,7 +53,7 @@
       <header
         className={cn(
           "sticky top-0 z-50 transition-all duration-300",
-          isScrolled && "top-4",
+          isScrolled && "xl:mx-30 top-4 mx-4 lg:mx-10",
         )}
       >
         <div
@@ -66,7 +68,7 @@
             className={cn(
               "flex items-center justify-between transition-all duration-300",
               {
-                "p-3 lg:px-6": isScrolled,
+                "p-3 px-4 lg:p-4 lg:px-5": isScrolled,
                 "p-6 lg:px-8": !isScrolled,
               },
             )}
@@ -87,7 +89,7 @@
                     },
                   )}
                 >
-                  Your SaaS
+                  Open SaaS
                 </span>
               </WaspRouterLink>
 
@@ -113,7 +115,12 @@
   return (
     <div className="hidden items-center justify-end gap-3 lg:flex lg:flex-1">
       <ul className="flex items-center justify-center gap-2 sm:gap-4">
-        <DarkModeSwitcher />
+        <li>
+          <RepoInfo />
+        </li>
+        <li>
+          <DarkModeSwitcher />
+        </li>
       </ul>
       {isUserLoading ? null : !user ? (
         <WaspRouterLink
@@ -126,10 +133,11 @@
             },
           )}
         >
-          <div className="text-foreground hover:text-primary flex items-center transition-colors duration-300 ease-in-out">
+          <div className="text-foreground hover:text-primary flex items-center gap-1 transition-colors duration-300 ease-in-out">
+            <span>Demo App</span>
             Log in{" "}
             <LogIn
-              size={isScrolled ? "1rem" : "1.1rem"}
+              size="1rem"
               className={cn("transition-all duration-300", {
                 "ml-1 mt-[0.1rem]": !isScrolled,
                 "ml-1": isScrolled,
@@ -180,7 +188,7 @@
           <SheetHeader>
             <SheetTitle className="flex items-center">
               <WaspRouterLink to={routes.LandingPageRoute.to}>
-                <span className="sr-only">Your SaaS</span>
+                <span className="sr-only">Open SaaS</span>
                 <NavLogo isScrolled={false} />
               </WaspRouterLink>
             </SheetTitle>
@@ -193,9 +201,9 @@
               <div className="py-6">
                 {isUserLoading ? null : !user ? (
                   <WaspRouterLink to={routes.LoginRoute.to}>
-                    <div className="text-foreground hover:text-primary flex items-center justify-end transition-colors duration-300 ease-in-out">
-                      Log in <LogIn size="1.1rem" className="ml-1" />
-                    </div>
+                    <Button variant="outline">
+                      <span>Demo App</span> <LogIn className="ml-1" />
+                    </Button>
                   </WaspRouterLink>
                 ) : (
                   <ul className="space-y-2">
@@ -207,7 +215,14 @@
                 )}
               </div>
               <div className="py-6">
-                <DarkModeSwitcher />
+                <ul className="flex items-center justify-between gap-4">
+                  <li>
+                    <DarkModeSwitcher />
+                  </li>
+                  <li>
+                    <RepoInfo />
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -252,7 +267,7 @@
         "size-7": isScrolled,
       })}
       src={logo}
-      alt="Your SaaS App"
+      alt="Open SaaS App"
     />
   );
 }