diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx
index 1b240e876..752978b44 100644
--- a/client/src/App/App.container.jsx
+++ b/client/src/App/App.container.jsx
@@ -86,7 +86,7 @@ class AppContainer extends Component {
     const { client, loaded } = this.state;
 
     if (!loaded) {
-      return <div>Loading...</div>;
+      return <Spin />;
     }
     return (
       <ApolloProvider client={client}>
diff --git a/client/src/components/white-board-left-sider/white-board-left-sider.component.jsx b/client/src/components/white-board-left-sider/white-board-left-sider.component.jsx
new file mode 100644
index 000000000..a46ea91b8
--- /dev/null
+++ b/client/src/components/white-board-left-sider/white-board-left-sider.component.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Menu, Icon } from "antd";
+export default function WhiteBoardLeftSiderComponent({visible}) {
+  return (
+    <Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
+      <Menu.Item key="1">
+        <Icon type="user" />
+        <span className="nav-text">nav 1</span>
+      </Menu.Item>
+      <Menu.Item key="2">
+        <Icon type="video-camera" />
+        <span className="nav-text">nav 2</span>
+      </Menu.Item>
+      <Menu.Item key="3">
+        <Icon type="upload" />
+        <span className="nav-text">nav 3</span>
+      </Menu.Item>
+      <Menu.Item key="4">
+        <Icon type="user" />
+        <span className="nav-text">nav 4</span>
+      </Menu.Item>
+    </Menu>
+  );
+}
diff --git a/client/src/components/white-board-left-sider/white-board-left-sider.container.jsx b/client/src/components/white-board-left-sider/white-board-left-sider.container.jsx
new file mode 100644
index 000000000..dc3c0ec96
--- /dev/null
+++ b/client/src/components/white-board-left-sider/white-board-left-sider.container.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Query, Mutation } from "react-apollo";
+
+import WhiteBoardLeftSiderComponent from './white-board-left-sider.component'
+import Spin from "../loading-spinner/loading-spinner.component";
+import { GET_WHITE_BOARD_LEFT_SIDER_VISIBLE } from "../../graphql/local.queries";
+
+export default function WhiteBoardPageContainer() {
+  return (
+    <Query query={GET_WHITE_BOARD_LEFT_SIDER_VISIBLE}>
+      {({ loading, error, data: { whiteBoardLeftSiderVisible} }) => {
+        if (loading) return <Spin />;
+        if (error) return error.message;
+        return <WhiteBoardLeftSiderComponent visible={whiteBoardLeftSiderVisible}/>;
+      }}
+    </Query>
+  );
+}
diff --git a/client/src/graphql/initial-state.js b/client/src/graphql/initial-state.js
index cfdeeaa64..11b75d57c 100644
--- a/client/src/graphql/initial-state.js
+++ b/client/src/graphql/initial-state.js
@@ -1,9 +1,5 @@
 export default {
-  currentUser: {
-    email: null,
-    displayName: null,
-    token: null
-  },
+  currentUser: { email: null, displayName: null },
   selectedNavItem: "Home",
   recentItems: [],
   whiteBoardLeftSiderVisible: true
diff --git a/client/src/pages/white-board/white-board.page.container.jsx b/client/src/pages/white-board/white-board.page.container.jsx
index 389c601f9..e2c5f4382 100644
--- a/client/src/pages/white-board/white-board.page.container.jsx
+++ b/client/src/pages/white-board/white-board.page.container.jsx
@@ -1,19 +1,7 @@
 import React from "react";
-import { Query, Mutation } from "react-apollo";
 
 import WhiteBoardPage from "./white-board.page";
-import Spin from "../../components/loading-spinner/loading-spinner.component";
-import { GET_WHITE_BOARD_LEFT_SIDER_VISIBLE } from "../../graphql/local.queries";
 
 export default function WhiteBoardPageContainer() {
-  return (
-    <Query query={GET_WHITE_BOARD_LEFT_SIDER_VISIBLE}>
-      {({ loading, error, data }) => {
-        if (loading) return <Spin />;
-        if (error) return error.message;
-        console.log('data from getwhiteboardquery', data)
-        return <WhiteBoardPage />;
-      }}
-    </Query>
-  );
+  return <WhiteBoardPage />;
 }
diff --git a/client/src/pages/white-board/white-board.page.jsx b/client/src/pages/white-board/white-board.page.jsx
index af018c2f0..9f6426bda 100644
--- a/client/src/pages/white-board/white-board.page.jsx
+++ b/client/src/pages/white-board/white-board.page.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Board from "react-trello";
 import WhiteBoardCard from "../../components/white-board-card/white-board-card.component";
+import WhiteBoardLeftSiderContainer from "../../components/white-board-left-sider/white-board-left-sider.container";
 import { Layout, Icon, Menu } from "antd";
 
 export default function WhiteBoardPage({ whiteBoardLeftSiderVisible }) {
@@ -48,25 +49,7 @@ export default function WhiteBoardPage({ whiteBoardLeftSiderVisible }) {
           //console.log(collapsed, type);
         }}
       >
-        <div className="logo" />
-        <Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
-          <Menu.Item key="1">
-            <Icon type="user" />
-            <span className="nav-text">nav 1</span>
-          </Menu.Item>
-          <Menu.Item key="2">
-            <Icon type="video-camera" />
-            <span className="nav-text">nav 2</span>
-          </Menu.Item>
-          <Menu.Item key="3">
-            <Icon type="upload" />
-            <span className="nav-text">nav 3</span>
-          </Menu.Item>
-          <Menu.Item key="4">
-            <Icon type="user" />
-            <span className="nav-text">nav 4</span>
-          </Menu.Item>
-        </Menu>
+        <WhiteBoardLeftSiderContainer />
       </Sider>
 
       <Content>