diff --git a/app/components/editor/editors/CustomFunctionEditor.tsx b/app/components/editor/editors/CustomFunctionEditor.tsx
deleted file mode 100644
index 7a86758..0000000
--- a/app/components/editor/editors/CustomFunctionEditor.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import CodeMirror from '@uiw/react-codemirror';
-import { monokai } from '@uiw/codemirror-theme-monokai';
-import { basicSetup } from 'codemirror';
-import { indentUnit, StreamLanguage } from '@codemirror/language';
-import { go } from '@codemirror/legacy-modes/mode/go';
-import { EditorView } from '@codemirror/view';
-import React, { CSSProperties } from 'react';
-export interface EditorProps {
-  text: string;
-  onChange: (text: string) => void;
-  style?: CSSProperties;
-}
-export const CustomFunctionEditor = (props: EditorProps) => {
-  return (
-    <div style={{ height: '100%', ...props.style }}>
-      <CodeMirror
-        onChange={(value) => {
-          props.onChange(value);
-        }}
-        theme={monokai}
-        basicSetup={{
-          lineNumbers: true,
-          highlightActiveLine: true,
-          bracketMatching: true,
-          indentOnInput: true,
-        }}
-        extensions={[
-          basicSetup,
-          StreamLanguage.define(go),
-          indentUnit.of('    '),
-          EditorView.lineWrapping,
-        ]}
-        className={'function'}
-        value={props.text}
-      />
-    </div>
-  );
-};
diff --git a/app/components/editor/editors/ModalEditor.tsx b/app/components/editor/editors/ModalEditor.tsx
deleted file mode 100644
index 27829e1..0000000
--- a/app/components/editor/editors/ModalEditor.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { EditorProps } from '@/app/components/editor/editors/CustomFunctionEditor';
-import CodeMirror from '@uiw/react-codemirror';
-import { monokai } from '@uiw/codemirror-theme-monokai';
-import { basicSetup } from 'codemirror';
-import { CasbinConfSupport } from '@/app/components/editor/casbin-mode/casbin-conf';
-import { indentUnit } from '@codemirror/language';
-import { EditorView } from '@codemirror/view';
-import React from 'react';
-
-export const ModelEditor = (props: EditorProps) => {
-  return (
-    <div style={{ height: '100%', ...props.style }}>
-      <CodeMirror
-        theme={monokai}
-        onChange={(value) => {
-          props.onChange(value);
-        }}
-        basicSetup={{
-          lineNumbers: true,
-          highlightActiveLine: true,
-          bracketMatching: true,
-          indentOnInput: true,
-        }}
-        extensions={[
-          basicSetup,
-          CasbinConfSupport(),
-          indentUnit.of('    '),
-          EditorView.lineWrapping,
-        ]}
-        className={'function'}
-        value={props.text}
-      />
-    </div>
-  );
-};
diff --git a/app/components/editor/editors/PolicyEditor.tsx b/app/components/editor/editors/PolicyEditor.tsx
deleted file mode 100644
index 721cbe1..0000000
--- a/app/components/editor/editors/PolicyEditor.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { EditorProps } from '@/app/components/editor/editors/CustomFunctionEditor';
-import CodeMirror from '@uiw/react-codemirror';
-import { basicSetup } from 'codemirror';
-import { CasbinPolicySupport } from '@/app/components/editor/casbin-mode/casbin-csv';
-import { indentUnit } from '@codemirror/language';
-import { EditorView } from '@codemirror/view';
-import { monokai } from '@uiw/codemirror-theme-monokai';
-import React from 'react';
-
-export const PolicyEditor = (props: EditorProps) => {
-  return (
-    <div style={{ height: '100%', ...props.style }}>
-      <CodeMirror
-        extensions={[
-          basicSetup,
-          CasbinPolicySupport(),
-          indentUnit.of('    '),
-          EditorView.lineWrapping,
-        ]}
-        basicSetup={{
-          lineNumbers: true,
-          highlightActiveLine: true,
-          bracketMatching: true,
-          indentOnInput: true,
-        }}
-        theme={monokai}
-        onChange={(value) => {
-          props.onChange(value);
-        }}
-        className={'function'}
-        value={props.text}
-      />
-    </div>
-  );
-};
diff --git a/app/components/editor/editors/RequestEditor.tsx b/app/components/editor/editors/RequestEditor.tsx
deleted file mode 100644
index 7d49362..0000000
--- a/app/components/editor/editors/RequestEditor.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { EditorProps } from '@/app/components/editor/editors/CustomFunctionEditor';
-import CodeMirror from '@uiw/react-codemirror';
-import { monokai } from '@uiw/codemirror-theme-monokai';
-import { basicSetup } from 'codemirror';
-import { CasbinPolicySupport } from '@/app/components/editor/casbin-mode/casbin-csv';
-import { indentUnit } from '@codemirror/language';
-import { EditorView } from '@codemirror/view';
-import React from 'react';
-
-export const RequestEditor = (props: EditorProps) => {
-  return (
-    <div style={{ height: '100%', ...props.style }}>
-      <CodeMirror
-        theme={monokai}
-        onChange={(value) => {
-          props.onChange(value);
-        }}
-        extensions={[
-          basicSetup,
-          CasbinPolicySupport(),
-          indentUnit.of('    '),
-          EditorView.lineWrapping,
-        ]}
-        basicSetup={{
-          lineNumbers: true,
-          highlightActiveLine: true,
-          bracketMatching: true,
-          indentOnInput: true,
-        }}
-        className={'function'}
-        value={props.text}
-      />
-    </div>
-  );
-};
diff --git a/app/components/editor/editors/RequestResultEditor.tsx b/app/components/editor/editors/RequestResultEditor.tsx
deleted file mode 100644
index d0bf095..0000000
--- a/app/components/editor/editors/RequestResultEditor.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React, { CSSProperties } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { monokai } from '@uiw/codemirror-theme-monokai';
-import { basicSetup } from 'codemirror';
-import { javascriptLanguage } from '@codemirror/lang-javascript';
-import { indentUnit } from '@codemirror/language';
-import { EditorView } from '@codemirror/view';
-
-interface RequestResultEditorProps {
-  value: string;
-  style?: CSSProperties;
-}
-
-export const RequestResultEditor = (props: RequestResultEditorProps) => {
-  return (
-    <div style={props.style}>
-      <CodeMirror
-        onChange={() => {
-          return;
-        }}
-        theme={monokai}
-        extensions={[
-          basicSetup,
-          javascriptLanguage,
-          indentUnit.of('    '),
-          EditorView.lineWrapping,
-        ]}
-        basicSetup={{
-          lineNumbers: true,
-          highlightActiveLine: true,
-          bracketMatching: true,
-          indentOnInput: true,
-        }}
-        value={props.value}
-      />
-    </div>
-  );
-};
diff --git a/app/components/editor/copy.tsx b/app/components/editor/hooks/useCopy.tsx
similarity index 68%
rename from app/components/editor/copy.tsx
rename to app/components/editor/hooks/useCopy.tsx
index 6ba154a..6870d43 100644
--- a/app/components/editor/copy.tsx
+++ b/app/components/editor/hooks/useCopy.tsx
@@ -12,15 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
-
-interface CopyProps {
-  content: string;
-  cb: () => void;
-}
-
-const Copy = (props: CopyProps) => {
-  function copy(data: string): void {
+export default function useCopy() {
+  function copy(cb: any, data: string): void {
     const listener = (e: ClipboardEvent) => {
       if (!e.clipboardData) {
         throw new Error('Clipboard API unavailable.');
@@ -31,21 +24,10 @@ const Copy = (props: CopyProps) => {
     };
     document.addEventListener('copy', listener);
     document.execCommand('copy');
-    props.cb();
+    // props.cb();
+    cb();
   }
-
-  return (
-    <button
-      style={{ marginRight: 8 }}
-      onClick={() => {
-        return copy(
-          `${window.location.origin + window.location.pathname}#${props.content}`,
-        );
-      }}
-    >
-      COPY
-    </button>
-  );
-};
-
-export default Copy;
+  return {
+    copy,
+  };
+}
diff --git a/app/components/editor/hooks/useIndex.tsx b/app/components/editor/hooks/useIndex.tsx
new file mode 100644
index 0000000..7998f32
--- /dev/null
+++ b/app/components/editor/hooks/useIndex.tsx
@@ -0,0 +1,126 @@
+import React, { isValidElement, ReactNode, useEffect, useState } from 'react';
+import {
+  defaultCustomConfig,
+  defaultEnforceContext,
+  example,
+  ModelKind,
+} from '@/app/components/editor/casbin-mode/example';
+import { ShareFormat } from '@/app/components/editor/hooks/useShareInfo';
+import { defaultEnforceContextData } from '@/app/components/editor/hooks/useSetupEnforceContext';
+
+export default function useIndex() {
+  const [modelKind, setModelKind] = useState<ModelKind>('basic');
+  const [modelText, setModelText] = useState('');
+  const [policy, setPolicy] = useState('');
+  const [request, setRequest] = useState('');
+  const [echo, setEcho] = useState<ReactNode>(<></>);
+  const [requestResult, setRequestResult] = useState('');
+  const [customConfig, setCustomConfig] = useState('');
+  const [share, setShare] = useState('');
+  const [enforceContextData, setEnforceContextData] = useState(
+    new Map(defaultEnforceContextData),
+  );
+
+  function setPolicyPersistent(text: string): void {
+    setPolicy(text);
+  }
+
+  function setModelTextPersistent(text: string): void {
+    setModelText(text);
+  }
+
+  function setCustomConfigPersistent(text: string): void {
+    setCustomConfig(text);
+  }
+
+  function setRequestPersistent(text: string): void {
+    setRequest(text);
+  }
+
+  function setEnforceContextDataPersistent(map: Map<string, string>): void {
+    const text = JSON.stringify(Object.fromEntries(map));
+    setEnforceContextData(new Map(map));
+  }
+
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+      setEcho(<div>Loading Shared Content...</div>);
+      fetch(`https://dpaste.com/${hash}.txt`)
+        .then((resp) => {
+          return resp.text();
+        })
+        .then((content) => {
+          const sharedContent = JSON.parse(content) as ShareFormat;
+          setPolicyPersistent(sharedContent.policy);
+          setModelTextPersistent(sharedContent.model);
+          setCustomConfigPersistent(sharedContent.customConfig);
+          setRequestPersistent(sharedContent.request);
+          setRequestPersistent(sharedContent.request);
+          if (sharedContent.enforceContext) {
+            setEnforceContextDataPersistent(
+              new Map(Object.entries(sharedContent.enforceContext)),
+            );
+          }
+          setRequestResult('');
+          window.location.hash = ''; // prevent duplicate load
+          setEcho(<div>Shared Content Loaded.</div>);
+        })
+        .catch(() => {
+          setEcho(<div>Failed to load Shared Content.</div>);
+        });
+    }
+  }, []);
+
+  useEffect(() => {
+    setPolicy(example[modelKind].policy);
+    setModelText(example[modelKind].model);
+    setRequest(example[modelKind].request);
+    setCustomConfig(defaultCustomConfig);
+    setEnforceContextData(
+      new Map(
+        Object.entries(
+          JSON.parse(
+            example[modelKind].enforceContext || defaultEnforceContext,
+          ),
+        ),
+      ),
+    );
+  }, [modelKind]);
+
+  function handleShare(v: ReactNode | string) {
+    if (isValidElement(v)) {
+      setEcho(v);
+    } else {
+      const currentPath = window.location.origin + window.location.pathname;
+      setShare(v as string);
+      setEcho(<div>{`Shared at ${currentPath}#${v}`}</div>);
+    }
+  }
+  return {
+    modelKind,
+    setModelKind,
+    modelText,
+    setModelText,
+    policy,
+    setPolicy,
+    request,
+    setRequest,
+    echo,
+    setEcho,
+    requestResult,
+    setRequestResult,
+    customConfig,
+    setCustomConfig,
+    share,
+    setShare,
+    enforceContextData,
+    setEnforceContextData,
+    setPolicyPersistent,
+    setModelTextPersistent,
+    setCustomConfigPersistent,
+    setRequestPersistent,
+    setEnforceContextDataPersistent,
+    handleShare,
+  };
+}
diff --git a/app/components/editor/run-test.tsx b/app/components/editor/hooks/useRunTest.tsx
similarity index 95%
rename from app/components/editor/run-test.tsx
rename to app/components/editor/hooks/useRunTest.tsx
index 97c01a9..5456de4 100755
--- a/app/components/editor/run-test.tsx
+++ b/app/components/editor/hooks/useRunTest.tsx
@@ -20,7 +20,7 @@ import {
   StringAdapter,
   Util,
 } from 'casbin';
