diff --git a/assets/css/style.css b/assets/css/style.css
index b7631fe7..e905bfa8 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -86,10 +86,10 @@ nav i.log:hover {
     color: #ed6a6a;
 }
 nav h3 {
-    font-size: 25px;
+    font-size: 22px;
     font-weight: 200;
     color: #303030;
-    margin: 1px 0 0 0;
+    margin: 2px 5px 0 0;
     float: right;
 }
 [data-bs-theme="dark"] nav h3 {
@@ -357,7 +357,7 @@ nav i.backBtn:hover {
     width: 100%;
     border-bottom: 1px solid #dcdcdc;
     transition: all 0.2s ease-in-out;
-    padding: 15px 20px 15px 20px;
+    padding: 14px 20px 15px 20px;
 }
 [data-bs-theme="dark"] .settings .item {
     border-color: #2B2E3B;
@@ -381,6 +381,7 @@ nav i.backBtn:hover {
     font-weight: 300;
     color: #303030;
     margin: 5px 0 0 0;
+    padding: 1px 0 0 0;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -393,6 +394,7 @@ nav i.backBtn:hover {
     float: left;
     margin: 0;
     width: 60%;
+    padding-top: 1px;
 }
 .settings .item .value span {
     float: left;
@@ -445,7 +447,7 @@ nav i.backBtn:hover {
     height: 27px;
     border-radius: 4px;
     padding: 0;
-    margin: 0;
+    margin: 2px 0 -1px 0;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
 }
@@ -796,4 +798,126 @@ nav i.backBtn:hover {
 }
 .customToast button:hover {
     opacity: 1;
+}
+
+.drawer {
+    padding: 15px 0;
+    margin: 0;
+}
+[data-bs-theme="dark"] .drawer {
+    background: #0A0E24!important;
+}
+.drawerOverlay {
+    backdrop-filter: blur(4px);
+    --webkit-backdrop-filter: blur(4px);
+    background-color: rgba(0, 0, 0, 0.25) !important;
+}
+[data-bs-theme="dark"] .drawerOverlay {
+    backdrop-filter: blur(3px);
+    --webkit-backdrop-filter: blur(3px);
+}
+.drawer .list {
+    float: right;
+    width: 100%;
+}
+.drawer .list .appName {
+    float: right;
+    width: 100%;
+    margin: 0 0 15px 0;
+    padding: 0 20px 15px 0;
+}
+.drawer .list .appName img {
+    float: right;
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    margin: 0 -5px 8px 0;
+}
+.drawer .list .appName h3 {
+    float: right;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 22px;
+    font-weight: 400;
+    color: #FFA200;
+}
+.drawer .list .appName h3 small {
+    font-weight: 200;
+    font-size: 80%;
+}
+[data-bs-theme="dark"] .drawer .list .appName h3 small {
+    color: #b0aeae;
+}
+.drawer .list ul {
+    float: right;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+.drawer .list ul li {
+    float: right;
+    width: 100%;
+    list-style: none;
+    padding: 10px 20px;
+    transition: all 0.2s ease-in-out;
+}
+.drawer .list ul li:hover {
+    background: #ededed;
+}
+[data-bs-theme="dark"] .drawer .list ul li:hover {
+    background: #161c3e;
+}
+.drawer .list ul li.divider {
+    border-bottom: 1px solid #f3f3f3;
+    padding: 0;
+    margin: 10px 0;
+}
+[data-bs-theme="dark"] .drawer .list ul li.divider {
+    border-color: #2B2E3B;
+}
+.drawer .list ul li.divider:hover {
+    background: transparent;
+}
+.drawer .list ul li a {
+    float: right;
+    width: 100%;
+}
+.drawer .list ul li i {
+    float: right;
+    color: #b0b0b0;
+    font-size: 22px!important;
+    padding-left: 20px;
+}
+.drawer .list ul li:hover i {
+    color: #8d8d8d;
+}
+[data-bs-theme="dark"] .drawer .list ul li:hover i {
+    color: #d0d0d0;
+}
+.drawer .list ul li span {
+    float: right;
+    color: #4d4d4d;
+    padding: 1px 0 0 0;
+    font-weight: 300;
+    font-size: 16px;
+}
+[data-bs-theme="dark"] .drawer .list ul li span {
+    color: #e1e1e1;
+    font-weight: 200;
+}
+.drawer .appVersion {
+    float: right;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    padding: 20px;
+    font-size: 12px;
+    color: #c0c0c0;
+}
+.drawer .appVersion b {
+    font-size: 13px;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ec330e76..4669e9ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
                 "react-country-flag": "^3.1.0",
                 "react-dom": "^18.2.0",
                 "react-hot-toast": "^2.4.1",
+                "react-modern-drawer": "^1.2.2",
                 "react-router-dom": "^6.16.0",
                 "tree-kill": "^1.2.2",
                 "zustand": "^4.5.2"
@@ -15784,6 +15785,17 @@
             "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
             "dev": true
         },
+        "node_modules/react-modern-drawer": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/react-modern-drawer/-/react-modern-drawer-1.2.2.tgz",
+            "integrity": "sha512-SXUNjofHzeoEas0kdMWWafuF2+vwdtbQD1cpkHxo7oyFj3v+2l2CMeJjc/GodYsnxVhSiYj75xosMJXXed9ykQ==",
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "react": ">16.0.0"
+            }
+        },
         "node_modules/react-refresh": {
             "version": "0.14.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
diff --git a/package.json b/package.json
index 3646b545..d559a1f7 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
         "react-country-flag": "^3.1.0",
         "react-dom": "^18.2.0",
         "react-hot-toast": "^2.4.1",
+        "react-modern-drawer": "^1.2.2",
         "react-router-dom": "^6.16.0",
         "tree-kill": "^1.2.2",
         "zustand": "^4.5.2"
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 83a578ba..1e96d7ae 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -10,6 +10,8 @@ import 'assets/css/style.css';
 import Index from './pages/Index';
 import SplashScreen from './pages/SplashScreen';
 import Settings from './pages/Settings';
+import Options from './pages/Options';
+import Routing from './pages/Routing';
 import About from './pages/About';
 import Debug from './pages/Debug';
 import { settings } from './lib/settings';
@@ -52,6 +54,8 @@ export default function App() {
                 <Routes>
                     <Route path='/' element={<Index />} />
                     <Route path='/settings' element={<Settings />} />
+                    <Route path='/options' element={<Options />} />
+                    <Route path='/routing' element={<Routing />} />
                     <Route path='/about' element={<About />} />
                     <Route path='/debug' element={<Debug />} />
                 </Routes>
diff --git a/src/renderer/pages/Index.tsx b/src/renderer/pages/Index.tsx
index 00b551af..8af1c61c 100644
--- a/src/renderer/pages/Index.tsx
+++ b/src/renderer/pages/Index.tsx
@@ -5,12 +5,13 @@ import { Link } from 'react-router-dom';
 import ReactCountryFlag from 'react-country-flag';
 import { ipcRenderer } from '../lib/utils';
 import { useStore } from '../store';
-
+import appIco from '../../../assets/oblivion.png';
 import defFlag from '../../../assets/img/flags/xx.svg';
 import irFlag from '../../../assets/img/flags/ir.svg';
-
 import { settings } from '../lib/settings';
-import { defaultSettings } from '../../defaultSettings';
+import Drawer from 'react-modern-drawer';
+import 'react-modern-drawer/dist/index.css';
+import packageJsonData from '../../../package.json';
 
 export default function Index() {
     const { isConnected, setIsConnected } = useStore();
@@ -22,6 +23,11 @@ export default function Index() {
     const [shownIpData, setShownIpData] = useState(true);
     const [online, setOnline] = useState(true);
 
+    const [drawerIsOpen, setDrawerIsOpen] = useState(false)
+    const toggleDrawer = () => {
+        setDrawerIsOpen((prevState) => !prevState)
+    }
+
     useEffect(() => {
         ipcRenderer.on('wp-start', (ok) => {
             if (ok) {
@@ -172,19 +178,77 @@ export default function Index() {
 
     return (
         <>
+            <Drawer
+                open={drawerIsOpen}
+                onClose={toggleDrawer}
+                lockBackgroundScroll={false}
+                overlayOpacity={1}
+                duration={250}
+                direction='right'
+                className='drawer'
+                overlayClassName='drawerOverlay'
+                size='80vw'
+            >
+                <div className='list'>
+                    <div className='appName'>
+                        <img src={appIco} alt="icon" />
+                        <h3>Oblivion <small>Desktop</small></h3>
+                    </div>
+                    <ul>
+                        <li>
+                            <Link to={'/settings'}>
+                                <i className={'material-icons'}>
+                                    &#xe429;
+                                </i>
+                                <span>تنظیمات پروکسی</span>
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to={'/routing'}>
+                                <i className={'material-icons'}>
+                                    &#xe90e;
+                                </i>
+                                <span>قوانین مسیریابی</span>
+                            </Link>
+                        </li>
+                        <li className='divider'></li>
+                        <li>
+                            <Link to={'/options'}>
+                                <i className={'material-icons'}>&#xe8b8;</i>
+                                <span>تنظیمات برنامه</span>
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to={'/debug'}>
+                                <i className={'material-icons'}>
+                                    &#xe868;
+                                </i>
+                                <span>لاگ برنامه</span>
+                            </Link>
+                        </li>
+                        <li className='divider'></li>
+                        <li>
+                            <Link to='/about'>
+                                <i className={'material-icons'}>&#xe88e;</i>
+                                <span>درباره برنامه</span>
+                            </Link>
+                        </li>
+                    </ul>
+                    <div className='appVersion'>
+                        App Version: <b>{packageJsonData.version}</b>
+                    </div>
+                </div>
+            </Drawer>
             <nav>
                 <div className='container'>
-                    {/* Settings icon */}
-                    <Link to={'/settings'}>
-                        <i className={classNames('material-icons', 'pull-right')}>&#xe8b8;</i>
-                    </Link>
-                    {/* Debug icon */}
-                    <Link to={'/debug'}>
+                    <a onClick={toggleDrawer}>
+                        <i className={classNames('material-icons', 'pull-right')}>&#xe5d2;</i>
+                    </a>
+                    {/*<Link to={'/debug'}>
                         <i className={classNames('material-icons', 'pull-right', 'log')}>
                             &#xe868;
                         </i>
-                    </Link>
-                    {/* about icon */}
+                    </Link>*/}
                     <Link to='/about'>
                         <i className={classNames('material-icons', 'pull-left')}>&#xe88e;</i>
                     </Link>
diff --git a/src/renderer/pages/Options.tsx b/src/renderer/pages/Options.tsx
new file mode 100644
index 00000000..7190b465
--- /dev/null
+++ b/src/renderer/pages/Options.tsx
@@ -0,0 +1,111 @@
+import classNames from 'classnames';
+import { useState, useEffect } from 'react';
+import Nav from '../components/Nav';
+import { settings } from '../lib/settings';
+import { defaultSettings } from '../../defaultSettings';
+import Lottie from 'lottie-react';
+import LottieFile from '../../../assets/json/1713988096625.json';
+
+export default function Options() {
+    const [theme, setTheme] = useState<undefined | string>();
+    const [ipData, setIpData] = useState<undefined | boolean>();
+    const [systemTray, setSystemTray] = useState<undefined | boolean>();
+
+    useEffect(() => {
+        settings.get('theme').then((value) => {
+            setTheme(typeof value === 'undefined' ? defaultSettings.theme : value);
+        });
+        settings.get('ipData').then((value) => {
+            setIpData(typeof value === 'undefined' ? defaultSettings.ipData : value);
+        });
+        settings.get('systemTray').then((value) => {
+            setSystemTray(typeof value === 'undefined' ? defaultSettings.systemTray : value);
+        });
+    }, []);
+
+    if (
+        typeof theme === 'undefined' ||
+        typeof systemTray === 'undefined'
+    )
+        return (
+            <>
+                <div className='settings'>
+                    <div className='lottie'>
+                        <Lottie animationData={LottieFile} loop={true} />
+                    </div>
+                </div>
+            </>
+        );
+
+    return (
+        <>
+            <Nav title='تنظیمات برنامه' />
+            <div className={classNames('myApp', 'normalPage')}>
+                <div className='settings'>
+                    <div
+                        className='item'
+                        onClick={() => {
+                            setIpData(!ipData);
+                            settings.set('ipData', !ipData);
+                        }}
+                    >
+                        <label className='key'>بررسی IP</label>
+                        <div className='value'>
+                            <div className={classNames('checkbox', ipData ? 'checked' : '')}>
+                                <i className='material-icons'>&#xe876;</i>
+                            </div>
+                        </div>
+                        <div className='info'>نمایش آی‌پی و لوکیشن پس‌از اتصال</div>
+                    </div>
+                </div>
+                <div className='moreSettings'>
+                    <i className='material-icons'>&#xe313;</i>
+                    سایر تنظیمات
+                </div>
+                <div className='settings'>
+                    <div
+                        className='item'
+                        onClick={() => {
+                            const tmp = theme === 'light' ? 'dark' : 'light';
+                            setTheme(tmp);
+                            settings.set('theme', tmp);
+                            document.documentElement.setAttribute('data-bs-theme', tmp);
+                        }}
+                    >
+                        <label className='key' htmlFor='flexSwitchCheckChecked'>
+                            حالت تیره
+                        </label>
+                        <div className='value'>
+                            <div
+                                className={classNames(
+                                    'checkbox',
+                                    theme === 'dark' ? 'checked' : '',
+                                )}
+                            >
+                                <i className='material-icons'>&#xe876;</i>
+                            </div>
+                        </div>
+                        <div className='info' id='flexSwitchCheckChecked'>
+                            مشخص‌کردن حالت نمایش برنامه
+                        </div>
+                    </div>
+                    <div
+                        className='item'
+                        onClick={() => {
+                            setSystemTray(!systemTray);
+                            settings.set('systemTray', !systemTray);
+                        }}
+                    >
+                        <label className='key'>مخفی‌سازی</label>
+                        <div className='value'>
+                            <div className={classNames('checkbox', systemTray ? 'checked' : '')}>
+                                <i className='material-icons'>&#xe876;</i>
+                            </div>
+                        </div>
+                        <div className='info'>آیکون برنامه در تسک‌بار قرار نگیرد</div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/src/renderer/pages/Routing.tsx b/src/renderer/pages/Routing.tsx
new file mode 100644
index 00000000..b2b1c866
--- /dev/null
+++ b/src/renderer/pages/Routing.tsx
@@ -0,0 +1,74 @@
+import classNames from 'classnames';
+import { useState, useEffect } from 'react';
+import Nav from '../components/Nav';
+import RoutingRulesModal from '../components/Modal/RoutingRules';
+import { settings } from '../lib/settings';
+import Lottie from 'lottie-react';
+import LottieFile from '../../../assets/json/1713988096625.json';
+import { toPersianNumber } from '../lib/toPersianNumber';
+
+export default function Routing() {
+    const [routingRules, setRoutingRules] = useState();
+    const [showRoutingRulesModal, setShowRoutingRulesModal] = useState(false);
+
+    // loading settings
+    useEffect(() => {
+        settings.get('routingRules').then((value) => {
+            setRoutingRules(typeof value === 'undefined' ? "" : value);
+        });
+    }, []);
+
+    const countRoutingRules = (value:any) => {
+        if (value === "") {
+            return 'غیرفعال';
+        }
+        const lines = value.split('\n');
+        return lines?.length > 0 ? toPersianNumber(lines.length)+' مورد' : 'غیرفعال';
+    };
+
+    if (
+        typeof routingRules === 'undefined'
+    )
+        return (
+            <>
+                <div className='settings'>
+                    <div className='lottie'>
+                        <Lottie animationData={LottieFile} loop={true} />
+                    </div>
+                </div>
+            </>
+        );
+
+    return (
+        <>
+            <Nav title='قوانین مسیریابی' />
+            <RoutingRulesModal
+                {...{
+                    routingRules,
+                    setRoutingRules,
+                }}
+                title='لیست سیاه'
+                isOpen={showRoutingRulesModal}
+                onClose={() => {
+                    setShowRoutingRulesModal(false);
+                }}
+            />
+            <div className={classNames('myApp', 'normalPage')}>
+                <div className='settings'>
+                    <div
+                        className='item'
+                        onClick={() => {
+                            setShowRoutingRulesModal(true);
+                        }}
+                    >
+                        <label className='key'>لیست سیاه</label>
+                        <div className='value'>
+                            <span className='dirLeft' dir="rtl">{countRoutingRules(routingRules)}</span>
+                        </div>
+                        <div className='info'>جلوگیری از عبور ترافیک از وارپ</div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/src/renderer/pages/Settings.tsx b/src/renderer/pages/Settings.tsx
index 787b065e..9844f5f8 100644
--- a/src/renderer/pages/Settings.tsx
+++ b/src/renderer/pages/Settings.tsx
@@ -4,12 +4,10 @@ import Nav from '../components/Nav';
 import EndpointModal from '../components/Modal/Endpoint';
 import PortModal from '../components/Modal/Port';
 import LicenseModal from '../components/Modal/License';
-import RoutingRulesModal from '../components/Modal/RoutingRules';
 import { settings } from '../lib/settings';
 import { defaultSettings } from '../../defaultSettings';
 import Lottie from 'lottie-react';
 import LottieFile from '../../../assets/json/1713988096625.json';
-import { toPersianNumber } from '../lib/toPersianNumber';
 
 export default function Settings() {
     const [endpoint, setEndpoint] = useState();
@@ -21,11 +19,6 @@ export default function Settings() {
     const [license, setLicense] = useState();
     const [showLicenseModal, setShowLicenseModal] = useState(false);
     const [gool, setGool] = useState<undefined | boolean>();
-    const [routingRules, setRoutingRules] = useState();
-    const [showRoutingRulesModal, setShowRoutingRulesModal] = useState(false);
-    const [theme, setTheme] = useState<undefined | string>();
-    const [ipData, setIpData] = useState<undefined | boolean>();
-    const [systemTray, setSystemTray] = useState<undefined | boolean>();
 
     // loading settings
     useEffect(() => {
@@ -48,34 +41,12 @@ export default function Settings() {
             console.log('🚀 - settings.get - value:', typeof value === 'undefined');
             setGool(typeof value === 'undefined' ? defaultSettings.gool : value);
         });
-        settings.get('routingRules').then((value) => {
-            setRoutingRules(typeof value === 'undefined' ? "" : value);
-        });
-        settings.get('theme').then((value) => {
-            setTheme(typeof value === 'undefined' ? defaultSettings.theme : value);
-        });
-        settings.get('ipData').then((value) => {
-            setIpData(typeof value === 'undefined' ? defaultSettings.ipData : value);
-        });
-        settings.get('systemTray').then((value) => {
-            setSystemTray(typeof value === 'undefined' ? defaultSettings.systemTray : value);
-        });
     }, []);
 
-    const countRoutingRules = (value:any) => {
-        if (value === "") {
-            return 'غیرفعال';
-        }
-        const lines = value.split('\n');
-        return lines?.length > 0 ? toPersianNumber(lines.length)+' قانون' : 'غیرفعال';
-    };
-
     if (
         typeof psiphon === 'undefined' ||
         typeof location === 'undefined' ||
-        typeof gool === 'undefined' ||
-        typeof theme === 'undefined' ||
-        typeof systemTray === 'undefined'
+        typeof gool === 'undefined'
     )
         return (
             <>
@@ -89,7 +60,7 @@ export default function Settings() {
 
     return (
         <>
-            <Nav title='تنظیمات' />
+            <Nav title='تنظیمات پروکسی' />
             <EndpointModal
                 {...{
                     endpoint,
@@ -123,17 +94,6 @@ export default function Settings() {
                     setShowLicenseModal(false);
                 }}
             />
-            <RoutingRulesModal
-                {...{
-                    routingRules,
-                    setRoutingRules,
-                }}
-                title='قوانین مسیریابی'
-                isOpen={showRoutingRulesModal}
-                onClose={() => {
-                    setShowRoutingRulesModal(false);
-                }}
-            />
             <div className={classNames('myApp', 'normalPage')}>
                 <div className='settings'>
                     <div
@@ -262,82 +222,8 @@ export default function Settings() {
                         </div>
                         <div className='info'>فعالسازی Warp In Warp</div>
                     </div>
-                    <div
-                        className='item'
-                        onClick={() => {
-                            setShowRoutingRulesModal(true);
-                        }}
-                    >
-                        <label className='key'>لیست سیاه</label>
-                        <div className='value'>
-                            <span className='dirLeft' dir="rtl">{countRoutingRules(routingRules)}</span>
-                        </div>
-                        <div className='info'>جلوگیری از عبور ترافیک از وارپ</div>
-                    </div>
-                </div>
-                <div className='moreSettings'>
-                    <i className='material-icons'>&#xe313;</i>
-                    سایر تنظیمات
-                </div>
-                <div className='settings'>
-                    <div
-                        className='item'
-                        onClick={() => {
-                            const tmp = theme === 'light' ? 'dark' : 'light';
-                            setTheme(tmp);
-                            settings.set('theme', tmp);
-                            document.documentElement.setAttribute('data-bs-theme', tmp);
-                        }}
-                    >
-                        <label className='key' htmlFor='flexSwitchCheckChecked'>
-                            حالت تیره
-                        </label>
-                        <div className='value'>
-                            <div
-                                className={classNames(
-                                    'checkbox',
-                                    theme === 'dark' ? 'checked' : '',
-                                )}
-                            >
-                                <i className='material-icons'>&#xe876;</i>
-                            </div>
-                        </div>
-                        <div className='info' id='flexSwitchCheckChecked'>
-                            مشخص‌کردن حالت نمایش برنامه
-                        </div>
-                    </div>
-                    <div
-                        className='item'
-                        onClick={() => {
-                            setIpData(!ipData);
-                            settings.set('ipData', !ipData);
-                        }}
-                    >
-                        <label className='key'>بررسی IP</label>
-                        <div className='value'>
-                            <div className={classNames('checkbox', ipData ? 'checked' : '')}>
-                                <i className='material-icons'>&#xe876;</i>
-                            </div>
-                        </div>
-                        <div className='info'>نمایش آی‌پی و لوکیشن پس‌از اتصال</div>
-                    </div>
-                    <div
-                        className='item'
-                        onClick={() => {
-                            setSystemTray(!systemTray);
-                            settings.set('systemTray', !systemTray);
-                        }}
-                    >
-                        <label className='key'>مخفی‌سازی</label>
-                        <div className='value'>
-                            <div className={classNames('checkbox', systemTray ? 'checked' : '')}>
-                                <i className='material-icons'>&#xe876;</i>
-                            </div>
-                        </div>
-                        <div className='info'>آیکون برنامه در تسک‌بار قرار نگیرد</div>
-                    </div>
                 </div>
             </div>
         </>
     );
-}
+}
\ No newline at end of file