diff --git a/assets/components/LogEventSource.vue b/assets/components/LogEventSource.vue
new file mode 100644
index 00000000..5753ad14
--- /dev/null
+++ b/assets/components/LogEventSource.vue
@@ -0,0 +1,52 @@
+<template lang="html">
+  <span>
+    <slot v-bind:messages="messages"></slot>
+  </span>
+</template>
+
+<script>
+let nextId = 0;
+let es = null;
+function parseMessage(data) {
+  const date = new Date(data.substring(0, 30));
+  const message = data.substring(30);
+  const key = nextId++;
+  return {
+    key,
+    date,
+    message
+  };
+}
+
+export default {
+  props: ["id"],
+  name: "LogEventSource",
+  data() {
+    return {
+      messages: []
+    };
+  },
+  created() {
+    this.loadLogs(this.id);
+  },
+  methods: {
+    loadLogs(id) {
+      if (es) {
+        es.close();
+        this.messages = [];
+        es = null;
+      }
+      es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${this.id}`);
+      es.onmessage = e => this.messages.push(parseMessage(e.data));
+      this.$once("hook:beforeDestroy", () => es.close());
+    }
+  },
+  watch: {
+    id(newValue, oldValue) {
+      if (oldValue !== newValue) {
+        this.loadLogs(newValue);
+      }
+    }
+  }
+};
+</script>
diff --git a/assets/components/LogViewer.vue b/assets/components/LogViewer.vue
new file mode 100644
index 00000000..1f346f6b
--- /dev/null
+++ b/assets/components/LogViewer.vue
@@ -0,0 +1,150 @@
+<template lang="html">
+  <div class="is-fullheight">
+    <div class="search columns is-gapless is-vcentered" v-show="showSearch">
+      <div class="column">
+        <p class="control has-icons-left">
+          <input class="input" type="text" placeholder="Filter" ref="filter" v-model="filter" />
+          <span class="icon is-small is-left"><i class="fas fa-search"></i></span>
+        </p>
+      </div>
+      <div class="column is-1 has-text-centered">
+        <button class="delete is-medium" @click="resetSearch()"></button>
+      </div>
+    </div>
+
+    <ul class="events">
+      <li v-for="item in filtered" class="event" :key="item.key">
+        <span class="date">{{ item.date | relativeTime }}</span>
+        <span class="text" v-html="colorize(item.message)"></span>
+      </li>
+    </ul>
+    <scrollbar-notification :messages="messages"></scrollbar-notification>
+  </div>
+</template>
+
+<script>
+import { formatRelative } from "date-fns";
+import AnsiConvertor from "ansi-to-html";
+import ScrollbarNotification from "./ScrollbarNotification";
+
+const ansiConvertor = new AnsiConvertor({ escapeXML: true });
+
+export default {
+  props: ["messages"],
+  name: "LogViewer",
+  components: {
+    ScrollbarNotification
+  },
+  data() {
+    return {
+      showSearch: false,
+      filter: ""
+    };
+  },
+  mounted() {
+    window.addEventListener("keydown", this.onKeyDown);
+  },
+  destroyed() {
+    window.removeEventListener("keydown", this.onKeyDown);
+  },
+  methods: {
+    onKeyDown(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
+        this.showSearch = true;
+        this.$nextTick(() => this.$refs.filter.focus());
+        e.preventDefault();
+      } else if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        this.messages = [];
+      } else if (e.key === "Escape") {
+        this.resetSearch();
+      }
+    },
+    resetSearch() {
+      this.showSearch = false;
+      this.filter = "";
+    },
+    colorize: function(value) {
+      return ansiConvertor
+        .toHtml(value)
+        .replace("&lt;mark&gt;", "<mark>")
+        .replace("&lt;/mark&gt;", "</mark>");
+    }
+  },
+  computed: {
+    filtered() {
+      const { filter, messages } = this;
+
+      if (filter) {
+        const isSmartCase = filter === filter.toLowerCase();
+        const regex = isSmartCase ? new RegExp(filter, "i") : new RegExp(filter);
+        return messages
+          .filter(d => d.message.match(regex))
+          .map(d => ({
+            ...d,
+            message: d.message.replace(regex, "<mark>$&</mark>")
+          }));
+      }
+      return messages;
+    }
+  },
+  filters: {
+    relativeTime(date) {
+      return formatRelative(date, new Date());
+    }
+  }
+};
+</script>
+<style scoped>
+.events {
+  padding: 10px;
+  font-family: "Roboto Mono", monaco, monospace;
+}
+
+.event {
+  font-size: 13px;
+  line-height: 16px;
+  word-wrap: break-word;
+}
+
+.date {
+  background-color: #262626;
+  color: #258ccd;
+}
+
+.is-fullheight {
+  min-height: 100vh;
+}
+
+.text {
+  white-space: pre-wrap;
+}
+
+.search {
+  width: 350px;
+  position: fixed;
+  padding: 10px;
+  background: rgba(50, 50, 50, 0.9);
+  top: 0;
+  right: 0;
+  border-radius: 0 0 0 5px;
+}
+.delete {
+  margin-left: 1em;
+}
+
+/deep/ mark {
+  border-radius: 2px;
+  background-color: #ffdd57;
+  animation: pops 0.2s ease-out;
+  display: inline-block;
+}
+
+@keyframes pops {
+  0% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1.05);
+  }
+}
+</style>
diff --git a/assets/components/ScrollbarNotification.vue b/assets/components/ScrollbarNotification.vue
index 1debe0cc..c0c83348 100644
--- a/assets/components/ScrollbarNotification.vue
+++ b/assets/components/ScrollbarNotification.vue
@@ -36,8 +36,7 @@ export default {
       const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
       const scrollBottom =
         (document.documentElement.scrollHeight || document.body.scrollHeight) - document.documentElement.clientHeight;
-      const diff = Math.abs(scrollTop - scrollBottom);
-      this.visible = diff > 50;
+      this.visible = scrollBottom - scrollTop > 50;
       if (!this.visible) {
         this.hasNew = false;
       }
diff --git a/assets/pages/Container.spec.js b/assets/pages/Container.spec.js
index 1408baf7..287341cd 100644
--- a/assets/pages/Container.spec.js
+++ b/assets/pages/Container.spec.js
@@ -1,14 +1,16 @@
 import EventSource from "eventsourcemock";
 import { sources } from "eventsourcemock";
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, mount } from "@vue/test-utils";
 import MockDate from "mockdate";
 import Container from "./Container";
+import LogViewer from "../components/LogViewer.vue";
 
 describe("<Container />", () => {
   beforeEach(() => {
     global.BASE_PATH = "";
     global.EventSource = EventSource;
     MockDate.set("6/12/2019", 0);
+    window.scrollTo = jest.fn();
   });
 
   afterEach(() => MockDate.reset());
@@ -19,12 +21,12 @@ describe("<Container />", () => {
   });
 
   test("renders correctly", async () => {
-    const wrapper = shallowMount(Container);
+    const wrapper = mount(Container);
     expect(wrapper.element).toMatchSnapshot();
   });
 
   test("should connect to EventSource", async () => {
-    shallowMount(Container, {
+    mount(Container, {
       propsData: { id: "abc" }
     });
     sources["/api/logs/stream?id=abc"].emitOpen();
@@ -32,7 +34,7 @@ describe("<Container />", () => {
   });
 
   test("should close EventSource", async () => {
-    const wrapper = shallowMount(Container, {
+    const wrapper = mount(Container, {
       propsData: { id: "abc" }
     });
     sources["/api/logs/stream?id=abc"].emitOpen();
@@ -41,12 +43,12 @@ describe("<Container />", () => {
   });
 
   test("should parse messages", async () => {
-    const wrapper = shallowMount(Container, {
+    const wrapper = mount(Container, {
       propsData: { id: "abc" }
     });
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-    const [message, _] = wrapper.vm.messages;
+    const [message, _] = wrapper.find(LogViewer).vm.messages;
 
     expect(message).toMatchInlineSnapshot(`
       Object {
@@ -58,7 +60,7 @@ describe("<Container />", () => {
   });
 
   test("should render messages", async () => {
-    const wrapper = shallowMount(Container, {
+    const wrapper = mount(Container, {
       propsData: { id: "abc" }
     });
     sources["/api/logs/stream?id=abc"].emitOpen();
@@ -72,7 +74,7 @@ describe("<Container />", () => {
   });
 
   test("should render messages with color", async () => {
-    const wrapper = shallowMount(Container, {
+    const wrapper = mount(Container, {
       propsData: { id: "abc" }
     });
     sources["/api/logs/stream?id=abc"].emitOpen();
@@ -88,7 +90,7 @@ describe("<Container />", () => {
   });
 
   test("should render messages with html entities", async () => {
-    const wrapper = shallowMount(Container, {
+    const wrapper = mount(Container, {
       propsData: { id: "abc" }
     });
     sources["/api/logs/stream?id=abc"].emitOpen();
@@ -104,7 +106,7 @@ describe("<Container />", () => {
   });
 
   test("should render messages with filter", async () => {
-    const wrapper = shallowMount(Container, {
+    const wrapper = mount(Container, {
       propsData: { id: "abc" }
     });
     sources["/api/logs/stream?id=abc"].emitOpen();
@@ -115,7 +117,7 @@ describe("<Container />", () => {
       data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`
     });
 
-    wrapper.setData({ filter: "test" });
+    wrapper.find(LogViewer).setData({ filter: "test" });
 
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
       <ul class="events">
diff --git a/assets/pages/Container.vue b/assets/pages/Container.vue
index 6b5f5073..fb576640 100644
--- a/assets/pages/Container.vue
+++ b/assets/pages/Container.vue
@@ -1,198 +1,26 @@
 <template lang="html">
-  <div class="is-fullheight">
-    <div class="search columns is-gapless is-vcentered" v-show="showSearch">
-      <div class="column">
-        <p class="control has-icons-left">
-          <input class="input" type="text" placeholder="Filter" ref="filter" v-model="filter" />
-          <span class="icon is-small is-left"><i class="fas fa-search"></i></span>
-        </p>
-      </div>
-      <div class="column is-1 has-text-centered">
-        <button class="delete is-medium" @click="resetSearch()"></button>
-      </div>
-    </div>
-
-    <ul class="events">
-      <li v-for="item in filtered" class="event" :key="item.key">
-        <span class="date">{{ item.date | relativeTime }}</span>
-        <span class="text" v-html="colorize(item.message)"></span>
-      </li>
-    </ul>
-    <scrollbar-notification :messages="messages"></scrollbar-notification>
-  </div>
+  <log-event-source :id="id" v-slot="eventSource">
+    <log-viewer :messages="eventSource.messages"></log-viewer>
+  </log-event-source>
 </template>
 
 <script>
-import { formatRelative } from "date-fns";
-import AnsiConvertor from "ansi-to-html";
-import ScrollbarNotification from "../components/ScrollbarNotification";
-
-const ansiConvertor = new AnsiConvertor({ escapeXML: true });
-
-let es = null;
-let nextId = 0;
-
-function parseMessage(data) {
-  const date = new Date(data.substring(0, 30));
-  const message = data.substring(30);
-  const key = nextId++;
-  return {
-    key,
-    date,
-    message
-  };
-}
+import LogEventSource from "../components/LogEventSource";
+import LogViewer from "../components/LogViewer";
 
 export default {
   props: ["id", "name"],
   name: "Container",
   components: {
-    ScrollbarNotification
-  },
-  data() {
-    return {
-      messages: [],
-      showSearch: false,
-      title: "",
-      filter: ""
-    };
+    LogViewer,
+    LogEventSource
   },
   metaInfo() {
     return {
-      title: this.title,
+      title: this.name,
       titleTemplate: "%s - Dozzle"
     };
-  },
-  mounted() {
-    window.addEventListener("keydown", this.onKeyDown);
-  },
-  destroyed() {
-    window.removeEventListener("keydown", this.onKeyDown);
-  },
-  created() {
-    this.loadLogs(this.id);
-  },
-  beforeDestroy() {
-    if (es) {
-      es.close();
-      es = null;
-    }
-  },
-  watch: {
-    id(newValue, oldValue) {
-      if (oldValue !== newValue) {
-        this.loadLogs(newValue);
-      }
-    }
-  },
-  methods: {
-    loadLogs(id) {
-      if (es) {
-        es.close();
-        es = null;
-        this.messages = [];
-      }
-      es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${id}`);
-      es.onmessage = e => this.messages.push(parseMessage(e.data));
-      this.title = `${this.name}`;
-    },
-    onKeyDown(e) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
-        this.showSearch = true;
-        this.$nextTick(() => this.$refs.filter.focus());
-        e.preventDefault();
-      } else if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        this.messages = [];
-      } else if (e.key === "Escape") {
-        this.resetSearch();
-      }
-    },
-    resetSearch() {
-      this.showSearch = false;
-      this.filter = "";
-    },
-    colorize: function(value) {
-      return ansiConvertor
-        .toHtml(value)
-        .replace("&lt;mark&gt;", "<mark>")
-        .replace("&lt;/mark&gt;", "</mark>");
-    }
-  },
-  computed: {
-    filtered() {
-      const { filter, messages } = this;
-
-      if (filter) {
-        const isSmartCase = filter === filter.toLowerCase();
-        const regex = isSmartCase ? new RegExp(filter, "i") : new RegExp(filter);
-        return messages
-          .filter(d => d.message.match(regex))
-          .map(d => ({
-            ...d,
-            message: d.message.replace(regex, "<mark>$&</mark>")
-          }));
-      }
-      return messages;
-    }
-  },
-  filters: {
-    relativeTime(date) {
-      return formatRelative(date, new Date());
-    }
   }
 };
 </script>
-<style scoped>
-.events {
-  padding: 10px;
-  font-family: "Roboto Mono", monaco, monospace;
-}
-
-.event {
-  font-size: 13px;
-  line-height: 16px;
-  word-wrap: break-word;
-}
-
-.date {
-  background-color: #262626;
-  color: #258ccd;
-}
-
-.is-fullheight {
-  min-height: 100vh;
-}
-
-.text {
-  white-space: pre-wrap;
-}
-
-.search {
-  width: 350px;
-  position: fixed;
-  padding: 10px;
-  background: rgba(50, 50, 50, 0.9);
-  top: 0;
-  right: 0;
-  border-radius: 0 0 0 5px;
-}
-.delete {
-  margin-left: 1em;
-}
-
-/deep/ mark {
-  border-radius: 2px;
-  background-color: #ffdd57;
-  animation: pops 0.2s ease-out;
-  display: inline-block;
-}
-
-@keyframes pops {
-  0% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
-</style>
+<style scoped></style>
diff --git a/assets/pages/__snapshots__/Container.spec.js.snap b/assets/pages/__snapshots__/Container.spec.js.snap
index f2fe4428..4fe01731 100644
--- a/assets/pages/__snapshots__/Container.spec.js.snap
+++ b/assets/pages/__snapshots__/Container.spec.js.snap
@@ -1,50 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Container /> renders correctly 1`] = `
-<div
-  class="is-fullheight"
->
+<span>
   <div
-    class="search columns is-gapless is-vcentered"
-    style="display: none;"
+    class="is-fullheight"
   >
     <div
-      class="column"
+      class="search columns is-gapless is-vcentered"
+      style="display: none;"
     >
-      <p
-        class="control has-icons-left"
+      <div
+        class="column"
       >
-        <input
-          class="input"
-          placeholder="Filter"
-          type="text"
-        />
-         
-        <span
-          class="icon is-small is-left"
+        <p
+          class="control has-icons-left"
         >
-          <i
-            class="fas fa-search"
+          <input
+            class="input"
+            placeholder="Filter"
+            type="text"
           />
-        </span>
-      </p>
+           
+          <span
+            class="icon is-small is-left"
+          >
+            <i
+              class="fas fa-search"
+            />
+          </span>
+        </p>
+      </div>
+       
+      <div
+        class="column is-1 has-text-centered"
+      >
+        <button
+          class="delete is-medium"
+        />
+      </div>
     </div>
      
-    <div
-      class="column is-1 has-text-centered"
+    <ul
+      class="events"
+    />
+     
+    <button
+      class="button scroll-notification is-primary"
+      name="fade"
+      style="display: none;"
     >
-      <button
-        class="delete is-medium"
-      />
-    </div>
+      <span
+        class="icon large"
+      >
+        <i
+          class="fas fa-chevron-down"
+        />
+      </span>
+    </button>
   </div>
-   
-  <ul
-    class="events"
-  />
-   
-  <scrollbar-notification-stub
-    messages=""
-  />
-</div>
+</span>
 `;
diff --git a/package.json b/package.json
index 7960df21..7af36604 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
   "vue": "./node_modules/vue/dist/vue.esm.js"
  },
  "jest": {
+  "clearMocks": true,
   "moduleFileExtensions": [
    "js",
    "json",