diff --git a/images/logo-01.svg b/images/logo-01.svg
new file mode 100644
index 0000000..9a232ac
--- /dev/null
+++ b/images/logo-01.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 173.25 158.6"><defs><style>.cls-1{fill:#3a72e9;}.cls-2{fill:#78c9ec;}</style></defs><title>logo</title><circle class="cls-1" cx="85.34" cy="49.6" r="5.05"/><circle class="cls-1" cx="85.34" cy="111.58" r="5.06"/><circle class="cls-1" cx="116.33" cy="80.59" r="5.05"/><circle class="cls-1" cx="54.35" cy="80.59" r="5.05"/><circle class="cls-1" cx="107.25" cy="58.68" r="5.05" transform="translate(-10.08 93.01) rotate(-44.99)"/><circle class="cls-1" cx="63.43" cy="102.5" r="5.05" transform="translate(-53.9 74.89) rotate(-45.01)"/><circle class="cls-1" cx="107.25" cy="102.5" r="5.05" transform="translate(-41.06 105.88) rotate(-45.01)"/><circle class="cls-1" cx="63.43" cy="58.68" r="5.05" transform="translate(-22.91 62.02) rotate(-44.99)"/><circle class="cls-1" cx="96.92" cy="51.84" r="5.05" transform="translate(12.63 122.38) rotate(-68.07)"/><path class="cls-1" d="M75.65,104.65a5.05,5.05,0,1,0,2.81,6.58A5.06,5.06,0,0,0,75.65,104.65Z"/><path class="cls-1" d="M112.2,96.85a5.05,5.05,0,1,0-2.8-6.58A5.06,5.06,0,0,0,112.2,96.85Z"/><path class="cls-1" d="M61.28,70.9a5.05,5.05,0,1,0-6.57,2.8A5,5,0,0,0,61.28,70.9Z"/><path class="cls-1" d="M115.83,73.1a5.06,5.06,0,1,0-6.63-2.67A5.06,5.06,0,0,0,115.83,73.1Z"/><circle class="cls-1" cx="56.83" cy="92.73" r="5.06" transform="translate(-31.79 29.68) rotate(-23.06)"/><path class="cls-1" d="M95.5,104.45a5.06,5.06,0,1,0,6.63,2.67A5.06,5.06,0,0,0,95.5,104.45Z"/><circle class="cls-1" cx="73.2" cy="52.08" r="5.05" transform="translate(-14.55 32.83) rotate(-23.06)"/><circle class="cls-2" cx="85.18" cy="80.8" r="15.51"/><circle class="cls-2" cx="48.7" cy="44.2" r="8.44"/><circle class="cls-2" cx="85.34" cy="28.82" r="8.44"/><circle class="cls-2" cx="121.73" cy="43.95" r="8.44"/><circle class="cls-2" cx="121.73" cy="117.23" r="8.44"/><circle class="cls-2" cx="85.19" cy="132.36" r="8.44"/><circle class="cls-2" cx="48.96" cy="117.23" r="8.44"/><circle class="cls-2" cx="33.58" cy="80.94" r="8.44"/><circle class="cls-2" cx="138.41" cy="80.94" r="8.44"/></svg>
\ No newline at end of file
diff --git a/package.json b/package.json
index 13bdf90..64f245d 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "@polymer/polymer": "^3.1.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "babel-eslint": "^10.0.2",
-    "bulma": "^0.7.5",
+    "bulma": "^0.8.2",
     "cool-checkboxes-for-bulma.io": "^1.1.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "js-cookie": "^2.2.0",
