diff --git a/public/assets/css/network/public.css b/public/assets/css/network/public.css
index 802fcb5989..6294b7d4d5 100644
--- a/public/assets/css/network/public.css
+++ b/public/assets/css/network/public.css
@@ -104,27 +104,62 @@
     border-radius: var(--small-size);
 }
 .note-info {
+    order: 1;
     background-color: var(--bg1);
     box-sizing: border-box;
-    padding: 5px;
-    border-radius: var(--small-size) var(--small-size) 0 0;
+    padding: 5px 10px 5px 10px;
+    border-radius: var(--small-size) 0 0 0;
     display: flex;
     align-items: center;
     flex-grow: 1;
     flex-shrink: 0;
-    width: 100%;
+    width: 50%;
 }
 .note-info b {
     margin-left: var(--small-size);
 }
+.note-info a {
+    height: calc(2 * var(--unit-size));
+}
 .note-info a img {
     width: calc(2 * var(--unit-size));
-    height: auto;
+    height: calc(2 * var(--unit-size));
 }
 .note-content {
+    order: 3;
     word-break: break-word;
     padding: var(--small-size);
     border-radius: 0 0 var(--small-size) var(--small-size);
+    width: 100%;
+}
+
+.note-actions {
+    order: 2;
+    width: 50%;
+    justify-content: right;
+    border-radius: 0 var(--small-size) 0 0;
+    background-color: var(--bg1);
+    box-sizing: border-box;
+    padding: 5px 10px 5px 10px;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+.note-actions a {
+    height: var(--main-size);
+}
+.note-actions a svg {
+    width: var(--main-size);
+    height: var(--main-size);
+    fill: var(--fg);
+}
+
+.replies {
+    order: 4;
+    width: 100%;
+    box-sizing: content-box;
+    padding: var(--unit-size);
 }
 
 /* POSTING */
@@ -173,7 +208,7 @@
     font-family: var(--main-font);
 }
 .target #form_to label {
-    margin-left: 0.5em;
+    margin-left: 0.2em;
 }
 
 /* scope options */
@@ -192,7 +227,7 @@
     vertical-align: middle;
     flex: 1;
     color: var(--fg);
-        padding: var(--unit-size);
+    padding: var(--unit-size);
 }
 .scope .required {
     order: 1;
@@ -202,8 +237,8 @@
 #form_visibility .required {
     font-family: var(--main-font);
     font-weight: 400;
-    margin-left: 0.2em;
-    margin-right: 0.5em;
+    margin-left: 0.1em;
+    margin-right: 1em;
 }
 .scope #form_scope {
     order: 2;
@@ -233,17 +268,56 @@
     width: 100%;
     box-sizing: border-box;
     height: calc(8 * var(--unit-size));
+    resize: vertical;
 }
 
 /* options */
-.note-options {
+.notice-options {
     order: 3;
     display: inline-flex;
-    justify-content: flex-start;
     width: 100%;
     box-sizing: border-box;
     padding: 1%;
+    background-color: var(--bg2);
+    border-radius: 0 0 var(--small-size) 0;
 }
 .send {
-    margin-left: auto;
+    order: 2;
+    width: calc(100% - var(--main-size));
 }
+.send div {
+    float: right;
+    vertical-align: middle;
+}
+
+#form_attachments {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+#form_attachments + label {
+    cursor: pointer;
+}
+#form_attachments:focus + label,
+#form_attachments + label:hover {
+    border-radius: var(--small-size);
+    box-shadow: 0 0px 8px var(--accent);
+}
+.icon-attach {
+    width: var(--main-size);
+    height: var(--main-size);
+    font-size: var(--medium-size);
+    fill: var(--fg);
+    background-color: var(--bg1);
+    padding: 0.3em 1em;
+    border-style: solid;
+    border-color: var(--accent);
+    border-radius: var(--small-size);
+    border-width: 2px;
+    margin-bottom: -0.5em;
+    cursor: pointer;
+    z-index: 0;
+}
\ No newline at end of file
diff --git a/public/assets/css/network/public_mid.css b/public/assets/css/network/public_mid.css
index 4a4ee3f422..82e27c2fe3 100644
--- a/public/assets/css/network/public_mid.css
+++ b/public/assets/css/network/public_mid.css
@@ -104,24 +104,62 @@
     border-radius: var(--small-size);
 }
 .note-info {
+    order: 1;
     background-color: var(--bg1);
     box-sizing: border-box;
-    padding: 5px;
-    border-radius: var(--small-size) var(--small-size) 0 0;
+    padding: 5px 10px 5px 10px;
+    border-radius: var(--small-size) 0 0 0;
     display: flex;
     align-items: center;
     flex-grow: 1;
     flex-shrink: 0;
-    width: 100%;
+    width: 50%;
+}
+.note-info b {
+    margin-left: var(--small-size);
+}
+.note-info a {
+    height: calc(2 * var(--unit-size));
 }
 .note-info a img {
     width: calc(2 * var(--unit-size));
-    height: auto;
+    height: calc(2 * var(--unit-size));
 }
 .note-content {
+    order: 3;
     word-break: break-word;
     padding: var(--small-size);
     border-radius: 0 0 var(--small-size) var(--small-size);
+    width: 100%;
+}
+
+.note-actions {
+    order: 2;
+    width: 50%;
+    justify-content: right;
+    border-radius: 0 var(--small-size) 0 0;
+    background-color: var(--bg1);
+    box-sizing: border-box;
+    padding: 5px 10px 5px 10px;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+.note-actions a {
+    height: var(--main-size);
+}
+.note-actions a svg {
+    width: var(--main-size);
+    height: var(--main-size);
+    fill: var(--fg);
+}
+
+.replies {
+    order: 4;
+    width: 100%;
+    box-sizing: content-box;
+    padding: var(--unit-size);
 }
 
 /* POSTING */
@@ -129,7 +167,7 @@
     display: flex;
     flex: max-content;
 }
