From ff0a0c8e9a09e78b105374ba6a9aa947f0013389 Mon Sep 17 00:00:00 2001
From: Agnik Misra <agnikmisra@gmail.com>
Date: Sat, 9 Aug 2025 01:18:18 +0530
Subject: [PATCH] feat(webui) refined all pages added border radius fix spacing
 issues and text alignment issues in home page

---
 .../[namespace]/clusters/[cluster]/page.tsx   |  93 +++++--
 .../shards/[shard]/nodes/[node]/page.tsx      |  56 +++--
 .../[cluster]/shards/[shard]/page.tsx         |  95 ++++++--
 webui/src/app/namespaces/[namespace]/page.tsx | 211 +++++++++++-----
 webui/src/app/namespaces/page.tsx             | 226 +++++++++++++-----
 webui/src/app/page.tsx                        | 146 +++++++----
 webui/src/app/ui/formDialog.tsx               |  29 ++-
 7 files changed, 615 insertions(+), 241 deletions(-)

diff --git a/webui/src/app/namespaces/[namespace]/clusters/[cluster]/page.tsx b/webui/src/app/namespaces/[namespace]/clusters/[cluster]/page.tsx
index 05175176..2231ff39 100644
--- a/webui/src/app/namespaces/[namespace]/clusters/[cluster]/page.tsx
+++ b/webui/src/app/namespaces/[namespace]/clusters/[cluster]/page.tsx
@@ -267,7 +267,10 @@ export default function Cluster({ params }: { params: { namespace: string; clust
 
                         <div className="flex w-full flex-row items-center gap-2 lg:w-auto">
                             <div className="search-container relative max-w-md flex-grow transition-all duration-300 lg:min-w-[280px]">
-                                <div className="search-inner relative w-full rounded-lg bg-gray-50 transition-all duration-300 focus-within:bg-white focus-within:shadow-md dark:bg-dark-paper/90 dark:focus-within:bg-dark-paper">
+                                <div
+                                    className="search-inner relative w-full bg-gray-50 transition-all duration-300 focus-within:bg-white focus-within:shadow-md dark:bg-dark-paper/90 dark:focus-within:bg-dark-paper"
+                                    style={{ borderRadius: "16px" }}
+                                >
                                     <div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
                                         <SearchIcon
                                             className="text-gray-400"
@@ -277,7 +280,8 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                                     <input
                                         type="text"
                                         placeholder="Search shards..."
-                                        className="w-full rounded-lg border-0 bg-transparent py-2.5 pl-9 pr-4 text-sm text-gray-800 outline-none ring-1 ring-gray-200 transition-all focus:ring-2 focus:ring-primary dark:text-gray-200 dark:ring-gray-700 dark:focus:ring-primary-light"
+                                        className="w-full border-0 bg-transparent py-2.5 pl-9 pr-4 text-sm text-gray-800 outline-none ring-1 ring-gray-200 transition-all focus:ring-2 focus:ring-primary dark:text-gray-200 dark:ring-gray-700 dark:focus:ring-primary-light"
+                                        style={{ borderRadius: "16px" }}
                                         value={searchTerm}
                                         onChange={(e) => setSearchTerm(e.target.value)}
                                     />
@@ -301,10 +305,11 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                                     <Button
                                         variant="outlined"
                                         color="primary"
-                                        className="whitespace-nowrap rounded-lg px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
+                                        className="whitespace-nowrap px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
                                         startIcon={<AddIcon />}
                                         disableElevation
                                         size="medium"
+                                        style={{ borderRadius: "16px" }}
                                     >
                                         Create Shard
                                     </Button>
@@ -317,10 +322,11 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                                     <Button
                                         variant="outlined"
                                         color="warning"
-                                        className="whitespace-nowrap rounded-lg px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
+                                        className="whitespace-nowrap px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
                                         startIcon={<SwapHorizIcon />}
                                         disableElevation
                                         size="medium"
+                                        style={{ borderRadius: "16px" }}
                                     >
                                         Migrate Slot
                                     </Button>
@@ -334,10 +340,14 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    style={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-400">
+                                        <div
+                                            className="flex h-12 w-12 items-center justify-center bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-400"
+                                            style={{ borderRadius: "16px" }}
+                                        >
                                             <DnsIcon sx={{ fontSize: 24 }} />
                                         </div>
                                         <div className="flex flex-col items-end">
@@ -362,10 +372,14 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    style={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400">
+                                        <div
+                                            className="flex h-12 w-12 items-center justify-center bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400"
+                                            style={{ borderRadius: "16px" }}
+                                        >
                                             <DeviceHubIcon sx={{ fontSize: 24 }} />
                                         </div>
                                         <div className="flex flex-col items-end">
@@ -390,10 +404,14 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    style={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 text-amber-500 dark:bg-amber-900/30 dark:text-amber-400">
+                                        <div
+                                            className="flex h-12 w-12 items-center justify-center bg-amber-50 text-amber-500 dark:bg-amber-900/30 dark:text-amber-400"
+                                            style={{ borderRadius: "16px" }}
+                                        >
                                             <StorageIcon sx={{ fontSize: 24 }} />
                                         </div>
                                         <div className="flex flex-col items-end">
@@ -418,10 +436,14 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    style={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 text-orange-500 dark:bg-orange-900/30 dark:text-orange-400">
+                                        <div
+                                            className="flex h-12 w-12 items-center justify-center bg-orange-50 text-orange-500 dark:bg-orange-900/30 dark:text-orange-400"
+                                            style={{ borderRadius: "16px" }}
+                                        >
                                             <WarningIcon sx={{ fontSize: 24 }} />
                                         </div>
                                         <div className="flex flex-col items-end">
@@ -447,7 +469,8 @@ export default function Cluster({ params }: { params: { namespace: string; clust
 
                     <Paper
                         elevation={0}
-                        className="overflow-hidden rounded-2xl border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        className="overflow-hidden border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        style={{ borderRadius: "20px" }}
                     >
                         <div className="border-b border-gray-100 px-6 py-3 dark:border-gray-800 sm:px-8">
                             <div className="flex items-center justify-between">
@@ -463,7 +486,8 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                                             size="small"
                                             onClick={handleFilterClick}
                                             aria-describedby={filterId}
-                                            className="rounded-full bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            className="bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            style={{ borderRadius: "16px" }}
                                         >
                                             <FilterListIcon fontSize="small" />
                                         </IconButton>
@@ -473,7 +497,8 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                                             size="small"
                                             onClick={handleSortClick}
                                             aria-describedby={sortId}
-                                            className="rounded-full bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            className="bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            style={{ borderRadius: "16px" }}
                                         >
                                             <SortIcon fontSize="small" />
                                         </IconButton>
@@ -742,7 +767,8 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                                         variant="text"
                                         size="small"
                                         onClick={handleFilterClose}
-                                        className="rounded-lg px-3 py-1 text-xs"
+                                        className="px-3 py-1 text-xs"
+                                        style={{ borderRadius: "12px" }}
                                     >
                                         Close
                                     </Button>
@@ -914,7 +940,8 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                                         variant="text"
                                         size="small"
                                         onClick={handleSortClose}
-                                        className="rounded-lg px-3 py-1 text-xs"
+                                        className="px-3 py-1 text-xs"
+                                        style={{ borderRadius: "12px" }}
                                     >
                                         Close
                                     </Button>
@@ -931,10 +958,14 @@ export default function Cluster({ params }: { params: { namespace: string; clust
                                     >
                                         <Paper
                                             elevation={0}
-                                            className="overflow-hidden rounded-xl border border-transparent bg-white p-4 transition-all group-hover:border-primary/10 group-hover:shadow-sm dark:bg-dark-paper dark:group-hover:border-primary-dark/20"
+                                            className="overflow-hidden border border-transparent bg-white p-4 transition-all group-hover:border-primary/10 group-hover:shadow-sm dark:bg-dark-paper dark:group-hover:border-primary-dark/20"
+                                            style={{ borderRadius: "20px" }}
                                         >
                                             <div className="flex flex-col items-start sm:flex-row sm:items-center">
-                                                <div className="mb-3 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400 sm:mb-0">
+                                                <div
+                                                    className="mb-3 flex h-14 w-14 flex-shrink-0 items-center justify-center bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400 sm:mb-0"
+                                                    style={{ borderRadius: "16px" }}
+                                                >
                                                     <DnsIcon sx={{ fontSize: 28 }} />
                                                 </div>
 
@@ -954,7 +985,13 @@ export default function Cluster({ params }: { params: { namespace: string; clust
 
                                                                 {shard.hasMigration &&
                                                                     shard.migratingSlot >= 0 && (
-                                                                        <div className="flex items-center gap-1 rounded-full border border-orange-200 bg-orange-50 px-2.5 py-1 dark:border-orange-800 dark:bg-orange-900/30">
+                                                                        <div
+                                                                            className="flex items-center gap-1 border border-orange-200 bg-orange-50 px-2.5 py-1 dark:border-orange-800 dark:bg-orange-900/30"
+                                                                            style={{
+                                                                                borderRadius:
+                                                                                    "12px",
+                                                                            }}
+                                                                        >
                                                                             <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-orange-500"></div>
                                                                             <span className="text-xs font-medium text-orange-700 dark:text-orange-300">
                                                                                 Migrating{" "}
@@ -967,7 +1004,13 @@ export default function Cluster({ params }: { params: { namespace: string; clust
 
                                                                 {!shard.hasMigration &&
                                                                     !shard.hasImporting && (
-                                                                        <div className="flex items-center gap-1 rounded-full border border-green-200 bg-green-50 px-2.5 py-1 dark:border-green-800 dark:bg-green-900/30">
+                                                                        <div
+                                                                            className="flex items-center gap-1 border border-green-200 bg-green-50 px-2.5 py-1 dark:border-green-800 dark:bg-green-900/30"
+                                                                            style={{
+                                                                                borderRadius:
+                                                                                    "12px",
+                                                                            }}
+                                                                        >
                                                                             <div className="h-1.5 w-1.5 rounded-full bg-green-500"></div>
                                                                             <span className="text-xs font-medium text-green-700 dark:text-green-300">
                                                                                 Stable
@@ -977,7 +1020,13 @@ export default function Cluster({ params }: { params: { namespace: string; clust
 
                                                                 {shard.hasImporting &&
                                                                     shard.importingSlot >= 0 && (
-                                                                        <div className="flex items-center gap-1 rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 dark:border-blue-800 dark:bg-blue-900/30">
+                                                                        <div
+                                                                            className="flex items-center gap-1 border border-blue-200 bg-blue-50 px-2.5 py-1 dark:border-blue-800 dark:bg-blue-900/30"
+                                                                            style={{
+                                                                                borderRadius:
+                                                                                    "12px",
+                                                                            }}
+                                                                        >
                                                                             <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500"></div>
                                                                             <span className="text-xs font-medium text-blue-700 dark:text-blue-300">
                                                                                 Importing{" "}
diff --git a/webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/nodes/[node]/page.tsx b/webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/nodes/[node]/page.tsx
index 3b8ea07c..549053d6 100644
--- a/webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/nodes/[node]/page.tsx
+++ b/webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/nodes/[node]/page.tsx
@@ -131,12 +131,16 @@ export default function Node({
                                 variant="h4"
                                 className="flex items-center font-medium text-gray-900 dark:text-white"
                             >
-                                <div className="mr-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-50 text-blue-500 dark:from-blue-900/30 dark:to-indigo-900/30 dark:text-blue-400">
+                                <div
+                                    className="mr-3 flex h-12 w-12 items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-50 text-blue-500 dark:from-blue-900/30 dark:to-indigo-900/30 dark:text-blue-400"
+                                    style={{ borderRadius: "20px" }}
+                                >
                                     <DeviceHubIcon sx={{ fontSize: 28 }} />
                                 </div>
                                 Node {parseInt(node) + 1}
                                 <div
-                                    className={`ml-3 flex items-center gap-1 rounded-full border px-3 py-1 ${roleStyles.bgClass} ${roleStyles.borderClass}`}
+                                    className={`ml-3 flex items-center gap-1 border px-3 py-1 ${roleStyles.bgClass} ${roleStyles.borderClass}`}
+                                    style={{ borderRadius: "16px" }}
                                 >
                                     {roleStyles.icon}
                                     <span className={`text-sm font-medium ${roleStyles.textColor}`}>
@@ -157,7 +161,8 @@ export default function Node({
                     {/* Node Details Section */}
                     <Paper
                         elevation={0}
-                        className="overflow-hidden rounded-2xl border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        className="overflow-hidden border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        style={{ borderRadius: "24px" }}
                     >
                         <div className="border-b border-gray-100 px-6 py-4 dark:border-gray-800 sm:px-8">
                             <Typography
@@ -182,7 +187,10 @@ export default function Node({
                                                 Node ID
                                             </Typography>
                                             <div className="flex items-center">
-                                                <div className="flex-1 overflow-hidden rounded-xl bg-gray-50 px-4 py-3 font-mono text-sm dark:bg-gray-800/50">
+                                                <div
+                                                    className="flex-1 overflow-hidden bg-gray-50 px-4 py-3 font-mono text-sm dark:bg-gray-800/50"
+                                                    style={{ borderRadius: "20px" }}
+                                                >
                                                     <Typography
                                                         variant="body1"
                                                         className="truncate text-gray-800 dark:text-gray-200"
@@ -194,8 +202,9 @@ export default function Node({
                                                     onClick={() =>
                                                         copyToClipboard(currentNode.id, "id")
                                                     }
-                                                    className="ml-3 rounded-full bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-primary dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-primary-light"
+                                                    className="ml-3 bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-primary dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-primary-light"
                                                     title="Copy ID"
+                                                    style={{ borderRadius: "16px" }}
                                                 >
                                                     {copied === "id" ? (
                                                         <CheckCircleIcon
@@ -221,7 +230,10 @@ export default function Node({
                                                 Address
                                             </Typography>
                                             <div className="flex items-center">
-                                                <div className="flex-1 overflow-hidden rounded-xl bg-gray-50 px-4 py-3 dark:bg-gray-800/50">
+                                                <div
+                                                    className="flex-1 overflow-hidden bg-gray-50 px-4 py-3 dark:bg-gray-800/50"
+                                                    style={{ borderRadius: "20px" }}
+                                                >
                                                     <Typography
                                                         variant="body1"
                                                         className="text-gray-800 dark:text-gray-200"
@@ -233,8 +245,9 @@ export default function Node({
                                                     onClick={() =>
                                                         copyToClipboard(currentNode.addr, "addr")
                                                     }
-                                                    className="ml-3 rounded-full bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-primary dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-primary-light"
+                                                    className="ml-3 bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-primary dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-primary-light"
                                                     title="Copy Address"
+                                                    style={{ borderRadius: "16px" }}
                                                 >
                                                     {copied === "addr" ? (
                                                         <CheckCircleIcon
@@ -261,7 +274,8 @@ export default function Node({
                                                 Role
                                             </Typography>
                                             <div
-                                                className={`mt-1 inline-flex items-center rounded-xl border px-3 py-2 ${roleStyles.bgClass} ${roleStyles.borderClass}`}
+                                                className={`mt-1 inline-flex items-center border px-3 py-2 ${roleStyles.bgClass} ${roleStyles.borderClass}`}
+                                                style={{ borderRadius: "20px" }}
                                             >
                                                 {roleStyles.icon}
                                                 <Typography
@@ -281,7 +295,10 @@ export default function Node({
                                                 <AccessTimeIcon fontSize="small" className="mr-1" />
                                                 Created At
                                             </Typography>
-                                            <div className="flex items-center rounded-xl bg-gray-50 px-4 py-3 dark:bg-gray-800/50">
+                                            <div
+                                                className="flex items-center bg-gray-50 px-4 py-3 dark:bg-gray-800/50"
+                                                style={{ borderRadius: "20px" }}
+                                            >
                                                 <Typography
                                                     variant="body1"
                                                     className="text-gray-800 dark:text-gray-200"
@@ -321,9 +338,10 @@ export default function Node({
                                                                 "pwd"
                                                             )
                                                         }
-                                                        className="ml-3 rounded-full bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-primary dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-primary-light"
+                                                        className="ml-3 bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-primary dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-primary-light"
                                                         title="Copy Password"
                                                         disabled={!currentNode.password}
+                                                        style={{ borderRadius: "16px" }}
                                                     >
                                                         {copied === "pwd" ? (
                                                             <CheckCircleIcon
@@ -346,7 +364,8 @@ export default function Node({
                     {/* Shard Information Section */}
                     <Paper
                         elevation={0}
-                        className="mt-6 overflow-hidden rounded-2xl border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        className="mt-6 overflow-hidden border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        style={{ borderRadius: "24px" }}
                     >
                         <div className="border-b border-gray-100 px-6 py-4 dark:border-gray-800 sm:px-8">
                             <Typography
@@ -361,7 +380,10 @@ export default function Node({
                         <div className="p-6 sm:p-8">
                             <Grid container spacing={4}>
                                 <Grid item xs={12} sm={4}>
-                                    <div className="rounded-xl border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-800/50">
+                                    <div
+                                        className="border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-800/50"
+                                        style={{ borderRadius: "20px" }}
+                                    >
                                         <Typography
                                             variant="subtitle2"
                                             className="mb-2 flex items-center text-gray-500 dark:text-gray-400"
@@ -378,7 +400,10 @@ export default function Node({
                                     </div>
                                 </Grid>
                                 <Grid item xs={12} sm={4}>
-                                    <div className="rounded-xl border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-800/50">
+                                    <div
+                                        className="border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-800/50"
+                                        style={{ borderRadius: "20px" }}
+                                    >
                                         <Typography
                                             variant="subtitle2"
                                             className="mb-2 flex items-center text-gray-500 dark:text-gray-400"
@@ -395,7 +420,10 @@ export default function Node({
                                     </div>
                                 </Grid>
                                 <Grid item xs={12} sm={4}>
-                                    <div className="rounded-xl border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-800/50">
+                                    <div
+                                        className="border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-800/50"
+                                        style={{ borderRadius: "20px" }}
+                                    >
                                         <Typography
                                             variant="subtitle2"
                                             className="mb-2 flex items-center text-gray-500 dark:text-gray-400"
diff --git a/webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/page.tsx b/webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/page.tsx
index 67f7c10e..6b7c642e 100644
--- a/webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/page.tsx
+++ b/webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/page.tsx
@@ -177,7 +177,10 @@ export default function Shard({
                         </div>
                         <div className="flex w-full flex-row items-center gap-2 lg:w-auto">
                             <div className="search-container relative max-w-md flex-grow transition-all duration-300 lg:min-w-[280px]">
-                                <div className="search-inner relative w-full rounded-lg bg-gray-50 transition-all duration-300 focus-within:bg-white focus-within:shadow-md dark:bg-dark-paper/90 dark:focus-within:bg-dark-paper">
+                                <div
+                                    className="search-inner relative w-full bg-gray-50 transition-all duration-300 focus-within:bg-white focus-within:shadow-md dark:bg-dark-paper/90 dark:focus-within:bg-dark-paper"
+                                    style={{ borderRadius: "16px" }}
+                                >
                                     <div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
                                         <SearchIcon
                                             className="text-gray-400"
@@ -187,7 +190,8 @@ export default function Shard({
                                     <input
                                         type="text"
                                         placeholder="Search nodes..."
-                                        className="w-full rounded-lg border-0 bg-transparent py-2.5 pl-9 pr-4 text-sm text-gray-800 outline-none ring-1 ring-gray-200 transition-all focus:ring-2 focus:ring-primary dark:text-gray-200 dark:ring-gray-700 dark:focus:ring-primary-light"
+                                        className="w-full border-0 bg-transparent py-2.5 pl-9 pr-4 text-sm text-gray-800 outline-none ring-1 ring-gray-200 transition-all focus:ring-2 focus:ring-primary dark:text-gray-200 dark:ring-gray-700 dark:focus:ring-primary-light"
+                                        style={{ borderRadius: "16px" }}
                                         value={searchTerm}
                                         onChange={(e) => setSearchTerm(e.target.value)}
                                     />
@@ -211,7 +215,8 @@ export default function Shard({
                                     <Button
                                         variant="outlined"
                                         color="primary"
-                                        className="whitespace-nowrap rounded-lg px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
+                                        className="whitespace-nowrap px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
+                                        style={{ borderRadius: "16px" }}
                                         startIcon={<AddIcon />}
                                         disableElevation
                                         size="medium"
@@ -224,7 +229,8 @@ export default function Shard({
                     </div>
                     <Paper
                         elevation={0}
-                        className="overflow-hidden rounded-2xl border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        className="overflow-hidden border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        style={{ borderRadius: "20px" }}
                     >
                         <div className="border-b border-gray-100 px-6 py-3 dark:border-gray-800 sm:px-8">
                             <div className="flex items-center justify-between">
@@ -240,7 +246,8 @@ export default function Shard({
                                             size="small"
                                             onClick={(e) => setFilterAnchorEl(e.currentTarget)}
                                             aria-describedby={filterId}
-                                            className="rounded-full bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            className="bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            style={{ borderRadius: "16px" }}
                                         >
                                             <FilterListIcon fontSize="small" />
                                         </IconButton>
@@ -250,7 +257,8 @@ export default function Shard({
                                             size="small"
                                             onClick={(e) => setSortAnchorEl(e.currentTarget)}
                                             aria-describedby={sortId}
-                                            className="rounded-full bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            className="bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            style={{ borderRadius: "16px" }}
                                         >
                                             <SortIcon fontSize="small" />
                                         </IconButton>
@@ -267,10 +275,9 @@ export default function Shard({
                             transformOrigin={{ vertical: "top", horizontal: "right" }}
                             TransitionComponent={Fade}
                             PaperProps={{
-                                className:
-                                    "rounded-xl shadow-xl border border-gray-100 dark:border-gray-700",
+                                className: "shadow-xl border border-gray-100 dark:border-gray-700",
                                 elevation: 3,
-                                sx: { width: 220 },
+                                sx: { width: 220, borderRadius: "20px" },
                             }}
                         >
                             <div className="p-4">
@@ -284,7 +291,10 @@ export default function Shard({
                                     onChange={(e) => setFilterOption(e.target.value)}
                                 >
                                     <div className="space-y-2">
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <div
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            style={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="all"
                                                 control={
@@ -308,7 +318,10 @@ export default function Shard({
                                                 className="m-0 w-full"
                                             />
                                         </div>
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <div
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            style={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="master"
                                                 control={
@@ -332,7 +345,10 @@ export default function Shard({
                                                 className="m-0 w-full"
                                             />
                                         </div>
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <div
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            style={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="replica"
                                                 control={
@@ -363,7 +379,8 @@ export default function Shard({
                                         variant="text"
                                         size="small"
                                         onClick={() => setFilterAnchorEl(null)}
-                                        className="rounded-lg px-3 py-1 text-xs"
+                                        className="px-3 py-1 text-xs"
+                                        style={{ borderRadius: "12px" }}
                                     >
                                         Close
                                     </Button>
@@ -379,10 +396,9 @@ export default function Shard({
                             transformOrigin={{ vertical: "top", horizontal: "right" }}
                             TransitionComponent={Fade}
                             PaperProps={{
-                                className:
-                                    "rounded-xl shadow-xl border border-gray-100 dark:border-gray-700",
+                                className: "shadow-xl border border-gray-100 dark:border-gray-700",
                                 elevation: 3,
-                                sx: { width: 220 },
+                                sx: { width: 220, borderRadius: "20px" },
                             }}
                         >
                             <div className="p-4">
@@ -396,7 +412,10 @@ export default function Shard({
                                     onChange={(e) => setSortOption(e.target.value)}
                                 >
                                     <div className="space-y-2">
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <div
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            style={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="index-asc"
                                                 control={
@@ -420,7 +439,10 @@ export default function Shard({
                                                 className="m-0 w-full"
                                             />
                                         </div>
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <div
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            style={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="index-desc"
                                                 control={
@@ -444,7 +466,10 @@ export default function Shard({
                                                 className="m-0 w-full"
                                             />
                                         </div>
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <div
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            style={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="uptime-desc"
                                                 control={
@@ -468,7 +493,10 @@ export default function Shard({
                                                 className="m-0 w-full"
                                             />
                                         </div>
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <div
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            style={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="uptime-asc"
                                                 control={
@@ -499,7 +527,8 @@ export default function Shard({
                                         variant="text"
                                         size="small"
                                         onClick={() => setSortAnchorEl(null)}
-                                        className="rounded-lg px-3 py-1 text-xs"
+                                        className="px-3 py-1 text-xs"
+                                        style={{ borderRadius: "12px" }}
                                     >
                                         Close
                                     </Button>
@@ -517,10 +546,14 @@ export default function Shard({
                                         >
                                             <Paper
                                                 elevation={0}
-                                                className="overflow-hidden rounded-xl border border-transparent bg-white p-4 transition-all group-hover:border-primary/10 group-hover:shadow-sm dark:bg-dark-paper dark:group-hover:border-primary-dark/20"
+                                                className="overflow-hidden border border-transparent bg-white p-4 transition-all group-hover:border-primary/10 group-hover:shadow-sm dark:bg-dark-paper dark:group-hover:border-primary-dark/20"
+                                                style={{ borderRadius: "20px" }}
                                             >
                                                 <div className="flex flex-col items-start sm:flex-row sm:items-center">
-                                                    <div className="mb-3 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400 sm:mb-0">
+                                                    <div
+                                                        className="mb-3 flex h-14 w-14 flex-shrink-0 items-center justify-center bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400 sm:mb-0"
+                                                        style={{ borderRadius: "16px" }}
+                                                    >
                                                         <DeviceHubIcon sx={{ fontSize: 28 }} />
                                                     </div>
                                                     <div className="flex flex-1 flex-col sm:ml-5 sm:flex-row sm:items-center sm:overflow-hidden">
@@ -537,14 +570,26 @@ export default function Shard({
                                                                         Node {index + 1}
                                                                     </Typography>
                                                                     {node.role === "master" ? (
-                                                                        <div className="flex items-center gap-1 rounded-full border border-green-200 bg-green-50 px-2.5 py-1 dark:border-green-800 dark:bg-green-900/30">
+                                                                        <div
+                                                                            className="flex items-center gap-1 border border-green-200 bg-green-50 px-2.5 py-1 dark:border-green-800 dark:bg-green-900/30"
+                                                                            style={{
+                                                                                borderRadius:
+                                                                                    "12px",
+                                                                            }}
+                                                                        >
                                                                             <div className="h-1.5 w-1.5 rounded-full bg-green-500"></div>
                                                                             <span className="text-xs font-medium text-green-700 dark:text-green-300">
                                                                                 Master
                                                                             </span>
                                                                         </div>
                                                                     ) : (
-                                                                        <div className="flex items-center gap-1 rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 dark:border-blue-800 dark:bg-blue-900/30">
+                                                                        <div
+                                                                            className="flex items-center gap-1 border border-blue-200 bg-blue-50 px-2.5 py-1 dark:border-blue-800 dark:bg-blue-900/30"
+                                                                            style={{
+                                                                                borderRadius:
+                                                                                    "12px",
+                                                                            }}
+                                                                        >
                                                                             <div className="h-1.5 w-1.5 rounded-full bg-blue-500"></div>
                                                                             <span className="text-xs font-medium text-blue-700 dark:text-blue-300">
                                                                                 Replica
diff --git a/webui/src/app/namespaces/[namespace]/page.tsx b/webui/src/app/namespaces/[namespace]/page.tsx
index dfc336d6..f9b1de06 100644
--- a/webui/src/app/namespaces/[namespace]/page.tsx
+++ b/webui/src/app/namespaces/[namespace]/page.tsx
@@ -315,7 +315,10 @@ export default function Namespace({ params }: { params: { namespace: string } })
 
                         <div className="flex w-full flex-row items-center gap-2 lg:w-auto">
                             <div className="search-container relative max-w-md flex-grow transition-all duration-300 lg:min-w-[280px]">
-                                <div className="search-inner relative w-full rounded-lg bg-gray-50 transition-all duration-300 focus-within:bg-white focus-within:shadow-md dark:bg-dark-paper/90 dark:focus-within:bg-dark-paper">
+                                <Box
+                                    className="search-inner relative w-full bg-gray-50 transition-all duration-300 focus-within:bg-white focus-within:shadow-md dark:bg-dark-paper/90 dark:focus-within:bg-dark-paper"
+                                    sx={{ borderRadius: "16px" }}
+                                >
                                     <div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
                                         <SearchIcon
                                             className="text-gray-400"
@@ -325,7 +328,8 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                     <input
                                         type="text"
                                         placeholder="Search clusters..."
-                                        className="w-full rounded-lg border-0 bg-transparent py-2.5 pl-9 pr-4 text-sm text-gray-800 outline-none ring-1 ring-gray-200 transition-all focus:ring-2 focus:ring-primary dark:text-gray-200 dark:ring-gray-700 dark:focus:ring-primary-light"
+                                        className="w-full border-0 bg-transparent py-2.5 pl-9 pr-4 text-sm text-gray-800 outline-none ring-1 ring-gray-200 transition-all focus:ring-2 focus:ring-primary dark:text-gray-200 dark:ring-gray-700 dark:focus:ring-primary-light"
+                                        style={{ borderRadius: "16px" }}
                                         value={searchTerm}
                                         onChange={(e) => setSearchTerm(e.target.value)}
                                     />
@@ -337,7 +341,7 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                             <span className="text-xs">✕</span>
                                         </button>
                                     )}
-                                </div>
+                                </Box>
                             </div>
 
                             <div className="flex flex-shrink-0 gap-3">
@@ -345,10 +349,11 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                     <Button
                                         variant="outlined"
                                         color="primary"
-                                        className="whitespace-nowrap rounded-lg px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
+                                        className="whitespace-nowrap px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
                                         startIcon={<AddIcon />}
                                         disableElevation
                                         size="medium"
+                                        sx={{ borderRadius: "16px" }}
                                     >
                                         Create Cluster
                                     </Button>
@@ -357,10 +362,11 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                     <Button
                                         variant="outlined"
                                         color="primary"
-                                        className="whitespace-nowrap rounded-lg px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
+                                        className="whitespace-nowrap px-5 py-2.5 font-medium shadow-sm transition-all hover:shadow-md"
                                         startIcon={<FileUploadIcon />}
                                         disableElevation
                                         size="medium"
+                                        sx={{ borderRadius: "16px" }}
                                     >
                                         Import Cluster
                                     </Button>
@@ -374,12 +380,16 @@ export default function Namespace({ params }: { params: { namespace: string } })
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    sx={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-400">
+                                        <Box
+                                            className="flex h-12 w-12 items-center justify-center bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-400"
+                                            sx={{ borderRadius: "16px" }}
+                                        >
                                             <StorageIcon sx={{ fontSize: 24 }} />
-                                        </div>
+                                        </Box>
                                         <div className="flex flex-col items-end">
                                             <Typography
                                                 variant="h4"
@@ -402,12 +412,16 @@ export default function Namespace({ params }: { params: { namespace: string } })
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    sx={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400">
+                                        <Box
+                                            className="flex h-12 w-12 items-center justify-center bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400"
+                                            sx={{ borderRadius: "16px" }}
+                                        >
                                             <DnsIcon sx={{ fontSize: 24 }} />
-                                        </div>
+                                        </Box>
                                         <div className="flex flex-col items-end">
                                             <Typography
                                                 variant="h4"
@@ -430,12 +444,16 @@ export default function Namespace({ params }: { params: { namespace: string } })
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    sx={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 text-amber-500 dark:bg-amber-900/30 dark:text-amber-400">
+                                        <Box
+                                            className="flex h-12 w-12 items-center justify-center bg-amber-50 text-amber-500 dark:bg-amber-900/30 dark:text-amber-400"
+                                            sx={{ borderRadius: "16px" }}
+                                        >
                                             <DeviceHubIcon sx={{ fontSize: 24 }} />
-                                        </div>
+                                        </Box>
                                         <div className="flex flex-col items-end">
                                             <Typography
                                                 variant="h4"
@@ -458,12 +476,16 @@ export default function Namespace({ params }: { params: { namespace: string } })
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    sx={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 text-indigo-500 dark:bg-indigo-900/30 dark:text-indigo-400">
+                                        <Box
+                                            className="flex h-12 w-12 items-center justify-center bg-indigo-50 text-indigo-500 dark:bg-indigo-900/30 dark:text-indigo-400"
+                                            sx={{ borderRadius: "16px" }}
+                                        >
                                             <GridViewIcon sx={{ fontSize: 24 }} />
-                                        </div>
+                                        </Box>
                                         <div className="flex flex-col items-end">
                                             <Typography
                                                 variant="h4"
@@ -487,7 +509,8 @@ export default function Namespace({ params }: { params: { namespace: string } })
 
                     <Paper
                         elevation={0}
-                        className="overflow-hidden rounded-2xl border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        className="overflow-hidden border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        sx={{ borderRadius: "20px" }}
                     >
                         <div className="border-b border-gray-100 px-6 py-3 dark:border-gray-800 sm:px-8">
                             <div className="flex items-center justify-between">
@@ -503,7 +526,8 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                             size="small"
                                             onClick={handleFilterClick}
                                             aria-describedby={filterId}
-                                            className="rounded-full bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            className="bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            sx={{ borderRadius: "16px" }}
                                         >
                                             <FilterListIcon fontSize="small" />
                                         </IconButton>
@@ -513,7 +537,8 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                             size="small"
                                             onClick={handleSortClick}
                                             aria-describedby={sortId}
-                                            className="rounded-full bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            className="bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            sx={{ borderRadius: "16px" }}
                                         >
                                             <SortIcon fontSize="small" />
                                         </IconButton>
@@ -537,10 +562,9 @@ export default function Namespace({ params }: { params: { namespace: string } })
                             }}
                             TransitionComponent={Fade}
                             PaperProps={{
-                                className:
-                                    "rounded-xl shadow-xl border border-gray-100 dark:border-gray-700",
+                                className: "shadow-xl border border-gray-100 dark:border-gray-700",
                                 elevation: 3,
-                                sx: { width: 280 },
+                                sx: { width: 280, borderRadius: "20px" },
                             }}
                         >
                             <div className="p-4">
@@ -557,7 +581,10 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                     }
                                 >
                                     <div className="space-y-2">
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="all"
                                                 control={
@@ -588,9 +615,12 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="with-migration"
                                                 control={
@@ -626,9 +656,12 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="no-migration"
                                                 control={
@@ -664,9 +697,12 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="with-slots"
                                                 control={
@@ -701,9 +737,12 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="no-slots"
                                                 control={
@@ -738,9 +777,12 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="with-importing"
                                                 control={
@@ -776,7 +818,7 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
                                     </div>
                                 </RadioGroup>
 
@@ -785,7 +827,8 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                         variant="text"
                                         size="small"
                                         onClick={handleFilterClose}
-                                        className="rounded-lg px-3 py-1 text-xs"
+                                        className="px-3 py-1 text-xs"
+                                        sx={{ borderRadius: "12px" }}
                                     >
                                         Close
                                     </Button>
@@ -808,10 +851,9 @@ export default function Namespace({ params }: { params: { namespace: string } })
                             }}
                             TransitionComponent={Fade}
                             PaperProps={{
-                                className:
-                                    "rounded-xl shadow-xl border border-gray-100 dark:border-gray-700",
+                                className: "shadow-xl border border-gray-100 dark:border-gray-700",
                                 elevation: 3,
-                                sx: { width: 280 },
+                                sx: { width: 280, borderRadius: "20px" },
                             }}
                         >
                             <div className="p-4">
@@ -826,7 +868,10 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                     onChange={(e) => setSortOption(e.target.value as SortOption)}
                                 >
                                     <div className="space-y-2">
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="name-asc"
                                                 control={
@@ -855,9 +900,12 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="name-desc"
                                                 control={
@@ -886,9 +934,12 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="shards-desc"
                                                 control={
@@ -917,9 +968,12 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="nodes-desc"
                                                 control={
@@ -948,7 +1002,7 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
                                     </div>
                                 </RadioGroup>
 
@@ -957,7 +1011,8 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                         variant="text"
                                         size="small"
                                         onClick={handleSortClose}
-                                        className="rounded-lg px-3 py-1 text-xs"
+                                        className="px-3 py-1 text-xs"
+                                        sx={{ borderRadius: "12px" }}
                                     >
                                         Close
                                     </Button>
@@ -974,12 +1029,16 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                     >
                                         <Paper
                                             elevation={0}
-                                            className="overflow-hidden rounded-xl border border-transparent bg-white p-4 transition-all group-hover:border-primary/10 group-hover:shadow-sm dark:bg-dark-paper dark:group-hover:border-primary-dark/20"
+                                            className="overflow-hidden border border-transparent bg-white p-4 transition-all group-hover:border-primary/10 group-hover:shadow-sm dark:bg-dark-paper dark:group-hover:border-primary-dark/20"
+                                            sx={{ borderRadius: "20px" }}
                                         >
                                             <div className="flex flex-col items-start sm:flex-row sm:items-center">
-                                                <div className="mb-3 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-400 sm:mb-0">
+                                                <Box
+                                                    className="mb-3 flex h-14 w-14 flex-shrink-0 items-center justify-center bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-400 sm:mb-0"
+                                                    sx={{ borderRadius: "16px" }}
+                                                >
                                                     <StorageIcon sx={{ fontSize: 28 }} />
-                                                </div>
+                                                </Box>
 
                                                 <div className="flex flex-1 flex-col sm:ml-5 sm:flex-row sm:items-center sm:overflow-hidden">
                                                     <div className="flex-1 overflow-hidden">
@@ -997,7 +1056,13 @@ export default function Namespace({ params }: { params: { namespace: string } })
 
                                                                 {cluster.hasMigration &&
                                                                     cluster.migratingSlot >= 0 && (
-                                                                        <div className="flex items-center gap-1 rounded-full border border-orange-200 bg-orange-50 px-2.5 py-1 dark:border-orange-800 dark:bg-orange-900/30">
+                                                                        <Box
+                                                                            className="flex items-center gap-1 border border-orange-200 bg-orange-50 px-2.5 py-1 dark:border-orange-800 dark:bg-orange-900/30"
+                                                                            sx={{
+                                                                                borderRadius:
+                                                                                    "12px",
+                                                                            }}
+                                                                        >
                                                                             <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-orange-500"></div>
                                                                             <span className="text-xs font-medium text-orange-700 dark:text-orange-300">
                                                                                 Migrating{" "}
@@ -1005,23 +1070,34 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                                                     cluster.migratingSlot
                                                                                 }
                                                                             </span>
-                                                                        </div>
+                                                                        </Box>
                                                                     )}
 
                                                                 {(!cluster.hasMigration ||
                                                                     cluster.migratingSlot ===
                                                                         -1) && (
-                                                                    <div className="flex items-center gap-1 rounded-full border border-green-200 bg-green-50 px-2.5 py-1 dark:border-green-800 dark:bg-green-900/30">
+                                                                    <Box
+                                                                        className="flex items-center gap-1 border border-green-200 bg-green-50 px-2.5 py-1 dark:border-green-800 dark:bg-green-900/30"
+                                                                        sx={{
+                                                                            borderRadius: "12px",
+                                                                        }}
+                                                                    >
                                                                         <div className="h-1.5 w-1.5 rounded-full bg-green-500"></div>
                                                                         <span className="text-xs font-medium text-green-700 dark:text-green-300">
                                                                             Stable
                                                                         </span>
-                                                                    </div>
+                                                                    </Box>
                                                                 )}
 
                                                                 {cluster.hasImporting &&
                                                                     cluster.importingSlot >= 0 && (
-                                                                        <div className="flex items-center gap-1 rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 dark:border-blue-800 dark:bg-blue-900/30">
+                                                                        <Box
+                                                                            className="flex items-center gap-1 border border-blue-200 bg-blue-50 px-2.5 py-1 dark:border-blue-800 dark:bg-blue-900/30"
+                                                                            sx={{
+                                                                                borderRadius:
+                                                                                    "12px",
+                                                                            }}
+                                                                        >
                                                                             <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500"></div>
                                                                             <span className="text-xs font-medium text-blue-700 dark:text-blue-300">
                                                                                 Importing{" "}
@@ -1029,7 +1105,7 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                                                     cluster.importingSlot
                                                                                 }
                                                                             </span>
-                                                                        </div>
+                                                                        </Box>
                                                                     )}
                                                             </div>
 
@@ -1067,6 +1143,7 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                             color="secondary"
                                                             variant="outlined"
                                                             className="whitespace-nowrap"
+                                                            sx={{ borderRadius: "12px" }}
                                                         />
 
                                                         <Chip
@@ -1078,6 +1155,7 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                             color="default"
                                                             variant="outlined"
                                                             className="whitespace-nowrap"
+                                                            sx={{ borderRadius: "12px" }}
                                                         />
 
                                                         {!cluster.hasSlots && (
@@ -1088,6 +1166,7 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                                 color="info"
                                                                 variant="outlined"
                                                                 className="whitespace-nowrap"
+                                                                sx={{ borderRadius: "12px" }}
                                                             />
                                                         )}
 
@@ -1098,12 +1177,16 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                                 color="primary"
                                                                 variant="outlined"
                                                                 className="whitespace-nowrap"
+                                                                sx={{ borderRadius: "12px" }}
                                                             />
                                                         )}
                                                     </div>
 
                                                     <div className="hidden space-x-3 sm:ml-8 md:flex lg:hidden xl:flex 2xl:hidden">
-                                                        <div className="flex flex-col items-center rounded-lg border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50">
+                                                        <Box
+                                                            className="flex flex-col items-center border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50"
+                                                            sx={{ borderRadius: "12px" }}
+                                                        >
                                                             <Typography
                                                                 variant="caption"
                                                                 className="text-gray-500 dark:text-gray-400"
@@ -1116,9 +1199,12 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                             >
                                                                 {cluster.shardCount}
                                                             </Typography>
-                                                        </div>
+                                                        </Box>
 
-                                                        <div className="flex flex-col items-center rounded-lg border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50">
+                                                        <Box
+                                                            className="flex flex-col items-center border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50"
+                                                            sx={{ borderRadius: "12px" }}
+                                                        >
                                                             <Typography
                                                                 variant="caption"
                                                                 className="text-gray-500 dark:text-gray-400"
@@ -1131,13 +1217,14 @@ export default function Namespace({ params }: { params: { namespace: string } })
                                                             >
                                                                 {cluster.nodeCount}
                                                             </Typography>
-                                                        </div>
+                                                        </Box>
                                                     </div>
 
                                                     <div className="ml-2 mt-3 flex items-center space-x-2 sm:mt-0">
                                                         <Link
                                                             href={`/namespaces/${params.namespace}/clusters/${cluster.name}`}
-                                                            className="rounded-full bg-primary/10 p-2 text-primary transition-colors hover:bg-primary/20 dark:bg-primary-dark/20 dark:text-primary-light dark:hover:bg-primary-dark/30"
+                                                            className="bg-primary/10 p-2 text-primary transition-colors hover:bg-primary/20 dark:bg-primary-dark/20 dark:text-primary-light dark:hover:bg-primary-dark/30"
+                                                            style={{ borderRadius: "16px" }}
                                                         >
                                                             <ChevronRightIcon />
                                                         </Link>
diff --git a/webui/src/app/namespaces/page.tsx b/webui/src/app/namespaces/page.tsx
index da98120a..93384713 100644
--- a/webui/src/app/namespaces/page.tsx
+++ b/webui/src/app/namespaces/page.tsx
@@ -265,7 +265,10 @@ export default function Namespace() {
 
                         <div className="flex w-full flex-row items-center gap-2 lg:w-auto">
                             <div className="search-container relative max-w-md flex-grow transition-all duration-300 lg:min-w-[280px]">
-                                <div className="search-inner relative w-full rounded-lg bg-gray-50 transition-all duration-300 focus-within:bg-white focus-within:shadow-md dark:bg-dark-paper/90 dark:focus-within:bg-dark-paper">
+                                <div
+                                    className="search-inner relative w-full bg-gray-50 transition-all duration-300 focus-within:bg-white focus-within:shadow-md dark:bg-dark-paper/90 dark:focus-within:bg-dark-paper"
+                                    style={{ borderRadius: "16px" }}
+                                >
                                     <div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
                                         <SearchIcon
                                             className="text-gray-400"
@@ -275,7 +278,8 @@ export default function Namespace() {
                                     <input
                                         type="text"
                                         placeholder="Search namespaces..."
-                                        className="w-full rounded-lg border-0 bg-transparent py-2.5 pl-9 pr-4 text-sm text-gray-800 outline-none ring-1 ring-gray-200 transition-all focus:ring-2 focus:ring-primary dark:text-gray-200 dark:ring-gray-700 dark:focus:ring-primary-light"
+                                        className="w-full border-0 bg-transparent py-2.5 pl-9 pr-4 text-sm text-gray-800 outline-none ring-1 ring-gray-200 transition-all focus:ring-2 focus:ring-primary dark:text-gray-200 dark:ring-gray-700 dark:focus:ring-primary-light"
+                                        style={{ borderRadius: "16px" }}
                                         value={searchTerm}
                                         onChange={(e) => setSearchTerm(e.target.value)}
                                     />
@@ -295,10 +299,11 @@ export default function Namespace() {
                                     <Button
                                         variant="contained"
                                         color="primary"
-                                        className="whitespace-nowrap rounded-lg px-5 py-2.5 font-medium shadow-md transition-all hover:shadow-lg"
+                                        className="whitespace-nowrap px-5 py-2.5 font-medium shadow-md transition-all hover:shadow-lg"
                                         startIcon={<AddIcon />}
                                         disableElevation
                                         size="medium"
+                                        style={{ borderRadius: "16px" }}
                                     >
                                         Create Namespace
                                     </Button>
@@ -312,10 +317,14 @@ export default function Namespace() {
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    style={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-blue-500 dark:bg-blue-900/30 dark:text-blue-400">
+                                        <div
+                                            className="flex h-12 w-12 items-center justify-center bg-blue-50 text-blue-500 dark:bg-blue-900/30 dark:text-blue-400"
+                                            style={{ borderRadius: "16px" }}
+                                        >
                                             <FolderIcon sx={{ fontSize: 24 }} />
                                         </div>
                                         <div className="flex flex-col items-end">
@@ -333,17 +342,24 @@ export default function Namespace() {
                                             </Typography>
                                         </div>
                                     </div>
-                                    <div className="absolute -bottom-4 -right-4 h-24 w-24 rounded-full bg-blue-500/5 blur-xl"></div>
+                                    <div
+                                        className="absolute -bottom-4 -right-4 h-24 w-24 bg-blue-500/5 blur-xl"
+                                        style={{ borderRadius: "50%" }}
+                                    ></div>
                                 </Paper>
                             </Grid>
 
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    style={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-400">
+                                        <div
+                                            className="flex h-12 w-12 items-center justify-center bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-400"
+                                            style={{ borderRadius: "16px" }}
+                                        >
                                             <StorageIcon sx={{ fontSize: 24 }} />
                                         </div>
                                         <div className="flex flex-col items-end">
@@ -361,17 +377,24 @@ export default function Namespace() {
                                             </Typography>
                                         </div>
                                     </div>
-                                    <div className="absolute -bottom-4 -right-4 h-24 w-24 rounded-full bg-purple-500/5 blur-xl"></div>
+                                    <div
+                                        className="absolute -bottom-4 -right-4 h-24 w-24 bg-purple-500/5 blur-xl"
+                                        style={{ borderRadius: "50%" }}
+                                    ></div>
                                 </Paper>
                             </Grid>
 
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    style={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400">
+                                        <div
+                                            className="flex h-12 w-12 items-center justify-center bg-green-50 text-green-500 dark:bg-green-900/30 dark:text-green-400"
+                                            style={{ borderRadius: "16px" }}
+                                        >
                                             <DnsIcon sx={{ fontSize: 24 }} />
                                         </div>
                                         <div className="flex flex-col items-end">
@@ -389,17 +412,24 @@ export default function Namespace() {
                                             </Typography>
                                         </div>
                                     </div>
-                                    <div className="absolute -bottom-4 -right-4 h-24 w-24 rounded-full bg-green-500/5 blur-xl"></div>
+                                    <div
+                                        className="absolute -bottom-4 -right-4 h-24 w-24 bg-green-500/5 blur-xl"
+                                        style={{ borderRadius: "50%" }}
+                                    ></div>
                                 </Paper>
                             </Grid>
 
                             <Grid item xs={12} sm={6} lg={3}>
                                 <Paper
                                     elevation={0}
-                                    className="relative h-full overflow-hidden rounded-2xl border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    className="relative h-full overflow-hidden border border-gray-100 p-4 transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                                    style={{ borderRadius: "20px" }}
                                 >
                                     <div className="flex items-center justify-between">
-                                        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 text-amber-500 dark:bg-amber-900/30 dark:text-amber-400">
+                                        <div
+                                            className="flex h-12 w-12 items-center justify-center bg-amber-50 text-amber-500 dark:bg-amber-900/30 dark:text-amber-400"
+                                            style={{ borderRadius: "16px" }}
+                                        >
                                             <DeviceHubIcon sx={{ fontSize: 24 }} />
                                         </div>
                                         <div className="flex flex-col items-end">
@@ -417,7 +447,10 @@ export default function Namespace() {
                                             </Typography>
                                         </div>
                                     </div>
-                                    <div className="absolute -bottom-4 -right-4 h-24 w-24 rounded-full bg-amber-500/5 blur-xl"></div>
+                                    <div
+                                        className="absolute -bottom-4 -right-4 h-24 w-24 bg-amber-500/5 blur-xl"
+                                        style={{ borderRadius: "50%" }}
+                                    ></div>
                                 </Paper>
                             </Grid>
                         </Grid>
@@ -425,7 +458,8 @@ export default function Namespace() {
 
                     <Paper
                         elevation={0}
-                        className="overflow-hidden rounded-2xl border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        className="overflow-hidden border border-gray-100 transition-all hover:shadow-md dark:border-gray-800 dark:bg-dark-paper"
+                        style={{ borderRadius: "20px" }}
                     >
                         <div className="border-b border-gray-100 px-6 py-3 dark:border-gray-800 sm:px-8">
                             <div className="flex items-center justify-between">
@@ -441,7 +475,8 @@ export default function Namespace() {
                                             size="small"
                                             onClick={handleFilterClick}
                                             aria-describedby={filterId}
-                                            className="rounded-full bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            className="bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            style={{ borderRadius: "16px" }}
                                         >
                                             <FilterListIcon fontSize="small" />
                                         </IconButton>
@@ -451,7 +486,8 @@ export default function Namespace() {
                                             size="small"
                                             onClick={handleSortClick}
                                             aria-describedby={sortId}
-                                            className="rounded-full bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            className="bg-gray-50 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                            style={{ borderRadius: "16px" }}
                                         >
                                             <SortIcon fontSize="small" />
                                         </IconButton>
@@ -475,10 +511,9 @@ export default function Namespace() {
                             }}
                             TransitionComponent={Fade}
                             PaperProps={{
-                                className:
-                                    "rounded-xl shadow-xl border border-gray-100 dark:border-gray-700",
+                                className: "shadow-xl border border-gray-100 dark:border-gray-700",
                                 elevation: 3,
-                                sx: { width: 280 },
+                                sx: { width: 280, borderRadius: "20px" },
                             }}
                         >
                             <div className="p-4">
@@ -495,7 +530,10 @@ export default function Namespace() {
                                     }
                                 >
                                     <div className="space-y-2">
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            style={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="all"
                                                 control={
@@ -503,7 +541,10 @@ export default function Namespace() {
                                                         size="small"
                                                         className="text-primary"
                                                         checkedIcon={
-                                                            <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">
+                                                            <div
+                                                                className="flex h-5 w-5 items-center justify-center border-2 border-primary bg-primary text-white"
+                                                                style={{ borderRadius: "50%" }}
+                                                            >
                                                                 <CheckIcon
                                                                     style={{ fontSize: 12 }}
                                                                 />
@@ -526,9 +567,12 @@ export default function Namespace() {
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <div
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            style={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="with-clusters"
                                                 control={
@@ -536,7 +580,10 @@ export default function Namespace() {
                                                         size="small"
                                                         className="text-primary"
                                                         checkedIcon={
-                                                            <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">
+                                                            <div
+                                                                className="flex h-5 w-5 items-center justify-center border-2 border-primary bg-primary text-white"
+                                                                style={{ borderRadius: "50%" }}
+                                                            >
                                                                 <CheckIcon
                                                                     style={{ fontSize: 12 }}
                                                                 />
@@ -565,7 +612,10 @@ export default function Namespace() {
                                             />
                                         </div>
 
-                                        <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                        <Box
+                                            className="bg-gray-50 p-2 dark:bg-gray-800"
+                                            sx={{ borderRadius: "12px" }}
+                                        >
                                             <FormControlLabel
                                                 value="no-clusters"
                                                 control={
@@ -573,7 +623,10 @@ export default function Namespace() {
                                                         size="small"
                                                         className="text-primary"
                                                         checkedIcon={
-                                                            <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">
+                                                            <div
+                                                                className="flex h-5 w-5 items-center justify-center border-2 border-primary bg-primary text-white"
+                                                                style={{ borderRadius: "50%" }}
+                                                            >
                                                                 <CheckIcon
                                                                     style={{ fontSize: 12 }}
                                                                 />
@@ -600,7 +653,7 @@ export default function Namespace() {
                                                 }
                                                 className="m-0 w-full"
                                             />
-                                        </div>
+                                        </Box>
                                     </div>
                                 </RadioGroup>
 
@@ -609,7 +662,8 @@ export default function Namespace() {
                                         variant="text"
                                         size="small"
                                         onClick={handleFilterClose}
-                                        className="rounded-lg px-3 py-1 text-xs"
+                                        className="px-3 py-1 text-xs"
+                                        style={{ borderRadius: "12px" }}
                                     >
                                         Close
                                     </Button>
@@ -632,10 +686,9 @@ export default function Namespace() {
                             }}
                             TransitionComponent={Fade}
                             PaperProps={{
-                                className:
-                                    "rounded-xl shadow-xl border border-gray-100 dark:border-gray-700",
+                                className: "shadow-xl border border-gray-100 dark:border-gray-700",
                                 elevation: 3,
-                                sx: { width: 280 },
+                                sx: { width: 280, borderRadius: "20px" },
                             }}
                         >
                             <div className="p-4">
@@ -654,7 +707,10 @@ export default function Namespace() {
                                             Name
                                         </div>
                                         <div className="space-y-1">
-                                            <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                            <Box
+                                                className="bg-gray-50 p-2 dark:bg-gray-800"
+                                                sx={{ borderRadius: "12px" }}
+                                            >
                                                 <FormControlLabel
                                                     value="name-asc"
                                                     control={
@@ -662,7 +718,10 @@ export default function Namespace() {
                                                             size="small"
                                                             className="text-primary"
                                                             checkedIcon={
-                                                                <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">
+                                                                <div
+                                                                    className="flex h-5 w-5 items-center justify-center border-2 border-primary bg-primary text-white"
+                                                                    style={{ borderRadius: "50%" }}
+                                                                >
                                                                     <CheckIcon
                                                                         style={{ fontSize: 12 }}
                                                                     />
@@ -683,8 +742,11 @@ export default function Namespace() {
                                                     }
                                                     className="m-0 w-full"
                                                 />
-                                            </div>
-                                            <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                            </Box>
+                                            <Box
+                                                className="bg-gray-50 p-2 dark:bg-gray-800"
+                                                sx={{ borderRadius: "12px" }}
+                                            >
                                                 <FormControlLabel
                                                     value="name-desc"
                                                     control={
@@ -692,7 +754,10 @@ export default function Namespace() {
                                                             size="small"
                                                             className="text-primary"
                                                             checkedIcon={
-                                                                <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">
+                                                                <div
+                                                                    className="flex h-5 w-5 items-center justify-center border-2 border-primary bg-primary text-white"
+                                                                    style={{ borderRadius: "50%" }}
+                                                                >
                                                                     <CheckIcon
                                                                         style={{ fontSize: 12 }}
                                                                     />
@@ -713,14 +778,17 @@ export default function Namespace() {
                                                     }
                                                     className="m-0 w-full"
                                                 />
-                                            </div>
+                                            </Box>
                                         </div>
 
                                         <div className="mb-2 mt-4 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                                             Clusters
                                         </div>
                                         <div className="space-y-1">
-                                            <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                            <Box
+                                                className="bg-gray-50 p-2 dark:bg-gray-800"
+                                                sx={{ borderRadius: "12px" }}
+                                            >
                                                 <FormControlLabel
                                                     value="clusters-desc"
                                                     control={
@@ -728,7 +796,10 @@ export default function Namespace() {
                                                             size="small"
                                                             className="text-primary"
                                                             checkedIcon={
-                                                                <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">
+                                                                <div
+                                                                    className="flex h-5 w-5 items-center justify-center border-2 border-primary bg-primary text-white"
+                                                                    style={{ borderRadius: "50%" }}
+                                                                >
                                                                     <CheckIcon
                                                                         style={{ fontSize: 12 }}
                                                                     />
@@ -749,8 +820,11 @@ export default function Namespace() {
                                                     }
                                                     className="m-0 w-full"
                                                 />
-                                            </div>
-                                            <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                            </Box>
+                                            <Box
+                                                className="bg-gray-50 p-2 dark:bg-gray-800"
+                                                sx={{ borderRadius: "12px" }}
+                                            >
                                                 <FormControlLabel
                                                     value="clusters-asc"
                                                     control={
@@ -758,7 +832,10 @@ export default function Namespace() {
                                                             size="small"
                                                             className="text-primary"
                                                             checkedIcon={
-                                                                <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">
+                                                                <div
+                                                                    className="flex h-5 w-5 items-center justify-center border-2 border-primary bg-primary text-white"
+                                                                    style={{ borderRadius: "50%" }}
+                                                                >
                                                                     <CheckIcon
                                                                         style={{ fontSize: 12 }}
                                                                     />
@@ -779,14 +856,17 @@ export default function Namespace() {
                                                     }
                                                     className="m-0 w-full"
                                                 />
-                                            </div>
+                                            </Box>
                                         </div>
 
                                         <div className="mb-2 mt-4 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                                             Nodes
                                         </div>
                                         <div className="space-y-1">
-                                            <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                            <Box
+                                                className="bg-gray-50 p-2 dark:bg-gray-800"
+                                                sx={{ borderRadius: "12px" }}
+                                            >
                                                 <FormControlLabel
                                                     value="nodes-desc"
                                                     control={
@@ -794,7 +874,10 @@ export default function Namespace() {
                                                             size="small"
                                                             className="text-primary"
                                                             checkedIcon={
-                                                                <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">
+                                                                <div
+                                                                    className="flex h-5 w-5 items-center justify-center border-2 border-primary bg-primary text-white"
+                                                                    style={{ borderRadius: "50%" }}
+                                                                >
                                                                     <CheckIcon
                                                                         style={{ fontSize: 12 }}
                                                                     />
@@ -815,8 +898,11 @@ export default function Namespace() {
                                                     }
                                                     className="m-0 w-full"
                                                 />
-                                            </div>
-                                            <div className="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
+                                            </Box>
+                                            <Box
+                                                className="bg-gray-50 p-2 dark:bg-gray-800"
+                                                sx={{ borderRadius: "12px" }}
+                                            >
                                                 <FormControlLabel
                                                     value="nodes-asc"
                                                     control={
@@ -824,7 +910,10 @@ export default function Namespace() {
                                                             size="small"
                                                             className="text-primary"
                                                             checkedIcon={
-                                                                <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-primary bg-primary text-white">
+                                                                <div
+                                                                    className="flex h-5 w-5 items-center justify-center border-2 border-primary bg-primary text-white"
+                                                                    style={{ borderRadius: "50%" }}
+                                                                >
                                                                     <CheckIcon
                                                                         style={{ fontSize: 12 }}
                                                                     />
@@ -845,7 +934,7 @@ export default function Namespace() {
                                                     }
                                                     className="m-0 w-full"
                                                 />
-                                            </div>
+                                            </Box>
                                         </div>
                                     </div>
                                 </RadioGroup>
@@ -855,7 +944,8 @@ export default function Namespace() {
                                         variant="text"
                                         size="small"
                                         onClick={handleSortClose}
-                                        className="rounded-lg px-3 py-1 text-xs"
+                                        className="px-3 py-1 text-xs"
+                                        style={{ borderRadius: "12px" }}
                                     >
                                         Close
                                     </Button>
@@ -872,10 +962,14 @@ export default function Namespace() {
                                     >
                                         <Paper
                                             elevation={0}
-                                            className="overflow-hidden rounded-xl border border-transparent bg-white p-4 transition-all group-hover:border-primary/10 group-hover:shadow-sm dark:bg-dark-paper dark:group-hover:border-primary-dark/20"
+                                            className="overflow-hidden border border-transparent bg-white p-4 transition-all group-hover:border-primary/10 group-hover:shadow-sm dark:bg-dark-paper dark:group-hover:border-primary-dark/20"
+                                            style={{ borderRadius: "20px" }}
                                         >
                                             <div className="flex flex-col items-start sm:flex-row sm:items-center">
-                                                <div className="mb-3 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-500 dark:bg-blue-900/30 dark:text-blue-400 sm:mb-0">
+                                                <div
+                                                    className="mb-3 flex h-14 w-14 flex-shrink-0 items-center justify-center bg-blue-50 text-blue-500 dark:bg-blue-900/30 dark:text-blue-400 sm:mb-0"
+                                                    style={{ borderRadius: "16px" }}
+                                                >
                                                     <FolderIcon sx={{ fontSize: 28 }} />
                                                 </div>
 
@@ -912,6 +1006,7 @@ export default function Namespace() {
                                                             color="primary"
                                                             variant="outlined"
                                                             className="whitespace-nowrap"
+                                                            style={{ borderRadius: "12px" }}
                                                         />
 
                                                         <Chip
@@ -921,6 +1016,7 @@ export default function Namespace() {
                                                             color="secondary"
                                                             variant="outlined"
                                                             className="whitespace-nowrap"
+                                                            style={{ borderRadius: "12px" }}
                                                         />
 
                                                         <Chip
@@ -932,11 +1028,15 @@ export default function Namespace() {
                                                             color="default"
                                                             variant="outlined"
                                                             className="whitespace-nowrap"
+                                                            style={{ borderRadius: "12px" }}
                                                         />
                                                     </div>
 
                                                     <div className="hidden space-x-3 sm:ml-8 md:flex lg:hidden xl:flex 2xl:hidden">
-                                                        <div className="flex flex-col items-center rounded-lg border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50">
+                                                        <div
+                                                            className="flex flex-col items-center border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50"
+                                                            style={{ borderRadius: "12px" }}
+                                                        >
                                                             <Typography
                                                                 variant="caption"
                                                                 className="text-gray-500 dark:text-gray-400"
@@ -951,7 +1051,10 @@ export default function Namespace() {
                                                             </Typography>
                                                         </div>
 
-                                                        <div className="flex flex-col items-center rounded-lg border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50">
+                                                        <div
+                                                            className="flex flex-col items-center border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50"
+                                                            style={{ borderRadius: "12px" }}
+                                                        >
                                                             <Typography
                                                                 variant="caption"
                                                                 className="text-gray-500 dark:text-gray-400"
@@ -966,7 +1069,10 @@ export default function Namespace() {
                                                             </Typography>
                                                         </div>
 
-                                                        <div className="flex flex-col items-center rounded-lg border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50">
+                                                        <div
+                                                            className="flex flex-col items-center border border-gray-100 bg-gray-50 px-4 py-2 dark:border-gray-800 dark:bg-gray-800/50"
+                                                            style={{ borderRadius: "12px" }}
+                                                        >
                                                             <Typography
                                                                 variant="caption"
                                                                 className="text-gray-500 dark:text-gray-400"
@@ -990,14 +1096,16 @@ export default function Namespace() {
                                                             disabled={
                                                                 deletingNamespace === nsData.name
                                                             }
-                                                            className="rounded-full bg-gray-100 p-2 text-gray-600 transition-colors hover:bg-red-100 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-red-900/30 dark:hover:text-red-400"
+                                                            className="bg-gray-100 p-2 text-gray-600 transition-colors hover:bg-red-100 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-red-900/30 dark:hover:text-red-400"
+                                                            style={{ borderRadius: "16px" }}
                                                         >
                                                             <DeleteIcon />
                                                         </button>
 
                                                         <Link
                                                             href={`/namespaces/${nsData.name}`}
-                                                            className="rounded-full bg-primary/10 p-2 text-primary transition-colors hover:bg-primary/20 dark:bg-primary-dark/20 dark:text-primary-light dark:hover:bg-primary-dark/30"
+                                                            className="bg-primary/10 p-2 text-primary transition-colors hover:bg-primary/20 dark:bg-primary-dark/20 dark:text-primary-light dark:hover:bg-primary-dark/30"
+                                                            style={{ borderRadius: "16px" }}
                                                         >
                                                             <ChevronRightIcon />
                                                         </Link>
diff --git a/webui/src/app/page.tsx b/webui/src/app/page.tsx
index 93923a80..cc049e41 100644
--- a/webui/src/app/page.tsx
+++ b/webui/src/app/page.tsx
@@ -268,7 +268,10 @@ export default function Home() {
                             style={heroParallax}
                         >
                             <Box className="space-y-6 md:pr-8">
-                                <div className="inline-flex items-center rounded-full bg-gradient-to-r from-primary/80 to-primary px-4 py-1.5 text-white shadow-lg">
+                                <div
+                                    className="inline-flex items-center bg-gradient-to-r from-primary/80 to-primary px-4 py-1.5 text-white shadow-lg"
+                                    style={{ borderRadius: "16px" }}
+                                >
                                     <span className="mr-2 text-xs font-medium uppercase tracking-wider">
                                         Apache Software Foundation
                                     </span>
@@ -305,9 +308,10 @@ export default function Home() {
                                     <Button
                                         variant="contained"
                                         size="large"
-                                        className="transform rounded-full bg-gradient-to-r from-primary to-primary-dark px-8 py-3 text-lg shadow-lg transition-all duration-300 will-change-transform hover:-translate-y-1 hover:shadow-xl"
+                                        className="transform bg-gradient-to-r from-primary to-primary-dark px-8 py-3 text-lg shadow-lg transition-all duration-300 will-change-transform hover:-translate-y-1 hover:shadow-xl"
                                         onClick={handleGetStarted}
                                         endIcon={<ArrowForwardIcon />}
+                                        style={{ borderRadius: "16px" }}
                                     >
                                         Get Started
                                     </Button>
@@ -315,10 +319,11 @@ export default function Home() {
                                     <Button
                                         variant="outlined"
                                         size="large"
-                                        className="transform rounded-full border-2 border-primary px-8 py-3 text-lg text-primary transition-all duration-300 will-change-transform hover:-translate-y-1 hover:bg-primary/5 dark:border-primary-light dark:text-primary-light"
+                                        className="transform border-2 border-primary px-8 py-3 text-lg text-primary transition-all duration-300 will-change-transform hover:-translate-y-1 hover:bg-primary/5 dark:border-primary-light dark:text-primary-light"
                                         href="https://github.com/apache/kvrocks"
                                         target="_blank"
                                         startIcon={<GitHubIcon />}
+                                        style={{ borderRadius: "16px" }}
                                     >
                                         GitHub
                                     </Button>
@@ -350,7 +355,10 @@ export default function Home() {
                                 <div className="absolute inset-0 rotate-3 scale-105 transform rounded-3xl bg-gradient-to-r from-blue-100/50 to-indigo-100/50 blur-xl will-change-transform dark:from-blue-900/20 dark:to-indigo-900/20"></div>
 
                                 <div className="relative z-10 transform transition-all duration-700 will-change-transform hover:rotate-2 hover:scale-105">
-                                    <div className="w-full overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-gray-800">
+                                    <div
+                                        className="w-full overflow-hidden bg-white shadow-2xl dark:bg-gray-800"
+                                        style={{ borderRadius: "20px" }}
+                                    >
                                         <div className="flex items-center bg-gray-100 px-4 py-2 dark:bg-gray-900">
                                             <div className="flex space-x-2">
                                                 <div className="h-3 w-3 rounded-full bg-red-500"></div>
@@ -438,25 +446,33 @@ export default function Home() {
 
                 <Container maxWidth="lg" className="relative z-10">
                     <Box className="mb-16 text-center">
-                        <div className="mb-4 inline-block rounded-lg bg-primary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-primary dark:bg-primary-dark/20 dark:text-primary-light">
+                        <div
+                            className="mb-4 inline-block bg-primary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-primary dark:bg-primary-dark/20 dark:text-primary-light"
+                            style={{ borderRadius: "12px" }}
+                        >
                             Powerful Features
                         </div>
 
                         <Typography
                             variant="h2"
-                            className="mb-4 font-bold text-gray-900 dark:text-gray-100"
-                            sx={{ fontSize: { xs: "2rem", sm: "2.5rem", md: "3rem" } }}
+                            className="mb-4 text-gray-900 dark:text-gray-100"
+                            sx={{
+                                fontSize: { xs: "2rem", sm: "2.5rem", md: "3rem" },
+                                fontWeight: 500,
+                            }}
                         >
                             Why Choose Kvrocks?
                         </Typography>
 
-                        <Typography
-                            variant="body1"
-                            className="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300"
-                        >
-                            Apache Kvrocks offers powerful capabilities that make it an excellent
-                            choice for your database needs
-                        </Typography>
+                        <div className="mt-6 flex justify-center">
+                            <Typography
+                                variant="body1"
+                                className="max-w-2xl text-center text-lg text-gray-600 dark:text-gray-300"
+                            >
+                                Apache Kvrocks offers powerful capabilities that make it an
+                                excellent choice for your database needs
+                            </Typography>
+                        </div>
                     </Box>
 
                     <Grid container spacing={4}>
@@ -464,8 +480,9 @@ export default function Home() {
                             <Grid item xs={12} sm={6} md={3} key={index}>
                                 <Card
                                     elevation={0}
-                                    className={`h-full overflow-hidden rounded-xl border border-gray-100 bg-white/90 backdrop-blur-sm transition-all duration-500 hover:-translate-y-2 hover:border-primary/30 hover:shadow-xl dark:border-gray-800 dark:bg-dark-paper/90 dark:hover:border-primary-light/30 ${isLoaded ? "translate-y-0 opacity-100" : "translate-y-12 opacity-0"}`}
+                                    className={`h-full overflow-hidden border border-gray-100 bg-white/90 backdrop-blur-sm transition-all duration-500 hover:-translate-y-2 hover:border-primary/30 hover:shadow-xl dark:border-gray-800 dark:bg-dark-paper/90 dark:hover:border-primary-light/30 ${isLoaded ? "translate-y-0 opacity-100" : "translate-y-12 opacity-0"}`}
                                     style={{
+                                        borderRadius: "24px",
                                         transitionDelay: `${feature.delay}ms`,
                                         transform: isLoaded
                                             ? "translateY(0) scale(1)"
@@ -475,8 +492,11 @@ export default function Home() {
                                 >
                                     <CardContent className="flex h-full flex-col items-center p-6 text-center">
                                         <div
-                                            className="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl text-white shadow-lg transition-transform duration-200 will-change-transform hover:scale-110"
-                                            style={{ backgroundColor: feature.color }}
+                                            className="mb-6 flex h-16 w-16 items-center justify-center text-white shadow-lg transition-transform duration-200 will-change-transform hover:scale-110"
+                                            style={{
+                                                backgroundColor: feature.color,
+                                                borderRadius: "24px",
+                                            }}
                                         >
                                             {feature.icon}
                                         </div>
@@ -523,14 +543,20 @@ export default function Home() {
 
                 <Container maxWidth="lg" className="relative z-10">
                     <Box className="mb-16 text-center">
-                        <div className="mb-4 inline-block rounded-lg bg-secondary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-secondary dark:bg-secondary-dark/20 dark:text-secondary-light">
+                        <div
+                            className="mb-4 inline-block bg-secondary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-secondary dark:bg-secondary-dark/20 dark:text-secondary-light"
+                            style={{ borderRadius: "12px" }}
+                        >
                             Powerful Management
                         </div>
 
                         <Typography
                             variant="h2"
-                            className="mb-4 font-bold text-gray-900 dark:text-gray-100"
-                            sx={{ fontSize: { xs: "2rem", sm: "2.5rem", md: "3rem" } }}
+                            className="mb-4 text-gray-900 dark:text-gray-100"
+                            sx={{
+                                fontSize: { xs: "2rem", sm: "2.5rem", md: "3rem" },
+                                fontWeight: 500,
+                            }}
                         >
                             About Kvrocks Controller
                         </Typography>
@@ -538,7 +564,8 @@ export default function Home() {
 
                     <Card
                         elevation={0}
-                        className="overflow-hidden rounded-3xl border border-gray-100 bg-white/80 shadow-2xl backdrop-blur-sm will-change-transform dark:border-gray-800 dark:bg-dark-paper/80"
+                        className="overflow-hidden border border-gray-100 bg-white/80 shadow-2xl backdrop-blur-sm will-change-transform dark:border-gray-800 dark:bg-dark-paper/80"
+                        style={{ borderRadius: "32px" }}
                     >
                         <CardContent className="p-0">
                             <Grid container sx={{ minHeight: "500px" }}>
@@ -546,28 +573,35 @@ export default function Home() {
                                     <Box className="flex h-full flex-col justify-center p-8 md:p-12">
                                         <Typography
                                             variant="h3"
-                                            className="mb-6 font-bold text-gray-900 dark:text-gray-100"
+                                            className="mb-10 font-bold text-gray-900 dark:text-gray-100"
                                         >
                                             Simplified Management
                                         </Typography>
 
+                                        <div className="mb-8"></div>
+
                                         <Typography
                                             variant="body1"
-                                            className="mb-8 text-gray-700 dark:text-gray-300"
+                                            className="mb-12 text-gray-700 dark:text-gray-300"
                                         >
                                             Kvrocks Controller provides a web management interface
                                             for Apache Kvrocks clusters, enabling efficient
                                             distribution, monitoring, and maintenance of your Redis
                                             compatible database infrastructure.
                                         </Typography>
+                                        <div className="mb-4"></div>
 
                                         <div className="space-y-6">
                                             {benefits.map((benefit, index) => (
                                                 <div
                                                     key={index}
-                                                    className="flex items-start gap-4 rounded-xl border border-gray-100 bg-gray-50 p-4 transition-all will-change-transform hover:border-primary/30 hover:shadow-md dark:border-gray-800 dark:bg-dark/50"
+                                                    className="flex items-start gap-4 border border-gray-100 bg-gray-50 p-4 transition-all will-change-transform hover:border-primary/30 hover:shadow-md dark:border-gray-800 dark:bg-dark/50"
+                                                    style={{ borderRadius: "20px" }}
                                                 >
-                                                    <div className="rounded-lg bg-primary/10 p-3 text-primary dark:bg-primary-dark/20 dark:text-primary-light">
+                                                    <div
+                                                        className="bg-primary/10 p-3 text-primary dark:bg-primary-dark/20 dark:text-primary-light"
+                                                        style={{ borderRadius: "12px" }}
+                                                    >
                                                         {benefit.icon}
                                                     </div>
                                                     <div>
@@ -595,6 +629,7 @@ export default function Home() {
                                     xs={12}
                                     md={6}
                                     className="bg-gradient-to-br from-gray-900 to-gray-800 text-white dark:from-gray-900 dark:to-gray-800"
+                                    style={{ borderRadius: "20px" }}
                                 >
                                     <Box className="flex h-full flex-col p-8 md:p-12">
                                         <div className="mb-4 flex items-center">
@@ -609,7 +644,10 @@ export default function Home() {
                                             </div>
                                         </div>
 
-                                        <div className="relative flex-1 overflow-hidden rounded-xl bg-gray-950 p-6 font-mono text-sm">
+                                        <div
+                                            className="relative flex-1 overflow-hidden bg-gray-950 p-6 font-mono text-sm"
+                                            style={{ borderRadius: "20px" }}
+                                        >
                                             <div className="space-y-2">
                                                 <div className="text-green-400">
                                                     $ redis-cli -p 6666
@@ -665,6 +703,7 @@ export default function Home() {
                                                 size="small"
                                                 color="success"
                                                 className="bg-success/80 transition-colors hover:bg-success"
+                                                style={{ borderRadius: "12px" }}
                                             />
                                         </div>
                                     </Box>
@@ -684,19 +723,24 @@ export default function Home() {
                     <Box className="mb-16 text-center">
                         <Typography
                             variant="h2"
-                            className="mb-4 font-bold text-gray-900 dark:text-gray-100"
-                            sx={{ fontSize: { xs: "2rem", sm: "2.5rem", md: "3rem" } }}
+                            className="mb-4 text-gray-900 dark:text-gray-100"
+                            sx={{
+                                fontSize: { xs: "2rem", sm: "2.5rem", md: "3rem" },
+                                fontWeight: 500,
+                            }}
                         >
                             Resources
                         </Typography>
 
-                        <Typography
-                            variant="body1"
-                            className="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300"
-                        >
-                            Explore documentation and source code to get the most out of Kvrocks
-                            Controller
-                        </Typography>
+                        <div className="mt-6 flex justify-center">
+                            <Typography
+                                variant="body1"
+                                className="max-w-2xl text-center text-lg text-gray-600 dark:text-gray-300"
+                            >
+                                Explore documentation and source code to get the most out of Kvrocks
+                                Controller
+                            </Typography>
+                        </div>
                     </Box>
 
                     <Grid container spacing={4} justifyContent="center">
@@ -710,15 +754,19 @@ export default function Home() {
                                 >
                                     <Card
                                         elevation={0}
-                                        className="h-full overflow-hidden rounded-2xl border border-gray-100 bg-white/90 backdrop-blur-sm transition-all duration-500 will-change-transform hover:-translate-y-2 hover:border-primary/30 hover:shadow-xl dark:border-gray-800 dark:bg-dark-paper/90 dark:hover:border-primary-light/30"
-                                        style={{ transitionDelay: `${index * 200}ms` }}
+                                        className="h-full overflow-hidden border border-gray-100 bg-white/90 backdrop-blur-sm transition-all duration-500 will-change-transform hover:-translate-y-2 hover:border-primary/30 hover:shadow-xl dark:border-gray-800 dark:bg-dark-paper/90 dark:hover:border-primary-light/30"
+                                        style={{
+                                            transitionDelay: `${index * 200}ms`,
+                                            borderRadius: "24px",
+                                        }}
                                     >
                                         <CardContent className="p-8">
                                             <div
-                                                className="mb-6 flex h-14 w-14 items-center justify-center rounded-2xl"
+                                                className="mb-6 flex h-14 w-14 items-center justify-center"
                                                 style={{
                                                     background: resource.color,
                                                     color: "white",
+                                                    borderRadius: "20px",
                                                 }}
                                             >
                                                 {React.cloneElement(resource.icon, {
@@ -763,7 +811,8 @@ export default function Home() {
                 <Container maxWidth="md" className="relative z-10">
                     <Card
                         elevation={0}
-                        className="overflow-hidden rounded-3xl border-0 bg-gradient-to-br from-white/80 to-blue-50/80 shadow-2xl backdrop-blur-md will-change-transform dark:from-gray-900/80 dark:to-indigo-950/80"
+                        className="overflow-hidden border-0 bg-gradient-to-br from-white/80 to-blue-50/80 py-6 shadow-2xl backdrop-blur-md will-change-transform dark:from-gray-900/80 dark:to-indigo-950/80"
+                        style={{ borderRadius: "32px" }}
                     >
                         <CardContent className="p-12 text-center">
                             <Typography
@@ -773,20 +822,23 @@ export default function Home() {
                                 Ready to experience the power of Apache Kvrocks?
                             </Typography>
 
-                            <Typography
-                                variant="body1"
-                                className="mx-auto mb-10 max-w-2xl text-gray-700 dark:text-gray-300"
-                            >
-                                Start managing your distributed database infrastructure with our
-                                intuitive and powerful controller interface.
-                            </Typography>
+                            <div className="mb-4 mt-2 flex justify-center">
+                                <Typography
+                                    variant="body1"
+                                    className="max-w-2xl text-center text-gray-700 dark:text-gray-300"
+                                >
+                                    Start managing your distributed database infrastructure with our
+                                    intuitive and powerful controller interface.
+                                </Typography>
+                            </div>
 
                             <Button
                                 variant="contained"
                                 size="large"
-                                className="transform rounded-full bg-gradient-to-r from-primary to-primary-dark px-10 py-3 text-lg shadow-lg transition-all duration-300 will-change-transform hover:-translate-y-1 hover:shadow-xl"
+                                className="transform bg-gradient-to-r from-primary to-primary-dark px-10 py-3 text-lg shadow-lg transition-all duration-300 will-change-transform hover:-translate-y-1 hover:shadow-xl"
                                 onClick={handleGetStarted}
                                 endIcon={<ArrowForwardIcon />}
+                                style={{ borderRadius: "16px" }}
                             >
                                 Get Started Now
                             </Button>
diff --git a/webui/src/app/ui/formDialog.tsx b/webui/src/app/ui/formDialog.tsx
index 10a47bc9..8114513b 100644
--- a/webui/src/app/ui/formDialog.tsx
+++ b/webui/src/app/ui/formDialog.tsx
@@ -109,11 +109,12 @@ const FormDialog: React.FC<FormDialogProps> = ({
                 <Button
                     variant="contained"
                     onClick={openDialog}
-                    className="rounded-full px-4 py-1.5 text-xs font-medium shadow-sm transition-all duration-200 hover:shadow-md"
+                    className="px-4 py-1.5 text-xs font-medium shadow-sm transition-all duration-200 hover:shadow-md"
                     startIcon={<AddIcon sx={{ fontSize: 16 }} />}
                     size="small"
                     sx={{
                         textTransform: "none",
+                        borderRadius: "16px",
                         "&:hover": {
                             transform: "translateY(-1px)",
                         },
@@ -125,10 +126,11 @@ const FormDialog: React.FC<FormDialogProps> = ({
                 <Button
                     variant="outlined"
                     onClick={openDialog}
-                    className="w-full rounded-xl border-2 py-2.5 font-medium shadow-sm transition-all duration-200 hover:bg-primary/5 hover:shadow-md dark:border-primary-dark/60 dark:hover:bg-primary-dark/10"
+                    className="w-full border-2 py-2.5 font-medium shadow-sm transition-all duration-200 hover:bg-primary/5 hover:shadow-md dark:border-primary-dark/60 dark:hover:bg-primary-dark/10"
                     startIcon={<AddIcon />}
                     sx={{
                         textTransform: "none",
+                        borderRadius: "20px",
                         borderWidth: "1.5px",
                         "&:hover": {
                             borderWidth: "1.5px",
@@ -145,7 +147,7 @@ const FormDialog: React.FC<FormDialogProps> = ({
                 PaperProps={{
                     className: "overflow-hidden",
                     sx: {
-                        borderRadius: "16px",
+                        borderRadius: "24px",
                         boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
                         maxWidth: "500px",
                         width: "100%",
@@ -209,9 +211,10 @@ const FormDialog: React.FC<FormDialogProps> = ({
                                                     key={index}
                                                     label={option}
                                                     size="small"
-                                                    className="rounded-full bg-primary-light/20 dark:bg-primary-dark/20"
+                                                    className="bg-primary-light/20 dark:bg-primary-dark/20"
                                                     sx={{
                                                         fontWeight: 500,
+                                                        borderRadius: "12px",
                                                         "& .MuiChip-deleteIcon": {
                                                             color:
                                                                 theme.palette.mode === "dark"
@@ -240,7 +243,7 @@ const FormDialog: React.FC<FormDialogProps> = ({
                                                 className="rounded-xl bg-white dark:bg-dark-paper/70"
                                                 sx={{
                                                     "& .MuiOutlinedInput-root": {
-                                                        borderRadius: "12px",
+                                                        borderRadius: "16px",
                                                         transition: "all 0.2s ease",
                                                         "&.Mui-focused": {
                                                             boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
@@ -269,7 +272,7 @@ const FormDialog: React.FC<FormDialogProps> = ({
                                         size="small"
                                         className="rounded-xl bg-white dark:bg-dark-paper/70"
                                         sx={{
-                                            borderRadius: "12px",
+                                            borderRadius: "16px",
                                             "& .MuiOutlinedInput-notchedOutline": {
                                                 borderColor: alpha(theme.palette.divider, 0.8),
                                             },
@@ -290,7 +293,7 @@ const FormDialog: React.FC<FormDialogProps> = ({
                                         MenuProps={{
                                             PaperProps: {
                                                 sx: {
-                                                    borderRadius: "12px",
+                                                    borderRadius: "16px",
                                                     boxShadow:
                                                         "0 10px 25px -5px rgba(0, 0, 0, 0.1)",
                                                     mt: 1,
@@ -330,7 +333,7 @@ const FormDialog: React.FC<FormDialogProps> = ({
                                         mt: index === 0 ? 0 : 3,
                                         mb: 1.5,
                                         "& .MuiOutlinedInput-root": {
-                                            borderRadius: "12px",
+                                            borderRadius: "16px",
                                             transition: "all 0.2s ease",
                                             "&.Mui-focused": {
                                                 boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
@@ -359,11 +362,12 @@ const FormDialog: React.FC<FormDialogProps> = ({
                         <Button
                             onClick={closeDialog}
                             disabled={submitting}
-                            className="rounded-xl px-4 py-1.5 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-border"
+                            className="px-4 py-1.5 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-border"
                             sx={{
                                 textTransform: "none",
                                 fontWeight: 500,
                                 transition: "all 0.2s ease",
+                                borderRadius: "16px",
                             }}
                         >
                             Cancel
@@ -372,11 +376,12 @@ const FormDialog: React.FC<FormDialogProps> = ({
                             type="submit"
                             variant="contained"
                             disabled={submitting}
-                            className="rounded-xl px-5 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
+                            className="px-5 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
                             sx={{
                                 textTransform: "none",
                                 fontWeight: 600,
                                 transition: "all 0.2s ease",
+                                borderRadius: "16px",
                                 "&:hover": {
                                     transform: "translateY(-1px)",
                                     boxShadow: "0 6px 15px rgba(0, 0, 0, 0.1)",
@@ -403,9 +408,9 @@ const FormDialog: React.FC<FormDialogProps> = ({
                     onClose={() => setErrorMessage("")}
                     severity="error"
                     variant="filled"
-                    className="rounded-xl shadow-lg"
+                    className="shadow-lg"
                     sx={{
-                        borderRadius: "12px",
+                        borderRadius: "16px",
                         boxShadow: "0 10px 30px rgba(0, 0, 0, 0.15)",
                     }}
                 >