diff --git a/src/components/groups-avatar.js b/src/components/groups-avatar.js
new file mode 100644
index 0000000..bb4128a
--- /dev/null
+++ b/src/components/groups-avatar.js
@@ -0,0 +1,20 @@
+import { html, LitElement } from 'lit-element';
+import avatarStyles from '../../style/groups-avatar.scss';
+
+class avatarGroups extends LitElement {
+  static get styles() {
+    return [avatarStyles];
+  }
+
+  render() {
+    return html`
+      <section class="avatar">
+        <figure class="image is-128x128 avatar-figure">
+          <img class="is-rounded" src="https://scontent.fopo1-1.fna.fbcdn.net/v/l/t1.0-9/537484_224892540989084_1267897031_n.jpg?_nc_cat=104&_nc_sid=09cbfe&_nc_ohc=XFXRaFbyn0AAX84b7iF&_nc_ht=scontent.fopo1-1.fna&oh=a63ebf898d71c55443aab13cb60ce95d&oe=5EFFF95A" />
+        </figure>
+      </section>
+    `;
+  }
+}
+
+window.customElements.define('groups-avatar', avatarGroups);
diff --git a/src/components/groups-banner.js b/src/components/groups-banner.js
new file mode 100644
index 0000000..bb2c470
--- /dev/null
+++ b/src/components/groups-banner.js
@@ -0,0 +1,20 @@
+import { html, LitElement } from 'lit-element';
+import bannerStyles from '../../style/groups-banner.scss';
+
+class bannerGroups extends LitElement {
+  static get styles() {
+    return [bannerStyles];
+  }
+
+  render() {
+    return html`
+      <section>
+        <figure class="image is-1by3 is-fullwidth banner">
+          <img src="https://images.pexels.com/photos/3184660/pexels-photo-3184660.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
+        </figure>
+      </section>
+    `;
+  }
+}
+
+window.customElements.define('groups-banner', bannerGroups);
diff --git a/src/components/groups-button.js b/src/components/groups-button.js
new file mode 100644
index 0000000..a1557f6
--- /dev/null
+++ b/src/components/groups-button.js
@@ -0,0 +1,24 @@
+import { html, LitElement } from 'lit-element';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-icons/social-icons.js';
+import sharedStyles from '../../style/app.scss';
+import buttonStyles from '../../style/groups-button.scss';
+
+class buttonGroups extends LitElement {
+  static get styles() {
+    return [sharedStyles, buttonStyles];
+  }
+
+  render() {
+    return html`
+      <button class="button group-join-button">
+        <span class="icon is-small group-join-icon">
+          <iron-icon icon="social:group-add"></iron-icon>
+        </span>
+        <span>Join Group</span>
+      </button>
+    `;
+  }
+}
+
+window.customElements.define('groups-button', buttonGroups);
diff --git a/src/components/groups-header.js b/src/components/groups-header.js
new file mode 100644
index 0000000..95ca0ad
--- /dev/null
+++ b/src/components/groups-header.js
@@ -0,0 +1,41 @@
+import { html, LitElement } from 'lit-element';
+import headerStyles from '../../style/groups-header.scss';
+import sharedStyles from '../../style/app.scss';
+import './groups-button.js';
+
+class headerGroups extends LitElement {
+  static get styles() {
+    return [sharedStyles, headerStyles];
+  }
+
+  render() {
+    return html`
+      <section class="level">
+        <!-- Left side -->
+        <div class="level-left">
+          <div class="level-item">
+            <section class="title-header">
+              <h1>Open Apereo 2020</h1>
+            </section>
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            <groups-button></groups-button>
+          </div>
+        </div>
+      </section>
+
+      <section class="about-header">
+        <p>
+          The Open Apereo 2020 is scheduled for June 15-19. You’re probably aware of the significant changes to our
+          major annual international event, Open Apereo 2020, we were planning this year. If you hadn’t heard about the
+          changed shape of the event,
+          <a href="https://www.apereo.org/content/open-apereo-2020-vision">you can read about it here.</a>
+        </p>
+      </section>
+    `;
+  }
+}
+
+window.customElements.define('groups-header', headerGroups);
diff --git a/src/components/groups-tabs.js b/src/components/groups-tabs.js
new file mode 100644
index 0000000..7671400
--- /dev/null
+++ b/src/components/groups-tabs.js
@@ -0,0 +1,52 @@
+import { html, LitElement } from 'lit-element';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-icons/social-icons.js';
+import '@polymer/iron-icons/av-icons.js';
+import tabsStyles from '../../style/groups-tabs.scss';
+
+class tabsGroups extends LitElement {
+  static get styles() {
+    return [tabsStyles];
+  }
+
+  render() {
+    return html`
+      <div class="tab">
+        <button class="tablinks" onclick="openTab(event, 'Home')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="icons:home"></iron-icon>
+          </span>
+          <span>Home</span>
+        </button>
+        <button class="tablinks" onclick="openTab(event, 'About')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="icons:error-outline"></iron-icon>
+          </span>
+          <span>About</span>
+        </button>
+        <button class="tablinks" onclick="openTab(event, 'Library')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="av:library-books"></iron-icon>
+          </span>
+          <span>Library</span>
+        </button>
+        <button class="tablinks" onclick="openTab(event, 'Members')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="social:people-outline"></iron-icon>
+          </span>
+          <span>Members</span>
+        </button>
+        <button class="tablinks" onclick="openTab(event, 'Settings')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="icons:settings"></iron-icon>
+          </span>
+          <span>Settings</span>
+        </button>
+      </div>
+
+      <hr class="section-divider">
+    `;
+  }
+}
+
+window.customElements.define('groups-tabs', tabsGroups);
diff --git a/src/components/groups.js b/src/components/groups.js
index ad9aa2e..fd439f4 100644
--- a/src/components/groups.js
+++ b/src/components/groups.js
@@ -6,8 +6,12 @@ import groupButtonStyles from '../../style/groups-filter.scss';
 import { PageViewElement } from './page-view-element.js';
 import './top-nav.js';
 import './sidebar.js';
