diff --git a/index.html b/index.html
index 2c8d571..c095afc 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@ <h1 class="title">Notion.css</h1>
         use it to bring in all the elements you use in your Notion page to your HTML
     </p>
     <div style="display: flex;">
-        <a href="https://github.com/fillerInk/notion.css" target="_blank"><i class="fa fa-github" id='github' aria-hidden="true" style=" font-size: larger;"> GitHub</i></a>
+        <a href="https://github.com/fillerInk/notion.css" target="_blank" style="font-size: x-large; padding: auto 0;"><i class="fa fa-github" id='github' aria-hidden="true" style=" font-size: xxx-large; margin-right:5px;"></i>GitHub</a>
     </div>
     <h2 class="title">Installation</h2>
     <p>Import the CSS files by pasting this into the <code>&lt;head&gt;</code> of your HTML</p>
@@ -29,7 +29,7 @@ <h4>Heading 4</h4>
     <h5>Heading 5</h5>
     <h6>Heading 6</h6>
 
-    <h3>Subtitles</h3>
+    <h3 class="title">Subtitles</h3>
     <p>You can add subtitles by adding the subtitle class to your headings like so</p>
     <div class="code">
         &lt;h1 class="subtitle"&gt;This is a subtitle&lt;/h1&gt;
@@ -44,7 +44,7 @@ <h4 class="subtitle">Subtitle 4</h4>
     <h5 class="subtitle">Subtitle 5</h5>
     <h6 class="subtitle">Subtitle 6</h5>
 
-    <h3>Typography</h3>
+    <h3 class="title">Typography</h3>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, 
         quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit.
@@ -55,7 +55,7 @@ <h3>Typography</h3>
         per conubia nostra, per inceptos himenaeos. <br> <strong>This is some strong text,</strong> this is 
         normal, <b>this is bold,</b> <em>and this is in italics!</em> And, <a href="/">here</a>'s a link. 
     </p>
-    <h3>Buttons</h3>
+    <h3 class="title">Buttons</h3>
     <p>Here are some buttons</p>
 
     <div class="code">
@@ -64,11 +64,11 @@ <h3>Buttons</h3>
     <button>Click Me!</button>
 
     <div class="code">
-        &lt;button class="button-primary"&gt;Click Me!&lt;/button&gt;
+        &lt;button class="primary"&gt;Click Me!&lt;/button&gt;
     </div>
-    <button class="button-primary">Click Me!</button>
+    <button class="primary">Click Me!</button>
 
-    <h3>Form Elements</h3>
+    <h3 class="title">Form Elements</h3>
     <p>Here's a form</p>
 
     <form action="/">
@@ -94,7 +94,7 @@ <h3>Form Elements</h3>
         <label for="status">I understand</label><br>
     </form>
 
-    <h3>Code</h3>
+    <h3 class="title">Code</h3>
     <p>You can add blocks of code in your page like so</p>
     <div class="code">
         &lt;div class="code"&gt; </br>
@@ -102,9 +102,18 @@ <h3>Code</h3>
         &lt;/div&gt;
     </div>
 
-    <h3>Navigation</h3>
+    <h3 class="title">Navigation</h3>
     <p>You can eaily create a navigation bar</p>
 
+    <div class="code">
+        &lt;div class="topnav"&gt; </br>
+             &lt;a class="active" href="#home"> Home &lt;/a&gt; <br>
+             &lt;a href="#news"> News &lt;/a&gt;<br>
+             &lt;a href="#contact"> Contact &lt;/a&gt;<br>
+             &lt;a href="#about"> About &lt;/a&gt;<br>
+        &lt;/div&gt;
+    </div>
+
     <div class="topnav">
         <a class="active" href="#home">Home</a>
         <a href="#news">News</a>
@@ -114,8 +123,8 @@ <h3>Navigation</h3>
 
 
 
-    <h3>Others</h3>
-    Here's a list
+    <h3 class="title">Others</h3>
+    <p>Here's a list</p>
     <ul>
         <li>With</li>
         <li>some</li>
