diff --git a/web/chatview.css b/web/chatview.css
new file mode 100644
index 0000000..1d0c503
--- /dev/null
+++ b/web/chatview.css
@@ -0,0 +1,249 @@
+.status_circle {
+  fill: #A0A0A0;
+  -webkit-animation: circle-dance;
+  -webkit-animation-duration: 0.8s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+  -webkit-animation-timing-function: ease-in-out;
+}
+
+.anim-first {
+  -webkit-animation-delay: 0.7s;
+}
+
+.anim-second {
+  -webkit-animation-delay: 0.9s;
+}
+
+.anim-third {
+  -webkit-animation-delay: 1.1s;
+}
+
+@-webkit-keyframes circle-dance {
+  0%,50% {
+    -webkit-transform: translateY(0);
+    fill: #A0A0A0;
+  }
+  100% {
+    -webkit-transform: translateY(-8px);
+    fill: #000;
+  }
+}
+
+.status-check {
+  stroke-dasharray: 17;
+  stroke-dashoffset: 17;
+  -webkit-animation: dash-check;
+  -webkit-animation-duration: 0.4s;
+  -webkit-animation-delay: 0.7s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes dash-check{
+  from {
+    stroke-dashoffset: 17;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.status-x {
+  stroke-dasharray: 12;
+  stroke-dashoffset: 12;
+  -webkit-animation: dash-x;
+  -webkit-animation-duration: 0.2s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in-out;
+}
+
+.x-first {
+  -webkit-animation-delay: 0.7s;
+}
+
+.x-second {
+  -webkit-animation-delay: 0.9s;
+}
+
+@-webkit-keyframes dash-x{
+  from {
+    stroke-dashoffset: 12;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.message_wrapper {
+    transform: scale(0);
+    max-width: 50%;
+    margin: 10px 0;
+    display: inline-block;
+    padding: 10px 10px 10px 10px;
+    border-radius: 10px;
+    position: relative;
+    -webkit-animation: talk;
+    -webkit-animation-duration: 0.3s;
+    -webkit-animation-delay: 0.1s;
+    -webkit-animation-fill-mode: forwards;
+    -webkit-animation-timing-function: ease-in-out;
+}
+
+.message {
+    font: 0.875em "Open sans",Helvetica,"Segoe UI",sans-serif;
+    margin: 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: top;
+    overflow: hidden;
+}
+
+.message_out {
+    flex-direction: row-reverse;
+}
+
+.message_sender {
+    display: none;
+}
+
+.sender_image {
+    border-radius: 50%;
+    transition: transform 0.2s ease-in-out;
+    margin: 10px 10px 10px 10px;
+}
+
+.message_in .sender_image {
+    -webkit-animation-name: enter-stage-left;
+    -webkit-animation-duration: 0.2s;
+    -webkit-animation-timing-function: ease-in-out;
+}
+
+.message_out .sender_image {
+    -webkit-animation-name: enter-stage-right;
+    -webkit-animation-duration: 0.2s;
+    -webkit-animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes enter-stage-left {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+}
+
+@-webkit-keyframes enter-stage-right {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+}
+
+.message_out > .message_wrapper {
+    background-color: #00BFD3;
+    color: #fff;
+    border-top-right-radius: 0;
+    transform-origin: top right;
+}
+
+.message_out + .message_out > .message_wrapper {
+    border-top-right-radius: 10px;
+}
+
+.message_in > .message_wrapper {
+    background-color: #DEDEE0;
+    border-top-left-radius: 0;
+    transform-origin: top left;
+}
+
+.message_in + .message_in > .message_wrapper {
+    border-top-left-radius: 10px;
+}
+
+.message_timestamp {
+    font-size: 0.8em;
+    margin-top: 0.3em;
+    opacity: 1;
+    transition: opacity 0.5s ease-in-out;
+    display: block;
+}
+
+.message_in .message_timestamp {
+    color: #9E9E9E;
+}
+
+@-webkit-keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+}
+
+.message_text {
+    word-wrap: break-word;
+}
+
+@-webkit-keyframes talk {
+    from {
+      transform: scale(0);
+    }
+    to {
+      transform: scale(1);
+    }
+}
+
+.message_in > .message_wrapper:before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    left: -10px;
+    top: 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M10,0 L0,0 C10,0 10,10 10,10' fill='%23DEDEE0'/%3E %3C/svg%3E");
+    transform-origin: top left;
+}
+
+.message_in + .message_in > .message_wrapper:before {
+    display: none;
+}
+
+.message_out + .message_out > .message_wrapper:after {
+    display: none;
+}
+
+.message_out > .message_wrapper:after {
+    content: "";
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    right: -10px;
+    top: 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M0,0 L10,0 C0,0 0,10 0,10' fill='%2300BFD3'/%3E %3C/svg%3E");
+    transform-origin: top right;
+}
+
+.message_delivery_status {
+    margin: 10px 10px;
+    color: #A0A0A0;
+    opacity: 0;
+    -webkit-animation-name: fade-in;
+    -webkit-animation-duration: 0.2s;
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: 0.4s;
+    -webkit-animation-fill-mode: forwards;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.message_in + .message_in .sender_image {
+    opacity: 0;
+}
+
+.message_out + .message_out .sender_image {
+    opacity: 0;
+}
diff --git a/web/chatview.html b/web/chatview.html
index 151870f..dff86f1 100644
--- a/web/chatview.html
+++ b/web/chatview.html
@@ -20,259 +20,6 @@
 <script src="https://soapbox.github.io/linkifyjs/js/linkify/linkify-html.min.js"></script>
 -->
 
-<style>
-.status_circle {
-  fill: #A0A0A0;
-  -webkit-animation: circle-dance;
-  -webkit-animation-duration: 0.8s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-direction: alternate;
-  -webkit-animation-timing-function: ease-in-out;
-}
-
-.anim-first {
-  -webkit-animation-delay: 0.7s;
-}
-
-.anim-second {
-  -webkit-animation-delay: 0.9s;
-}
-
-.anim-third {
-  -webkit-animation-delay: 1.1s;
-}
-
-@-webkit-keyframes circle-dance {
-  0%,50% {
-    -webkit-transform: translateY(0);
-    fill: #A0A0A0;
-  }
-  100% {
-    -webkit-transform: translateY(-8px);
-    fill: #000;
-  }
-}
-
-.status-check {
-  stroke-dasharray: 17;
-  stroke-dashoffset: 17;
-  -webkit-animation: dash-check;
-  -webkit-animation-duration: 0.4s;
-  -webkit-animation-delay: 0.7s;
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-timing-function: ease-in-out;
-}
-
-@-webkit-keyframes dash-check{
-  from {
-    stroke-dashoffset: 17;
-  }
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-.status-x {
-  stroke-dasharray: 12;
-  stroke-dashoffset: 12;
-  -webkit-animation: dash-x;
-  -webkit-animation-duration: 0.2s;
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-timing-function: ease-in-out;
-}
-
-.x-first {
-  -webkit-animation-delay: 0.7s;
-}
-
-.x-second {
-  -webkit-animation-delay: 0.9s;
-}
-
-@-webkit-keyframes dash-x{
-  from {
-    stroke-dashoffset: 12;
-  }
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-.message_wrapper {
-    transform: scale(0);
-    max-width: 50%;
-    margin: 10px 0;
-    display: inline-block;
-    padding: 10px 10px 10px 10px;
-    border-radius: 10px;
-    position: relative;
-    -webkit-animation: talk;
-    -webkit-animation-duration: 0.3s;
-    -webkit-animation-delay: 0.1s;
-    -webkit-animation-fill-mode: forwards;
-    -webkit-animation-timing-function: ease-in-out;
-}
-
-.message {
-    font: 0.875em "Open sans",Helvetica,"Segoe UI",sans-serif;
-    margin: 0;
-    display: flex;
-    justify-content: flex-start;
-    align-items: top;
-    overflow: hidden;
-}
-
-.message_out {
-    flex-direction: row-reverse;
-}
-
-.message_sender {
-    display: none;
-}
-
-.sender_image {
-    border-radius: 50%;
-    transition: transform 0.2s ease-in-out;
-    margin: 10px 10px 10px 10px;
-}
-
-.message_in .sender_image {
-    -webkit-animation-name: enter-stage-left;
-    -webkit-animation-duration: 0.2s;
-    -webkit-animation-timing-function: ease-in-out;
-}
-
-.message_out .sender_image {
-    -webkit-animation-name: enter-stage-right;
-    -webkit-animation-duration: 0.2s;
-    -webkit-animation-timing-function: ease-in-out;
-}
-
-@-webkit-keyframes enter-stage-left {
-    from {
-      transform: translateX(-100%);
-    }
-    to {
-      transform: translateX(0);
-    }
-}
-
-@-webkit-keyframes enter-stage-right {
-    from {
-      transform: translateX(100%);
-    }
-    to {
-      transform: translateX(0);
-    }
-}
-
-.message_out > .message_wrapper {
-    background-color: #00BFD3;
-    color: #fff;
-    border-top-right-radius: 0;
-    transform-origin: top right;
-}
-
-.message_out + .message_out > .message_wrapper {
-    border-top-right-radius: 10px;
-}
-
-.message_in > .message_wrapper {
-    background-color: #DEDEE0;
-    border-top-left-radius: 0;
-    transform-origin: top left;
-}
-
-.message_in + .message_in > .message_wrapper {
-    border-top-left-radius: 10px;
-}
-
-.message_timestamp {
-    font-size: 0.8em;
-    margin-top: 0.3em;
-    opacity: 1;
-    transition: opacity 0.5s ease-in-out;
-    display: block;
-}
-
-.message_in .message_timestamp {
-    color: #9E9E9E;
-}
-
-@-webkit-keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-}
-
-.message_text {
-    word-wrap: break-word;
-}
-
-@-webkit-keyframes talk {
-    from {
-      transform: scale(0);
-    }
-    to {
-      transform: scale(1);
-    }
-}
-
-.message_in > .message_wrapper:before {
-    content: "";
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    left: -10px;
-    top: 0;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M10,0 L0,0 C10,0 10,10 10,10' fill='%23DEDEE0'/%3E %3C/svg%3E");
-    transform-origin: top left;
-}
-
-.message_in + .message_in > .message_wrapper:before {
-    display: none;
-}
-
-.message_out + .message_out > .message_wrapper:after {
-    display: none;
-}
-
-.message_out > .message_wrapper:after {
-    content: "";
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    right: -10px;
-    top: 0;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M0,0 L10,0 C0,0 0,10 0,10' fill='%2300BFD3'/%3E %3C/svg%3E");
-    transform-origin: top right;
-}
-
-.message_delivery_status {
-    margin: 10px 10px;
-    color: #A0A0A0;
-    opacity: 0;
-    -webkit-animation-name: fade-in;
-    -webkit-animation-duration: 0.2s;
-    -webkit-animation-timing-function: ease-in-out;
-    -webkit-animation-delay: 0.4s;
-    -webkit-animation-fill-mode: forwards;
-    transition: opacity 0.5s ease-in-out;
-}
-
-.message_in + .message_in .sender_image {
-    opacity: 0;
-}
-
-.message_out + .message_out .sender_image {
-    opacity: 0;
-}
-
-</style>
-
 <script>
 var ring = {}; // ring namespace
 
diff --git a/web/web.gresource.xml b/web/web.gresource.xml
index 33ab294..8749de3 100644
--- a/web/web.gresource.xml
+++ b/web/web.gresource.xml
@@ -10,5 +10,8 @@
       <file>linkify-string.js</file>
       <file>linkify-html.js</file>
       <file>linkify-jquery.js</file>
+
+      <!-- CSS -->
+      <file>chatview.css</file>
     </gresource>
   </gresources>