diff --git a/embark-ui/src/components/Fiddle.js b/embark-ui/src/components/Fiddle.js
new file mode 100644
index 000000000..f57fcdcc6
--- /dev/null
+++ b/embark-ui/src/components/Fiddle.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Fiddle = () => (
+  <React.Fragment>
+    <h1>Fiddle</h1>
+    <p>Play around with contract code and deploy against your running node.</p>
+    <div id="fiddle-container"/>
+  </React.Fragment>
+);
+
+export default Fiddle;
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index 62e4385a0..eb6fe5883 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -10,7 +10,8 @@ const navBarItems = [
   {value: "Contracts", to: "/embark/contracts", icon: "box", LinkComponent: withRouter(NavLink)},
   {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", LinkComponent: withRouter(NavLink)},
   {value: "Processes", to: "/embark/processes", icon: "cpu", LinkComponent: withRouter(NavLink)},
-  {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: withRouter(NavLink)}
+  {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: withRouter(NavLink)},
+  {value: "Fiddle", to: "/embark/fiddle", icon: "codepen", LinkComponent: withRouter(NavLink)}
 ];
 
 const Layout = (props) => (
diff --git a/embark-ui/src/containers/FiddleContainer.js b/embark-ui/src/containers/FiddleContainer.js
new file mode 100644
index 000000000..8ab5a6e7f
--- /dev/null
+++ b/embark-ui/src/containers/FiddleContainer.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { fetchAccounts } from '../actions';
+import Fiddle from '../components/Fiddle';
+
+class FiddleContainer extends Component {
+  componentWillMount() {
+    this.props.fetchAccounts();
+  }
+
+  render() {
+    const { accounts } = this.props;
+    if (!accounts.data) {
+      return (
+        <h1>
+          <i>Loading accounts...</i>
+        </h1>
+      )
+    }
+
+    if (accounts.error) {
+      return (
+        <h1>
+          <i>Error API...</i>
+        </h1>
+      )
+    }
+
+    return (
+      <Fiddle />
+    );
+  }
+};
+
+function mapStateToProps(state) {
+  return { accounts: state.accounts }
+}
+
+export default connect(
+  mapStateToProps,
+  {
+    fetchAccounts
+  },
+)(FiddleContainer)
diff --git a/embark-ui/src/routes.js b/embark-ui/src/routes.js
index 8cba97f24..8b3158b51 100644
--- a/embark-ui/src/routes.js
+++ b/embark-ui/src/routes.js
@@ -2,12 +2,12 @@ import React from 'react';
 import {Route, Switch} from 'react-router-dom';
 
 import HomeContainer from './containers/HomeContainer';
-import AccountsContainer from './containers/AccountsContainer';
 import ContractsContainer from './containers/ContractsContainer';
 import NoMatch from './components/NoMatch';
 import ExplorerLayout from './components/ExplorerLayout';
 import ProcessesLayout from './components/ProcessesLayout';
 import ContractLayout from './components/ContractLayout';
+import FiddleContainer from './containers/FiddleContainer';
 
 const routes = (
   <React.Fragment>
@@ -18,6 +18,7 @@ const routes = (
       <Route path="/embark/explorer/accounts" component={AccountsContainer} />
       <Route path="/embark/contracts/:contractName" component={ContractLayout} />
       <Route path="/embark/contracts" component={ContractsContainer} />
+      <Route path="/embark/fiddle" component={FiddleContainer} />
       <Route component={NoMatch} />
     </Switch>
   </React.Fragment>