@@ -153,15 +162,20 @@ <h3>Others</h3>
     <p>Quotes</p>
     <p>You can add blocks of code in your page like so</p>
     <div class="code">
-        &lt;div class="quote"&gt; </br>
+        &lt;blockquote&gt; </br>
         I don't like sand. It's coarse, and rough, and irritating, and it gets everywhere. - Anakin Skywalker <br>
-        &lt;/div&gt;
+        &lt;/blockquote&gt;
     </div>
 
-    <div class="quote">
-        I don't like sand. It's coarse, and rough, and irritating, and it gets everywhere. - Anakin Skywalker
-    </div>
+    <blockquote class="quote">
+        I don't like sand. It's coarse, and rough, and irritating, and it gets everywhere - Anakin Skywalker
+    </blockquote>
+
+    <h3>Projects using Notion.css</h3>
 
+    <ul>
+        <li>Messier Dex, an encyclopedia and viewing guide for the Messier Objects</li>
+    </ul>
 
     <hr>
     <p>Notion.css is made by <a href="https://sreeram.codes" target="_blank">@fillerInk</a>.</p>
diff --git a/src/notion.css b/src/notion.css
index 422c141..dbbb4c5 100644
--- a/src/notion.css
+++ b/src/notion.css
@@ -1,5 +1,178 @@
+a {
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 20px;
+    line-height: 150%;
+    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
+      "Helvetica Neue", sans-serif;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 400;
+    text-decoration: underline;
+  }
+
+body {
+  font-family: inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+    "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: 500;
+}
+
 .title {
-  text-decoration: underline;
+  width: 100%;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #37352f;
+}
+
+.subtitle {
+  color: rgba(0, 0, 0, 0.6);
+  font-weight: 500;
+}
+
+
+
+h1 {
+  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 52px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+h2 {
+  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 30px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+h3 {
+  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 25px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+h4 {
+  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+h5 {
+  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 18px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+h6 {
+  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 700;
+  line-height: 1;
+}
+
+p {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 20px;
+  line-height: 150%;
+  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
+    "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+}
+
+
+
+button {
+  background-color: #f0f2f4;
+  color: #404b59;
+  border: 1px solid #f0f2f4;
+  box-shadow: rgba(15, 15, 15, 0.1) 0px 1px 2px;
+  border-radius: 6px;
+  align-items: center;
+  height: fit-content;
+  min-width: 180px;
+  font-size: large;
+  font-weight: 500;
+  padding: 12px;
+}
+
+button:hover {
+  background-color: #66778c;
+  color: #fff;
+}
+
+button.primary {
+  background-color: #e16259;
+  color: #fff;
+  border: 1px solid rgb(190, 86, 67);
+  border-radius: 3px;
+  align-items: center;
+  height: fit-content;
+  min-width: 180px;
+  font-size: large;
+  font-weight: 500;
+  padding: 12px;
+}
+
+button.primary:hover {
+  background-color: #cf534a;
+  color: #fff;
+}
+
+.code {
+  background-color: #f1f1f1;
+  padding: 15px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 17px;
+  font-family: monospace;
+  border-radius: 3px;
+}
+
+blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid #ccc;
+  margin: 1.5em 10px;
+  padding: 40px 20px;
+  quotes: "\201C""\201D""\2018""\2019";
+  font-size: 20px;
+  line-height: 150%;
+  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
+    "Helvetica Neue", Arial, sans-serif;
+  font-style: italic;
+}
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+blockquote p {
+  display: inline;
 }
 
 .topnav {
@@ -10,7 +183,7 @@
 /* Style the links inside the navigation bar */
 .topnav a {
   float: left;
-  color: #37352F;
+  color: #37352f;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
@@ -19,13 +192,13 @@
 
 /* Add a color to the active/current link */
 .topnav a.active {
-    background-color: #fff;
-    color: #37352F;
-  }
-  
+  background-color: #fff;
+  color: #37352f;
+}
+
 /* Change the color of links on hover */
 .topnav a:hover {
+  background-size: 1px;
   background-color: rgba(55, 53, 47, 0.08);
-  color: #37352F;
+  color: #37352f;
 }
-