diff --git a/embark-ui/src/components/ContractLayout.js b/embark-ui/src/components/ContractLayout.js
index 51060035..079d23cf 100644
--- a/embark-ui/src/components/ContractLayout.js
+++ b/embark-ui/src/components/ContractLayout.js
@@ -1,94 +1,75 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {NavLink, Route, Switch, withRouter} from 'react-router-dom';
-import {
-  Page,
-  Grid,
-  List
-} from "tabler-react";
+import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
+import classnames from 'classnames';
 
-import ContractContainer from '../containers/ContractContainer';
+import ContractOverview from '../components/ContractOverview';
 import ContractLoggerContainer from '../containers/ContractLoggerContainer';
 import ContractFunctionsContainer from '../containers/ContractFunctionsContainer';
-import ContractDeploymentContainer from '../containers/ContractDeploymentContainer';
-import ContractProfileContainer from '../containers/ContractProfileContainer';
-import ContractSourceContainer from '../containers/ContractSourceContainer';
 
-const ContractLayout = ({match, contractIsFiddle = false}) => (
-  <Grid.Row>
-    <Grid.Col md={3}>
-      <Page.Title className="my-5">&nbsp;</Page.Title>
-      <div>
-        <List.Group transparent={true}>
-          <List.GroupItem
-            className="d-flex align-items-center"
-            to={`/embark/contracts/${match.params.contractName}/overview`}
-            icon="corner-left-up"
-            RootComponent={NavLink}
-          >
-            Overview
-          </List.GroupItem>
-          {!contractIsFiddle && 
-            <List.GroupItem
-              className="d-flex align-items-center"
-              to={`/embark/contracts/${match.params.contractName}/deployment`}
-              icon="users"
-              RootComponent={NavLink}
+class ContractLayout extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeTab: '1'
+    };
+  }
+
+  toggle(tab) {
+    if (this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab
+      });
+    }
+  }
+  render() {
+    return (
+      <React.Fragment>
+        <Nav tabs>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: this.state.activeTab === '1' })}
+              onClick={() => { this.toggle('1'); }}
             >
-              Deployment / Utils
-            </List.GroupItem>
-          }
-          <List.GroupItem
-            className="d-flex align-items-center"
-            to={`/embark/contracts/${match.params.contractName}/functions`}
-            icon="book-open"
-            RootComponent={NavLink}
-          >
-            Functions
-          </List.GroupItem>
-          <List.GroupItem
-            className="d-flex align-items-center"
-            to={`/embark/contracts/${match.params.contractName}/source`}
-            icon="activity"
-            RootComponent={NavLink}
-          >
-            Source Code
-          </List.GroupItem>
-          <List.GroupItem
-            className="d-flex align-items-center"
-            to={`/embark/contracts/${match.params.contractName}/profiler`}
-            icon="server"
-            RootComponent={NavLink}
-          >
-            Profile
-          </List.GroupItem>
-          <List.GroupItem
-            className="d-flex align-items-center"
-            to={`/embark/contracts/${match.params.contractName}/logger`}
-            icon="chevrons-right"
-            RootComponent={NavLink}
-          >
-            Logger
-          </List.GroupItem>
-        </List.Group>
-      </div>
-    </Grid.Col>
-    <Grid.Col md={9}>
-      <Switch>
-        <Route exact path="/embark/contracts/:contractName/overview" component={ContractContainer} />
-        <Route exact path="/embark/contracts/:contractName/deployment" component={ContractDeploymentContainer} />
-        <Route exact path="/embark/contracts/:contractName/functions" component={ContractFunctionsContainer} />
-        <Route exact path="/embark/contracts/:contractName/source" component={ContractSourceContainer} />
-        <Route exact path="/embark/contracts/:contractName/profiler" component={ContractProfileContainer} />
-        <Route exact path="/embark/contracts/:contractName/logger" component={ContractLoggerContainer} />
-      </Switch>
-    </Grid.Col>
-  </Grid.Row>
-);
+              Overview
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: this.state.activeTab === '2' })}
+              onClick={() => { this.toggle('2'); }}
+            >
+              Functions
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: this.state.activeTab === '3' })}
+              onClick={() => { this.toggle('3'); }}
+            >
+              Logger
+            </NavLink>
+          </NavItem>
+        </Nav>
+        <TabContent activeTab={this.state.activeTab}>
+          <TabPane tabId="1">
+            <ContractOverview contract={this.props.contract} />
+          </TabPane>
+          <TabPane tabId="2">
+            <ContractFunctionsContainer contract={this.props.contract} />
+          </TabPane>
+          <TabPane tabId="3">
+            <ContractLoggerContainer contract={this.props.contract} />
+          </TabPane>
+        </TabContent>
+      </React.Fragment>
+    )
+  }
+}
 
 ContractLayout.propTypes = {
-  match: PropTypes.object,
-  contractIsFiddle: PropTypes.bool
+  contract: PropTypes.object
 };
 
