diff --git a/front/docs/CSS.md b/front/docs/CSS.md
index 0901aeb..031f779 100644
--- a/front/docs/CSS.md
+++ b/front/docs/CSS.md
@@ -1,5 +1,13 @@
 # CSS
 
+In this document we take a look at what CSS is and how it can be applied to a publication in **Chatty-pub**.
+
+- [What is CSS](#css)
+- [Rules](#rules)
+- [Css in chatty-pub](#chatty-pub)
+- [Print settings](#print-settings)
+- [Typing Emoji](#emoji)
+
 ## What is CSS?
 
 CSS (Cascading Style Sheets) is the language that allows you to style and layout HTML web pages. This article explains what CSS is, with some simple syntax examples, and also covers some key terms about the language.
@@ -12,7 +20,7 @@ But what HTML does not do is speficy how these elements should look. That is whe
 CSS can be used for very basic document text styling — for example changing the color and size of headings and links. It can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation.
 In Chatty-pub we're mostly interested in the first part.
 
-### Rules
+## Rules
 
 #### _Elements and Classes_
 
@@ -22,10 +30,10 @@ CSS is a rule-based language — you define rules specifying groups of styles th
 
 The following code shows a very simple CSS rule that would achieve the styling described above:
 
-```lang-css
+```css
 h1 {
-    color: red;
-    font-size: 5em;
+  color: red;
+  font-size: 20px;
 }
 ```
 
@@ -39,7 +47,7 @@ The example above will style all the `H1` elements on the page. You could also w
 
 Take this HTML:
 
-```lang=html
+```html
 <ul>
   <li>Item one</li>
   <li class="special">Item two</li>
@@ -49,7 +57,7 @@ Take this HTML:
 
 To target the class of special you can create a selector that starts with a full stop character.
 
-```lang=css
+```css
 .special {
   color: orange;
   font-weight: bold;
@@ -59,14 +67,23 @@ To target the class of special you can create a selector that starts with a full
 The peroid character in front of special tells the browser that we're creating a class selector.
 You can apply the class of special to any element on your page that you want to have the same look as this list item.
 
-<!-- As said, in this example we're selecting a ```H1``` (Heading 1) to style, but there are other ways to select elements. In **Chatty-pub** specifically we use something called a class. A class is a propery you can add to HTML elements, and if you write a CSS selector for that class, the rules in the class will be apply to each element that
-has that class.  -->
+### Units
+
+In the `h1` example above, we set the following property: `font-size: 20px;`. This will set the font-size of all H1 headers to 20 pixels. But pixels are not the only units available. Some examples:
+
+- `em` and `rem` - these relative units declare a size dependant on the font-size of the context they get used in. This can be a bit confusing if you're not used to it. Feel free to replace it with on of the values below.
+- `px` - Pixels.
+- `cm` and `in` - centimeters and inches. These units are mostly relevant in print context.
+- `vw` and `vh` - so called viewport units, 100vw is exactly the height of the viewport (the part of the browser that shows the webpage). `vh` is the same, but for the height of the browser.
+- `rgba(r,g,b,a)` strictly speaking not a unit but a function, but it sets the color and transparency of the foreground.
+
+[More information on units](https://www.w3.org/Style/Examples/007/units.en.html).
 
 ## CSS in Chatty-pub
 
 When you react to a message in Zulip with an emoji, this emoji gets turned into a class in **Chatty-pub**. So lets say you responded to a message with the strawberry 🍓 emoji. In **Chatty-Pub** the message will have class with that emoji as selector. (You can confirm this by rolling over the message, the emoji should popup on a overlay.) So now to style that message, you go to the #rules channel and add a message with the following content:
 
-```lang=css
+```css
 🍓 {
   color: red;
 }
@@ -82,11 +99,54 @@ Because of the way Zulip handles the emoji reactions, not all emoji are availabl
 
 You can't enter a tab character in Zulip and the indentation before the property in the rule isn't absolutely necessary. So feel free to leave it out. If you absolutely want to have the indentation, you could write the rule in your favorite editor and copy and paste it into Zulip. If you only want to style a single property you could have the whole rule on a single line like this: `🌕 { box-shadow: 0 0 20px rgba(255,0,0,0.5); }`,
 
-_Don't forget the semi-colon at the end of the property line!_.
+_Don't forget the semi-colon at the end of the property line!_
+
+### Advanced CSS
+
+**Selecting HTML elements and other style rules**
+
+The reaction/emoji method described above allows to make quick modifications to the style and layout of your publication. But besides this **Chatty-pub** also allows you to style html elements like in regular CSS. To do this just enter your style rule. This snippet will give all HTML links a pink background color:
+
+```css
+a {
+  background-color: pink;
+}
+```
+
+You should be able to enter all regular CSS rules this way.
+
+**Bypassing the parser** -_Work in progress_-
+
+It is possible to bypass the parser and add arbitrary code to the CSS on the page. This allows you to add, for example, `@key` or media queries. To do this send any message to the #rules channel and wrap the message in three backticks like this:
+
+<code>
+```
+@keyframes example {
+  from {background-color: red;}
+  to {background-color: yellow;}
+}
+```
+</code>
+
+## Print settings
+
+To set the paper size we can use the special selector `@page`. The following snippet set the page size to A5.
+
+```css
+@page {
+  size: 148mm 210mm;
+}
+```
+
+Regrettably browser support for `@page` is [spotty](https://caniuse.com/css-paged-media). You will get the best results using Google Chrome.
+
+[Pagedmedia.org](https://www.pagedmedia.org/pagedjs-sneak-peeks/) has an excellent explanation on using `@page`. The [Paged media module](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media) at Mozilla also.
+
+It may be necessary to use the methods described under [Advanced CSS](#advanced-css) above to enter these rules.
 
 ## List of common and handy CSS properties
 
-There are hundreds of CSS properties, so I can't list them all here. Below is a small selection of some basic properties grouped by module. Most of them are self explainatory, otherwise I've added a small note.
+There are hundreds of CSS properties. Below is a small selection of some basic properties mostly focussed on layout and type representation, grouped by module.
 
 ### Backgrounds and borders
 
@@ -106,6 +166,11 @@ A colors value can defined in multiple ways:
 - By [hex value](http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors#hex) - `color: #ff0000;` also red.
 - Or as a [function](http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors#rgba), which allows transparency. - `color: rgba(255,0,0,0.5);` red, but 50% transparent.
 
+### Box model
+
+- [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) - The margin property sets the margin area on all four sides of an element. Margin refers to space between different elements.
+- [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) - The padding property sets the padding area on all four sides of an element at once. Padding refers to the spacing inside the border of an element.
+
 ### Fonts
 
 - TBD/Todo
diff --git a/front/package-lock.json b/front/package-lock.json
index b3af0ad..39f6db3 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -1059,7 +1059,6 @@
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.5.tgz",
       "integrity": "sha512-121rumjddw9c3NCQ55KGkyE1h/nzWhU/owjhw0l4mQrkzz4x9SGS1X8gFLraHwX7td3Yo4QTL+qj0NcIzN87BA==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -4745,6 +4744,19 @@
         }
       }
     },
+    "emoji-datasource": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/emoji-datasource/-/emoji-datasource-4.1.0.tgz",
+      "integrity": "sha1-tEVX94ot+sLzUDkzkbFwpWfsKK0="
+    },
+    "emoji-js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/emoji-js/-/emoji-js-3.5.0.tgz",
+      "integrity": "sha512-5uaULzdR3g6ALBC8xUzyoxAx6izT1M4+DEsxHLRS2/gaOKC/p62831itMoMsYfUj1fKX3YG01u5YVz2v7qpsWg==",
+      "requires": {
+        "emoji-datasource": "4.1.0"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -7278,6 +7290,11 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -7295,6 +7312,11 @@
       "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
       "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
@@ -7319,12 +7341,22 @@
       "integrity": "sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=",
       "dev": true
     },
+    "lodash.trim": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/lodash.trim/-/lodash.trim-4.5.1.tgz",
+      "integrity": "sha1-NkJefukL5KpeJ7zruFt9EepHqlc="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
       "dev": true
     },
+    "lodash.without": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.without/-/lodash.without-4.4.0.tgz",
+      "integrity": "sha1-PNRXSgC2e643OpS3SHcmQFB7eqw="
+    },
     "log-symbols": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
