diff --git a/src/HomePage.tsx b/src/HomePage.tsx
index a63e7f7..16a3642 100644
--- a/src/HomePage.tsx
+++ b/src/HomePage.tsx
@@ -5,6 +5,7 @@ import Usecases from './components/Usecases';
 import About from './components/About';
 import Footer from './components/Footer';
 import How from './components/How';
+import Pagesigner from './components/Pagesigner';
 
 function HomePage() {
   return (
@@ -15,6 +16,7 @@ function HomePage() {
         <Usecases />
         <How />
         <Roadmap />
+        <Pagesigner />
         <About />
       </main>
       <Footer />
diff --git a/src/components/About.css b/src/components/About.css
index edd9cd8..239269d 100644
--- a/src/components/About.css
+++ b/src/components/About.css
@@ -5,6 +5,9 @@
 }
 
 #About .container {
+  display: flex;
+  flex-direction: column;
   text-align: center;
+  align-items: center;
   max-width: 600px;
 }
diff --git a/src/components/About.tsx b/src/components/About.tsx
index ae817dc..0aedd05 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -6,16 +6,22 @@ export default function About() {
   return (
     <div id="About">
       <div className="container">
-        <img src={ethlogo}></img>
+        <div className="item">
+          <img src={ethlogo}></img>
+        </div>
         <div style={{ height: "1.375rem" }} />
-        <h3>
-          TLSNotary is a public good & open source project supported by the Ethereum Foundation under the
-          Privacy and Scaling Exploration Team.
-        </h3>
+        <div className="item">
+          <h3>
+            TLSNotary is a public good & open source project supported by the Ethereum Foundation under the
+            Privacy and Scaling Exploration Team.
+          </h3>
+        </div>
         <div style={{ height: "1.375rem" }} />
-        <a href={config.links.pse}>
-          <button className="pill-button">Learn More</button>
-        </a>
+        <div className="item">
+          <a href={config.links.pse}>
+            <button className="pill-button">Learn More</button>
+          </a>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/Footer.css b/src/components/Footer.css
index 1e203ea..664626d 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -4,7 +4,7 @@ footer {
   flex-wrap: wrap;
   gap: 1rem;
   border-top: 2px solid var(--gray);
-  margin: 6.5rem 5em 1rem;
+  margin: 0rem 5em 1rem;
   padding-block: 2.4rem;
 }
 
diff --git a/src/components/Hero.css b/src/components/Hero.css
index 802325c..972ece4 100644
--- a/src/components/Hero.css
+++ b/src/components/Hero.css
@@ -1,404 +1,40 @@
-.container {
-  width: 100%;
-}
-
-img.hero-graphic {
-  width: 100%; /* or any custom size */
-  height: 100%;
-  object-fit: contain;
+#Hero {
+  max-width: 67%;
+  padding: 50px;
 }
 
 #Hero .name {
   color: var(--brown);
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
-.hidden {
-  display: none;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.relative {
-  position: relative;
-}
-
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.border-gray-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
-}
-
-.bg-yellow-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
-}
-
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-@keyframes bounce {
-  0%,
-  100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}
-
-.animate-bounce,
-.hover\:animate-bounce:hover {
-  animation: bounce 1s infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.hover\:animate-spin:hover {
-  animation: spin 1s linear infinite;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.max-w-\[1920px\] {
-  max-width: 1920px;
-}
-
-.px-4 {
-  padding-left: 1rem /* 16px */;
-  padding-right: 1rem /* 16px */;
-}
-
-.py-12 {
-  padding-top: 3rem /* 48px */;
-  padding-bottom: 3rem /* 48px */;
-}
-
-.flex {
+#Hero .links {
   display: flex;
+  align-items: center;
 }
 
-.flex-col {
-  flex-direction: column;
+#Hero .docs-link {
+  margin-right: 10px;
 }
 
-.flex-auto {
-  flex: 1 1 auto;
+#Hero .button-docs {
+  width: 20px;
+  margin-left: 10px;
 }
 
-.right-\[6\%\] {
-  right: 6%;
+#Hero .repo-link {
+  margin-inline: 10px;
 }
 
-.right-1\/3 {
-  right: 33.333333%;
+#Hero .button-github {
+  width: 20px;
+  margin-left: 10px;
 }
 
-.top-6 {
-  top: 1.5rem /* 24px */;
-}
-
-.top-60 {
-  top: 15rem /* 240px */;
-}
-
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.underline {
-  text-decoration-line: underline;
-}
-
-.text-purple-800 {
-  --tw-text-opacity: 1;
-  color: rgb(107 33 168 / var(--tw-text-opacity));
-}
-
-.active\:text-opacity-70:active {
-  --tw-text-opacity: 0.7;
-}
-
-.text-xs {
-  font-size: 0.75rem /* 12px */;
-  line-height: 1rem /* 16px */;
-}
-
-.text-sm {
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
-}
-
-.text-xl {
-  font-size: 1.25rem /* 20px */;
-  line-height: 1.75rem /* 28px */;
-}
-
-.text-3xl {
-  font-size: 2rem /* 32px */;
-  line-height: 2.5rem /* 40px */;
-}
-
-.tracking-wider {
-  letter-spacing: 0.05em;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-/* Widths */
-.w-full {
-  width: 100%;
-}
-
-.w-auto {
-  width: auto;
-}
-
-.w-\[108px\] {
-  width: 108px;
-}
-
-/* Heights */
-.h-\[149\.44px\] {
-  height: 149.44px;
-}
-
-.h-\[91px\] {
-  height: 91px;
-}
-
-/**
- *  Media Queries
- */
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-
-  .md\:block {
-    display: block;
-  }
-
-  .md\:px-16 {
-    padding-left: 4rem /* 64px */;
-    padding-right: 4rem /* 64px */;
-  }
-
-  .md\:px-24 {
-    padding-left: 6rem /* 96px */;
-    padding-right: 6rem /* 96px */;
-  }
-
-  .md\:max-w-xl {
-    max-width: 36rem /* 576px */;
-  }
-
-  .md\:max-w-4xl {
-    max-width: 56rem /* 896px */;
-  }
-
-  .md\:text-4xl {
-    font-size: 2.25rem /* 36px */;
-    line-height: 2.5rem /* 40px */;
-  }
-
-  .md\:flex-row {
-    flex-direction: row;
-  }
-
-  .md\:w-1\/4 {
-    width: 25%;
-  }
-
-  .md\:top-12 {
-    top: 3rem /* 48px */;
-  }
-
-  .md\:-right-2\/4 {
-    right: -50%;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-
-  .lg\:py-16 {
-    padding-top: 4rem /* 64px */;
-    padding-bottom: 4rem /* 64px */;
-  }
-
-  .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-  }
-
-  .lg\:max-w-6xl {
-    max-width: 72rem /* 1152px */;
-  }
-
-  .lg\:w-\[195px\] {
-    width: 195px;
-  }
-
-  .lg\:h-\[269\.83px\] {
-    height: 269.83px;
-  }
-
-  .lg\:w-\[177\.08px\] {
-    width: 177.08px;
-  }
-
-  .lg\:h-\[173px\] {
-    height: 173px;
-  }
-
-  .lg\:text-sm {
-    font-size: 0.875rem /* 14px */;
-    line-height: 1.25rem /* 20px */;
-  }
-
-  .lg\:text-lg {
-    font-size: 1.125rem /* 18px */;
-    line-height: 1.75rem /* 28px */;
-  }
-
-  .lg\:text-3xl {
-    font-size: 2rem /* 32px */;
-    line-height: 2.5rem /* 40px */;
-  }
-
-  .lg\:text-5xl {
-    font-size: 3rem /* 48px */;
-    line-height: 1;
-  }
-
-  .lg\:leading-\[110\%\] {
-    line-height: 110%;
-  }
-
-  .lg\:leading-\[145\%\] {
-    line-height: 145%;
-  }
-
-  .lg\:top-16 {
-    top: 4rem /* 64px */;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-
-  .xl\:text-base {
-    font-size: 1rem /* 16px */;
-    line-height: 1.5rem /* 24px */;
-  }
-
-  .xl\:text-4xl {
-    font-size: 2.25rem /* 36px */;
-    line-height: 2.5rem /* 40px */;
-  }
-
-  .xl\:text-6xl {
-    font-size: 3.75rem /* 60px */;
-    line-height: 1;
-  }
-
-  .xl\:max-w-2xl {
-    max-width: 42rem /* 672px */;
-  }
-
-  .xl\:w-\[270px\] {
-    width: 270px;
-  }
-
-  .xl\:h-\[373\.61px\] {
-    height: 373.61px;
-  }
-
-  .xl\:px-44 {
-    padding-left: 11rem /* 176px */;
-    padding-right: 11rem /* 176px */;
-  }
-
-  .xl\:py-24 {
-    padding-top: 6rem /* 96px */;
-    padding-bottom: 6rem /* 96px */;
-  }
-
-  .xl\:leading-\[150\%\] {
-    line-height: 150%;
-  }
-
-  .xl\:-right-3\/4 {
-    right: -75%;
-  }
-
-  .xl\:top-32 {
-    top: 8rem /* 128px */;
-  }
-
-  .xl\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-
-  .\32xl\:right-\[10\%\] {
-    right: 10%;
+@media only screen and (max-width: 600px) {
+  #Hero .links {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: left;
   }
 }
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 5d75e91..51b3675 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,4 +1,5 @@
 import github from "../images/github.svg";
+import docs from "../images/docs.svg";
 import "./Hero.css";
 import config from "../config.json";
 
@@ -8,18 +9,28 @@ const Hero = () => (
     <h1>
       Proof of data authenticity
     </h1>
+    <div style={{ height: "1.375rem" }} />
     <p>
       Export data from any web application and prove facts about it without compromising on privacy.
     </p>
-    <div className="flex space-x-2">
-      <a href="https://tlsnotary.github.io/docs-mdbook/">
-        <button className="pill-button">
-          <p>View Documentation</p>
-        </button>
-      </a>
-      <a href={config.links.repo}>
-        <img src={github} alt="github"></img>
-      </a>
+    <div style={{ height: "1.375rem" }} />
+    <div className="links">
+      <div className="docs-link">
+        <a href={config.links.docs}>
+          <button className="pill-button">
+            Documentation
+            <img className="button-docs" src={docs} alt="docs"></img>
+          </button>
+        </a>
+      </div>
+      <div className="repo-link">
+        <a href={config.links.repo}>
+          <button className="pill-button">
+            Source
+            <img className="button-github" src={github} alt="github"></img>
+          </button>
+        </a>
+      </div>
     </div>
   </div>
 );
diff --git a/src/components/How.css b/src/components/How.css
index 8f543b3..7bc65c4 100644
--- a/src/components/How.css
+++ b/src/components/How.css
@@ -2,20 +2,50 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding-block: 12px;
-  padding: 100px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }
 
 #How .body {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  display: flex;
+  flex-direction: row;
   gap: 2.5rem;
-}
-
-#How .diagram-container {
-  padding: 10px;
+  align-items: center;
 }
 
 #How .diagram {
-  display: flex;
+  padding: 30px;
+}
+
+#How .diagram-container {
+  display: flex;
+  border: 5px solid var(--brown);
+  border-radius: 30px;
+  justify-content: center;
+}
+
+#How .text-container {
+  text-align: left;
+}
+
+@media only screen and (max-width: 1440px) {
+  #How {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+
+  #How .body {
+    flex-direction: column;
+    position: static;
+    max-width: 67%;
+  }
+
+  #How .diagram {
+    max-width: 80%;
+    padding: 30px;
+  }
 }
