diff --git a/public/vee.png b/public/vee.png
new file mode 100644
index 0000000..19c4d23
Binary files /dev/null and b/public/vee.png differ
diff --git a/src/components/Nav-bar.astro b/src/components/Nav-bar.astro
index 8cbbf96..1c12721 100644
--- a/src/components/Nav-bar.astro
+++ b/src/components/Nav-bar.astro
@@ -1,8 +1,7 @@
 ---
 import Button from "../components/navbutton.svelte"
-const pageTitle= Astro.props
 ---
-<a active=
+
 <div class="nav-links">
     <Button class="navbutton">
     <a href="/">Home</a>
diff --git a/src/components/friends.astro b/src/components/friends.astro
new file mode 100644
index 0000000..dfe218e
--- /dev/null
+++ b/src/components/friends.astro
@@ -0,0 +1,13 @@
+---
+---
+<section id="Friends">
+    <h2>Friends Sites!</h2>
+    <div>
+        <form action="https://google.com">
+        <button class="fbutton">
+                <img class="buttonimg" title="test" src="/public/vee.png">
+        </button>
+</form>
+</a>
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/components/navbutton.svelte b/src/components/navbutton.svelte
index f018bab..8351e9e 100644
--- a/src/components/navbutton.svelte
+++ b/src/components/navbutton.svelte
@@ -6,6 +6,7 @@
 </script>
 	<button on:click
 			on:mouseover
+			on:focus
 			on:mouseenter
 			on:mouseleave
 		{...buttonProps}>
@@ -16,4 +17,5 @@
  .navbutton {
 	
  }
+ .fri
 </style>
\ No newline at end of file
diff --git a/src/components/socials.astro b/src/components/socials.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 721a309..c982d0b 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -4,4 +4,4 @@ const pageTitle="About Me";
 ---
 <Layout pageTitle={pageTitle}>
     <h1>about me</h1>
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 325e07e..5747209 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,13 @@
 ---
 import Layout from "../layouts/Sitelayout.astro";
+import Friends from "../components/friends.astro"
+import Socials from "../components/socials.astro"
 const pageTitle="home";
 ---
 <Layout pageTitle={pageTitle}>
-    <h1>uwu</h1>
-</Layout>
\ No newline at end of file
+ <h2> Hi, I'm Stellaluna!</h2>
+    <body>
+        <Socials />
+        <Friends />
+    </body>
+</Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
index fc6c4f7..8434a6e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,9 @@
+
+@import url('https://fonts.cdnfonts.com/css/ocr-a-std');
 html {
-    background-color: #f1f5f9;
-    font-family: sans-serif;
+    background-color: darkorchid;
+font-style: normal;
+font-weight: 400;
   }
   
   body {
@@ -13,6 +16,8 @@ html {
   
   * {
     box-sizing: border-box;
+    font-family: 'OCR A Std', sans-serif;
+    
   }
   
   h1 {
@@ -21,7 +26,7 @@ html {
   }
   footer { 
     text-align: center;
-    background-color: rgba(127,2,177, 0.50);
+    background-color: orange;
     padding: 0.02rem;
 }
   
@@ -69,10 +74,22 @@ html {
   }
   .navbutton {
     border-radius: 30%;
-    background: darkorchid;
+    background: orange;
+    border-width: 3px;
   }
-  .navbutton a:hover, a:active
+  .navbutton:hover, .navbutton:active
 {
-  background-color: lightpink;
+  background-color: darkorange;
   border-radius: 30%;
-}
\ No newline at end of file
+}
+.fbutton {
+  border-radius: 100px;
+  border-width: 0px;
+}
+.buttonimg {
+  width: 50px;
+  margin-top: -5px;
+  margin-right: -5px;
+  margin-left: -5px;
+  margin-bottom: -8px;
+  border-radius: 50%;}
\ No newline at end of file
