diff --git a/front/src/App.vue b/front/src/App.vue
index b1e09ff..e80c28f 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -74,14 +74,7 @@ export default {
       });
 
       api.zulip.getMsgs(this.zulipClient, stream, "rules").then((result) => {
-        console.log("messages!",result)
-        this.$store.commit(
-          "setRules",
-          result
-          // result.messages
-          //   .filter((m) => m.content.match(/\/poll/gm))
-          //   .map((m) => this.toCSS(m))
-        );
+        this.$store.commit("setRules", result);
       });
 
       api.zulip.listen(this.zulipClient);
diff --git a/front/src/components/Content/Message.vue b/front/src/components/Content/Message.vue
index 57ecde4..7f98cf3 100644
--- a/front/src/components/Content/Message.vue
+++ b/front/src/components/Content/Message.vue
@@ -18,9 +18,9 @@ export default {
     content() {
       let url = process.env.VUE_APP_ZULIP_site;
       let m = this.message.content.replace("\n", "<br/>");
-      m = m.replaceAll('src="','src="' + url);
-      m = m.replaceAll('href="/','href="' + url + "/");
-      return m
+      m = m.replaceAll('src="', 'src="' + url);
+      m = m.replaceAll('href="/', 'href="' + url + "/");
+      return m;
     },
     classes() {
       return this.message.reactions.map((r) => "u" + r.emoji_code);
diff --git a/front/src/components/Rules/Rule.vue b/front/src/components/Rules/Rule.vue
index faaee0c..a11ed97 100644
--- a/front/src/components/Rules/Rule.vue
+++ b/front/src/components/Rules/Rule.vue
@@ -6,33 +6,29 @@
     ></vue3-markdown-it>
   </span>   -->
   <code class="rule">
-    <p>{{ rule.className }} {</p>
-    <p
-      v-for="dec in rule.rules"
-      :key="dec.text"
-    > &nbsp; {{ dec.text }}</p>
+    <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
+    <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
     <p>}</p>
   </code>
 </template>
 
 <script>
+import emoji from "../../mixins/emoji";
+
 export default {
-  name: 'Rule',
-  props: [ 
-    'rule'
-  ],
+  name: "Rule",
+  mixins: [emoji],
+  props: ["rule"],
   computed: {
     rawJSON() {
-      return '```json\n' + JSON.stringify(this.rule, null, 2) + '\n```'
+      return "```json\n" + JSON.stringify(this.rule, null, 2) + "\n```";
     },
-  }
-}
+  },
+};
 </script>
 
 <style>
-
 .rule p {
   margin: 0;
 }
-
 </style>
\ No newline at end of file
diff --git a/front/src/components/Rules/Styles.vue b/front/src/components/Rules/Styles.vue
index 65485bb..c44528d 100644
--- a/front/src/components/Rules/Styles.vue
+++ b/front/src/components/Rules/Styles.vue
@@ -1,55 +1,49 @@
 <script>
+import emoji from "../../mixins/emoji";
+
 export default {
   name: "Styles",
+  mixins: [emoji],
   computed: {
     rules() {
       return this.$store.state.rules;
     },
   },
-  data: function(){
+  data: function () {
     return {
       el: null,
-    }
+    };
   },
   methods: {
     generateStyleRules() {
       let styles = "";
-      this.rules.map((r)=>{
-        styles  += r.className
-        if( this.containsEmoji(r.className)){
-          styles += ", .u" + this.toEmojiCode(r.className)
+      this.rules.map((r) => {
+        styles += r.className;
+        if (this.containsEmoji(r.className)) {
+          styles += ", .u" + this.toEmojiCode(r.className);
         }
-        styles += "{"
-        r.rules.map((s)=>{
-          styles += s.text;
-        })
-        styles += "}"
-      })
+        styles += "{";
+        r.rules.map((s) => {
+          styles += s;
+        });
+        styles += "}";
+      });
       return styles;
     },
     insertStyleElement() {
-      var style = document.createElement('style');
+      var style = document.createElement("style");
       style.innerText = this.generateStyleRules();
-      return style
+      return style;
     },
-    containsEmoji(str) {
-      // Regular expression to match emoji
-      const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi;
-      return regexExp.test(str); // true
-    },
-    toEmojiCode(emoji) {
-      return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
-    },
-
   },
-  mounted: function() {
+  mounted: function () {
     this.el = document.head.appendChild(this.insertStyleElement());
   },
   watch: {
     rules() {
       let style = this.insertStyleElement();
       this.el.parentNode.replaceChild(style, this.el);
-    }
-  }
+    },
+  },
 };
 </script>
\ No newline at end of file
diff --git a/front/src/mixins/emoji.js b/front/src/mixins/emoji.js
index 97c2177..e80162a 100644
--- a/front/src/mixins/emoji.js
+++ b/front/src/mixins/emoji.js
@@ -1,34 +1,40 @@
-let toUTF16 = (codePoint) => {
-  var TEN_BITS = parseInt("1111111111", 2);
-  if (codePoint <= 0xffff) {
-    return u(codePoint);
-  }
-  codePoint -= 0x10000;
-  // Shift right to get to most significant 10 bits
-  var leadSurrogate = 0xd800 + (codePoint >> 10);
-  // Mask to get least significant 10 bits
-  var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
-  return u(leadSurrogate) + (tailSurrogate);
-}
+// let toUTF16 = (codePoint) => {
+//   var TEN_BITS = parseInt("1111111111", 2);
+//   if (codePoint <= 0xffff) {
+//     return u(codePoint);
+//   }
+//   codePoint -= 0x10000;
+//   // Shift right to get to most significant 10 bits
+//   var leadSurrogate = 0xd800 + (codePoint >> 10);
+//   // Mask to get least significant 10 bits
+//   var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
+//   return u(leadSurrogate) + (tailSurrogate);
+// }
 
