diff --git a/src/containers/PageRoot.tsx b/src/containers/PageRoot.tsx
index 24dc3cbd..68cb1ddd 100644
--- a/src/containers/PageRoot.tsx
+++ b/src/containers/PageRoot.tsx
@@ -19,6 +19,7 @@ import Sidebar from './Sidebar'
 import Apps from './apps/Apps'
 import ProjectDetailsEdit from './apps/ProjectDetailsEdit'
 import AppDetails from './apps/appDetails/AppDetails'
+import DockerComposeEntry from './apps/compose/DockerComposeEntry'
 import OneClickAppSelector from './apps/oneclick/selector/OneClickAppSelector'
 import OneClickAppConfigPage from './apps/oneclick/variables/OneClickAppConfigPage'
 import ApiComponent from './global/ApiComponent'
@@ -327,6 +328,10 @@ class PageRoot extends ApiComponent<
                                     path="/apps/oneclick"
                                     component={OneClickAppSelector}
                                 />
+                                <Route
+                                    path="/apps/dockercompose"
+                                    component={DockerComposeEntry}
+                                />
                                 <Route path="/apps/" component={Apps} />
                                 <Route
                                     path="/monitoring/"
diff --git a/src/containers/apps/Apps.tsx b/src/containers/apps/Apps.tsx
index facdcd68..28eea5a8 100644
--- a/src/containers/apps/Apps.tsx
+++ b/src/containers/apps/Apps.tsx
@@ -90,7 +90,7 @@ export default class Apps extends ApiComponent<
                                 span: 24,
                             }}
                             lg={{
-                                span: 13,
+                                span: 24,
                             }}
                         >
                             <CreateNewApp
@@ -109,6 +109,11 @@ export default class Apps extends ApiComponent<
                                 onOneClickAppClicked={() => {
                                     self.props.history.push('/apps/oneclick')
                                 }}
+                                onDockerComposeClicked={() => {
+                                    self.props.history.push(
+                                        '/apps/dockercompose'
+                                    )
+                                }}
                             />
                         </Col>
                     </Row>
diff --git a/src/containers/apps/CreateNewApp.tsx b/src/containers/apps/CreateNewApp.tsx
index 9d217fc9..8fe9cc9f 100644
--- a/src/containers/apps/CreateNewApp.tsx
+++ b/src/containers/apps/CreateNewApp.tsx
@@ -1,5 +1,5 @@
 import { PlusCircleOutlined, QuestionCircleFilled } from '@ant-design/icons'
-import { Button, Card, Checkbox, Divider, Input, Row, Tooltip } from 'antd'
+import { Button, Card, Checkbox, Col, Input, Row, Tooltip } from 'antd'
 import { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
 import ProjectSelector from '../../components/ProjectSelector'
@@ -15,6 +15,7 @@ interface MyProps {
         hasPersistency: boolean
     ) => void
     onOneClickAppClicked: () => void
+    onDockerComposeClicked: () => void
 
     projects: ProjectDefinition[]
 }
@@ -57,105 +58,153 @@ class CreateNewApp extends Component<
                         marginBottom: 20,
                     }}
                 >