-.create-note {
+.create-notice {
     display: flex;
     flex-wrap: wrap;
     flex: max-content;
@@ -141,7 +179,7 @@
 }
 .create-right {
     order: 2;
-    width: 80%;
+    width: 90%;
     border-radius: 0 var(--small-size) var(--small-size) 0;
     background-color: var(--bg3);
 }
@@ -149,7 +187,7 @@
 /* target multi-select */
 .target {
     order: 1;
-    width: 20%;
+    width: 10%;
     background-color: var(--bg1);
     border-radius: var(--small-size) 0 0 var(--small-size);
     font-size: var(--medium-size);
@@ -170,7 +208,7 @@
     font-family: var(--main-font);
 }
 .target #form_to label {
-    margin-left: 0.5em;
+    margin-left: 0.2em;
 }
 
 /* scope options */
@@ -199,8 +237,8 @@
 #form_visibility .required {
     font-family: var(--main-font);
     font-weight: 400;
-    margin-left: 0.2em;
-    margin-right: 0.5em;
+    margin-left: 0.1em;
+    margin-right: 1em;
 }
 .scope #form_scope {
     order: 2;
@@ -230,17 +268,57 @@
     width: 100%;
     box-sizing: border-box;
     height: calc(8 * var(--unit-size));
+    resize: vertical;
 }
 
 /* options */
