diff --git a/front/src/components/Rules/Rule.vue b/front/src/components/Rules/Rule.vue
index 5b9e461..98a7741 100644
--- a/front/src/components/Rules/Rule.vue
+++ b/front/src/components/Rules/Rule.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="rule" :style="rule.rules">
-    <template v-if="rule.is_codeblock">
+  <div class="rule" :class="classes" :style="rule.rules">
+    <pre v-if="rule.is_codeblock">
       {{ contentFiltered }}
-    </template>
+    </pre>
     <template v-else>
-    <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
-    <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
-    <p>}</p>
+      <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
+      <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
+      <p>}</p>
     </template>
   </div>
 </template>
@@ -29,12 +29,18 @@ export default {
 
       return c;
     },
+    classes() {
+      let style = "";
+      if (this.rule.is_codeblock) {
+        style += " raw";
+      }
+      return style;
+    },
   },
 };
 </script>
 
 <style scoped>
-
 .rule {
   margin: 1em 0;
 }
@@ -42,4 +48,25 @@ export default {
 .rule p {
   margin: 0;
 }
+
+.rule.raw {
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid black;
+  position: relative;
+}
+
+.rule.raw:after {
+  content: "raw css";
+  background-color: #333;
+  border-radius: 10px;
+  position: absolute;
+  bottom: -0.5em;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 3px;
+  border: 1px solid white;
+}
 </style>
\ No newline at end of file
diff --git a/front/src/store/index.js b/front/src/store/index.js
index 59223b5..fdb7be3 100644
--- a/front/src/store/index.js
+++ b/front/src/store/index.js
@@ -15,7 +15,7 @@ let toCSS = (message, currentStream) => {
     rules = [],
     parentClassName = currentStream,
     id = message.id,
-    is_codeblock = message.content.includes("<code>");
+    is_codeblock = message.content.includes("<code>") || message.content.startsWith("```");
 
   // let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<prop>[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm
   let regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
@@ -71,7 +71,7 @@ const handleHTMLReply = message => {
     quote: message.content
       .replace(/.*[^]+<\/p>\n<blockquote>\n<p>/gm, '')
       .replace(/<\/p>\n<\/blockquote>/gm, '')
-      // .replace(/\n/gm, '')
+    // .replace(/\n/gm, '')
   }
   console.log(message.responseTo)
 }
@@ -111,7 +111,7 @@ export default createStore({
         } else {
           state.topics.push({
             title: message.subject,
-            messages: [ message ]
+            messages: [message]
           })
         }
       }
@@ -156,7 +156,7 @@ export default createStore({
       if (toCSS(rule) !== null) {
         // state.rules.push(toCSS(rule, state.currentStream))
         // vue will not update if i use rules.push(rule)
-        state.rules = [...state.rules,...[toCSS(rule, state.currentStream)]]
+        state.rules = [...state.rules, ...[toCSS(rule, state.currentStream)]]
       }
     },
     editMessage: (state, { mid, content }) => {
@@ -181,7 +181,7 @@ export default createStore({
         // }, state.currentStream)
 
         // vue will not update if i use rules.push(rule)  
-        state.rules.splice(state.rules.indexOf(rule), 1)      
+        state.rules.splice(state.rules.indexOf(rule), 1)
         const newRules = [...state.rules, ...[toCSS({
           id: mid, content: content,
         }, state.currentStream)]]
@@ -206,11 +206,11 @@ export default createStore({
     rules: state => state.rules,
     sortedTopics: state => (
       [...state.topics]
-      .sort((a, b) => a.title.localeCompare(b.title))
-      .filter(t => (
-        t.messages.length > 0 &&
-        t.title != 'stream events'
-      ))
+        .sort((a, b) => a.title.localeCompare(b.title))
+        .filter(t => (
+          t.messages.length > 0 &&
+          t.title != 'stream events'
+        ))
     )
   }