@@ -9402,6 +9434,44 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "dev": true
     },
+    "ranges-apply": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ranges-apply/-/ranges-apply-5.1.0.tgz",
+      "integrity": "sha512-VF3a0XUuYS/BQHv2RaIyX1K7S1hbfrs64hkGKgPVk0Y7p4XFwSucjTTttrBqmkcmB/PZx5ISTZdxErRZi/89aQ==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "ranges-merge": "^7.1.0"
+      }
+    },
+    "ranges-merge": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ranges-merge/-/ranges-merge-7.1.0.tgz",
+      "integrity": "sha512-coTHcyAEIhoEdsBs9f5f+q0rmy7UHvS/5nfuXzuj5oLX/l/tbqM5uxRb6eh8WMdetXia3lK67ZO4tarH4ieulQ==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "ranges-push": "^5.1.0",
+        "ranges-sort": "^4.1.0"
+      }
+    },
+    "ranges-push": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ranges-push/-/ranges-push-5.1.0.tgz",
+      "integrity": "sha512-vqGcaGq7GWV1zBa9w83E+dzYkOvE9/3pIRUPvLf12c+mGQCf1nesrkBI7Ob8taN2CC9V1HDSJx0KAQl0SgZftA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "ranges-merge": "^7.1.0",
+        "string-collapse-leading-whitespace": "^5.1.0",
+        "string-trim-spaces-only": "^3.1.0"
+      }
+    },
+    "ranges-sort": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ranges-sort/-/ranges-sort-4.1.0.tgz",
+      "integrity": "sha512-GOQgk6UtsrfKFeYa53YLiBVnLINwYmOk5l2QZG1csZpT6GdImUwooh+/cRrp7b+fYawZX/rnyA3Ul+pdgQBIzA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0"
+      }
+    },
     "raw-body": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
