diff --git a/embark-ui/src/containers/FileContractsContainer.js b/embark-ui/src/containers/FileContractsContainer.js
new file mode 100644
index 000000000..631bab221
--- /dev/null
+++ b/embark-ui/src/containers/FileContractsContainer.js
@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import {withRouter} from 'react-router-dom';
+
+import {contract as contractAction} from '../actions';
+import ContractLayout from '../components/ContractLayout';
+import {getContractsByFilename} from "../reducers/selectors";
+
+class FileContractsContainer extends Component {
+  componentDidMount() {
+    this.props.fetchContract(this.props.currentFile);
+  }
+
+  render() {
+    if (this.props.contract){
+      return <ContractLayout contractIsFiddle={this.props.contract.isFiddle} />;
+    } else {
+      return <React.Fragment />;
+    }
+  }
+}
+
+function mapStateToProps(state, props) {
+  return {
+    contracts: getContractsByFilename(state, props.currentFile.name),
+    error: state.errorMessage,
+    loading: state.loading
+  };
+}
+
+FileContractsContainer.propTypes = {
+  contracts: PropTypes.arrayOf(PropTypes.object),
+  fetchFileContracts: PropTypes.func,
+  error: PropTypes.string,
+  loading: PropTypes.bool
+};
+
+export default connect(
+  mapStateToProps,
+  {
+    fetchContract: contractAction.request
+  }
+)(FileContractsContainer);
diff --git a/embark-ui/src/containers/TextEditorAsideContainer.js b/embark-ui/src/containers/TextEditorAsideContainer.js
index 7a6c067fc..f00bc7526 100644
--- a/embark-ui/src/containers/TextEditorAsideContainer.js
+++ b/embark-ui/src/containers/TextEditorAsideContainer.js
@@ -8,6 +8,7 @@ import {
 } from '../actions';
 import {getCurrentFile} from '../reducers/selectors';
 import Preview from '../components/Preview';
+import FileContractsContainer from './FileContractsContainer';
 
 class TextEditorAsideContainer extends Component {
   constructor(props) {
@@ -30,7 +31,7 @@ class TextEditorAsideContainer extends Component {
   }
 
   render() {
-    return this.isContract() ? <React.Fragment>hello</React.Fragment> : <Preview />
+    return this.isContract() ? <FileContractsContainer currentFile={this.state.currentFile} /> : <Preview />
   }
 }
 
@@ -48,7 +49,8 @@ TextEditorAsideContainer.propTypes = {
   currentFile: PropTypes.object,
   fetchCurrentFile: PropTypes.func,
   loading: PropTypes.bool,
-  error: PropTypes.string
+  error: PropTypes.string,
+  defaultFile: PropTypes.object
 };
 
 export default connect(
diff --git a/embark-ui/src/containers/TextEditorContainer.js b/embark-ui/src/containers/TextEditorContainer.js
index 99fa8c841..0397d4b7e 100644
--- a/embark-ui/src/containers/TextEditorContainer.js
+++ b/embark-ui/src/containers/TextEditorContainer.js
@@ -123,6 +123,7 @@ function mapStateToProps(state, props) {
 }
 
 TextEditorContainer.propTypes = {
+  defaultFile: PropTypes.object,
   currentFile: PropTypes.object,
   contractCompile: PropTypes.object,
   saveCurrentFile: PropTypes.func,
diff --git a/embark-ui/src/services/api.js b/embark-ui/src/services/api.js
index cdcd3301e..d96fcf4d7 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/${payload.contractName}`, ...arguments);
+  return get('/contract', ...arguments);
 }
 
 export function postContractFunction(payload) {
diff --git a/lib/modules/contracts_manager/index.js b/lib/modules/contracts_manager/index.js
index ea8a2682a..8660431f3 100644
--- a/lib/modules/contracts_manager/index.js
+++ b/lib/modules/contracts_manager/index.js
@@ -84,9 +84,16 @@ class ContractsManager {
 
     embark.registerAPICall(
       'get',
-      '/embark-api/contract/:contractName',
+      '/embark-api/contract',
       (req, res) => {
-        self.events.request('contracts:contract', req.params.contractName, res.send.bind(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);
       }
     );