diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 455d112cc6..615457eb67 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -4,7 +4,7 @@
       --main-font: 'Open Sans', sans-serif;
 
       /* font and margin sizes */
-      --main-size: 1.2em;
+      --main-size: 1.15em;
       --medium-size: 0.75em;
       --small-size: 0.65em;
       --unit-size: 1em;
@@ -14,7 +14,7 @@
       /* colours and shadows */
       --fg: #eceff4;
       --accent: #81a1c1;
-      --accent-low: #81a1c140;
+      --accent-low: #81a1c160;
       --bg1: #2e3440;
       --bg2: #3b4252;
       --bg3: #434c5e;
@@ -84,18 +84,14 @@ b {
       top: 0;
       left: 0;
       right: 0;
-      background-color: var(--bg1);
+      background-color: var(--accent);
       padding: var(--main-size);
       height: var(--main-size);
-      margin-left: -1px;
-      margin-right: 1px;
-      margin-top: -1px;
-      border: solid 1px var(--accent-low);
 }
 
 #top {
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
       align-items: center;
       flex-wrap: wrap;
       width: 100%;
@@ -104,7 +100,7 @@ b {
 .icon-menu {
       margin: 0;
       padding: 0;
-      display: inline-block;
+      display: none;
       width: var(--unit-size);
       height: var(--unit-size);
       stroke-width: 0;
@@ -114,7 +110,6 @@ b {
 
 #instance {
       order: 2;
-
 }
 
 #instance b {
@@ -122,6 +117,7 @@ b {
       padding: 0;
       vertical-align: middle;
       margin-left: calc(0.2 * var(--unit-size));
+      color: var(--bg1);
 }
 
 .icon-logo {
@@ -132,7 +128,7 @@ b {
       height: var(--unit-size);
       stroke-width: 0;
       stroke: currentColor;
-      fill: currentColor;
+      fill: var(--bg1);
       vertical-align: middle;
 }
 
@@ -174,7 +170,7 @@ b {
       background-color: var(--bg1);
       margin-top: calc(3 * var(--main-size));
       z-index: 0;
-      border: solid 1px var(--accent-low);
+      border-left: solid 1px var(--accent-low);
 }
 
 input.larger {
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index a29c1e8262..9d9b6bc8e1 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -9,8 +9,7 @@
       left: 0;
       top: 0;
       transition: 0.3s ease;
-      border: solid 1px var(--accent-low);
-      margin-left: -1px;
+      border-right: solid 1px var(--accent-low);
 }
 /* left navigation */
 .navbar .left-nav {
@@ -52,11 +51,14 @@
 
 /* checkbox trick remnants */
 .icon-menu label {
-      display: none;
+      opacity: 0;
       cursor: pointer
 }
 #toggle {
-      display: none;
+      position: absolute;
+      z-index: 2;
+      cursor: pointer;
+      opacity: 0;
 }
 #toggle:checked+.navbar {
       display: block;
diff --git a/public/assets/css/network/public.css b/public/assets/css/network/public.css
index 6294b7d4d5..40acd65d4c 100644
--- a/public/assets/css/network/public.css
+++ b/public/assets/css/network/public.css
@@ -10,10 +10,10 @@
 }
 .content .main {
     width: 100%;
-    margin-left: var(--unit-size);
-    margin-right: var(--unit-size);
+    margin-left: 4%;
+    margin-right: 4%;
     margin-top: var(--unit-size);
-    border-radius: var(--small-size);
+    border-radius: var(--unit-size);
     background-color: var(--bg3);
     border: solid 2px var(--accent-low);
 }
@@ -27,13 +27,15 @@
     background-color: var(--bg1);
     padding: var(--medium-size);
     font-family: var(--head-font);
-    border-radius: var(--small-size) var(--small-size) 0 0;
+    border-radius: var(--unit-size) var(--unit-size) 0 0;
+    border-bottom: solid 2px var(--accent-low);
 }
 
 .main-nav ul {
     display: flex;
     align-items: stretch;
     justify-content: space-evenly;
+    text-align: center;
     width: 100%;
     font-size: var(--medium-size);
     margin-left: calc(2 * var(--side-margin));
@@ -45,6 +47,7 @@
     flex: 0 1 auto;
     list-style-type: none;
     font-weight: 700;
+    width: 10%;
 }
 .notes-wrap .main-nav ul {
     font-size: var(--unit-size);
@@ -74,7 +77,7 @@
     display: flex;
     flex-wrap: wrap;
     font-size: var(--medium-size);
-    border-radius: var(--small-size);
+    border-radius: var(--unit-size);
     background-color: var(--bg3);
     box-shadow: var(--shadow);
     margin: var(--unit-size);
@@ -86,7 +89,7 @@
 }
 .notes-wrap .timeline .notes > div {
     margin:  var(--unit-size) var(--unit-size) 0 var(--unit-size);
-    border-radius: var(--small-size);
+    border-radius: var(--unit-size);
     width: 100%;
 }
 .notes-wrap .timeline .notes > div:last-child {
@@ -101,14 +104,16 @@
     display: flex;
     flex-wrap: wrap;
     border: solid 2px var(--accent-low);
-    border-radius: var(--small-size);
+    border-radius: var(--unit-size);
+    box-shadow: var(--shadow);
+    margin-bottom: var(--unit-size);
 }
 .note-info {
     order: 1;
     background-color: var(--bg1);
     box-sizing: border-box;
     padding: 5px 10px 5px 10px;
-    border-radius: var(--small-size) 0 0 0;
+    border-radius: var(--unit-size) 0 0 0;
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -129,7 +134,7 @@
     order: 3;
     word-break: break-word;
     padding: var(--small-size);
-    border-radius: 0 0 var(--small-size) var(--small-size);
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
     width: 100%;
 }
 
@@ -137,7 +142,7 @@
     order: 2;
     width: 50%;
     justify-content: right;
-    border-radius: 0 var(--small-size) 0 0;
+    border-radius: 0 var(--unit-size) 0 0;
     background-color: var(--bg1);
     box-sizing: border-box;
     padding: 5px 10px 5px 10px;
@@ -148,6 +153,7 @@
 }
 .note-actions a {
     height: var(--main-size);
+    margin-left: auto;
 }
 .note-actions a svg {
     width: var(--main-size);
@@ -159,28 +165,30 @@
     order: 4;
     width: 100%;
     box-sizing: content-box;
-    padding: var(--unit-size);
+    padding: var(--unit-size) var(--unit-size) 0 var(--unit-size);
 }
 
 /* POSTING */
 .content > form {
     display: flex;
     flex: max-content;
+    width: -webkit-fill-available;
 }
 .create-notice {
     display: flex;
     flex-wrap: wrap;
     flex: max-content;
+    width: -webkit-fill-available;
     margin-left: 4%;
     margin-right: 4%;
-    border-radius: var(--small-size);
+    border-radius: var(--unit-size);
     border: solid 2px var(--accent-low);
     background-color: var(--bg3);
 }
 .create-right {
     order: 2;
     width: 90%;
-    border-radius: 0 var(--small-size) var(--small-size) 0;
+    border-radius: 0 var(--unit-size) var(--unit-size) 0;
     background-color: var(--bg3);
 }
 
