diff --git a/src/components/Nav-bar.astro b/src/components/Nav-bar.astro
index 88b961a..8cbbf96 100644
--- a/src/components/Nav-bar.astro
+++ b/src/components/Nav-bar.astro
@@ -1,8 +1,19 @@
 ---
+import Button from "../components/navbutton.svelte"
+const pageTitle= Astro.props
 ---
+<a active=
 <div class="nav-links">
+    <Button class="navbutton">
     <a href="/">Home</a>
-    <a href="/about-me">About Me</a>
+</Button>
+<Button class="navbutton">
+    <a href="/about">About Me</a>
+</Button>
+<Button class="navbutton">
     <a href="/blog">Blog</a>
+</Button>
+<Button class="navbutton">
     <a href="https://youtube.com/watch?v=brwS_ZmVaRc">Caramelldansen</a>
+</Button>
 </div>
\ No newline at end of file
diff --git a/src/components/footer.astro b/src/components/footer.astro
new file mode 100644
index 0000000..9e1b122
--- /dev/null
+++ b/src/components/footer.astro
@@ -0,0 +1,7 @@
+---
+---
+<footer>
+    <div class="footer">
+        <a href="https://git.lgbt/elh/elh.gay">Source Code</a>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/src/components/navbutton.svelte b/src/components/navbutton.svelte
new file mode 100644
index 0000000..f018bab
--- /dev/null
+++ b/src/components/navbutton.svelte
@@ -0,0 +1,19 @@
+<script>
+	
+	let buttonProps = {
+	class:[$$restProps.class]
+	}
+</script>
+	<button on:click
+			on:mouseover
+			on:mouseenter
+			on:mouseleave
+		{...buttonProps}>
+			<slot/>
+	</button>
+
+<style>
+ .navbutton {
+	
+ }
+</style>
\ No newline at end of file
diff --git a/src/layouts/Sitelayout.astro b/src/layouts/Sitelayout.astro
index 8926653..9ae0ab7 100644
--- a/src/layouts/Sitelayout.astro
+++ b/src/layouts/Sitelayout.astro
@@ -1,7 +1,8 @@
 ---
 import Header from "../components/header.astro";
+import Footer from "../components/footer.astro"
 import '../styles/global.css';
-const { pageTitle} = Astro.props
+const {pageTitle} = Astro.props
 ---
 <html lang="en">
     <head>
@@ -13,7 +14,9 @@ const { pageTitle} = Astro.props
       </head>
       <body>
         <Header/>
-        <h1>{pageTitle}</h1>
         <slot />
       </body>
+      <footer>
+        <Footer/>
+      </footer>
 </html>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
new file mode 100644
index 0000000..721a309
--- /dev/null
+++ b/src/pages/about.astro
@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Sitelayout.astro"
+const pageTitle="About Me";
+---
+<Layout pageTitle={pageTitle}>
+    <h1>about me</h1>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
new file mode 100644
index 0000000..c7b1747
--- /dev/null
+++ b/src/pages/blog.astro
@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Sitelayout.astro"
+const pageTitle="Blog";
+---
+<Layout pageTitle={pageTitle}>
+    <h1>Blog</h1>
+</Layout>
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 2a1801b..fc6c4f7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -19,6 +19,11 @@ html {
     margin: 1rem 0;
     font-size: 2.5rem;
   }
+  footer { 
+    text-align: center;
+    background-color: rgba(127,2,177, 0.50);
+    padding: 0.02rem;
+}
   
   /* nav styles */
   
@@ -41,10 +46,7 @@ html {
     text-transform: uppercase;
   }
   
-  .nav-links a:hover,
-  .nav-links a:focus {
-    background-color: #ff9776;
-  }
+
   
   .expanded {
     display: unset;
@@ -64,4 +66,13 @@ html {
       padding: 15px 20px;
     }
   
-  }
\ No newline at end of file
+  }
+  .navbutton {
+    border-radius: 30%;
+    background: darkorchid;
+  }
+  .navbutton a:hover, a:active
+{
+  background-color: lightpink;
+  border-radius: 30%;
+}
\ No newline at end of file
