diff --git a/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor b/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
index d7ef8e5..5617507 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="flex-1 px-4 md:px-12 py-4">
+    <div class="flex-1 px-4 md:px-12 lg:px-24 xl:px-32 py-4">
         @Body
     </div>
 
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
index 85371db..95ba19f 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
@@ -1,7 +1,5 @@
 @page "/"
 
-@implements IDisposable
-
 @inject IJSRuntime JSRuntime
 
 <PageTitle>Home - Beau Findlay</PageTitle>
@@ -50,8 +48,6 @@ else
     {
         if (firstRender)
         {
-            Typewriter.OnAllTypingCompleted += HandleTypingCompleted;
-            
             var renderedBeforeAsString = await JSRuntime.InvokeAsync<string>("localStorage.getItem", ComponentKey);
 
             var previousValue = hasPreviouslyRendered;
@@ -69,14 +65,4 @@ else
         }
     }
 
-    private static void HandleTypingCompleted()
-    {
-        Console.WriteLine("Typewriter finished typing.");
-    }
-
-    public void Dispose()
-    {
-        Typewriter.OnAllTypingCompleted -= HandleTypingCompleted;
-    }
-
 }
\ No newline at end of file
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
index 399f64d..cb692ef 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
@@ -569,11 +569,6 @@ video {
   margin-right: auto;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -662,6 +657,22 @@ video {
   width: 100%;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -688,6 +699,10 @@ video {
   cursor: pointer;
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -799,11 +814,6 @@ video {
   padding-bottom: 1rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -813,16 +823,40 @@ video {
   padding-bottom: 1rem;
 }
 
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
 
-.font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+.font-cascadia {
+  font-family: Cascadia Code, mono-space;
 }
 
 .text-2xl {
@@ -935,10 +969,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.outline {
-  outline-style: solid;
-}
-
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -954,6 +984,12 @@ video {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
+@font-face {
+  font-family: "Cascadia Code";
+
+  src: url("../fonts/CascadiaCode.woff2");
+}
+
 @keyframes blink {
   from, to {
     opacity: 1
@@ -1102,6 +1138,20 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:px-32 {
+    padding-left: 8rem;
+    padding-right: 8rem;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:fill-gray-300 {
     fill: #d1d5db;
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html b/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
index 874083d..e17f8a7 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
@@ -29,7 +29,7 @@
           referrerpolicy="no-referrer"/>
 </head>
 
-<body class="bg-black font-mono text-slate-50 min-h-screen antialiased">
+<body class="bg-black font-cascadia text-slate-50 min-h-screen antialiased">
 <div id="app"
      class="h-full">
     <div class="flex items-center justify-center text-2xl">