diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx
index d8bb3e33..b603e758 100644
--- a/client/modules/IDE/pages/IDEViewMobile.jsx
+++ b/client/modules/IDE/pages/IDEViewMobile.jsx
@@ -1,5 +1,33 @@
import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
-export default () => (
-
Test
-); //eslint-disable-line
+const Header = styled.div`
+ width: 100%;
+ color: orange;
+ background: red;
+`;
+
+const Footer = styled.div`
+ width: 100%;
+ color: orange;
+ background: blue;
+ position: absolute;
+ bottom: 0;
+`;
+
+const Screen = ({ children }) => (
+
+ {children}
+
+);
+Screen.propTypes = {
+ children: PropTypes.element.isRequired
+};
+
+export default () => (
+
+
+
+
+);
diff --git a/client/routes.jsx b/client/routes.jsx
index 061e537c..02cdaa07 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -1,8 +1,8 @@
import { Route, IndexRoute } from 'react-router';
import React from 'react';
import App from './modules/App/App';
-import IDEView from './modules/IDE/pages/IDEView';
-import IDEViewMobile from './modules/IDE/pages/IDEViewMobile';
+import IDEViewScreen from './modules/IDE/pages/IDEView';
+import IDEViewMobileScreen from './modules/IDE/pages/IDEViewMobile';
import FullView from './modules/IDE/pages/FullView';
import LoginView from './modules/User/pages/LoginView';
import SignupView from './modules/User/pages/SignupView';
@@ -26,10 +26,11 @@ const onRouteChange = (store) => {
};
const isMobile = () => window.innerWidth <= 760;
+const IDEView = isMobile() ? IDEViewMobileScreen : IDEViewScreen;
const routes = store => (
{ onRouteChange(store); }}>
-
+