diff --git a/assets/noise.svg b/assets/noise.svg
new file mode 100644
index 0000000..2b01408
--- /dev/null
+++ b/assets/noise.svg
@@ -0,0 +1,12 @@
+<!-- see also: https://grainy-gradients.vercel.app/ -->
+<svg viewBox='0 0 4000 4000' xmlns='http://www.w3.org/2000/svg'>
+    <filter id='noiseFilter'>
+        <feTurbulence
+                type='fractalNoise'
+                baseFrequency='0.62'
+                numOctaves='3'
+                stitchTiles='stitch'/>
+    </filter>
+
+    <rect width='100%' height='100%' filter='url(#noiseFilter)'/>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 0177908..8c1ad6b 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <link rel="stylesheet" href="/src/App.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>cblt-website</title>
     </head>
diff --git a/src/App.css b/src/App.css
index 5be28bf..e34b48b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -48,8 +48,36 @@
     font-display: swap;
 }
 
-:root {
-    font-family: veramono, monospace;
-    background: #141516;
+#root {
+    position: absolute;
+    overflow: scroll;
     height: 100%;
+    width: 100%;
+}
+
+html {
+    min-height: 100%;
+}
+
+body {
+    font-family: veramono, monospace;
+    height: 100%;
+
+    filter: contrast(400%) brightness(1000%);
+    background: #190a52;
+    background:
+            linear-gradient(177deg, rgba(25, 10, 82, 1) 0%, rgba(29, 0, 43, 0) 100%),
+            url("/assets/noise.svg"),
+            rgba(29, 0, 43, 1);
+    background-blend-mode: overlay;
+    position: absolute;
+    isolation: isolate;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}
+
+#background {
+
 }
diff --git a/src/App.tsx b/src/App.tsx
index 73673e3..dc2c433 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,3 @@
-import './App.css';
 import { Card, CardContent, Container, ThemeProvider, Typography } from '@mui/material';
 import { Theme } from './Theme.ts';
 
@@ -8,8 +7,12 @@ function App() {
             <ThemeProvider theme={Theme}>
                 <Container>
                     <Card>
-                        <CardContent>
-                            <Typography fontSize={36} fontFamily='hammersmith-one'>
+                        <CardContent sx={{ height: '2000px' }}>
+                            <Typography
+                                // sx={(theme) => ({ color: theme.palette.text.secondary })}
+                                fontSize={36}
+                                fontFamily='hammersmith-one'
+                            >
                                 Hello, World!
                             </Typography>
                         </CardContent>
diff --git a/src/Theme.ts b/src/Theme.ts
index 4662ddb..c6d3fc5 100644
--- a/src/Theme.ts
+++ b/src/Theme.ts
@@ -6,5 +6,8 @@ export const Theme = createTheme({
         primary: {
             main: '#b9121b',
         },
+        text: {
+            primary: '#b5b5b5',
+        },
     },
 });
