diff --git a/embark-ui/src/components/ContractLayout.js b/embark-ui/src/components/ContractLayout.js
new file mode 100644
index 000000000..2cad1ded3
--- /dev/null
+++ b/embark-ui/src/components/ContractLayout.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import {NavLink, Route, Switch, withRouter} from 'react-router-dom';
+import {
+  Page,
+  Grid,
+  List
+} from "tabler-react";
+
+import ContractContainer from '../containers/ContractContainer';
+
+const ContractLayout = () => (
+  <Grid.Row>
+    <Grid.Col md={3}>
+      <Page.Title className="my-5">Contract</Page.Title>
+      <div>
+        <List.Group transparent={true}>
+          <List.GroupItem
+            className="d-flex align-items-center"
+            to="/embark/explorer/accounts"
+            icon="users"
+            RootComponent={withRouter(NavLink)}
+          >
+            Deployment / Utils
+          </List.GroupItem>
+          <List.GroupItem
+            className="d-flex align-items-center"
+            to="/embark/explorer/blocks"
+            icon="book-open"
+            RootComponent={withRouter(NavLink)}
+          >
+            Functions
+          </List.GroupItem>
+          <List.GroupItem
+            className="d-flex align-items-center"
+            to="/embark/explorer/transactions"
+            icon="activity"
+            RootComponent={withRouter(NavLink)}
+          >
+            Source Code
+          </List.GroupItem>
+          <List.GroupItem
+            className="d-flex align-items-center"
+            to={withRouter(ContractContainer)}
+            icon="server"
+            RootComponent={withRouter(NavLink)}
+          >
+            Profile
+          </List.GroupItem>
+        </List.Group>
+      </div>
+    </Grid.Col>
+    <Grid.Col md={9}>
+      <Switch>
+        <ContractContainer />
+      </Switch>
+    </Grid.Col>
+  </Grid.Row>
+);
+        // <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
+        // <Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
+        // <Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />
+
+export default withRouter(ContractLayout);
diff --git a/embark-ui/src/reducers/index.js b/embark-ui/src/reducers/index.js
index 5ea2d06e1..0c6174e93 100644
--- a/embark-ui/src/reducers/index.js
+++ b/embark-ui/src/reducers/index.js
@@ -10,6 +10,8 @@ import contractReducer from './contractReducer';
 const rootReducer = combineReducers({
   accounts: accountsReducer,
   processes: processesReducer,
+  contracts: contractsReducer,
+  contract: contractReducer,
   blocks: blocksReducer,
   transactions: transactionsReducer,
   commands: commandsReducer,
diff --git a/embark-ui/src/routes.js b/embark-ui/src/routes.js
index f5127e098..911a62d8f 100644
--- a/embark-ui/src/routes.js
+++ b/embark-ui/src/routes.js
@@ -8,6 +8,7 @@ import ContractContainer from './containers/ContractContainer';
 import NoMatch from './components/NoMatch';
 import ExplorerLayout from './components/ExplorerLayout';
 import ProcessesLayout from './components/ProcessesLayout';
+import ContractLayout from './components/ContractLayout';
 
 const routes = (
   <React.Fragment>
@@ -16,7 +17,8 @@ const routes = (
       <Route path="/embark/explorer/" component={ExplorerLayout} />
       <Route path="/embark/processes/" component={ProcessesLayout} />
       <Route path="/embark/explorer/accounts" component={AccountsContainer} />
-      <Route path="/embark/contracts/:contractName" component={ContractContainer} />
+      <Route path="/embark/processes" component={ProcessesContainer} />
+      <Route path="/embark/contracts/:contractName" component={ContractLayout} />
       <Route path="/embark/contracts" component={ContractsContainer} />
       <Route component={NoMatch} />
     </Switch>