@@ -9469,8 +9539,7 @@
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-      "dev": true
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -10418,6 +10487,11 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "splitpanes": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-3.0.4.tgz",
+      "integrity": "sha512-KRaPtMDpu++OfvAzNQYE5U7WT5NoMA6l9B0buC4PhYoDILVLY8zN7Sp9cHXAgLhH59jI3lKzVoNqyf4OGRv7QQ=="
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -10534,12 +10608,60 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string-collapse-leading-whitespace": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/string-collapse-leading-whitespace/-/string-collapse-leading-whitespace-5.1.0.tgz",
+      "integrity": "sha512-mYz9/Kb5uvRB4DZj46zILwI4y9lD9JsvXG9Xb7zjbwm0I/R40G7oFfMsqJ28l2d7gWMTLJL569NfJQVLQbnHCw==",
+      "requires": {
+        "@babel/runtime": "^7.14.0"
+      }
+    },
     "string-hash": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
       "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
       "dev": true
     },
+    "string-left-right": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/string-left-right/-/string-left-right-4.1.0.tgz",
+      "integrity": "sha512-ic/WvfNVUygWWsgg8akzSzp2NuttfhrdbH7QmSnda5b5RFmT9aCEDiS/M+gmTJwtFy7+b/2AXU4Z6vejcePQqQ==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isplainobject": "^4.0.6"
+      }
+    },
+    "string-strip-html": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/string-strip-html/-/string-strip-html-8.3.0.tgz",
+      "integrity": "sha512-1+rjTPt0JjpFr1w0bfNL1S6O0I9fJDqM+P3pFTpC6eEEpIXhmBvPLnaQoEuWarswiH219qCefDSxTLxGQyHKUg==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "html-entities": "^2.3.2",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.trim": "^4.5.1",
+        "lodash.without": "^4.4.0",
+        "ranges-apply": "^5.1.0",
+        "ranges-push": "^5.1.0",
+        "string-left-right": "^4.1.0"
+      },
+      "dependencies": {
+        "html-entities": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
+          "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ=="
+        }
+      }
+    },
+    "string-trim-spaces-only": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-trim-spaces-only/-/string-trim-spaces-only-3.1.0.tgz",
+      "integrity": "sha512-AW7RSi3+QtE6wR+4m/kmwlyy39neBbCIzrzzu1/RGzNRiPKQOeB3rGzr4ubg4UIQgYtr2w0PrxhKPXgyqJ0vaQ==",
+      "requires": {
+        "@babel/runtime": "^7.14.0"
+      }
+    },
     "string-width": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
