diff --git a/src/App.module.scss b/src/App.module.scss
index 1fcb272..aac12ea 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -12,3 +12,20 @@
 .main {
     flex: 1;
 }
+
+.loader {
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 25vh;
+
+    > div {
+        width: 100%;
+    }
+}
+
+.loaderMessage {
+    color: $brand-grey-light;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 8f87468..c15533b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -127,7 +127,12 @@ class App extends Component<{}, AppState> {
 
                             <main className={styles.main}>
                                 {this.state.isLoading ? (
-                                    <Spinner />
+                                    <div className={styles.loader}>
+                                        <Spinner />
+                                        <div className={styles.loaderMessage}>
+                                            Connecting to Ocean...
+                                        </div>
+                                    </div>
                                 ) : (
                                     <Routes />
                                 )}