diff --git a/apps/electron/src/renderer/src/Layout/index.tsx b/apps/electron/src/renderer/src/Layout/index.tsx
index efc9faaa..ca35f951 100644
--- a/apps/electron/src/renderer/src/Layout/index.tsx
+++ b/apps/electron/src/renderer/src/Layout/index.tsx
@@ -17,7 +17,7 @@ const Layout = () => {
   return (
     <div
       data-theme={color}
-      className="flex h-screen w-screen overflow-hidden rounded bg-base-100 text-sm"
+      className="flex h-screen w-screen overflow-hidden rounded-box bg-base-100 text-sm"
     >
       {/* aside */}
       <LayoutAside
diff --git a/apps/electron/src/renderer/src/pages/basic/index.tsx b/apps/electron/src/renderer/src/pages/basic/index.tsx
index f43b0757..34a902d6 100644
--- a/apps/electron/src/renderer/src/pages/basic/index.tsx
+++ b/apps/electron/src/renderer/src/pages/basic/index.tsx
@@ -127,7 +127,7 @@ const BasicPage = () => {
           <Row
             left={
               <>
-                <div className="rounded-md bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-1 text-white">
+                <div className="rounded-box bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-1 text-white">
                   <EyeIcon className="h-4 w-4" />
                 </div>
                 <span className="ml-2 flex items-center">预览</span>
@@ -142,7 +142,7 @@ const BasicPage = () => {
                   <div
                     role="button"
                     tabIndex={0}
-                    className="dropdown-content right-0 rounded-md bg-base-100 p-4 shadow-md"
+                    className="dropdown-content right-0 rounded-box bg-base-100 p-4 shadow-md"
                   >
                     <QRCodeSVG value={site} />
                   </div>
diff --git a/apps/electron/src/renderer/src/pages/color.tsx b/apps/electron/src/renderer/src/pages/color.tsx
index 1d8b86ca..f89d6146 100644
--- a/apps/electron/src/renderer/src/pages/color.tsx
+++ b/apps/electron/src/renderer/src/pages/color.tsx
@@ -30,18 +30,18 @@ const Item = ({ color, onClick, active = false }: ItemProps) => {
             <div className="font-bold capitalize">{color}</div>
 
             <div className="flex flex-wrap gap-1">
-              <div className="flex aspect-square w-5 items-center justify-center rounded bg-primary lg:w-6">
+              <div className="flex aspect-square w-5 items-center justify-center rounded-box bg-primary lg:w-6">
                 <div className="text-sm font-bold text-primary-content">A</div>
               </div>
-              <div className="flex aspect-square w-5 items-center justify-center rounded bg-secondary lg:w-6">
+              <div className="flex aspect-square w-5 items-center justify-center rounded-box bg-secondary lg:w-6">
                 <div className="text-sm font-bold text-secondary-content">
                   B
                 </div>
               </div>
-              <div className="flex aspect-square w-5 items-center justify-center rounded bg-accent lg:w-6">
+              <div className="flex aspect-square w-5 items-center justify-center rounded-box bg-accent lg:w-6">
                 <div className="text-sm font-bold text-accent-content">C</div>
               </div>
-              <div className="flex aspect-square w-5 items-center justify-center rounded bg-neutral lg:w-6">
+              <div className="flex aspect-square w-5 items-center justify-center rounded-box bg-neutral lg:w-6">
                 <div className="text-sm font-bold text-neutral-content">D</div>
               </div>
             </div>
@@ -112,7 +112,7 @@ const ColorPage = () => {
               {tags.map((item) => (
                 <input
                   key={item.name}
-                  className="btn btn-sm join-item"
+                  className="btn join-item btn-sm"
                   type="radio"
                   name="options"
                   checked={item.name === tag}
diff --git a/apps/electron/src/renderer/src/pages/setting/index.css b/apps/electron/src/renderer/src/pages/setting/index.css
index 4bcd21c9..0a19d74b 100644
--- a/apps/electron/src/renderer/src/pages/setting/index.css
+++ b/apps/electron/src/renderer/src/pages/setting/index.css
@@ -1,3 +1,3 @@
 .custom-select {
-  @apply select select-xs w-full rounded bg-base-100/50 text-right text-sm font-normal transition-all duration-300 hover:bg-base-100 hover:shadow focus:outline-none;
+  @apply select select-xs w-full rounded-box bg-base-100/50 text-right text-sm font-normal transition-all duration-300 hover:bg-base-100 hover:shadow focus:outline-none;
 }
diff --git a/themes/gallery/src/app/_components/ChildFolderCardList.tsx b/themes/gallery/src/app/_components/ChildFolderCardList.tsx
index 9a6370db..9c5b7437 100644
--- a/themes/gallery/src/app/_components/ChildFolderCardList.tsx
+++ b/themes/gallery/src/app/_components/ChildFolderCardList.tsx
@@ -34,9 +34,9 @@ const ChildFolderCardList = ({ folderId }: { folderId: string }) => {
               }}
               aria-hidden
               key={child.id}
-              className="group relative flex aspect-square w-full cursor-pointer items-end justify-center overflow-hidden rounded-md border border-base-content/10 bg-base-200/30 p-2"
+              className="group relative flex aspect-square w-full cursor-pointer items-end justify-center overflow-hidden rounded-box border border-base-content/10 bg-base-200/30 p-2"
             >
-              <div className="relative z-10 w-full overflow-hidden rounded-md bg-base-100/70 py-2 text-center backdrop-blur-sm">
+              <div className="relative z-10 w-full overflow-hidden rounded-box bg-base-100/70 py-2 text-center backdrop-blur-sm">
                 <p className="text-base font-medium">{child.name}</p>
                 <p className="mt-1 text-xs text-base-content/70">
                   {child._count.images
diff --git a/themes/gallery/src/app/_components/Masonry.tsx b/themes/gallery/src/app/_components/Masonry.tsx
index bd353b18..b38877d6 100644
--- a/themes/gallery/src/app/_components/Masonry.tsx
+++ b/themes/gallery/src/app/_components/Masonry.tsx
@@ -82,7 +82,7 @@ function Masonry({ children, onLoadMore, images }: Props) {
 
           return (
             <a
-              className="relative block rounded shadow"
+              className="relative block rounded-box shadow"
               href={data.src}
               style={{
                 backgroundColor: data.bgColor + "0C",
@@ -99,7 +99,7 @@ function Masonry({ children, onLoadMore, images }: Props) {
               <Image
                 src={data.thumbnailPath}
                 layout="fill"
-                className="rounded"
+                className="rounded-box"
               />
             </a>
           );
diff --git a/themes/gallery/src/app/_components/Responsive.tsx b/themes/gallery/src/app/_components/Responsive.tsx
index b23085f7..b1bd540a 100644
--- a/themes/gallery/src/app/_components/Responsive.tsx
+++ b/themes/gallery/src/app/_components/Responsive.tsx
@@ -133,7 +133,7 @@ function Responsive({ children, images, onLoadMore }: Props) {
                       }
                       target="_blank"
                       rel="noreferrer"
-                      className="relative block overflow-hidden rounded shadow"
+                      className="relative block overflow-hidden rounded-box shadow"
                       style={{
                         width: `${box.width}px`,
                         height: `${box.height}px`,
diff --git a/themes/gallery/src/app/_components/Setting/index.tsx b/themes/gallery/src/app/_components/Setting/index.tsx
index d7a583e1..7064629c 100644
--- a/themes/gallery/src/app/_components/Setting/index.tsx
+++ b/themes/gallery/src/app/_components/Setting/index.tsx
@@ -64,7 +64,7 @@ const Setting = () => {
             className="drawer-overlay"
           ></label>
           <div className="min-h-full w-80 bg-base-100 p-4 md:w-96">
-            <div className="rounded-md border border-base-content/10 bg-base-200/30 px-4">
+            <div className="rounded-box border border-base-content/10 bg-base-200/30 px-4">
               <div className={styles.row}>
                 <span className={styles.rowTitle}>
                   <AdjustmentsVerticalIcon className="mr-1 h-5 w-5" />
@@ -108,7 +108,7 @@ const Setting = () => {
               </div>
             </div>
 
-            <div className="relative mt-4 rounded-md border border-base-content/10 bg-base-200/30">
+            <div className="relative mt-4 rounded-box border border-base-content/10 bg-base-200/30">
               <ul className="menu font-mono text-base">
                 <li>
                   <Link
@@ -120,7 +120,7 @@ const Setting = () => {
                       全部
                     </span>
 
-                    <span className=" text-sm text-base-content/30">
+                    <span className="text-sm text-base-content/30">
                       {setting.count}
                     </span>
                   </Link>
@@ -166,7 +166,7 @@ const Setting = () => {
               </ul>
             </div>
 
-            <div className="relative mt-4 rounded-md border border-base-content/10 bg-base-200/30">
+            <div className="relative mt-4 rounded-box border border-base-content/10 bg-base-200/30">
               {folderTree && <FolderTree data={folderTree} />}
             </div>
           </div>