diff --git a/src/components/App.js b/src/components/App.js
index b66302d..f60611e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,6 +3,8 @@ import { BrowserRouter as Router, Route } from 'react-router-dom';
 import Home from './Home';
 import Header from './Header';
 
+import './App.scss';
+
 export default () => {
   return (
     <div className='App'>
diff --git a/src/components/App.scss b/src/components/App.scss
new file mode 100644
index 0000000..a89dd75
--- /dev/null
+++ b/src/components/App.scss
@@ -0,0 +1,29 @@
+body {
+  background-color: #4a4a4a;
+  font-size: 160%;
+  color: #fff
+}
+
+
+.app-header {
+  text-align: center;
+  background-color: #282c34;
+  font-size: 1.6em;
+  padding: 0.5em 0;
+  color: white;
+}
+
+.channelList {
+  list-style: none
+}
+
+.channel-view {
+  background-color: green;
+  width: 20%;
+  height: auto;
+  margin: auto;
+}
+
+.channel-view ul {
+  text-align: left
+}
diff --git a/src/index.scss b/src/index.scss
index 43a7743..cee5f34 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -6,35 +6,9 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #4a4a4a;
-  font-size: 160%;
-  color: #fff
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
-
-.app-header {
-  text-align: center;
-  background-color: #282c34;
-  font-size: 1.6em;
-  padding: 0.5em 0;
-  color: white;
-}
-
-.channelList {
-  list-style: none
-}
-
-.channel-view {
-  background-color: green;
-  width: 20%;
-  height: auto;
-  margin: auto;
-}
-
-.channel-view ul {
-  text-align: left
-}