diff --git a/mlc_config.json b/mlc_config.json
index c8341a6907..836c777d82 100644
--- a/mlc_config.json
+++ b/mlc_config.json
@@ -44,6 +44,9 @@
         },
         {
             "pattern": "https://liberapay.com/"
+        },
+        {
+            "pattern": "*.html"
         }
     ]
 }
diff --git a/www/build.sh b/www/build.sh
index 47a97ee2aa..a5581ce069 100755
--- a/www/build.sh
+++ b/www/build.sh
@@ -95,6 +95,7 @@ mv www/build/tutorial/tutorial.html www/build/tutorial/index.html
 mkdir www/build/wip
 $roc run www/wip_new_website/main.roc -- www/wip_new_website/content/ www/build/wip
 cp -r www/wip_new_website/static/site.css www/build/wip
+cp -r www/build/fonts www/build/wip/fonts
 
 # cleanup
 rm -rf roc_nightly roc_releases.json
diff --git a/www/wip_new_website/build.roc b/www/wip_new_website/build.roc
index 50755296f0..ab4bd61551 100755
--- a/www/wip_new_website/build.roc
+++ b/www/wip_new_website/build.roc
@@ -1,6 +1,6 @@
 #!/usr/bin/env roc
 app "website-builder"
-    packages { pf: "https://github.com/roc-lang/basic-cli/releases/download/0.4.0-rc1/hbIodFf7kULTYZJkzgsvgsnFAvQexm5hVeBaOMZk84I.tar.br" }
+    packages { pf: "https://github.com/roc-lang/basic-cli/releases/download/0.4.0/DI4lqn7LIZs8ZrCDUgLK-tHHpQmxGF1ZrlevRKq5LXk.tar.br" }
     imports [
         pf.Task.{ Task },
         pf.Command,
@@ -15,7 +15,7 @@ main =
         Command.new "rm"
         |> Command.args ["-rf", "dist/"]
         |> Command.status
-        |> Task.onErr \_ -> crash "Failed to remove dist folder"
+        |> Task.onFail \_ -> crash "Failed to remove dist folder"
         |> Task.await
 
     # Build site
@@ -23,7 +23,7 @@ main =
         Command.new "roc"
         |> Command.args ["run", "main.roc", "--", "content/", "dist/wip/"]
         |> Command.status
-        |> Task.onErr \_ -> crash "Failed to build site"
+        |> Task.onFail \_ -> crash "Failed to build site"
         |> Task.await
 
     # Copy static files
@@ -31,15 +31,24 @@ main =
         Command.new "cp"
         |> Command.args ["-r", "static/site.css", "dist/wip/"]
         |> Command.status
-        |> Task.onErr \_ -> crash "Failed to copy static files"
+        |> Task.onFail \_ -> crash "Failed to copy static files"
+        |> Task.await
+
+    # Copy font files - assume that www/build.sh has been run previously and the
+    # fonts are available locally in ../build/fonts
+    {} <- 
+        Command.new "cp"
+        |> Command.args ["-r", "../build/fonts/", "dist/fonts/"]
+        |> Command.status
+        |> Task.onFail \_ -> crash "Failed to copy static files"
         |> Task.await
 
     # Start file server
     {} <- 
         Command.new "simple-http-server"
-        |> Command.args ["-p", "8080", "--", "dist/"]
+        |> Command.args ["-p", "8080", "--nocache", "--index", "--", "dist/"]
         |> Command.status
-        |> Task.onErr \_ -> crash "Failed to run file server; consider intalling with `cargo install simple-http-server`"
+        |> Task.onFail \_ -> crash "Failed to run file server; consider intalling with `cargo install simple-http-server`"
         |> Task.await
 
-    Task.ok {}
+    Task.succeed {}
diff --git a/www/wip_new_website/content/community.md b/www/wip_new_website/content/community.md
index e78151d6fc..b87e517e77 100644
--- a/www/wip_new_website/content/community.md
+++ b/www/wip_new_website/content/community.md
@@ -1,6 +1,8 @@
-# Contribute to Roc
+# Community
 
-## Community Values 
+WIP
+
+## Values 
 
 <!-- 
 Work in Progress - Richard is developing this section
@@ -8,13 +10,13 @@ Work in Progress - Richard is developing this section
 Basically it will say something like we expect you to be kind, even if you think someone is being mean to you, don't assume ill intentions etc
 -->
 
-## Meet the Community
+## Meet
 
 - Group Chat [roc.zulipchat.com](https://roc.zulipchat.com/)
 - Github Project [roc-lang/roc](https://github.com/roc-lang/roc)
 - Meetups & Events
 
-## Ideas & Proposals
+## Proposals
 
 - [Good First Issues](https://github.com/roc-lang/roc/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
 
diff --git a/www/wip_new_website/content/docs.md b/www/wip_new_website/content/docs.md
index 764b1b5de7..c0f065a0ba 100644
--- a/www/wip_new_website/content/docs.md
+++ b/www/wip_new_website/content/docs.md
@@ -1,11 +1,17 @@
 # Documentation
 
-- Builtin Package <!-- link to builtins -->
-- Basic-CLI Platform <!-- link to docs -->
+Builtin Package - [docs](https://www.roc-lang.org/builtins)
 
-<!-- TODO Develop a Short language reference, move stuff out of tutorial e.g. de-sugaring table, keywords -->
+Basic-CLI Platform - [repo](https://github.com/roc-lang/basic-cli) - [docs](https://www.roc-lang.org/packages/basic-cli)
 
 ## Guides
 
-- [Frequently Asked Questions](https://github.com/roc-lang/roc/blob/main/FAQ.md)
-- [Roc for Elm Programmers](https://github.com/roc-lang/roc/blob/main/roc-for-elm-programmers.md)
\ No newline at end of file
+[Frequently Asked Questions](https://github.com/roc-lang/roc/blob/main/FAQ.md)
+
+[Roc for Elm Programmers](https://github.com/roc-lang/roc/blob/main/roc-for-elm-programmers.md)
+
+## Language Reference
+
+<!-- TODO Develop a Short language reference, move stuff out of tutorial e.g. de-sugaring table, keywords -->
+
+
diff --git a/www/wip_new_website/content/index.md b/www/wip_new_website/content/index.md
index 60f7c5e4b9..7df0ac858a 100644
--- a/www/wip_new_website/content/index.md
+++ b/www/wip_new_website/content/index.md
@@ -1,30 +1,36 @@
-<!--
-The purpose of the Home page is to function as the first point of contact for all visitors. It should seamlessly connect people with the most suitable content for their immediate needs; it provides information at a high level of abstraction and guides visitors towards more relevant and detailed content within the site.
 
-This page contains minimal content, so that visitors are able to quickly scan the page. It should not be cluttered or overwhelming. It should reflect Roc's goals (fast, friendly, functional) and values (welcoming community).
--->
+# Roc
 
-# Roc lang
+Work in progress! 
 
-A systems programming language that is fast, friendly, and functional.
+<!-- TODO turn these into nice buttons -->
+- [tutorial](/wip/tutorial.html)
+
+- [install](/wip/install.html)
+
+- [help / group chat](https://roc.zulipchat.com), we're friendly!
+
+## Goals 
 
 <section class="home-goals-container">
     <div class="home-goals-column">
-      <h2 class="home-goals-title">Fast</h2>
-      <p class="home-goals-description">We want Roc to run faster than any non-systems language that sees mainstream use in industry. <a class="home-goals-learn-more" href="/design_goals.html#fast">Learn more</a></p>
+      <h3 class="home-goals-title">Fast</h3>
+      <p class="home-goals-description">Runs fast, compiles fast. <br><a class="home-goals-learn-more" href="/design_goals.html#fast">Learn more</a></p>
     </div>
     <div class="home-goals-column">
-      <h2 class="home-goals-title">Friendly</h2>
-      <p class="home-goals-description">Roc aims to be a user-friendly language with a friendly community of users. <a class="home-goals-learn-more" href="/design_goals.html#friendly">Learn more</a></p>
+      <h3 class="home-goals-title">Friendly</h3>
+      <p class="home-goals-description">User-friendly language, friendly community. <br><a class="home-goals-learn-more" href="/design_goals.html#friendly">Learn more</a></p>
     </div>
     <div class="home-goals-column">
-      <h2 class="home-goals-title">Functional</h2>
-      <p class="home-goals-description">Roc aims to be a purely functional programming language. <a class="home-goals-learn-more" href="/design_goals.html#functional">Learn more</a></p>
+      <h3 class="home-goals-title">Functional</h3>
+      <p class="home-goals-description">Pure functional programming, keep it simple.<br><a class="home-goals-learn-more" href="/design_goals.html#functional">Learn more</a></p>
 </section>
 
 ## Try Roc
 
-<!-- WebREPL should go here, first impression -->
+<!-- TODO WebREPL to go here -->
+
+The code below shows a Roc application which prints `Hello World!` to the terminal. It does this using the [roc-lang/basic-cli](https://github.com/roc-lang/basic-cli) platform. 
 
 ```roc
 app "hello-world"
@@ -32,24 +38,24 @@ app "hello-world"
     imports [pf.Stdout]
     provides [main] to pf
 
-main = Stdout.line "Hello, World!"
+main = 
+    Stdout.line "Hello, World!"
 ```
 
+We have developed a number of smaller code [examples](https://github.com/roc-lang/examples) which demonstrate how to use Roc. These cover a range of topics from basic syntax to more advanced features such as random number generation and using the popular `Task` feature.
+
 ## Use cases
 
 -   Tools & Scripts
--   Web (coming soon) <!-- richard starting on this -->
+-   Web (coming soon)
 -   Networking & Servers (coming soon)
 -   Graphical (coming soon)
 -   Scientific (coming soon)
 -   Embedded (coming soon)
 
-## Roc Platforms/Applications (vs libraries)
+## Platforms & Applications
 
-<!--
-provide explamation of platform/application abstraction versus libraries as common in most other languages as this is one of the most unique features of Roc
--->
-TODO 
+TODO provide explanation of platform/application abstraction versus libraries as common in most other languages as this is one of the most unique features of Roc
 
 ## Talks and Publications
 
diff --git a/www/wip_new_website/content/install.md b/www/wip_new_website/content/install.md
index 3ede7d1a85..ae76396cae 100644
--- a/www/wip_new_website/content/install.md
+++ b/www/wip_new_website/content/install.md
@@ -1,18 +1,16 @@
-# Installing Roc
+# Install Roc
 
-## Installation
+<!-- TODO detect current OS with browser and only show link for that, provide other button for others  -->
 
-- [Linux x86-64 Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/linux_x86_64.md)
-- [MacOS Apple Silicon Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/macos_apple_silicon.md)
-- [MacOS x86-64 Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/macos_x86_64.md)
-- [Windows Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/windows.md)
-- [Other Systems Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/other.md)
+- [Linux x86-64](https://github.com/roc-lang/roc/blob/main/getting_started/linux_x86_64.md)
+- [MacOS Apple Silicon](https://github.com/roc-lang/roc/blob/main/getting_started/macos_apple_silicon.md)
+- [MacOS x86-64](https://github.com/roc-lang/roc/blob/main/getting_started/macos_x86_64.md)
+- [Windows](https://github.com/roc-lang/roc/blob/main/getting_started/windows.md)
+- [Other Systems](https://github.com/roc-lang/roc/blob/main/getting_started/other.md)
 
-## Nightly Builds
+## Nightly
 
-<!-- direct download links to builds should go here -->
-
-[nightly builds](https://github.com/roc-lang/roc/releases)
+<!-- link to nightly for currently detected OS(browser) and provide "other" button to reveal all -->
 
 ## Roc CLI
 
@@ -27,6 +25,25 @@
 
 ## Package Management
 
+You can include packages using an URL:
+
+```roc
+app "hello"
+    packages { 
+        # basic-cli platform
+        pf: "https://github.com/roc-lang/basic-cli/releases/download/0.4.0/DI4lqn7LIZs8ZrCDUgLK-tHHpQmxGF1ZrlevRKq5LXk.tar.br",
+        # json package
+        json: "https://github.com/lukewilliamboswell/roc-json/releases/download/0.1.0/xbO9bXdHi7E9ja6upN5EJXpDoYm7lwmJ8VzL7a5zhYE.tar.br",
+    }
+    imports [
+        pf.Stdout,
+        json.Core,
+    ]
+    provides [main] to pf
+```
+
+A full Roc package manager will be developed in the future.
+
 <!-- 
 
 explain package manager design is still a work in progress 
@@ -35,6 +52,8 @@ the plan is to create a centralised index
 - a fact that every language will have one
 
 in the meantime you can use package URLs
+
+TODO Add an explanation for the URLs with the SHA and the tar.br. This explanation should only be revealed on click.
 -->
 
 ## Editor Support
@@ -44,6 +63,8 @@ explain that the high level design is a work in progress
 - Design goals for editor - we want Roc to ship with an awesome editor
 - Beginners learning to get up an running with an editor
 - Want it to run really fast etc
+
+- Also link to VScode plugin
 -->
 
 - Language Server
diff --git a/www/wip_new_website/content/tutorial.md b/www/wip_new_website/content/tutorial.md
index 2d8346554d..9627c696cb 100644
--- a/www/wip_new_website/content/tutorial.md
+++ b/www/wip_new_website/content/tutorial.md
@@ -1,5 +1,33 @@
 # Tutorial
 
-This is a placeholder page for the Roc tutorial.
- 
-TODO move the tutorial here from `../generate_tutorial/src/input/tutorial.roc`
\ No newline at end of file
+This tutorial will teach you how to build Roc applications. Along the way, you'll learn how to write tests, use the REPL, and much more!
+
+## [Strings and Numbers](#strings-and-numbers) {#strings-and-numbers}
+
+Let's start by getting acquainted with Roc's [_Read-Eval-Print-Loop_](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop), or **REPL** for short. Run this in a terminal:
+
+<code class="block">roc repl</code>
+
+If Roc is [installed](#installation), you should see this:
+
+<pre><samp>The rockin’ roc repl</samp></pre>
+
+So far, so good!
+
+### [Hello, World!](#hello-world) {#hello-world}
+
+Try typing this in the REPL and pressing Enter:
+
+<samp class="repl-prompt">"Hello, World!"</samp>
+
+The REPL should cheerfully display the following:
+
+<pre><samp><span class="literal">"Hello, World!" </span><span class="colon">:</span> Str <span class="comment">               # val1</span></samp></pre>
+
+Congratulations! You've just written your first Roc code.
+
+### [Naming Things](#naming-things) {#naming-things}
+
+When you entered the _expression_ `"Hello, World!"`, the REPL printed it back out. It also printed `: Str`, because `Str` is that expression's type. We'll talk about types later; for now, let's ignore the `:` and whatever comes after it whenever we see them.
+
+**TODO -- move tutorial here when this site is migrated.**
\ No newline at end of file
diff --git a/www/wip_new_website/main.roc b/www/wip_new_website/main.roc
index 27fe2692fa..7ffaf0dded 100644
--- a/www/wip_new_website/main.roc
+++ b/www/wip_new_website/main.roc
@@ -1,7 +1,7 @@
 app "roc-website"
     packages { pf: "../../examples/static-site-gen/platform/main.roc" }    
     imports [
-        pf.Html.{ html, head, body, footer, p, div, main, text, nav, a, link, meta },
+        pf.Html.{ html, head, body, footer, br, div, main, text, nav, a, link, meta },
         pf.Html.Attributes.{ content, name, id, href, rel, lang, class, title, charset },
     ]
     provides [transformFileContent] to pf
@@ -49,16 +49,11 @@ view = \page, htmlContent ->
             main [] [
                 text htmlContent,
             ],
-            footer [
-                id "footer"
-            ] [
-                p [] [
-                    a [href "https://github.com/roc-lang/roc"] [text "source code repository"],
-                ],
-                # <!-- TODO FOOTER - Lanugage link to source code -->
-                text "This site is powered by ",
-                a [href "https://www.netlify.com"] [ text "Netlify"],
-                text ". Made by people who like to make nice things. © Roc 2023",
+            footer [] [
+                div [id "footer"] [
+                    text " powered by ",
+                    a [href "https://www.netlify.com"] [ text "Netlify"],
+                ]
             ]
         ],
         # TODO - add site.js if needed
@@ -86,7 +81,6 @@ viewNavbar =
 rocLogo = 
     (Html.element "svg") [
             (Html.attribute "viewBox") "0 -6 51 58",
-            (Html.attribute "fill") "#7c38f5",
             (Html.attribute "xmlns") "http://www.w3.org/2000/svg",
             (Html.attribute "aria-labelledby") "logo-link",
             (Html.attribute "role") "img",
diff --git a/www/wip_new_website/static/site.css b/www/wip_new_website/static/site.css
index 66781081d0..8b783552da 100644
--- a/www/wip_new_website/static/site.css
+++ b/www/wip_new_website/static/site.css
@@ -1,6 +1,6 @@
 :root {
     /* WCAG AAA Compliant colors */
-    --code-bg: #f4f8f9;
+    --gray-bg: #f4f8f9;
     --gray: #717171;
     --orange: #bf5000;
     --green: #0b8400;
@@ -10,10 +10,12 @@
     --violet-bg: #ece2fd;
     --magenta: #a20031;
 
-    --link-color: var(--violet);
-    --code-link-color: var(--violet);
+    --primary-1: #9b6bf2;
+    --primary-2: #7c38f5;
+    --link-color: var(--primary-2);
+    --code-link-color: var(--primary-2);
     --text-color: #000;
-    --text-hover-color: var(--violet);
+    --text-hover-color: var(--primary-2);
     --body-bg-color: #ffffff;
     --border-color: #717171;
     --faded-color: #4c4c4c;
@@ -23,6 +25,8 @@
         monospace;
     --top-header-height: 67px;
     --sidebar-width: 280px;
+
+    --font-size-normal: 1rem;
 }
 
 html {
@@ -39,10 +43,16 @@ body {
 }
 
 footer {
-    font-size: 0.9rem;
+    width: 100%;
+    color: var(--text-color);
+    padding: 20px;
+    text-align: center;
+    font-size: var(--font-size-normal);
+}
+
+#footer {
     max-width: 1024px;
     margin: 0 auto;
-    font-size: 14px;
 }
 
 section p:last-child {
@@ -66,8 +76,30 @@ li {
     margin-bottom: 0.5rem;
 }
 
+h1, h2, h3, h4 {
+    font-family: "Permanent Marker";
+    padding-left: 12px;
+}
+
+h1 {
+    color: var(--primary-1);
+    font-size: 5rem;
+    text-shadow: 1px 1px 1px #010101;
+}
+
+h2 {
+    color: var(--primary-1);
+    font-size: 3rem;
+    text-shadow: 1px 1px 1px #010101;
+}
+
+h3 {
+    color: var(--cyan);
+    font-size: 1.5rem;
+}
+
 #top-bar {
-    background-color: var(--violet-bg);
+    background-color: var(--gray-bg);
     width: 100%;
     height: 50px;
 }
@@ -94,7 +126,7 @@ li {
 #top-bar-links label {
     box-sizing: border-box;
     color: var(--top-bar-fg);
-    font-size: 1.1rem;
+    font-size: var(--font-size-normal);
     display: block;
     height: 40px;
     padding: 12px 16px;
@@ -102,24 +134,24 @@ li {
 }
 
 main {
-    max-width: var(--body-max-width);
-    margin: 36px auto;
-    padding: 0 12px;
+    max-width: 1024px;
+    margin: auto;
+    padding: 12px;
 }
 
 code,
 samp {
     font-family: var(--font-mono);
     color: var(--code-color);
-    background-color: var(--code-bg);
+    background-color: var(--gray-bg);
     display: inline-block;
+    padding: 0;
 }
 
 p code,
 td code,
 li code,
-th code,
-samp {
+th code {
     padding: 0 8px;
 }
 
@@ -141,10 +173,10 @@ pre {
     margin-bottom: 16px;
     padding: 8px 16px;
     box-sizing: border-box;
-    background-color: var(--code-bg);
+    background-color: var(--gray-bg);
     overflow-x: hidden;
     word-wrap: normal;
-    font-size: 1.2rem;
+    font-size: var(--font-size-normal);
     line-height: 1.76em;
     white-space: pre;
 }
@@ -199,9 +231,8 @@ td:last-child {
 
 p,
 aside,
-li,
-footer {
-    font-size: 1.2rem;
+li {
+    font-size: var(--font-size-normal);
     line-height: 1.85rem;
 }
 
@@ -402,18 +433,17 @@ footer {
     :root {
         /* WCAG AAA Compliant colors */
         /* WCAG AAA Compliant colors */
-        --code-bg: #202746;
+        --gray-bg: #202746;
         --gray: #b6b6b6;
         --orange: #fd6e08;
         --green: #8ecc88;
         --cyan: #12c9be;
         --blue: #b1afdf;
-        --violet: #caadfb;
         --violet-bg: #332944;
         --magenta: #f39bac;
 
-        --link-color: var(--violet);
-        --code-link-color: var(--violet);
+        --primary-1: #9c7cea;
+        --primary-2: #1bd6bd;
         --text-color: #eaeaea;
         --body-bg-color: #0e0e0f;
         --border-color: var(--gray);
@@ -423,6 +453,10 @@ footer {
         --gray: #6e6e6e;
     }
 
+    h3 {
+        color: var(--primary-2);
+    }
+
     h1,
     h2,
     h3,
@@ -527,7 +561,7 @@ code .dim {
 }
 
 .copy-button {
-    background: var(--code-bg);
+    background: var(--gray-bg);
     border: 1px solid var(--magenta);
     color: var(--magenta);
     display: inline-block;
@@ -544,6 +578,8 @@ code .dim {
     width: 40px;
     height: 40px;
     margin: 0 auto;
+    fill: var(--primary-1);
+    text-shadow: 1px 1px 1px #010101;
 }
 
 .home-goals-container {
@@ -554,7 +590,7 @@ code .dim {
 .home-goals-column {
     flex-basis: 30%;
     padding: 20px;
-    background-color: var(--violet-bg);
+    background-color: var(--gray-bg);
     margin-right: 20px;
 }
 
@@ -563,7 +599,7 @@ code .dim {
 }
 
 .home-goals-title {
-    font-size: 18px;
+    padding: 0;
     font-weight: bold;
     margin-bottom: 10px;
 }
@@ -573,15 +609,3 @@ code .dim {
     line-height: 1.5;
     margin-bottom: 10px;
 }
-
-.home-goals-learn-more {
-    color: var(--violet);
-    text-decoration: none;
-}
-
-#footer {
-    background-color: var(--violet-bg);
-    color: var(--text-color);
-    padding: 20px;
-    text-align: center;
-  }
\ No newline at end of file