diff --git a/_includes/components/alerts.html b/_includes/components/alerts.html
index 9f2aba5..c5ef1f7 100644
--- a/_includes/components/alerts.html
+++ b/_includes/components/alerts.html
@@ -1,18 +1,27 @@
-<div class="page-header mb-4 mt-5">
+<div class="page-header mb-4">
     <h2 id="alerts">Alerts</h2>
     <p class="text-muted">Some Description about alerts.</p>
 </div>
 <div class="row p-5 bg-light">
     <div class="col-12 alert alert-primary" role="alert">
-        This is a primary alert—check it out!
+        <p class="mb-0">This is a primary alert — check it out!</p>
+    </div>
+    <div class="col-12 alert alert-secondary" role="alert">
+        <p class="mb-0">This is a default alert — check it out!</p>
     </div>
     <div class="col-12 alert alert-success" role="alert">
-        This is a success alert—check it out!
+        <p class="mb-0">This is a success alert — check it out!</p>
+    </div>
+    <div class="col-12 alert alert-warning" role="alert">
+        <p class="mb-0">This is a warning alert — check it out!</p>
     </div>
     <div class="col-12 alert alert-danger" role="alert">
-        This is a danger alert—check it out!
+        <p class="mb-0">This is a danger alert — check it out!</p>
     </div>
-    <div class="col-12 alert alert-warning" role="alert">
-        This is a warning alert—check it out!
+    <div class="col-12 alert alert-success" role="alert">
+				<h4 class="alert-header">Well done!!</h4>
+        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+				<hr>
+				<p class="mb-0">Also some extra text and a <a href="#alerts" class="alert-link">link</a>.</p>
     </div>
 </div>
diff --git a/_includes/components/badges.html b/_includes/components/badges.html
index 7fc82c6..f1c9bf1 100644
--- a/_includes/components/badges.html
+++ b/_includes/components/badges.html
@@ -1,4 +1,4 @@
-<div class="page-header mb-4 mt-5">
+<div class="page-header mb-4">
     <h2 id="badges">Badges</h2>
     <!--p class="text-muted">Some Description about badges.</p-->
 </div>
diff --git a/_includes/components/cards.html b/_includes/components/cards.html
index 02ef6ba..512d07e 100644
--- a/_includes/components/cards.html
+++ b/_includes/components/cards.html
@@ -1,4 +1,4 @@
-<div class="mt-5" id="cards">
+<div class="mb-4" id="cards">
     <h2>Cards</h2>
     <div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
         <div class="col-md-6 col-sm-12 col-xs-12">
diff --git a/_includes/components/footer.html b/_includes/components/footer.html
new file mode 100644
index 0000000..c6f4173
--- /dev/null
+++ b/_includes/components/footer.html
@@ -0,0 +1,58 @@
+<div class="page-header mb-4">
+    <h3>Footer</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+
+<div class="footer col-12 p-5 background-primary text-white">
+	<div class="footer__wrapper col-lg-10 col-md-12 mx-auto" id="<++>">
+		<div class="row" id="footer-lists">
+			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu">
+				<span>I2P</span>
+				<li><a href="#">About</a></li>
+				<li><a href="#">Blog</a></li>
+				<li><a href="#">events</a></li>
+				<li><a href="#">contact us</a></li>
+			</ul>
+			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-gettingStarted-menu">
+				<span>Getting started</span>
+				<li><a href="#">guides</a></li>
+				<li><a href="#">technology</a></li>
+				<li><a href="#">api</a></li>
+				<li><a href="#">docs</a></li>
+			</ul>
+			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-getInvolved-menu">
+				<span>get involved</span>
+				<li><a href="#">contribute</a></li>
+				<li><a href="#">donate</a></li>
+				<li><a href="#">partners</a></li>
+				<li><a href="#">run OONI</a></li>
+			</ul>
+			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
+				<span>Follow us</span>
+				<div class="footer__social-media" >
+					<li class="footer__social-media-icon " ></li>
+					<li class="footer__social-media-icon" ></li>
+					<li class="footer__social-media-icon" ></li>
+			</div>
+			</ul>
+		</div>
+		<div class="spacer col-12" id=""></div>
+		<div class="footer-extras row">
+			<div class="col-lg-2 col-md-4 col-sm-6" >
+				<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
+			</div>
+			<div class="col-md-6 col-sm-12" >
+				<p>© 2018 The Invisible Internet Project<br />
+				Content available under a Creative Commons license.</p>
+			</div>
+			<div class="col-lg-4 col-sm-12" >
+				<ul class="d-flex flex-wrap pl-0">
+					<li><a href="#">data policy</a></li>
+					<li><a href="#">legal</a></li>
+					<li><a href="#">sitemap</a></li>
+					<li><a href="#">ipressum</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/_includes/components/forms.html b/_includes/components/forms.html
index b2ebbb7..df22c0c 100644
--- a/_includes/components/forms.html
+++ b/_includes/components/forms.html
@@ -1,5 +1,4 @@
-<h1 id="forms"> </h1>
-<div class="page-header mb-4 mt-5">
+<div class="page-header mb-4" id="forms">
     <h2>Forms</h2>
     <!--p class="text-muted">Some Description about Forms.</p-->
 </div>
