diff --git a/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor b/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
index 9a486ee..d7ef8e5 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
@@ -3,7 +3,7 @@
 <div class="flex flex-col min-h-screen fade-in">
     <NavBar/>
     
-    <div class="px-4 md:px-12 py-4">
+    <div class="flex-1 px-4 md:px-12 py-4">
         @Body
     </div>
 
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
index c71ccbd..bd8e300 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
@@ -2,50 +2,61 @@
 
 @inject IJSRuntime JSRuntime
 
-@if (!hasPreviouslyRendered)
+@if (comingSoon)
 {
-    <h1 class="text-4xl">
-        <Typewriter Text="This app"/>
-    </h1>
+    <div class="text-center">
+        <h1 class="text-4xl">Coming soon...</h1>
+    </div>
 }
 else
 {
-    <h1 class="text-4xl">This app<span class="blinking-cursor">|</span></h1>
+    @if (!hasPreviouslyRendered)
+    {
+        <h1 class="text-4xl">
+            <Typewriter Text="This app"/>
+        </h1>
+    }
+    else
+    {
+        <h1 class="text-4xl">This app<span class="blinking-cursor">|</span></h1>
+    }
+
+    <p class="py-4 text-xl">Below is a brief outline of how this app is made and what technologies are used. If you'd like to dive straight in then full project is available on my <Anchor Href="https://github.com/bdfin/my-portfolio">GitHub</Anchor>.</p>
+
+    <section class="py-6" id="@FrontEndSection">
+        <h2 class="text-2xl">Front-end</h2>
+
+        <p class="py-4">I wanted to create a decent, modern client-side experience for this app and given my <em class="text-xs">(very...)</em> limited front-end expertise I decided to choose <Anchor Href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">.NET Blazor Webassembly</Anchor>. Blazor is Microsoft's take on component-based SPAs (single page applications) and offers us back-end focussed devs a way of producing decent client experiences without needing to dive into another front-end specific technology.</p>
+
+        <p class="py-4">Blazor traditionally came in two flavours, server and webassembly with an additional third option (Blazor Web App) recently released with .NET 8 which is an amalgamation of both. <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-server">Blazor Server</Anchor> initially generates content on the server and utilises web-sockets to communicate dynamic UI updates with the client without requiring a page load, whereas <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-webassembly">Blazor Webassembly</Anchor> downloads the entire app to the client browser on first load alongside a light-weight .NET run-time to execute code directly on the browsers UI thread.</p>
+
+        <p class="py-4">As Blazor server requires a dedicated server to host the application, I chose Blazor webassembly to enable me to host this app for free using an <Anchor Href="https://azure.microsoft.com/en-gb/products/app-service/static">Azure Static Web App</Anchor>. You can read more about this in the <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">hosting</a> section.</p>
+    </section>
+
+    <section class="py-6" id="@BackEndSection">
+        <h2 class="text-2xl pb-4">Back-end</h2>
+        <p class="my-4">As the </p>
+    </section>
+
+
+    <section class="py-6" id="@HostingSection">
+        <h2 class="text-2xl pb-4">Hosting</h2>
+        <p></p>
+    </section>
 }
 
-<p class="py-4 text-xl">Below is a brief outline of how this app is made and what technologies are used. If you'd like to dive straight in then full project is available on my <Anchor Href="https://github.com/bdfin/my-portfolio">GitHub</Anchor>.</p>
 
-<section class="py-6" id="@FrontEndSection">
-    <h2 class="text-2xl">Front-end</h2>
-    
-    <p class="py-4">I wanted to create a decent, modern client-side experience for this app and given my <em class="text-xs">(very...)</em> limited front-end expertise I decided to choose <Anchor Href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">.NET Blazor Webassembly</Anchor>. Blazor is Microsoft's take on component-based SPAs (single page applications) and offers us back-end focussed devs a way of producing decent client experiences without needing to dive into another front-end specific technology.</p>
-    
-    <p class="py-4">Blazor traditionally came in two flavours, server and webassembly with an additional third option (Blazor Web App) recently released with .NET 8 which is an amalgamation of both. <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-server">Blazor Server</Anchor> initially generates content on the server and utilises web-sockets to communicate dynamic UI updates with the client without requiring a page load, whereas <Anchor Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-webassembly">Blazor Webassembly</Anchor> downloads the entire app to the client browser on first load alongside a light-weight .NET run-time to execute code directly on the browsers UI thread.</p>
-    
-    <p class="py-4">As Blazor server requires a dedicated server to host the application, I chose Blazor webassembly to enable me to host this app for free using an <Anchor Href="https://azure.microsoft.com/en-gb/products/app-service/static">Azure Static Web App</Anchor>. You can read more about this in the <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">hosting</a> section.</p>
-</section>
-
-<section class="py-6" id="@BackEndSection">
-    <h2 class="text-2xl pb-4">Back-end</h2>
-    <p class="my-4">As the </p>
-</section>
-
-
-<section class="py-6" id="@HostingSection">
-    <h2 class="text-2xl pb-4">Hosting</h2>
-    <p></p>
-</section>
-
-<AnchorNavigation />
+<AnchorNavigation/>
 
 @code {
-    private const string ComponentKey  = "ComponentRendered_About";
+    private const string ComponentKey = "ComponentRendered_About";
     private const string FrontEndSection = "front-end";
     private const string BackEndSection = "back-end";
     private const string HostingSection = "hosting";
-    
+
     private bool hasPreviouslyRendered;
-    
+    private bool comingSoon = true;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -59,7 +70,7 @@ else
             {
                 await JSRuntime.InvokeVoidAsync("localStorage.setItem", ComponentKey, "true");
             }
-            
+
             if (previousValue != hasPreviouslyRendered)
             {
                 StateHasChanged();
@@ -71,4 +82,5 @@ else
     {
         await JSRuntime.InvokeVoidAsync("scrollToElement", elementId);
     }
+
 }
\ No newline at end of file
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
index a40cf8b..c84376c 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
@@ -19,14 +19,14 @@
             <div class="sm:col-span-2">
                 <label for="name" class="block font-semibold leading-6">Name</label>
                 <div class="mt-2.5">
-                    <InputText id="name" @bind-Value="contactInput.Name" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"/>
+                    <InputText id="name" @bind-Value="contactInput.Name" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="given-name"/>
                     <ValidationMessage For="() => contactInput.Name" class="text-red-600"/>
                 </div>
             </div>
             <div class="sm:col-span-2">
                 <label for="email" class="block font-semibold leading-6">Email</label>
                 <div class="mt-2.5">
-                    <InputText id="email" @bind-Value="contactInput.Email" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"/>
+                    <InputText id="email" @bind-Value="contactInput.Email" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="email"/>
                     <ValidationMessage For="() => contactInput.Email" class="text-red-600"/>
                 </div>
             </div>
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
index 562a466..399f64d 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
@@ -666,6 +666,10 @@ video {
   max-width: 36rem;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }