diff --git a/frontend/website-redesign/pages/docs/index.mdx b/frontend/website-redesign/pages/docs/index.mdx
index a61fd338d45..8e7b83020a8 100644
--- a/frontend/website-redesign/pages/docs/index.mdx
+++ b/frontend/website-redesign/pages/docs/index.mdx
@@ -3,6 +3,8 @@ export default Page({title: "Overview"});
 
 # Overview
 
+Here's where you'll find all the documentation for the whole process of getting up and running with Coda.
+
 ## What is Coda?
 
 Coda is the first cryptocurrency protocol with a succinct blockchain. Current cryptocurrencies like Bitcoin and Ethereum store hundreds of gigabytes of data, and as time goes on, their blockchains will only increase in size. With Coda however, no matter how much the usage grows, the blockchain always stays the same size - about ~20 kilobytes (the size of a few tweets). This means Coda can be accessed trustlessly from any device, including phones and browsers, and enables frictionless integration of cryptocurrency into applications for developers.
diff --git a/frontend/website-redesign/src/Theme.re b/frontend/website-redesign/src/Theme.re
index 5fa4d4ad2ca..d484e92a16b 100644
--- a/frontend/website-redesign/src/Theme.re
+++ b/frontend/website-redesign/src/Theme.re
@@ -13,6 +13,7 @@ module Colors = {
   let digitalGray = `hex("575757");
   let error = `hex("e93939");
   let status = `hex("ffb13b");
+  let codeHighlight = `hex("e9eaf3");
 };
 
 module Typeface = {
@@ -274,8 +275,7 @@ module Type = {
       ),
     ]);
 
-  let sectionSubhead =
-    style([
+  let sectionSubhead_ = [
       Typeface.monumentGrotesk,
       fontSize(`rem(1.)),
       lineHeight(`rem(1.5)),
@@ -286,7 +286,8 @@ module Type = {
         MediaQuery.tablet,
         [fontSize(`rem(1.25)), lineHeight(`rem(1.875))],
       ),
-    ]);
+    ];
+  let sectionSubhead = style(sectionSubhead_);
 
   let paragraph =
     style([
@@ -312,6 +313,17 @@ module Type = {
       ),
     ]);
 
+  let inlineCode_ =[
+      Typeface.monumentGroteskMono,
+      fontSize(`rem(0.9375)),
+      lineHeight(`rem(1.5)),
+      color(Colors.digitalBlack),
+      backgroundColor(Colors.codeHighlight),
+      padding2(~v=`zero, ~h=`rem(0.625)),
+      borderRadius(`px(3))
+    ];
+  let inlineCode = style(inlineCode_);
+
   let paragraphMono =
     style([
       Typeface.monumentGrotesk,
diff --git a/frontend/website-redesign/src/components/Alert.re b/frontend/website-redesign/src/components/Alert.re
index 712f15942ed..152098b762b 100644
--- a/frontend/website-redesign/src/components/Alert.re
+++ b/frontend/website-redesign/src/components/Alert.re
@@ -3,13 +3,17 @@ module Styles = {
 
   let main =
     style([
-      border(px(1), `solid, Theme.Colors.digitalBlack),
+      border(px(1), `solid, Theme.Colors.digitalBlackA(0.25)),
       borderRadius(px(4)),
       overflow(`hidden),
     ]);
 
   let inner =
