diff --git a/package.json b/package.json
index 74d5e54..723378c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "skeleton-ui-react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "React SPA Starter Project",
   "main": "index.js",
   "repository": "git@github.com:leanstacks/skeleton-ui-react.git",
diff --git a/src/app.js b/src/app.js
index 74a9539..663cae8 100644
--- a/src/app.js
+++ b/src/app.js
@@ -42,7 +42,10 @@ if (technologiesLastUpdated.add(1, 'hours').isBefore(moment())) {
   // Fetch Data using API
   store.dispatch(startSetTechnologies()).then(() => {
     console.log('startSetTechnologies success');
-    renderApp();
+    // Simulate API Latency -- Remove in Production
+    setTimeout(() => {
+      renderApp();
+    }, 2000);
   }).catch((err) => {
     //TODO Handle API Failure
     console.log('startSetTechnologies failure');
diff --git a/src/components/BusyIndicator.js b/src/components/BusyIndicator.js
index 67496c4..d8a2e51 100644
--- a/src/components/BusyIndicator.js
+++ b/src/components/BusyIndicator.js
@@ -3,27 +3,28 @@ import React from 'react';
 const getSizeClass = (size) => {
   switch (size) {
     case 'xl':
-      return 'busy-indicator--xl';
+      return 'h1';
     case 'lg':
-      return 'busy-indicator--lg';
+      return 'lead';
     case 'sm':
-      return 'busy-indicator--sm';
+      return 'small';
     default:
-      return 'busy-indicator--md';
+      return '';
   };
 };
 
 const BusyIndicator = (props) => {
-  const icon = props.icon || 'fa-circle-o-notch';
+  const icon = props.icon || 'fa-circle-notch';
   return (
-    <div className={'busy-indicator ' + getSizeClass(props.size)}>
-      <div className="busy-indicator__content">
-        <div className="busy-indicator__heading">
-          <div className="busy-indicator__title">{props.title}</div>
-        </div>
-        <div className="busy-indicator__body">
-          <i className={'busy-indicator__icon fa fa-fw fa-spin ' + icon} />
-        </div>
+    <div className="h-100 d-flex flex-column justify-content-center text-center">
+      <div className={getSizeClass(props.size)}>
+        { 
+          props.title ? (
+            <span>{props.title}&nbsp;<i className={'fas fa-spin ' + icon} /></span>
+          ) : (
+            <i className={'fas fa-spin ' + icon} />
+          )
+        }
       </div>
     </div>
   );
diff --git a/src/components/LoadingPage.js b/src/components/LoadingPage.js
index 4e9ad61..e5025d0 100644
--- a/src/components/LoadingPage.js
+++ b/src/components/LoadingPage.js
@@ -3,8 +3,8 @@ import React from 'react';
 import BusyIndicator from './BusyIndicator';
 
 const LoadingPage = () => (
-  <div className="busy-indicator--full-page">
-    <BusyIndicator size="xl" />
+  <div className="page-full">
+    <BusyIndicator size="xl" title="Loading..." />
   </div>
 );
 
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index a842a9b..7a768f8 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -16,10 +16,6 @@ a {
   }
 }
 
-.page {
-  min-height: 75vh;
-}
-
 .text-blue {
   color: $blue;
 }
@@ -30,4 +26,18 @@ a {
 
 .text-react-blue {
   color: $react-blue;
-}
\ No newline at end of file
+}
+
+.page {
+  min-height: 75vh;
+}
+
+.page-full {
+  height: 100vh;
+  width: 100vw;
+}
+
+.page-half {
+  height: 50vh;
+  width: 100vw;
+}
diff --git a/src/styles/components/_busy-indicator.scss b/src/styles/components/_busy-indicator.scss
deleted file mode 100644
index 031658e..0000000
--- a/src/styles/components/_busy-indicator.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.busy-indicator {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
-
-.busy-indicator__content {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-
-.busy-indicator__icon {
-  margin-left: $s-size;
-}
-
-.busy-indicator--xl {
-  font-size: $font-size-xxlarge;
-}
-
-.busy-indicator--lg {
-  font-size: $font-size-xlarge;
-}
-
-.busy-indicator--md {
-
-}
-
-.busy-indicator--sm {
-  font-size: $font-size-xsmall;
-}
-
-.busy-indicator--full-page {
-  height: 100vh;
-  width: 100vw;
-}
-
-.busy-indicator--half-page {
-  height: 50vh;
-  width: 100vw;
-}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 70926d6..61c0d21 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,4 +1,3 @@
 @import './base/settings';
 @import './base/base';
-@import './components/busy-indicator';
 @import './components/footer';
diff --git a/src/tests/components/__snapshots__/BusyIndicator.test.js.snap b/src/tests/components/__snapshots__/BusyIndicator.test.js.snap
index 764fa5f..b946c26 100644
--- a/src/tests/components/__snapshots__/BusyIndicator.test.js.snap
+++ b/src/tests/components/__snapshots__/BusyIndicator.test.js.snap
@@ -2,25 +2,14 @@
 
 exports[`should render BusyIndicator correctly 1`] = `
 <div
-  className="busy-indicator busy-indicator--md"
+  className="h-100 d-flex flex-column justify-content-center text-center"
 >
   <div
-    className="busy-indicator__content"
+    className=""
   >
-    <div
-      className="busy-indicator__heading"
-    >
-      <div
-        className="busy-indicator__title"
-      />
-    </div>
-    <div
-      className="busy-indicator__body"
-    >
-      <i
-        className="busy-indicator__icon fa fa-fw fa-spin fa-circle-o-notch"
-      />
-    </div>
+    <i
+      className="fas fa-spin fa-circle-notch"
+    />
   </div>
 </div>
 `;
diff --git a/src/tests/components/__snapshots__/LoadingPage.test.js.snap b/src/tests/components/__snapshots__/LoadingPage.test.js.snap
index 0adf3f9..131bc42 100644
--- a/src/tests/components/__snapshots__/LoadingPage.test.js.snap
+++ b/src/tests/components/__snapshots__/LoadingPage.test.js.snap
@@ -2,10 +2,11 @@
 
 exports[`should render LoadingPage correctly 1`] = `
 <div
-  className="busy-indicator--full-page"
+  className="page-full"
 >
   <BusyIndicator
     size="xl"
+    title="Loading..."
   />
 </div>
 `;