diff --git a/package.json b/package.json
index e00725c..2bae395 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "udn",
-  "version": "1.0.0-beta5",
+  "version": "1.0.0-beta7",
   "description": "A websocket-based infrastructure for decentralized networks ",
   "bin": {
     "start": "index.ts"
diff --git a/static/dist/styles.css b/static/dist/styles.css
index 4065ca3..037f576 100644
--- a/static/dist/styles.css
+++ b/static/dist/styles.css
@@ -105,6 +105,10 @@ header {
   accent-color: var(--primary);
 }
 
+a {
+  color: var(--link);
+}
+
 /* text */
 
 .success {
@@ -253,6 +257,12 @@ TYPE
   src: url("Fonts/IBMPlexSans-Regular.ttf");
 }
 
+@font-face {
+  font-family: IBM Plex Sans;
+  src: url("Fonts/IBMPlexSans-Bold.ttf");
+  font-weight: bold;
+}
+
 @font-face {
   font-family: IBM Plex Mono;
   src: url("Fonts/IBMPlexMono-Regular.ttf");
@@ -334,7 +344,7 @@ a,
 
 /* display etc */
 .align-start {
-  align-items: start;
+  align-items: start !important;
 }
 
 button:not(.tile),
@@ -345,13 +355,16 @@ label.inline,
 .modal,
 select,
 textarea,
-.align-center,
 .tile:not(label) {
   align-items: center;
 }
 
+.align-center {
+  align-items: center !important;
+}
+
 .align-end {
-  align-items: end;
+  align-items: end !important;
 }
 
 label,
@@ -365,8 +378,6 @@ input[type="checkbox"],
 input[type="radio"],
 label.inline,
 main,
-.flex-column,
-.flex-row,
 .modal[open],
 .modal > div,
 .tile,
@@ -374,8 +385,13 @@ main,
   display: flex;
 }
 
+.flex-column,
+.flex-row {
+  display: flex;
+}
+
 .grid {
-  display: grid;
+  display: grid !important;
 }
 
 button:not(.tile),
@@ -391,49 +407,78 @@ textarea {
 }
 
 main,
-.flex,
 .tile,
 .tile > div {
   flex: 1;
 }
 
-.flex-column,
+.flex {
+  flex: 1 !important;
+}
+
+.flex-no {
+  flex: 0 !important;
+}
+
 .modal > div,
 .tile > div {
   flex-direction: column;
 }
 
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
 button,
-.tile {
+label.inline,
+.tile,
+.control-gap {
   gap: var(--gap-in-controls);
 }
 
 .gap {
-  gap: var(--gap-between-tiles);
+  gap: var(--gap-between-tiles) !important;
 }
 
 header,
-button,
-.justify-apart {
+button {
   justify-content: space-between;
 }
 
-.justify-start,
+.justify-apart {
+  justify-content: space-between !important;
+}
+
 .tile {
   justify-content: start;
 }
 
+.justify-start {
+  justify-content: start !important;
+}
+
 footer,
 header button,
 input[type="checkbox"],
 input[type="radio"],
-.justify-center,
 .modal {
   justify-content: center;
 }
 
+.justify-center {
+  justify-content: center !important;
+}
+
 .justify-end {
-  justify-content: end;
+  justify-content: end !important;
 }
 
 /* opacity */
@@ -451,12 +496,19 @@ label span,
 /* padding, margin, etc */
 h1,
 h2,
-h3,
+h3 {
+  margin: var(--control-padding) 0px;
+}
+
 main,
 p {
   margin: 0px;
 }
 
+.margin-0 {
+  margin: 0px !important;
+}
+
 hr {
   margin: var(--content-margin) 0px;
 }
@@ -469,6 +521,10 @@ label:not(.tile) {
   margin-bottom: var(--label-margin-bottom);
 }
 
+.margin-bottom {
+  margin-bottom: var(--gap-between-tiles) !important;
+}
+
 label.tile {
   margin-bottom: var(--gap-between-tiles);
 }
@@ -487,6 +543,10 @@ input[type="radio"] {
   padding: 0px;
 }
 
+.padding-0 {
+  padding: 0 !important;
+}
+
 article > div {
   padding: var(--content-padding);
 }
@@ -497,11 +557,20 @@ select {
   padding: 0px var(--control-padding);
 }
 
+.padding-h {
+  padding: 0px var(--control-padding) !important;
+}
+
+label.inline,
 textarea,
 .tile:not(label) {
   padding: var(--control-padding);
 }
 
+.padding {
+  padding: var(--control-padding) !important;
+}
+
 .modal main {
   padding: var(--modal-padding);
 }
@@ -518,13 +587,17 @@ label.tile:has(> span.icon) {
   padding-left: var(--control-padding);
 }
 
+label.tile:has(> span.icon) input {
+  padding-left: 0px;
+}
+
 article > div {
   padding-bottom: calc(
     var(--menu-height-mobile) + var(--control-height) + var(--content-padding)
   );
 }
 
-label {
+label:not(.inline) {
   text-indent: var(--control-padding);
 }
 
@@ -541,76 +614,104 @@ label.tile:has(> span.icon) {
 article > div,
 footer,
 header,
-select + .icon,
-.absolute {
+select + .icon {
   position: absolute;
 }
 
-.modal,
-.fixed {
+.absolute {
+  position: absolute !important;
+}
+
+.modal {
   position: fixed;
 }
 
+.fixed {
+  position: fixed !important;
+}
+
 article,
 main,
 input,
-label,
-.relative {
+label {
   position: relative;
 }
 
+.relative {
+  position: relative !important;
+}
+
 .sticky {
-  position: sticky;
+  position: sticky !important;
 }
 
 article > div,
 header,
-.modal,
-.top-0 {
+.modal {
   top: 0;
 }
 
-article > div,
-footer,
-header,
-.modal,
-.left-0 {
-  left: 0px;
+.top-0 {
+  top: 0 !important;
 }
 
 article > div,
 footer,
 header,
-.modal,
-.right-0 {
+.modal {
+  left: 0px;
+}
+
+.left-0 {
+  left: 0px !important;
+}
+
+article > div,
+footer,
+header,
+.modal {
   right: 0px;
 }
 
+.right-0 {
+  right: 0px !important;
+}
+
 select + .icon {
   right: var(--control-marker-padding);
 }
 
 footer {
+  bottom: var(--safe-area-bottom);
+}
+
+body:has(> menu) footer {
   bottom: var(--menu-height-mobile);
 }
 
 article > div,
 select + .icon,
-.modal,
-.bottom-0 {
+.modal {
   bottom: 0px;
 }
 
+.bottom-0 {
+  bottom: 0px !important;
+}
+
 /* size */
 article,
 main,
 select + .icon,
-.height-100,
 .modal > div,
 .modal main {
   height: 100%;
 }
 
+.height-100 {
+  height: 100% !important;
+}
+
 button:not(.tile):not(header *),
 footer,
 input:not([type="checkbox"]):not([type="radio"]),
@@ -630,7 +731,7 @@ article {
 }
 
 .width-50 {
-  width: 50%;
+  width: 50% !important;
 }
 
 article,
@@ -641,12 +742,15 @@ main,
 select,
 textarea,
 .modal > div,
+.tile,
+.tile > div {
+  width: 100%;
+}
+
 .width-content,
 .width-input,
-.tile,
-.tile > div,
 .width-100 {
-  width: 100%;
+  width: 100% !important;
 }
 
 header button {
@@ -684,6 +788,7 @@ code {
 }
 
 .secondary,
+.secondary *,
 .helper-text,
 .error-text,
 label {
@@ -750,7 +855,8 @@ input[type="radio"]:checked::before {
 LAYOUT
 */
 /* basic */
-body, html {
+body,
+html {
   display: flex;
   flex-direction: column-reverse;
 
@@ -826,6 +932,10 @@ main {
   overflow-x: scroll;
 }
 
+.tile {
+  word-break: break-all;
+}
+
 /* scrolling */
 main {
   scrollbar-width: none;
@@ -847,7 +957,7 @@ main {
   scroll-snap-type: x mandatory;
 }
 
-/* desktop */
+/* tablet & up */
 @media (min-width: 640px) {
   /* basic */
   .mobile-only {
@@ -870,19 +980,25 @@ main {
   }
 
   p,
-  .width-content,
   .modal > div {
     max-width: var(--max-content-width);
   }
 
+  .width-content {
+    max-width: var(--max-content-width) !important;
+  }
+
   input,
   label,
   select,
-  textarea,
-  .width-input {
+  textarea {
     max-width: var(--max-input-width);
   }
 
+  .width-input {
+    max-width: var(--max-input-width) !important;
+  }
+
   /* layout */
   body {
     flex-direction: row;
@@ -923,6 +1039,13 @@ main {
   }
 }
 
+/* desktop */
+@media (min-width: 1024px) {
+  :root {
+    --split-pane-width-desktop: 400px;
+  }
+}
+
 /*
 ICONS
  */
diff --git a/static/dist/sw.js b/static/dist/sw.js
index dd9bb4e..5768bc6 100644
--- a/static/dist/sw.js
+++ b/static/dist/sw.js
@@ -35,4 +35,4 @@ async function getFromCache(event) {
 
 self.addEventListener("fetch", (event) => {
   handleRequest(event);
-});
+});
\ No newline at end of file