-    merge([style([margin(`zero), padding2(~v=`rem(0.), ~h=`rem(1.))])]);
+    merge([style([
+                 margin(`zero),
+                 padding2(~v=`rem(1.), ~h=`rem(1.)),
+                 selector("p", [ margin(`zero) ])
+    ])]);
 
   let title = c =>
     merge([
diff --git a/frontend/website-redesign/src/components/DocsComponents.re b/frontend/website-redesign/src/components/DocsComponents.re
index 39076353968..dfb428a1c1b 100644
--- a/frontend/website-redesign/src/components/DocsComponents.re
+++ b/frontend/website-redesign/src/components/DocsComponents.re
@@ -14,6 +14,40 @@ module Styles = {
       backgroundSize(`cover),
       backgroundImage(url("/static/img/link.svg")),
     ]);
+
+  let h1Spacing = style([
+    marginBottom(`rem(1.))
+  ]);
+
+  let headerSpacing = merge([
+                            h1Spacing,
+                            style([
+    marginTop(`rem(3.))
+  ])]);
+
+  let paragraphSpacing = style([
+    marginBottom(`rem(1.))
+  ]);
+
+  let code = style([
+    Theme.Typeface.monumentGroteskMono,
+    fontSize(`rem(1.)),
+    lineHeight(`rem(1.5))
+  ]);
+
+  let list = style([
+    color(Theme.Colors.digitalBlack),
+    Theme.Typeface.monumentGrotesk,
+    fontSize(`rem(1.125)),
+    lineHeight(`rem(1.6875)),
+    marginTop(`rem(0.5)),
+    marginBottom(`rem(1.)),
+    marginLeft(`rem(2.6875)),
+  ]);
+
+  let link = style([
+    textDecoration(`none)
+  ]);
 };
 
 module type Component = {let element: React.element;};
@@ -52,32 +86,32 @@ open Css;
 
 module H1 =
   WrapHeader({
-    let element = <h1 className=Theme.Type.h1 />;
+    let element = <h1 className=merge([Styles.h1Spacing, Theme.Type.h1]) />;
   });
 
 module H2 =
   WrapHeader({
-    let element = <h2 className=Theme.Type.h2 />;
+    let element = <h2 className=merge([Styles.headerSpacing, Theme.Type.h2]) />;
   });
 
 module H3 =
   WrapHeader({
-    let element = <h3 className=Theme.Type.h3 />;
+    let element = <h3 className=merge([Styles.headerSpacing, Theme.Type.h3]) />;
   });
 
 module H4 =
   WrapHeader({
-    let element = <h4 className=Theme.Type.h4 />;
+    let element = <h4 className=merge([Styles.headerSpacing, Theme.Type.h4]) />;
   });
 
 module P =
   Wrap({
-    let element = <p className=Theme.Type.paragraph />;
+    let element = <p className=merge([Styles.paragraphSpacing, Theme.Type.paragraph]) />;
   });
 
 module A =
   Wrap({
-    let element = <a className=Theme.Type.link />;
+    let element = <a className=merge([Styles.link, Theme.Type.link]) />;
   });
 
 module Strong =
@@ -128,7 +162,7 @@ module Pre = {
           borderRadius(`px(4)),
           padding2(~v=`rem(1.), ~h=`rem(1.)),
           overflow(`scroll),
-          // selector("code", [Theme.Type.paragraphMono]),
+          selector("code", [color(Theme.Colors.white)]),
         ])}>
         children
       </pre>
@@ -138,17 +172,17 @@ module Pre = {
 
 module Code =
   Wrap({
-    let element = <code className=Theme.Type.paragraphMono />;
+    let element = <code className=Styles.code />;
   });
 
 module Ul =
   Wrap({
-    let element = <ul className="" /* TODO */ />;
+    let element = <ul className=Styles.list />;
   });
 
 module Ol =
   Wrap({
-    let element = <ol className="" /* TODO */ />;
+    let element = <ol className=Styles.list />;
   });
 
 module Img =
diff --git a/frontend/website-redesign/src/components/LabelEyebrow.re b/frontend/website-redesign/src/components/LabelEyebrow.re
new file mode 100644
index 00000000000..fc5ded839c6
--- /dev/null
+++ b/frontend/website-redesign/src/components/LabelEyebrow.re
@@ -0,0 +1,23 @@
+module Styles = {
+  open Css;
+  let link =
+    style([
+      Theme.Typeface.monumentGrotesk,
+      cursor(`pointer),
+      color(Theme.Colors.orange),
+      display(`flex),
+      marginTop(`rem(1.)),
+    ]);
+
+  let text =
+    style([
+      marginRight(`rem(0.2)),
+      cursor(`pointer),
+      marginBottom(`rem(2.)),
+    ]);
+};
+
+[@react.component]
+let make = (~copy) => {
+  <h4 className=Theme.Type.h4>{React.string(copy)}</h4>
+};
diff --git a/frontend/website-redesign/src/components/SideNav.re b/frontend/website-redesign/src/components/SideNav.re
index fd0e91c15a4..355ece2c8e2 100644
--- a/frontend/website-redesign/src/components/SideNav.re
+++ b/frontend/website-redesign/src/components/SideNav.re
@@ -11,7 +11,7 @@ module Styles = {
         Theme.MediaQuery.notMobile,
         [
           marginRight(rem(2.)),
-          marginTop(rem(2.)),
+          marginTop(`zero),
           position(`sticky),
           top(rem(2.5)),
         ],
diff --git a/frontend/website-redesign/src/pages/Docs.re b/frontend/website-redesign/src/pages/Docs.re
index 5ddbbd045d6..fab3ad679e8 100644
--- a/frontend/website-redesign/src/pages/Docs.re
+++ b/frontend/website-redesign/src/pages/Docs.re
@@ -6,16 +6,16 @@ module Style = {
   let content =
     style([
       maxWidth(`rem(53.)),
+      marginBottom(`rem(2.875)),
       media(Theme.MediaQuery.notMobile, [marginLeft(`rem(1.))]),
       selector(
         "p > code, li > code",
-        [
-          boxSizing(`borderBox),
-          padding2(~v=`px(2), ~h=`px(6)),
-          backgroundColor(Theme.Colors.black),
-          borderRadius(`px(4)),
-        ],
+        Theme.Type.inlineCode_,
       ),
+      selector(
+        "h1 + p",
+        Theme.Type.sectionSubhead_
+      )
     ]);
 
   let page =
@@ -29,6 +29,10 @@ module Style = {
       media(Theme.MediaQuery.notMobile, [padding2(~v=`zero, ~h=`rem(3.))]),
     ]);
 
+  let eyebrow = style([
+    marginBottom(`rem(1.))
+  ])
+
   let editLink =
     style([
       media(Theme.MediaQuery.tablet, [position(`relative), float(`right)]),
@@ -91,8 +95,10 @@ let make = (~metadata, ~children) => {
     <div className=Style.page>
       <DocsSideNav currentSlug />
       <div className=Style.content>
+        <div className=Style.eyebrow>
+          <LabelEyebrow copy="Documentation"/>
+        </div>
         <EditLink route={router.route} />
-        // <Next.MDXProvider components={DocsComponents.allComponents()}>
         <Next.MDXProvider components={DocsComponents.allComponents()}>
           children
         </Next.MDXProvider>