diff --git a/src/components/How.tsx b/src/components/How.tsx
index 56299ee..f8257b8 100644
--- a/src/components/How.tsx
+++ b/src/components/How.tsx
@@ -8,7 +8,7 @@ export default function How() {
             <div className="diagram-container">
                 <img className="diagram" src={diagram}></img>
             </div>
-            <div>
+            <div className="text-container">
                 <h2>How it works</h2>
                 <div style={{ height: "1.375rem" }} />
                 <p>
@@ -18,7 +18,8 @@ export default function How() {
                 At the core of the TLSNotary protocol is dividing TLS session keys between two parties (Client and Notary) and then using secure two-party computation (2PC) to encrypt and authenticate requests from the Client to a TLS-enabled webserver.
                 <br/>
                 <br/>
-                During the protocol neither the Client nor Notary are in posession of the full TLS session keys, they only know their shares of those keys. This preserves the security assumptions of TLS while at the same time allowing the Client to prove to the Notary the authenticity of the transcript.
+                During the protocol neither the Client nor Notary are in posession of the full TLS session keys, they only know their shares of those keys.
+                This preserves the security assumptions of TLS while at the same time allows the Client to prove to the Notary the authenticity of the transcript.
                 <br/>
                 <br/>
                 This is all achieved with full privacy. The Notary is never aware of which webserver is being queried, nor do they ever see the unencrypted communications.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index ddd4ec9..76e15be 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -20,7 +20,7 @@ function Navbar() {
         </a>
         <div id="anchor-links" className="nav-links">
           <a href={config.links.docs}>Docs</a>
-          <a href="#Roadmap">Roadmap</a>
+          <a href="#Pagesigner">PageSigner</a>
           <a href="#About">About</a>
         </div>
         <div id="social-links" className="nav-links">
@@ -34,9 +34,9 @@ function Navbar() {
         <div id="menu-link" onClick={() => { toggleMenu() }}>{isOpen ? 'Close' : 'Menu'}</div>
       </nav>
       <nav id="nav-menu-mobile" aria-label="Navigation for Mobile" className={isOpen ? 'menu-open' : 'menu-closed'}>
-        <a href="#top">About</a>
-        <a href="#Projects">Projects</a>
-        <a href="#Team">Members</a>
+        <a href={config.links.docs}>Docs</a>
+        <a href="#Pagesigner">PageSigner</a>
+        <a href="#About">About</a>
       </nav>
     </nav>
   )
diff --git a/src/components/Pagesigner.css b/src/components/Pagesigner.css
new file mode 100644
index 0000000..794f679
--- /dev/null
+++ b/src/components/Pagesigner.css
@@ -0,0 +1,22 @@
+#Pagesigner {
+  display: flex;
+  justify-content: center;
+  background-color: var(--brown);
+}
+
+#Pagesigner h3 {
+  color: var(--white);
+}
+
+#Pagesigner .container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  text-align: center;
+  align-items: center;
+  background-color: var(--blue);
+  padding-top: 50px;
+  padding-bottom: 50px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
diff --git a/src/components/Pagesigner.tsx b/src/components/Pagesigner.tsx
new file mode 100644
index 0000000..3980bc4
--- /dev/null
+++ b/src/components/Pagesigner.tsx
@@ -0,0 +1,19 @@
+import "./Pagesigner.css";
+import ethlogo from '../images/eth-logo-blue.svg';
+import config from "../config.json";
+
+export default function Pagesigner() {
+  return (
+    <div id="Pagesigner">
+      <div className="container">
+        <h3>
+          Looking for our legacy implementation?
+        </h3>
+        <div style={{ height: "1.375rem" }} />
+        <a href={config.links.legacy}>
+          <button className="pill-button">See PageSigner</button>
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Roadmap.css b/src/components/Roadmap.css
index 78c2fb6..76d6b79 100644
--- a/src/components/Roadmap.css
+++ b/src/components/Roadmap.css
@@ -62,3 +62,12 @@
       border-top: 2px solid var(--gray);
       align-self: stretch; */
 }
+
+@media only screen and (max-width: 600px) {
+  #Roadmap .cards {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+  }
+}
diff --git a/src/components/Usecases.css b/src/components/Usecases.css
index 4314d24..c91dd39 100644
--- a/src/components/Usecases.css
+++ b/src/components/Usecases.css
@@ -25,6 +25,7 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2.5rem;
+  align-items: center;
 }
 
 #Usecases .card {
@@ -77,8 +78,11 @@
     align-self: stretch; */
 }
 
