diff --git a/src/Main.elm b/src/Main.elm
index 960081ac9aae8bdb2b4b009a69348c3025ccd4fe..121cc176e1cdebc7bb382060a3c2158beae2e08a 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -1,13 +1,13 @@
 module Main exposing (main)
 
-import Accessibility exposing (Html, b, button, div, p, text)
+import Accessibility exposing (Html, button, div, p, text)
 import Accessibility.Aria exposing (errorMessage)
 import Browser
 import Config exposing (StaticConfig, parseConfig)
 import Duration
 import Editor exposing (Editor)
 import Event exposing (GetMessagesResponse)
-import Html.Attributes exposing (class)
+import Html.Attributes exposing (class, attribute)
 import Html.Events exposing (onClick)
 import Json.Decode as JD
 import LoginForm exposing (FormState(..), LoginForm, initLoginForm, loginWithForm, viewLoginForm)
@@ -378,11 +378,13 @@ viewError : Error -> Html Msg
 viewError { id, message } =
     div [ class "cactus-error", errorMessage message ]
         [ button
-            [ class "cactus-button"
+            [ class "cactus-error-close"
+            , attribute "aria-label" "close"
             , onClick <| CloseError id
             ]
-            [ text "X" ]
-        , b [] [ text <| " Error: " ++ message ]
+            [ text "×" ]
+        , p [ class "cactus-error-text"]
+            [ text <| " Error: " ++ message ]
         ]
 
 
diff --git a/src/style.css b/src/style.css
index 91c33075841fd747a6993e19e9527a41bcd88238..cd4a38f3ba8157bce7cd002045f8144fcf2e94b4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,57 +1,78 @@
+/*
+ * ***** CONTAINER *****
+ */
+ /* container that contains everything */
 .cactus-container {
-  /* everything */
-}
-
-.cactus-error {
-  background-color: darkred;
-  color: white;
-  color: #ff0000;
-  border-radius: 0.4em;
-  padding: 0.4em;
-  margin-top: 0.4em;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 }
 
 
 /*
- * BUTTONS
+ * ***** ERROR *****
  */
-.cactus-button {
-  /* used on all buttons */
-  font-size: 1em;
-  font-weight: bold;
+/* error message */
+.cactus-error {
+  padding: 0.5em;
+  padding-inline-end: 1.5em;
+  border: 2px solid red;
   border-radius: 0.4em;
-  border: 2em;
-  padding: 0.6em 1em 0.6em 1em;
-  margin: 0;
+  /* for absolutely positioned close button */
+  position: relative;
 }
 
-.cactus-button:hover:not([disabled]) {
+/* close button */
+.cactus-error-close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(+5%, -20%);
+  font-size: 1.5em;
+  color: rgb(180, 180, 180);
+  /* todo: remove after using all: unset */
+  background-color: inherit;
+  border: none;
+}
+
+.cactus-error-close:hover:not([disabled]) {
   opacity: 0.8;
   cursor: pointer;
 }
 
-div.cactus-view-more {
-  /* contains the view-more button */
-  padding-top: 1em;
-  text-align: center;
+/* error message */
+.cactus-error-text {
+  color: #ff0000;
+  font-weight: bold;
+  /* todo: remove after using all: unset */
+  margin: 0;
 }
 
 
 /*
- * COMMENT EDITOR SECTION
+ * ***** EDITOR SECTION *****
  */
+ /* comment text field, plus send and login buttons */
 .cactus-editor {
-  /* comment text field, plus send and login buttons */
   display: flex;
   flex-direction: column;
+  gap: 0.5em;
+}
+
+/* todo: use a class */
+.cactus-editor>span {
+  display: flex;
 }
 
 .cactus-editor-textarea {
-  width: 100%;
+  display: flex;
+  flex: 1;
   height: 10rem;
-  background-color: inherit;
   border-radius: 0.4em;
   border: solid 1px rgba(127, 127, 127, 0.5);
+  padding: 0.5em;
+  /* todo: remove after using all: unset */
+  background-color: inherit;
   color: inherit;
   font: inherit;
 }
@@ -62,218 +83,307 @@ div.cactus-view-more {
   font-size: 1.5em;
 }
 
+/* login and post button */
 .cactus-editor-below {
-  /* "use a matrix client", comment button, and login button */
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
+  gap: 0.5em;
+  justify-content: flex-end;
 }
 
-.cactus-editor-below > * {
-  margin-top: 0.5em;
+.cactus-editor-name {
+  display: flex;
+  flex: 1;
 }
 
-.cactus-editor-name {
-  flex-shrink: 0;
-  flex-grow: 1;
+/* todo: use a class */
+.cactus-editor-name>span {
+  display: flex;
+  flex: 1;
+  min-inline-size: 20ch;
+  max-inline-size: 40ch;
 }
 
+/* todo: use a class */
 .cactus-editor-name > span > input {
-  background-color: inherit;
-  color: inherit;
-  width: 100%;
+  inline-size: 100%;
   border-radius: 0.4em;
   border: solid 1px rgba(127, 127, 127, 0.5);
   padding: 0.5em;
-  font-size: 1em;
+  /* todo: remove after using all: unset */
+  background-color: inherit;
+  color: inherit;
+  font-size: inherit;
 }
 
+/* div with login and send buttons  */
 .cactus-editor-buttons {
-  /* div with login and send buttons  */
-  flex-grow: 9999; /* as flexbox child */
-  flex-shrink: 1;
+  display: flex;
+  gap: 0.5em;
+}
 
-  display: flex; /* as flexbox parent */
-  justify-content: flex-end;
+.cactus-login-button {
 }
 
-.cactus-login-button, .cactus-logout-button {
-  margin-left: 0.5em;
+.cactus-logout-button {
 }
+
 .cactus-send-button {
-  margin-left: 0.5em;
 }
+
+/* "Use a Matrix client" button
+when guestPostingEnabled=false and loginEnabled=false */
+/* todo: use on anchor directly without button in it */
 .cactus-matrixdotto-only {
-  /* only used when guestPostingEnabled=false and loginEnabled=false */
-  width: 100%;
+}
+
+/* dont style link */
+/* todo: use .cactus-matrixdotto-only here when button is removed */
+.cactus-editor > a:first-child {
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  /* todo: remove after using all: unset */
+  text-decoration: none;
+  color: inherit;
 }
 
 
 /*
- * LOGIN FORM
+ * ***** LOGIN FORM *****
  */
+ /* pop-up login form */
 .cactus-login-form {
-  /* pop-up login form */
-  padding: 2rem;
-  border-radius: 0.5em;
-  background-color: white;
-  box-shadow: 0 0 1em #0005;
-  z-index: 1;
-
-  display: flex;
-  flex-direction: column;
-  align-content: space-between;
-
   /* place statically in viewport */
   position: fixed;
   left: 50%;
   top: 10%;
   transform: translate(-50%, 0);
+  z-index: 1;
+  border-radius: 0.5em;
+  background-color: white;
+  box-shadow: 0 0 1em #0005;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  padding: 2rem;
 }
 
+/* todo: use a class */
 .cactus-login-form > h3 {
-  text-align: center;
+  align-self: center;
+  font-size: 1.17em;
+  font-weight: bold;
+  /* todo: remove after using all: unset */
+  margin: 0;
 }
 
 .cactus-login-field {
-  padding-top: 0.5em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
 }
 
+/* todo: use a class */
 .cactus-login-field > p {
+  /* todo: remove after using all: unset */
   margin: 0;
 }
 
+/* todo: use a class */
 .cactus-login-field > input {
-  font-size: 1em;
-  padding: 0.5em;
+  inline-size: 100%;
   border-radius: 0.4em;
-  width: 100%;
+  border: solid 1px rgba(127, 127, 127, 0.5);
+  padding: 0.5em;
+  /* todo: remove after using all: unset */
+  background-color: inherit;
+  /* color: inherit; */
+  font-size: inherit;
 }
 
+/* "back" and "log in" buttons */
 .cactus-login-buttons {
-  /* "back" and "log in" buttons in the login form */
   display: flex;
-  align-content: stretch;
-  padding-top: 1em;
-  padding-bottom: 1em;
-
-  --gap: 1em;
-  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
+  gap: 1em;
+  justify-content: space-between;
 }
 
-.cactus-login-buttons > button {
+.cactus-login-buttons > .cactus-button {
   flex: 1;
-  margin: var(--gap) 0 0 var(--gap);
-  padding: 0.6em 0 0.6em 0;
-
-  border-radius: 0.5em;
-  border: 1px;
+  justify-content: center;
 }
 
+/* "Use a Matrix client" button */
+/* todo: use on anchor directly without button in it */
 .cactus-matrixdotto-button {
-  /* "Use a Matrix client" button */
-  width: 100%;
+  flex: 1;
+  justify-content: center;
+}
+
+/* dont style link */
+/* todo: use .cactus-matrixdotto-button here when button is removed */
+.cactus-login-form > a {
+  display: flex;
+  cursor: pointer;
+  /* todo: remove after using all: unset */
+  text-decoration: none;
+  color: inherit;
 }
 
 
 /*
- * COMMENTS
+ * ***** COMMENTS LIST *****
  */
+/* comments container */
+/* todo: use a class */
+.cactus-container>div:last-child {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+/* comments */
+/* todo: use a class */
+.cactus-container>div:last-child>div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+/* a comment */
 .cactus-comment {
-  /* a comment */
   display: flex;
   flex-direction: row;
-  padding-left: 0;
-  padding-right: 0;
-  padding-bottom: 0;
-  padding-top: 1em;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: rgba(127, 127, 127, 0.2);
+  gap: 1em;
+  padding-block-end: 0.5em;
+  border-block-end: 1px solid rgba(127, 127, 127, 0.2);
 }
 
+/* avatar beside comment content */
 .cactus-comment-avatar {
-  /* avatar beside comment content */
-  padding-left: 0;
-  padding-right: 1rem;
+  display: flex;
 }
 
+/* the avatar image */
+/* todo: use a class */
 .cactus-comment-avatar > * {
-  /* the avatar image */
-  margin: 0;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
+  /* todo: remove after using all: unset */
+  margin: 0;
 }
 
+/* in case of no avatar */
+/* todo: use a class same as above */
 .cactus-comment-avatar > p {
-  /* in case of no avatar */
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background: black;
   color: white;
-  text-align: center;
-  line-height: 2.5rem;
 }
 
+/* header and body */
 .cactus-comment-content {
-  /* stuff left of the avatar: header and body */
   display: flex;
   flex-direction: column;
+  gap: 0.5em;
 }
 
+/* user name and posting time */
 .cactus-comment-header {
-  /* user name and posting time */
   display: flex;
-}
-.cactus-comment-header > p {
-  margin: 0;
-  margin-bottom: 0.5em;
+  gap: 0.5em;
+  flex-wrap: wrap;
 }
 
+/* user name */
 .cactus-comment-displayname {
-  /* user name */
   font-weight: bold;
-  padding-right: 0.5rem;
+  /* todo: remove after using all: unset */
+  margin: 0;
 }
 
+/* dont style link */
+/* todo: use a class name, or better replace displayname paragraph with it */
 .cactus-comment-displayname > a {
-  /* dont style link */
+  cursor: pointer;
+  /* todo: remove after using all: unset */
   text-decoration: none;
   color: inherit;
 }
 
+/* comment posting time  */
 .cactus-comment-time {
-  /* comment posting time  */
   opacity: 0.7;
 }
 
+/* text or media content of comment */
 .cactus-comment-body > * {
-  /* text or media content of comment */
-  margin: 0;
-  white-space: pre-line;
 }
 
-
 /* body for different message types */
 .cactus-message-text {
 }
-.cactus-message-text > p {
-  margin-top: 0em;
+
+.cactus-message-text > *:first-child {
+  margin-block-start: 0em;
+}
+
+.cactus-message-text > *:last-child {
+  margin-block-end: 0em;
 }
+
 .cactus-message-emote {
   padding-top: 0.5em;
   opacity: 0.7;
 }
+
 .cactus-message-image {
   max-width: 100%;
   height: auto;
 }
+
 .cactus-message-audio {
 }
+
 .cactus-message-file {
   line-height: 3em;
   margin-left: 1em;
 }
+
 .cactus-message-video {
   max-width: 100%;
 }
+
+
+/*
+ * ***** BUTTONS *****
+ */
+ /* used on all buttons */
+ .cactus-button {
+  display: flex;
+  align-items: center;
+  padding-block: 0.6em;
+  padding-inline: 1em;
+  background-color: rgb(240, 240, 240);
+  font-weight: bold;
+  border-radius: 0.4em;
+  /* todo: remove after using all: unset */
+  /* color: inherit; */
+  font-size: inherit;
+  border: none;
+}
+
+.cactus-button:hover:not([disabled]) {
+  opacity: 0.8;
+  cursor: pointer;
+}
+
+/* contains the view-more button */
+.cactus-view-more {
+  display: flex;
+  justify-content: center;
+}
\ No newline at end of file