diff --git a/public/assets/css/network/public.css b/public/assets/css/network/public.css
index a646ee1b70..414e7b22e4 100644
--- a/public/assets/css/network/public.css
+++ b/public/assets/css/network/public.css
@@ -1,22 +1,85 @@
 .content {
     display: flex;
     flex-wrap: wrap;
-    margin-top: calc(5 * var(--main-size));
+    margin-top: calc(4 * var(--main-size));
     justify-content: center;
     align-items: center;
     margin-left: var(--nav-size);
-    margin-right: 0;
+    margin-right: var(--nav-size);
+    margin-bottom: var(--unit-size);
+}
+.content .main {
+    width: 100%;
+    margin-left: var(--unit-size);
+    margin-right: var(--unit-size);
+    box-shadow: var(--shadow);
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
 }
 
-.content div {
-    background-color: #00000050;
-    padding: calc(2*var(--unit-size));
+.main-nav {
+    order: 1;
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    flex: 1;
+    background-color: var(--bg1);
+    padding: var(--medium-size);
     font-size: var(--medium-size);
-    height: 100%;
+    font-family: var(--head-font);
+}
+
+.main-nav ul {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-evenly;
     width: 100%;
-    margin-top: var(--unit-size);
-    margin-left: var(--side-margin);
-    margin-right: var(--side-margin);
-    box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
+    margin-left: calc(2 * var(--side-margin));
+    margin-right: calc(2 * var(--side-margin));
+    padding: 0;
+}
+.main-nav li {
+    display: block;
+    flex: 0 1 auto;
+    list-style-type: none;
+    font-weight: 700;
+}
+.active {
+    color: var(--fg) !important;
+    font-weight: 700;
+}
+
+.main-nav a {
+    color: var(--accent);
+}
+
+.main-nav a:hover {
+    color: var(--fg);
+    transition: all 0.8s ease;
+}
+
+.notices {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--medium-size);
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
+    background-color: var(--bg3);
+    padding: var(--unit-size);
+}
+.notices .timeline-nav {
+    order: 2;
+    width: 100%;
+    box-shadow: var(--shadow);
     border-radius: var(--unit-size);
+}
+.notices .timeline-nav .notices div {
+    background-color: var(--bg4);
+    box-shadow: var(--shadow);
+    padding: var(--unit-size);
+    margin-top: var(--unit-size);
+    border-radius: var(--unit-size);
+    width: 100%;
+}
+.notices .main-nav {
+    width: 100%;
+    font-size: var(--unit-size);
 }
\ No newline at end of file
diff --git a/templates/network/public.html.twig b/templates/network/public.html.twig
index ba0cbe823c..3558f0d4ce 100644
--- a/templates/network/public.html.twig
+++ b/templates/network/public.html.twig
@@ -21,13 +21,48 @@
 
 {% block body %}
     <div class="content">
-        {% if notices is defined %}
-            {% for notice in notices %}
-                <div> {{notice}} </div>
-            {% endfor %}
-        {% else %}
-            No notices here.
-        {% endif %}
+        <div class="main">
+            <nav class='main-nav'>
+                <ul>
+                    <li>
+                        <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Timeline</a>
+                    </li>
+                    <li>
+                        <a href="#">Groups</a>
+                    </li>
+                    <li>
+                        <a href="#">People</a>
+                    </li>
+                </ul>
+            </nav>
+            <hr>
+            <div class="notices">
+                <nav class='main-nav'>
+                    <ul>
+                        <li>
+                            <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Public</a>
+                        </li>
+                        <li>
+                            <a href="#">Home</a>
+                        </li>
+                        <li>
+                            <a href="#">Network</a>
+                        </li>
+                    </ul>
+                </nav>
+                <div class="timeline-nav">
+                    <div class="notices">
+                        {% if notices is defined %}
+                            {% for notice in notices %}
+                                <div> {{notice}} </div>
+                            {% endfor %}
+                        {% else %}
+                            No notices here.
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 {% endblock body %}