diff --git a/pages/about.html b/pages/about.html
index e69de29..7fbe01f 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>About</title>
+    <link rel="stylesheet" type="text/css" href="../styles/styles.css" />
+  </head>
+  <body>
+    <div class="whole-wrapper">
+      <div class="nav-wrapper">
+        <a class="home-link" href="/">Home</a>
+        <a class="about-link" href="/about">About</a>
+        <a class="news-link" href="/news">News</a>
+        <a class="contact-link" href="/contact">Contact</a>
+      </div>
+      <div class="about-title-wrapper">
+        <h1 class="about-title">About SapioChat</h1>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/styles/styles.css b/styles/styles.css
index 4ce5524..660c393 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,5 +1,6 @@
 body {
     font-family: monospace;
+    background-color: #f0f2f5;
 }
 
 .nav-wrapper {
@@ -84,12 +85,28 @@ body {
     padding: 15px;
     font-size: 1.1rem;
     background-color: #4af626;
-    color: #111;
     font-weight: bold;
 }
 
 .signup-link {
     text-decoration: none;
+    color: #111;
+}
+
+.signup-button:hover {
+    cursor: pointer;
+    top: -15px;
+    box-shadow: 2px 2px 2px blue;
+}
+
+.signup-link:hover {
+    cursor: pointer;
+}
+
+.loggin-submit:hover {
+    cursor: pointer;
+    top: -15px;
+    box-shadow: 2px 2px 2px #4af626;
 }
 
 .title-wrapper {