@@ -189,15 +197,16 @@
     order: 1;
     width: 10%;
     background-color: var(--bg1);
-    border-radius: var(--small-size) 0 0 var(--small-size);
-    font-size: var(--medium-size);
+    border-radius: var(--unit-size) 0 0 var(--unit-size);
 }
 .target-top {
-    padding: var(--unit-size);
+    padding: var(--unit-size) var(--unit-size) 0 var(--unit-size);
+    font-size: var(--medium-size);
 }
 .target-bot {
     padding-left: var(--unit-size);
     padding-bottom: var(--unit-size);
+    font-size: var(--medium-size);
 }
 .target .required {
     font-weight: 800;
@@ -218,14 +227,14 @@
     display: flex;
     flex-wrap: wrap;
     color: var(--fg);
-    font-size: var(--medium-size);
     background-color: var(--bg1);
-    border-radius: 0 var(--small-size) 0 0;
+    border-radius: 0 var(--unit-size) 0 0;
 }
-.scope div {
+.scope > div {
     display: inline;
     vertical-align: middle;
     flex: 1;
+    font-size: var(--medium-size);
     color: var(--fg);
     padding: var(--unit-size);
 }
@@ -260,7 +269,7 @@
     flex-shrink: 0;
 }
 #form_content {
-    background-color: var(--bg2);
+    background-color: var(--bg3);
     padding: var(--unit-size);
     color: var(--fg);
     font-size: var(--medium-size);
@@ -278,8 +287,8 @@
     width: 100%;
     box-sizing: border-box;
     padding: 1%;
-    background-color: var(--bg2);
-    border-radius: 0 0 var(--small-size) 0;
+    background-color: var(--bg3);
+    border-radius: 0 0 var(--unit-size) 0;
 }
 .send {
     order: 2;
@@ -303,7 +312,7 @@
 }
 #form_attachments:focus + label,
 #form_attachments + label:hover {
-    border-radius: var(--small-size);
+    border-radius: var(--unit-size);
     box-shadow: 0 0px 8px var(--accent);
 }
 .icon-attach {
@@ -315,7 +324,7 @@
     padding: 0.3em 1em;
     border-style: solid;
     border-color: var(--accent);
-    border-radius: var(--small-size);
+    border-radius: var(--unit-size);
     border-width: 2px;
     margin-bottom: -0.5em;
     cursor: pointer;
diff --git a/public/assets/icons/checkmark.svg b/public/assets/icons/checkmark.svg
new file mode 100644
index 0000000000..9ab653dcf0
--- /dev/null
+++ b/public/assets/icons/checkmark.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   id="svg6"
+   sodipodi:docname="checkmark.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1382"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="29.875"
+     inkscape:cx="16.066946"
+     inkscape:cy="16"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <title
+     id="title2">checkmark</title>
+  <path
+     d="M27 4l-15 15-7-7-5 5 12 12 20-20z"
+     id="path4"
+     style="fill:#2e3440;fill-opacity:1" />
+</svg>