diff --git a/front/src/App.vue b/front/src/App.vue
index 7084050..276656f 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -47,8 +47,8 @@ export default {
     this.getStreams();
 
     this.$router.afterEach((to) => {
-      this.$store.commit("setContents", []);
-      this.$store.commit("setRules", []);
+      this.$store.commit("setTopics",    []);
+      this.$store.commit("setRules",     []);
       this.$store.commit("setCurStream", to.path.replace("/", ""))
       if (this.currentStream != "") {
         this.setUpDoc(this.currentStream);
@@ -83,18 +83,18 @@ export default {
           api.zulip.addSub(this.zulipClient, this.currentStream)
         }
       })
-        
-      api.zulip.getMsgs(this.zulipClient, stream, "content").then((result) => {
+      
+      api.zulip.getAllMsgs(this.zulipClient, stream).then((result) => {
         for (let m = 0; m < result.messages.length; m++) {
           const message = result.messages[m]
-          this.$store.commit('addMessage', message)
+          if (message.subject == 'rules') {
+            this.$store.commit('addRule', message)
+          } else {
+            this.$store.commit('addMessage', message)
+          }
         } 
       });
 
-      api.zulip.getMsgs(this.zulipClient, stream, "rules").then((result) => {
-        this.$store.commit("setRules", result.messages);
-      });
-
     },
 
     eventHandler(event) {
diff --git a/front/src/api/zulip/index.js b/front/src/api/zulip/index.js
index 291e31d..82fc02e 100644
--- a/front/src/api/zulip/index.js
+++ b/front/src/api/zulip/index.js
@@ -36,7 +36,7 @@ const
         // apply_markdown: false,
         narrow: [
           { operator: "stream", operand: stream },
-          { operator: "topic", operand: topic },
+          { operator: "topic",  operand: topic },
         ],
       })
       .then(result => resolve(result))
@@ -44,6 +44,22 @@ const
     })
   ),
   
