diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 8cecc87..8709a28 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -63,104 +63,30 @@ export default () => {
 
   return (
     <div class="flex flex-col gap-2">
-      <div>
-        <h1 class="pb-4 text-lg font-semibold">{t('proxies')}</h1>
-
-        <ForTwoLine
-          subChild={proxies().map((proxy) => {
-            const title = (
-              <>
-                <div class="mr-10 flex items-center justify-between">
-                  <span>{proxy.name}</span>
-                  <button
-                    class="btn btn-circle btn-sm"
-                    onClick={(e) => onSpeedTestClick(e, proxy.name)}
-                  >
-                    <IconBrandSpeedtest />
-                  </button>
-                </div>
-                <div class="text-sm text-slate-500">
-                  {proxy.type} :: {proxy.now}
-                </div>
-                <Show when={!collapsedMap()[`group-${proxy.name}`]}>
-                  <ProxyNodePreview
-                    proxyNameList={proxy.all ?? []}
-                    now={proxy.now}
-                  />
-                </Show>
-              </>
-            )
-
-            const content = (
-              <ProxyCardGroups
-                proxies={proxy.all!}
-                now={proxy.now}
-                onClick={(name) => {
-                  onProxyNodeClick(proxy, name)
-                }}
-              />
-            )
-
-            return (
-              <Collapse
-                isOpen={collapsedMap()[`group-${proxy.name}`]}
-                title={title}
-                content={content}
-                onCollapse={(val) =>
-                  setCollapsedMap({
-                    ...collapsedMap(),
-                    [`group-${proxy.name}`]: val,
-                  })
-                }
-              />
-            )
-          })}
-        />
-      </div>
-
-      <Show when={proxyProviders().length > 0}>
-        <div>
-          <h1 class="pb-4 text-lg font-semibold">{t('proxyProviders')}</h1>
-
+      <div class="collapse collapse-arrow">
+        <input type="checkbox" checked />
+        <h1 class="collapse-title p-2 text-lg font-semibold">{t('proxies')}</h1>
+        <div class="collapse-content p-0">
           <ForTwoLine
-            subChild={proxyProviders().map((proxyProvider) => {
+            subChild={proxies().map((proxy) => {
               const title = (
                 <>
                   <div class="mr-10 flex items-center justify-between">
-                    <span>{proxyProvider.name}</span>
-                    <div>
-                      <button
-                        class="btn btn-circle btn-sm mr-2"
-                        onClick={(e) =>
-                          onUpdateProviderClick(e, proxyProvider.name)
-                        }
-                      >
-                        <IconReload />
-                      </button>
-                      <button
-                        class="btn btn-circle btn-sm"
-                        onClick={(e) =>
-                          onHealthCheckClick(e, proxyProvider.name)
-                        }
-                      >
-                        <IconBrandSpeedtest />
-                      </button>
-                    </div>
+                    <span>{proxy.name}</span>
+                    <button
+                      class="btn btn-circle btn-sm"
+                      onClick={(e) => onSpeedTestClick(e, proxy.name)}
+                    >
+                      <IconBrandSpeedtest />
+                    </button>
                   </div>
-                  <SubscriptionInfo
-                    subscriptionInfo={proxyProvider.subscriptionInfo}
-                  />
                   <div class="text-sm text-slate-500">
-                    {proxyProvider.vehicleType} :: Updated{' '}
-                    {formatTimeFromNow(proxyProvider.updatedAt)}
+                    {proxy.type} :: {proxy.now}
                   </div>
-                  <Show
-                    when={!collapsedMap()[`provider-${proxyProvider.name}`]}
-                  >
+                  <Show when={!collapsedMap()[`group-${proxy.name}`]}>
                     <ProxyNodePreview
-                      proxyNameList={
-                        proxyProvider.proxies.map((i) => i.name) ?? []
-                      }
+                      proxyNameList={proxy.all ?? []}
+                      now={proxy.now}
                     />
                   </Show>
                 </>
@@ -168,19 +94,23 @@ export default () => {
 
               const content = (
                 <ProxyCardGroups
-                  proxies={proxyProvider.proxies.map((i) => i.name)}
+                  proxies={proxy.all!}
+                  now={proxy.now}
+                  onClick={(name) => {
+                    onProxyNodeClick(proxy, name)
+                  }}
                 />
               )
 
               return (
                 <Collapse
-                  isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
+                  isOpen={collapsedMap()[`group-${proxy.name}`]}
                   title={title}
                   content={content}
                   onCollapse={(val) =>
                     setCollapsedMap({
                       ...collapsedMap(),
-                      [`provider-${proxyProvider.name}`]: val,
+                      [`group-${proxy.name}`]: val,
                     })
                   }
                 />
@@ -188,6 +118,82 @@ export default () => {
             })}
           />
         </div>
+      </div>
+
+      <Show when={proxyProviders().length > 0}>
+        <div class="collapse-arrow collapse">
+          <input type="checkbox" checked />
+          <h1 class="collapse-title p-2 text-lg font-semibold">
+            {t('proxyProviders')}
+          </h1>
+          <div class="collapse-content p-0">
+            <ForTwoLine
+              subChild={proxyProviders().map((proxyProvider) => {
+                const title = (
+                  <>
+                    <div class="mr-10 flex items-center justify-between">
+                      <span>{proxyProvider.name}</span>
+                      <div>
+                        <button
+                          class="btn btn-circle btn-sm mr-2"
+                          onClick={(e) =>
+                            onUpdateProviderClick(e, proxyProvider.name)
+                          }
+                        >
+                          <IconReload />
+                        </button>
+                        <button
+                          class="btn btn-circle btn-sm"
+                          onClick={(e) =>
+                            onHealthCheckClick(e, proxyProvider.name)
+                          }
+                        >
+                          <IconBrandSpeedtest />
+                        </button>
+                      </div>
+                    </div>
+                    <SubscriptionInfo
+                      subscriptionInfo={proxyProvider.subscriptionInfo}
+                    />
+                    <div class="text-sm text-slate-500">
+                      {proxyProvider.vehicleType} :: Updated{' '}
+                      {formatTimeFromNow(proxyProvider.updatedAt)}
+                    </div>
+                    <Show
+                      when={!collapsedMap()[`provider-${proxyProvider.name}`]}
+                    >
+                      <ProxyNodePreview
+                        proxyNameList={
+                          proxyProvider.proxies.map((i) => i.name) ?? []
+                        }
+                      />
+                    </Show>
+                  </>
+                )
+
+                const content = (
+                  <ProxyCardGroups
+                    proxies={proxyProvider.proxies.map((i) => i.name)}
+                  />
+                )
+
+                return (
+                  <Collapse
+                    isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
+                    title={title}
+                    content={content}
+                    onCollapse={(val) =>
+                      setCollapsedMap({
+                        ...collapsedMap(),
+                        [`provider-${proxyProvider.name}`]: val,
+                      })
+                    }
+                  />
+                )
+              })}
+            />
+          </div>
+        </div>
       </Show>
     </div>
   )