diff --git a/packages/website/components/gateway.js b/packages/website/components/gateway.js
index 671619e..c60b66b 100644
--- a/packages/website/components/gateway.js
+++ b/packages/website/components/gateway.js
@@ -11,21 +11,21 @@ export default function Gateway() {
   }
 
   return (
-    <div id="try-it" className="bg-white relative overflow-hidden text-center">
+    <div id="try-it" className="bg-white relative overflow-hidden">
       <div className="mx-auto max-w-7xl w-full pt-16 pb-20 lg:py-32 px-6">
-        <div className="relative px-4 sm:px-8">
+        <div className="relative">
           <h1 className="font-open-sans text-3xl font-bold text-black lg:text-4xl">
             <span className="block">The NFT.Storage Gateway</span>
           </h1>
-          <p className="mt-3 mx-auto text-lg text-gray-900 sm:text-xl md:mt-5 md:max-w-4xl">
+          <p className="mt-3 text-lg text-gray-900 sm:text-xl md:mt-5 md:max-w-4xl">
             The NFT.Storage gateway is optimized for NFT content stored on IPFS,
             and is especially fast if that content is stored on NFT.Storage.
             Plug your NFT&apos;s content ID (CID) below to try it out.
           </p>
         </div>
         <form>
-          <div className="sm:flex rounded-md max-w-3xl mx-auto mt-12 space-y-2 sm:space-y-0">
-            <span className="sm:inline-flex items-center px-3 sm:rounded-l-md sm:border-2 sm:border-r-0 sm:border-black sm:bg-gray-100 text-gray-500 sm:text-sm md:text-lg">
+          <div className="sm:flex rounded-md max-w-3xl mt-12 space-y-2 sm:space-y-0">
+            <span className="sm:inline-flex items-center sm:px-3 sm:rounded-l-md sm:border-2 sm:border-r-0 sm:border-black sm:bg-gray-100 text-gray-500 md:text-lg">
               https://nftstorage.link/ipfs/
             </span>
             <input
@@ -34,42 +34,45 @@ export default function Gateway() {
               id="cid"
               onChange={(e) => setCid(e.target.value)}
               value={cid}
-              className="truncate flex-1 min-w-0 block w-full px-3 py-3 rounded sm:rounded-none sm:rounded-r-md sm:text-sm md:text-lg border-2 border-black text-black placeholder:text-gray-500 focus:ring-indigo-500 focus:border-indigo-500"
+              className="truncate flex-1 min-w-0 block w-full px-3 py-3 rounded sm:rounded-none sm:rounded-r-md md:text-lg border-2 border-black text-black placeholder:text-gray-500 focus:ring-blue focus:border-blue"
               placeholder="cid..."
             />
             <button
               type="submit"
               onClick={(e) => handleCIDLink(e)}
-              className="inline-flex items-center px-5 py-2 rounded-lg border-2 border-red sm:ml-4 bg-orange text-white sm:text-sm md:text-lg font-semibold"
+              className="btn inline-flex items-center px-5 py-2 rounded-lg sm:ml-4 bg-orange text-white sm:text-sm md:text-lg font-semibold hover:bg-blue transition-colors"
             >
               GO
             </button>
           </div>
         </form>
 
-        <div className="max-w-6xl mx-auto mt-6 sm:mt-24">
-          <dl className="rounded-lg bg-white md:grid grid-cols-3 text-center">
-            <div className="flex flex-col  p-6 text-center">
-              <dt className="mt-2 text-6xl xl:text-7xl leading-tight font-goldman font-bold text-forest">
+        <div className="max-w-6xl mt-6 sm:mt-12">
+          <p className="mt-3 mb-4 text-lg text-gray-900 sm:text-xl md:mt-12 md:max-w-4xl">
+            Gateway at a Glance
+          </p>
+          <dl className="rounded-lg bg-white md:grid grid-cols-3 space-y-4 md:space-y-0 gap-2 md:gap-8 xl:gap-12">
+            <div className="flex flex-col pt-2 pb-6 px-6 rounded-lg bg-forest/[.06]">
+              <dt className="mt-2 text-6xl xl:text-7xl leading-1 font-goldman font-bold text-forest">
                 2-3x
               </dt>
-              <dd className="text-lg xl:text-xl leading-tight font-semibold">
-                Faster than other public IPFS Gateways for avg. NFT reads
+              <dd className="text-sm md:text-base uppercase font-semibold">
+                Faster than other public IPFS Gateways for average NFT reads
               </dd>
             </div>
-            <div className="flex flex-col p-6 text-center">
-              <dt className="mt-2 text-6xl xl:text-7xl leading-tight font-goldman font-bold text-blue">
+            <div className="flex flex-col pt-2 pb-6 px-6 rounded-lg bg-blue/[.06]">
+              <dt className="mt-2 text-6xl xl:text-7xl leading-1 font-goldman font-bold text-blue">
                 1PiB+
               </dt>
-              <dd className="text-lg xl:text-xl leading-tight font-semibold">
+              <dd className="text-sm md:text-base uppercase font-semibold">
                 Served per month
               </dd>
             </div>
-            <div className="flex flex-col p-6 text-center">
-              <dt className="mt-2 text-6xl xl:text-7xl leading-tight font-goldman font-bold text-orange">
+            <div className="flex flex-col pt-2 pb-6 px-6 rounded-lg bg-orange/[.06]">
+              <dt className="mt-2 text-6xl xl:text-7xl leading-1 font-goldman font-bold text-orange">
                 270+
               </dt>
-              <dd className="text-lg xl:text-xl leading-tight font-semibold">
+              <dd className="text-sm md:text-base uppercase font-semibold">
                 Points of Presence
               </dd>
             </div>
diff --git a/packages/website/components/hero.js b/packages/website/components/hero.js
index 673c991..564fbb2 100644
--- a/packages/website/components/hero.js
+++ b/packages/website/components/hero.js
@@ -3,8 +3,8 @@ import Img from '../components/cloudflareImage'
 export default function Hero() {
   return (
     <div className="bg-peach relative overflow-hidden">
-      <div className="mx-auto max-w-7xl w-full pt-16 pb-20 lg:pb-36 lg:py-16 px-4">
-        <div className="relative z-10 px-4 md:w-3/5 sm:px-8 xl:pr-16">
+      <div className="mx-auto max-w-7xl w-full pt-16 pb-20 lg:pb-36 lg:py-16 px-6">
+        <div className="relative z-10 md:w-3/5 xl:pr-16">
           <Img
             src="images/nftstorage.link-logo.svg"
             alt="logo"
@@ -23,10 +23,17 @@ export default function Hero() {
           <div className="mt-10 sm:flex justify-start">
             <a
               href="#try-it"
-              className="uppercase underline underline-offset-4 text-orangred font-bold"
+              className="uppercase underline underline-offset-4 text-orangred font-bold hover:text-blue transition-colors"
             >
               Try it Out
             </a>
+            <a
+              href="/api-docs"
+              target="_blank"
+              className="uppercase underline underline-offset-4 text-orangred font-bold ml-8 hover:text-blue transition-colors"
+            >
+              API Docs
+            </a>
           </div>
         </div>
       </div>
diff --git a/packages/website/components/superhot.js b/packages/website/components/superhot.js
index 755760a..1e59fce 100644
--- a/packages/website/components/superhot.js
+++ b/packages/website/components/superhot.js
@@ -27,7 +27,7 @@ export default function Superhot() {
             </h1>
           </div>
 
-          <div className="px-6 max-w-6xl mx-auto mt-12">
+          <div className="px-6 max-w-5xl mx-auto mt-12">
             <div className="relative  before:bg-[#F5C32C] before:absolute before:w-full before:h-full before:left-4 before:-top-4">
               <div className="relative bg-white p-6 sm:p-10 lg:p-16 border-2 border-black">
                 <Img
@@ -69,13 +69,7 @@ export default function Superhot() {
                         Coming Soon
                       </small>
                       API for artists and collectors to perma-cache their
-                      collections.{' '}
-                      <a
-                        href=""
-                        className="text-orange underline underline-offset-4"
-                      >
-                        View API Docs
-                      </a>
+                      collections.
                     </p>
                   </li>
                 </ul>
@@ -94,7 +88,7 @@ export default function Superhot() {
                         htmlFor="first-name"
                         className="block text-sm font-semibold text-black"
                       >
-                        First name
+                        First name<span className="text-red">*</span>
                       </label>
                       <div className="mt-1">
                         <input
@@ -102,7 +96,8 @@ export default function Superhot() {
                           name="first-name"
                           id="first-name"
                           autoComplete="given-name"
-                          className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
+                          rules="required"
+                          className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
                         />
                       </div>
                     </div>
@@ -112,15 +107,16 @@ export default function Superhot() {
                         htmlFor="last-name"
                         className="block text-sm font-semibold text-black"
                       >
-                        Last name
+                        Last name<span className="text-red">*</span>
                       </label>
                       <div className="mt-1">
                         <input
                           type="text"
                           name="last-name"
                           id="last-name"
+                          rules="required"
                           autoComplete="family-name"
-                          className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
+                          className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
                         />
                       </div>
                     </div>
@@ -130,7 +126,8 @@ export default function Superhot() {
                         htmlFor="email"
                         className="block text-sm font-semibold text-black"
                       >
-                        Email address
+                        Email address (signed up in nft.storage)
+                        <span className="text-red">*</span>
                       </label>
                       <div className="mt-1">
                         <input
@@ -139,7 +136,8 @@ export default function Superhot() {
                           type="email"
                           autoComplete="email"
                           placeholder="name@email.com"
-                          className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
+                          rules="required|email"
+                          className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
                         />
                       </div>
                     </div>
@@ -156,7 +154,7 @@ export default function Superhot() {
                           name="size"
                           type="text"
                           placeholder="10,000"
-                          className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
+                          className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
                         />
                       </div>
                     </div>
@@ -173,7 +171,7 @@ export default function Superhot() {
                           name="org"
                           type="text"
                           placeholder="Acme Corp."
-                          className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
+                          className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
                         />
                       </div>
                     </div>
@@ -190,14 +188,14 @@ export default function Superhot() {
                           name="title"
                           type="text"
                           placeholder="Engineer"
-                          className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
+                          className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
                         />
                       </div>
                     </div>
                     <div className="sm:col-span-6">
                       <button
                         type="submit"
-                        className="py-1 uppercase inline-flex items-center px-5 rounded-md border-2 border-red bg-orange text-white sm:text-sm md:text-lg font-semibold"
+                        className="btn py-2 uppercase inline-flex items-center px-5 rounded-md bg-orange text-white text-sm font-semibold"
                       >
                         Send
                       </button>
diff --git a/packages/website/pages/index.js b/packages/website/pages/index.js
index 96b2bb2..ac0fcf6 100644
--- a/packages/website/pages/index.js
+++ b/packages/website/pages/index.js
@@ -32,15 +32,13 @@ export default function Home() {
         <div className="mx-auto max-w-6xl w-full pt-16 pb-20 6">
           <div className="text-center lg:text-left lg:flex justify-between items-center px-6 space-y-6 lg:space-y-0">
             <Img
-              src="/images/nft.storage-foot-logo.png"
-              alt="NFT.Storage logo"
-              width="150"
-              height="21"
-              className="mx-auto lg:mx-0"
+              src="images/nftstorage.link-logo.svg"
+              alt="logo"
+              className="mx-auto lg:mx-0 max-w-[220px]"
             />
             <div className="space-x-4">
               <a
-                href="#"
+                href="https://nft.storage"
                 className=""
                 target="_blank"
                 rel="noopener noreferrer"
@@ -48,7 +46,7 @@ export default function Home() {
                 NFT.Storage
               </a>
               <a
-                href="#"
+                href="https://ipfs.io"
                 className="border-l border-l-black pl-4"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -56,22 +54,13 @@ export default function Home() {
                 IPFS
               </a>
               <a
-                href="#"
+                href="/terms"
                 className="border-l border-l-black pl-4"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Privacy Policy
+                Terms of Service
               </a>
-              <a
-                href="#"
-                className="border-l border-l-black pl-4"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Legal
-              </a>
-              <span>&copy; 2022 Copyright NFT.STORAGE</span>
             </div>
           </div>
         </div>
diff --git a/packages/website/styles/globals.css b/packages/website/styles/globals.css
index ad046d4..edad419 100644
--- a/packages/website/styles/globals.css
+++ b/packages/website/styles/globals.css
@@ -93,3 +93,22 @@ a {
 .kwes-form .kw-border-error {
   border-width: 2px !important;
 }
+
+.kw-field-error-message {
+  font-size: 12px;
+}
+
+.btn {
+  box-shadow: 0 0px 0 0px #0a854c, 0 0px 0 0px #ee4116, 0 0px 0 0px #e2ba36;
+  transition: all 0.2s ease-in-out;
+}
+
+.btn:hover {
+  background-color: #47aed7;
+  box-shadow: 0 3px 0 0px #0a854c, 0 6px 0 0px #ee4116, 0 9px 0 0px #e2ba36;
+}
+
+.btn:active {
+  box-shadow: inset 0 0 0 2px #000, 0 3px 0 0px #0a854c, 0 6px 0 0px #ee4116,
+    0 9px 0 0px #e2ba36;
+}