+import './groups-banner.js';
+import './groups-avatar.js';
+import './groups-header.js';
+import './groups-tabs.js';
 import './groups-feed.js';
-import './groups-about.js';
+import './groups-button.js';
 import './news-feed.js';
 import './quick-settings.js';
 import './tags.js';
@@ -40,30 +44,38 @@ class OAEGroups extends PageViewElement {
                           <li>Open Apereo 2019</li>
                         </ul>
                       </section>
-                      <nav class="level">
-                        <!-- Left side -->
-                        <div class="level-left">
-                          <div class="level-item">
-                            <span class="dashboard-icon">
-                              <iron-icon icon="icons:update"></iron-icon>
-                            </span>
-                            <h3>Recent Activity</h3>
+
+                      <groups-banner></groups-banner>
+                      <groups-avatar></groups-avatar>
+                      <groups-header></groups-header>
+                      <groups-tabs></groups-tabs>
+
+                      <section>
+                        <div class="level">
+                          <!-- Left side -->
+                          <div class="level-left">
+                            <div class="level-item activity">
+                              <span class="dashboard-icon">
+                                <iron-icon icon="icons:update"></iron-icon>
+                              </span>
+                              <h3>Recent Activity</h3>
+                            </div>
                           </div>
-                        </div>
-                        <!-- Right side -->
-                        <div class="level-right">
-                          <div class="buttons">
-                            <button class="button filter-feed filter-active-feed">Most Recent</button>
-                            <button class="button filter-feed">Oldest</button>
+                          <!-- Right side -->
+                          <div class="level-right">
+                            <div class="buttons">
+                              <button class="button filter-feed filter-active-feed">Most Recent</button>
+                              <button class="button filter-feed">Oldest</button>
+                            </div>
                           </div>
                         </div>
-                      </nav>
+                      </section>
+
                       <news-feed></news-feed>
                       <news-feed></news-feed>
                       <news-feed></news-feed>
                     </div>
                     <div class="column is-one-fifth">
-                      <groups-about></groups-about>
                     </div>
                   </div>
                 </div>
diff --git a/src/components/homepage-navV2.js b/src/components/homepage-navV2.js
index 439965f..4b0ff55 100644
--- a/src/components/homepage-navV2.js
+++ b/src/components/homepage-navV2.js
@@ -15,7 +15,7 @@ class homeNavV2 extends LitElement {
       <nav class="navbar home-nav">
         <div class="navbar-brand">
           <a class="navbar-item logo" href="http://0.0.0.0:8080/oae">
-            <img src="/images/logo-oae9.svg" />
+            <img src="/images/logo-01.svg" />
           </a>
         </div>
         <div class="navbar-end navEnd">
diff --git a/src/components/homepage-searchV2.js b/src/components/homepage-searchV2.js
index d840f3b..af62f3f 100644
--- a/src/components/homepage-searchV2.js
+++ b/src/components/homepage-searchV2.js
@@ -20,6 +20,7 @@ class homeSearchV2 extends LitElement {
           </span>
         </div>
       </div>
+      
     `;
   }
 }
diff --git a/src/components/library-table.js b/src/components/library-table.js
index 42551c9..7a2c807 100644
--- a/src/components/library-table.js
+++ b/src/components/library-table.js
@@ -66,7 +66,7 @@ class libraryTable extends LitElement {
                                 <div class="level-left">
                                     <div class="level-item">
                                         <p class="library-designation-hover">
-                                            Group - Design Matters
+                                            Design Matters
                                         </p<
                                     </div>
                                     <div class="level-item library-designation-tag">
@@ -114,7 +114,7 @@ class libraryTable extends LitElement {
                                 <div class="level-left">
                                     <div class="level-item">
                                         <p class="library-designation-hover">
-                                            Group - Open Apereo 
+                                            Open Apereo 
                                         </p<
                                     </div>
                                     <div class="level-item library-designation-tag">
@@ -162,7 +162,7 @@ class libraryTable extends LitElement {
                  <div class="level-left">
                      <div class="level-item">
                          <p class="library-designation-hover">
-                             Group - OAE Development
+                            OAE Development
                          </p<
                      </div>
                      <div class="level-item library-designation-tag">
@@ -210,7 +210,7 @@ class libraryTable extends LitElement {
                                 <div class="level-left">
                                     <div class="level-item">
                                         <p class="library-designation-hover">
-                                            Group - Marketing 
+                                            Marketing 
                                         </p<
                                     </div>
                                     <div class="level-item library-designation-tag">
@@ -258,7 +258,7 @@ class libraryTable extends LitElement {
                  <div class="level-left">
                      <div class="level-item">
                          <p class="library-designation-hover">
-                             RC - OAE Dissertation
+                             OAE Dissertation
                          </p<
                      </div>
                      <div class="level-item library-designation-tag">
@@ -306,7 +306,7 @@ class libraryTable extends LitElement {
                                 <div class="level-left">
                                     <div class="level-item">
                                         <p class="library-designation-hover">
-                                            SB - Classes
+                                            Classes
                                         </p<
                                     </div>
                                     <div class="level-item library-designation-tag">
diff --git a/src/components/library-tags-side.js b/src/components/library-tags-side.js
index a9e1a9f..6484eae 100644
--- a/src/components/library-tags-side.js
+++ b/src/components/library-tags-side.js
@@ -14,12 +14,16 @@ class tagsSide extends LitElement {
   render() {
     return html`
       <div>
+        <hr class="top-divider" />
         <section class="is-flex tag-menu-add-new-wrap">
           <div class="level-left">
             <div class="level-item">
-              <a class="add-menu-label">
-                Add New Label
-              </a>
+              <button class="add-menu-label button">
+                <span class="icon">
+                  <iron-icon icon="add"></iron-icon>
+                </span>
+                <span>New Label</span>
+              </button>
             </div>
           </div>
         </section>
diff --git a/src/components/library.js b/src/components/library.js
index 8cf8f43..d700918 100644
--- a/src/components/library.js
+++ b/src/components/library.js
@@ -35,7 +35,7 @@ class OAELibrary extends PageViewElement {
               <div class="column content-base">
                 <div class=" column content-wrap">
                   <div class=" columns is-flex main-content">
-                    <div class="column is-two-thirds main-left">
+                    <div class="column is-four-fifths main-left">
                       <section class="column activity-dashboard">
                         <section class="is-flex">
                           <ul class="breadcrumb">
@@ -62,9 +62,6 @@ class OAELibrary extends PageViewElement {
                         <library-table></library-table>
                       </section>
                     </div>
-                    <div class="column is-one-fifth is-pulled-right">
-                      <tags-side></tags-side>
-                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/components/news-feed.js b/src/components/news-feed.js
index 1ec3d71..2fc10ac 100644
--- a/src/components/news-feed.js
+++ b/src/components/news-feed.js
@@ -26,13 +26,13 @@ class newsFeed extends LitElement {
                     <img class="is-rounded avatar-news-feed" src="/images/avatar.jpg" />
                   </figure>
                   <section>
-                    <h4>
+                    <p class="user-info" style="margin-bottom: 0;">
                       <a class="feed-user">Michael Brown</a>
                       uploaded a file
                       <span class="panel-icon icon-feed">
                         <iron-icon icon="icons:cloud-upload"></iron-icon>
                       </span>
-                    </h4>
+                    </p>
                     <p>
                       23 March 2017
                     </p>
@@ -42,16 +42,16 @@ class newsFeed extends LitElement {
             </div>
             <div class="level-right">
               <p class="level-item">
-                <a class="button news-pin">
-                  <iron-icon icon="icons:bookmark-border"></iron-icon>
-                </a>
+                <button class="button news-pin">
+                  <iron-icon icon="icons:more-vert"></iron-icon>
+                </button>
               </p>
             </div>
           </nav>
           <section class="column news-feed-message">
-            <h4>
+            <h5>
               Group assignment briefing
-            </h4>
+            </h5>
             <p>
               Here is the briefing for that group assignment we talked about.
             </p>
diff --git a/src/components/sidebar.js b/src/components/sidebar.js
index b05f383..6fe3fb9 100644
--- a/src/components/sidebar.js
+++ b/src/components/sidebar.js
@@ -4,6 +4,7 @@ import '@polymer/iron-icons/social-icons.js';
 import '@polymer/iron-icons/av-icons.js';
 import homepageStyles from '../../style/homepage.scss';
 import sharedStyles from '../../style/app.scss';
+import './library-tags-side.js';
 
 class Sidebar extends LitElement {
   static get styles() {
@@ -13,11 +14,6 @@ class Sidebar extends LitElement {
   render() {
     let version2 = html`
       <aside class="menu">
-        <div class="navbar-brand sidebar-brand">
-          <a class="navbar-item" href="http://0.0.0.0:8080/oae">
-            <img src="/images/logo-oae2.svg" width="112" height="28" />
-          </a>
-        </div>
         <ul class="menu-list">
           <li>
             <span class="icon sidebar-icon">
@@ -60,6 +56,9 @@ class Sidebar extends LitElement {
             </a>
           </li>
         </ul>
+        <section>
+          <tags-side></tags-side>
+        </section>
       </aside>
     `;
 
diff --git a/src/components/top-nav.js b/src/components/top-nav.js
index 79e2718..9d90f8c 100644
--- a/src/components/top-nav.js
+++ b/src/components/top-nav.js
@@ -19,7 +19,7 @@ class topNav extends LitElement {
         <div class="container top-nav">
           <div class="navbar-brand">
             <a class="navbar-item" href="http://0.0.0.0:8080/oae">
-              <img src="/images/logo-oae2.svg" width="112" height="28" />
+              <img src="/images/logo-01.svg" width="112" height="28" />
             </a>
             <div class="navbar-item">
               <div class="field has-addons has-addons-centered">
@@ -81,7 +81,7 @@ class topNav extends LitElement {
         </div>
       </header>
     `;
-    return version2;
+    return version1;
   }
 }
 
diff --git a/style/app.scss b/style/app.scss
index 53b0851..87b8675 100644
--- a/style/app.scss
+++ b/style/app.scss
@@ -12,32 +12,19 @@ $link: #0060df;
 // @import "../node_modules/material-design-icons/iconfont/";
 
 // Bulma *ALL SASS imports
-@import 'bulma/sass/utilities/mixins';
+@import '../node_modules/bulma/sass/utilities/_all.sass';
 @import '../node_modules/bulma/sass/grid/_all.sass';
 @import '../node_modules/bulma/sass/utilities/_all.sass';
 @import '../node_modules/bulma/sass/base/_all.sass';
 @import '../node_modules/bulma/sass/form/_all.sass';
 @import '../node_modules/bulma/sass/layout/_all.sass';
+@import '../node_modules/bulma/sass/elements/_all.sass';
 
 // Components
 @import '../node_modules/bulma/sass/components/navbar.sass';
 @import '../node_modules/bulma/sass/components/dropdown.sass';
 @import '../node_modules/bulma/sass/components/modal.sass';
 @import '../node_modules/bulma/sass/components/level.sass';
-@import '../node_modules/bulma/sass/components/tabs.sass';
-
-// Elements
-@import '../node_modules/bulma/sass/elements/box.sass';
-@import '../node_modules/bulma/sass/elements/button.sass';
-@import '../node_modules/bulma/sass/elements/container.sass';
-@import '../node_modules/bulma/sass/elements/title.sass';
-@import '../node_modules/bulma/sass/elements/image.sass';
-@import '../node_modules/bulma/sass/elements/icon.sass';
-@import '../node_modules/bulma/sass/elements/table.sass';
-
-// Should remake the structure in order to include these imports
-// @import "../node_modules/bulma/sass/elements/_all.sass";
-// @import "../node_modules/bulma/sass/components/_all.sass";
 
 // Material Design Icons
 // Default Styles
@@ -76,7 +63,7 @@ $link: #0060df;
   margin-left: -0.5rem;
 }
 .modal-title.mdi::before {
-  font-size: 1.5em;
+  font-size: 1em;
   line-height: 0.5;
   position: relative;
   top: 0.26rem;
@@ -108,7 +95,7 @@ body {
 }
 
 .container.is-fluid {
-  margin: 0.5em 5.5em 0 5.5em;
+  margin: 0.5em 5.5em 0 5em;
   padding: 0;
   height: 100%;
 }
@@ -158,11 +145,6 @@ body {
   height: 100%;
 }
 
-.sidebar-brand {
-  margin: -10px 0 30px 0;
-  padding-left: 25px;
-}
-
 .navbar-item img {
   max-height: 3.2rem;
 }
@@ -177,12 +159,12 @@ body {
 }
 
 .menu-list {
-  font-size: 14px;
+  font-size: 1em;
   font-family: 'Open Sans', sans-serif;
 }
 
 .menu-list li {
-  padding-left: 30px;
+  padding-left: 0;
   margin-bottom: 18px;
   border-radius: 0 25px 25px 0;
   height: 30px;
@@ -191,15 +173,15 @@ body {
   align-items: center;
   &:hover {
     color: #0060df;
-    background-color: #f5f7ff;
+    background-color: #EDEDF0;
   }
   &:active {
     color: #0060df;
-    background-color: #f5f7ff;
+    background-color: #EDEDF0;
   }
   &:focus {
     color: #0060df;
-    background-color: #f5f7ff;
+    background-color: #EDEDF0;
   }
 }
 
@@ -217,13 +199,17 @@ a.network {
 }
 
 .navbar-divider {
-  margin: 20px 0 0 0;
+  margin: 5px 0 5px 0;
+}
+
+.top-divider {
+  margin: 30px 0 5px 0;
 }
 
 // Top Bar
 .top-nav {
-  margin: 0.5em 5.5em 0.5em 5.5em;
-  max-width: 97%;
+  margin: 0.5em 2.5em 0.5em 2.5em;
+  max-width: 100%;
 }
 
 .topbar-search-icon {
@@ -240,7 +226,7 @@ a.network {
   background-color: transparent;
   box-shadow: none;
   padding-left: 20px;
-  font-size: 14px;
+  font-size: 1em;
   width: 350px;
   &:focus {
     -webkit-appearance: none;
@@ -297,7 +283,7 @@ ul.breadcrumb {
 
 ul.breadcrumb li {
   display: inline;
-  font-size: 13px;
+  font-size: 0.9em;
   color: #424242;
   font-weight: 500;
 }
diff --git a/style/groups-avatar.scss b/style/groups-avatar.scss
new file mode 100644
index 0000000..0644981
--- /dev/null
+++ b/style/groups-avatar.scss
@@ -0,0 +1,12 @@
+.avatar {
+  z-index: 5;
+  margin-top: -100px;
+  margin-left: -3%;
+}
+
+img {
+  border-radius: 150px;
+  width: 150px;
+  height: 150px;
+  object-fit: cover;
+}
diff --git a/style/groups-banner.scss b/style/groups-banner.scss
new file mode 100644
index 0000000..6aa099f
--- /dev/null
+++ b/style/groups-banner.scss
@@ -0,0 +1,9 @@
+.banner {
+  margin: 0;
+}
+
+.banner img {
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+}
diff --git a/style/groups-button.scss b/style/groups-button.scss
new file mode 100644
index 0000000..3ae65f6
--- /dev/null
+++ b/style/groups-button.scss
@@ -0,0 +1,30 @@
+// JOIN BUTTON
+.group-join-button {
+  border-radius: 25px;
+  width: 150px;
+  height: 20px;
+  font-weight: bold;
+  background-color: transparent;
+  border: 2px solid #2962ff;
+  color: #2962ff;
+  &:hover {
+    background-color: #ededf0;
+    color: #2962ff;
+    border: 2px solid #2962ff;
+    color: #2962ff;
+  }
+}
+
+.group-join-button {
+  text-align: center;
+}
+
+.group-name-icon {
+  padding-right: 10px;
+  color: black;
+}
+
+.group-join-icon {
+  padding-right: 10px;
+  color: #2962ff;
+}
diff --git a/style/groups-filter.scss b/style/groups-filter.scss
index 71ad047..5c83011 100644
--- a/style/groups-filter.scss
+++ b/style/groups-filter.scss
@@ -1,7 +1,6 @@
 .filter-feed {
-    color: #0060df;
+    color: #2962ff;
     margin-right: 15px;
-    font-size: 13px;
     height: 20px;
     width: 6em;
     border-radius: 25px;
@@ -10,7 +9,7 @@
   }
   
   .filter-active-feed {
-      background-color: #0060df;
+      background-color: #2962ff;
       color: white;
       &:hover {
           color: white;
diff --git a/style/groups-header.scss b/style/groups-header.scss
new file mode 100644
index 0000000..90fdc7b
--- /dev/null
+++ b/style/groups-header.scss
@@ -0,0 +1,12 @@
+h1{
+  font-weight: bolder;
+  font-size: 1.5em;
+}
+
+.about-header a {
+  color: #2962ff;
+  &:hover {
+    color: #0d47a1;
+  }
+}
+
diff --git a/style/groups-tabs.scss b/style/groups-tabs.scss
new file mode 100644
index 0000000..0b11ffd
--- /dev/null
+++ b/style/groups-tabs.scss
@@ -0,0 +1,50 @@
+/* Style the tab */
+*{
+  font-size: 1em;
+}
+
+.tab {
+  overflow: hidden;
+  border: none;
+  background-color: transparent;
+  padding: 10px 0 10px 0;
+}
+
+/* Style the buttons that are used to open the tab content */
+.tab button {
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 15px 25px 15px 0;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+  border-bottom: 2px solid #2962ff;
+  color: #2962ff;
+}
+
+/* Create an active/current tablink class */
+.tab button.active {
+  background-color: transparent;
+  border-bottom: 2px solid #2962ff;
+}
+
+/* Style the tab content */
+.tabcontent {
+  display: none;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-top: none;
+}
+
+.button-icon {
+  padding-right: 5px;
+}
+
+.section-divider {
+  margin-bottom: 30px;
+  border: 1px solid #EEEEEE;
+}
diff --git a/style/groups.scss b/style/groups.scss
index 84442f9..0914be0 100644
--- a/style/groups.scss
+++ b/style/groups.scss
@@ -1,9 +1,11 @@
 h3 {
     color: #212121;
-    font-size: 14px;
+    font-size: 1em;
   }
   
   .dashboard-icon {
-    color: #212121;
+    color: #2c2a2a;
     margin-right: 0.8em;
-  }
\ No newline at end of file
+  }
+
+  
diff --git a/style/homepage-navv2.scss b/style/homepage-navv2.scss
index 23d2216..1af9986 100644
--- a/style/homepage-navv2.scss
+++ b/style/homepage-navv2.scss
@@ -1,4 +1,3 @@
-
 .navbar-brand {
   padding-left: 3em;
 }
@@ -8,7 +7,8 @@
 }
 
 .navbar-item img {
-  max-height: 3rem;
+  width: 100%;
+  height: 400px;
 }
 
 .home-nav {
diff --git a/style/library-table-entries.scss b/style/library-table-entries.scss
index e846474..dc2eb83 100644
--- a/style/library-table-entries.scss
+++ b/style/library-table-entries.scss
@@ -36,7 +36,7 @@ tr:nth-child(even) {
 }
 
 .library-columns p {
-	font-size: 0.75rem;
+	font-size: 1em;
 	text-transform: uppercase;
 	color: #666666;
 }
@@ -49,7 +49,7 @@ tr:nth-child(even) {
 }
 
 .table p {
-	font-size: 0.75rem;
+	font-size: 0.9em;
 	text-transform: uppercase;
 }
 
diff --git a/style/news-feed.scss b/style/news-feed.scss
index 6c64b29..3819c98 100644
--- a/style/news-feed.scss
+++ b/style/news-feed.scss
@@ -1,9 +1,13 @@
-// News Feed - Dashboard
+// News Feed
 .box {
   box-shadow: none;
   background-color: white;
-  //box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  &:hover {
+    //box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  }
 }
 
 .box-feed {
@@ -13,14 +17,30 @@
 }
 
 * {
-  font-size: 13px;
+  font-size: 1m;
 }
 
+// Avatar
 .avatar-news-feed img {
   height: 100%;
   object-fit: cover;
 }
 
+.content figure {
+  margin-left: 0;
+  margin-right: 1em;
+}
+
+// Avatar Info
+p.user-info {
+  margin-bottom: 0;
+}
+
+.content p {
+  font-size: 1em;
+  margin-bottom: 0;
+}
+
 .news-feed {
   padding: 10px;
 }
@@ -32,24 +52,24 @@
 .news-feed-message {
   margin-left: 65px;
   margin-right: 65px;
-  margin-top: -15px;
+  margin-top: -3em;
   width: auto;
-  background-color: #fafafa;
+  background-color: #f9f8ff;
   border-radius: 5px;
   word-wrap: break-word;
 }
 
-.news-feed-message h4 {
+.news-feed-message h5 {
   font-weight: bold;
   margin-bottom: 5px;
 }
 
 .feed-user {
   text-decoration: none;
-  color: #0060df;
-  background-color: #f5f7ff;
+  color: #424242;
+  font-weight: bold;
   &:hover {
-    color: #0060df;
+    color: #2962ff;
     background-color: #f5f7ff;
     text-decoration: underline;
   }
@@ -58,8 +78,6 @@
 .avatar-news-feed {
   width: 50px;
   height: 50px;
-  margin-left: 0;
-  margin-right: 15px;
 }
 
 .bottom-nav-news {
@@ -80,7 +98,7 @@
   width: 0;
   margin-left: 55px;
   &:hover {
-    color: #0060df;
+    color: #2962ff;
     text-decoration: underline;
   }
 }
@@ -93,42 +111,44 @@
   width: 0;
   margin-left: 90px;
   &:hover {
-    color: #0060df;
+    color: #2962ff;
     text-decoration: underline;
   }
 }
 
 .comments-icon {
-  color: #0060df;
+  color: #272b2e;
   margin-right: 5px;
   &:hover {
-    color: #0060df;
+    color: #272b2e;
   }
 }
 
 .reply-icon {
-  color: #0060df;
+  color: #272b2e;
   margin-right: 5px;
   &:hover {
-    color: #0060df;
+    color: #272b2e;
   }
 }
 
 .icon-feed {
-  color: #0060df;
+  color: #272b2e;
   margin-left: 5px;
 }
 
 .news-pin {
-  background-color: transparent;
-  transform: rotate(-35deg);
   margin-right: 15px;
+  margin-top: -50px;
   border-radius: 25px;
   border: none;
-  background-color: #fafafa;
+  background-color: white;
   color: #424242;
   &:hover {
-    background-color: #0060df;
-    color: white;
+    color: #2962ff;
+  }
+  &:focus,
+  :active {
+    border: none;
   }
 }
diff --git a/style/tag-menu.scss b/style/tag-menu.scss
index 8dea9f4..0479d42 100644
--- a/style/tag-menu.scss
+++ b/style/tag-menu.scss
@@ -4,14 +4,16 @@
 	color: #212121;
 	text-transform: uppercase;
 	font-weight: 500;
-	font-size: 0.75em;
+	font-size: 0.9em;
 }
 
 .add-menu-label {
 	color: #212121;
-	text-transform: uppercase;
-	font-weight: 500;
-	font-size: 0.75em;
+	font-weight: bold;
+	font-size: 1em;
+	background: transparent;
+	border: none;
+	padding: 0;
 	&:hover {
 		color: #0060df;
 	}
diff --git a/style/topnav-buttons.scss b/style/topnav-buttons.scss
index 26b23ff..7c540ee 100644
--- a/style/topnav-buttons.scss
+++ b/style/topnav-buttons.scss
@@ -1,6 +1,5 @@
 // Code in the comments belongs to a previous iteration of the project that might need to be returned to
 
-
 .navbar-item {
   background-color: transparent;
 }
@@ -17,7 +16,7 @@
   color: #0060df;
   margin-top: 18px;
   margin-right: 10px;
-  font-size: 14px;
+  font-size: 1em;
   height: 35px;
   // Original top navbar styling
   // Code is commented in case we need to use this approach again
@@ -29,7 +28,6 @@
 
 .notification-icon {
   color: #212121;
-
 }
 .navbar-link {
   border-radius: 25px;
diff --git a/yarn.lock b/yarn.lock
index 9551ba0..a73ab3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3180,10 +3180,10 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
-bulma@^0.7.5:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.5.tgz#35066c37f82c088b68f94450be758fc00a967208"
-  integrity sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==
+bulma@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.8.2.tgz#5d928f16ed4a84549c2873f95c92c38c69c631a7"
+  integrity sha512-vMM/ijYSxX+Sm+nD7Lmc1UgWDy2JcL2nTKqwgEqXuOMU+IGALbXd5MLt/BcjBAPLIx36TtzhzBcSnOP974gcqA==
 
 busboy@^0.2.11:
   version "0.2.14"