+  getAllMsgs = (client, stream, params) => ( new
+    Promise((resolve, reject) => {
+     client
+     .messages
+     .retrieve(params || {
+        anchor: "newest",
+        num_before: 100,
+        num_after: 0,
+        // apply_markdown: false,
+        narrow: [{ operator: "stream", operand: stream }],
+      })
+      .then(result => resolve(result))
+      .catch(error => reject(error))
+    })
+  ),
+  
   listen = (client, cb) => {
     client
     .callOnEachEvent(
@@ -100,6 +116,7 @@ export default {
   config,
   getStreams,
   getMsgs,
+  getAllMsgs,
   listen,
   sendMsg,
   getSubs,
diff --git a/front/src/components/Content/Message.vue b/front/src/components/Content/Message.vue
index ac2ff1a..cf45cd7 100644
--- a/front/src/components/Content/Message.vue
+++ b/front/src/components/Content/Message.vue
@@ -27,7 +27,9 @@ export default {
       c = c.replaceAll('src="', 'src="' + url);
       c = c.replaceAll('href="/', 'href="' + url + "/");
 
-      const referrers = this.$store.state.contents.filter(
+      const referrers = this.$store.state
+      .topics.find(t => t.title == this.message.subject)
+      .messages.filter(
         (m) =>
           m.responseTo &&
           m.responseTo.id == this.message.id &&
diff --git a/front/src/components/Content/index.vue b/front/src/components/Content/index.vue
index 7c6c985..6a01929 100644
--- a/front/src/components/Content/index.vue
+++ b/front/src/components/Content/index.vue
@@ -1,12 +1,13 @@
 <template>
-  <section class="content">
-    <p class="title">{{ $.type.name }}</p>
+  <section :class="[ 'content', currentStream ]">
     <div 
-      class="body"
-      :class="currentStream"
+      v-for="topic in sortedTopics"
+      :key="topic.title"
+      :class="[ 'body', topic.title ]"
     >
+      <h1>{{ topic.title }}</h1>
       <span
-        v-for="message in contents"
+        v-for="message in topic.messages"
         :key="message.id"
       >
       <Message
@@ -19,7 +20,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import Message from './Message'
 
 export default {
@@ -29,9 +30,11 @@ export default {
   },
   computed: {
     ...mapState([
-      'contents',
       'rules',
       'currentStream'
+    ]),
+    ...mapGetters([
+      'sortedTopics'
     ])
   },
   methods: {
diff --git a/front/src/store/index.js b/front/src/store/index.js
index d4a3ebf..d8e4050 100644
--- a/front/src/store/index.js
+++ b/front/src/store/index.js
@@ -18,11 +18,11 @@ let toCSS = (message, currentStream) => {
     id = message.id
 
   // 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 regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
   let content = stripHtml(message.content).result;
   let results = content.matchAll(regex);
   results = Array.from(results);
-  // console.log(results)
+  //console.log(results)
   if (results.length > 0) {
     className = emojiConv.replace_colons(results[0]['groups']['selector']);
     if (emoji.methods.containsEmoji(className)) {
@@ -60,7 +60,7 @@ const handleMDReply = message => {
   // console.log(message.responseTo)
 }
 
-const handleHTMLReply = message => { 
+const handleHTMLReply = message => {
   message.responseTo = {
     id: message.content
       .replace(/.*\/near\//gm, '')
@@ -80,31 +80,39 @@ export default createStore({
   strict: process.env.NODE_ENV !== 'production',
 
   state: {
-    isMobile  : false,
-    streams   : [],
+    isMobile: false,
+    streams: [],
     currentStream: '',
-    contents  : [],
-    rules     : [],
-    pubStr    : 'pub-', 
+    rules: [],
+    topics: [],
+    pubStr: 'pub-',
   },
 
   mutations: {
-  
-    setMobile    : (state, mobile)    => state.isMobile  = mobile,
-    setStreams   : (state, streams)   => state.streams = streams,
-    setCurStream : (state, stream)    => state.currentStream = stream,
-    setContents: (state, contents) => state.contents = contents,
+
+    setMobile: (state, mobile) => state.isMobile = mobile,
+    setStreams: (state, streams) => state.streams = streams,
+    setCurStream: (state, stream) => state.currentStream = stream,
+    setTopics: (state, topics) => state.topics = topics,
     addMessage: (state, message) => {
       if (message.display_recipient == state.currentStream) {
         if (message.content.startsWith('@_**')) {
           handleMDReply(message)
         } else if (
-          message.content.includes('user-mention') && 
+          message.content.includes('user-mention') &&
           message.content.includes('blockquote')
         ) {
           handleHTMLReply(message)
         }
-        state.contents.push(message)
+        const topic = state.topics.find(topic => topic.title == message.subject)
+        if (topic) {
+          topic.messages.push(message)
+        } else {
+          state.topics.push({
+            title: message.subject,
+            messages: [ message ]
+          })
+        }
       }
     },
     deleteMessage: (state, mid) => {
@@ -113,13 +121,13 @@ export default createStore({
         state.contents.splice(state.contents.indexOf(message), 1)
       }
     },
-    addReaction : (state, { mid, reaction })  => {
+    addReaction: (state, { mid, reaction }) => {
       const message = state.contents.find(m => m.id == mid)
       if (message) {
         message.reactions.push(reaction)
       }
     },
-    removeReaction : (state, { mid, reaction })  => {
+    removeReaction: (state, { mid, reaction }) => {
       const message = state.contents.find(m => m.id == mid)
       if (message) {
         message.reactions.splice(message.reactions.indexOf(reaction), 1)
@@ -136,7 +144,10 @@ export default createStore({
     },
     addRule: (state, rule) => {
       if (toCSS(rule) !== null) {
-        state.rules.push(toCSS(rule, state.currentStream))
+        // 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)]]
       }
     },
     editMessage: (state, { mid, content }) => {
@@ -147,30 +158,33 @@ export default createStore({
         if (message.content.startsWith('@_**')) {
           handleMDReply(message)
         } else if (
-          message.content.includes('user-mention') && 
+          message.content.includes('user-mention') &&
           message.content.includes('blockquote')
         ) {
           handleHTMLReply(message)
         }
       } else if (rule) {
+        // state.rules[state.rules.indexOf(rule)] = toCSS({
+        //   id: mid, content: content,
+        // }, state.currentStream)
+
+        // vue will not update if i use rules.push(rule)        
         const newRules = [...state.rules, ...[toCSS({
           id: mid, content: content,
         }, state.currentStream)]]
         state.rules = newRules
-        
-        // state.rules[state.rules.indexOf(rule)] = toCSS({
-        //   id: mid, content: content,
-        // }, state.currentStream)
+
       }
     },
-    
+
   },
 
   actions: {
   },
 
-  getters: {  
-    rules: state => state.rules
+  getters: {
+    rules: state => state.rules,
+    sortedTopics: state => [...state.topics].sort((a, b) => a.title.localeCompare(b.title))
   }
 
 })
diff --git a/package-lock.json b/package-lock.json
index 3323709..acd1aea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -634,6 +634,11 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "optional": true
     },
+    "splitpanes": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.6.tgz",
+      "integrity": "sha512-2sif1pmOQw/N+/jRbVzqTJ32lkhJax8jQfaXCebRK/SFCadHOnAaXDcWW8PpEcr9vKpfzH7gxJ8Sq/74HECr/g=="
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
diff --git a/package.json b/package.json
index b3d7da9..be018a0 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "emoji-js": "^3.5.0",
+    "splitpanes": "^2.3.6",
     "string-strip-html": "^8.3.0",
     "vue-html2pdf": "^1.8.0",
     "zulip-js": "^2.0.9"