diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
index 90d53fb2083..66c4b698362 100644
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -20,6 +20,7 @@
 <style>
   h1 {
     font-family: var(--font-accent);
+    border: 1px solid blue;
   }
 
   h1 {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
index ed00b01a426..b82d60dc9f7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
@@ -33,6 +33,11 @@
     { value: "Center", barIcon: "TextAlignCenter" },
     { value: "Right", barIcon: "TextAlignRight" },
   ]
+  const alignLogoOptions = [
+    { value: "Left", barIcon: "AlignLeft" },
+    { value: "Center", barIcon: "AlignCenter" },
+    { value: "Right", barIcon: "AlignRight" },
+  ]
   const widthOptions = ["Max", "Large", "Medium", "Small"]
   const logoSizeOptions = ["18px", "24px", "36px", "48px", "72px", "96px"]
 
@@ -190,6 +195,24 @@
               appendBindingsAsOptions: false,
             }}
           />
+          <PropertyControl
+            label="Logo alignment"
+            control={BarButtonList}
+            onChange={logoAlign => update("logoAlign", logoAlign)}
+            value={$nav.logoAlignment}
+            props={{
+              options: alignLogoOptions,
+            }}
+          />
+
+          <!-- label="Text align"
+           control={BarButtonList}
+           onChange={align => update("textAlign", align)}
+           value={$nav.textAlign}
+           props={{
+             options: alignmentOptions,
+           }} -->
+
           <PropertyControl
             label="Logo link URL"
             control={DrawerBindableCombobox}
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index b0212f04890..5338e214c27 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -38,6 +38,7 @@
   export let openLogoLinkInNewTab
   export let textAlign
   export let textBelow
+  export let logoAlign
   export let embedded = false
 
   const NavigationClasses = {
@@ -253,7 +254,8 @@
                   : '95%'};
                   align-items: {navigation === 'Left' ? 'center' : 'left'};"
               >
-                <div>
+                <div style="text-align: {logoAlign};">
+                  <p>{logoAlign}</p>
                   {#if !hideLogo}
                     {#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
                       <a
@@ -266,7 +268,8 @@
                         <img
                           src={logoUrl || "/builder/bblogo.png"}
                           alt={title}
-                          style="--logo-size: {logoSize};"
+                          style="--logo-size: {logoSize};
+                          align"
                         />
                       </a>
                     {:else if logoLinkUrl}
@@ -293,11 +296,7 @@
                   {/if}
                 </div>
                 {#if !hideTitle && title}
-                  <Heading
-                    size="S"
-                    {textAlign}
-                    style="width: {textBelow ? '100%' : ''}; ">{title}</Heading
-                  >
+                  <Heading size="S" {textAlign} style="">{title}</Heading>
                 {/if}
               </div>
               {#if !embedded}
@@ -565,8 +564,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    border: 2px solid blue;
-    max-width: 100%;
+    width: 100%;
   }
   .portal {
     display: grid;