diff --git a/ui/src/components/certimate/AccessEdit.tsx b/ui/src/components/certimate/AccessEdit.tsx
index 736e720b..8f740695 100644
--- a/ui/src/components/certimate/AccessEdit.tsx
+++ b/ui/src/components/certimate/AccessEdit.tsx
@@ -5,6 +5,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 import { useState } from "react";
 
@@ -136,44 +137,46 @@ export function AccessEdit({
         <DialogHeader>
           <DialogTitle>{op == "add" ? "添加" : "编辑"}授权</DialogTitle>
         </DialogHeader>
-        <div className="container">
-          <Label>服务商</Label>
+        <ScrollArea className="max-h-[80vh]">
+          <div className="container">
+            <Label>服务商</Label>
 
-          <Select
-            onValueChange={(val) => {
-              console.log(val);
-              setConfigType(val);
-            }}
-            defaultValue={configType}
-          >
-            <SelectTrigger className="mt-3">
-              <SelectValue placeholder="请选择服务商" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>服务商</SelectLabel>
-                {typeKeys.map((key) => (
-                  <SelectItem value={key} key={key}>
-                    <div
-                      className={cn(
-                        "flex items-center space-x-2 rounded cursor-pointer",
-                        getOptionCls(key)
-                      )}
-                    >
-                      <img
-                        src={accessTypeMap.get(key)?.[1]}
-                        className="h-6 w-6"
-                      />
-                      <div>{accessTypeMap.get(key)?.[0]}</div>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
+            <Select
+              onValueChange={(val) => {
+                console.log(val);
+                setConfigType(val);
+              }}
+              defaultValue={configType}
+            >
+              <SelectTrigger className="mt-3">
+                <SelectValue placeholder="请选择服务商" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>服务商</SelectLabel>
+                  {typeKeys.map((key) => (
+                    <SelectItem value={key} key={key}>
+                      <div
+                        className={cn(
+                          "flex items-center space-x-2 rounded cursor-pointer",
+                          getOptionCls(key)
+                        )}
+                      >
+                        <img
+                          src={accessTypeMap.get(key)?.[1]}
+                          className="h-6 w-6"
+                        />
+                        <div>{accessTypeMap.get(key)?.[0]}</div>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
 
-          {form}
-        </div>
+            {form}
+          </div>
+        </ScrollArea>
       </DialogContent>
     </Dialog>
   );
diff --git a/ui/src/pages/dashboard/Dashboard.tsx b/ui/src/pages/dashboard/Dashboard.tsx
index 558083ea..7d9e10f3 100644
--- a/ui/src/pages/dashboard/Dashboard.tsx
+++ b/ui/src/pages/dashboard/Dashboard.tsx
@@ -58,8 +58,8 @@ const Dashboard = () => {
       <div className="flex justify-between items-center">
         <div className="text-muted-foreground">控制面板</div>
       </div>
-      <div className="flex mt-10 gap-5 flex-col md:flex-row">
-        <div className="w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
+      <div className="flex mt-10 gap-5 flex-col flex-wrap md:flex-row">
+        <div className="w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
           <div className="p-3">
             <SquareSigma size={48} strokeWidth={1} className="text-blue-400" />
           </div>
@@ -80,7 +80,7 @@ const Dashboard = () => {
           </div>
         </div>
 
-        <div className="w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
+        <div className="w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
           <div className="p-3">
             <CalendarX2 size={48} strokeWidth={1} className="text-red-400" />
           </div>
@@ -101,7 +101,7 @@ const Dashboard = () => {
           </div>
         </div>
 
-        <div className="border w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg">
+        <div className="border w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg">
           <div className="p-3">
             <LoaderPinwheel
               size={48}
@@ -126,7 +126,7 @@ const Dashboard = () => {
           </div>
         </div>
 
-        <div className="border w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg">
+        <div className="border w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg">
           <div className="p-3">
             <Ban size={48} strokeWidth={1} className="text-gray-400" />
           </div>
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 7cb7e37a..c410195b 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
       padding: "2rem",
       screens: {
         "2xl": "1400px",
+        '3xl': '1920px',
       },
     },
     extend: {