diff --git a/src/components/IndexHeader/index.js b/src/components/IndexHeader/index.js
index adbb0af15..2e9e2fb2c 100644
--- a/src/components/IndexHeader/index.js
+++ b/src/components/IndexHeader/index.js
@@ -5,6 +5,7 @@ import SearchInput from 'components/SearchInput';
 import debug from 'helpers/debug';
 
 const logo = require('../../../static/images/logo-lg-w.png');
+const styles = require('./style.scss');
 
 export default class IndexHeader extends Component {
   static propTypes = {
@@ -29,10 +30,10 @@ export default class IndexHeader extends Component {
         <div className="container">
           <div className="row">
             <div className="col-md-10 col-md-offset-1 text-center">
-              <Link to="/" data-metrics-event-name="IndexHeader:Link:Index">
-                <img src={logo} className="logo" alt="logo" />
+              <Link to="/" className={styles.link} data-metrics-event-name="IndexHeader:Link:Index">
+                <img src={logo} className={styles.logo} alt="logo" />
               </Link>
-              <h4 className="title">THE NOBLE QUR&#x27;AN</h4>
+              <h4 className={styles.title}>THE NOBLE QUR&#x27;AN</h4>
               {this.renderSearch()}
             </div>
           </div>
diff --git a/src/components/IndexHeader/style.scss b/src/components/IndexHeader/style.scss
new file mode 100644
index 000000000..2211ac9df
--- /dev/null
+++ b/src/components/IndexHeader/style.scss
@@ -0,0 +1,18 @@
+@import '../../styles/variables.scss';
+
+.link{
+  display: inline-block;
+  width: 30%;
+  margin-top: 35px;
+}
+.logo{
+  padding-top: 10px;
+  padding-bottom: 10px;
+  height: auto;
+  width: 100%;
+}
+.title{
+  color: lighten($brand-primary, 30%);
+  font-size: 160%;
+  padding-bottom: 3.5%;
+}
diff --git a/src/styles/partials/_index-header.scss b/src/styles/partials/_index-header.scss
index 4a61ce4b4..838da0347 100644
--- a/src/styles/partials/_index-header.scss
+++ b/src/styles/partials/_index-header.scss
@@ -46,14 +46,4 @@
     }
 
   }
-  .logo{
-    padding-top: 10px;
-    padding-bottom: 10px;
-    width: 30%;
-  }
-  .title{
-    color: lighten($brand-primary, 30%);
-    font-size: 160%;
-    padding-bottom: 3.5%;
-  }
 }