diff --git a/src/index.html b/src/index.html
index 2ef7983..e5f436d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,20 +1,97 @@
 <!DOCTYPE html>
-<html lang="en">
-    <head>
-        <title>Cian's Game Dev Blog</title>
-    </head>
-    <body>
-        <div>
-            <h1>My Game Development Diary </h1>
-        
-    </div>
-    <div>
-    <h2> <em> 1st Meeting - 31/1/25  </em>  </h2>
+<html>
+<head>
+            <title> Cian’s Website </title> 
+</head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+* {box-sizing: border-box}
 
-    <p>First meeting was spent figuring out the roles people wanted, I decided to give myself the role of Generalist as i dont excell in any given skill needed for the development of a game, this gives me a great chance to learn new skills and get better at the ones im familiar with like programing from last semester. After all other roles were given out, we decided to gather everyones thoughts on what game engine we were going to use,
-        After the discssion we decided on the use of Godot this mean tfor any programming I was going to do i would have to learn a new langague as Godot offers GDScript or C# this intrigues me as i learned Java last Semester and that is the only langauge i am familiar with, this measn i can take this oppurtunity and learn a new programming langauge.
-    We then disccesed the programing langague and decided that we should use C# this was a descion because some members of the group were only familiar with java and C# would be close to Java so there would'nt be much of a learning curve.        </p>
+/* Set height of body and the document to 100% */
+body, html {
+  height: 100%;
+  margin: 0;
+  font-family: Arial;
+}
+
+/* Style tab links */
+.tablink {
+  background-color: #555;
+  color: white;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  font-size: 17px;
+  width: 25%;
+}
+
+.tablink:hover {
+  background-color: #777;
+}
+
+/* Style the tab content (and add height:100% for full page content) */
+.tabcontent {
+  color: white;
+  display: none;
+  padding: 100px 20px;
+  height: 100%;
+}
+
+#Home {background-color: red;}
+#News {background-color: green;}
+#Contact {background-color: blue;}
+#Links {background-color: white;}
+</style>
+</head>
+<body>
+
+<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
+<button class="tablink" onclick="openPage('Blogs', this, 'green')" id="defaultOpen">News</button>
+<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
+<button class="tablink" onclick="openPage(Links, this, 'white')">Links</button>
+
+<div id="Home" class="tabcontent">
+  <h3>Home</h3>
+  <p>Home is where the heart is..</p>
 </div>
 
-    </body>
+<div id="Blogs" class="tabcontent">
+  <h3>Blogs</h3>
+  <p>Here is where my Blogs are, Feel free to read any of them!</p> 
+</div>
+
+<div id="Contact" class="tabcontent">
+  <h3>Contact</h3>
+  <p>Get in touch, via E-mail, Phone or Text</p>
+</div>
+
+<div id="Links" class="tabcontent">
+  <h3>Links</h3>
+  <p>Here are the Links that helped me </p>
+</div>
+
+
+
+<script>
+function openPage(pageName,elmnt,color) {
+  var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
+  tablinks = document.getElementsByClassName("tablink");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].style.backgroundColor = "";
+  }
+  document.getElementById(pageName).style.display = "block";
+  elmnt.style.backgroundColor = color;
+}
+
+// Get the element with id="defaultOpen" and click on it
+document.getElementById("defaultOpen").click();
+</script>
+   
+</body>
 </html>
