diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index dee2fb5..95940bc 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -278,19 +278,14 @@ figure {
 
 .dialog {
     .message {
-        @include bordered-block;
-        display: block;
-        padding: 0.75rem;
         max-width: 0.8*$container-width;
         margin-top: 0.5rem;
         display: flex;
         flex-direction: row;
-        align-items: center;
-        text-align: left;
 
         .message-sender {
             width: 4rem;
-            margin: 0.5rem;
+            margin: 0.75rem;
 
             .feather {
                 width: 2rem;
@@ -298,6 +293,12 @@ figure {
             }
         }
 
+        .message-text {
+            @include bordered-block;
+            display: block;
+            padding: 0.75rem;
+        }
+
         &.side-answer {
             margin-left: auto;
             flex-direction: row-reverse;
diff --git a/layouts/shortcodes/message.html b/layouts/shortcodes/message.html
index cb20438..6a1c5c8 100644
--- a/layouts/shortcodes/message.html
+++ b/layouts/shortcodes/message.html
@@ -1,4 +1,10 @@
 <span class="message side-{{ .Get 0 }}">
-    <span class="message-sender">{{ partial "icon.html" "user" }}</span>
-    <span>{{ .Inner }}</span>
+    <span class="message-sender">
+        {{ if (eq (.Get 1) "reader") }}
+        {{ partial "icon.html" "moon" }}
+        {{ else }}
+        {{ partial "icon.html" "sun" }}
+        {{ end }}
+    </span>
+    <span class="message-text">{{ .Inner }}</span>
 </span>