diff --git a/_includes/components/navbar.html b/_includes/components/navbar.html
new file mode 100644
index 0000000..48f70d9
--- /dev/null
+++ b/_includes/components/navbar.html
@@ -0,0 +1,34 @@
+<div id="header" class="mb-4">
+    <h2>Header</h2>
+    <!--p class="text-muted">Some Description about buttons.</p-->
+</div>
+<div class="bg-light p-5" id="">
+<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end pb-0" id="styleguide-nav" "style=background: $oc-white">
+  <a class="navbar-brand mr-5" href="https://geti2p.net/">
+    <img src="{{site.baseurl}}{{site.logo}}" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SGnavSupportedContent" aria-controls="SGnavSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="SGnavSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Blog</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Getting started</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Docs & data</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Contribute</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">About us</a>
+      </li>
+		</ul>
+	</div>
+</nav>
+</div>
diff --git a/_includes/components/paginate.html b/_includes/components/paginate.html
index 2674855..21cc4d9 100644
--- a/_includes/components/paginate.html
+++ b/_includes/components/paginate.html
@@ -1,5 +1,4 @@
-<h1 id="pagination"></h1>
-<div class="page-header mb-4 mt-5">
+<div class="page-header mb-4 " id="pagination">
     <h2>Pagination</h2>
     <!--p class="text-muted">Some Description about pagination.</p-->
 </div>
diff --git a/_includes/components/scrollspy.html b/_includes/components/scrollspy.html
new file mode 100644
index 0000000..a582846
--- /dev/null
+++ b/_includes/components/scrollspy.html
@@ -0,0 +1,12 @@
+<div class="page-header mb-4" id="scrollspy">
+    <h3>Scrollspy</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+
+<div class="row bg-light p-5">
+    <div class="col-12 p-0">
+        <p>
+            <span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
+        </p>
+    </div>
+</div>
diff --git a/_includes/components/tables.html b/_includes/components/tables.html
index 9b3104e..14c123f 100644
--- a/_includes/components/tables.html
+++ b/_includes/components/tables.html
@@ -1,6 +1,7 @@
-<div class="mt-5" id="tables">
+<div class="page-header mb-4" id="tables">
     <h2>Tables</h2>
-    <div class="row mt-5">
+</div>
+    <div class="row bg-light p-5">
         <span>Default</span>
         <br />
         <table class="table">
@@ -33,8 +34,6 @@
             </tr>
             </tbody>
         </table>
-    </div>
-    <div class="row mt-5">
         <span>Striped</span>
         <br />
         <table class="table table-striped">
@@ -68,4 +67,3 @@
             </tbody>
         </table>
     </div>
-</div>
diff --git a/_includes/scrollspy.html b/_includes/scrollspy.html
index 92ad772..35de352 100644
--- a/_includes/scrollspy.html
+++ b/_includes/scrollspy.html
@@ -1,4 +1,3 @@
-<h1 id="scrollspy"> </h1>
 <div class="page-header mb-4 mt-5 d-none d-sm-none">
     <h3>Scrollspy</h3>
     <!--p class="text-muted">Some Description about scrollspy.</p-->
diff --git a/_layouts/components.html b/_layouts/components.html
index 4ff44d6..f83ad4c 100644
--- a/_layouts/components.html
+++ b/_layouts/components.html
@@ -16,14 +16,37 @@
     </div>
     <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
         <!--{{ content }}-->