-import { newEnforceContext } from './setup-enforce-context';
+import { newEnforceContext } from '@/app/components/editor/hooks/useSetupEnforceContext';
 
 interface RunTestProps {
   model: string;
@@ -214,17 +214,8 @@ async function enforcer(props: RunTestProps) {
   }
 }
 
-const RunTest = (props: RunTestProps) => {
-  return (
-    <button
-      style={{ marginRight: 8 }}
-      onClick={() => {
-        return enforcer(props);
-      }}
-    >
-      RUN THE TEST
-    </button>
-  );
-};
-
-export default RunTest;
+export default function useRunTest() {
+  return {
+    enforcer,
+  };
+}
diff --git a/app/components/editor/setup-enforce-context.tsx b/app/components/editor/hooks/useSetupEnforceContext.tsx
similarity index 56%
rename from app/components/editor/setup-enforce-context.tsx
rename to app/components/editor/hooks/useSetupEnforceContext.tsx
index 5bd7c54..a8a348d 100644
--- a/app/components/editor/setup-enforce-context.tsx
+++ b/app/components/editor/hooks/useSetupEnforceContext.tsx
@@ -20,10 +20,10 @@ interface SetupEnforceContextProps {
   onChange: (data: Map<string, string>) => void;
 }
 
-const r = 'r';
-const p = 'p';
-const e = 'e';
-const m = 'm';
+export const r = 'r';
+export const p = 'p';
+export const e = 'e';
+export const m = 'm';
 
 export const defaultEnforceContextData = new Map<string, string>([
   [r, r],
@@ -41,10 +41,10 @@ export const newEnforceContext = (data: Map<string, string>) => {
   );
 };
 
-export const SetupEnforceContext = ({
+export default function useSetupEnforceContext({
   onChange,
   data,
-}: SetupEnforceContextProps) => {
+}: SetupEnforceContextProps) {
   const [enforceContextData, setEnforceContextData] = useState(
     new Map(defaultEnforceContextData),
   );
@@ -56,40 +56,8 @@ export const SetupEnforceContext = ({
     setEnforceContextData(data);
   }, [data]);
 
-  return (
-    <div className={''}>
-      <input
-        className={'w-10'}
-        value={enforceContextData.get(r)}
-        placeholder={r}
-        onChange={(event) => {
-          return handleEnforceContextChange(r, event.target.value);
-        }}
-      />
-      <input
-        className={'w-10'}
-        value={enforceContextData.get(p)}
-        placeholder={p}
-        onChange={(event) => {
-          return handleEnforceContextChange(p, event.target.value);
-        }}
-      />
-      <input
-        className={'w-10'}
-        value={enforceContextData.get(e)}
-        placeholder={e}
-        onChange={(event) => {
-          return handleEnforceContextChange(e, event.target.value);
-        }}
-      />
-      <input
-        className={'w-10'}
-        value={enforceContextData.get(m)}
-        placeholder={m}
-        onChange={(event) => {
-          return handleEnforceContextChange(m, event.target.value);
-        }}
-      />
-    </div>
-  );
-};
+  return {
+    setupEnforceContextData: enforceContextData,
+    setupHandleEnforceContextChange: handleEnforceContextChange,
+  };
+}
diff --git a/app/components/editor/share.tsx b/app/components/editor/hooks/useShareInfo.tsx
similarity index 89%
rename from app/components/editor/share.tsx
rename to app/components/editor/hooks/useShareInfo.tsx
index f69df82..02c02a9 100644
--- a/app/components/editor/share.tsx
+++ b/app/components/editor/hooks/useShareInfo.tsx
@@ -35,7 +35,7 @@ async function dpaste(content: string) {
   return response.text();
 }
 
-const Share = (props: ShareProps) => {
+export default function useShareInfo() {
   const [sharing, setSharing] = useState(false);
 
   function shareInfo(props: ShareProps) {
@@ -56,16 +56,7 @@ const Share = (props: ShareProps) => {
     });
   }
 
-  return (
-    <button
-      style={{ marginRight: 8 }}
-      onClick={() => {
-        return shareInfo(props);
-      }}
-    >
-      SHARE
-    </button>
-  );
-};
-
-export default Share;
+  return {
+    shareInfo,
+  };
+}
diff --git a/app/components/editor/index.tsx b/app/components/editor/index.tsx
index 30513c2..31181f4 100755
--- a/app/components/editor/index.tsx
+++ b/app/components/editor/index.tsx
@@ -13,169 +13,479 @@
 // limitations under the License.
 
 'use client';
