diff --git a/lib/css/Article-Clean.css b/lib/css/Article-Clean.css
new file mode 100644
index 0000000..0b21a23
--- /dev/null
+++ b/lib/css/Article-Clean.css
@@ -0,0 +1,84 @@
+.article-clean {
+  color: #56585b;
+  background-color: #fff;
+  font-family: 'Lora', serif;
+  font-size: 14px;
+}
+
+.article-clean .intro {
+  font-size: 16px;
+  margin: 0 auto 30px;
+}
+
+.article-clean .intro h1 {
+  font-size: 32px;
+  margin-bottom: 15px;
+  padding-top: 20px;
+  line-height: 1.5;
+  color: inherit;
+  margin-top: 20px;
+}
+
+.article-clean .intro p {
+  color: #929292;
+  font-size: 12px;
+}
+
+.article-clean .intro p .by {
+  font-style: italic;
+}
+
+.article-clean .intro p .date {
+  text-transform: uppercase;
+  padding: 4px 0 4px 10px;
+  margin-left: 10px;
+  border-left: 1px solid #ddd;
+}
+
+.article-clean .intro p a {
+  color: #333;
+  text-transform: uppercase;
+  padding-left: 3px;
+}
+
+.article-clean .intro img {
+  margin-top: 20px;
+}
+
+.article-clean .text p {
+  margin-bottom: 20px;
+  line-height: 1.45;
+}
+
+@media (min-width:768px) {
+  .article-clean .text p {
+    font-size: 16px;
+  }
+}
+
+.article-clean .text h2 {
+  margin-top: 28px;
+  margin-bottom: 20px;
+  line-height: 1.45;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+@media (min-width:768px) {
+  .article-clean .text h2 {
+    font-size: 20px;
+  }
+}
+
+.article-clean .text figure {
+  text-align: center;
+  margin-top: 30px;
+  margin-bottom: 20px;
+}
+
+.article-clean .text figure img {
+  margin-bottom: 12px;
+  max-width: 100%;
+}
+
diff --git a/lib/css/index.css b/lib/css/index.css
index 2f02faf..033d75d 100644
--- a/lib/css/index.css
+++ b/lib/css/index.css
@@ -1,14 +1,11 @@
-/*Fonts*/
-@font-face {
-  font-family: 'Oxygen';
-  src: url(../fonts/Oxygen/Oxygen-Regular.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Oxygen, Bold';
-  src: url(../fonts/Oxygen/Oxygen-Bold.ttf) format('truetype');
-}
-/*/Fonts*/
+/* Fonts */
+
+/* /Fonts */
 
 body {
   font-family: Oxygen;
-}
\ No newline at end of file
+}
+
+body {
+}
+
diff --git a/lib/css/styles.css b/lib/css/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/swarm/index.html b/swarm/index.html
index 848bf74..3d89c33 100644
--- a/swarm/index.html
+++ b/swarm/index.html
@@ -1,25 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>LBRY Foundation</title>
-
-  <!--TitleBar Icon-->
-  <link rel="icon" href="../img/small-logo.png" type="image/png" />
-
-  <!-- CSS DEPENDENCIES -->
-  <link rel="stylesheet" href="../lib/fontawesome/css/all.min.css" />
-  <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css" />
-  <!-- /CSS DEPENDENCIES -->
-
-  <!--CUSTOM CSS-->
-  <link rel="stylesheet" href="../lib/css/index.css" />
-  <!--/CUSTOM CSS-->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>LBRY Foundation</title>
+    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oxygen">
+    <link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css">
+    <link rel="stylesheet" href="/assets/css/Article-Clean.css">
+    <link rel="stylesheet" href="/assets/css/index.css">
+    <link rel="stylesheet" href="/assets/css/styles.css">
 </head>
 
-  <body id="home" data-spy="scroll" data-target=".navbar" data-offset="100">
-    <!-- navbar -->
+<body style="color: rgb(255,255,255);"><!-- navbar -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
       <div class="container">
         <span class="navbar-brand order-1 mr-0"><i class="fab fa-github"></i></span>
@@ -66,7 +60,7 @@
           </ul>
         </div>
         <div class="col-md text-md-right">
-          <small>&copy; 2020 LBRY.org &amp; LBRY Foundation</small>
+          <small>© 2020 LBRY.org &amp; LBRY Foundation</small>
         </div>
       </div>
     </div>
@@ -74,12 +68,50 @@
       
  
   <!-- JS DEPENDENCIES -->
-  <script src="../lib/jquery/jquery-3.5.1.min.js" defer></script>
-  <script src="../lib/bootstrap/js/bootstrap.bundle.min.js" defer></script>
+  <script src="../lib/jquery/jquery-3.5.1.min.js" defer=""></script>
+  <script src="../lib/bootstrap/js/bootstrap.bundle.min.js" defer=""></script>
   <!-- /JS DEPENDENCIES -->
 
   <!--CUSTOM JS-->
-  <script src="../lib/js/index.js" defer></script>
+  <script src="../lib/js/index.js" defer=""></script>
   <!--/CUSTOM JS-->
+    <div class="article-clean" style="background-color: #00303c;">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-10 col-xl-8 offset-md-0 offset-lg-1 offset-xl-2">
+                    <div class="intro">
+                        <h1 class="text-center" style="color: rgb(255,255,255);"><span style="text-decoration: underline;">The Swarm</span></h1>
+                    </div>
+                    <hr style="filter: blur(0px) brightness(125%) contrast(194%) saturate(200%);color: rgb(255,255,255);">
+                    <div class="text">
+                        <p style="color: rgb(255,255,255);"><br>The swarm is a sub-network within the LBRY network. It utilizes open-source principles to focus on the development of community, <br>engagement, and the voices and reputations of individuals and groups within the LBRY network.<br>The
+                            sub-net nodes are known as hives.<br><br><br></p>
+                        <h2 style="color: rgb(255,255,255);"><span style="text-decoration: underline;">What is Hive ?</span></h2>
+                        <p style="color: rgb(255,255,255);"><br>A hive is a place to meet people who love the things you love, including, of course, the LBRY protocol and the values it represents. Anyone can make a hive, everyone can join as many hives as they’d like, and there can be more
+                            than one hive that center around the same topic or application.<br>Some examples of hives:<br><br>&gt; Music<br>&gt; Country music<br>&gt; EDM<br>&gt; Anime<br>&gt;&nbsp;Art<br>&nbsp;&gt; Photography<br>&gt; The Ninja Turtles<br>&gt;
+                            Donatello, the staff wielding ninja turtle<br>&gt; The staff of Donatello, the staff wielding ninja turtle<br>&gt; Donatello’s graphic novel creation app<br>&gt; Really, anything!<br>&gt; You could think of hives as subreddits
+                            on Reddit, or channels on an IRC server, but different.<br><br><br></p>
+                        <h2 style="color: rgb(255,255,255);"><span style="text-decoration: underline;">Why should I join or make a hive?</span><br></h2>
+                        <p style="color: rgb(255,255,255);">Joining or making a hive is a great way to jump into the LBRY network. Make some friends, learn some things, share some ideas, gain some experience, build a reputation, or just hang out with some like minded <br>individuals<br></p>
+                        <h2
+                            style="color: rgb(255,255,255);"><span style="text-decoration: underline;">How do I join a hive?</span><br></h2>
+                            <p style="color: rgb(255,255,255);"><br>Hives are entirely independent and autonomous communities within the larger LBRY network. As such, the process for joining a hive depends entirely on the hive you would like to join. Maybe a hive lets anyone join and all
+                                you need to do is join a chat room. In fact, many hives will have their own role and channel right on the LBRY discord server. <br>To join one of those hives simply join the LBRY discord and ask for the appropriate role
+                                in the #hiveroles channel!<br>Otherwise, maybe a hive only lets folks with portfolios join, like photographers or artists. Maybe a hive requires you to write a short story to join. <br>Maybe a hive requires a code contribution.
+                                Maybe a hive is entirely open. Maybe a hive has a limited number of possible members. So long as the rules of the hive do not conflict with the ethos<br> and protocol of the LBRY network: maybe <em>anything</em>.<br>So
+                                how do you join? Find the hive you would like to join, find out how to join, and follow their instructions!<br><br><br></p>
+                    </div>
+                    <h4 style="background-color: rgba(0,0,0,0);color: rgb(255,255,255);"><span style="text-decoration: underline;">How do I make a hive?</span><br></h4>
+                    <p style="color: rgb(255,255,255);font-size: 16px;"><br>Making a hive is as easy as setting up a chat room and editing a wiki. Actually, that’s the entire process!<br>All you need to do to make your own hive is to set up a chat roomor forum and add your hive to the hives table on this
+                        wiki page.<br>The easiest way to do this is to join the LBRY discord #makeahivechannel and ask for you own hive role and channel. After a brief chat with a friendly moderator, you’ll have your own room and role made right<br> on
+                        the LBRY discord. The LBRY discord is already a buzzing place so this is probably the best way to find more people for your new hive.<br><br><br></p>
+                    <p></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="/assets/js/jquery.min.js"></script>
+    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
