diff --git a/public/assets/css/network/public_mid.css b/public/assets/css/network/public_mid.css
new file mode 100644
index 0000000000..6ae497a5e8
--- /dev/null
+++ b/public/assets/css/network/public_mid.css
@@ -0,0 +1,85 @@
+.content {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: calc(4 * var(--main-size));
+ justify-content: center;
+ align-items: center;
+ margin-left: var(--unit-size);
+ margin-right: var(--unit-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);
+}
+
+.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);
+ font-family: var(--head-font);
+}
+
+.main-nav ul {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-evenly;
+ width: 100%;
+ 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/public/assets/css/network/public_small.css b/public/assets/css/network/public_small.css
new file mode 100644
index 0000000000..89092713e1
--- /dev/null
+++ b/public/assets/css/network/public_small.css
@@ -0,0 +1,85 @@
+.content {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: calc(3 * var(--main-size) + 2%);
+ justify-content: center;
+ align-items: center;
+ margin-left: 2%;
+ margin-right: 2%;
+ margin-bottom: 2%;
+}
+.content .main {
+ width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ box-shadow: var(--shadow);
+ border-radius: 0 0 var(--unit-size) 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);
+ font-family: var(--head-font);
+}
+
+.main-nav ul {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-evenly;
+ width: 100%;
+ margin-left: var(--unit-size);
+ margin-right: var(--unit-size);
+ 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: 2%;
+}
+.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 3558f0d4ce..0469243a07 100644
--- a/templates/network/public.html.twig
+++ b/templates/network/public.html.twig
@@ -8,7 +8,9 @@
{% block stylesheets %}
{{ parent() }}
-
+
+
+
{% endblock %}
{% block header %}