diff --git a/ui/src/views/Repo.tsx b/ui/src/views/Repo.tsx
index 72d42ba9..c46c3224 100644
--- a/ui/src/views/Repo.tsx
+++ b/ui/src/views/Repo.tsx
@@ -13,7 +13,7 @@ import RepoHome from './RepoHome'
 import RepoLock from "./RepoLock";
 import RepoDeploy from './RepoDeploy'
 import RepoRollabck from './RepoRollback'
-import RepoSettings from "./RepoSettings"
+import RepoSettings from "./repoSettings"
 
 interface Params {
     namespace: string
diff --git a/ui/src/views/RepoSettings.tsx b/ui/src/views/RepoSettings.tsx
deleted file mode 100644
index 366d3930..00000000
--- a/ui/src/views/RepoSettings.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useEffect  } from "react";
-import { shallowEqual } from "react-redux";
-import { useParams } from "react-router-dom";
-import { PageHeader } from "antd"
-
-import { useAppSelector, useAppDispatch } from "../redux/hooks"
-import { init, save, deactivate, repoSettingsSlice as slice } from "../redux/repoSettings"
-import { RequestStatus } from "../models";
-
-import RepoSettingsForm from "../components/RepoSettingsForm"
-import Spin from "../components/Spin";
-
-interface Params {
-    namespace: string
-    name: string
-}
-
-export default function RepoSettings(): JSX.Element {
-    const { namespace, name } = useParams<Params>()
-    const { repo, saving } = useAppSelector(state => state.repoSettings, shallowEqual)
-    const dispatch = useAppDispatch()
-
-    useEffect(() => {
-        const f = async () => {
-            await dispatch(init({namespace, name}))
-        }
-        f()
-        // eslint-disable-next-line
-    }, [dispatch])
-
-    const onClickSave = (payload: {configPath: string}) => {
-        dispatch(slice.actions.setConfigPath(payload.configPath))
-        dispatch(save())
-    }
-
-    const onClickDeactivate = () => {
-        dispatch(deactivate())
-    }
-
-    if (!repo) {
-        return <div><Spin /></div>
-    }
-
-    return (
-        <div>
-            <div>
-                <PageHeader
-                    title="Settings"/>
-            </div>
-            <div>
-                <RepoSettingsForm 
-                    repo={repo}
-                    saving={saving === RequestStatus.Pending}
-                    onClickSave={onClickSave}
-                    onClickDeactivate={onClickDeactivate}
-                />
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/ui/src/views/repoSettings/SettingsForm.tsx b/ui/src/views/repoSettings/SettingsForm.tsx
new file mode 100644
index 00000000..2b9aae29
--- /dev/null
+++ b/ui/src/views/repoSettings/SettingsForm.tsx
@@ -0,0 +1,83 @@
+import { shallowEqual } from "react-redux";
+import { Form, Input, Button, Space, Typography } from "antd"
+
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { save, deactivate, repoSettingsSlice as slice } from "../../redux/repoSettings"
+import { RequestStatus } from "../../models"
+
+export default function RepoSettingForm(): JSX.Element {
+    const { repo, saving } = useAppSelector(state => state.repoSettings, shallowEqual)
+    const dispatch = useAppDispatch()
+
+    const layout = {
+      labelCol: { span: 5},
+      wrapperCol: { span: 12 },
+    };
+
+    const submitLayout = {
+      wrapperCol: { offset: 5, span: 12 },
+    };
+
+    const onClickFinish = (values: any) => {
+        dispatch(slice.actions.setConfigPath(values.config))
+        dispatch(save())
+    }
+
+    const onClickDeactivate = () => {
+        dispatch(deactivate())
+    }
+
+    const initialValues = {
+        "config": repo?.configPath
+    }
+
+    return (
+        <Form
+            name="setting"
+            initialValues={initialValues}
+            onFinish={onClickFinish}
+        >
+            <Form.Item
+                label="Config"
+                {...layout}
+            >
+                <Space>
+                    <Form.Item
+                        name="config"
+                        rules={[{required: true}]}
+                        noStyle
+                    >
+                        <Input />
+                    </Form.Item>
+                    <Typography.Link target="_blank" href={`/link/${repo?.namespace}/${repo?.name}/config`}>
+                        Link
+                    </Typography.Link>
+                </Space>
+            </Form.Item>
+            <Form.Item {...submitLayout}>
+                <Form.Item noStyle>
+                    <Button 
+                        loading={saving === RequestStatus.Pending}
+                        type="primary" 
+                        htmlType="submit"
+                    >
+                        Submit
+                    </Button>
+                </Form.Item>
+            </Form.Item>
+            <Form.Item {...submitLayout}>
+                <Form.Item noStyle>
+                    <Space>
+                        <Button
+                            danger
+                            type="primary"
+                            onClick={onClickDeactivate}
+                        >
+                            DEACTIVATE
+                        </Button>
+                    </Space>
+                </Form.Item>
+            </Form.Item>
+        </Form>
+    )
+}
\ No newline at end of file
diff --git a/ui/src/views/repoSettings/index.tsx b/ui/src/views/repoSettings/index.tsx
new file mode 100644
index 00000000..00f2f96d
--- /dev/null
+++ b/ui/src/views/repoSettings/index.tsx
@@ -0,0 +1,41 @@
+import { useEffect  } from "react";
+import { useParams } from "react-router-dom";
+import { shallowEqual } from "react-redux";
+import { PageHeader } from "antd"
+
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { init } from "../../redux/repoSettings"
+
+import SettingsForm from "./SettingsForm"
+
+interface Params {
+    namespace: string
+    name: string
+}
+
+export default function RepoSettings(): JSX.Element {
+    const { namespace, name } = useParams<Params>()
+    const { repo } = useAppSelector(state => state.repoSettings, shallowEqual)
+    const dispatch = useAppDispatch()
+
+    useEffect(() => {
+        const f = async () => {
+            await dispatch(init({namespace, name}))
+        }
+        f()
+        // eslint-disable-next-line
+    }, [dispatch])
+
+    return (
+        <div>
+            <div>
+                <PageHeader title="Settings"/>
+            </div>
+            <div>
+                {(repo)?
+                    <SettingsForm />
+                    :<></>}
+            </div>
+        </div>
+    )
+}
\ No newline at end of file