diff --git a/package-lock.json b/package-lock.json
index 844e7aa..d4f85e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,10 +13,12 @@
         "@radix-ui/react-checkbox": "^1.1.2",
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-scroll-area": "^1.2.1",
         "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-slider": "^1.2.1",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-switch": "^1.1.1",
+        "@radix-ui/react-visually-hidden": "^1.1.1",
         "@tauri-apps/api": "^2.1.1",
         "@tauri-apps/plugin-dialog": "^2.0.1",
         "@tauri-apps/plugin-store": "^2.1.0",
@@ -1507,6 +1509,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.1.tgz",
+      "integrity": "sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.2.tgz",
@@ -1550,6 +1583,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slider": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.1.tgz",
@@ -1748,12 +1804,50 @@
       }
     },
     "node_modules/@radix-ui/react-visually-hidden": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
-      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.1.tgz",
+      "integrity": "sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0"
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1770,6 +1864,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
diff --git a/package.json b/package.json
index c548397..6e438ee 100644
--- a/package.json
+++ b/package.json
@@ -33,10 +33,12 @@
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-visually-hidden": "^1.1.1",
     "@tauri-apps/api": "^2.1.1",
     "@tauri-apps/plugin-dialog": "^2.0.1",
     "@tauri-apps/plugin-store": "^2.1.0",
diff --git a/src/components/charts/DoughnutChart.tsx b/src/components/charts/DoughnutChart.tsx
index 7b30e5f..330f141 100644
--- a/src/components/charts/DoughnutChart.tsx
+++ b/src/components/charts/DoughnutChart.tsx
@@ -1,94 +1,125 @@
 import { useSettingsAtom } from "@/atom/useSettingsAtom";
-import { displayHardType } from "@/consts/chart";
-import type { ChartDataType, HardwareDataType } from "@/types/hardwareDataType";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { HardwareDataType } from "@/types/hardwareDataType";
 import { Lightning, Speedometer, Thermometer } from "@phosphor-icons/react";
-import {
-  ArcElement,
-  Chart as ChartJS,
-  type ChartOptions,
-  Legend,
-  Tooltip,
-} from "chart.js";
-import { Doughnut } from "react-chartjs-2";
 import { useTranslation } from "react-i18next";
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts";
 
