diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index c4663ff..52fce8e 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -3,7 +3,7 @@ import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 
 const config: Config = {
-  title: "Posthoc - The Visualisation Framework for Search",
+  title: "Posthoc - The visualisation framework for search",
   tagline:
     "Posthoc is a way to create simple and effective visualisations from logs to help you understand search.",
   favicon: "img/favicon.ico",
diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
index f996bca..6c391b3 100644
--- a/src/components/AppBar.tsx
+++ b/src/components/AppBar.tsx
@@ -6,7 +6,14 @@ import {
   DragHandleOutlined as MenuIcon,
   LaunchOutlined as OpenIcon,
 } from "@mui/icons-material";
-import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  Stack,
+  Typography,
+  useScrollTrigger,
+} from "@mui/material";
 import PopupState, { bindTrigger } from "material-ui-popup-state";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
@@ -16,19 +23,17 @@ import { useMode } from "./ModeContext";
 import { space } from "./space";
 import { usePaper } from "./theme";
 import { useSm } from "./useSm";
+import { PAGE_WIDTH } from "../config";
 
 export function AppBar() {
-  const sm = useSm();
   return (
     <Box
       sx={{
         width: "100%",
         position: "sticky",
-        px: sm ? 1 : 2,
-        pt: sm ? 1 : 4,
         top: 0,
         left: 0,
-        height: 64,
+        height: 72,
         zIndex: (t) => t.zIndex.appBar,
       }}
     >
@@ -42,6 +47,7 @@ function AppBarBody() {
   const sm = useSm();
   const paper = usePaper();
   const [top, setTop] = useState(true);
+  const scrolling = useScrollTrigger();
   useEffect(() => {
     let cancelled = false;
     const f = () => {
@@ -81,87 +87,93 @@ function AppBarBody() {
   );
   return (
     <Stack
-      gap={1}
-      alignItems="center"
-      direction="row"
       sx={{
-        p: 2,
-        px: 1.5,
-        mx: "auto",
-        transition: (t) => t.transitions.create("box-shadow"),
-        ...(!top
-          ? {
+        width: "100%",
+        transition: (t) =>
+          t.transitions.create(["box-shadow", "padding-top", "transform"]),
+        ...(top
+          ? { paddingTop: sm ? 0 : 2 }
+          : {
               ...paper(1),
-              boxShadow: `
-                0px 4px 3px -2px rgb(0 0 0 / 4%),
-                0px 5px 24px 0px rgb(0 0 0 / 4%),
-                0px 10px 48px 0px rgb(0 0 0 / 2%)
-              `,
-            }
-          : {}),
-        width: 1000 + 8 * 4,
-        maxWidth: "100%",
-        height: 64,
-        borderRadius: 32,
+              borderBottom: (t) => `1px solid ${t.palette.divider}`,
+              borderRadius: 0,
+            }),
+        ...(scrolling && {
+          transform: `translateY(-100%)`,
+        }),
       }}
     >
-      <Box sx={{ pr: 2, pl: 0.5, height: 32, minWidth: 32 }}>
-        <Logo />
-      </Box>
-      {sm ? (
-        <>
-          <Box sx={{ flex: 1 }}></Box>
-          {openPosthoc}
-          <PopupState variant="popover">
-            {(state) => (
-              <>
-                <IconButton {...bindTrigger(state)}>
-                  <MenuIcon />
-                </IconButton>
-                {createPortal(
-                  <Box
-                    sx={{
-                      ...(state.isOpen
-                        ? { opacity: 1 }
-                        : {
-                            opacity: 0,
-                            pointerEvents: "none",
-                          }),
-                      ...paper(0),
-                      transition: (t) =>
-                        t.transitions.create(["opacity", "backdrop-filter"]),
-                      position: "fixed",
-                      zIndex: (t) => t.zIndex.modal,
-                      top: 0,
-                      left: 0,
-                      width: "100dvw",
-                      height: "100vh",
-                      borderRadius: 0,
-                    }}
-                  >
-                    <Stack gap={4} p={2.5} alignItems="flex-end">
-                      <IconButton onClick={state.close}>
-                        <CloseIcon />
-                      </IconButton>
-                      {darkToggle}
-                      {menu}
-                      {openPosthoc}
-                    </Stack>
-                  </Box>,
-                  document.body
-                )}
-              </>
-            )}
-          </PopupState>
-        </>
-      ) : (
-        <>
-          {menu}
-          {space()}
-          {openPosthoc}
-          {darkToggle}
-        </>
-      )}
+      <Stack
+        gap={1}
+        alignItems="center"
+        direction="row"
+        sx={{
+          p: 2,
+          px: 1.5,
+          mx: "auto",
+          width: PAGE_WIDTH + 8 * 4,
+          maxWidth: "100%",
+          height: 72,
+        }}
+      >
+        <Box sx={{ pr: 2, pl: 0.5, height: 28, minWidth: 28 }}>
+          <Logo />
+        </Box>
+        {sm ? (
+          <>
+            <Box sx={{ flex: 1 }}></Box>
+            {openPosthoc}
+            <PopupState variant="popover">
+              {(state) => (
+                <>
+                  <IconButton {...bindTrigger(state)}>
+                    <MenuIcon />
+                  </IconButton>
+                  {createPortal(
+                    <Box
+                      sx={{
+                        ...(state.isOpen
+                          ? { opacity: 1 }
+                          : {
+                              opacity: 0,
+                              pointerEvents: "none",
+                            }),
+                        ...paper(0),
+                        transition: (t) =>
+                          t.transitions.create(["opacity", "backdrop-filter"]),
+                        position: "fixed",
+                        zIndex: (t) => t.zIndex.modal,
+                        top: 0,
+                        left: 0,
+                        width: "100dvw",
+                        height: "100vh",
+                        borderRadius: 0,
+                      }}
+                    >
+                      <Stack gap={4} p={2.5} alignItems="flex-end">
+                        <IconButton onClick={state.close}>
+                          <CloseIcon />
+                        </IconButton>
+                        {darkToggle}
+                        {menu}
+                        {openPosthoc}
+                      </Stack>
+                    </Box>,
+                    document.body
+                  )}
+                </>
+              )}
+            </PopupState>
+          </>
+        ) : (
+          <>
+            {menu}
+            {space()}
+            {openPosthoc}
+            {darkToggle}
+          </>
+        )}
+      </Stack>
     </Stack>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 9f8eda9..f6556e8 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -5,6 +5,7 @@ import { Logo } from "./Logo";
 import { useSm } from "./useSm";
 import { space } from "./space";
 import { usePaper } from "./theme";
+import { PAGE_WIDTH } from "../config";
 
 export function Footer() {
   const sm = useSm();
@@ -16,7 +17,7 @@ export function Footer() {
           gap={4}
           sx={{
             maxWidth: "100%",
-            width: 1000,
+            width: PAGE_WIDTH,
             px: sm ? 0 : 3,
             py: 4,
             m: "0 auto",
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
index ff86bac..8e1ed74 100644
--- a/src/components/Gallery.tsx
+++ b/src/components/Gallery.tsx
@@ -206,9 +206,9 @@ export function Gallery() {
                   }}
                 >
                   <Button
-                    // disableRipple
-                    // disableTouchRipple
+                    disableRipple
                     sx={{
+                      cursor: "default",
                       boxShadow: (t) =>
                         `0px 16px 32px ${alpha(
                           t.palette.background.default,
@@ -229,94 +229,100 @@ export function Gallery() {
                         : "none",
                     }}
                   >
-                    {!lg ? (
+                    {lg ? (
                       <Box
                         sx={{
                           position: "absolute",
-                          zIndex: 1,
-                          top: 0,
-                          left: 0,
+                          zIndex: -1,
                           bottom: 0,
+                          left: 0,
                           right: 0,
-                          opacity: `var(--factor-near)`,
-                          backgroundColor: "#0a0c1099",
+                          height: 500,
                           pointerEvents: "none",
+                          width: "100%",
+                          opacity: `var(--factor-near)`,
+                          backgroundImage:
+                            "linear-gradient(to top, #0a0c10DD, transparent)",
+                          borderRadius: 4,
                         }}
-                      ></Box>
+                      />
                     ) : (
                       <Box
                         sx={{
                           position: "absolute",
-                          zIndex: -1,
-                          pointerEvents: "none",
-                          width: "100%",
-                          aspectRatio: 16 / 10,
-                          maxWidth: 720,
+                          zIndex: 1,
+                          top: 0,
+                          left: 0,
+                          bottom: 0,
+                          right: 0,
                           opacity: `var(--factor-near)`,
-                          backgroundColor: "#0a0c10DD",
-                          borderRadius: 4,
-                          backdropFilter: "blur(8px)",
-                          transform: "translateX(calc(var(--factor) * 0.1px))",
+                          backgroundColor: "#0a0c10BB",
+                          pointerEvents: "none",
                         }}
-                      ></Box>
+                      />
                     )}
                     <Stack
                       sx={{
                         zIndex: 2,
                         position: "absolute",
-                        textAlign: "center",
+                        textAlign: "left",
                         gap: 2,
-                        px: 2,
-                        justifyContent: "center",
-                        alignItems: "center",
-                        maxWidth: 720,
+                        p: 4,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        justifyContent: lg ? "space-between" : "flex-start",
+                        alignItems: lg ? "flex-end" : "flex-start",
                         opacity: "var(--factor-near)",
-                        filter: !lg
-                          ? "none"
-                          : "blur(calc(calc(calc(1 - var(--factor-near)) * 16px) - 1px))",
+                        flexDirection: lg ? "row" : "column",
                       }}
                     >
-                      <Typography
-                        sx={{
-                          mb: -2,
-                          color: "primary.light",
-                          fontSize: "1rem",
-                          fontWeight: 500,
-                        }}
-                        variant="overline"
-                      >
-                        {tagline}
-                      </Typography>
-                      <Typography
-                        variant="h2"
-                        sx={{
-                          fontWeight: 400,
-                          color: "white",
-                        }}
-                      >
-                        {label}
-                      </Typography>
-                      <Stack
-                        direction="row"
-                        sx={{
-                          gap: 1,
-                          alignItems: "center",
-                        }}
-                      >
-                        <Avatar sx={{ width: 24, height: 24 }} src={avatar} />
-                        <Typography variant="subtitle2" sx={{ color: "white" }}>
-                          {author ?? "Anonymous"}
+                      <Stack sx={{ gap: 2 }}>
+                        <Typography
+                          sx={{
+                            mb: -2,
+                            color: "primary.light",
+                            fontSize: "1rem",
+                            fontWeight: 500,
+                          }}
+                          variant="overline"
+                        >
+                          {tagline}
+                        </Typography>
+                        <Typography
+                          variant="h2"
+                          sx={{
+                            fontWeight: 400,
+                            color: "white",
+                          }}
+                        >
+                          {label}
+                        </Typography>
+                        <Stack
+                          direction="row"
+                          sx={{
+                            gap: 1,
+                            alignItems: "center",
+                          }}
+                        >
+                          <Avatar sx={{ width: 24, height: 24 }} src={avatar} />
+                          <Typography
+                            variant="subtitle2"
+                            sx={{ color: "white" }}
+                          >
+                            {author ?? "Anonymous"}
+                          </Typography>
+                        </Stack>
+                        <Typography
+                          variant="body1"
+                          sx={{
+                            maxWidth: 420,
+                            color: "white",
+                          }}
+                        >
+                          {description}
                         </Typography>
                       </Stack>
-                      <Typography
-                        variant="body1"
-                        sx={{
-                          maxWidth: 420,
-                          color: "white",
-                        }}
-                      >
-                        {description}
-                      </Typography>
                       <Button
                         onClick={() =>
                           open(
@@ -329,14 +335,12 @@ export function Gallery() {
                         color="primary"
                         sx={{
                           mt: 2,
-                          mb: 2,
-                          py: 2,
-                          px: 4,
+                          py: 1.5,
+                          px: 3,
                           borderRadius: 32,
                           fontWeight: 500,
                         }}
                         variant="contained"
-                        startIcon={<WorkspacesOutlined />}
                       >
                         Open in Posthoc
                       </Button>
diff --git a/src/components/GetStartedButton.tsx b/src/components/GetStartedButton.tsx
index bda4de9..a61e149 100644
--- a/src/components/GetStartedButton.tsx
+++ b/src/components/GetStartedButton.tsx
@@ -1,21 +1,11 @@
 import { ArrowForward } from "@mui/icons-material";
-import { Button, useTheme } from "@mui/material";
+import { Button } from "@mui/material";
 import { l10n } from "../l10n";
 
 export function GetStartedButton() {
-  const mode = useTheme().palette.mode;
   return (
     <Button
-      color="secondary"
-      sx={{
-        mx: "auto",
-        py: 2,
-        px: 4,
-        borderRadius: 32,
-        // Light text rendering bias
-        fontWeight: mode === "dark" ? 600 : 500,
-        "&:hover": { color: "secondary.contrastText" },
-      }}
+      sx={{ py: 1.5, px: 3, borderRadius: 32 }}
       variant="contained"
       endIcon={<ArrowForward />}
       href={l10n.heroCallToActionUrl}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 5f0f334..b9538ef 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,4 +1,7 @@
-import { FilterTiltShiftOutlined as ShowVideoIcon } from "@mui/icons-material";
+import {
+  PlayArrowOutlined,
+  FilterTiltShiftOutlined as ShowVideoIcon,
+} from "@mui/icons-material";
 import { Button, Link, Stack, Typography } from "@mui/material";
 import { l10n } from "../l10n";
 import { space } from "./space";
@@ -11,15 +14,14 @@ export function Hero() {
     <Stack
       gap={4}
       justifyContent="center"
-      alignItems="center"
+      alignItems="flex-start"
       sx={{
+        textAlign: "left",
         maxWidth: "100dvw",
         height: "60svh",
         minHeight: 520,
-        textAlign: "center",
         pt: 24,
         pb: 16,
-        mx: "auto",
       }}
     >
       {space()}
@@ -27,42 +29,45 @@ export function Hero() {
         sx={{
           zIndex: 1,
           mb: -2,
-          color: "primary.main",
+          color: "text.secondary",
           fontSize: "1rem",
           fontWeight: 500,
         }}
         variant="overline"
       >
-        <Link href={l10n.orgUrl} sx={{ textDecorationStyle: "dotted" }}>
+        <Link
+          href={l10n.orgUrl}
+          sx={{ textDecorationStyle: "dotted", color: "text.primary" }}
+        >
           {l10n.org}
         </Link>{" "}
         / {l10n.name}
       </Typography>
       <Typography
-        sx={{ zIndex: 1, px: "4dvw" }}
+        sx={{ zIndex: 1, maxWidth: 720 }}
         variant="h1"
         color="text.primary"
       >
         {l10n.heroTitle}
       </Typography>
       <Typography
-        sx={{ zIndex: 1, px: "4dvw", maxWidth: 640 }}
-        variant="subtitle1"
+        sx={{ zIndex: 1, maxWidth: 480 }}
+        variant={sm ? "body1" : "subtitle1"}
         color="text.primary"
       >
         {l10n.heroSubtitle}
       </Typography>
-      <Stack direction="row" flexWrap="wrap" gap={2} sx={{ pt: sm ? 0 : 4 }}>
+      <Stack direction="row" flexWrap="wrap" gap={4} sx={{ pt: sm ? 0 : 4 }}>
         <GetStartedButton />
         <Button
           href={l10n.demoVideoUrl}
-          startIcon={<ShowVideoIcon />}
+          startIcon={<PlayArrowOutlined />}
           sx={{
-            mx: "auto",
             color: "text.primary",
-            py: 2,
-            px: 4,
+            py: 1.5,
+            px: 3,
             borderRadius: 32,
+            ml: -2.5,
           }}
         >
           {l10n.showVideo}
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index f6874d3..e5090b7 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -2,5 +2,5 @@ import { ComponentProps } from "react";
 import { l10n } from "../l10n";
 
 export function Logo(props: ComponentProps<"img">) {
-  return <img src={l10n.logoUrl} width={32} height={32} {...props} />;
+  return <img src={l10n.logoUrl} width={28} height={28} {...props} />;
 }
diff --git a/src/components/theme.ts b/src/components/theme.ts
index 7e60b28..d132834 100644
--- a/src/components/theme.ts
+++ b/src/components/theme.ts
@@ -30,7 +30,7 @@ export const getShade = (
   return colors[color][shade ?? (mode === "dark" ? "A100" : "A700")];
 };
 
-const fontFamily = `"Inter", sans-serif`;
+const fontFamily = `"Inter Tight", sans-serif`;
 
 const headingFamily = `"Inter Tight", sans-serif`;
 
@@ -64,6 +64,7 @@ export const makeTheme = (mode: "light" | "dark", theme?: AccentColor) =>
     typography: {
       allVariants: {
         fontFamily,
+        fontWeight: mode === "dark" ? 500 : 550,
       },
       body1: {
         fontSize: 16,
@@ -72,18 +73,18 @@ export const makeTheme = (mode: "light" | "dark", theme?: AccentColor) =>
         fontSize: 15,
       },
       h1: {
-        fontSize: "max(36px, min(58px, min(6vw, 6vh)))",
-        fontWeight: mode === "dark" ? 400 : 500,
+        fontSize: "max(28px, min(46px, min(6vw, 6vh)))",
+        fontWeight: mode === "dark" ? 500 : 550,
         fontFamily: headingFamily,
       },
       h2: {
-        fontSize: "max(26px, min(32px, 4vw))",
-        fontWeight: mode === "dark" ? 400 : 500,
+        fontSize: "max(24px, min(32px, 4vw))",
+        fontWeight: mode === "dark" ? 500 : 500,
         fontFamily: headingFamily,
       },
       h3: {
         fontSize: "20px",
-        fontWeight: mode === "dark" ? 400 : 500,
+        fontWeight: mode === "dark" ? 500 : 500,
         fontFamily: headingFamily,
       },
       h4: {
@@ -97,7 +98,7 @@ export const makeTheme = (mode: "light" | "dark", theme?: AccentColor) =>
       },
       button: {
         textTransform: "none",
-        fontWeight: 500,
+        fontWeight: mode === "dark" ? 500 : 550,
         letterSpacing: 0,
         backgroundColor: "background.paper",
         fontFamily: headingFamily,
@@ -108,6 +109,7 @@ export const makeTheme = (mode: "light" | "dark", theme?: AccentColor) =>
       },
       subtitle1: {
         fontFamily: headingFamily,
+        lineHeight: 1.5,
       },
       subtitle2: {
         fontWeight: mode === "dark" ? 400 : 500,
@@ -172,9 +174,8 @@ export function useAcrylic(color?: string): SxProps<Theme> {
 export function usePaper(): (e?: number) => SxProps<Theme> {
   return (elevation: number = 1) => ({
     borderRadius: 4,
-    backdropFilter: "blur(32px)",
-    background: ({ palette }) =>
-      `url(/img/noise.png), ${alpha(palette.background.paper, 0.8)}`,
+    backdropFilter: "blur(8px)",
+    background: ({ palette }) => alpha(palette.background.default, 0.6),
     backgroundSize: "32px 32px",
   });
 }
diff --git a/src/config.tsx b/src/config.tsx
new file mode 100644
index 0000000..147d359
--- /dev/null
+++ b/src/config.tsx
@@ -0,0 +1 @@
+export const PAGE_WIDTH = 960;
diff --git a/src/l10n/en-au.json b/src/l10n/en-au.json
index 2f42df6..d60d6e3 100644
--- a/src/l10n/en-au.json
+++ b/src/l10n/en-au.json
@@ -8,7 +8,7 @@
   "playVideo": "Play ICAPS24 demo",
   "backdropVideoUrl": "media/clip.webm",
   "backdropVideoMime": "video/webm",
-  "demoVideoUrl": "https://drive.google.com/file/d/1ve-GQbgj0MGcouCdE0gxQON-20rpxtW5/preview",
+  "demoVideoUrl": "https://youtu.be/Nz2_Z9hqrmM?si=rv0p8uk3JX1SzYsV",
   "demoVideoThumbnail": "/img/primer-thumbnail.png",
   "demoVideoMime": "video/webm",
   "appUrl": "https://posthoc-app.pathfinding.ai",
@@ -92,12 +92,12 @@
     }
   ],
   "galleryCallToAction": "See more examples in Posthoc",
-  "heroTitle": "Explore decision-making in search",
+  "heroTitle": "Intuitively explore decision-making in search",
   "heroSubtitle": "Posthoc is a way to create simple and effective visualisations from logs to help you understand search.",
   "heroCallToAction": "Get started",
   "heroCallToActionUrl": "./docs/get-started",
   "endCallToActionTitle": "Ready to try Posthoc?",
-  "demoSectionTitle": "Showcased @ ICAPS24",
+  "demoSectionTitle": "Best system demonstration at ICAPS 24",
   "demoSectionSubtitle": "We're excited to present Posthoc to the search and planning community",
   "featuresSectionTitle": "Features",
   "featuresSectionSubtitle": "featuresSectionSubtitle",
@@ -137,7 +137,7 @@
   ],
   "docsCallToAction": "See Posthoc docs for %os in %lang",
   "docsCallToActionGeneric": "See how Posthoc works for you",
-  "showVideo": "Watch ICAPS24 demo",
+  "showVideo": "Demo",
   "footerLinks": [
     {
       "title": "Posthoc",
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ce2ffbf..3d8aff8 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -26,146 +26,144 @@ import { useSm } from "../components/useSm";
 import { useTitleBar } from "../components/useTitleBar";
 import { l10n } from "../l10n";
 import "./index.module.css";
-
+import { PAGE_WIDTH } from "../config";
 function Content() {
   const sm = useSm();
   const [mode] = useMode();
 
   return (
-    <>
-      <Box
-        sx={{
-          backgroundColor: "background.default",
-          backgroundImage: `radial-gradient(46.56% 45.08% at 56.04% 55.33%, rgb(138 161 255 / 8%) 0, transparent 100%), radial-gradient(46.69% 41.74% at 69.64% 60.81%, rgb(223 127 226 / 8%) 0, transparent 100%), radial-gradient(59.78% 45.73% at 30.42% 58.68%, rgb(115 182 234 / 8%) 0, transparent 100%), radial-gradient(32.53% 31.57% at 50% 66.82%, rgb(102 63 115 / 8%) 0, transparent 100%)`,
-          backgroundSize: "100vw 100vh",
-          backgroundPosition: "50% 45vh",
-          backgroundRepeat: "no-repeat",
-          transition: (t) =>
-            t.transitions.create("background-color", {
-              duration: t.transitions.duration.complex,
-            }),
-        }}
-      >
-        <AppBar />
-        <Box>
-          <Box
-            sx={{
-              textAlign: "center",
-              maxWidth: "100%",
-              width: 1000 + 8 * 8,
-              px: sm ? 3 : 4,
-              m: "0 auto",
-              pb: 12,
-            }}
-          >
-            <Box sx={{ pb: 9 }}>
-              <Hero />
-              <Gallery />
-              <SectionTitle
-                title={l10n.demoSectionTitle}
-                subtitle={l10n.demoSectionSubtitle}
-              />
+    <Box
+      sx={{
+        backgroundColor: "background.default",
+        backgroundImage: `radial-gradient(46.56% 45.08% at 56.04% 55.33%, rgb(138 161 255 / 8%) 0, transparent 100%), radial-gradient(46.69% 41.74% at 69.64% 60.81%, rgb(223 127 226 / 8%) 0, transparent 100%), radial-gradient(59.78% 45.73% at 30.42% 58.68%, rgb(115 182 234 / 8%) 0, transparent 100%), radial-gradient(32.53% 31.57% at 50% 66.82%, rgb(102 63 115 / 8%) 0, transparent 100%)`,
+        backgroundSize: "100vw 100vh",
+        backgroundPosition: "50% 45vh",
+        backgroundRepeat: "no-repeat",
+        transition: (t) =>
+          t.transitions.create("background-color", {
+            duration: t.transitions.duration.complex,
+          }),
+      }}
+    >
+      <AppBar />
+      <Box>
+        <Box
+          sx={{
+            textAlign: "center",
+            maxWidth: "100%",
+            width: PAGE_WIDTH + 8 * 8,
+            px: sm ? 3 : 4,
+            m: "0 auto",
+            pb: 12,
+          }}
+        >
+          <Box sx={{ pb: 9 }}>
+            <Hero />
+            <Gallery />
+            <SectionTitle
+              title={l10n.demoSectionTitle}
+              subtitle={l10n.demoSectionSubtitle}
+            />
+            <Button
+              onClick={() => open(l10n.demoVideoUrl)}
+              sx={{
+                p: 0,
+                width: PAGE_WIDTH,
+                mx: "auto",
+                maxWidth: "100%",
+                aspectRatio: sm ? 10 / 16 : 16 / 10,
+                overflow: "hidden",
+                borderRadius: 4,
+                backgroundImage: `url(${l10n.demoVideoThumbnail})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+              }}
+            >
               <Button
-                onClick={() => open(l10n.demoVideoUrl)}
+                color="primary"
                 sx={{
-                  p: 0,
-                  width: 1000,
                   mx: "auto",
-                  maxWidth: "100%",
-                  aspectRatio: sm ? 10 / 16 : 16 / 10,
-                  overflow: "hidden",
-                  borderRadius: 4,
-                  backgroundImage: `url(${l10n.demoVideoThumbnail})`,
-                  backgroundSize: "cover",
-                  backgroundPosition: "center",
+                  py: 2,
+                  px: 4,
+                  borderRadius: 32,
+                  // Light text rendering bias
+                  fontWeight: mode === "dark" ? 600 : 500,
+                  pointerEvents: "none",
                 }}
+                startIcon={<PlayArrowOutlined />}
+                variant="contained"
               >
-                <Button
-                  color="primary"
-                  sx={{
-                    mx: "auto",
-                    py: 2,
-                    px: 4,
-                    borderRadius: 32,
-                    // Light text rendering bias
-                    fontWeight: mode === "dark" ? 600 : 500,
-                    pointerEvents: "none",
-                  }}
-                  startIcon={<PlayArrowOutlined />}
-                  variant="contained"
-                >
-                  {l10n.playVideo}
-                </Button>
+                {l10n.playVideo}
               </Button>
-            </Box>
-            <Box sx={{ pb: 4 }}>
-              <SectionTitle title={l10n.endCallToActionTitle} />
-              <GetStartedButton />
-            </Box>
-            <Box sx={{ pb: 16 }}>
-              <SectionTitle
-                anchor="team"
-                title={<ArrowDownwardOutlined />}
-                subtitle={l10n.teamSectionSubtitle}
-              />
-              <Stack gap={4} sx={grid(260)}>
-                {map(l10n.team, ({ avatar, name, title, github }) => (
-                  <Button sx={{ p: 0 }} href={github}>
-                    <Card
-                      sx={{
-                        py: 6,
-                        width: "100%",
-                        height: "100%",
-                        color: "text.primary",
-                      }}
-                      image={
-                        <Avatar
-                          src={avatar}
-                          sx={{ mb: 4, width: 64, height: 64 }}
-                        />
-                      }
-                      title={name}
-                      subtitle={
-                        <span style={{ whiteSpace: "pre" }}>{title}</span>
-                      }
-                    />
-                  </Button>
-                ))}
-              </Stack>
-              <Typography
-                variant="subtitle2"
-                color="text.secondary"
-                sx={{ py: 8, maxWidth: 720, mx: "auto" }}
-              >
-                {l10n.teamContributorTitle}
-              </Typography>
-              <Stack gap={4} sx={flex(150)}>
-                {map(l10n.contributors, (s) => (
-                  <Typography color="text.primary" variant="subtitle2">
-                    {s}
-                  </Typography>
-                ))}
-              </Stack>
-              <Typography
-                variant="subtitle2"
-                color="text.secondary"
-                sx={{ py: 8, maxWidth: 720, mx: "auto" }}
-              >
-                {l10n.teamSupporterTitle}
-              </Typography>
-              <Stack gap={4} sx={flex(150)}>
-                {map(l10n.supporters, (s) => (
-                  <Typography color="text.primary" variant="subtitle2">
-                    {s}
-                  </Typography>
-                ))}
-              </Stack>
-            </Box>
+            </Button>
+          </Box>
+          <Box sx={{ pb: 4 }}>
+            <SectionTitle title={l10n.endCallToActionTitle} />
+            <GetStartedButton />
+          </Box>
+          <Box sx={{ pb: 16 }}>
+            <SectionTitle
+              anchor="team"
+              title={<ArrowDownwardOutlined />}
+              subtitle={l10n.teamSectionSubtitle}
+            />
+            <Stack gap={4} sx={grid(260)}>
+              {map(l10n.team, ({ avatar, name, title, github }) => (
+                <Button sx={{ p: 0 }} href={github}>
+                  <Card
+                    sx={{
+                      py: 6,
+                      width: "100%",
+                      height: "100%",
+                      color: "text.primary",
+                    }}
+                    image={
+                      <Avatar
+                        src={avatar}
+                        sx={{ mb: 4, width: 64, height: 64 }}
+                      />
+                    }
+                    title={name}
+                    subtitle={
+                      <span style={{ whiteSpace: "pre" }}>{title}</span>
+                    }
+                  />
+                </Button>
+              ))}
+            </Stack>
+            <Typography
+              variant="subtitle2"
+              color="text.secondary"
+              sx={{ py: 8, maxWidth: 720, mx: "auto" }}
+            >
+              {l10n.teamContributorTitle}
+            </Typography>
+            <Stack gap={4} sx={flex(150)}>
+              {map(l10n.contributors, (s) => (
+                <Typography color="text.primary" variant="subtitle2">
+                  {s}
+                </Typography>
+              ))}
+            </Stack>
+            <Typography
+              variant="subtitle2"
+              color="text.secondary"
+              sx={{ py: 8, maxWidth: 720, mx: "auto" }}
+            >
+              {l10n.teamSupporterTitle}
+            </Typography>
+            <Stack gap={4} sx={flex(150)}>
+              {map(l10n.supporters, (s) => (
+                <Typography color="text.primary" variant="subtitle2">
+                  {s}
+                </Typography>
+              ))}
+            </Stack>
           </Box>
-          <Footer />
         </Box>
+        <Footer />
       </Box>
-    </>
+    </Box>
   );
 }
 
diff --git a/src/theme/Root.js b/src/theme/Root.js
index debb8ca..8202d97 100644
--- a/src/theme/Root.js
+++ b/src/theme/Root.js
@@ -7,7 +7,7 @@ import { get, set } from "../components/storage";
 // Default implementation, that you can customize
 export default function Root({ children }) {
   const [mode, setMode] = useState(get("theme") || "light");
-  const theme = useMemo(() => makeTheme(mode), [mode]);
+  const theme = useMemo(() => makeTheme(mode, "deepPurple"), [mode]);
   useEffect(() => {
     setMode(get("theme") || "light");
   }, []);
diff --git a/static/img/gallery/astar.png b/static/img/gallery/astar.png
index c003495..6bfc8f3 100644
Binary files a/static/img/gallery/astar.png and b/static/img/gallery/astar.png differ
diff --git a/static/img/gallery/complex-view.png b/static/img/gallery/complex-view.png
index 416c821..5139f3f 100644
Binary files a/static/img/gallery/complex-view.png and b/static/img/gallery/complex-view.png differ
diff --git a/static/img/gallery/image-3.png b/static/img/gallery/image-3.png
index 6950ede..8dd63a9 100644
Binary files a/static/img/gallery/image-3.png and b/static/img/gallery/image-3.png differ
diff --git a/static/img/gallery/image-7.png b/static/img/gallery/image-7.png
index 6f8f250..ab6fd39 100644
Binary files a/static/img/gallery/image-7.png and b/static/img/gallery/image-7.png differ
diff --git a/static/img/gallery/mcp.png b/static/img/gallery/mcp.png
index 9e9d65b..b49c346 100644
Binary files a/static/img/gallery/mcp.png and b/static/img/gallery/mcp.png differ
diff --git a/static/img/gallery/network-bidirectional-a-star.png b/static/img/gallery/network-bidirectional-a-star.png
index 5fe7eb9..1945b64 100644
Binary files a/static/img/gallery/network-bidirectional-a-star.png and b/static/img/gallery/network-bidirectional-a-star.png differ
diff --git a/static/img/gallery/polyanya.png b/static/img/gallery/polyanya.png
index 4d48fbe..6ad074e 100644
Binary files a/static/img/gallery/polyanya.png and b/static/img/gallery/polyanya.png differ
diff --git a/static/img/gallery/room-detection.png b/static/img/gallery/room-detection.png
index bcfab0d..2853693 100644
Binary files a/static/img/gallery/room-detection.png and b/static/img/gallery/room-detection.png differ
diff --git a/static/img/gallery/temp/astar.png:Zone.Identifier b/static/img/gallery/temp/astar.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/static/img/gallery/temp/complex-view.png:Zone.Identifier b/static/img/gallery/temp/complex-view.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/static/img/gallery/temp/image-3.png:Zone.Identifier b/static/img/gallery/temp/image-3.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/static/img/gallery/temp/image-7.png:Zone.Identifier b/static/img/gallery/temp/image-7.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/static/img/gallery/temp/mcp.png:Zone.Identifier b/static/img/gallery/temp/mcp.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/static/img/gallery/temp/network-bidirectional-a-star.png:Zone.Identifier b/static/img/gallery/temp/network-bidirectional-a-star.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/static/img/gallery/temp/polyanya.png:Zone.Identifier b/static/img/gallery/temp/polyanya.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/static/img/gallery/temp/room-detection.png:Zone.Identifier b/static/img/gallery/temp/room-detection.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29