-@media screen and (max-width: 800px) {
-  #Usecases {
-    padding-inline: 1rem;
+@media only screen and (max-width: 600px) {
+  #Usecases .cards {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
   }
 }
diff --git a/src/config.json b/src/config.json
index 8fbb0b7..f3a5fb9 100644
--- a/src/config.json
+++ b/src/config.json
@@ -3,6 +3,7 @@
     "discord": "https://discord.gg/9XwESXtcN7",
     "repo": "https://github.com/tlsnotary/tlsn",
     "docs": "https://tlsnotary.github.io/docs-mdbook/",
-    "pse": "https://appliedzkp.org/"
+    "pse": "https://appliedzkp.org/",
+    "legacy": "https://tlsnotary.org/"
   }
 }
diff --git a/src/images/docs.svg b/src/images/docs.svg
new file mode 100644
index 0000000..3df9843
--- /dev/null
+++ b/src/images/docs.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.516 22H24.5V3.33329C24.5 2.62605 24.219 1.94777 23.719 1.44767C23.2189 0.947577 22.5406 0.666626 21.8333 0.666626H4.5C2.892 0.666626 0.5 1.73196 0.5 4.66663V23.3333C0.5 26.268 2.892 27.3333 4.5 27.3333H24.5V24.6666H4.516C3.9 24.6506 3.16667 24.4066 3.16667 23.3333C3.16667 22.26 3.9 22.016 4.516 22ZM7.16667 5.99996H19.1667V8.66663H7.16667V5.99996Z" fill="#282A2D"/>
+</svg>
diff --git a/src/index.css b/src/index.css
index fd384b0..e2dd970 100644
--- a/src/index.css
+++ b/src/index.css
@@ -83,14 +83,17 @@ html {
 }
 
 .pill-button {
+  display: flex;
   font-family: "Inter", sans-serif;
   background-color: var(--white);
   border: 3px solid var(--blue);
-  color: var(--black);
+  color: var(--blue);
   text-align: center;
   font-size: 20px;
+  font-weight: 600;
   border-radius: 32px;
   padding: 18px 24px;
+  align-items: center;
 }
 
 /*