diff --git a/website/public/assets/fonts/AleofontSans-Regular.otf b/website/public/assets/fonts/AleofontSans-Regular.otf
new file mode 100644
index 000000000..af1038530
Binary files /dev/null and b/website/public/assets/fonts/AleofontSans-Regular.otf differ
diff --git a/website/public/primary-wordmark-dark.png b/website/public/primary-wordmark-dark.png
new file mode 100644
index 000000000..1ff59544f
Binary files /dev/null and b/website/public/primary-wordmark-dark.png differ
diff --git a/website/src/App.css b/website/src/App.css
index eb1e03298..49395de46 100644
--- a/website/src/App.css
+++ b/website/src/App.css
@@ -5,4 +5,31 @@
  */
 input[type="text"]:disabled {
     cursor: text;
+}
+
+@font-face {
+    font-family: "AleoSans";
+    src: url("/assets/fonts/AleofontSans-Regular.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.headerDark {
+    font-family: "AleoSans";
+    color: white;
+    font-size:32px;
+    margin-left:2rem;
+    a {
+        color: white;
+    }
+}
+
+.headerLight {
+    font-family: "AleoSans";
+    color: black;
+    font-size:32px;
+    margin-left:2rem;
+    a{
+        color: black;
+    }
 }
\ No newline at end of file
diff --git a/website/src/main.jsx b/website/src/main.jsx
index fb35d46d3..ee85219a6 100644
--- a/website/src/main.jsx
+++ b/website/src/main.jsx
@@ -58,9 +58,9 @@ function Main() {
 
     useEffect(() => {
         setMenuIndex(location.pathname);
-        if (location.pathname === "/") {
-            navigate("/account");
-        }
+        // if (location.pathname === "/") {
+        //     navigate("/account");
+        // }
     }, [location, navigate]);
 
     const [darkMode, setDarkMode] = useState(true);
@@ -80,20 +80,11 @@ function Main() {
                 <WasmLoadingMessage />
                 <Layout style={{ minHeight: "100vh" }}>
                     <Sider breakpoint="lg" collapsedWidth="0" theme="light">
-                        <img
-                            src={
-                                darkMode
-                                    ? "../public/aleosdklight.svg"
-                                    : "../public/aleosdkdark.svg"
-                            }
-                            alt="Aleo SDK Logo"
-                            style={{
-                                height: "32px",
-                                margin: "16px",
-                                fontWeight: "bold",
-                                whiteSpace: "nowrap",
-                            }}
-                        />
+                        <h1 className={darkMode ? "headerDark": "headerLight"}>
+                            <Link to="/">
+                            Aleo SDK
+                            </Link>
+                        </h1>
                         <Menu
                             theme="light"
                             mode="inline"
diff --git a/website/src/pages/Homepage.css b/website/src/pages/Homepage.css
new file mode 100644
index 000000000..c93facde7
--- /dev/null
+++ b/website/src/pages/Homepage.css
@@ -0,0 +1,173 @@
+/* Mobile Styles */
+.homepage {
+    padding: 10px;
+    font-size: 14px;
+}
+
+.button {
+    background-color: #12e172;
+    padding: 16px 32px 16px 32px;
+    border-radius: 9px;
+    font-size: 18px;
+    color: white;
+    border: none;
+
+    a {
+        text-decoration: none;
+        color: white;
+    }
+}
+
+.button:hover {
+    background-color: #0bb359;
+}
+
+.arrow {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.headerContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.header {
+    font-size: 3rem;
+    max-width: 1200px;
+    width: 100%;
+    margin: 10rem auto 0;
+    text-align: center;
+}
+
+.subheader {
+    font-size: 1rem;
+    text-align: center;
+}
+
+.secondSubheader {
+    font-size: 16px;
+    text-align: center;
+    margin-top: 6rem;
+}
+
+.actionRow {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 100rem;
+    align-items: center;
+    justify-content: space-between;
+    margin: 5rem auto 0;
+    padding-left: 0;
+}
+
+.actionRow a:nth-child(2),
+a:nth-child(3) {
+    margin-top: 2rem;
+}
+
+.actionItem {
+    width: 200px;
+    padding: 1rem 1rem 1rem 1rem;
+    border: 2px solid white;
+    border-radius: 20px;
+    list-style-type: none;
+    text-align: center;
+    color: white;
+    text-decoration: none;
+    font-size: 1rem;
+    align-content: center;
+}
+
+.actionItem:hover {
+    background-color: #0bb359;
+}
+
+/* Desktop Styles */
+@media (min-width: 1024px) {
+    .homepage {
+        padding: 20px;
+        font-size: 18px;
+    }
+
+    .actionRow {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        max-width: 800px;
+        justify-content: space-between;
+        margin: 10rem auto 0;
+    }
+
+    .header {
+        font-size: 6rem;
+        max-width: 1200px;
+        width: 100%;
+        margin: 10rem auto 0;
+        text-align: center;
+    }
+
+    .subheader {
+        font-size: 32px;
+        width: 35rem;
+        text-align: center;
+    }
+
+    .secondSubheader {
+        font-size: 32px;
+        width: 35rem;
+        text-align: center;
+        margin-top: 10rem;
+    }
+
+    .actionRow a:nth-child(2),
+    a:nth-child(3) {
+        margin-top: 0;
+    }
+
+    .actionItem {
+        width: 175px;
+        padding: 2rem 2rem 2rem 2rem;
+        border: 2px solid white;
+        border-radius: 30px;
+        list-style-type: none;
+        text-align: center;
+
+        a {
+            color: white;
+            text-decoration: none;
+            font-size: 24px;
+            align-content: center;
+        }
+    }
+
+    .actionItem:hover {
+        background-color: #0bb359;
+    }
+}
+
+@font-face {
+    font-family: "AleoSans";
+    src: url("/assets/fonts/AleofontSans-Regular.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    font-family: "AleoSans", sans-serif;
+    color: white;
+}
+
+.logo {
+    height: 2rem;
+}
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10rem;
+}
diff --git a/website/src/pages/Homepage.jsx b/website/src/pages/Homepage.jsx
new file mode 100644
index 000000000..191d1008b
--- /dev/null
+++ b/website/src/pages/Homepage.jsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import "./Homepage.css";
+
+const Homepage = () => {
+    return (
+        <div className="homepage">
+          <Link to="https://provable.com/">
+            <img
+                src="../public/primary-wordmark-dark.png"
+                className="logo"
+            ></img>
+            </Link>
+            <div className="headerContainer">
+                <h1 className="header">Aleo SDK</h1>
+                <p className="subheader">
+                    The tooling for building zero-knowledge applications at your
+                    fingertips
+                </p>{" "}
+                <Link
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    to="https://developer.aleo.org/sdk/"
+                >
+                    <button className="button">
+                        {" "}
+                        View Docs <span className="arrow">&rarr;</span>{" "}
+                    </button>
+                </Link>{" "}
+                <ul className="actionRow">
+                    <Link to="/account" className="actionItem">
+                        {" "}
+                        <li>
+                            Create and manage accounts{" "}
+                        </li>
+                    </Link>
+
+                    <Link to="/develop" className="actionItem">
+                        {" "}
+                        <li>
+                            Execute and deploy programs{" "}
+                        </li>
+                    </Link>
+
+                    <Link to="/transfer" className="actionItem">
+                        <li>
+                            Manage program state and data
+                        </li>
+                    </Link>
+                </ul>
+                <p className="secondSubheader">
+                    Build your first zero-knowledge app with create-leo-app
+                </p>{" "}
+                <Link
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    to="https://docs.leo-lang.org/sdk/create-leo-app/tutorial/"
+                >
+                    <button className="button">
+                        Try it now <span className="arrow">&rarr;</span>
+                    </button>
+                </Link>{" "}
+                <div className="footer">
+                    <a href="https://github.com/ProvableHQ/sdk">
+                        <img
+                            src="../public/github-mark-white.png"
+                            style={{ height: "24px", marginBottom: "1rem" }}
+                        ></img>
+                    </a>
+                    © 2024 Provable Inc.
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Homepage;
diff --git a/website/src/routing.jsx b/website/src/routing.jsx
index f208d255a..8385c2e32 100644
--- a/website/src/routing.jsx
+++ b/website/src/routing.jsx
@@ -1,4 +1,4 @@
-import { createBrowserRouter, Navigate } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
 import Main from "./main.jsx";
 import { NewAccount } from "./tabs/account/NewAccount.jsx";
 import { AccountFromPrivateKey } from "./tabs/account/AccountFromPrivateKey.jsx";
@@ -22,15 +22,16 @@ import { Join } from "./tabs/develop/Join.jsx";
 import { Execute } from "./tabs/develop/execute/";
 import { GetMappingNames } from "./tabs/rest/GetMappingNames.jsx";
 import { GetMappingValue } from "./tabs/rest/GetMappingValue.jsx";
+import Homepage from "./pages/Homepage"; 
 
 export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <Homepage />,
+    },
     {
         element: <Main />,
         children: [
-            {
-                path: "/",
-                element: <Navigate to="/deploy" replace={false} />,
-            },
             {
                 path: "/account",
                 element: (