-let u = (codeUnit) => {
-  return "\\u" + codeUnit.toString(16).toUpperCase();
-}
+// let u = (codeUnit) => {
+//   return "\\u" + codeUnit.toString(16).toUpperCase();
+// }
 
 export default {
   methods: {
-    // toEmojiCode: (emoji) => {
-    //   console.log(emoji);
-    //   emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
-    // },
-    
     toEmojiCode: (emoji) => {
-      emoji.replace(/\p{Emoji}/gu, function (m) {
-        toUTF16(m.codePointAt(0));
-      });
-      console.log(emoji)
-      return emoji;
+      console.log(emoji);
+      return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
+    },
+
+    // toEmojiCode: (emoji) => {
+    //   console.log(emoji)
+    //   emoji.replace(/\p{Emoji}/gu, function (m) {
+    //     toUTF16(m.codePointAt(0));
+    //   });
+    //   console.log(emoji)
+    //   return emoji;
+    // },
+
+    containsEmoji(str) {
+      // Regular expression to match emoji
+      const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi;
+      return regexExp.test(str); // true
     },
-    
   }
 }
\ No newline at end of file
diff --git a/front/src/store/index.js b/front/src/store/index.js
index d336fcd..660954a 100644
--- a/front/src/store/index.js
+++ b/front/src/store/index.js
@@ -1,53 +1,37 @@
+/*eslint no-unused-vars: "off"*/
+/*eslint no-undef: "off"*/
+
 import { createStore } from 'vuex'
 import emoji from "../mixins/emoji";
+import { stripHtml } from "string-strip-html";
 
-let toCSS = (poll) => {
+var EmojiConvertor = require('emoji-js');
+var emojiConv = new EmojiConvertor();
+
+let toCSS = (message) => {
   let className = "",
     emoji_code = "",
-    options = [],
-    rules = [],
-    subs = poll.submessages.map((s) => JSON.parse(s.content));
-  subs.forEach((sub) => {
-    if (sub.widget_type && sub.widget_type == "poll") {
-      className = sub.extra_data.question;
+    rules = [];
+
+  // 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
+  let content = stripHtml(message.content).result;
+  let results = content.matchAll(regex);
+  results = Array.from(results);
+  if (results.length > 0) {
+    className = emojiConv.replace_colons(results[0]['groups']['selector']);
+    if (emoji.methods.containsEmoji(className)) {
       emoji_code = emoji.methods.toEmojiCode(className);
-      // console.log(emoji_code);
-      options = sub.extra_data.options;
-      if (options) {
-        options.forEach((option) => {
-          let r = constructRule(option, options, subs);
-          if (validateRule(r)) {
-            rules.push(r);
-          }
-        });
-      }
-    } else if (sub.type && sub.type == "new_option") {
-      let r = constructRule(sub.option, options, subs);
-      if (validateRule(r)) {
-        rules.push(r);
-      }
     }
-  });
-  return { className, emoji_code, rules };
+    rules = results[0]['groups']['props'].split("\n");
+    rules = rules.filter((rule) => validateRule(rule))
+    return { className, emoji_code, rules };
+  }
+  return null;
 }
 
-let constructRule = (option, options, subs) => {
-  const text = option,
-    votes = subs.filter(
-      (s) =>
-        s.type == "vote" &&
-        s.key.replace("canned,", "") == options.indexOf(option)
-    ),
-    weight =
-      votes.length > 0
-        ? votes.map((s) => s.vote).reduce((a, b) => a + b)
-        : 0;
-  return { text, weight };
-}
-
-// minimal validation. rules have to contain a colon and semicolon
-let validateRule = (rule) => { 
-  return rule.text.match(/.+:.+;/gm);
+let validateRule = (rule) => {
+  return rule.match(/.+:.+;/gm);
 }
 
 export default createStore({
@@ -55,35 +39,39 @@ export default createStore({
   strict: process.env.NODE_ENV !== 'production',
 
   state: {
-    isMobile  : false,
-    streams : [],
-    contents : {},
-    rules : [],
-    pubStr: 'pub-',   
+    isMobile: false,
+    streams: [],
+    contents: {},
+    rules: [],
+    pubStr: 'pub-',
   },
 
   mutations: {
-    setMobile    : (state, mobile)    => state.isMobile  = mobile,
-    setStreams   : (state, streams)   => state.streams = streams,
-    setContents  : (state, messages)  => state.contents = messages,
+    setMobile: (state, mobile) => state.isMobile = mobile,
+    setStreams: (state, streams) => state.streams = streams,
+    setContents: (state, messages) => state.contents = messages,
     setRules: (state, messages) => {
-      state.rules = messages.messages
-          .filter((m) => m.content.match(/\/poll/gm))
-          .map((m) => toCSS(m))
+      // console.log(messages)
+      state.rules = messages.messages.reduce((acc, cur) => {
+        let rule = toCSS(cur);
+        if (rule !== null) {
+          acc.push(rule);
+        }
+        return acc
+      }, [])
     },
-    selectTag    : (state, tag)       => state.selectedTag = tag,
+    selectTag: (state, tag) => state.selectedTag = tag,
   },
 
   actions: {
   },
 
   getters: {
-    filteredResources: state => ( state
+    filteredResources: state => (state
       .resources
       .filter(r => (
         r.tags.indexOf(state.selectedTag > -1)
       ))
-    
     )
   }