-ChartJS.register(ArcElement, Tooltip, Legend);
-
-const DoughnutChart = ({
-  chartData,
-  hardType,
+export const DoughnutChart = ({
+  chartValue,
   dataType,
-  showTitle,
 }: {
-  chartData: number;
-  hardType: ChartDataType;
+  chartValue: number;
   dataType: HardwareDataType;
-  showTitle: boolean;
 }) => {
-  const { settings } = useSettingsAtom();
-
   const { t } = useTranslation();
+  const { settings } = useSettingsAtom();
 
-  const displayDataType: Record<HardwareDataType, string> = {
-    usage: t("shared.usage"),
-    temp: t("shared.temperature"),
-    clock: t("shared.clock"),
-  };
-
-  const data = {
-    datasets: [
-      {
-        data: [chartData, 100 - chartData],
-        backgroundColor: {
-          light: ["#374151", "#f3f4f6"],
-          dark: ["#888", "#222"],
-        }[settings.theme],
-        borderWidth: 0,
-      },
-    ],
-  };
-
-  const options: ChartOptions<"doughnut"> = {
-    cutout: "85%",
-    plugins: {
-      tooltip: { enabled: false },
+  const chartConfig: Record<
+    HardwareDataType,
+    { label: string; color: string }
+  > = {
+    usage: {
+      label: t("shared.usage"),
+      color: "hsl(var(--chart-2))",
     },
-  };
+    temp: {
+      label: t("shared.temperature"),
+      color: "hsl(var(--chart-3))",
+    },
+    clock: {
+      label: t("shared.clock"),
+      color: "hsl(var(--chart-4))",
+    },
+  } satisfies ChartConfig;
+
+  const chartData = [
+    { type: dataType, value: chartValue, fill: `var(--color-${dataType})` },
+  ];
 
   const dataTypeIcons: Record<HardwareDataType, JSX.Element> = {
-    usage: <Lightning className="mr-1" size={18} weight="duotone" />,
-    temp: <Thermometer className="mr-1" size={18} weight="duotone" />,
-    clock: <Speedometer className="mr-1" size={18} weight="duotone" />,
+    usage: <Lightning className="mr-1" size={12} weight="duotone" />,
+    temp: <Thermometer className="mr-1" size={12} weight="duotone" />,
+    clock: <Speedometer className="mr-1" size={12} weight="duotone" />,
   };
 
   const dataTypeUnits: Record<HardwareDataType, string> = {
     usage: "%",
-    temp: "℃",
+    temp: "°C",
     clock: "MHz",
   };
 
   return (
-    <div className="p-2 w-36 relative">
-      <h3 className="text-lg font-bold">
-        {
-          showTitle
-            ? displayHardType[hardType]
-            : "　" /** [TODO] タイトルはコンポーネント外のほうが使いやすそう */
-        }
-      </h3>
-      <Doughnut data={data} options={options} />
-      <div className="absolute inset-0 flex flex-col items-center justify-center">
-        <span className="text-slate-800 dark:text-white text-xl font-semibold">
-          {chartData}
-          {dataTypeUnits[dataType]}
-        </span>
-      </div>
-      <span className="flex justify-center mt-4 text-gray-800 dark:text-gray-400">
-        {dataTypeIcons[dataType]}
-        {displayDataType[dataType]}
-      </span>
-    </div>
+    <ChartContainer
+      config={chartConfig}
+      className="aspect-square max-h-[200px]"
+    >
+      {chartData[0].value != null ? (
+        <RadialBarChart
+          data={chartData}
+          startAngle={0}
+          endAngle={chartValue * 3.6}
+          innerRadius={50}
+          outerRadius={70}
+        >
+          <PolarGrid
+            gridType="circle"
+            radialLines={false}
+            stroke="none"
+            className="first:fill-zinc-300 dark:first:fill-muted  last:fill-zinc-200 last:dark:fill-gray-900"
+            style={{
+              opacity: (1 - settings.backgroundImgOpacity / 100) ** 2,
+            }}
+            polarRadius={[70, 60]}
+          />
+          <RadialBar dataKey="value" background cornerRadius={10} />
+          <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+            <Label
+              content={({ viewBox }) => {
+                if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                  return (
+                    <g>
+                      {/* メインの値表示 */}
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                        className="fill-foreground text-2xl font-bold"
+                      >
+                        {`${chartValue}${dataTypeUnits[dataType]}`}
+                      </text>
+                      {/* ラベルとアイコンの表示 */}
+                      <foreignObject
+                        x={(viewBox.cx || 0) - 42}
+                        y={(viewBox.cy || 0) + 20}
+                        width="80"
+                        height="40"
+                      >
+                        <div className="flex items-center justify-center dark:text-muted-foreground ">
+                          {dataTypeIcons[dataType]}
+                          <span>{chartConfig[dataType].label}</span>
+                        </div>
+                      </foreignObject>
+                    </g>
+                  );
+                }
+              }}
+            />
+          </PolarRadiusAxis>
+        </RadialBarChart>
+      ) : (
+        <div className="flex items-center justify-center h-full">
+          <Skeleton className="w-32 h-32 rounded-full" />
+        </div>
+      )}
+    </ChartContainer>
   );
 };
-
-export default DoughnutChart;
diff --git a/src/components/charts/ProcessTable.tsx b/src/components/charts/ProcessTable.tsx
index 384561b..fb86c45 100644
--- a/src/components/charts/ProcessTable.tsx
+++ b/src/components/charts/ProcessTable.tsx
@@ -1,25 +1,36 @@
+import { useSettingsAtom } from "@/atom/useSettingsAtom";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { useTauriDialog } from "@/hooks/useTauriDialog";
 import { type ProcessInfo, commands } from "@/rspc/bindings";
-import { CaretDown } from "@phosphor-icons/react";
+import { ArrowsOut, CaretDown, CaretUp } from "@phosphor-icons/react";
+import { DialogDescription } from "@radix-ui/react-dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { atom, useAtom, useSetAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { twMerge } from "tailwind-merge";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area";
 
 const processesAtom = atom<ProcessInfo[]>([]);
 
-const ProcessesTable = ({
-  defaultItemLength,
-}: { defaultItemLength: number }) => {
+export const ProcessesTable = () => {
   const { t } = useTranslation();
+  const { settings } = useSettingsAtom();
   const { error } = useTauriDialog();
   const [processes] = useAtom(processesAtom);
   const setAtom = useSetAtom(processesAtom);
-  const [showAllItem, setShowAllItem] = useState<boolean>(false);
   const [sortConfig, setSortConfig] = useState<{
     key: keyof ProcessInfo;
     direction: "ascending" | "descending";
   } | null>(null);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     const fetchProcesses = async () => {
       try {
@@ -36,7 +47,7 @@ const ProcessesTable = ({
     const interval = setInterval(fetchProcesses, 3000);
 
     return () => clearInterval(interval);
-  }, [setAtom, error]);
+  }, []);
 
   const sortedProcesses = [...processes];
   if (sortConfig !== null) {
@@ -87,67 +98,141 @@ const ProcessesTable = ({
   };
 
   return (
-    <div className="p-4 border rounded-md shadow-md bg-zinc-300 dark:bg-gray-800 dark:text-whit">
-      <h4 className="text-xl font-bold mb-2">{t("shared.process")}</h4>
-      <div className="overflow-x-auto">
-        <table className="w-full text-left">
-          <thead>
-            <tr className="border-b border-gray-700">
-              <th
-                className="pr-4 py-2 dark:text-gray-400 cursor-pointer"
-                onClick={() => requestSort("pid")}
-                onKeyDown={() => requestSort("pid")}
-              >
-                PID
-              </th>
-              <th
-                className="pr-4 py-2 dark:text-gray-400 cursor-pointer"
-                onClick={() => requestSort("name")}
-                onKeyDown={() => requestSort("name")}
-              >
-                {t("shared.name")}
-              </th>
-              <th
-                className="pr-4 py-2 dark:text-gray-400 cursor-pointer"
-                onClick={() => requestSort("cpuUsage")}
-                onKeyDown={() => requestSort("cpuUsage")}
-              >
-                {t("shared.cpuUsage")}
-              </th>
-              <th
-                className="pr-4 py-2 dark:text-gray-400 cursor-pointer"
-                onClick={() => requestSort("memoryUsage")}
-                onKeyDown={() => requestSort("memoryUsage")}
-              >
-                {t("shared.memoryUsage")}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {sortedProcesses
-              .slice(0, showAllItem ? processes.length : defaultItemLength)
-              .map((process) => (
-                <tr key={process.pid} className="border-b border-gray-700">
-                  <td className="py-2">{process.pid}</td>
-                  <td className="py-2">{process.name}</td>
-                  <td className="py-2">{process.cpuUsage}%</td>
-                  <td className="py-2">{process.memoryUsage} MB</td>
-                </tr>
-              ))}
-          </tbody>
-        </table>
-        {!showAllItem && (
-          <button
-            type="button"
-            onClick={() => setShowAllItem(true)}
-            className="w-full flex justify-center items-center py-2 dark:text-gray-400 hover:text-zinc-600 dark:hover:text-white focus:outline-none mt--4"
-          >
-            <CaretDown size={32} />
-          </button>
-        )}
-      </div>
+    <div
+      className="p-4 border rounded-md shadow-md bg-zinc-300 dark:bg-gray-800 dark:text-whit"
+      style={{
+        opacity: (1 - settings.backgroundImgOpacity / 100) ** 2,
+      }}
+    >
+      <Dialog>
+        <div className="flex">
+          <h4 className="text-xl font-bold mb-2">{t("shared.process")}</h4>
+          <div className="ml-auto">
+            <DialogTrigger
+              type="button"
+              className="w-full flex justify-center items-center  dark:text-gray-400 hover:text-zinc-600 dark:hover:text-white focus:outline-none"
+            >
+              <ArrowsOut size={28} />
+            </DialogTrigger>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <InfoTable
+            className="h-64"
+            processes={sortedProcesses}
+            sortConfig={sortConfig}
+            requestSort={requestSort}
+          />
+        </div>
+
+        <DialogContent className="p-4 2xl:max-w-[800px] m-8 border rounded-md shadow-md bg-zinc-300 dark:bg-gray-800 dark:text-white">
+          <DialogHeader>
+            <DialogTitle>{t("shared.process")}</DialogTitle>
+            <DialogDescription>
+              <VisuallyHidden>Expand the process as a list</VisuallyHidden>
+            </DialogDescription>
+          </DialogHeader>
+          <InfoTable
+            className="max-h-[400px] xl:max-h-[600px] 2xl:max-h-[800px]"
+            processes={sortedProcesses}
+            sortConfig={sortConfig}
+            requestSort={requestSort}
+          />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };
 
-export default ProcessesTable;
+const InfoTable = ({
+  processes,
+  sortConfig,
+  requestSort,
+  className,
+}: {
+  processes: ProcessInfo[];
+  requestSort: (key: keyof ProcessInfo) => void;
+  sortConfig: {
+    key: keyof ProcessInfo;
+    direction: "ascending" | "descending";
+  } | null;
+  className: string;
+}) => {
+  const { t } = useTranslation();
+
+  const sortIcon: Record<"ascending" | "descending", JSX.Element> = {
+    ascending: <CaretUp className="ml-1" size={18} />,
+    descending: <CaretDown className="ml-1" size={18} />,
+  };
+
+  return (
+    <ScrollArea className={twMerge("w-full overflow-auto", className)}>
+      <table className="w-full text-left">
+        <thead className="sticky h-14 top-[-1px] bg-zinc-300 dark:bg-gray-800">
+          <tr className="border-b border-gray-700">
+            <th
+              className="pr-4 py-2 dark:text-gray-400 cursor-pointer"
+              onClick={() => requestSort("pid")}
+              onKeyDown={() => requestSort("pid")}
+            >
+              <div className="flex items-center">
+                <span>PID</span>
+                {sortConfig &&
+                  sortConfig.key === "pid" &&
+                  sortIcon[sortConfig.direction]}
+              </div>
+            </th>
+            <th
+              className="pr-4 py-2 dark:text-gray-400 cursor-pointer"
+              onClick={() => requestSort("name")}
+              onKeyDown={() => requestSort("name")}
+            >
+              <div className="flex items-center">
+                <span>{t("shared.name")}</span>
+                {sortConfig &&
+                  sortConfig.key === "name" &&
+                  sortIcon[sortConfig.direction]}
+              </div>
+            </th>
+            <th
+              className="pr-4 py-2 dark:text-gray-400 cursor-pointer"
+              onClick={() => requestSort("cpuUsage")}
+              onKeyDown={() => requestSort("cpuUsage")}
+            >
+              <div className="flex items-center">
+                <span>{t("shared.cpuUsage")}</span>
+                {sortConfig &&
+                  sortConfig.key === "cpuUsage" &&
+                  sortIcon[sortConfig.direction]}
+              </div>
+            </th>
+            <th
+              className="pr-4 py-2 dark:text-gray-400 cursor-pointer"
+              onClick={() => requestSort("memoryUsage")}
+              onKeyDown={() => requestSort("memoryUsage")}
+            >
+              <div className="flex items-center">
+                <span>{t("shared.memoryUsage")}</span>
+                {sortConfig &&
+                  sortConfig.key === "memoryUsage" &&
+                  sortIcon[sortConfig.direction]}
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {processes.map((process) => (
+            <tr key={process.pid} className="border-b border-gray-700">
+              <td className="py-2">{process.pid}</td>
+              <td className="py-2">{process.name}</td>
+              <td className="py-2">{process.cpuUsage}%</td>
+              <td className="py-2">{process.memoryUsage} MB</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <ScrollBar className="ml-2" orientation="horizontal" />
+    </ScrollArea>
+  );
+};
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..8f935b7
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..f551e31
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-neutral-400 dark:bg-neutral-500" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..1492c99
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/src/template/Dashboard.tsx b/src/template/Dashboard.tsx
index 7596965..fd7d731 100644
--- a/src/template/Dashboard.tsx
+++ b/src/template/Dashboard.tsx
@@ -1,17 +1,17 @@
 import {
   cpuUsageHistoryAtom,
-  gpuFanSpeedAtom,
   gpuTempAtom,
   graphicUsageHistoryAtom,
   memoryUsageHistoryAtom,
 } from "@/atom/chart";
 import { useHardwareInfoAtom } from "@/atom/useHardwareInfoAtom";
+import { useSettingsAtom } from "@/atom/useSettingsAtom";
 import {
   StorageBarChart,
   type StorageBarChartData,
 } from "@/components/charts/Bar";
-import DoughnutChart from "@/components/charts/DoughnutChart";
-import ProcessesTable from "@/components/charts/ProcessTable";
+import { DoughnutChart } from "@/components/charts/DoughnutChart";
+import { ProcessesTable } from "@/components/charts/ProcessTable";
 import type { StorageInfo } from "@/rspc/bindings";
 import type { NameValues } from "@/types/hardwareDataType";
 import { useAtom } from "jotai";
@@ -19,8 +19,15 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 const InfoTable = ({ data }: { data: { [key: string]: string | number } }) => {
+  const { settings } = useSettingsAtom();
+
   return (
-    <div className="p-4 border rounded-md shadow-md bg-zinc-300 dark:bg-gray-800 dark:text-white">
+    <div
+      className="px-4 pt-2 pb-4 border rounded-md shadow-md bg-zinc-300 dark:bg-gray-800 dark:text-white"
+      style={{
+        opacity: (1 - settings.backgroundImgOpacity / 100) ** 2,
+      }}
+    >
       <table className="w-full text-left">
         <tbody>
           {Object.keys(data).map((key) => (
@@ -35,12 +42,23 @@ const InfoTable = ({ data }: { data: { [key: string]: string | number } }) => {
   );
 };
 
-const DataArea = ({ children }: { children: React.ReactNode }) => {
+const DataArea = ({
+  children,
+  title,
+  border = true,
+}: { children: React.ReactNode; title?: string; border?: boolean }) => {
   return (
     <div className="p-4">
-      <div className="border rounded-2xl border-zinc-400 dark:border-zinc-600">
-        <div className="p-4">{children}</div>
-      </div>
+      {border ? (
+        <div className="border rounded-2xl border-zinc-400 dark:border-zinc-600">
+          {title && (
+            <h3 className="pt-4 pl-4 pb-2 text-xl font-bold">{title}</h3>
+          )}
+          <div className="px-4 pb-4">{children}</div>
+        </div>
+      ) : (
+        <>{children}</>
+      )}
     </div>
   );
 };
@@ -54,10 +72,8 @@ const CPUInfo = () => {
     hardwareInfo.cpu && (
       <>
         <DoughnutChart
-          chartData={cpuUsageHistory[cpuUsageHistory.length - 1]}
+          chartValue={cpuUsageHistory[cpuUsageHistory.length - 1]}
           dataType={"usage"}
-          hardType="cpu"
-          showTitle={true}
         />
         <InfoTable
           data={{
@@ -77,7 +93,6 @@ const GPUInfo = () => {
   const { t } = useTranslation();
   const [graphicUsageHistory] = useAtom(graphicUsageHistoryAtom);
   const [gpuTemp] = useAtom(gpuTempAtom);
-  const [gpuFan] = useAtom(gpuFanSpeedAtom);
   const { hardwareInfo } = useHardwareInfoAtom();
 
   const getTargetInfo = (data: NameValues) => {
@@ -87,33 +102,17 @@ const GPUInfo = () => {
   };
 
   const targetTemperature = getTargetInfo(gpuTemp);
-  const targetFanSpeed = getTargetInfo(gpuFan);
 
   return (
     hardwareInfo.gpus && (
       <>
-        <div className="flex justify-around">
+        <div className="flex justify-around h-[200px]">
           <DoughnutChart
-            chartData={graphicUsageHistory[graphicUsageHistory.length - 1]}
+            chartValue={graphicUsageHistory[graphicUsageHistory.length - 1]}
             dataType={"usage"}
-            hardType="gpu"
-            showTitle={true}
           />
           {targetTemperature && (
-            <DoughnutChart
-              chartData={targetTemperature}
-              dataType={"temp"}
-              hardType="gpu"
-              showTitle={false}
-            />
-          )}
-          {targetFanSpeed && (
-            <DoughnutChart
-              chartData={targetFanSpeed}
-              dataType={"clock"}
-              hardType="gpu"
-              showTitle={false}
-            />
+            <DoughnutChart chartValue={targetTemperature} dataType={"temp"} />
           )}
         </div>
 
@@ -143,10 +142,8 @@ const MemoryInfo = () => {
     hardwareInfo.memory && (
       <>
         <DoughnutChart
-          chartData={memoryUsageHistory[memoryUsageHistory.length - 1]}
+          chartValue={memoryUsageHistory[memoryUsageHistory.length - 1]}
           dataType={"usage"}
-          hardType="memory"
-          showTitle={true}
         />
         <InfoTable
           data={{
@@ -189,8 +186,7 @@ const StorageDataInfo = () => {
   );
 
   return (
-    <div className="p-2">
-      <h3 className="text-lg font-bold">{t("shared.storage")}</h3>
+    <div className="pt-2">
       <div className="flex">
         <div className="w-1/2">
           {sortedStorage.map((storage) => {
@@ -225,20 +221,16 @@ const StorageDataInfo = () => {
 const Dashboard = () => {
   const { hardwareInfo } = useHardwareInfoAtom();
   const { init } = useHardwareInfoAtom();
+  const { t } = useTranslation();
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     init();
   }, []);
 
-  const hardwareInfoList: { key: string; component: JSX.Element }[] = [
+  const hardwareInfoListLeft: { key: string; component: JSX.Element }[] = [
     hardwareInfo.cpu && { key: "cpuInfo", component: <CPUInfo /> },
-    hardwareInfo.gpus && { key: "gpuInfo", component: <GPUInfo /> },
     hardwareInfo.memory && { key: "memoryInfo", component: <MemoryInfo /> },
-    {
-      key: "processesTable",
-      component: <ProcessesTable defaultItemLength={6} />,
-    },
     hardwareInfo.storage && hardwareInfo.storage.length > 0
       ? {
           key: "storageInfo",
@@ -247,11 +239,41 @@ const Dashboard = () => {
       : undefined,
   ].filter((x) => x != null);
 
+  const hardwareInfoListRight: { key: string; component: JSX.Element }[] = [
+    hardwareInfo.gpus && { key: "gpuInfo", component: <GPUInfo /> },
+    {
+      key: "processesTable",
+      component: <ProcessesTable />,
+    },
+  ].filter((x) => x != null);
+
+  const dataAreaKey2Title: Record<string, string> = {
+    cpuInfo: "CPU",
+    memoryInfo: "RAM",
+    storageInfo: t("shared.storage"),
+    gpuInfo: "GPU",
+  };
+
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-      {hardwareInfoList.map(({ key, component }) => (
-        <DataArea key={key}>{component}</DataArea>
-      ))}
+    <div className="flex flex-wrap gap-4">
+      <div className="flex-1 flex flex-col gap-4">
+        {hardwareInfoListLeft.map(({ key, component }) => (
+          <DataArea key={key} title={dataAreaKey2Title[key]}>
+            {component}
+          </DataArea>
+        ))}
+      </div>
+      <div className="flex-1 flex flex-col gap-4">
+        {hardwareInfoListRight.map(({ key, component }) => (
+          <DataArea
+            key={key}
+            title={dataAreaKey2Title[key]}
+            border={key !== "processesTable"}
+          >
+            {component}
+          </DataArea>
+        ))}
+      </div>
     </div>
   );
 };