diff --git a/src/base.css b/src/base.css
new file mode 100644
index 0000000..a71bb08
--- /dev/null
+++ b/src/base.css
@@ -0,0 +1,16 @@
+* {
+    margin: 0;
+}
+
+body {
+    background-image: url($lib/assets/img/bg.webp);
+    background-size: 256px;
+
+    color: #fefefe;
+
+    
+}
+
+.window {
+    border: solid 2px rgba(222,222,108,1);
+}
\ No newline at end of file
diff --git a/src/lib/assets/img/bg.webp b/src/lib/assets/img/bg.webp
new file mode 100644
index 0000000..e3214ce
Binary files /dev/null and b/src/lib/assets/img/bg.webp differ
diff --git a/src/lib/assets/img/star.gif b/src/lib/assets/img/star.gif
new file mode 100644
index 0000000..7b73090
Binary files /dev/null and b/src/lib/assets/img/star.gif differ
diff --git a/src/lib/components/banners.svelte b/src/lib/components/banners.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/billboard.svelte b/src/lib/components/billboard.svelte
new file mode 100644
index 0000000..56a3211
--- /dev/null
+++ b/src/lib/components/billboard.svelte
@@ -0,0 +1,25 @@
+<script>
+    import star from "$lib/assets/img/star.gif"
+    // import quote from randomquote function
+</script>
+
+<div class="window">
+    <div id="quote">
+        <img src="{star}" alt=""/>
+        <p>meowwww</p>
+        <img src="{star}" alt=""/>
+    </div>
+</div>
+
+<style>
+    #quote {
+        display: flex;
+        line-height: 32px;
+        margin: 8px 0 8px 0;
+
+        justify-content: center;
+    }
+    img {
+        margin: 0 8px 0 8px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/blinkies.svelte b/src/lib/components/blinkies.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/title.svelte b/src/lib/components/title.svelte
new file mode 100644
index 0000000..f10c173
--- /dev/null
+++ b/src/lib/components/title.svelte
@@ -0,0 +1,9 @@
+<p>welcome to...</p>
+<h1>BANII.CAFE</h1>
+
+<style>
+    h1 {
+        background: linear-gradient(90deg,#dede6c,#dede6c 25%,#00d4ff00);
+        color: black;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 44c8aec..2789e65 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.ico';
+	//TODO - make function to handle what stylesheet is used
+	import "../base.css"
 
 	let { children } = $props();
 </script>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc88df0..41a1dce 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,10 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+    import Title from "$lib/components/title.svelte";
+    import Billboard from "$lib/components/billboard.svelte";
+</script>
+
+<header>
+    <Title/>
+    <Billboard/>
+</header>
+