diff --git a/public/index.html b/public/index.html
index e64ead66c..3377cb0a6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,9 +20,10 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo512.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>PolicyEngine</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif&family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com"> 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz@8..144&family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+
     <script>
       (function (w, d, s, l, i) {
         w[l] = w[l] || [];
diff --git a/src/images/logos/policyengine/profile/blue.svg b/src/images/logos/policyengine/profile/blue.svg
index f96f1c72b..e9815bd5f 100644
--- a/src/images/logos/policyengine/profile/blue.svg
+++ b/src/images/logos/policyengine/profile/blue.svg
@@ -1,8 +1,9 @@
 <svg width="244" height="244" viewBox="0 0 244 244" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M28.0008 103.633V0.775391H71.4212C80.0906 0.775391 86.9723 2.36723 92.0661 5.5509C97.16 8.6856 100.809 12.7264 103.013 17.6733C105.217 22.5713 106.319 27.6897 106.319 33.0285C106.319 36.7509 105.658 40.5223 104.336 44.3427C103.062 48.1142 101.029 51.5917 98.2375 54.7754C95.4947 57.9101 91.8947 60.457 87.4375 62.4162C83.0294 64.3264 77.6906 65.2815 71.4212 65.2815H47.0294V103.633H28.0008ZM47.0294 47.355H72.3028C75.8294 47.355 78.6457 46.6448 80.7518 45.2244C82.9069 43.755 84.4498 41.9182 85.3804 39.7142C86.311 37.5101 86.7763 35.2815 86.7763 33.0285C86.7763 30.9713 86.3355 28.8407 85.4539 26.6366C84.6212 24.3836 83.1518 22.4978 81.0457 20.9795C78.9396 19.4611 76.0253 18.7019 72.3028 18.7019H47.0294V47.355Z" fill="white"/>
-<path d="M140.776 243.224V140.367H210V158.441H159.805V181.069H189.707V199.143H159.805V225.004H210V243.224H140.776Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M103.968 140.367H0.817505V158.735H85.6008V243.224H103.968V158.735V140.367Z" fill="white" fill-opacity="0.3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M140.703 103.633V96.2856H159.07V85.2652H243.266V103.633H140.703Z" fill="white" fill-opacity="0.3"/>
-<path d="M140.703 0.775394V85.2652H159.07V0.775394H140.703Z" fill="white" fill-opacity="0.3"/>
-<path d="M140.703 85.2652V96.2856H159.07V85.2652H140.703Z" fill="white" fill-opacity="0.3"/>
+<path d="M28.0008 103.633V0.775391H71.4212C80.0906 0.775391 86.9723 2.36723 92.0661 5.5509C97.16 8.6856 100.809 12.7264 103.013 17.6733C105.217 22.5713 106.319 27.6897 106.319 33.0285C106.319 36.7509 105.658 40.5223 104.336 44.3427C103.062 48.1142 101.029 51.5917 98.2375 54.7754C95.4947 57.9101 91.8947 60.457 87.4375 62.4162C83.0294 64.3264 77.6906 65.2815 71.4212 65.2815H47.0294V103.633H28.0008ZM47.0294 47.355H72.3028C75.8294 47.355 78.6457 46.6448 80.7518 45.2244C82.9069 43.755 84.4498 41.9182 85.3804 39.7142C86.311 37.5101 86.7763 35.2815 86.7763 33.0285C86.7763 30.9713 86.3355 28.8407 85.4539 26.6366C84.6212 24.3836 83.1518 22.4978 81.0457 20.9795C78.9396 19.4611 76.0253 18.7019 72.3028 18.7019H47.0294V47.355Z" fill="#2C6496"/>
+<path d="M140.776 243.224V140.367H210V158.441H159.805V181.069H189.707V199.143H159.805V225.004H210V243.224H140.776Z" fill="#2C6496"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.968 140.367H0.817505V158.735H85.6008V243.224H103.968V158.735H85.6008V147.714H103.968V140.367Z" fill="#2C6496" fill-opacity="0.3"/>
+<path d="M103.968 158.735V147.714H85.6008V158.735H103.968Z" fill="#2C6496" fill-opacity="0.3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M140.703 103.633V96.2856H159.07V85.2652H243.266V103.633H140.703Z" fill="#2C6496" fill-opacity="0.3"/>
+<path d="M140.703 0.775394V85.2652H159.07V0.775394H140.703Z" fill="#2C6496" fill-opacity="0.3"/>
+<path d="M140.703 85.2652V96.2856H159.07V85.2652H140.703Z" fill="#2C6496" fill-opacity="0.3"/>
 </svg>
diff --git a/src/images/logos/policyengine/profile/white.svg b/src/images/logos/policyengine/profile/white.svg
index e9815bd5f..f96f1c72b 100644
--- a/src/images/logos/policyengine/profile/white.svg
+++ b/src/images/logos/policyengine/profile/white.svg
@@ -1,9 +1,8 @@
 <svg width="244" height="244" viewBox="0 0 244 244" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M28.0008 103.633V0.775391H71.4212C80.0906 0.775391 86.9723 2.36723 92.0661 5.5509C97.16 8.6856 100.809 12.7264 103.013 17.6733C105.217 22.5713 106.319 27.6897 106.319 33.0285C106.319 36.7509 105.658 40.5223 104.336 44.3427C103.062 48.1142 101.029 51.5917 98.2375 54.7754C95.4947 57.9101 91.8947 60.457 87.4375 62.4162C83.0294 64.3264 77.6906 65.2815 71.4212 65.2815H47.0294V103.633H28.0008ZM47.0294 47.355H72.3028C75.8294 47.355 78.6457 46.6448 80.7518 45.2244C82.9069 43.755 84.4498 41.9182 85.3804 39.7142C86.311 37.5101 86.7763 35.2815 86.7763 33.0285C86.7763 30.9713 86.3355 28.8407 85.4539 26.6366C84.6212 24.3836 83.1518 22.4978 81.0457 20.9795C78.9396 19.4611 76.0253 18.7019 72.3028 18.7019H47.0294V47.355Z" fill="#2C6496"/>
-<path d="M140.776 243.224V140.367H210V158.441H159.805V181.069H189.707V199.143H159.805V225.004H210V243.224H140.776Z" fill="#2C6496"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M103.968 140.367H0.817505V158.735H85.6008V243.224H103.968V158.735H85.6008V147.714H103.968V140.367Z" fill="#2C6496" fill-opacity="0.3"/>
-<path d="M103.968 158.735V147.714H85.6008V158.735H103.968Z" fill="#2C6496" fill-opacity="0.3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M140.703 103.633V96.2856H159.07V85.2652H243.266V103.633H140.703Z" fill="#2C6496" fill-opacity="0.3"/>
-<path d="M140.703 0.775394V85.2652H159.07V0.775394H140.703Z" fill="#2C6496" fill-opacity="0.3"/>
-<path d="M140.703 85.2652V96.2856H159.07V85.2652H140.703Z" fill="#2C6496" fill-opacity="0.3"/>
+<path d="M28.0008 103.633V0.775391H71.4212C80.0906 0.775391 86.9723 2.36723 92.0661 5.5509C97.16 8.6856 100.809 12.7264 103.013 17.6733C105.217 22.5713 106.319 27.6897 106.319 33.0285C106.319 36.7509 105.658 40.5223 104.336 44.3427C103.062 48.1142 101.029 51.5917 98.2375 54.7754C95.4947 57.9101 91.8947 60.457 87.4375 62.4162C83.0294 64.3264 77.6906 65.2815 71.4212 65.2815H47.0294V103.633H28.0008ZM47.0294 47.355H72.3028C75.8294 47.355 78.6457 46.6448 80.7518 45.2244C82.9069 43.755 84.4498 41.9182 85.3804 39.7142C86.311 37.5101 86.7763 35.2815 86.7763 33.0285C86.7763 30.9713 86.3355 28.8407 85.4539 26.6366C84.6212 24.3836 83.1518 22.4978 81.0457 20.9795C78.9396 19.4611 76.0253 18.7019 72.3028 18.7019H47.0294V47.355Z" fill="white"/>
+<path d="M140.776 243.224V140.367H210V158.441H159.805V181.069H189.707V199.143H159.805V225.004H210V243.224H140.776Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.968 140.367H0.817505V158.735H85.6008V243.224H103.968V158.735V140.367Z" fill="white" fill-opacity="0.3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M140.703 103.633V96.2856H159.07V85.2652H243.266V103.633H140.703Z" fill="white" fill-opacity="0.3"/>
+<path d="M140.703 0.775394V85.2652H159.07V0.775394H140.703Z" fill="white" fill-opacity="0.3"/>
+<path d="M140.703 85.2652V96.2856H159.07V85.2652H140.703Z" fill="white" fill-opacity="0.3"/>
 </svg>
diff --git a/src/index.js b/src/index.js
index cfc0887ce..3ddcb7fdc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "antd/dist/antd.min.css";
-import PolicyEngine from "./PolicyEngine";
+import PolicyEngine from "./redesign/PolicyEngine";
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
diff --git a/src/layout/Responsive.jsx b/src/layout/Responsive.jsx
index 6b4eadf02..ae2cabbe7 100644
--- a/src/layout/Responsive.jsx
+++ b/src/layout/Responsive.jsx
@@ -2,15 +2,32 @@ import { useEffect, useMemo, useState } from "react";
 
 const DisplaySize = {
   Mobile: 0,
-  Desktop: 1200,
+  Tablet: 768,
+  Desktop: 1080,
 };
 
 const determineDisplayCategory = (width) => {
-  if (width < DisplaySize.Desktop) {
+  if (width < DisplaySize.Tablet) {
     return "mobile";
-  } else {
-    return "desktop";
+  } else if (width < DisplaySize.Desktop) {
+    return "tablet";
   }
+  return "desktop";
+};
+
+const useDisplayCategory = () => {
+  const [currentDisplayCategory, setcurrentDisplayCategory] = useState(
+    determineDisplayCategory(window.innerWidth)
+  );
+    
+  useEffect(() => {
+    const handler = () =>
+      setcurrentDisplayCategory(determineDisplayCategory(window.innerWidth));
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, []);
+
+  return useMemo(() => currentDisplayCategory, [currentDisplayCategory]);
 };
 
 const useMobile = () => {
@@ -30,4 +47,16 @@ const useMobile = () => {
   return useMemo(() => currentDisplayCategory, [currentDisplayCategory]);
 };
 
+function ResponsiveComponent(props) {
+  const displayCategory = useDisplayCategory();
+  if (displayCategory === "mobile") {
+    return props.mobile;
+  } else if (displayCategory === "tablet") {
+    return props.tablet;
+  }
+  return props.desktop;
+}
+
 export default useMobile;
+
+export { useDisplayCategory, ResponsiveComponent };
diff --git a/src/redesign/PolicyEngine.jsx b/src/redesign/PolicyEngine.jsx
new file mode 100644
index 000000000..3568ddfd9
--- /dev/null
+++ b/src/redesign/PolicyEngine.jsx
@@ -0,0 +1,231 @@
+import { useDisplayCategory } from "layout/Responsive"
+import style from "style";
+import PolicyEngineMainLogo from "../images/logos/policyengine/white.svg";
+import PolicyEngineSmallLogo from "../images/logos/policyengine/profile/white.svg";
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+
+export default function PolicyEngine() {
+    return (
+        <div>
+            <HeaderBar />
+        </div>
+    )
+}
+
+function HeaderBar() {
+    const displayCategory = useDisplayCategory();
+    return (
+        <>
+        <div style={{
+            backgroundColor: style.colors.BLUE,
+            width: "100%",
+            height: 90,
+            display: "flex",
+            alignItems: "center",
+            position: "fixed",
+        }}>
+            {{
+                mobile: <MobileHeaderBar />,
+                tablet: <TabletHeaderBar />,
+                desktop: <DesktopHeaderBar />,
+            }[displayCategory]}
+        </div>
+        <div style={{
+            height: 90,
+        }}/>
+        </>
+    )
+}
+
+function MobileHeaderBar() {
+    return <>
+        <MobileHeaderLogo />
+        <MobileCalculatorButton />
+        <Hamburger />
+    </>
+}
+
+function TabletHeaderBar() {
+    return <>
+        <MainHeaderLogo />
+        <DesktopCalculatorButton />
+        <Hamburger />
+    </>
+}
+
+function DesktopHeaderBar() {
+    return <>
+        <MainHeaderLogo />
+        <PageLinks />
+        <DesktopCalculatorButton />
+    </>
+}
+
+function MobileHeaderLogo() {
+    return <div style={{
+        display: "flex",
+        alignItems: "center",
+        maxWidth: "20vw",
+    }}>
+        <img 
+            src={PolicyEngineSmallLogo} 
+            alt="PolicyEngine logo"
+            style={{
+                height: 50,
+                margin: 20,
+            }}
+        />
+    </div>
+}
+
+function MobileCalculatorButton() {
+    return <div style={{
+        backgroundColor: "#39C6C0",
+        height: 50,
+        width: 50,
+        margin: 20,
+        marginLeft: "auto",
+    }}>
+
+    </div>
+}
+
+function Hamburger() {
+    return <div style={{
+        height: 50,
+        width: 50,
+        margin: 20,
+        alignItems: "center",
+        display: "flex",
+        justifyContent: "center",
+        padding: 15,
+        color: "white",
+        border: "1px solid white",
+    }}>
+        =
+    </div>
+}
+
+function DesktopCalculatorButton() {
+    return <div style={{
+        backgroundColor: "#39C6C0",
+        height: 50,
+        margin: 20,
+        marginLeft: "auto",
+        alignItems: "center",
+        display: "flex",
+        justifyContent: "center",
+        color: "white",
+        padding: 15,
+        paddingLeft: 30,
+        paddingRight: 30,
+        fontSize: 20,
+        fontFamily: "Roboto",
+        fontWeight: 500,
+        letterSpacing: 2.4,
+    }}>
+        CALCULATE
+    </div>
+}
+
+function MainHeaderLogo() {
+    return <div style={{
+        display: "flex",
+        alignItems: "center",
+        width: "min(300px, 25vw)",
+        margin: 20,
+    }}>
+        <img 
+            src={PolicyEngineMainLogo} 
+            alt="PolicyEngine logo"
+            style={{
+                // make whatever height fits the container
+                width: "min(300px, 25vw)",
+                objectFit: "contain",
+            }}
+        />
+    </div>
+}
+
+function PageLinks() {
+    return <div style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "min(600px, 50vw)",
+        paddingLeft: 30,
+    }}>
+        {["Research", "About", "Contact", "Donate"].map((link) => {
+            return <div style={{
+                color: "white",
+                margin: 15,
+                fontSize: 20,
+                fontFamily: "Roboto",
+                fontWeight: 500,
+                letterSpacing: 2.4,
+                textTransform: "uppercase",
+            }}
+            key="link"
+            >
+                <HoverBackground
+                    defaultBackground="transparent"
+                    hoverBackground="white"
+                    height={90}
+                    width={150}
+                    >
+                        <motion.div style={{
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            height: 90,
+                            cursor: "pointer",
+                        }}
+                        whileHover={{
+                            color: style.colors.BLUE,
+                        }}
+                        >
+                            {link}
+                        </motion.div>
+                </HoverBackground>
+            </div>
+        })}
+    </div>
+
+}
+
+function HoverBackground(props) {
+    // A div that changes color on hover by having a different covered background slide upwards.
+    const { children, defaultBackground, hoverBackground, height, width } = props;
+    const [hovering, setHovering] = useState(false);
+    // use motion.div
+    return (
+        <motion.div
+          style={{
+            backgroundColor: defaultBackground,
+            overflow: "hidden",
+            height: height,
+            width: width,
+            margin: 0,
+          }}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+        >
+          {children}
+            <motion.div
+                style={{
+                    backgroundColor: hoverBackground,
+                    position: "relative",
+                    height: height * 2,
+                    top: -height * 2,
+                    zIndex: -1,
+                }}
+                animate={hovering ? { y: height / 2 } : { y: -height }}
+                transition={{ 
+                    duration: 0.2,
+                }}
+            />
+        </motion.div>
+      );
+}
\ No newline at end of file
diff --git a/src/style/App.css b/src/style/App.css
index 642560848..18bfc1d3d 100644
--- a/src/style/App.css
+++ b/src/style/App.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz@8..144&family=Roboto:wght@300;500&display=swap');
+
 h1,
 h2,
 h3,