diff --git a/web/ensign-landing-page/src/components/content/PageTitle.js b/web/ensign-landing-page/src/components/content/PageTitle.js
index b6f4c835f..0246888d0 100644
--- a/web/ensign-landing-page/src/components/content/PageTitle.js
+++ b/web/ensign-landing-page/src/components/content/PageTitle.js
@@ -2,11 +2,11 @@ import React from "react";
 
 export default function PageTitle() {
     return (
-        <section className="text-white text-left">
-            <div className="container pl-3 pt-5 sm:pl-20">
-              <h1 className="pb-1 text-xl sm:text-3xl md:text-6xl xl:text-7xl">Ensign</h1>
-              <h2 className="font-light text-base sm:text-base md:text-2xl lg:text-4xl">Powering Realtime Experiences</h2>
-              <h2 className="font-light text-base sm:text-base md:text-2xl lg:text-4xl">&amp; Data-driven Apps</h2>
+        <section className="text-white max-w-7xl mx-auto">
+            <div className="pl-3 pt-5 sm:pl-20">
+              <h1 className="text-3xl sm:text-3xl lg:text-5xl xl:text-7xl">Ensign</h1>
+              <h2 className="text-base md:text-2xl lg:text-3xl">Powering Realtime Experiences</h2>
+              <h2 className="text-base md:text-2xl lg:text-3xl lg:text-5xl">&amp; Data-driven Apps</h2>
             </div>
         </section>
     )
diff --git a/web/ensign-landing-page/src/components/layout/BuildApps.js b/web/ensign-landing-page/src/components/layout/BuildApps.js
index 4ec2bed1b..f764f2978 100644
--- a/web/ensign-landing-page/src/components/layout/BuildApps.js
+++ b/web/ensign-landing-page/src/components/layout/BuildApps.js
@@ -2,8 +2,8 @@ import React from 'react';
 
 export default function BuildApps() {
     return (
-    <section className="pb-20">
-        <div className="container mx-auto">
+    <section>
+        <div className="container">
             <h2 className="lg:leading-loose pb-2 text-left">Spend Your Time Writing Code, Not YAML</h2>
             <div className="text-left leading-relaxed">
                 <p className="pb-7">
diff --git a/web/ensign-landing-page/src/components/layout/DevExperience.js b/web/ensign-landing-page/src/components/layout/DevExperience.js
index 04ebf83de..092556fc8 100644
--- a/web/ensign-landing-page/src/components/layout/DevExperience.js
+++ b/web/ensign-landing-page/src/components/layout/DevExperience.js
@@ -3,7 +3,7 @@ import React from 'react'
 export default function DevExperience() {
     return (
         <section className="bg-[#ECF6FF] min-w-min">
-            <div className="mx-auto container pb-20">
+            <div className="container max-w-7xl mx-auto pl-2 pb-20">
                 <h2 className="sm:leading-loose py-5 text-left">The Developer Experience</h2>
                 <p className="text-left pb-5">Ensign is an advanced event data store designed with application developers, data scientists, and product managers in mind. Ensign combines fast transactional services with decoupled processing and rich, insight-driven online analysis, without the need for additional infrastructure or a PhD. in Kafka. Ensign makes event-driven microservices accessible to everyday developers, data scientists, and product managers.</p>
                 <ul className="list-disc list-outside text-left pl-10">
diff --git a/web/ensign-landing-page/src/components/layout/Diagram.js b/web/ensign-landing-page/src/components/layout/Diagram.js
index 8ec4b5050..3b5666aa4 100644
--- a/web/ensign-landing-page/src/components/layout/Diagram.js
+++ b/web/ensign-landing-page/src/components/layout/Diagram.js
@@ -3,7 +3,7 @@ import diagram from './img/ensign-diagram.png'
 
 export default function Diagram() {
     return (
-        <section className="mx-auto container pb-10">
+        <section className="container pb-10">
           <h2>Data Engineering Simplified</h2>
           <img 
             className="mx-auto" 
diff --git a/web/ensign-landing-page/src/components/layout/Footer.js b/web/ensign-landing-page/src/components/layout/Footer.js
index c0e06cd0e..06a8dcde9 100644
--- a/web/ensign-landing-page/src/components/layout/Footer.js
+++ b/web/ensign-landing-page/src/components/layout/Footer.js
@@ -27,13 +27,13 @@ export default function Footer() {
                             </p>
                     </div>
                     <div className="ml-10 xl:ml-5 sm:mt-0 mt-8">
-                        <ul className="sm:grid grid-cols-2 lg:flex flex-col gap-0 mr-5 xl:grid grid-cols-2 gap-x-32 gap-y-4">
+                        <ul className="sm:grid grid-cols-2 lg:flex flex-col gap-0 mr-5 xl:grid grid-cols-2 gap-x-28 gap-y-4">
                                 <li className="pb-8">
                                     <a href="mailto:info@rotational.io" className="flex items-center" target="_blank" rel="noreferrer">
                                         <img 
                                             src={email} 
                                             alt="Envelope" 
-                                            className="p-4 bg-white rounded-lg mr-4" 
+                                            className="p-4 bg-white rounded-lg mr-3" 
                                             />
                                         <span className="text-lg">info@rotational.io</span>
                                     </a>
@@ -43,7 +43,7 @@ export default function Footer() {
                                         <img 
                                             src={github} 
                                             alt="GitHub logo" 
-                                            className="p-4 bg-white rounded-lg mr-4" 
+                                            className="p-4 bg-white rounded-lg mr-3" 
                                             />
                                         <span className="text-lg">rotationalio</span>
                                     </a>
@@ -53,7 +53,7 @@ export default function Footer() {
                                         <img 
                                             src={twitter} 
                                             alt="Twitter logo" 
-                                            className="p-4 bg-white rounded-lg mr-4" 
+                                            className="p-4 bg-white rounded-lg mr-3" 
                                             />
                                         <span className="text-lg">rotationalio</span>
                                     </a>
@@ -63,7 +63,7 @@ export default function Footer() {
                                         <img 
                                             src={linkedin} 
                                             alt="LinkedIn logo" 
-                                            className="p-4 bg-white rounded-lg mr-4" 
+                                            className="p-4 bg-white rounded-lg mr-3" 
                                             />
                                         <span className="text-lg">Rotational</span>
                                     </a>
diff --git a/web/ensign-landing-page/src/components/layout/Header.js b/web/ensign-landing-page/src/components/layout/Header.js
index 3d94afb80..e0b0b442f 100644
--- a/web/ensign-landing-page/src/components/layout/Header.js
+++ b/web/ensign-landing-page/src/components/layout/Header.js
@@ -2,30 +2,13 @@ import React from 'react';
 import Navbar from './Navbar';
 import PageTitle from '../content/PageTitle';
 
-const style = {
-  backgroundImage: `url(${process.env.PUBLIC_URL + '/hero.png'})`,
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'right',
-  backgroundSize: '882.5px 480px',
-  minHeight: '480px',
-  width: '100%',
-}
-
-const hwrap = {
-  backgroundImage: `url(${process.env.PUBLIC_URL + '/wave.png'})`,
-  backgroundRepeat: 'x',
-  backgroundPosition: 'right',
-  minHeight: '480px',
-  width: '100%',
-}
-
 export default function Header() {
     return (
-        <div style={hwrap}>
-          <header style={style}>
-                  <Navbar />
-                  <PageTitle />
+        <div className="bg-wave-pattern bg-repeat-x bg-right min-h-[480px] w-screen">
+          <header className="bg-hero bg-no-repeat bg-right bg-[length:882.5px_480px] min-h-[480px] w-screen">
+            <Navbar />
+            <PageTitle />
           </header>
-          </div>
+        </div>
     )
 }
\ No newline at end of file
diff --git a/web/ensign-landing-page/src/components/layout/Main.js b/web/ensign-landing-page/src/components/layout/Main.js
index c2ffbf0a3..b28e024d3 100644
--- a/web/ensign-landing-page/src/components/layout/Main.js
+++ b/web/ensign-landing-page/src/components/layout/Main.js
@@ -3,7 +3,7 @@ import AccessForm from "../content/AccessForm";
 
 export default function Main() {
     return(
-        <main className="mx-auto container pt-8">
+        <main className="container pt-8">
             <section className="xl:grid grid-cols-3 gap-8">
                 <section className="col-span-2">
                     <h2 className="leading-10 pb-5">Powering Real-time Apps & Analytics</h2>
diff --git a/web/ensign-landing-page/src/components/layout/Navbar.js b/web/ensign-landing-page/src/components/layout/Navbar.js
index 237e12f3e..64e2470fb 100644
--- a/web/ensign-landing-page/src/components/layout/Navbar.js
+++ b/web/ensign-landing-page/src/components/layout/Navbar.js
@@ -4,21 +4,21 @@ import logo from '../layout/img/logo.png'
 
 export default function Navbar() {
     return (
-        <nav className="relative max-w-7xl flex items-center justify-between text-white">
+        <nav className="mx-auto max-w-7xl flex items-center justify-between text-white">
           <a href="https://rotational.io" target="_blank" rel="noreferrer" className="pt-3">
             <img
               src={logo}
               alt="Rotational Labs logo"
               className="pl-3 h-14 w-auto sm:pl-20 h-14"
-            />
+              />
           </a>
           <ul className="topnav" id="myTopnav">
             <li><a href="https://rotational.app">Ensign</a></li>
-            <li className="font-normal"><a href="https://rotational.io/services/" target="_blank" rel="noreferrer">Services</a></li>
-            <li className="font-normal"><a href="https://rotational.io/opensource/" target="_blank" rel="noreferrer">Open Source</a></li>
-            <li className="font-normal"><a href="https://rotational.io/blog/" target="_blank" rel="noreferrer">Blog</a></li>
-            <li className="font-normal"><a href="https://rotational.io/about/" target="_blank" rel="noreferrer">About</a></li>
-            <li className="font-normal"><a href="https://rotational.io/contact/"  target="_blank" rel="noreferrer">Contact</a></li>
+            <li><a href="https://rotational.io/services/" target="_blank" rel="noreferrer">Services</a></li>
+            <li><a href="https://rotational.io/opensource/" target="_blank" rel="noreferrer">Open Source</a></li>
+            <li><a href="https://rotational.io/blog/" target="_blank" rel="noreferrer">Blog</a></li>
+            <li><a href="https://rotational.io/about/" target="_blank" rel="noreferrer">About</a></li>
+            <li><a href="https://rotational.io/contact/"  target="_blank" rel="noreferrer">Contact</a></li>
             <li><a href="#" className="icon" onClick={toggleResponsiveClass}>
                 <i className="fa fa-bars"></i>
             </a></li>
diff --git a/web/ensign-landing-page/public/wave.png b/web/ensign-landing-page/src/components/layout/img/wave.png
similarity index 100%
rename from web/ensign-landing-page/public/wave.png
rename to web/ensign-landing-page/src/components/layout/img/wave.png
diff --git a/web/ensign-landing-page/src/components/pages/Home.js b/web/ensign-landing-page/src/components/pages/Home.js
index 3fbe52bff..5486288cb 100644
--- a/web/ensign-landing-page/src/components/pages/Home.js
+++ b/web/ensign-landing-page/src/components/pages/Home.js
@@ -11,13 +11,15 @@ const Home = () => {
     return (
         <>
           <Header />
-          <Main />
-          <Diagram />
-          <BuildApps />
+          <div className="max-w-7xl mx-auto pb-20">
+            <Main />
+            <Diagram />
+            <BuildApps />
+          </div>
           <DevExperience />
-         <div className="bg-[#ECF6FF]">
-            <Footer />
-         </div>
+          <div className="bg-[#ECF6FF]">
+              <Footer />
+            </div>
         </>
       );
 }
diff --git a/web/ensign-landing-page/src/input.css b/web/ensign-landing-page/src/input.css
index 3965e9a64..eae289844 100644
--- a/web/ensign-landing-page/src/input.css
+++ b/web/ensign-landing-page/src/input.css
@@ -9,7 +9,8 @@
 
 @layer base {
   h1 {
-    @apply text-6xl;
+    @apply font-bold;
+    @apply pb-1;
   }
   h2 {
     @apply text-4xl;
@@ -20,7 +21,7 @@
     @apply font-bold;
   }
   p, li {
-    @apply text-xl;
+    @apply font-normal;
   }
 }
 
@@ -70,7 +71,7 @@ body {
 }
 
 
-/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
+/* When the screen is less than 881 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 @media screen and (max-width: 881px) {
 .topnav a {display: none;}
 .topnav a.icon {
diff --git a/web/ensign-landing-page/tailwind.config.js b/web/ensign-landing-page/tailwind.config.js
index 667bb1c47..14d103b1e 100644
--- a/web/ensign-landing-page/tailwind.config.js
+++ b/web/ensign-landing-page/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
   theme: {
     backgroundImage: {
       'hero': "url('/src/components/layout/img/hero.png')",
+      'wave-pattern': "url('/src/components/layout/img/wave.png')",
       'footer': "url('/src/components/layout/img/foot.png')",
     },
     extend: {}