diff --git a/package.json b/package.json
index 07ef710..abddc87 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "newswire",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "Pieter Montoulieu <pi.mont@icloud.com>",
   "description": "A modern desktop frontend for live cable news streams",
   "license": null,
diff --git a/src/renderer/assets/sass/main.scss b/src/renderer/assets/sass/main.scss
index dae1506..d87ff72 100644
--- a/src/renderer/assets/sass/main.scss
+++ b/src/renderer/assets/sass/main.scss
@@ -1,12 +1,13 @@
 $color-primary: #49b884;
 $color-dark: #262626;
 $color-light: #fafafa;
+$color-red: #f33d35;
 $color-gray: darken($color-light, 50%);
 
 $theme-colors: (
   primary: $color-primary,
   dark: $color-dark,
-  danger: #f33d35,
+  danger: $color-red,
   gray: $color-gray,
 );
 
@@ -53,8 +54,10 @@ button {
 
 
   &:hover,
-  &:focus {
+  &:focus,
+  &.active {
     background: darken($color-light, 80%);
+    border-color: $color-dark;
     outline: 0;
   }
 }
diff --git a/src/renderer/components/ChannelList.vue b/src/renderer/components/ChannelList.vue
index 552af87..fd6c319 100644
--- a/src/renderer/components/ChannelList.vue
+++ b/src/renderer/components/ChannelList.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <b-list-group class="pt-1">
-      <b-list-group-item button v-for="(options, channel) in channels" :key="channel.id" v-on:click="changeChannel(channel)" class="py-0 pl-4">
+      <b-list-group-item button v-for="(options, channel) in channels" :key="channel.id" v-on:click="changeChannel(channel)" v-bind:class="{ active: channel == currentChannel.name }" class="py-0 pl-4">
         <img :src="options.logo.url" v-if="options.logo.url" :height="options.logo.height">
         <span class="label" v-if="!options.logo.url">{{channel}}</span>
       </b-list-group-item>
@@ -10,14 +10,140 @@
 </template>
 
 <script>
+const rp = require('request-promise')
+
 export default {
   name: 'channel-list',
   props: {
-    'channels': Object
+    currentChannel: Object
+  },
+  mounted () {
+    this.changeChannel(this.currentChannel.name)
   },
   methods: {
-    changeChannel (channel) {
+    emitChannel (channel) {
       this.$emit('change-channel', channel)
+    },
+    changeChannel (channel) {
+      console.log('----------------------------------------------------------------------------------------------------------------')
+      console.log('> Changing to: ' + channel)
+      let url = this.getChannelUrl(channel)
+      this.currentChannel.state = 'loading'
+      console.log('> Loading')
+      this.getStream(url)
+    },
+    getChannelUrl (channel) {
+      console.log('> Getting channel URL')
+      this.currentChannel.url = this.channels[channel].url
+      this.currentChannel.logo = this.channels[channel].logo.url
+      this.currentChannel.name = channel
+      return this.channels[channel].url
+    },
+    getStream (url) {
+      let self = this
+      console.log('> Scraping URL: ' + url)
+      let options = {
+        uri: encodeURI(url)
+      }
+      rp(options)
+        .then(function (html) {
+          // success
+          // console.log(html)
+          // let streamData = c('#myElement', html).next()[0].children[0].children[0].data
+
+          let scrapedUrl = html.substring(
+            html.lastIndexOf('file: "') + 7,
+            html.lastIndexOf('",auto')
+          )
+
+          if (scrapedUrl) {
+            self.currentChannel.stream = scrapedUrl
+            self.$emit('open-stream', scrapedUrl)
+          }
+        })
+        .catch(function (err) {
+          // error
+          console.log(err)
+        })
+    }
+  },
+  data () {
+    return {
+      channels: {
+        'MSNBC': {
+          url: 'https://www.watchnews.pro/msnbc-news.html',
+          logo: {
+            url: 'static/svg/logo/msnbc.svg',
+            height: 22
+          },
+          favorite: false
+        },
+        'CNN': {
+          url: 'https://www.watchnews.pro/cnn-news.html',
+          logo: {
+            url: 'static/svg/logo/cnn.svg',
+            height: 26
+          },
+          favorite: false
+        },
+        'ABC News': {
+          url: 'https://www.watchnews.pro/abc-news.html',
+          logo: {
+            url: 'static/svg/logo/abc-news.svg',
+            height: 26
+          },
+          favorite: false
+        },
+        'CBS News': {
+          url: 'https://www.watchnews.pro/cbsn.html',
+          logo: {
+            url: 'static/svg/logo/cbs-news.svg',
+            height: 24
+          },
+          favorite: false
+        },
+        'Al Jazeera America': {
+          url: 'https://www.livenewsnow.com/american/al-jazeera-america.html',
+          logo: {
+            url: 'static/svg/logo/aljazeera.svg',
+            height: 30
+          },
+          favorite: false
+        },
+        'Bloomberg': {
+          url: 'https://www.watchnews.pro/bloomberg.html',
+          logo: {
+            url: 'static/svg/logo/bloomberg.svg',
+            height: 22
+          },
+          favorite: false
+        },
+
+        'The Weather Channel': {
+          url: 'https://www.watchnews.pro/the-weather-channel.html',
+          logo: {
+            url: 'static/svg/logo/weather-channel.svg',
+            height: 35
+          },
+          favorite: false
+        }
+
+        // These streams give 403 errors 🤔
+        // 'CNBC': {
+        //   url: 'https://www.watchnews.pro/cnbc.html',
+        //   logo: '',
+        //   favorite: false
+        // },
+        // 'Fox News': {
+        //   url: 'https://www.watchnews.pro/fox-news.html',
+        //   favorited: false
+        // },
+        // 'HLN': {
+        //   url: 'https://www.watchnews.pro/hln.html',
+        //   logo: 'static/svg/logo/weather-channel.svg',
+        //   favorite: false
+        // },
+      }
     }
   }
 }
diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index 9a45afc..59ff1ec 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -5,7 +5,7 @@
       <span class="version bg-danger ml-2 mb-2 px-1 d-inline-block rounded">alpha {{ versionNumber }}</span>
     </header>
 
-    <channel-list :channels="channels" @change-channel="handleChannelChange"/>
+    <channel-list :currentChannel="currentChannel" :channels="channels" @open-stream="openStream"/>
     <!-- <div class="pt-3 pl-3">
       <b-button v-b-modal.modal-1 size="sm" variant="outline-gray" class="mt-1"><img src="static/icons/settings.svg" height="24"></b-button>
     </div> -->
@@ -18,7 +18,8 @@ import ChannelList from '@/components/ChannelList'
 export default {
   name: 'sidebar',
   props: {
-    channels: Object
+    channels: Object,
+    currentChannel: Object
   },
   components: {
     ChannelList
@@ -30,8 +31,8 @@ export default {
     }
   },
   methods: {
-    handleChannelChange (channel) {
-      this.$emit('change-channel', channel)
+    openStream (stream) {
+      this.$emit('open-stream', stream)
     }
   }
 }
diff --git a/src/renderer/components/VideoPane.vue b/src/renderer/components/VideoPane.vue
index 3966097..1191e8d 100644
--- a/src/renderer/components/VideoPane.vue
+++ b/src/renderer/components/VideoPane.vue
@@ -4,8 +4,16 @@
     @mouseleave="hovering = false"
   >
     <div class="embed-responsive embed-responsive-16by9 p-relative">
-      <video class="embed-responsive-item " width="720" height="480" id="video" autoplay :controls="hovering ? 'controls' : false" :poster="channels[currentChannel.name].logo.url ? channels[currentChannel.name].logo.url : false"></video>
-      <div class="spinner-container text-center d-flex justify-content-center align-items-center" v-if="loadingState != 'loaded'">
+      <video
+        class="embed-responsive-item"
+        width="720"
+        height="480"
+        id="video"
+        autoplay
+        :controls="hovering ? 'controls' : false"
+        :poster="currentChannel.logo ? currentChannel.logo : false"
+      />
+      <div class="spinner-container text-center d-flex justify-content-center align-items-center" v-if="currentChannel.state != 'loaded'">
         <b-spinner variant="light" type="grow"></b-spinner>
       </div>
     </div>
@@ -16,9 +24,6 @@
 export default {
   name: 'video-pane',
   props: {
-    channels: Object,
-    loadingState: String,
-    currentStream: String,
     currentChannel: Object
   },
   data () {
diff --git a/src/renderer/pages/Dashboard.vue b/src/renderer/pages/Dashboard.vue
index dce1430..e49b55f 100644
--- a/src/renderer/pages/Dashboard.vue
+++ b/src/renderer/pages/Dashboard.vue
@@ -3,12 +3,9 @@
     <b-container fluid class="">
       <div class="row">
         <video-pane
-          :channels="channels"
-          :loadingState="loadingState"
-          :currentStream="currentStream"
           :currentChannel="currentChannel"
         />
-        <sidebar :channels="channels" @change-channel="changeChannel"/>
+        <sidebar :currentChannel="currentChannel" @open-stream="openStream"/>
       </div>
     </b-container>
   </div>
@@ -17,10 +14,7 @@
 <script>
   import Sidebar from '@/components/Sidebar'
   import VideoPane from '@/components/VideoPane'
-
   import Hls from 'hls.js'
-
-  const rp = require('request-promise')
   // const { systemPreferences } = require('electron')
 
   // const c = require('cheerio')
@@ -33,144 +27,27 @@
     },
     data () {
       return {
-        loadingState: '',
         currentChannel: {
           name: 'MSNBC',
-          url: 'https://www.watchnews.pro/msnbc-news.html'
-        },
-        currentStream: '',
-        channels: {
-          'MSNBC': {
-            url: 'https://www.watchnews.pro/msnbc-news.html',
-            logo: {
-              url: 'static/svg/logo/msnbc.svg',
-              height: 22
-            },
-            favorite: false
-          },
-          'CNN': {
-            url: 'https://www.watchnews.pro/cnn-news.html',
-            logo: {
-              url: 'static/svg/logo/cnn.svg',
-              height: 26
-            },
-            favorite: false
-          },
-          'ABC News': {
-            url: 'https://www.watchnews.pro/abc-news.html',
-            logo: {
-              url: 'static/svg/logo/abc-news.svg',
-              height: 26
-            },
-            favorite: false
-          },
-          'CBS News': {
-            url: 'https://www.watchnews.pro/cbsn.html',
-            logo: {
-              url: 'static/svg/logo/cbs-news.svg',
-              height: 24
-            },
-            favorite: false
-          },
-          'Al Jazeera America': {
-            url: 'https://www.livenewsnow.com/american/al-jazeera-america.html',
-            logo: {
-              url: 'static/svg/logo/aljazeera.svg',
-              height: 30
-            },
-            favorite: false
-          },
-          'Bloomberg': {
-            url: 'https://www.watchnews.pro/bloomberg.html',
-            logo: {
-              url: 'static/svg/logo/bloomberg.svg',
-              height: 22
-            },
-            favorite: false
-          },
-
-          'The Weather Channel': {
-            url: 'https://www.watchnews.pro/the-weather-channel.html',
-            logo: {
-              url: 'static/svg/logo/weather-channel.svg',
-              height: 35
-            },
-            favorite: false
-          }
-
-          // These streams give 403 errors 🤔
-          // 'CNBC': {
-          //   url: 'https://www.watchnews.pro/cnbc.html',
-          //   logo: '',
-          //   favorite: false
-          // },
-          // 'Fox News': {
-          //   url: 'https://www.watchnews.pro/fox-news.html',
-          //   favorited: false
-          // },
-          // 'HLN': {
-          //   url: 'https://www.watchnews.pro/hln.html',
-          //   logo: 'static/svg/logo/weather-channel.svg',
-          //   favorite: false
-          // },
+          url: 'https://www.watchnews.pro/msnbc-news.html',
+          stream: '',
+          logo: '',
+          state: ''
         }
       }
     },
     mounted () {
       // let self = this
-      this.changeChannel(this.currentChannel.name)
       // console.log('SystemPref: ' + systemPreferences)
     },
     computed: {
       darkMode: function () {
-
       }
     },
     methods: {
       open (link) {
         this.$electron.shell.openExternal(link)
       },
-      changeChannel (channel) {
-        console.log('------------------------------------------------------------------------------------------------------------')
-        console.log('> Changing to: ' + channel)
-        let url = this.getChannelUrl(channel)
-        this.loadingState = 'loading'
-        console.log('> Loading')
-        this.getStream(url)
-      },
-      getChannelUrl (channel) {
-        console.log('> Getting channel URL')
-        this.currentChannel.url = this.channels[channel].url
-        this.currentChannel.name = channel
-        return this.channels[channel].url
-      },
-      getStream (url) {
-        let self = this
-        console.log('> Scraping url: ' + url)
-        let options = {
-          uri: encodeURI(url)
-        }
-        rp(options)
-          .then(function (html) {
-            // success
-            // console.log(html)
-            // let streamData = c('#myElement', html).next()[0].children[0].children[0].data
-
-            let scrapedUrl = html.substring(
-              html.lastIndexOf('file: "') + 7,
-              html.lastIndexOf('",auto')
-            )
-
-            if (scrapedUrl) {
-              self.currentStream = scrapedUrl
-              self.openStream(scrapedUrl)
-            }
-          })
-          .catch(function (err) {
-            // error
-            console.log(err)
-          })
-      },
       openStream (url) {
         let self = this
         if (Hls.isSupported()) {
@@ -182,13 +59,13 @@
           hls.on(Hls.Events.MEDIA_ATTACHED, function () {
             // console.log('video and hls.js are now bound together !')
             hls.loadSource(url)
-            console.log('> Opened stream: ' + url)
             hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
+              console.log('> Opened Stream: ' + url)
               // console.log('manifest loaded, found ' + data.levels.length + ' quality level')
               video.play()
-              self.loadingState = 'loaded'
+              self.currentChannel.state = 'loaded'
               console.log('> Loaded')
-              console.log('------------------------------------------------------------------------------------------------------------')
+              console.log('----------------------------------------------------------------------------------------------------------------')
               console.log('')
             })
           })