diff --git a/index.html b/index.html
index 939899f..a5dfe2a 100644
--- a/index.html
+++ b/index.html
@@ -28,15 +28,17 @@
 <body>
     <header>
         <nav>
-            <ul>
-                <li><a href="/">Home</a></li>
-                <li><a href="services.html">Services</a></li>
-                <li><a href="contact.html">Contact</a></li>
+            <ul class="nav-list">
+                <li class="nav-item logo"><img src="images/logo.png" alt="SynBio logo"></li>
+                <li class="nav-item"><a href="/">Home</a></li>
+                <li class="nav-item"><a href="services.html">Services</a></li>
+                <li class="nav-item"><a href="contact.html">Contact</a></li>
             </ul>
         </nav>
     </header>
+
     <main>
-        <aside><img src="images/logo.png" alt="SynBio logo"></aside>
+        <!-- <aside><img src="images/logo.png" alt="SynBio logo"></aside> -->
         <article>
             <img src="images/banner.png" class="banner" alt="SynBio Ltd" />
             <h1>Welcome to SynBio </h1>
@@ -56,4 +58,4 @@ <h1>Welcome to SynBio </h1>
     </footer>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/site.css b/site.css
index 70d47a8..18bcf03 100644
--- a/site.css
+++ b/site.css
@@ -26,7 +26,7 @@ header {
     padding: 10px;
 }
 
-nav a:visited,
+/* nav a:visited,
 nav a:link {
     color: #fff;
     text-decoration: none;
@@ -41,14 +41,69 @@ nav>ul>li {
     display: inline-block;
     list-style: none;
     margin: 0 5px 0 5px;
+} */
+/* Reset default list styles */
+ul.nav-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
 }
 
-main {
+/* Style the navigation bar */
+.navbar {
+    background-color: #a493c0;
+    padding: 10px;
+}
+
+/* Style the navigation items */
+.nav-item {
+    display: inline-block;
+    list-style: none;
+    margin: 0 5px 0 5px;
+    margin-left: 150px;
+}
+
+/* Style the logo */
+.nav-item.logo img {
+    height: 40px;
+    /* Adjust the height as needed */
+    vertical-align: middle;
+}
+
+.nav-item a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.nav-item a:visited,
+.nav-item a:link {
+    color: #fff;
+}
+
+.nav-item a:hover {
+    color: #f6aeae;
+    /* Change color on hover */
+}
+/* main {
     display: block;
     background-image: url("images/background.png");
     padding-top: 3em;
     padding-bottom: 3em;
     min-height: 85%;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+} */
+main {
+    display: flex;
+    justify-content: center;
+    /* Center horizontally */
+    align-items: center;
+    /* Center vertically */
+    background-image: url("images/background.png");
+    padding-top: 3em;
+    padding-bottom: 3em;
+    min-height: 85%;
 }
 
 footer {
@@ -121,4 +176,4 @@ article {
     border: solid 1px #f6aeae;
     border-radius: 3px;
     color: #fff;
-}
\ No newline at end of file
+}