-                    {self.props.isMobile ? (
-                        <Fragment>
-                            <Input
+                    <Col md={12} sm={24} xs={24}>
+                        <div
+                            style={{
+                                paddingBottom: 20,
+                                width: '100%',
+                                textAlign: 'center',
+                            }}
+                        >
+                            {localize(
+                                'create_new_app.scratch',
+                                'Create from scratch'
+                            )}
+                            <hr style={{ opacity: 0.1 }} />
+                        </div>
+                        {self.createProjectInApp()}
+                        <Row style={{ marginTop: 30, marginBottom: 30 }}>
+                            <Checkbox
+                                onChange={(e: any) =>
+                                    self.setState({
+                                        hasPersistency: !!e.target.checked,
+                                    })
+                                }
+                            >
+                                {localize(
+                                    'create_new_app.has_persistent_data',
+                                    'Has Persistent Data'
+                                )}{' '}
+                            </Checkbox>
+                            &nbsp;&nbsp;
+                            <NewTabLink url="https://caprover.com/docs/persistent-apps.html">
+                                <Tooltip
+                                    title={localize(
+                                        'create_new_app.has_persistent_data_tooltip',
+                                        'Mostly used for databases, see docs for details.'
+                                    )}
+                                >
+                                    <span>
+                                        <QuestionCircleFilled />
+                                    </span>
+                                </Tooltip>
+                            </NewTabLink>
+                        </Row>
+                        {self.props.isMobile ? (
+                            <Fragment>
+                                <Input
+                                    placeholder={localize(
+                                        'create_new_app.placeholder',
+                                        'my-amazing-app'
+                                    )}
+                                    onChange={(e) =>
+                                        self.setState({
+                                            appName: e.target.value,
+                                        })
+                                    }
+                                />
+                                <Button
+                                    style={{ marginTop: 8 }}
+                                    block
+                                    onClick={() => self.onCreateNewAppClicked()}
+                                    type="primary"
+                                >
+                                    {localize(
+                                        'create_new_app.button',
+                                        'Create New App'
+                                    )}
+                                </Button>
+                            </Fragment>
+                        ) : (
+                            <Input.Search
                                 placeholder={localize(
                                     'create_new_app.placeholder',
                                     'my-amazing-app'
                                 )}
+                                enterButton={localize(
+                                    'create_new_app.button',
+                                    'Create New App'
+                                )}
                                 onChange={(e) =>
                                     self.setState({
                                         appName: e.target.value,
                                     })
                                 }
+                                onSearch={(value) =>
+                                    self.onCreateNewAppClicked()
+                                }
                             />
-                            <Button
-                                style={{ marginTop: 8 }}
-                                block
-                                onClick={() => self.onCreateNewAppClicked()}
-                                type="primary"
+                        )}
+                    </Col>
+                    <Col md={4} sm={24}></Col>
+                    <Col md={8} sm={24} xs={24}>
+                        <Row justify={'center'}>
+                            <div
+                                style={{
+                                    paddingBottom: 20,
+                                    width: '100%',
+                                    textAlign: 'center',
+                                }}
                             >
                                 {localize(
-                                    'create_new_app.button',
-                                    'Create New App'
+                                    'create_new_app.or_select_from',
+                                    'Or select from'
                                 )}
-                            </Button>
-                        </Fragment>
-                    ) : (
-                        <Input.Search
-                            placeholder={localize(
-                                'create_new_app.placeholder',
-                                'my-amazing-app'
-                            )}
-                            enterButton={localize(
-                                'create_new_app.button',
-                                'Create New App'
-                            )}
-                            onChange={(e) =>
-                                self.setState({
-                                    appName: e.target.value,
-                                })
-                            }
-                            onSearch={(value) => self.onCreateNewAppClicked()}
-                        />
-                    )}
-                </Row>
-
-                {self.createProjectInApp()}
-
-                <Row
-                    style={{ marginTop: 30 }}
-                    justify={self.props.isMobile ? 'start' : 'end'}
-                >
-                    <Checkbox
-                        onChange={(e: any) =>
-                            self.setState({
-                                hasPersistency: !!e.target.checked,
-                            })
-                        }
-                    >
-                        {localize(
-                            'create_new_app.has_persistent_data',
-                            'Has Persistent Data'
-                        )}{' '}
-                    </Checkbox>
-                    &nbsp;&nbsp;
-                    <NewTabLink url="https://caprover.com/docs/persistent-apps.html">
-                        <Tooltip
-                            title={localize(
-                                'create_new_app.has_persistent_data_tooltip',
-                                'Mostly used for databases, see docs for details.'
-                            )}
-                        >
-                            <span>
-                                <QuestionCircleFilled />
-                            </span>
-                        </Tooltip>
-                    </NewTabLink>
+                                <hr style={{ opacity: 0.1 }} />
+                            </div>
+                            <div
+                                style={{
+                                    marginBottom: 15,
+                                    width: '100%',
+                                    textAlign: 'center',
+                                }}
+                            >
+                                <Button
+                                    block
+                                    type="default"
+                                    onClick={() => {
+                                        self.props.onOneClickAppClicked()
+                                    }}
+                                >
+                                    {localize(
+                                        'create_new_app.one_click_apps',
+                                        'One-Click Apps/Databases'
+                                    )}
+                                </Button>
+                            </div>
+                            <div
+                                style={{
+                                    marginBottom: 15,
+                                    width: '100%',
+                                    textAlign: 'center',
+                                }}
+                            >
+                                <Button
+                                    block
+                                    type="default"
+                                    onClick={() => {
+                                        self.props.onDockerComposeClicked()
+                                    }}
+                                >
+                                    {localize(
+                                        'create_new_app.docker_compose',
+                                        'Docker Compose'
+                                    )}
+                                </Button>
+                            </div>
+                        </Row>
+                    </Col>
                 </Row>
-                <Divider type="horizontal" style={{ width: 100 }} />
-
-                <div style={{ textAlign: 'center' }}>
-                    <p>
-                        {localize(
-                            'create_new_app.or_select_from',
-                            'Or Select From'
-                        )}
-                    </p>
-
-                    <Button
-                        type="dashed"
-                        onClick={() => {
-                            self.props.onOneClickAppClicked()
-                        }}
-                    >
-                        {localize(
-                            'create_new_app.one_click_apps',
-                            'One-Click Apps/Databases'
-                        )}
-                    </Button>
-                </div>
             </Card>
         )
     }
@@ -172,7 +221,6 @@ class CreateNewApp extends Component<
                 {' '}
                 <div
                     style={{
-                        marginTop: 32,
                         marginBottom: 5,
                     }}
                 >
diff --git a/src/containers/apps/compose/DockerComposeEntry.tsx b/src/containers/apps/compose/DockerComposeEntry.tsx
new file mode 100644
index 00000000..5474087b
--- /dev/null
+++ b/src/containers/apps/compose/DockerComposeEntry.tsx
@@ -0,0 +1,48 @@
+import { Card, Col, Row } from 'antd'
+import { RouteComponentProps } from 'react-router'
+import ApiComponent from '../../global/ApiComponent'
+import CodeEdit from '../../global/CodeEdit'
+
+export const TEMPLATE_ONE_CLICK_APP = 'TEMPLATE_ONE_CLICK_APP'
+export const ONE_CLICK_APP_STRINGIFIED_KEY = 'oneClickAppStringifiedData'
+
+export default class OneClickAppSelector extends ApiComponent<
+    RouteComponentProps<any>,
+    {
+        templateOneClickAppData: string
+    }
+> {
+    constructor(props: any) {
+        super(props)
+        this.state = {
+            templateOneClickAppData: '',
+        }
+    }
+
+    componentDidMount() {
+        //  const self = this
+    }
+
+    render() {
+        const self = this
+
+        return (
+            <div>
+                <Row justify="center">
+                    <Col xs={{ span: 23 }} lg={{ span: 16 }}>
+                        <Card title="Docker Compose">
+                            <div>
+                                Testing Docker Compose
+                                <CodeEdit
+                                    onChange={(newValue) => {
+                                        // self.setState({ templateOneClickAppData: newValue })
+                                    }}
+                                />
+                            </div>
+                        </Card>
+                    </Col>
+                </Row>
+            </div>
+        )
+    }
+}