diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..a7be4d0
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,22 @@
+:root {
+  --dark: #000000;
+
+  --headingFont: Arial, Helvetica, sans-serif;
+  --bodyFont: Arial, Helvetica, sans-serif;
+  --baseFontSize: 100%;
+  --h1: 3.052rem;
+  --h2: 2.441rem;
+  --h3: 1.953rem;
+  --h4: 1.563rem;
+  --h5: 1.25rem;
+  --h6: 1.8rem;
+  --bodyTextSize: 1.8rem;
+  --smallText: 1.44rem;
+  --lineHeight: 1.75;
+}
+
+#svelte {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
diff --git a/src/app.html b/src/app.html
index 84d71b4..f479f6a 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,6 +7,6 @@
 		%svelte.head%
 	</head>
 	<body>
-		<div>%svelte.body%</div>
+		<div id="svelte">%svelte.body%</div>
 	</body>
 </html>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
new file mode 100644
index 0000000..7c77763
--- /dev/null
+++ b/src/routes/__layout.svelte
@@ -0,0 +1,84 @@
+<script>
+  import '../app.css';
+</script>
+
+<header>
+  <h1>Svelte 3D</h1>
+  <nav>
+    <a href="/cubes">Cubes</a>
+    <a href="/star-canvas">Rotating Star</a>
+    <a href="/playcube">Cube</a>
+    <a href="/contributions">Contributions</a>
+    <a href="/svg3D">SVG Example</a>
+    <a href="/text3D">Text Example</a>
+    <a href="/star">Star</a>
+  </nav>
+</header>
+
+<main>
+  <slot />
+</main>
+
+<style>
+  :global(*, *::before, *::after) {
+    margin: 0;
+    box-sizing: inherit;
+  }
+
+  :global(html) {
+    font-size: 62.5%;
+    box-sizing: border-box;
+  }
+
+  :global(p) {
+    word-wrap: normal;
+    font-size: var(--bodyTextSize);
+    color: var(--lightShade);
+  }
+
+  :global(li) {
+    word-wrap: normal;
+    font-size: var(--bodyTextSize);
+    color: var(--lightShade);
+  }
+
+  header {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    width: 100vw;
+    position: absolute;
+    background: rgb(141, 153, 158);
+    padding: 0.5rem;
+    z-index: 10;
+  }
+
+  @media (max-width: 650px) {
+    header {
+      align-content: center;
+      display: grid;
+      justify-items: center;
+      grid-template-columns: 1fr;
+    }
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+  }
+
+  nav a {
+    position: relative;
+    font-size: var(--bodyTextSize);
+    text-decoration: underline;
+    color: var(--dark);
+  }
+
+  nav a:hover::after {
+    transform: scale(1);
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/contributions.svelte b/src/routes/contributions.svelte
index 225625f..efb2f71 100644
--- a/src/routes/contributions.svelte
+++ b/src/routes/contributions.svelte
@@ -36,7 +36,7 @@
       position={[Math.floor(index / rows), contribution / 2, index % rows]}
     />
   {/each}
-  <SC.PerspectiveCamera position={[15, 15, 15]} />
+  <SC.PerspectiveCamera position={[20, 20, 50]} />
   <SC.OrbitControls />
   <SC.AmbientLight intensity={0.5} />
   <SC.DirectionalLight intensity={1} position={[3, 5, -4]} />
@@ -45,6 +45,16 @@
 <style>
   .controls {
     position: absolute;
+    bottom: 0;
+    margin: 1rem;
     z-index: 10;
   }
+
+  button {
+    border-radius: 10px;
+    background: aqua;
+    border: none;
+    padding: 1rem;
+    text-transform: uppercase;
+  }
 </style>
diff --git a/src/routes/cubes.svelte b/src/routes/cubes.svelte
new file mode 100644
index 0000000..08e59bb
--- /dev/null
+++ b/src/routes/cubes.svelte
@@ -0,0 +1,31 @@
+<script>
+  import * as SC from 'svelte-cubed';
+  import * as THREE from 'three';
+  import * as PE from 'svelte-cannon';
+  import Box from '$lib/Box.svelte';
+
+  let count = 1;
+</script>
+
+<svelte:window on:click={() => count += 1} />
+
+<PE.World gravity={[0, -9.8 ,0]}>
+  <SC.Canvas antialias shadows>
+    <PE.Body mass={0} rotation={[-Math.PI / 2, 0, 0]}>
+      <PE.Plane />
+    </PE.Body>
+    <SC.Mesh
+      receiveShadow
+      geometry={new THREE.PlaneGeometry(50, 50)}
+      rotation={[-Math.PI / 2, 0, 0]}
+      material={new THREE.MeshStandardMaterial({ color: "grey"})}
+    />
+    {#each {length: count } as _}
+      <Box />
+    {/each}
+    <SC.DirectionalLight intensity={1} position={[15,15,15]} shadow={{ mapSize: [2048, 2048]}} />
+    <SC.AmbientLight intensity={1} />
+    <SC.PerspectiveCamera position={[ 2, 2, 15 ]} target={[0,0,0]} />
+    <SC.OrbitControls />
+  </SC.Canvas>
+</PE.World>
\ No newline at end of file
diff --git a/src/routes/playcube.svelte b/src/routes/playcube.svelte
index 9c329b1..456c24e 100644
--- a/src/routes/playcube.svelte
+++ b/src/routes/playcube.svelte
@@ -17,14 +17,15 @@
 <svelte:window on:click={() => { isActive = !isActive }} />
 
 <div class="controls">
-  <label>Width: 
-    <input type="range" min={0.1} max={3} step={0.1} bind:value={width} />
+  <h1>Modify Cube Size:</h1>
+  <label for="width">Width:
+    <input id="width" name="width" type="range" min={0.1} max={3} step={0.1} bind:value={width} />
   </label>
-  <label>Height: 
-    <input type="range" min={0.1} max={3} step={0.1} bind:value={height} />
+  <label for="height">Height:
+    <input id="height" name="height" type="range" min={0.1} max={3} step={0.1} bind:value={height} />
   </label>
-  <label>Depth: 
-    <input type="range" min={0.1} max={3} step={0.1} bind:value={depth} />
+  <label for="depth">Depth:
+    <input id="depth" name="depth" type="range" min={0.1} max={3} step={0.1} bind:value={depth} />
   </label>
 </div>
 
@@ -44,10 +45,17 @@
 
 <style>
   .controls {
+    display: grid;
+    gap: 2rem;
+    bottom: 0;
+    margin: 2rem;
     position: absolute;
     z-index: 10;
   }
   label {
-    display: block;
+    font-size: var(--bodyTextSize);
+    display: flex;
+    place-content: center;
+    place-items: center;
   }
 </style>
\ No newline at end of file
diff --git a/src/routes/star_canvas.svelte b/src/routes/star-canvas.svelte
similarity index 100%
rename from src/routes/star_canvas.svelte
rename to src/routes/star-canvas.svelte
diff --git a/src/routes/star.svelte b/src/routes/star.svelte
index 0001a89..6aab1bf 100644
--- a/src/routes/star.svelte
+++ b/src/routes/star.svelte
@@ -12,21 +12,30 @@
   }
 </script>
 
-<header>
-  <h1>Star World</h1>
-</header>
+<div class="star-container">
+  <div class="star-world">
+    <h2>Star World</h2>
+  </div>
 
-<div style:position="relative">
-  {#if isStar}
-    <div class="star" out:fly={{ opacity: 0, y: -100, duration: 3000 }}>
-      <Star />
-    </div>
-  {/if}
-  <button on:click={hitButton}>Level Up</button>
+  <div style:position="relative">
+    {#if isStar}
+      <div class="star" out:fly={{ opacity: 0, y: -100, duration: 3000 }}>
+        <Star />
+      </div>
+    {/if}
+    <button on:click={hitButton}>Level Up</button>
+  </div>
 </div>
 
 <style>
-  header {
+  .star-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%);
+  }
+  
+  .star-world {
     display: flex;
     font-family: Arial, Helvetica, sans-serif;
     margin-bottom: 60px;
diff --git a/src/routes/svg3D.svelte b/src/routes/svg3D.svelte
index 59d00cd..3c8237f 100644
--- a/src/routes/svg3D.svelte
+++ b/src/routes/svg3D.svelte
@@ -27,16 +27,19 @@ x<script>
 </SC.Canvas>
 
 <div class="controls">
+  <h1>Rotation Controls:</h1>
   <label for="x">X: <input id="x" name="x" type="range" bind:value={x} min={0} max={5} step={0.01} /></label>
   <label for="y">Y: <input id="y" name="y" type="range" bind:value={y} min={0} max={5} step={0.01} /></label>
   <label for="z">Z: <input id="z" name="z" type="range" bind:value={z} min={0} max={5} step={0.01} /></label>
 </div>
 
 <style>
-  .controls { 
+  .controls {
+    display: grid;
+    gap: 1rem;
     position: absolute;
-    top: 0;
-    left: 0;
+    bottom: 0%;
+    margin: 1rem;
     z-index: 10;
   }
 </style>
\ No newline at end of file
diff --git a/src/routes/text3D.svelte b/src/routes/text3D.svelte
index 02cdcaf..b52a19f 100644
--- a/src/routes/text3D.svelte
+++ b/src/routes/text3D.svelte
@@ -6,7 +6,7 @@
   import typeface from '@compai/font-mako/data/typefaces/mako-normal-400.json';
 
   let font;
-  let text = "Level Up";
+  let text = "Test me out!!";
   let loader = new FontLoader();
 
   onMount(() => {
@@ -22,17 +22,20 @@
       height: 10
     }) }
   />
-  <SC.PerspectiveCamera position={[ 10, 0, 100 ]} />
+  <SC.PerspectiveCamera position={[ 50, 50, 150 ]} />
   <SC.OrbitControls />
 </SC.Canvas>
 
-<input type="text" bind:value={text} />
+<label for="3DText">
+  Enter text:
+  <input id="3DText" name="3DText" type="text" bind:value={text} />
+</label>
 
 <style>
-  input { 
+  label {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 20%;
+    right: 50%;
     z-index: 10;
   }
 </style>
\ No newline at end of file
