diff --git "a/Icon\r" "b/Icon\r"
deleted file mode 100644
index e69de29..0000000
diff --git a/front/.env b/front/.env
deleted file mode 100644
index 4a179f9..0000000
--- a/front/.env
+++ /dev/null
@@ -1,3 +0,0 @@
-VUE_APP_ZULIP_email=pub-bot@chat.hackersanddesigners.nl
-VUE_APP_ZULIP_key=m1MDxscGcPQx2RvIfgG4DiSHE1nurxms
-VUE_APP_ZULIP_site=https://chat.hackersanddesigners.nl
diff --git a/front/.gitignore b/front/.gitignore
index c23bc1c..f5fefb8 100644
--- a/front/.gitignore
+++ b/front/.gitignore
@@ -6,6 +6,7 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+.env
 
 # Log files
 npm-debug.log*
diff --git a/front/src/App.vue b/front/src/App.vue
index 53dc5dc..b33b899 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -189,13 +189,6 @@ section p {
   margin-bottom: 0;
   margin-top: 0;
 }
-section .title {
-  display: none;
-  font-weight: bold;
-  position: sticky;
-  top: 1em;
-}
-
 @media print {
   .title {
     display: none;
diff --git a/front/src/components/Content/Chapter.vue b/front/src/components/Content/Chapter.vue
new file mode 100644
index 0000000..99d3906
--- /dev/null
+++ b/front/src/components/Content/Chapter.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :class="[ 'body', topic.title ]">    
+    <h3
+      @click="desiresContent = !desiresContent"
+      class="header"
+    >
+      <span class="expandToggle">{{ desiresContent ? '▼ ' : '► '}}</span>
+      <span>{{ topic.title }}</span>
+    </h3> 
+    <div v-if="desiresContent">
+      <span
+        v-for="message in topic.messages"
+        :key="message.id"
+      >
+      <Message
+        :message="message"
+      />
+      <span>&nbsp;</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import Message from './Message'
+
+export default {
+  name: 'Chapter',
+  components: { 
+    Message,
+  },
+  data() {
+    return {
+      desiresContent: false,
+    }
+  },
+  props: [
+    'topic',
+  ],
+}
+</script>
+
+<style scoped>
+.header {
+  cursor: pointer;
+}
+@media print {
+  .title { display: none; } 
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/Rules/index.vue b/front/src/components/Rules/index.vue
index e059ef0..1a5ef73 100644
--- a/front/src/components/Rules/index.vue
+++ b/front/src/components/Rules/index.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="rules">
-    <p class="title">{{ $.type.name }}</p>
+    <!-- <p class="title">{{ $.type.name }}</p> -->
     <Rule
       v-for="rule in rules"
       :key="rule.id"
diff --git a/front/src/components/Streams/Stream.vue b/front/src/components/Streams/Stream.vue
index 31b5e37..1f21d96 100644
--- a/front/src/components/Streams/Stream.vue
+++ b/front/src/components/Streams/Stream.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="{ selected: selected }">
     <p class="name">
       <router-link :to="stream.name">
         {{ stream.name }}
@@ -16,15 +16,21 @@ export default {
     'stream'
   ],
   computed: {
+    selected() { return this.$store.state.currentStream == this.stream.name }
   },
 }
 </script>
 
 <style scoped>
 div {
+  padding: 0.5em;
+}
+div .selected {
+  background: rgb(247, 146, 247);
 }
 div p {
   margin: 0;
 }
 
+
 </style>
\ No newline at end of file
diff --git a/front/src/components/Streams/index.vue b/front/src/components/Streams/index.vue
index 2a806a5..e74b438 100644
--- a/front/src/components/Streams/index.vue
+++ b/front/src/components/Streams/index.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="streams">
-    <p class="title">{{ $.type.name }}</p>
+    <!-- <p class="title">{{ $.type.name }}</p> -->
     <Stream
       v-for="stream in streams"
       :key="stream.id"
@@ -29,6 +29,7 @@ export default {
 <style scoped>
 .streams {
   min-width: 10em;
+  padding: 0;
 }
 @media print {
   .streams { display: none; } 
diff --git a/front/src/store/index.js b/front/src/store/index.js
index d8e4050..91582e1 100644
--- a/front/src/store/index.js
+++ b/front/src/store/index.js
@@ -115,20 +115,29 @@ export default createStore({
         }
       }
     },
-    deleteMessage: (state, mid) => {
-      const message = state.contents.find(m => m.id == mid)
-      if (message) {
-        state.contents.splice(state.contents.indexOf(message), 1)
+    deleteMessage: (state, { mid, subject }) => {
+      const topic = state.topics.find(t => t.title == subject)
+      if (topic) {
+        const message = topic.messages.find(m => m.id == mid)
+        if (message) {
+          topic.messages.splice(topic.messages.indexOf(message), 1)
+        }
       }
     },
     addReaction: (state, { mid, reaction }) => {
-      const message = state.contents.find(m => m.id == mid)
+      const message = state.topics
+        .map(t => t.messages)
+        .flat()
+        .find(m => m.id == mid)
       if (message) {
         message.reactions.push(reaction)
       }
     },
     removeReaction: (state, { mid, reaction }) => {
-      const message = state.contents.find(m => m.id == mid)
+      const message = state.topics
+        .map(t => t.messages)
+        .flat()
+        .find(m => m.id == mid)
       if (message) {
         message.reactions.splice(message.reactions.indexOf(reaction), 1)
       }
@@ -145,13 +154,15 @@ export default createStore({
     addRule: (state, rule) => {
       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)]]
       }
     },
     editMessage: (state, { mid, content }) => {
-      const message = state.contents.find(m => m.id == mid)
+      const message = state.topics
+        .map(t => t.messages)
+        .flat()
+        .find(m => m.id == mid)
       const rule = state.rules.find(r => r.id == mid)
       if (message) {
         message.content = content
@@ -173,10 +184,17 @@ export default createStore({
           id: mid, content: content,
         }, state.currentStream)]]
         state.rules = newRules
-
       }
     },
 
+    updateTopic: (state, { orig_subject, subject }) => {
+      const topic = state.topics.find(t => t.title == orig_subject)
+      if (topic) {
+        topic.title = subject
+        topic.messages.forEach(m => m.subject = subject)
+      }
+    }
+
   },
 
   actions: {
@@ -184,7 +202,11 @@ export default createStore({
 
   getters: {
     rules: state => state.rules,
-    sortedTopics: state => [...state.topics].sort((a, b) => a.title.localeCompare(b.title))
+    sortedTopics: state => (
+      [...state.topics]
+      .sort((a, b) => a.title.localeCompare(b.title))
+      .filter(t => t.messages.length > 0) 
+    )
   }
 
 })