-.note-options {
+.notice-options {
     order: 3;
     display: inline-flex;
-    justify-content: flex-start;
     width: 100%;
     box-sizing: border-box;
     padding: 1%;
+    background-color: var(--bg2);
+    border-radius: 0 0 var(--small-size) 0;
 }
 .send {
-    margin-left: auto;
+    order: 2;
+    width: calc(100% - var(--main-size));
 }
+.send div {
+    float: right;
+    vertical-align: middle;
+}
+
+#form_attachments {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+#form_attachments + label {
+    cursor: pointer;
+}
+#form_attachments:focus + label,
+#form_attachments + label:hover {
+    border-radius: var(--small-size);
+    box-shadow: 0 0px 8px var(--accent);
+}
+.icon-attach {
+    opacity: 1 !important;
+    cursor: pointer;
+    fill: var(--fg);
+    width: var(--main-size);
+    height: var(--main-size);
+    z-index: 0;
+    background-color: var(--bg1);
+    padding: 0.3em 1em;
+    border-style: solid;
+    border-color: var(--accent);
+    border-radius: var(--small-size);
+    border-width: 2px;
+    font-size: var(--medium-size);
+    margin-bottom: -0.5em;
+}
\ No newline at end of file
diff --git a/public/assets/css/network/public_small.css b/public/assets/css/network/public_small.css
index 203557d40d..1fb48f6387 100644
--- a/public/assets/css/network/public_small.css
+++ b/public/assets/css/network/public_small.css
@@ -104,24 +104,62 @@
     border-radius: var(--small-size);
 }
 .note-info {
+    order: 1;
     background-color: var(--bg1);
     box-sizing: border-box;
-    padding: 5px;
-    border-radius: var(--small-size) var(--small-size) 0 0;
+    padding: 5px 10px 5px 10px;
+    border-radius: var(--small-size) 0 0 0;
     display: flex;
     align-items: center;
     flex-grow: 1;
     flex-shrink: 0;
-    width: 100%;
+    width: 50%;
+}
+.note-info b {
+    margin-left: var(--small-size);
+}
+.note-info a {
+    height: calc(2 * var(--unit-size));
 }
 .note-info a img {
     width: calc(2 * var(--unit-size));
-    height: auto;
+    height: calc(2 * var(--unit-size));
 }
 .note-content {
+    order: 3;
     word-break: break-word;
     padding: var(--small-size);
     border-radius: 0 0 var(--small-size) var(--small-size);
+    width: 100%;
+}
+
+.note-actions {
+    order: 2;
+    width: 50%;
+    justify-content: right;
+    border-radius: 0 var(--small-size) 0 0;
+    background-color: var(--bg1);
+    box-sizing: border-box;
+    padding: 5px 10px 5px 10px;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+.note-actions a {
+    height: var(--main-size);
+}
+.note-actions a svg {
+    width: var(--main-size);
+    height: var(--main-size);
+    fill: var(--fg);
+}
+
+.replies {
+    order: 4;
+    width: 100%;
+    box-sizing: content-box;
+    padding: var(--unit-size);
 }
 
 /* POSTING */
@@ -129,19 +167,19 @@
     display: flex;
     flex: max-content;
 }
-.create-note {
+.create-notice {
     display: flex;
     flex-wrap: wrap;
     flex: max-content;
-    margin-left: 1%;
-    margin-right: 1%;
+    margin-left: 4%;
+    margin-right: 4%;
     border-radius: var(--small-size);
     border: solid 2px var(--accent-low);
     background-color: var(--bg3);
 }
 .create-right {
     order: 2;
-    width: 80%;
+    width: 90%;
     border-radius: 0 var(--small-size) var(--small-size) 0;
     background-color: var(--bg3);
 }
@@ -149,7 +187,7 @@
 /* target multi-select */
 .target {
     order: 1;
-    width: 20%;
+    width: 10%;
     background-color: var(--bg1);
     border-radius: var(--small-size) 0 0 var(--small-size);
     font-size: var(--medium-size);
@@ -170,7 +208,7 @@
     font-family: var(--main-font);
 }
 .target #form_to label {
-    margin-left: 0.5em;
+    margin-left: 0.2em;
 }
 
 /* scope options */
@@ -199,8 +237,8 @@
 #form_visibility .required {
     font-family: var(--main-font);
     font-weight: 400;
-    margin-left: 0.2em;
-    margin-right: 0.5em;
+    margin-left: 0.1em;
+    margin-right: 1em;
 }
 .scope #form_scope {
     order: 2;
@@ -230,17 +268,57 @@
     width: 100%;
     box-sizing: border-box;
     height: calc(8 * var(--unit-size));
+    resize: vertical;
 }
 
 /* options */
-.note-options {
+.notice-options {
     order: 3;
     display: inline-flex;
-    justify-content: flex-start;
     width: 100%;
     box-sizing: border-box;
     padding: 1%;
+    background-color: var(--bg2);
+    border-radius: 0 0 var(--small-size) 0;
 }
 .send {
-    margin-left: auto;
+    order: 2;
+    width: calc(100% - var(--main-size));
 }
+.send div {
+    float: right;
+    vertical-align: middle;
+}
+
+#form_attachments {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+#form_attachments + label {
+    cursor: pointer;
+}
+#form_attachments:focus + label,
+#form_attachments + label:hover {
+    border-radius: var(--small-size);
+    box-shadow: 0 0px 8px var(--accent);
+}
+.icon-attach {
+    opacity: 1 !important;
+    cursor: pointer;
+    fill: var(--fg);
+    width: var(--main-size);
+    height: var(--main-size);
+    z-index: 0;
+    background-color: var(--bg1);
+    padding: 0.3em 1em;
+    border-style: solid;
+    border-color: var(--accent);
+    border-radius: var(--small-size);
+    border-width: 2px;
+    font-size: var(--medium-size);
+    margin-bottom: -0.5em;
+}
\ No newline at end of file