-export default withRouter(ContractLayout);
+export default ContractLayout;
diff --git a/embark-ui/src/components/Contract.js b/embark-ui/src/components/ContractOverview.js
similarity index 87%
rename from embark-ui/src/components/Contract.js
rename to embark-ui/src/components/ContractOverview.js
index 0e0c6988..75bff768 100644
--- a/embark-ui/src/components/Contract.js
+++ b/embark-ui/src/components/ContractOverview.js
@@ -8,12 +8,11 @@ import {
 } from "tabler-react";
 import JSONTree from 'react-json-tree';
 import {formatContractForDisplay} from '../utils/presentation';
-import {withRouter} from 'react-router-dom';
 
 const Contract = ({contract, match}) => {
   const contractDisplay = formatContractForDisplay(contract);
   return (
-    <Page.Content title={match.params.contractName + " Overview"}>
+    <Page.Content title={contract.className + " Overview"}>
       <Grid.Row>
         <Grid.Col>
           <Card>
@@ -30,7 +29,7 @@ const Contract = ({contract, match}) => {
               </Table.Header>
               <Table.Body>
                 <Table.Row className={contractDisplay.stateColor}>
-                  <Table.Col>{(contract.name || contract.className)}</Table.Col>
+                  <Table.Col>{contract.className}</Table.Col>
                   <Table.Col>{contractDisplay.address}</Table.Col>
                   <Table.Col>{contractDisplay.state}</Table.Col>
                 </Table.Row>
@@ -61,8 +60,7 @@ const Contract = ({contract, match}) => {
 
 Contract.propTypes = {
   contract: PropTypes.object,
-  match: PropTypes.object
 };
 
-export default withRouter(Contract);
+export default Contract;
 
diff --git a/embark-ui/src/components/FileContractsLayout.js b/embark-ui/src/components/FileContractsLayout.js
new file mode 100644
index 00000000..e69de29b
diff --git a/embark-ui/src/containers/ContractFunctionsContainer.js b/embark-ui/src/containers/ContractFunctionsContainer.js
index 025e9ace..9f182d91 100644
--- a/embark-ui/src/containers/ContractFunctionsContainer.js
+++ b/embark-ui/src/containers/ContractFunctionsContainer.js
@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import {withRouter} from 'react-router-dom';
 
 import {contractProfile as contractProfileAction, contractFunction as contractFunctionAction} from '../actions';
 import ContractFunctions from '../components/ContractFunctions';
@@ -11,7 +10,7 @@ import {getContractProfile, getContractFunctions} from "../reducers/selectors";
 
 class ContractFunctionsContainer extends Component {
   componentDidMount() {
-    this.props.fetchContractProfile(this.props.match.params.contractName);
+    this.props.fetchContractProfile(this.props.contract.className);
   }
 
   render() {
@@ -33,15 +32,15 @@ class ContractFunctionsContainer extends Component {
 
 function mapStateToProps(state, props) {
   return {
-    contractProfile: getContractProfile(state, props.match.params.contractName),
-    contractFunctions: getContractFunctions(state, props.match.params.contractName),
+    contractProfile: getContractProfile(state, props.contract.className),
+    contractFunctions: getContractFunctions(state, props.contract.className),
     error: state.errorMessage,
     loading: state.loading
   };
 }
 
 ContractFunctionsContainer.propTypes = {
-  match: PropTypes.object,
+  contract: PropTypes.object,
   contractProfile: PropTypes.object,
   contractFunctions: PropTypes.arrayOf(PropTypes.object),
   postContractFunction: PropTypes.func,
@@ -49,10 +48,10 @@ ContractFunctionsContainer.propTypes = {
   error: PropTypes.string
 };
 
-export default withRouter(connect(
+export default connect(
   mapStateToProps,
   {
     fetchContractProfile: contractProfileAction.request,
     postContractFunction: contractFunctionAction.post
   }
-)(ContractFunctionsContainer));
+)(ContractFunctionsContainer);
diff --git a/embark-ui/src/containers/ContractLayoutContainer.js b/embark-ui/src/containers/ContractLayoutContainer.js
index 768b792d..acae68b0 100644
--- a/embark-ui/src/containers/ContractLayoutContainer.js
+++ b/embark-ui/src/containers/ContractLayoutContainer.js
@@ -14,7 +14,7 @@ class ContractLayoutContainer extends Component {
 
   render() {
     if (this.props.contract){
-      return <ContractLayout contractIsFiddle={this.props.contract.isFiddle} />;
+      return <ContractLayout contract={this.props.contract}/>;
     } else {
       return <React.Fragment />;
     }
diff --git a/embark-ui/src/containers/ContractLoggerContainer.js b/embark-ui/src/containers/ContractLoggerContainer.js
index c99cf9f1..7f444eda 100644
--- a/embark-ui/src/containers/ContractLoggerContainer.js
+++ b/embark-ui/src/containers/ContractLoggerContainer.js
@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import {withRouter} from 'react-router-dom';
 import {contractLogs as contractLogsAction, listenToContractLogs} from '../actions';
 
 import ContractLogger from '../components/ContractLogger';
@@ -12,14 +11,14 @@ class ContractLoggerContainer extends Component {
   componentDidMount() {
     if (this.props.contractLogs.length === 0) {
       this.props.listenToContractLogs();
-      this.props.fetchContractLogs(this.props.match.params.contractName);
+      this.props.fetchContractLogs(this.props.contract.className);
     }
   }
 
   render() {
     return (
       <DataWrapper shouldRender={this.props.contractLogs !== undefined } {...this.props} render={() => (
-        <ContractLogger contractLogs={this.props.contractLogs} contractName={this.props.match.params.contractName}/>
+        <ContractLogger contractLogs={this.props.contractLogs} contractName={this.props.contract.className}/>
       )} />
     );
   }
@@ -27,7 +26,7 @@ class ContractLoggerContainer extends Component {
 
 function mapStateToProps(state, props) {
   return {
-    contractLogs: getContractLogsByContract(state, props.match.params.contractName)
+    contractLogs: getContractLogsByContract(state, props.contract.className)
   };
 }
 
@@ -38,10 +37,10 @@ ContractLoggerContainer.propTypes = {
   match: PropTypes.object
 };
 
-export default withRouter(connect(
+export default connect(
   mapStateToProps,
   {
     fetchContractLogs: contractLogsAction.request,
     listenToContractLogs: listenToContractLogs
   }
-)(ContractLoggerContainer));
+)(ContractLoggerContainer);
diff --git a/embark-ui/src/containers/FileContractsContainer.js b/embark-ui/src/containers/FileContractsContainer.js
index b40ba8fe..5591aa5e 100644
--- a/embark-ui/src/containers/FileContractsContainer.js
+++ b/embark-ui/src/containers/FileContractsContainer.js
@@ -2,13 +2,13 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
-import {contract as contractAction} from '../actions';
+import {contracts as contractsAction} from '../actions';
 import ContractLayout from '../components/ContractLayout';
 import {getContractsByPath} from "../reducers/selectors";
 
 class FileContractsContainer extends Component {
   componentDidMount() {
-    this.props.fetchContract(this.props.currentFile);
+    this.props.fetchContracts();
   }
 
   render() {
@@ -28,7 +28,7 @@ function mapStateToProps(state, props) {
 
 FileContractsContainer.propTypes = {
   contracts: PropTypes.arrayOf(PropTypes.object),
-  fetchFileContracts: PropTypes.func,
+  fetchContractsByPath: PropTypes.func,
   error: PropTypes.string,
   loading: PropTypes.bool
 };
@@ -36,6 +36,6 @@ FileContractsContainer.propTypes = {
 export default connect(
   mapStateToProps,
   {
-    fetchContract: contractAction.request
+    fetchContracts: contractsAction.request
   }
 )(FileContractsContainer);
diff --git a/embark-ui/src/containers/TextEditorAsideContainer.js b/embark-ui/src/containers/TextEditorAsideContainer.js
index f00bc752..c50177fd 100644
--- a/embark-ui/src/containers/TextEditorAsideContainer.js
+++ b/embark-ui/src/containers/TextEditorAsideContainer.js
@@ -1,5 +1,3 @@
-/* eslint multiline-ternary: "off" */
-/* eslint operator-linebreak: "off" */
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
diff --git a/embark-ui/src/containers/TextEditorContainer.js b/embark-ui/src/containers/TextEditorContainer.js
index 0397d4b7..feca915a 100644
--- a/embark-ui/src/containers/TextEditorContainer.js
+++ b/embark-ui/src/containers/TextEditorContainer.js
@@ -1,5 +1,3 @@
-/* eslint multiline-ternary: "off" */
-/* eslint operator-linebreak: "off" */
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
diff --git a/embark-ui/src/services/api.js b/embark-ui/src/services/api.js
index d96fcf4d..cdcd3301 100644
--- a/embark-ui/src/services/api.js
+++ b/embark-ui/src/services/api.js
@@ -68,7 +68,7 @@ export function fetchContracts() {
 }
 
 export function fetchContract(payload) {
-  return get('/contract', ...arguments);
+  return get(`/contract/${payload.contractName}`, ...arguments);
 }
 
 export function postContractFunction(payload) {
diff --git a/lib/modules/contracts_manager/index.js b/lib/modules/contracts_manager/index.js
index 8660431f..c69d6da8 100644
--- a/lib/modules/contracts_manager/index.js
+++ b/lib/modules/contracts_manager/index.js
@@ -84,16 +84,9 @@ class ContractsManager {
 
     embark.registerAPICall(
       'get',
-      '/embark-api/contract',
+      '/embark-api/contract/:contractName',
       (req, res) => {
-        const result = [];
-        self.events.request('contracts:all', null, (contracts) => {
-          const contractByFilename = contracts.filter((contract) => contract.filename === req.query.filename);
-          contractByFilename.forEach((contract) => {
-            self.events.request('contracts:contract', contract.className, (contract) => result.push(contract));
-          });
-        });
-        res.send(result);
+        self.events.request('contracts:contract', req.params.contractName, res.send.bind(res));
       }
     );
 
@@ -168,7 +161,13 @@ class ContractsManager {
       'get',
       '/embark-api/contracts',
       (req, res) => {
-        self.events.request('contracts:all', null, res.send.bind(res));
+        const result = [];
+        self.events.request('contracts:all', null, (contracts) => {
+          contracts.forEach((contract) => {
+            self.events.request('contracts:contract', contract.className, (contract) => result.push(contract));
+          });
+        });
+        res.send(result);
       }
     );