-import React, { isValidElement, ReactNode, useEffect, useState } from 'react';
+import React, { isValidElement, useState } from 'react';
+import { example, ModelKind } from './casbin-mode/example';
 import {
-  defaultCustomConfig,
-  defaultEnforceContext,
-  example,
-  ModelKind,
-} from './casbin-mode/example';
-import { Settings } from './parts/Settings';
-import { ShareFormat } from './share';
-import { defaultEnforceContextData } from './setup-enforce-context';
+  e,
+  m,
+  p,
+  r,
+} from '@/app/components/editor/hooks/useSetupEnforceContext';
 
-import Modal from '@/app/components/editor/parts/Modal';
-import Policy from '@/app/components/editor/parts/Policy';
-import Request from '@/app/components/editor/parts/Request';
-import EnforcementResult from '@/app/components/editor/parts/EnforcementResult';
-import ButtonGroup from '@/app/components/editor/parts/ButtonGroup';
 import { clsx } from 'clsx';
+import CodeMirror from '@uiw/react-codemirror';
+import { monokai } from '@uiw/codemirror-theme-monokai';
+import { basicSetup } from 'codemirror';
+import { indentUnit, StreamLanguage } from '@codemirror/language';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { EditorView } from '@codemirror/view';
+import { CasbinConfSupport } from '@/app/components/editor/casbin-mode/casbin-conf';
+import { CasbinPolicySupport } from '@/app/components/editor/casbin-mode/casbin-csv';
+import { Config } from 'casbin';
+import { javascriptLanguage } from '@codemirror/lang-javascript';
+import useRunTest from '@/app/components/editor/hooks/useRunTest';
+import useShareInfo from '@/app/components/editor/hooks/useShareInfo';
+import useCopy from '@/app/components/editor/hooks/useCopy';
+import useSetupEnforceContext from '@/app/components/editor/hooks/useSetupEnforceContext';
+import useIndex from '@/app/components/editor/hooks/useIndex';
 
 export const EditorScreen = () => {
-  const [modelKind, setModelKind] = useState<ModelKind>('basic');
-  const [modelText, setModelText] = useState('');
-  const [policy, setPolicy] = useState('');
-  const [request, setRequest] = useState('');
-  const [echo, setEcho] = useState<ReactNode>(<></>);
-  const [requestResult, setRequestResult] = useState('');
-  const [customConfig, setCustomConfig] = useState('');
-  const [share, setShare] = useState('');
-  const [enforceContextData, setEnforceContextData] = useState(
-    new Map(defaultEnforceContextData),
-  );
-
-  function setPolicyPersistent(text: string): void {
-    setPolicy(text);
-  }
-
-  function setModelTextPersistent(text: string): void {
-    setModelText(text);
-  }
-
-  function setCustomConfigPersistent(text: string): void {
-    setCustomConfig(text);
-  }
-
-  function setRequestPersistent(text: string): void {
-    setRequest(text);
-  }
-
-  function setEnforceContextDataPersistent(map: Map<string, string>): void {
-    const text = JSON.stringify(Object.fromEntries(map));
-    setEnforceContextData(new Map(map));
-  }
-
-  useEffect(() => {
-    const hash = window.location.hash.slice(1);
-    if (hash) {
-      setEcho(<div>Loading Shared Content...</div>);
-      fetch(`https://dpaste.com/${hash}.txt`)
-        .then((resp) => {
-          return resp.text();
-        })
-        .then((content) => {
-          const sharedContent = JSON.parse(content) as ShareFormat;
-          setPolicyPersistent(sharedContent.policy);
-          setModelTextPersistent(sharedContent.model);
-          setCustomConfigPersistent(sharedContent.customConfig);
-          setRequestPersistent(sharedContent.request);
-          setRequestPersistent(sharedContent.request);
-          if (sharedContent.enforceContext) {
-            setEnforceContextDataPersistent(
-              new Map(Object.entries(sharedContent.enforceContext)),
-            );
-          }
-          setRequestResult('');
-          window.location.hash = ''; // prevent duplicate load
-          setEcho(<div>Shared Content Loaded.</div>);
-        })
-        .catch(() => {
-          setEcho(<div>Failed to load Shared Content.</div>);
-        });
-    }
-  }, []);
+  const {
+    modelKind,
+    setModelKind,
+    modelText,
+    setModelText,
+    policy,
+    setPolicy,
+    request,
+    setRequest,
+    echo,
+    setEcho,
+    requestResult,
+    setRequestResult,
+    customConfig,
+    setCustomConfig,
+    share,
+    setShare,
+    enforceContextData,
+    setEnforceContextData,
+    setPolicyPersistent,
+    setModelTextPersistent,
+    setCustomConfigPersistent,
+    setRequestPersistent,
+    setEnforceContextDataPersistent,
+    handleShare,
+  } = useIndex();
 
-  useEffect(() => {
-    setPolicy(example[modelKind].policy);
-    setModelText(example[modelKind].model);
-    setRequest(example[modelKind].request);
-    setCustomConfig(defaultCustomConfig);
-    setEnforceContextData(
-      new Map(
-        Object.entries(
-          JSON.parse(
-            example[modelKind].enforceContext || defaultEnforceContext,
-          ),
-        ),
-      ),
-    );
-  }, [modelKind]);
-
-  function handleShare(v: ReactNode | string) {
-    if (isValidElement(v)) {
-      setEcho(v);
-    } else {
-      const currentPath = window.location.origin + window.location.pathname;
-      setShare(v as string);
-      setEcho(<div>{`Shared at ${currentPath}#${v}`}</div>);
-    }
-  }
+  const [open, setOpen] = useState(true);
+  const { enforcer } = useRunTest();
+  const { shareInfo } = useShareInfo();
+  const { copy } = useCopy();
+  const { setupEnforceContextData, setupHandleEnforceContextChange } =
+    useSetupEnforceContext({
+      onChange: setEnforceContextDataPersistent,
+      data: enforceContextData,
+    });
 
   return (
-    <div className={clsx('flex flex-row  gap-1')}>
-      <div className={'w-64'}>
-        <Settings
-          text={customConfig}
-          onCustomConfigChange={(v) => {
-            setCustomConfigPersistent(v);
-          }}
-        />
+    <div className={clsx('flex flex-row')}>
+      <div
+        className={clsx(
+          open ? 'w-72' : 'w-5',
+          'relative',
+          'pl-2 pr-2 border-r border-[#dddddd]',
+        )}
+      >
+        <div>
+          <button
+            className={clsx(
+              'absolute top-.5 right-0 translate-x-1/2',
+              'h-7 w-7',
+              'bg-[#ffffff]',
+              'border-[1.5px] rounded-full',
+              'flex items-center justify-center',
+            )}
+            onClick={() => {
+              return setOpen(!open);
+            }}
+          >
+            <svg
+              className={clsx('h-8 w-8', '')}
+              style={{
+                transform: open ? 'rotateZ(0deg)' : 'rotateZ(180deg)',
+              }}
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill={'currentColor'}
+                d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+              />
+            </svg>
+          </button>
+
+          <div className={'pt-6 h-12 flex items-center'}>
+            {open && <div>Custom config</div>}
+          </div>
+          <div>
+            {open && (
+              <div>
+                <div style={{ height: '100%' }}>
+                  <CodeMirror
+                    height={'800px'}
+                    onChange={setCustomConfigPersistent}
+                    theme={monokai}
+                    basicSetup={{
+                      lineNumbers: true,
+                      highlightActiveLine: true,
+                      bracketMatching: true,
+                      indentOnInput: true,
+                    }}
+                    extensions={[
+                      basicSetup,
+                      StreamLanguage.define(go),
+                      indentUnit.of('    '),
+                      EditorView.lineWrapping,
+                    ]}
+                    className={'function'}
+                    value={customConfig}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
       <div className={clsx('flex flex-col grow')}>
-        <div className={clsx('flex flex-row  gap-1')}>
+        <div className={clsx('flex flex-row  gap-1', 'py-4')}>
           <div className={'flex-1'}>
-            <Modal
-              setModelKind={setModelKind}
-              modelText={modelText}
-              setModelTextPersistent={setModelTextPersistent}
-            ></Modal>
+            <div>
+              <div
+                className={clsx(
+                  'flex flex-row items-center justify-start gap-2',
+                )}
+              >
+                <div
+                  className={clsx(
+                    'pl-2 h-12',
+                    'flex items-center justify-center',
+                    'font-bold',
+                  )}
+                >
+                  Model
+                </div>
+                <select
+                  defaultValue={'basic'}
+                  onChange={(e) => {
+                    const model = e.target.value;
+                    setModelKind(model);
+                  }}
+                  className={'border-[#767676] border rounded'}
+                >
+                  <option value="" disabled>
+                    Select your model
+                  </option>
+                  {Object.keys(example).map((n) => {
+                    return (
+                      <option key={n} value={n}>
+                        {example[n as ModelKind].name}
+                      </option>
+                    );
+                  })}
+                </select>
+                <button
+                  className={clsx(
+                    'rounded',
+                    'text-[#453d7d]',
+                    'px-1',
+                    'border border-[#453d7d]',
+                    'bg-[#efefef]',
+                    'hover:bg-[#453d7d] hover:text-white',
+                    'transition-colors duration-500',
+                  )}
+                  onClick={() => {
+                    const ok = window.confirm('Confirm Reset?');
+                    if (ok) {
+                      window.location.reload();
+                    }
+                  }}
+                >
+                  RESET
+                </button>
+              </div>
+              <div style={{ height: '100%' }}>
+                <CodeMirror
+                  height={'343px'}
+                  theme={monokai}
+                  onChange={setModelTextPersistent}
+                  basicSetup={{
+                    lineNumbers: true,
+                    highlightActiveLine: true,
+                    bracketMatching: true,
+                    indentOnInput: true,
+                  }}
+                  extensions={[
+                    basicSetup,
+                    CasbinConfSupport(),
+                    indentUnit.of('    '),
+                    EditorView.lineWrapping,
+                  ]}
+                  className={'function'}
+                  value={modelText}
+                />
+              </div>
+            </div>
           </div>
           <div className={'flex-1'}>
-            <Policy
-              policy={policy}
-              setPolicyPersistent={setPolicyPersistent}
-            ></Policy>
+            <div>
+              <div
+                className={clsx(
+                  'h-12 font-bold',
+                  'flex items-center justify-start ',
+                )}
+              >
+                Policy
+              </div>
+              <div style={{ height: '100%' }}>
+                <CodeMirror
+                  height={'343px'}
+                  extensions={[
+                    basicSetup,
+                    CasbinPolicySupport(),
+                    indentUnit.of('    '),
+                    EditorView.lineWrapping,
+                  ]}
+                  basicSetup={{
+                    lineNumbers: true,
+                    highlightActiveLine: true,
+                    bracketMatching: true,
+                    indentOnInput: true,
+                  }}
+                  theme={monokai}
+                  onChange={setPolicyPersistent}
+                  className={'function'}
+                  value={policy}
+                />
+              </div>
+            </div>
           </div>
         </div>
         <div className={'flex flex-row gap-1'}>
           <div className={'flex-1'}>
-            <Request
-              request={request}
-              setRequestPersistent={setRequest}
-              enforceContextData={enforceContextData}
-              setEnforceContextDataPersistent={setEnforceContextDataPersistent}
-            ></Request>
+            <div>
+              <div
+                className={clsx(
+                  'h-10 pl-2',
+                  'flex items-center justify-start gap-3',
+                )}
+              >
+                <div className={'font-bold'}>Request</div>
+                <div className={'space-x-2'}>
+                  <input
+                    className={clsx('w-7 pl-1', 'border border-black rounded')}
+                    value={setupEnforceContextData.get(r)}
+                    placeholder={r}
+                    onChange={(event) => {
+                      return setupHandleEnforceContextChange(
+                        r,
+                        event.target.value,
+                      );
+                    }}
+                  />
+                  <input
+                    className={clsx('w-7 pl-1', 'border border-black rounded')}
+                    value={setupEnforceContextData.get(p)}
+                    placeholder={p}
+                    onChange={(event) => {
+                      return setupHandleEnforceContextChange(
+                        p,
+                        event.target.value,
+                      );
+                    }}
+                  />
+                  <input
+                    className={clsx('w-7 pl-1', 'border border-black rounded')}
+                    value={setupEnforceContextData.get(e)}
+                    placeholder={e}
+                    onChange={(event) => {
+                      return setupHandleEnforceContextChange(
+                        e,
+                        event.target.value,
+                      );
+                    }}
+                  />
+                  <input
+                    className={clsx('w-7 pl-1', 'border border-black rounded')}
+                    value={setupEnforceContextData.get(m)}
+                    placeholder={m}
+                    onChange={(event) => {
+                      return setupHandleEnforceContextChange(
+                        m,
+                        event.target.value,
+                      );
+                    }}
+                  />
+                </div>
+              </div>
+              <div style={{ height: '100%' }}>
+                <CodeMirror
+                  height={'343px'}
+                  theme={monokai}
+                  onChange={(value) => {
+                    setRequestPersistent(value);
+                  }}
+                  extensions={[
+                    basicSetup,
+                    CasbinPolicySupport(),
+                    indentUnit.of('    '),
+                    EditorView.lineWrapping,
+                  ]}
+                  basicSetup={{
+                    lineNumbers: true,
+                    highlightActiveLine: true,
+                    bracketMatching: true,
+                    indentOnInput: true,
+                  }}
+                  className={'function'}
+                  value={request}
+                />
+              </div>
+            </div>
           </div>
           <div className={'flex-1'}>
-            <EnforcementResult
-              requestResult={requestResult}
-            ></EnforcementResult>
+            <div>
+              <div
+                className={clsx(
+                  'h-10 font-bold',
+                  'flex items-center justify-start',
+                )}
+              >
+                Enforcement Result
+              </div>
+              <div>
+                <CodeMirror
+                  height={'343px'}
+                  onChange={() => {
+                    return;
+                  }}
+                  theme={monokai}
+                  extensions={[
+                    basicSetup,
+                    javascriptLanguage,
+                    indentUnit.of('    '),
+                    EditorView.lineWrapping,
+                  ]}
+                  basicSetup={{
+                    lineNumbers: true,
+                    highlightActiveLine: true,
+                    bracketMatching: true,
+                    indentOnInput: true,
+                  }}
+                  value={requestResult}
+                />
+              </div>
+            </div>
           </div>
         </div>
-        <ButtonGroup
-          modelText={modelText}
-          echo={echo}
-          setEcho={setEcho}
-          modelKind={modelKind}
-          policy={policy}
-          customConfig={customConfig}
-          request={request}
-          enforceContextData={enforceContextData}
-          setRequestResult={setRequestResult}
-          share={share}
-          setShare={setShare}
-          handleShare={handleShare}
-        ></ButtonGroup>
+        <div className={clsx('py-2 px-1')}>
+          <button
+            className={clsx(
+              'rounded',
+              'px-2 py-1',
+              'border border-[#453d7d]',
+              'bg-[#efefef]',
+              'text-[#453d7a]',
+              'hover:bg-[#453d7d] hover:text-white',
+              'transition-colors duration-500',
+            )}
+            style={{ marginRight: 8 }}
+            onClick={() => {
+              try {
+                Config.newConfigFromText(modelText);
+                setEcho(<div>Passed</div>);
+              } catch (e) {
+                setEcho(<div>{(e as any).message}</div>);
+              }
+            }}
+          >
+            SYNTAX VALIDATE
+          </button>
+          <button
+            className={clsx(
+              'rounded',
+              'px-2 py-1',
+              'border border-[#453d7d]',
+              'text-[#453d7a]',
+              'bg-[#efefef]',
+              'hover:bg-[#453d7d] hover:text-white',
+              'transition-colors duration-500',
+            )}
+            style={{ marginRight: 8 }}
+            onClick={() => {
+              return enforcer({
+                modelKind,
+                model: modelText,
+                policy,
+                customConfig,
+                request,
+                enforceContextData,
+                onResponse: (v) => {
+                  if (isValidElement(v)) {
+                    setEcho(v);
+                  } else if (Array.isArray(v)) {
+                    setRequestResult(v.join('\n'));
+                  }
+                },
+              });
+            }}
+          >
+            RUN THE TEST
+          </button>
+          {!share ? (
+            <span>
+              <button
+                className={clsx(
+                  'rounded',
+                  'px-2 py-1',
+                  'border border-[#453d7d]',
+                  'text-[#453d7a]',
+                  'bg-[#efefef]',
+                  'hover:bg-[#453d7d] hover:text-white',
+                  'transition-colors duration-500',
+                )}
+                style={{ marginRight: 8 }}
+                onClick={() => {
+                  return shareInfo({
+                    onResponse: (v) => {
+                      return handleShare(v);
+                    },
+                    model: modelText,
+                    policy,
+                    customConfig,
+                    request,
+                    enforceContext: Object.entries(enforceContextData),
+                  });
+                }}
+              >
+                SHARE
+              </button>
+            </span>
+          ) : (
+            <button
+              className={clsx(
+                'rounded',
+                'px-2 py-1',
+                'border border-[#453d7d]',
+                'text-[#453d7a]',
+                'bg-[#efefef]',
+                'hover:bg-[#453d7d] hover:text-white',
+                'transition-colors duration-500',
+              )}
+              style={{ marginRight: 8 }}
+              onClick={() => {
+                return copy(
+                  () => {
+                    setShare('');
+                    setEcho(<div>Copied.</div>);
+                  },
+                  `${window.location.origin + window.location.pathname}#${share}`,
+                );
+              }}
+            >
+              COPY
+            </button>
+          )}
+          <div style={{ display: 'inline-block' }}>{echo}</div>
+        </div>
       </div>
     </div>
   );
diff --git a/app/components/editor/parts/ButtonGroup.tsx b/app/components/editor/parts/ButtonGroup.tsx
deleted file mode 100644
index ab68802..0000000
--- a/app/components/editor/parts/ButtonGroup.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import Syntax from '@/app/components/editor/syntax';
-import RunTest from '@/app/components/editor/run-test';
-import React, { isValidElement, ReactNode } from 'react';
-import Share from '@/app/components/editor/share';
-import Copy from '@/app/components/editor/copy';
-interface Props {
-  modelText: string;
-  echo: ReactNode;
-  setEcho: (value: ReactNode) => void;
-  modelKind: string;
-  policy: string;
-  customConfig: string;
-  request: string;
-  enforceContextData: Map<string, string>;
-  setRequestResult: (value: string) => void;
-  share: string;
-  setShare: (value: string) => void;
-  handleShare: (value: ReactNode | string) => void;
-}
-
-export default function ButtonGroup({
-  echo,
-  modelText,
-  modelKind,
-  setEcho,
-  policy,
-  customConfig,
-  request,
-  enforceContextData,
-  setRequestResult,
-  share,
-  setShare,
-  handleShare,
-}: Props) {
-  return (
-    <div>
-      <Syntax
-        model={modelText}
-        onResponse={(component) => {
-          return setEcho(component);
-        }}
-      />
-      <RunTest
-        modelKind={modelKind}
-        model={modelText}
-        policy={policy}
-        customConfig={customConfig}
-        request={request}
-        enforceContextData={enforceContextData}
-        onResponse={(v) => {
-          if (isValidElement(v)) {
-            setEcho(v);
-          } else if (Array.isArray(v)) {
-            setRequestResult(v.join('\n'));
-          }
-        }}
-      />
-      {!share ? (
-        <Share
-          onResponse={(v) => {
-            return handleShare(v);
-          }}
-          model={modelText}
-          policy={policy}
-          customConfig={customConfig}
-          request={request}
-          enforceContext={Object.entries(enforceContextData)}
-        />
-      ) : (
-        <Copy
-          content={share}
-          cb={() => {
-            setShare('');
-            setEcho(<div>Copied.</div>);
-          }}
-        />
-      )}
-      <div style={{ display: 'inline-block' }}>{echo}</div>
-    </div>
-  );
-}
diff --git a/app/components/editor/parts/EnforcementResult.tsx b/app/components/editor/parts/EnforcementResult.tsx
deleted file mode 100644
index 715a7cf..0000000
--- a/app/components/editor/parts/EnforcementResult.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { RequestResultEditor } from '@/app/components/editor/editors/RequestResultEditor';
-import React from 'react';
-interface Props {
-  requestResult: string;
-}
-
-export default function EnforcementResult({ requestResult }: Props) {
-  return (
-    <div>
-      <div className={'h-10 flex items-center justify-center '}>
-        Enforcement Result
-      </div>
-      <RequestResultEditor value={requestResult} />
-    </div>
-  );
-}
diff --git a/app/components/editor/parts/Modal.tsx b/app/components/editor/parts/Modal.tsx
deleted file mode 100644
index 6bb06b5..0000000
--- a/app/components/editor/parts/Modal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import SelectModel from '@/app/components/editor/select-model';
-import { ModelKind } from '@/app/components/editor/casbin-mode/example';
-import { ModelEditor } from '@/app/components/editor/editors/ModalEditor';
-import React from 'react';
-interface Props {
-  setModelKind: (value: string) => void;
-  modelText: string;
-  setModelTextPersistent: (value: string) => void;
-}
-
-export default function Modal({
-  setModelKind,
-  modelText,
-  setModelTextPersistent,
-}: Props) {
-  return (
-    <div>
-      <div className={'flex flex-row items-center'}>
-        <div className={'h-10 flex items-center justify-center '}>Model</div>
-        <SelectModel
-          onChange={(value) => {
-            setModelKind(value as ModelKind);
-          }}
-        />
-        <button
-          onClick={() => {
-            const ok = window.confirm('Confirm Reset?');
-            if (ok) {
-              window.location.reload();
-            }
-          }}
-        >
-          Reset
-        </button>
-      </div>
-      <ModelEditor text={modelText} onChange={setModelTextPersistent} />
-    </div>
-  );
-}
diff --git a/app/components/editor/parts/Policy.tsx b/app/components/editor/parts/Policy.tsx
deleted file mode 100644
index 220d4c1..0000000
--- a/app/components/editor/parts/Policy.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { PolicyEditor } from '@/app/components/editor/editors/PolicyEditor';
-import React from 'react';
-interface Props {
-  policy: string;
-  setPolicyPersistent: (value: string) => void;
-}
-
-export default function Policy({ policy, setPolicyPersistent }: Props) {
-  return (
-    <div>
-      <div className={'h-10 flex items-center justify-center '}>Policy</div>
-      <PolicyEditor text={policy} onChange={setPolicyPersistent} />
-    </div>
-  );
-}
diff --git a/app/components/editor/parts/Request.tsx b/app/components/editor/parts/Request.tsx
deleted file mode 100644
index 49ae151..0000000
--- a/app/components/editor/parts/Request.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { SetupEnforceContext } from '@/app/components/editor/setup-enforce-context';
-import { RequestEditor } from '@/app/components/editor/editors/RequestEditor';
-import React from 'react';
-interface Props {
-  request: string;
-  setRequestPersistent: (value: string) => void;
-  enforceContextData: Map<string, string>;
-  setEnforceContextDataPersistent: (value: Map<string, string>) => void;
-}
-
-export default function Request({
-  request,
-  setRequestPersistent,
-  enforceContextData,
-  setEnforceContextDataPersistent,
-}: Props) {
-  return (
-    <div>
-      <div className={'h-10 flex items-center justify-center '}>
-        <div>Request</div>
-        <SetupEnforceContext
-          data={enforceContextData}
-          onChange={setEnforceContextDataPersistent}
-        />
-      </div>
-      <RequestEditor text={request} onChange={setRequestPersistent} />
-    </div>
-  );
-}
diff --git a/app/components/editor/parts/Settings.tsx b/app/components/editor/parts/Settings.tsx
deleted file mode 100644
index a6a2061..0000000
--- a/app/components/editor/parts/Settings.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React, { useState } from 'react';
-
-import { CustomFunctionEditor } from '@/app/components/editor/editors/CustomFunctionEditor';
-
-interface SettingsProps {
-  text: string;
-  onCustomConfigChange: (text: string) => void;
-}
-
-export function Settings(props: SettingsProps) {
-  const [open, setOpen] = useState(true);
-
-  return (
-    <div>
-      <div className={'h-10 flex items-center justify-center '}>
-        <span>Custom config</span>
-        <div
-          className={'h-10 w-10'}
-          onClick={() => {
-            return setOpen(!open);
-          }}
-        >
-          <svg
-            style={{
-              width: '100%',
-              height: '100%',
-              transform: open ? 'rotateZ(0deg)' : 'rotateZ(180deg)',
-            }}
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill={'currentColor'}
-              d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-            />
-          </svg>
-        </div>
-      </div>
-      <div>
-        {open && (
-          <div>
-            <CustomFunctionEditor
-              text={props.text}
-              onChange={props.onCustomConfigChange}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/editor/select-model.tsx b/app/components/editor/select-model.tsx
deleted file mode 100755
index 9cd9a87..0000000
--- a/app/components/editor/select-model.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React from 'react';
-import { ModelKind, example } from './casbin-mode/example';
-
-interface SelectModelProps {
-  onChange: (value: string) => void;
-}
-
-const SelectModel = (props: SelectModelProps) => {
-  return (
-    <select
-      defaultValue={''}
-      onChange={(e) => {
-        const model = e.target.value;
-        props.onChange(model);
-      }}
-    >
-      <option value="" disabled>
-        Select your model
-      </option>
-      {Object.keys(example).map((n) => {
-        return (
-          <option key={n} value={n}>
-            {example[n as ModelKind].name}
-          </option>
-        );
-      })}
-    </select>
-  );
-};
-
-export default SelectModel;
diff --git a/app/components/editor/syntax.tsx b/app/components/editor/syntax.tsx
deleted file mode 100755
index 41f721b..0000000
--- a/app/components/editor/syntax.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React from 'react';
-import { Config } from 'casbin';
-
-interface SyntaxProps {
-  model: string;
-  onResponse: (com: JSX.Element) => void;
-}
-
-const Syntax = (props: SyntaxProps) => {
-  return (
-    <button
-      style={{ marginRight: 8 }}
-      onClick={() => {
-        try {
-          Config.newConfigFromText(props.model);
-          props.onResponse(<div>Passed</div>);
-        } catch (e) {
-          props.onResponse(<div>{(e as any).message}</div>);
-        }
-      }}
-    >
-      SYNTAX VALIDATE
-    </button>
-  );
-};
-
-export default Syntax;
diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 55382c5..0000000
Binary files a/app/favicon.ico and /dev/null differ
diff --git a/app/icon.png b/app/icon.png
new file mode 100644
index 0000000..9c0b156
Binary files /dev/null and b/app/icon.png differ
diff --git a/app/page.tsx b/app/page.tsx
index 4f69f24..d90578d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -14,11 +14,17 @@
 
 'use client';
 import { EditorScreen } from '@/app/components/editor';
+import { clsx } from 'clsx';
 export default function Home() {
   return (
     <main>
       <EditorScreen />
-      <div>
+      <div
+        className={clsx(
+          'bg-[#222222] px-2 py-3 mb-3',
+          'flex flex-row items-center',
+        )}
+      >
         <a
           target="_blank"
           rel="noopener noreferrer"
@@ -29,6 +35,7 @@ export default function Home() {
             src="https://img.shields.io/github/stars/casbin/casbin-editor?style=social"
           />
         </a>
+        <div className={'grow'}></div>
         <span style={{ color: '#FFFFFF', float: 'right', fontSize: 14 }}>
           Copyright © {new Date().getFullYear()} Casbin contributors.
         </span>