diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
index d6b8d89c7..57f48b889 100644
--- a/src/components/Loader/index.js
+++ b/src/components/Loader/index.js
@@ -1,12 +1,8 @@
 import React from 'react';
 
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-const styles = require('./style.scss');
-
 const Loader = () => (
-  <div className={styles.loader}>
-    <LocaleFormattedMessage id="app.loading" defaultMessage="Loading..." />
+  <div className="text-center">
+    <i className="fa fa-circle-o-notch fa-spin fa-3x fa-fw text-center text-primary" />
   </div>
 );
 
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index c30708056..eb3a20f8b 100644
--- a/src/containers/Surah/index.js
+++ b/src/containers/Surah/index.js
@@ -379,7 +379,7 @@ class Surah extends Component {
     const { surah, options, actions } = this.props; // eslint-disable-line no-shadow
     debug('component:Surah', 'Render');
 
-    if (!this.hasAyahs()) return <div style={{ margin: '50px auto' }}><Loader /></div>;
+    if (!this.hasAyahs()) return <div className={style.container} style={{ margin: '50px auto' }}><Loader /></div>;
 
     return (
       <div className="surah-body">
@@ -428,7 +428,7 @@ class Surah extends Component {
         >
           {this.renderSidebar()}
         </Sidebar>
-        <div className={`container-fluid ${style['surah-container']}`}>
+        <div className={`container-fluid ${style.container}`}>
           <div className="row">
             <SurahInfo
               surah={surah}
diff --git a/src/containers/Surah/style.scss b/src/containers/Surah/style.scss
index 088ab7455..d417d56fa 100644
--- a/src/containers/Surah/style.scss
+++ b/src/containers/Surah/style.scss
@@ -27,7 +27,7 @@
   border-right: 1px solid rgba(173, 170, 156, 0.5);
 }
 
-.surah-container {
+.container {
   padding-top: 70px;
   min-height: 80vh;