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/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
index b44e773..48f70d9 100644
--- a/_includes/components/navbar.html
+++ b/_includes/components/navbar.html
@@ -1,4 +1,4 @@
-<div id="header" class="mb-4 mt-5">
+<div id="header" class="mb-4">
     <h2>Header</h2>
     <!--p class="text-muted">Some Description about buttons.</p-->
 </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/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/_layouts/components.html b/_layouts/components.html
index 0396cd7..828d52a 100644
--- a/_layouts/components.html
+++ b/_layouts/components.html
@@ -16,15 +16,33 @@
     </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 %}
+			</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/navbar.html %}
-        {% include components/tables.html %}
-        {% include components/cards.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
         {% include components/paginate.html %}
-        {% include components/alerts.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
         {% include scrollspy.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
+        {% include components/tables.html %}
+			</div>
     </div>
 </div>
 {% include scripts.html %}
diff --git a/_site/assets/styles/components.scss b/_site/assets/styles/components.scss
index 7e2f9d4..bb9e674 100644
--- a/_site/assets/styles/components.scss
+++ b/_site/assets/styles/components.scss
@@ -1,3 +1,73 @@
+.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 {
   background-color: $primary;
 }
diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css
index 5a6f17b..19b437f 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; }
@@ -183,6 +198,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 ed4ca27..20362f6 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,6 +87,18 @@
       
     
       
+        <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="#forms"><li class="list-group-item rb-sidebar">
           Forms
         </li></a>
@@ -99,20 +111,20 @@
       
     
       
-        <a href="#tables"><li class="list-group-item rb-sidebar">
-          Tables
+        <a href="#pagination"><li class="list-group-item rb-sidebar">
+          Pagination
         </li></a>
       
     
       
-        <a href="#cards"><li class="list-group-item rb-sidebar">
-          Cards
+        <a href="#scrollspy"><li class="list-group-item rb-sidebar">
+          Scrollspy
         </li></a>
       
     
       
-        <a href="#scrollspy"><li class="list-group-item rb-sidebar">
-          Scrollspy
+        <a href="#tables"><li class="list-group-item rb-sidebar">
+          Tables
         </li></a>
       
     
@@ -125,6 +137,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-->
@@ -152,24 +213,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>
@@ -192,7 +295,9 @@
     </form>
 </div>
 
-        <div id="header" class="mb-4 mt-5">
+			</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>
@@ -227,9 +332,75 @@
 </nav>
 </div>
 
-        <div class="mt-5" id="tables">
+			</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="">
+        <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-->
+</div>
+<div class="row p-0 pt-5 bg-light d-none d-sm-none">
+    <div class="bd-example">
+        <div class="row">
+            <div class="col-4">
+                <div id="list-example" class="list-group">
+                    <a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
+                </div>
+            </div>
+            <div class="col-8">
+                <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="dropdown-divider mt-5 wi"></div>
+
+<div class="row">
+    <div class="col-12 p-0">
+        <p class="mt-5 mb-5">
+            <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">
@@ -262,8 +433,6 @@
             </tr>
             </tbody>
         </table>
-    </div>
-    <div class="row mt-5">
         <span>Striped</span>
         <br />
         <table class="table table-striped">
@@ -297,142 +466,8 @@
             </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">
-    <h3>Scrollspy</h3>
-    <!--p class="text-muted">Some Description about scrollspy.</p-->
-</div>
-<div class="row p-0 pt-5 bg-light d-none d-sm-none">
-    <div class="bd-example">
-        <div class="row">
-            <div class="col-4">
-                <div id="list-example" class="list-group">
-                    <a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
-                    <a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
-                    <a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
-                    <a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
-                </div>
-            </div>
-            <div class="col-8">
-                <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="dropdown-divider mt-5 wi"></div>
-
-<div class="row">
-    <div class="col-12 p-0">
-        <p class="mt-5 mb-5">
-            <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>
 </div>
 <script src="/i2p-styleguide/assets/javascript/modernizr.min.js"></script>
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 7e2f9d4..bb9e674 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -1,3 +1,73 @@
+.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 {
   background-color: $primary;
 }
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 6bda1b5..be213f5 100644
--- a/components.md
+++ b/components.md
@@ -4,13 +4,15 @@
   permalink: /components/
 
   sidebar:
-  - buttons: Buttons
+  - alerts: Alerts
   - badges: Badges
+  - buttons: Buttons
+  - cards: Cards
   - forms: Forms
   - header: Header
-  - tables: Tables
-  - cards: Cards
+  - pagination: Pagination
   - scrollspy: Scrollspy
+  - tables: Tables
 ---
 
 This is the components page