diff --git a/src/app.html b/src/app.html
index 9f45b92..a2f1cd3 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="stylesheet" type="text/css" href="vars.css">
 		<meta name="viewport" content="width=device-width" />
 		<meta name="color-scheme" content="dark" />
 		%sveltekit.head%
@@ -23,24 +24,12 @@
 				--font: Consolas, 'Cascadia Code';
 
 				background: var(--bg);
+				color: var(--fg);
 				font-family: var(--font);
 				font-size: 110%;
-				color: var(--fg);
 				margin: 2rem;
 			}
 
-			nav {
-				position: relative;
-				overflow:visible;
-				display: flex;
-				justify-content: center;
-				gap: 1.5em;
-				padding: 0em 0em 1.5em 0em;
-				z-index: 2;
-				height: 1.5em;
-				border-radius: 4px;
-			}
-
 			a {
 				text-decoration: none;				
 				position: relative;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4b6278b..cfc934d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,22 @@
+<style>
 
+    .main-container {
+        margin-left: 10%;
+        margin-right: 10%;
+    }
+
+    nav {
+        position: relative;
+        overflow:visible;
+        display: flex;
+        justify-content: center;
+        gap: 1.5em;
+        padding: 0em 0em 1.5em 0em;
+        z-index: 2;
+        height: 1.5em;
+        border-radius: 4px;
+    }
+</style>
 
 <nav>
     <a href = "test">//tab</a>
@@ -6,4 +24,8 @@
     <a href = "test">//tab</a>
 </nav>
 
-<slot />
\ No newline at end of file
+<div class="main-container">
+
+    <slot />
+
+</div>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5982b0a..f9bcadc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,8 @@
+<script>
+    import Main from './Main.svelte';
+</script>
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<Main></Main>
\ No newline at end of file
diff --git a/src/routes/main.svelte b/src/routes/main.svelte
new file mode 100644
index 0000000..8830ed6
--- /dev/null
+++ b/src/routes/main.svelte
@@ -0,0 +1,19 @@
+<script>
+
+</script>
+
+<style>
+    .card {
+        background-color: var(--bg-grad);
+        border-radius: 1em;
+        padding: .1em 2em .1em 2em;
+    }
+    h1 {
+        color: var(--red);
+    }
+</style>
+
+<div class="card">
+    <h1>This is a test card</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vivamus at augue eget arcu dictum varius duis at consectetur. Enim lobortis scelerisque fermentum dui. Eu mi bibendum neque egestas congue quisque egestas. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Eget est lorem ipsum dolor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Risus quis varius quam quisque id diam vel quam. Arcu non sodales neque sodales ut. Malesuada fames ac turpis egestas integer eget aliquet nibh. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.</p>
+</div>
\ No newline at end of file
