diff --git a/dynmap.html b/dynmap.html
index 2c3e5ff..9d2c7a7 100644
--- a/dynmap.html
+++ b/dynmap.html
@@ -1,18 +1,25 @@
 <!DOCTYPE HTML>
 <link href="root.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-<body class="center"> <h1>Hi! Welcome to my Web Server!</h1>
-<nav class="center">
+<body class="center"> 
 
-<a href="index.html">Home</a>
-<a href="https://gitea.calebfontenot.com">Gitea</a>
-<a href="https://search.calebfontenot.com">SearXNG Instance</a>
-<a href="dynmap.html">Minecraft Server Dynamic Maps</a><li>
-<li>
-<a href="https://survival.calebfontenot.com">Survival Server</a>
-<a href="https://creative.calebfontenot.com">Creative Server</a>
-<a href="https://modded.calebfontenot.com">Modded Server</a>
-<a href="https://skyfactory.calebfontenot.com">Skyfactory Server</a>
+
+
+<nav>
+<h1>Hi! Welcome to my Web Server!</h1>
+<a class="button" href="index.html">Home</a>
+<a class="button" href="https://gitea.calebfontenot.com">Gitea</a>
+<a class="button" href="https://search.calebfontenot.com">SearXNG Instance</a>
+<a class="button" href="dynmap.html">Minecraft Server Dynamic Maps</a><li>
+</nav>
+<div id="wrapper">
+<ul>
+<a class="button" href="https://survival.calebfontenot.com">Survival Server</a>
+<a class="button" href="https://creative.calebfontenot.com">Creative Server</a>
+<a class="button" href="https://modded.calebfontenot.com">Modded Server</a>
+<a class="button" href="https://skyfactory.calebfontenot.com">Skyfactory Server</a>
+</ul>
+</div>
 </body>
 
 </html>
diff --git a/index.html b/index.html
index f761e53..bd68e1d 100644
--- a/index.html
+++ b/index.html
@@ -14,15 +14,15 @@
 
 
 <body class="center">
- <h1>Hi! Welcome to my Web Server!</h1> 
+<div id="wrapper">
 <nav>
-<a href="index.html">Home</a>
-<a href="https://gitea.calebfontenot.com">Gitea</a>
-<a href="https://search.calebfontenot.com">SearXNG Instance</a>
-<a href="dynmap.html">Minecraft Server Dynamic Maps</a>
-<a href="mario">Mario</a>
+<h1>Hi! Welcome to my Web Server!</h1> 
+<a class="button" href="index.html">Home</a>
+<a class="button" href="https://gitea.calebfontenot.com">Gitea</a>
+<a class="button" href="https://search.calebfontenot.com">SearXNG Instance</a>
+<a class="button" href="dynmap.html">Minecraft Server Dynamic Maps</a>
+<a class="button" href="mario">Mario</a>
 </nav> 
-    <div class="center">
 <p>Hi! My name is <mark>Caleb Fontenot.</mark> I am a software developer in my second semester at South Lousiana Community College.</p>
 <!--p>Below is Mr. Mouse absolutely jamming it</p>
 <!image src=https://files.calebfontenot.com/files/mrmouse.gif alt="Mr. Mouse">
@@ -47,7 +47,9 @@
 <footer>
 <p>Footer moment</p>
 </footer>
-</body>
 </div>
+</body>
+
+
 
 </html> 
diff --git a/root.css b/root.css
index 6a27392..09d8a05 100644
--- a/root.css
+++ b/root.css
@@ -14,33 +14,45 @@ body {
 	text-align: center;
 	color: #FFFFFF;
 }
-.center {
-	text-align: center;
+
+#wrapper { 
+		width: 1024px;
+		margin-left: auto;
+		margin-right: auto;
+			text-align: center;
 	background-color: #000000;
 	/* width: 90%; */
 	border-style: groove;
 	border-color: #000000;
+	
 }
+
 nav {
 	background-color: #333333;
 	border-style: inset;
 	border-color: #000000;
 	padding: none;
 }
-
-nav a {
+.button {
+	color: white;
+	text-decoration: none;
+	border-style: outset;
+	cursor: pointer;
+}
+	
+.button a {
 	color: #FFFFFF;
 	text-decoration: none;
 	border-style: outset;
 	cursor: pointer;
 }
-nav a:hover {
+.button a:hover {
 	border-style: inset;
 	
 }
 
 h1 { 
-	background-color: #444444;
+	/* background-color: #444444; */
 	padding: auto;
 	padding-left: 40px;
 	padding-right: 40px;
@@ -48,4 +60,21 @@ h1 {
 	padding-bottom: 20px;
 }
 
+ul {
+  list-style-type: none; /* Remove bullets */
+  padding: 0; /* Remove padding */
+  margin: 0; /* Remove margins */
+}
 
+
+@media only screen and (max-width: 1000px) {
+	#wrapper {
+		 width: 800px;
+	}
+}
+
+	
+	
+	
+	
+	