-        {% include components/buttons.html %}
+			<div class="component-wrapper my-5" id="">
+        {% include components/alerts.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
         {% include components/badges.html %}
-        {% include components/forms.html %}
-        {% include components/tables.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
+        {% include components/buttons.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
         {% include components/cards.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
+        {% include components/forms.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
+        {% include components/footer.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
+        {% include components/navbar.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
         {% include components/paginate.html %}
-        {% include components/alerts.html %}
-        {% include scrollspy.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
+        {% include components/scrollspy.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
+        {% include components/tables.html %}
+			</div>
+			{% include scrollspy.html %}
     </div>
 </div>
 {% include scripts.html %}
diff --git a/_site/assets/styles/components.scss b/_site/assets/styles/components.scss
index f40e6e8..1c9e10d 100644
--- a/_site/assets/styles/components.scss
+++ b/_site/assets/styles/components.scss
@@ -1,5 +1,71 @@
-.navbar {
-  // background-color: $oc-white !important;
+.alert {
+	border-radius: 25px;
+
+	&-custom {
+		color: #041f67;
+		background-color: #bbd6ff;
+		border-color: #a4bfff;
+
+		& hr {
+			border-top-color: #7691d9;
+		}
+
+		& .alert-link {
+		color: #000850;
+		}
+	}
+	&-primary {
+		color: #041f67;
+		background-color: #bbd6ff;
+		border-color: #a4bfff;
+
+		& hr {
+			border-top-color: #7691d9;
+		}
+
+		& .alert-link {
+		color: #000850;
+		}
+	}
+	&-success {
+		color: #075207;
+		background-color: #beffbe;
+		border-color: #a7f2a7;
+
+		& hr {
+			border-top-color: #7ac57a;
+		}
+
+		& .alert-link {
+		color: #003b00;
+		}
+	}
+	&-warning {
+		color: #bd8200;
+		background-color: #ffffa9;
+		border-color: #ffff92;
+
+		& hr {
+			border-top-color: #fff464;
+		}
+
+		& .alert-link {
+		color: #a66b00;
+		}
+	}
+	&-danger {
+		color: #9f1405;
+		background-color: #ffcbbc;
+		border-color: #ffb4a5;
+
+		& hr {
+			border-top-color: #ff8677;
+		}
+
+		& .alert-link {
+		color: #880000;
+		}
+	}
 }
 
 .background-primary {
@@ -72,7 +138,7 @@
 }
 
 .color-gray-9 {
-  color: $oc-gray-3;
+  color: $oc-gray-9;
 }
 
 .rb-code {
@@ -224,7 +290,7 @@
 }
 
 .btn-pill {
-	border-radius: 300px; //make it huge so  itis alwas in pill shape
+	border-radius: 30px;
 }
 
 .faq__chevron-up {
@@ -246,6 +312,68 @@
   background-color: $secondary !important;
 }
 
+.footer {
+	ul {
+		list-style: none;
+		font-weight: 600;
+		text-transform: capitalize;
+		span {
+			display: block;
+			margin-bottom: 0.5em;
+		}
+		a {
+			color: rgba(255,255,255,0.5);
+			font-weight: 400;
+
+			&:hover {
+				color: $oc-white;
+			}
+		}
+	}
+	&__social-media {
+		display: flex;
+		&-icon {
+			content: " ";
+			width: 75px;
+			height: 75px;
+			margin-right: 1rem;
+			background-color: rgba(255,255,255,0.5);
+			border-radius: 75px;
+		}
+	}
+
+	&-extras{
+		ul {
+			li {
+				margin: 0 0.5rem;
+			}
+		}
+	}
+	.spacer {
+		content: " ";
+		height: 2rem;
+	}
+}
+#styleguide-nav {
+  background-color: $oc-white !important;
+	.nav-item:hover {
+		box-shadow: inset 0 -5px $primary;
+
+		& .nav-link {
+			color: $primary;
+		}
+	}
+	.nav-link {
+		color: $oc-gray-9;
+	}
+
+	.show {
+		.nav-item:hover {
+			box-shadow: 0 0;
+		}
+	}
+}
+
 .rb-link {
   color: $primary !important;
   &:hover {
diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css
index 50ef7b4..ee62ba7 100644
--- a/_site/assets/styles/main.css
+++ b/_site/assets/styles/main.css
@@ -61,8 +61,6 @@
 
 .b-border { border-bottom: 2px solid lightgrey !important; }
 
-p { color: #212529; }
-
 .color { height: 100px; }
 
 .grid { height: 100px; background-color: #4661A9; border-radius: 7px; }
@@ -80,6 +78,23 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 
 .icon { font-size: 20px; background-color: #212529; padding: 20px; }
 
+.alert { border-radius: 25px; }
+.alert-custom { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; }
+.alert-custom hr { border-top-color: #7691d9; }
+.alert-custom .alert-link { color: #000850; }
+.alert-primary { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; }
+.alert-primary hr { border-top-color: #7691d9; }
+.alert-primary .alert-link { color: #000850; }
+.alert-success { color: #075207; background-color: #beffbe; border-color: #a7f2a7; }
+.alert-success hr { border-top-color: #7ac57a; }
+.alert-success .alert-link { color: #003b00; }
+.alert-warning { color: #bd8200; background-color: #ffffa9; border-color: #ffff92; }
+.alert-warning hr { border-top-color: #fff464; }
+.alert-warning .alert-link { color: #a66b00; }
+.alert-danger { color: #9f1405; background-color: #ffcbbc; border-color: #ffb4a5; }
+.alert-danger hr { border-top-color: #ff8677; }
+.alert-danger .alert-link { color: #880000; }
+
 .background-primary { background-color: #4661A9; }
 
 .background-secondary { background-color: #60AB60; }
@@ -114,7 +129,7 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 
 .color-secondary { color: #60AB60; }
 
-.color-gray-9 { color: #dee2e6; }
+.color-gray-9 { color: #212529; }
 
 .rb-code { font-family: 'Source Code Pro', monospace !important; }
 
@@ -153,7 +168,7 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 
 .btn-scroller:active, .btn-scroller:focus, .btn-scroller:hover { color: #00000b; background-color: #aaaab0; }
 
-.btn-pill { border-radius: 300px; }
+.btn-pill { border-radius: 30px; }
 
 .faq__chevron-up { height: .8em; vertical-align: -.06em; fill: currentColor; margin-left: .5em; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
 
@@ -161,6 +176,21 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 
 .badge-secondary { background-color: #60AB60 !important; }
 
+.footer ul { list-style: none; font-weight: 600; text-transform: capitalize; }
+.footer ul span { display: block; margin-bottom: 0.5em; }
+.footer ul a { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
+.footer ul a:hover { color: #ffffff; }
+.footer__social-media { display: flex; }
+.footer__social-media-icon { content: " "; width: 75px; height: 75px; margin-right: 1rem; background-color: rgba(255, 255, 255, 0.5); border-radius: 75px; }
+.footer-extras ul li { margin: 0 0.5rem; }
+.footer .spacer { content: " "; height: 2rem; }
+
+#styleguide-nav { background-color: #ffffff !important; }
+#styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; }
+#styleguide-nav .nav-item:hover .nav-link { color: #4661A9; }
+#styleguide-nav .nav-link { color: #212529; }
+#styleguide-nav .show .nav-item:hover { box-shadow: 0 0; }
+
 .rb-link { color: #4661A9 !important; }
 .rb-link:hover { color: #60AB60 !important; }
 
@@ -177,6 +207,6 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 @media (max-width: 992px) { .display-md { display: none !important; } }
 .display-md { display: unset; }
 
-body { font-family: "Source Sans Pro", sans-serif !important; font-size: 1.2rem; }
+body { color: #212529; font-family: "Source Sans Pro", sans-serif !important; font-size: 1.2rem; }
 
 a { text-decoration: none !important; }
diff --git a/_site/assets/styles/visuals.scss b/_site/assets/styles/visuals.scss
index 9e0c7d8..c6fdef6 100644
--- a/_site/assets/styles/visuals.scss
+++ b/_site/assets/styles/visuals.scss
@@ -1,7 +1,3 @@
-p {
-	color: $oc-gray-9;
-}
-
 .color {
   height: 100px;
 }
diff --git a/_site/components/index.html b/_site/components/index.html
index 10f2eb6..54e9ac2 100644
--- a/_site/components/index.html
+++ b/_site/components/index.html
@@ -75,8 +75,8 @@
   <ul class="p-0 list-group pt-3 sidebar-fill">
     
       
-        <a href="#buttons"><li class="list-group-item rb-sidebar">
-          Buttons
+        <a href="#alerts"><li class="list-group-item rb-sidebar">
+          Alerts
         </li></a>
       
     
@@ -87,20 +87,38 @@
       
     
       
+        <a href="#buttons"><li class="list-group-item rb-sidebar">
+          Buttons
+        </li></a>
+      
+    
+      
+        <a href="#cards"><li class="list-group-item rb-sidebar">
+          Cards
+        </li></a>
+      
+    
+      
+        <a href="#footer"><li class="list-group-item rb-sidebar">
+          Footer
+        </li></a>
+      
+    
+      
         <a href="#forms"><li class="list-group-item rb-sidebar">
           Forms
         </li></a>
       
     
       
-        <a href="#tables"><li class="list-group-item rb-sidebar">
-          Tables
+        <a href="#header"><li class="list-group-item rb-sidebar">
+          Header
         </li></a>
       
     
       
-        <a href="#cards"><li class="list-group-item rb-sidebar">
-          Cards
+        <a href="#pagination"><li class="list-group-item rb-sidebar">
+          Pagination
         </li></a>
       
     
@@ -110,6 +128,12 @@
         </li></a>
       
     
+      
+        <a href="#tables"><li class="list-group-item rb-sidebar">
+          Tables
+        </li></a>
+      
+    
   </ul>
 </div>
 
@@ -119,6 +143,55 @@
     <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
         <!--<p>This is the components page</p>
 -->
+			<div class="component-wrapper my-5" id="">
+        <div class="page-header mb-4">
+    <h2 id="alerts">Alerts</h2>
+    <p class="text-muted">Some Description about alerts.</p>
+</div>
+<div class="row p-5 bg-light">
+    <div class="col-12 alert alert-primary" role="alert">
+        <p class="mb-0">This is a primary alert — check it out!</p>
+    </div>
+    <div class="col-12 alert alert-secondary" role="alert">
+        <p class="mb-0">This is a default alert — check it out!</p>
+    </div>
+    <div class="col-12 alert alert-success" role="alert">
+        <p class="mb-0">This is a success alert — check it out!</p>
+    </div>
+    <div class="col-12 alert alert-warning" role="alert">
+        <p class="mb-0">This is a warning alert — check it out!</p>
+    </div>
+    <div class="col-12 alert alert-danger" role="alert">
+        <p class="mb-0">This is a danger alert — check it out!</p>
+    </div>
+    <div class="col-12 alert alert-success" role="alert">
+				<h4 class="alert-header">Well done!!</h4>
+        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+				<hr>
+				<p class="mb-0">Also some extra text and a <a href="#alerts" class="alert-link">link</a>.</p>
+    </div>
+</div>
+
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="page-header mb-4">
+    <h2 id="badges">Badges</h2>
+    <!--p class="text-muted">Some Description about badges.</p-->
+</div>
+<div class="row p-5 bg-light">
+    <div class="col-12">
+        <h2>Example heading <span class="badge badge-primary">New</span></h2>
+    </div>
+    <div class="col-12">
+        <h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4>
+    </div>
+    <div class="col-12">
+        <h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
+    </div>
+</div>
+
+			</div>
+			<div class="component-wrapper my-5" id="">
         <div id="buttons" class="mb-4">
     <h2>Buttons</h2>
     <!--p class="text-muted">Some Description about buttons.</p-->
@@ -146,24 +219,66 @@
     </div>
 </div>
 
-        <div class="page-header mb-4 mt-5">
-    <h2 id="badges">Badges</h2>
-    <!--p class="text-muted">Some Description about badges.</p-->
-</div>
-<div class="row p-5 bg-light">
-    <div class="col-12">
-        <h2>Example heading <span class="badge badge-primary">New</span></h2>
-    </div>
-    <div class="col-12">
-        <h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4>
-    </div>
-    <div class="col-12">
-        <h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="mb-4" id="cards">
+    <h2>Cards</h2>
+    <div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
+        <div class="col-md-6 col-sm-12 col-xs-12">
+            <div class="card mb-2">
+                <div class="card-body">
+                    <h4 class="card-title">I2P</h4>
+                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+                    <a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
+                </div>
+            </div>
+            <div class="card mb-2">
+                <div class="card-body">
+                    <h4 class="card-title">I2P</h4>
+                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+                    <a href="#" class="rb-link" onclick="return false;">Apply</a>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-body">
+                    <h4 class="card-title">I2P</h4>
+                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-sm-12 col-xs-12">
+            <div class="card">
+                <img class="card-img-top"
+                     src="/i2p-styleguide/assets/images/placeholder.jpg" alt="Card image cap">
+                <div class="card-body">
+                    <h4 class="card-title">A few things everyone can do now</h4>
+                    <p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
+                </div>
+                <ul class="list-group list-group-flush">
+                    <li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
+                        <mark>contributing</mark>
+                    </a> to help the I2P project grow.
+                    </li>
+                    <li class="list-group-item">Take a moment to
+                        <mark>donate</mark>
+                        to support further development.
+                    </li>
+                    <li class="list-group-item">Help
+                        <mark>translate</mark>
+                        the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
+                    </li>
+                </ul>
+                <div class="card-body">
+                    <a href="#" class="rb-link" onclick="return false;">View All</a>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 
-        <h1 id="forms"> </h1>
-<div class="page-header mb-4 mt-5">
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="page-header mb-4" id="forms">
     <h2>Forms</h2>
     <!--p class="text-muted">Some Description about Forms.</p-->
 </div>
@@ -186,9 +301,151 @@
     </form>
 </div>
 
-        <div class="mt-5" id="tables">
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="page-header mb-4">
+    <h3>Footer</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+
+<div class="footer col-12 p-5 background-primary text-white">
+	<div class="footer__wrapper col-lg-10 col-md-12 mx-auto" id="<++>">
+		<div class="row" id="footer-lists">
+			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu">
+				<span>I2P</span>
+				<li><a href="#">About</a></li>
+				<li><a href="#">Blog</a></li>
+				<li><a href="#">events</a></li>
+				<li><a href="#">contact us</a></li>
+			</ul>
+			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-gettingStarted-menu">
+				<span>Getting started</span>
+				<li><a href="#">guides</a></li>
+				<li><a href="#">technology</a></li>
+				<li><a href="#">api</a></li>
+				<li><a href="#">docs</a></li>
+			</ul>
+			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-getInvolved-menu">
+				<span>get involved</span>
+				<li><a href="#">contribute</a></li>
+				<li><a href="#">donate</a></li>
+				<li><a href="#">partners</a></li>
+				<li><a href="#">run OONI</a></li>
+			</ul>
+			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
+				<span>Follow us</span>
+				<div class="footer__social-media" >
+					<li class="footer__social-media-icon " ></li>
+					<li class="footer__social-media-icon" ></li>
+					<li class="footer__social-media-icon" ></li>
+			</div>
+			</ul>
+		</div>
+		<div class="spacer col-12" id=""></div>
+		<div class="footer-extras row">
+			<div class="col-lg-2 col-md-4 col-sm-6" >
+				<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
+			</div>
+			<div class="col-md-6 col-sm-12" >
+				<p>© 2018 The Invisible Internet Project<br />
+				Content available under a Creative Commons license.</p>
+			</div>
+			<div class="col-lg-4 col-sm-12" >
+				<ul class="d-flex flex-wrap pl-0">
+					<li><a href="#">data policy</a></li>
+					<li><a href="#">legal</a></li>
+					<li><a href="#">sitemap</a></li>
+					<li><a href="#">ipressum</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
+
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div id="header" class="mb-4">
+    <h2>Header</h2>
+    <!--p class="text-muted">Some Description about buttons.</p-->
+</div>
+<div class="bg-light p-5" id="">
+<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end pb-0" id="styleguide-nav" "style=background: $oc-white">
+  <a class="navbar-brand mr-5" href="https://geti2p.net/">
+    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SGnavSupportedContent" aria-controls="SGnavSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="SGnavSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Blog</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Getting started</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Docs & data</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Contribute</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">About us</a>
+      </li>
+		</ul>
+	</div>
+</nav>
+</div>
+
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="page-header mb-4 " id="pagination">
+    <h2>Pagination</h2>
+    <!--p class="text-muted">Some Description about pagination.</p-->
+</div>
+<div class="row bg-light p-5">
+    <nav aria-label="...">
+        <ul class="pagination m-0">
+            <li class="page-item disabled">
+                <span class="page-link">Previous</span>
+            </li>
+            <li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
+            <li class="page-item">
+                <span class="page-link rb-paginate-active">
+	                2<span class="sr-only">(current)</span>
+                </span>
+            </li>
+            <li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
+            <li class="page-item">
+                <a class="page-link" href="#" onclick="return false;">Next</a>
+            </li>
+        </ul>
+    </nav>
+</div>
+
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="page-header mb-4" id="scrollspy">
+    <h3>Scrollspy</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+
+<div class="row bg-light p-5">
+    <div class="col-12 p-0">
+        <p>
+            <span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
+        </p>
+    </div>
+</div>
+
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="page-header mb-4" id="tables">
     <h2>Tables</h2>
-    <div class="row mt-5">
+</div>
+    <div class="row bg-light p-5">
         <span>Default</span>
         <br />
         <table class="table">
@@ -221,8 +478,6 @@
             </tr>
             </tbody>
         </table>
-    </div>
-    <div class="row mt-5">
         <span>Striped</span>
         <br />
         <table class="table table-striped">
@@ -256,109 +511,9 @@
             </tbody>
         </table>
     </div>
-</div>
-
-        <div class="mt-5" id="cards">
-    <h2>Cards</h2>
-    <div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
-        <div class="col-md-6 col-sm-12 col-xs-12">
-            <div class="card mb-2">
-                <div class="card-body">
-                    <h4 class="card-title">I2P</h4>
-                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
-                    <a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
-                </div>
-            </div>
-            <div class="card mb-2">
-                <div class="card-body">
-                    <h4 class="card-title">I2P</h4>
-                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
-                    <a href="#" class="rb-link" onclick="return false;">Apply</a>
-                </div>
-            </div>
-            <div class="card">
-                <div class="card-body">
-                    <h4 class="card-title">I2P</h4>
-                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-6 col-sm-12 col-xs-12">
-            <div class="card">
-                <img class="card-img-top"
-                     src="/i2p-styleguide/assets/images/placeholder.jpg" alt="Card image cap">
-                <div class="card-body">
-                    <h4 class="card-title">A few things everyone can do now</h4>
-                    <p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
-                </div>
-                <ul class="list-group list-group-flush">
-                    <li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
-                        <mark>contributing</mark>
-                    </a> to help the I2P project grow.
-                    </li>
-                    <li class="list-group-item">Take a moment to
-                        <mark>donate</mark>
-                        to support further development.
-                    </li>
-                    <li class="list-group-item">Help
-                        <mark>translate</mark>
-                        the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
-                    </li>
-                </ul>
-                <div class="card-body">
-                    <a href="#" class="rb-link" onclick="return false;">View All</a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-        <h1 id="pagination"></h1>
-<div class="page-header mb-4 mt-5">
-    <h2>Pagination</h2>
-    <!--p class="text-muted">Some Description about pagination.</p-->
-</div>
-<div class="row bg-light p-5">
-    <nav aria-label="...">
-        <ul class="pagination m-0">
-            <li class="page-item disabled">
-                <span class="page-link">Previous</span>
-            </li>
-            <li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
-            <li class="page-item">
-                <span class="page-link rb-paginate-active">
-	                2<span class="sr-only">(current)</span>
-                </span>
-            </li>
-            <li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
-            <li class="page-item">
-                <a class="page-link" href="#" onclick="return false;">Next</a>
-            </li>
-        </ul>
-    </nav>
-</div>
-
-        <div class="page-header mb-4 mt-5">
-    <h2 id="alerts">Alerts</h2>
-    <p class="text-muted">Some Description about alerts.</p>
-</div>
-<div class="row p-5 bg-light">
-    <div class="col-12 alert alert-primary" role="alert">
-        This is a primary alert—check it out!
-    </div>
-    <div class="col-12 alert alert-success" role="alert">
-        This is a success alert—check it out!
-    </div>
-    <div class="col-12 alert alert-danger" role="alert">
-        This is a danger alert—check it out!
-    </div>
-    <div class="col-12 alert alert-warning" role="alert">
-        This is a warning alert—check it out!
-    </div>
-</div>
 
-        <h1 id="scrollspy"> </h1>
-<div class="page-header mb-4 mt-5 d-none d-sm-none">
+			</div>
+			<div class="page-header mb-4 mt-5 d-none d-sm-none">
     <h3>Scrollspy</h3>
     <!--p class="text-muted">Some Description about scrollspy.</p-->
 </div>
diff --git a/_site/copywriting/index.html b/_site/copywriting/index.html
index 974c76f..58363a7 100644
--- a/_site/copywriting/index.html
+++ b/_site/copywriting/index.html
@@ -176,8 +176,7 @@
         
         
         
-    <h1 id="scrollspy"> </h1>
-<div class="page-header mb-4 mt-5 d-none d-sm-none">
+    <div class="page-header mb-4 mt-5 d-none d-sm-none">
     <h3>Scrollspy</h3>
     <!--p class="text-muted">Some Description about scrollspy.</p-->
 </div>
diff --git a/_site/getting-started/index.html b/_site/getting-started/index.html
index adb6919..70bc170 100644
--- a/_site/getting-started/index.html
+++ b/_site/getting-started/index.html
@@ -109,8 +109,7 @@
                         <div>
                     </div>
 
-                    <h1 id="scrollspy"> </h1>
-<div class="page-header mb-4 mt-5 d-none d-sm-none">
+                    <div class="page-header mb-4 mt-5 d-none d-sm-none">
     <h3>Scrollspy</h3>
     <!--p class="text-muted">Some Description about scrollspy.</p-->
 </div>
diff --git a/_site/index.html b/_site/index.html
index 3f7e64a..ef223b5 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -111,8 +111,7 @@
           </div>
         </div>
 
-        <h1 id="scrollspy"> </h1>
-<div class="page-header mb-4 mt-5 d-none d-sm-none">
+        <div class="page-header mb-4 mt-5 d-none d-sm-none">
     <h3>Scrollspy</h3>
     <!--p class="text-muted">Some Description about scrollspy.</p-->
 </div>
diff --git a/_site/visuals/index.html b/_site/visuals/index.html
index eaa1b20..8cc3c8b 100644
--- a/_site/visuals/index.html
+++ b/_site/visuals/index.html
@@ -479,8 +479,7 @@
     </div>
 </div>
 
-          <h1 id="scrollspy"> </h1>
-<div class="page-header mb-4 mt-5 d-none d-sm-none">
+          <div class="page-header mb-4 mt-5 d-none d-sm-none">
     <h3>Scrollspy</h3>
     <!--p class="text-muted">Some Description about scrollspy.</p-->
 </div>
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index f40e6e8..1c9e10d 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -1,5 +1,71 @@
-.navbar {
-  // background-color: $oc-white !important;
+.alert {
+	border-radius: 25px;
+
+	&-custom {
+		color: #041f67;
+		background-color: #bbd6ff;
+		border-color: #a4bfff;
+
+		& hr {
+			border-top-color: #7691d9;
+		}
+
+		& .alert-link {
+		color: #000850;
+		}
+	}
+	&-primary {
+		color: #041f67;
+		background-color: #bbd6ff;
+		border-color: #a4bfff;
+
+		& hr {
+			border-top-color: #7691d9;
+		}
+
+		& .alert-link {
+		color: #000850;
+		}
+	}
+	&-success {
+		color: #075207;
+		background-color: #beffbe;
+		border-color: #a7f2a7;
+
+		& hr {
+			border-top-color: #7ac57a;
+		}
+
+		& .alert-link {
+		color: #003b00;
+		}
+	}
+	&-warning {
+		color: #bd8200;
+		background-color: #ffffa9;
+		border-color: #ffff92;
+
+		& hr {
+			border-top-color: #fff464;
+		}
+
+		& .alert-link {
+		color: #a66b00;
+		}
+	}
+	&-danger {
+		color: #9f1405;
+		background-color: #ffcbbc;
+		border-color: #ffb4a5;
+
+		& hr {
+			border-top-color: #ff8677;
+		}
+
+		& .alert-link {
+		color: #880000;
+		}
+	}
 }
 
 .background-primary {
@@ -72,7 +138,7 @@
 }
 
 .color-gray-9 {
-  color: $oc-gray-3;
+  color: $oc-gray-9;
 }
 
 .rb-code {
@@ -224,7 +290,7 @@
 }
 
 .btn-pill {
-	border-radius: 300px; //make it huge so  itis alwas in pill shape
+	border-radius: 30px;
 }
 
 .faq__chevron-up {
@@ -246,6 +312,68 @@
   background-color: $secondary !important;
 }
 
+.footer {
+	ul {
+		list-style: none;
+		font-weight: 600;
+		text-transform: capitalize;
+		span {
+			display: block;
+			margin-bottom: 0.5em;
+		}
+		a {
+			color: rgba(255,255,255,0.5);
+			font-weight: 400;
+
+			&:hover {
+				color: $oc-white;
+			}
+		}
+	}
+	&__social-media {
+		display: flex;
+		&-icon {
+			content: " ";
+			width: 75px;
+			height: 75px;
+			margin-right: 1rem;
+			background-color: rgba(255,255,255,0.5);
+			border-radius: 75px;
+		}
+	}
+
+	&-extras{
+		ul {
+			li {
+				margin: 0 0.5rem;
+			}
+		}
+	}
+	.spacer {
+		content: " ";
+		height: 2rem;
+	}
+}
+#styleguide-nav {
+  background-color: $oc-white !important;
+	.nav-item:hover {
+		box-shadow: inset 0 -5px $primary;
+
+		& .nav-link {
+			color: $primary;
+		}
+	}
+	.nav-link {
+		color: $oc-gray-9;
+	}
+
+	.show {
+		.nav-item:hover {
+			box-shadow: 0 0;
+		}
+	}
+}
+
 .rb-link {
   color: $primary !important;
   &:hover {
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 6b04ae1..5501663 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -10,6 +10,7 @@
 @import "state";
 
 body {
+	color: $oc-gray-9;
   font-family: $font;
 	font-size: 1.2rem;
 }
diff --git a/assets/styles/visuals.scss b/assets/styles/visuals.scss
index 9e0c7d8..c6fdef6 100644
--- a/assets/styles/visuals.scss
+++ b/assets/styles/visuals.scss
@@ -1,7 +1,3 @@
-p {
-	color: $oc-gray-9;
-}
-
 .color {
   height: 100px;
 }
diff --git a/components.md b/components.md
index d62ea60..6be5897 100644
--- a/components.md
+++ b/components.md
@@ -4,12 +4,16 @@
   permalink: /components/
 
   sidebar:
-  - buttons: Buttons
+  - alerts: Alerts
   - badges: Badges
-  - forms: Forms
-  - tables: Tables
+  - buttons: Buttons
   - cards: Cards
+  - footer: Footer
+  - forms: Forms
+  - header: Header
+  - pagination: Pagination
   - scrollspy: Scrollspy
+  - tables: Tables
 ---
 
 This is the components page