diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index d74a4db..dff9064 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -51,11 +51,8 @@ const App: React.FC = () => {
             />
           </div>
         </div>
-
-        <div className="m-2">
+        <div className="grid grid-cols-2 gap-2 mx-2">
           <OutboundModeSwitcher />
-        </div>
-        {/* <div className="grid">
           <SysproxySwitcher />
           <TunSwitcher />
           <ProfileCard />
@@ -66,10 +63,10 @@ const App: React.FC = () => {
           <SniffCard />
           <LogCard />
           <RuleCard />
-          <TestCard />
+          <ResourceCard />
           <OverrideCard />
-        </div> */}
-        <div className="flex justify-between mx-2 mb-2">
+        </div>
+        {/* <div className="flex justify-between mx-2 mb-2">
           <SysproxySwitcher />
           <TunSwitcher />
         </div>
@@ -91,7 +88,7 @@ const App: React.FC = () => {
         <div className="flex justify-between mx-2">
           <ResourceCard />
           <OverrideCard />
-        </div>
+        </div> */}
       </div>
       <Divider orientation="vertical" />
       <div className="main w-[calc(100%-251px)] h-full overflow-y-auto">{page}</div>
diff --git a/src/renderer/src/components/sider/conn-card.tsx b/src/renderer/src/components/sider/conn-card.tsx
index dd02dd3..498b1ca 100644
--- a/src/renderer/src/components/sider/conn-card.tsx
+++ b/src/renderer/src/components/sider/conn-card.tsx
@@ -26,7 +26,7 @@ const ConnCard: React.FC = () => {
   return (
     <Card
       fullWidth
-      className={`mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-2 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/connections')}
     >
diff --git a/src/renderer/src/components/sider/dns-card.tsx b/src/renderer/src/components/sider/dns-card.tsx
index c5e08d8..0de9e8a 100644
--- a/src/renderer/src/components/sider/dns-card.tsx
+++ b/src/renderer/src/components/sider/dns-card.tsx
@@ -20,7 +20,7 @@ const DNSCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] mr-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/dns')}
     >
diff --git a/src/renderer/src/components/sider/log-card.tsx b/src/renderer/src/components/sider/log-card.tsx
index c3261be..edb8a28 100644
--- a/src/renderer/src/components/sider/log-card.tsx
+++ b/src/renderer/src/components/sider/log-card.tsx
@@ -8,7 +8,7 @@ const LogCard: React.FC = () => {
   const match = location.pathname.includes('/logs')
   return (
     <Card
-      className={`w-[50%] mr-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/logs')}
     >
diff --git a/src/renderer/src/components/sider/mihomo-core-card.tsx b/src/renderer/src/components/sider/mihomo-core-card.tsx
index bff2cef..d2e4e30 100644
--- a/src/renderer/src/components/sider/mihomo-core-card.tsx
+++ b/src/renderer/src/components/sider/mihomo-core-card.tsx
@@ -35,7 +35,7 @@ const MihomoCoreCard: React.FC = () => {
       fullWidth
       isPressable
       onPress={() => navigate('/mihomo')}
-      className={`mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-2 ${match ? 'bg-primary' : ''}`}
     >
       <CardBody>
         <div className="flex justify-between h-[32px]">
diff --git a/src/renderer/src/components/sider/outbound-mode-switcher.tsx b/src/renderer/src/components/sider/outbound-mode-switcher.tsx
index 42b4ac7..b70bfc3 100644
--- a/src/renderer/src/components/sider/outbound-mode-switcher.tsx
+++ b/src/renderer/src/components/sider/outbound-mode-switcher.tsx
@@ -22,6 +22,7 @@ const OutboundModeSwitcher: React.FC = () => {
     <Tabs
       fullWidth
       color="primary"
+      className="col-span-2"
       selectedKey={mode}
       onSelectionChange={(key: Key) => onChangeMode(key as OutboundMode)}
     >
diff --git a/src/renderer/src/components/sider/override-card.tsx b/src/renderer/src/components/sider/override-card.tsx
index 220b62c..9a91e17 100644
--- a/src/renderer/src/components/sider/override-card.tsx
+++ b/src/renderer/src/components/sider/override-card.tsx
@@ -12,7 +12,7 @@ const OverrideCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] ml-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/override')}
     >
diff --git a/src/renderer/src/components/sider/profile-card.tsx b/src/renderer/src/components/sider/profile-card.tsx
index b10b861..9222d0b 100644
--- a/src/renderer/src/components/sider/profile-card.tsx
+++ b/src/renderer/src/components/sider/profile-card.tsx
@@ -36,7 +36,7 @@ const ProfileCard: React.FC = () => {
       {showRuntimeConfig && <ConfigViewer onClose={() => setShowRuntimeConfig(false)} />}
       <Card
         fullWidth
-        className={`mb-2 ${match ? 'bg-primary' : ''}`}
+        className={`col-span-2 ${match ? 'bg-primary' : ''}`}
         isPressable
         onPress={() => navigate('/profiles')}
       >
diff --git a/src/renderer/src/components/sider/proxy-card.tsx b/src/renderer/src/components/sider/proxy-card.tsx
index 7ddd53c..ec6b7ff 100644
--- a/src/renderer/src/components/sider/proxy-card.tsx
+++ b/src/renderer/src/components/sider/proxy-card.tsx
@@ -18,7 +18,7 @@ const ProxyCard: React.FC = () => {
   return (
     <Card
       fullWidth
-      className={`mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-2 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/proxies')}
     >
diff --git a/src/renderer/src/components/sider/resource-card.tsx b/src/renderer/src/components/sider/resource-card.tsx
index e1f4f4a..9e173cf 100644
--- a/src/renderer/src/components/sider/resource-card.tsx
+++ b/src/renderer/src/components/sider/resource-card.tsx
@@ -10,7 +10,7 @@ const ResourceCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] mr-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/resources')}
     >
diff --git a/src/renderer/src/components/sider/rule-card.tsx b/src/renderer/src/components/sider/rule-card.tsx
index 335bd93..a3dd5b8 100644
--- a/src/renderer/src/components/sider/rule-card.tsx
+++ b/src/renderer/src/components/sider/rule-card.tsx
@@ -14,7 +14,7 @@ const RuleCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] ml-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/rules')}
     >
diff --git a/src/renderer/src/components/sider/sniff-card.tsx b/src/renderer/src/components/sider/sniff-card.tsx
index 896b9fd..924b06b 100644
--- a/src/renderer/src/components/sider/sniff-card.tsx
+++ b/src/renderer/src/components/sider/sniff-card.tsx
@@ -20,7 +20,7 @@ const SniffCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] ml-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/sniffer')}
     >
diff --git a/src/renderer/src/components/sider/sysproxy-switcher.tsx b/src/renderer/src/components/sider/sysproxy-switcher.tsx
index 0d5b28a..1d64b3b 100644
--- a/src/renderer/src/components/sider/sysproxy-switcher.tsx
+++ b/src/renderer/src/components/sider/sysproxy-switcher.tsx
@@ -25,7 +25,7 @@ const SysproxySwitcher: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] mr-1 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/sysproxy')}
     >
diff --git a/src/renderer/src/components/sider/tun-switcher.tsx b/src/renderer/src/components/sider/tun-switcher.tsx
index 8f5b146..7c599e1 100644
--- a/src/renderer/src/components/sider/tun-switcher.tsx
+++ b/src/renderer/src/components/sider/tun-switcher.tsx
@@ -52,7 +52,7 @@ const TunSwitcher: React.FC = () => {
         />
       )}
       <Card
-        className={`w-[50%] ml-1 ${match ? 'bg-primary' : ''}`}
+        className={`col-span-1 ${match ? 'bg-primary' : ''}`}
         isPressable
         onPress={() => navigate('/tun')}
       >