diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index ad99dcf..d4589c6 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -270,6 +270,18 @@
             "en": "Login",
             "tr": "Giriş"
         },
+        {
+            "resourceName": "Platform",
+            "key": "Save",
+            "en": "Save",
+            "tr": "Kaydet"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "Saving",
+            "en": "Saving...",
+            "tr": "Kaydediliyor..."
+        },
         {
             "resourceName": "AbpAccount",
             "key": "Cancel",
@@ -1014,6 +1026,36 @@
             "en": "Manager",
             "tr": "Yönetici"
         },
+        {
+            "resourceName": "Platform",
+            "key": "Submit",
+            "en": "Submit",
+            "tr": "Gönder"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "Submitting",
+            "en": "Submitting",
+            "tr": "Submitting..."
+        },
+        {
+            "resourceName": "Platform",
+            "key": "SendCode",
+            "en": "Send Code",
+            "tr": "Kod Gönder"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "SendingCode",
+            "en": "Sending code...",
+            "tr": "Kod Gönderiliyor"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "OK",
+            "en": "OK",
+            "tr": "Tamam"
+        },
         {
             "resourceName": "Platform",
             "key": "Cancel",
@@ -2382,6 +2424,12 @@
             "en": "Sign Up",
             "tr": "Üye Ol"
         },
+        {
+            "resourceName": "Platform",
+            "key": "Abp.Account.CreatingAccount",
+            "en": "Creating Account...",
+            "tr": "Hesap oluşturuluyor..."
+        },
         {
             "resourceName": "Platform",
             "key": "Abp.Account.SignUp.Message",
@@ -4122,12 +4170,6 @@
             "en": "Edit Room",
             "tr": "Odayı Düzenle"
         },
-        {
-            "resourceName": "Platform",
-            "key": "App.Videoroom.SaveChanges",
-            "en": "Save Changes",
-            "tr": "Değişiklikleri Kaydet"
-        },
         {
             "resourceName": "Platform",
             "key": "App.Videoroom.CameraOff",
@@ -7316,10 +7358,16 @@
         },
         {
             "resourceName": "Platform",
-            "key": "Public.common.send",
+            "key": "Send",
             "tr": "Gönder",
             "en": "Send"
         },
+        {
+            "resourceName": "Platform",
+            "key": "Resend",
+            "tr": "Tekrar Gönder",
+            "en": "Resend"
+        },
         {
             "resourceName": "Platform",
             "key": "Public.common.subscribe",
diff --git a/ui/src/components/codeLayout/PanelManager.tsx b/ui/src/components/codeLayout/PanelManager.tsx
index 2f7b311..6fb125a 100644
--- a/ui/src/components/codeLayout/PanelManager.tsx
+++ b/ui/src/components/codeLayout/PanelManager.tsx
@@ -66,7 +66,6 @@ export const PanelManager: React.FC<PanelManagerProps> = ({
                     )
                   }
                   variant={panelState[key] ? "twoTone" : "plain"}
-                  color="blue-600"
                   size="xs"
                   title={panelState[key] ? "Hide" : "Show"}
                 />
diff --git a/ui/src/components/codeLayout/PropertyPanel.tsx b/ui/src/components/codeLayout/PropertyPanel.tsx
index 7840fce..c870e5f 100644
--- a/ui/src/components/codeLayout/PropertyPanel.tsx
+++ b/ui/src/components/codeLayout/PropertyPanel.tsx
@@ -289,7 +289,6 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
                   onClick={() => openTailwindModal(property.name)}
                   icon={<FaCode className="w-3 h-3" />}
                   variant="solid"
-                  color="blue-600"
                   size="xs"
                   title="Select Tailwind Classes"
                 >
@@ -325,7 +324,6 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
                   onClick={() => openTailwindModal(property.name)}
                   icon={<FaCode className="w-3 h-3" />}
                   variant="solid"
-                  color="blue-600"
                   size="xs"
                   title="Select Tailwind Classes"
                 >
@@ -498,7 +496,6 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
           <div className="flex gap-2 p-1">
             <Button
               variant={activeTab === "props" ? "twoTone" : "plain"}
-              color="blue-600"
               size="xs"
               onClick={() => setActiveTab("props")}
             >
@@ -506,7 +503,6 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
             </Button>
             <Button
               variant={activeTab === "hooks" ? "twoTone" : "plain"}
-              color="blue-600"
               size="xs"
               onClick={() => setActiveTab("hooks")}
             >
diff --git a/ui/src/components/codeLayout/TailwindModal.tsx b/ui/src/components/codeLayout/TailwindModal.tsx
index aebcb7a..216ae6c 100644
--- a/ui/src/components/codeLayout/TailwindModal.tsx
+++ b/ui/src/components/codeLayout/TailwindModal.tsx
@@ -111,8 +111,7 @@ const TailwindModal: React.FC<TailwindModalProps> = ({
                 >
                   <Button
                     block
-                    variant="twoTone"
-                    color="blue-600"
+                    variant="solid"
                     size="xs"
                     onClick={() => handleClassSelect(className)}
                     className="justify-start"
@@ -142,7 +141,6 @@ const TailwindModal: React.FC<TailwindModalProps> = ({
             </Button>
             <Button
               variant="solid"
-              color="blue-600"
               size="sm"
               onClick={onClose}
             >
diff --git a/ui/src/components/importManager/ImportDashboard.tsx b/ui/src/components/importManager/ImportDashboard.tsx
index 63e50e5..a3cef8c 100644
--- a/ui/src/components/importManager/ImportDashboard.tsx
+++ b/ui/src/components/importManager/ImportDashboard.tsx
@@ -347,8 +347,6 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
               )
             }
             variant={activeTab === tab ? 'solid' : 'plain'}
-            color="blue-600"
-            size="sm"
             className={activeTab === tab ? 'shadow-md' : ''}
           >
             <span className="capitalize">{tab}</span>
@@ -379,7 +377,6 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                         disabled={generating}
                         icon={<FaFileExcel className="w-3.5 h-3.5" />}
                         variant="twoTone"
-                        color="green-600"
                         size="xs"
                       >
                         {translate('::App.Listforms.ImportManager.ExcelTemplate')}
@@ -390,7 +387,6 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                         disabled={generating}
                         icon={<FaFileAlt className="w-3.5 h-3.5" />}
                         variant="twoTone"
-                        color="blue-600"
                         size="xs"
                       >
                         {translate('::App.Listforms.ImportManager.CsvTemplate')}
@@ -607,7 +603,6 @@ export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) =>
                           }}
                           icon={<FaSync className="w-4 h-4" />}
                           variant="twoTone"
-                          color="blue-600"
                           size="xs"
                           title={translate('::App.Listforms.ImportManager.RefreshExecutionDetails')}
                         />
diff --git a/ui/src/components/importManager/ImportPreview.tsx b/ui/src/components/importManager/ImportPreview.tsx
index 832ad26..4bf4c4b 100644
--- a/ui/src/components/importManager/ImportPreview.tsx
+++ b/ui/src/components/importManager/ImportPreview.tsx
@@ -329,7 +329,6 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
               loading={loading}
               icon={<FaPlay className="w-4 h-4" />}
               variant="solid"
-              color="blue-600"
               size="sm"
             >
               {loading
diff --git a/ui/src/components/layouts/PublicLayout.tsx b/ui/src/components/layouts/PublicLayout.tsx
index 5e098c7..99b2b53 100644
--- a/ui/src/components/layouts/PublicLayout.tsx
+++ b/ui/src/components/layouts/PublicLayout.tsx
@@ -1,6 +1,6 @@
 import View from '@/views/Views'
 import React, { useEffect, useState } from 'react'
-import { useLocation, Link } from 'react-router-dom'
+import { useLocation, Link, useNavigate } from 'react-router-dom'
 import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram } from 'react-icons/fa'
 import {
   LuMenu,
@@ -36,6 +36,7 @@ interface NavLink {
 
 const PublicLayout = () => {
   const location = useLocation()
+  const navigate = useNavigate()
   const { translate } = useLocalization()
   const [isDarkMode, setThemeMode] = useDarkMode()
 
@@ -155,7 +156,7 @@ const PublicLayout = () => {
         size="xs"
         className={`!h-8 !w-8 xl:!w-auto !px-0 xl:!px-2.5 !rounded-r-md !rounded-l-none !border-transparent !shadow-none ${
           isDarkMode
-            ? '!bg-white !text-gray-950'
+            ? '!bg-gray-300 !text-gray-800'
             : '!bg-transparent !text-gray-300 hover:!bg-transparent hover:!text-white'
         }`}
       />
@@ -251,13 +252,15 @@ const PublicLayout = () => {
                 .filter((l) => isLoginLink(l.resourceKey))
                 .map((link) =>
                   link.path ? (
-                    <Link
+                    <Button
                       key={link.path}
-                      to={link.path}
-                      className="inline-flex h-9 items-center gap-1.5 px-4 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shadow-md shadow-blue-900/30 transition-all duration-200 hover:shadow-blue-700/40 hover:-translate-y-px"
+                      type="button"
+                      variant="solid"
+                      shape="round"
+                      onClick={() => navigate(link.path!)}
                     >
                       {link.name}
-                    </Link>
+                    </Button>
                   ) : null,
                 )}
             </div>
diff --git a/ui/src/components/orders/BillingControls.tsx b/ui/src/components/orders/BillingControls.tsx
index ef30a2d..7fbbe95 100644
--- a/ui/src/components/orders/BillingControls.tsx
+++ b/ui/src/components/orders/BillingControls.tsx
@@ -53,8 +53,7 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
                 onClick={() => !hasCartItems && setGlobalBillingCycle('monthly')}
                 disabled={hasCartItems}
                 variant={globalBillingCycle === 'monthly' ? 'solid' : 'default'}
-                color="blue-600"
-                size="sm"
+                size="xs"
                 className={globalBillingCycle === 'monthly' ? 'shadow-md' : ''}
                 title={
                   hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined
@@ -66,8 +65,7 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
                 onClick={() => !hasCartItems && setGlobalBillingCycle('yearly')}
                 disabled={hasCartItems}
                 variant={globalBillingCycle === 'yearly' ? 'solid' : 'default'}
-                color="blue-600"
-                size="sm"
+                size="xs"
                 className={globalBillingCycle === 'yearly' ? 'shadow-md' : ''}
                 title={
                   hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined
@@ -98,8 +96,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
                 />
 
                 <div className="flex items-center space-x-2 bg-gray-50 px-2 py-1 rounded-lg dark:bg-gray-800">
-                  <span className="font-bold text-lg text-blue-600">{globalPeriod}</span>
-                  <span className="text-sm text-gray-600 dark:text-gray-300">
+                  <span className="font-bold text-lg text-gray-600 dark:text-white">{globalPeriod}</span>
+                  <span className="text-xs text-gray-600 dark:text-white">
                     {globalBillingCycle === 'monthly'
                       ? translate('::Public.products.billingcycle.month')
                       : translate('::Public.products.billingcycle.year')}
@@ -119,10 +117,10 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
 
             <Button
               onClick={onCartClick}
-              icon={<FaShoppingCart className="w-5 h-5" />}
+              icon={<FaShoppingCart className="w-3 h-3" />}
               variant="solid"
               color="green-600"
-              size="sm"
+              size="xs"
               className="relative shadow-md"
             >
               <span className="font-medium text-sm">{translate('::Public.nav.basket')}</span>
diff --git a/ui/src/components/orders/Cart.tsx b/ui/src/components/orders/Cart.tsx
index c0dc600..1985b03 100644
--- a/ui/src/components/orders/Cart.tsx
+++ b/ui/src/components/orders/Cart.tsx
@@ -170,7 +170,6 @@ export const Cart: React.FC<CartProps> = ({
                 onClick={onCheckout}
                 block
                 variant="solid"
-                color="blue-600"
                 size="md"
               >
                 {translate('::Public.cart.checkout')}
diff --git a/ui/src/components/orders/PaymentForm.tsx b/ui/src/components/orders/PaymentForm.tsx
index 43928a6..36a78e3 100644
--- a/ui/src/components/orders/PaymentForm.tsx
+++ b/ui/src/components/orders/PaymentForm.tsx
@@ -119,7 +119,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
   }
 
   return (
-    <div className="mx-auto px-4 lg:px-8 mb-6">
+    <div className="mx-auto px-4 lg:px-8 mt-5">
       {loading ? (
         <div className="text-center py-12 text-gray-500">
           {translate('::App.Loading')}
@@ -258,14 +258,14 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                 <FaLock className="w-5 h-5 text-green-600 mr-2" />{' '}
                 {translate('::Public.payment.method.title')}
               </h2>
-              <div className="space-y-2">
+              <div className="space-y-3">
                 {paymentMethods.map((method) => (
                   <label
                     key={method.id}
-                    className={`flex items-center p-3 border-2 rounded-lg cursor-pointer transition-all ${
+                    className={`group flex items-center gap-3 rounded-xl border p-4 cursor-pointer transition-all ${
                       selectedPaymentMethod === method.name
-                        ? 'border-blue-500 bg-blue-50'
-                        : 'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-500'
+                        ? 'border-blue-500 bg-blue-50 shadow-sm ring-1 ring-blue-500/20 dark:border-blue-400 dark:bg-blue-950/30 dark:ring-blue-400/20'
+                        : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950/40 dark:hover:border-blue-500 dark:hover:bg-gray-800/70'
                     }`}
                   >
                     <input
@@ -278,15 +278,30 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                       }}
                       className="sr-only"
                     />
-                    <span className="text-2xl mr-3">{method.logo}</span>
-                    <div>
-                      <div className="font-medium text-gray-900 dark:text-gray-100">{method.name}</div>
-                      <div className="text-sm text-gray-600 dark:text-gray-300">
+                    <span
+                      className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-xl ${
+                        selectedPaymentMethod === method.name
+                          ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-200'
+                          : 'bg-gray-100 text-gray-500 group-hover:bg-blue-50 group-hover:text-blue-600 dark:bg-gray-800 dark:text-gray-300 dark:group-hover:bg-blue-900/30 dark:group-hover:text-blue-200'
+                      }`}
+                    >
+                      {method.logo}
+                    </span>
+                    <div className="min-w-0 flex-1">
+                      <div className="font-semibold text-gray-900 dark:text-gray-100">{method.name}</div>
+                      <div className="text-sm text-gray-600 dark:text-gray-400">
                         {method.name === defaultPaymentMethod
                           ? translate('::Public.payment.method.installmentsAvailable')
                           : translate('::Public.payment.method.noCommission')}
                       </div>
                     </div>
+                    <span
+                      className={`h-3 w-3 shrink-0 rounded-full border ${
+                        selectedPaymentMethod === method.name
+                          ? 'border-blue-500 bg-blue-500 dark:border-blue-300 dark:bg-blue-300'
+                          : 'border-gray-300 dark:border-gray-600'
+                      }`}
+                    />
                   </label>
                 ))}
               </div>
@@ -304,8 +319,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                       key={option.id}
                       className={`flex flex-col items-center justify-center h-full p-4 border-2 rounded-xl cursor-pointer transition-all text-xs md:text-sm text-center select-none ${
                         selectedInstallment?.installment === option.installment
-                          ? 'border-blue-500 bg-blue-50 shadow-md scale-105'
-                          : 'border-gray-200 hover:border-blue-200 dark:border-gray-700 dark:hover:border-blue-500'
+                          ? 'border-blue-500 bg-blue-50 shadow-md scale-105 dark:border-blue-400 dark:bg-blue-950/30 dark:shadow-blue-950/20'
+                          : 'border-gray-200 bg-white hover:border-blue-200 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950/40 dark:hover:border-blue-500 dark:hover:bg-gray-800/70'
                       }`}
                     >
                       <input
@@ -323,7 +338,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                           %{(option.commission * 100).toFixed(1)}
                         </span>
                       </div>
-                      <div className="text-blue-700 font-bold mb-1">
+                      <div className="font-bold mb-1">
                         {option.installment > 1
                           ? `${option.installment} ${translate('::Public.payment.installments.monthly')}`
                           : translate('::Public.payment.installments.single')}
@@ -457,7 +472,6 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
                   type="submit"
                   icon={<FaCreditCard className="w-5 h-5" />}
                   variant="solid"
-                  color="green-600"
                   size="sm"
                 >
                   {selectedPaymentMethod === 'bank-transfer'
diff --git a/ui/src/components/orders/ProductCard.tsx b/ui/src/components/orders/ProductCard.tsx
index 4e4e98b..1e21b8b 100644
--- a/ui/src/components/orders/ProductCard.tsx
+++ b/ui/src/components/orders/ProductCard.tsx
@@ -171,7 +171,6 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                 disabled={isDisabled}
                 block
                 variant="solid"
-                color="blue-600"
                 size="md"
                 className={!isDisabled ? 'hover:scale-[1.02] active:scale-[0.98]' : ''}
               >
diff --git a/ui/src/components/orders/ProductCatalog.tsx b/ui/src/components/orders/ProductCatalog.tsx
index 83d4335..a607d98 100644
--- a/ui/src/components/orders/ProductCatalog.tsx
+++ b/ui/src/components/orders/ProductCatalog.tsx
@@ -103,7 +103,6 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
                 onClick={() => setSelectedCategory(category)}
                 block
                 variant={selectedCategory === category ? 'twoTone' : 'plain'}
-                color="blue-600"
                 size="md"
                 className="justify-start text-left"
               >
diff --git a/ui/src/components/orders/TenantForm.tsx b/ui/src/components/orders/TenantForm.tsx
index 6e4b0f0..d47525a 100644
--- a/ui/src/components/orders/TenantForm.tsx
+++ b/ui/src/components/orders/TenantForm.tsx
@@ -154,7 +154,6 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                     onClick={getTenantInfo}
                     icon={<FaSearch className="w-4 h-4" />}
                     variant="solid"
-                    color="blue-600"
                     size="sm"
                     className="!h-[40px] min-w-[180px] sm:mr-2 sm:rounded-r-lg sm:rounded-l-none [&>span]:gap-2"
                   >
diff --git a/ui/src/components/template/MessengerWidget.tsx b/ui/src/components/template/MessengerWidget.tsx
index 245fc62..b101760 100644
--- a/ui/src/components/template/MessengerWidget.tsx
+++ b/ui/src/components/template/MessengerWidget.tsx
@@ -798,11 +798,9 @@ const MessengerWidget = () => {
               type="button"
               size="lg"
               variant="solid"
-              color="emerald-600"
               shape="circle"
               icon={<IoChatbubbleEllipsesOutline />}
               onClick={() => (open ? closeWidget() : setOpen(true))}
-              className="!h-12 !w-12 !px-0 text-2xl shadow-xl transition hover:!bg-emerald-700"
             />
             {unread > 0 && (
               <span className="absolute -right-1 -top-1 flex min-h-[20px] min-w-[20px] items-center justify-center rounded-full bg-red-500 px-1.5 text-xs font-semibold leading-none text-white ring-2 ring-white dark:ring-gray-800">
diff --git a/ui/src/components/template/Search.tsx b/ui/src/components/template/Search.tsx
index 7785b88..9ceed82 100644
--- a/ui/src/components/template/Search.tsx
+++ b/ui/src/components/template/Search.tsx
@@ -197,7 +197,7 @@ const _Search = ({ className }: { className?: string }) => {
                 onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
               />
             </div>
-            <Button icon={<FaSearch />} size="sm" onClick={handleSearch}></Button>
+            <Button size="sm" variant='solid' icon={<FaSearch />} onClick={handleSearch}></Button>
           </div>
           <div>
             <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-600">
diff --git a/ui/src/components/ui/Button/Button.tsx b/ui/src/components/ui/Button/Button.tsx
index ba84a58..4f69a8a 100644
--- a/ui/src/components/ui/Button/Button.tsx
+++ b/ui/src/components/ui/Button/Button.tsx
@@ -9,231 +9,210 @@ import { Spinner } from '../Spinner'
 import type { CommonProps, TypeAttributes, ColorLevel } from '../@types/common'
 import type { ReactNode, ComponentPropsWithRef, MouseEvent } from 'react'
 
-export interface ButtonProps
-    extends CommonProps,
-        Omit<ComponentPropsWithRef<'button'>, 'onClick'> {
-    active?: boolean
-    block?: boolean
-    color?: string
-    disabled?: boolean
-    icon?: string | ReactNode
-    loading?: boolean
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void
-    shape?: TypeAttributes.Shape
-    size?: TypeAttributes.Size
-    variant?: 'solid' | 'twoTone' | 'plain' | 'default'
+export interface ButtonProps extends CommonProps, Omit<ComponentPropsWithRef<'button'>, 'onClick'> {
+  active?: boolean
+  block?: boolean
+  color?: string
+  disabled?: boolean
+  icon?: string | ReactNode
+  loading?: boolean
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
+  shape?: TypeAttributes.Shape
+  size?: TypeAttributes.Size
+  variant?: 'solid' | 'twoTone' | 'plain' | 'default'
 }
 
 type ButtonColor = {
-    bgColor: string
-    hoverColor: string
-    activeColor: string
-    textColor: string
+  bgColor: string
+  hoverColor: string
+  activeColor: string
+  textColor: string
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-    const {
-        active = false,
-        block = false,
-        children,
-        className,
-        color = '',
-        disabled,
-        icon,
-        loading = false,
-        shape = 'round',
-        size,
-        variant = 'default',
-        ...rest
-    } = props
-    const { themeColor, controlSize, primaryColorLevel } = useConfig()
-    const formControlSize = useForm()?.size
-    const inputGroupSize = useInputGroup()?.size
-    const defaultClass = 'button'
-    const sizeIconClass = 'inline-flex items-center justify-center'
+  const {
+    active = false,
+    block = false,
+    children,
+    className,
+    color = '',
+    disabled,
+    icon,
+    loading = false,
+    shape = 'round',
+    size = 'sm',
+    variant = 'default',
+    ...rest
+  } = props
+  const { themeColor, controlSize, primaryColorLevel } = useConfig()
+  const formControlSize = useForm()?.size
+  const inputGroupSize = useInputGroup()?.size
+  const defaultClass = 'button'
+  const sizeIconClass = 'inline-flex items-center justify-center'
 
-    const splitedColor = color?.split('-') || []
+  const splitedColor = color?.split('-') || []
 
-    const buttonSize = size || inputGroupSize || formControlSize || controlSize
-    const buttonColor = splitedColor[0] || themeColor
-    const buttonColorLevel = splitedColor[1] || primaryColorLevel
+  const buttonSize = size || inputGroupSize || formControlSize || controlSize
+  const buttonColor = splitedColor[0] || themeColor
+  const buttonColorLevel = splitedColor[1] || primaryColorLevel
 
-    const [increaseLevel, decreaseLevel] = useColorLevel(
-        buttonColorLevel as ColorLevel
-    )
+  const [increaseLevel, decreaseLevel] = useColorLevel(buttonColorLevel as ColorLevel)
 
-    const getButtonSize = () => {
-        let sizeClass = ''
-        switch (buttonSize) {
-            case SIZES.LG:
-                sizeClass = classNames(
-                    `h-${CONTROL_SIZES.lg}`,
-                    icon && !children
-                        ? `w-${CONTROL_SIZES.lg} ${sizeIconClass} text-2xl`
-                        : 'px-8 text-base'
-                )
-                break
-            case SIZES.SM:
-                sizeClass = classNames(
-                    `h-${CONTROL_SIZES.sm}`,
-                    icon && !children
-                        ? `w-${CONTROL_SIZES.sm} ${sizeIconClass} text-lg`
-                        : 'px-3 text-sm'
-                )
-                break
-            case SIZES.XS:
-                sizeClass = classNames(
-                    `h-${CONTROL_SIZES.xs}`,
-                    icon && !children
-                        ? `w-${CONTROL_SIZES.xs} ${sizeIconClass} text-base`
-                        : 'px-2 text-xs'
-                )
-                break
-            default:
-                sizeClass = classNames(
-                    `h-${CONTROL_SIZES.md}`,
-                    icon && !children
-                        ? `w-${CONTROL_SIZES.md} ${sizeIconClass} text-xl`
-                        : 'px-8'
-                )
-                break
-        }
-        return sizeClass
+  const getButtonSize = () => {
+    let sizeClass = ''
+    switch (buttonSize) {
+      case SIZES.LG:
+        sizeClass = classNames(
+          `h-${CONTROL_SIZES.lg}`,
+          icon && !children ? `w-${CONTROL_SIZES.lg} ${sizeIconClass} text-2xl` : 'px-8 text-base',
+        )
+        break
+      case SIZES.SM:
+        sizeClass = classNames(
+          `h-${CONTROL_SIZES.sm}`,
+          icon && !children ? `w-${CONTROL_SIZES.sm} ${sizeIconClass} text-lg` : 'px-3 text-sm',
+        )
+        break
+      case SIZES.XS:
+        sizeClass = classNames(
+          `h-${CONTROL_SIZES.xs}`,
+          icon && !children ? `w-${CONTROL_SIZES.xs} ${sizeIconClass} text-base` : 'px-2 text-xs',
+        )
+        break
+      default:
+        sizeClass = classNames(
+          `h-${CONTROL_SIZES.md}`,
+          icon && !children ? `w-${CONTROL_SIZES.md} ${sizeIconClass} text-xl` : 'px-8',
+        )
+        break
+    }
+    return sizeClass
+  }
+
+  const disabledClass = 'opacity-50 cursor-not-allowed'
+
+  const solidColor = () => {
+    const btn = {
+      bgColor: active
+        ? `bg-${buttonColor}-${increaseLevel}`
+        : `bg-${buttonColor}-${buttonColorLevel}`,
+      textColor: 'text-white',
+      hoverColor: active ? '' : `hover:bg-${buttonColor}-${decreaseLevel}`,
+      activeColor: `active:bg-${buttonColor}-${increaseLevel}`,
+    }
+    return getBtnColor(btn)
+  }
+
+  const twoToneColor = () => {
+    const btn = {
+      bgColor: active
+        ? `bg-${buttonColor}-200 dark:bg-${buttonColor}-50`
+        : `bg-${buttonColor}-50 dark:bg-${buttonColor}-500 dark:bg-opacity-20`,
+      textColor: `text-${buttonColor}-${buttonColorLevel} dark:text-${buttonColor}-50`,
+      hoverColor: active
+        ? ''
+        : `hover:bg-${buttonColor}-100 dark:hover:bg-${buttonColor}-500 dark:hover:bg-opacity-30`,
+      activeColor: `active:bg-${buttonColor}-200 dark:active:bg-${buttonColor}-500 dark:active:bg-opacity-40`,
+    }
+    return getBtnColor(btn)
+  }
+
+  const defaultColor = () => {
+    const btn = {
+      bgColor: active
+        ? `bg-gray-100 border border-gray-300 dark:bg-gray-500 dark:border-gray-500`
+        : `bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-700`,
+      textColor: `text-gray-600 dark:text-gray-100`,
+      hoverColor: active ? '' : `hover:bg-gray-50 dark:hover:bg-gray-600`,
+      activeColor: `active:bg-gray-100 dark:active:bg-gray-500 dark:active:border-gray-500`,
+    }
+    return getBtnColor(btn)
+  }
+
+  const plainColor = () => {
+    const btn = {
+      bgColor: active ? `bg-gray-100 dark:bg-gray-500` : 'bg-transparent border border-transparent',
+      textColor: `text-gray-600 dark:text-gray-100`,
+      hoverColor: active ? '' : `hover:bg-gray-50 dark:hover:bg-gray-600`,
+      activeColor: `active:bg-gray-100 dark:active:bg-gray-500 dark:active:border-gray-500`,
+    }
+    return getBtnColor(btn)
+  }
+
+  const getBtnColor = ({ bgColor, hoverColor, activeColor, textColor }: ButtonColor) => {
+    return `${bgColor} ${
+      disabled || loading ? disabledClass : hoverColor + ' ' + activeColor
+    } ${textColor}`
+  }
+
+  const btnColor = () => {
+    switch (variant) {
+      case 'solid':
+        return solidColor()
+      case 'twoTone':
+        return twoToneColor()
+      case 'plain':
+        return plainColor()
+      case 'default':
+        return defaultColor()
+      default:
+        return defaultColor()
+    }
+  }
+
+  const classes = classNames(
+    defaultClass,
+    btnColor(),
+    `radius-${shape}`,
+    getButtonSize(),
+    className,
+    block ? 'w-full' : '',
+  )
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    const { onClick } = props
+    if (disabled || loading) {
+      e.preventDefault()
+      return
+    }
+    onClick?.(e)
+  }
+
+  const renderChildren = () => {
+    if (loading && children) {
+      return (
+        <span className="flex items-center justify-center">
+          <Spinner enableTheme={false} className="mr-1" />
+          {children}
+        </span>
+      )
     }
 
-    const disabledClass = 'opacity-50 cursor-not-allowed'
-
-    const solidColor = () => {
-        const btn = {
-            bgColor: active
-                ? `bg-${buttonColor}-${increaseLevel}`
-                : `bg-${buttonColor}-${buttonColorLevel}`,
-            textColor: 'text-white',
-            hoverColor: active
-                ? ''
-                : `hover:bg-${buttonColor}-${decreaseLevel}`,
-            activeColor: `active:bg-${buttonColor}-${increaseLevel}`,
-        }
-        return getBtnColor(btn)
+    if (icon && !children && loading) {
+      return <Spinner enableTheme={false} />
     }
 
-    const twoToneColor = () => {
-        const btn = {
-            bgColor: active
-                ? `bg-${buttonColor}-200 dark:bg-${buttonColor}-50`
-                : `bg-${buttonColor}-50 dark:bg-${buttonColor}-500 dark:bg-opacity-20`,
-            textColor: `text-${buttonColor}-${buttonColorLevel} dark:text-${buttonColor}-50`,
-            hoverColor: active
-                ? ''
-                : `hover:bg-${buttonColor}-100 dark:hover:bg-${buttonColor}-500 dark:hover:bg-opacity-30`,
-            activeColor: `active:bg-${buttonColor}-200 dark:active:bg-${buttonColor}-500 dark:active:bg-opacity-40`,
-        }
-        return getBtnColor(btn)
+    if (icon && !children && !loading) {
+      return <>{icon}</>
     }
 
-    const defaultColor = () => {
-        const btn = {
-            bgColor: active
-                ? `bg-gray-100 border border-gray-300 dark:bg-gray-500 dark:border-gray-500`
-                : `bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-700`,
-            textColor: `text-gray-600 dark:text-gray-100`,
-            hoverColor: active ? '' : `hover:bg-gray-50 dark:hover:bg-gray-600`,
-            activeColor: `active:bg-gray-100 dark:active:bg-gray-500 dark:active:border-gray-500`,
-        }
-        return getBtnColor(btn)
+    if (icon && children && !loading) {
+      return (
+        <span className="flex items-center justify-center">
+          <span className="text-lg">{icon}</span>
+          <span className="ltr:ml-1 rtl:mr-1">{children}</span>
+        </span>
+      )
     }
 
-    const plainColor = () => {
-        const btn = {
-            bgColor: active
-                ? `bg-gray-100 dark:bg-gray-500`
-                : 'bg-transparent border border-transparent',
-            textColor: `text-gray-600 dark:text-gray-100`,
-            hoverColor: active ? '' : `hover:bg-gray-50 dark:hover:bg-gray-600`,
-            activeColor: `active:bg-gray-100 dark:active:bg-gray-500 dark:active:border-gray-500`,
-        }
-        return getBtnColor(btn)
-    }
+    return <>{children}</>
+  }
 
-    const getBtnColor = ({
-        bgColor,
-        hoverColor,
-        activeColor,
-        textColor,
-    }: ButtonColor) => {
-        return `${bgColor} ${
-            disabled || loading ? disabledClass : hoverColor + ' ' + activeColor
-        } ${textColor}`
-    }
-
-    const btnColor = () => {
-        switch (variant) {
-            case 'solid':
-                return solidColor()
-            case 'twoTone':
-                return twoToneColor()
-            case 'plain':
-                return plainColor()
-            case 'default':
-                return defaultColor()
-            default:
-                return defaultColor()
-        }
-    }
-
-    const classes = classNames(
-        defaultClass,
-        btnColor(),
-        `radius-${shape}`,
-        getButtonSize(),
-        className,
-        block ? 'w-full' : ''
-    )
-
-    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-        const { onClick } = props
-        if (disabled || loading) {
-            e.preventDefault()
-            return
-        }
-        onClick?.(e)
-    }
-
-    const renderChildren = () => {
-        if (loading && children) {
-            return (
-                <span className="flex items-center justify-center">
-                    <Spinner enableTheme={false} className="mr-1" />
-                    {children}
-                </span>
-            )
-        }
-
-        if (icon && !children && loading) {
-            return <Spinner enableTheme={false} />
-        }
-
-        if (icon && !children && !loading) {
-            return <>{icon}</>
-        }
-
-        if (icon && children && !loading) {
-            return (
-                <span className="flex items-center justify-center">
-                    <span className="text-lg">{icon}</span>
-                    <span className="ltr:ml-1 rtl:mr-1">{children}</span>
-                </span>
-            )
-        }
-
-        return <>{children}</>
-    }
-
-    return (
-        <button ref={ref} className={classes} {...rest} onClick={handleClick}>
-            {renderChildren()}
-        </button>
-    )
+  return (
+    <button ref={ref} className={classes} {...rest} onClick={handleClick}>
+      {renderChildren()}
+    </button>
+  )
 })
 
 Button.displayName = 'Button'
diff --git a/ui/src/components/ui/DatePicker/DateTimepicker.tsx b/ui/src/components/ui/DatePicker/DateTimepicker.tsx
index 6ecbbba..0fb296f 100644
--- a/ui/src/components/ui/DatePicker/DateTimepicker.tsx
+++ b/ui/src/components/ui/DatePicker/DateTimepicker.tsx
@@ -311,7 +311,7 @@ const DateTimepicker = forwardRef<HTMLInputElement, DateTimepickerProps>(
                         size="sm"
                         onChange={handleTimeChange}
                     />
-                    <Button size="sm" disabled={!_value} onClick={handleOk}>
+                    <Button size="sm" variant='solid' disabled={!_value} onClick={handleOk}>
                         {okButtonContent}
                     </Button>
                 </div>
diff --git a/ui/src/components/ui/Upload/Upload.tsx b/ui/src/components/ui/Upload/Upload.tsx
index 94200e2..285080b 100644
--- a/ui/src/components/ui/Upload/Upload.tsx
+++ b/ui/src/components/ui/Upload/Upload.tsx
@@ -9,6 +9,7 @@ import Notification from '../Notification/Notification'
 import toast from '../toast/toast'
 import type { CommonProps } from '../@types/common'
 import type { ReactNode, ChangeEvent, MouseEvent } from 'react'
+import { useLocalization } from '@/utils/hooks/useLocalization'
 
 export interface UploadProps extends CommonProps {
   accept?: string
@@ -56,6 +57,7 @@ const Upload = forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
   const fileInputField = useRef<HTMLInputElement>(null)
   const [files, setFiles] = useState(fileList)
   const [dragOver, setDragOver] = useState(false)
+  const { translate } = useLocalization()
 
   const { themeColor, primaryColorLevel } = useConfig()
 
@@ -144,8 +146,8 @@ const Upload = forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
   const renderChildren = () => {
     if (!draggable && !children) {
       return (
-        <Button disabled={disabled} onClick={(e) => e.preventDefault()}>
-          Upload
+        <Button size="sm" variant="solid" disabled={disabled} onClick={(e) => e.preventDefault()}>
+          {translate('::FileManager.Upload')}
         </Button>
       )
     }
diff --git a/ui/src/views/admin/activityLog/components/Log.tsx b/ui/src/views/admin/activityLog/components/Log.tsx
index f3de4f9..ada92f9 100644
--- a/ui/src/views/admin/activityLog/components/Log.tsx
+++ b/ui/src/views/admin/activityLog/components/Log.tsx
@@ -57,7 +57,7 @@ const Log = ({
         ))}
         <div className="text-center">
           {loadable ? (
-            <Button loading={isLoading} onClick={onLoadMore} className="dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
+            <Button size="sm" loading={isLoading} onClick={onLoadMore} variant='solid'>
               {translate('::Abp.Identity.ActivityLogs.LoadMore')}
             </Button>
           ) : (
diff --git a/ui/src/views/admin/files/components/FileModals.tsx b/ui/src/views/admin/files/components/FileModals.tsx
index 10d3db0..ce64cb1 100644
--- a/ui/src/views/admin/files/components/FileModals.tsx
+++ b/ui/src/views/admin/files/components/FileModals.tsx
@@ -59,10 +59,11 @@ export const CreateFolderModal = forwardRef<HTMLDivElement, CreateFolderModalPro
           </form>
 
           <div className="flex justify-end space-x-2 pt-4 border-t">
-            <Button variant="default" onClick={handleClose} disabled={loading}>
+            <Button size='sm' variant="default" onClick={handleClose} disabled={loading}>
               {translate('::Cancel')}
             </Button>
             <Button
+              size='sm'
               variant="solid"
               onClick={handleSubmit}
               loading={loading}
@@ -156,10 +157,11 @@ export const RenameItemModal = forwardRef<HTMLDivElement, RenameItemModalProps>(
         </form>
 
         <div className="flex justify-end space-x-2 pt-4 border-t">
-          <Button variant="default" onClick={handleClose} disabled={loading}>
+          <Button size='sm' variant="default" onClick={handleClose} disabled={loading}>
             {translate('::Cancel')}
           </Button>
           <Button
+            size='sm'
             variant="solid"
             onClick={handleSubmit}
             loading={loading}
@@ -238,12 +240,12 @@ export const DeleteConfirmModal = forwardRef<HTMLDivElement, DeleteConfirmModalP
           </div>
 
           <div className="flex justify-end space-x-2 pt-4 border-t">
-            <Button variant="default" onClick={onClose} disabled={loading}>
+            <Button size='sm' variant="default" onClick={onClose} disabled={loading}>
               {translate('::Cancel')}
             </Button>
             <Button
+              size='sm'
               variant="solid"
-              className="bg-red-600 hover:bg-red-700 text-white"
               onClick={handleDelete}
               loading={loading}
             >
diff --git a/ui/src/views/admin/files/components/FileUploadModal.tsx b/ui/src/views/admin/files/components/FileUploadModal.tsx
index 39d4b82..8e1e42c 100644
--- a/ui/src/views/admin/files/components/FileUploadModal.tsx
+++ b/ui/src/views/admin/files/components/FileUploadModal.tsx
@@ -355,10 +355,11 @@ const FileUploadModal = forwardRef<HTMLDivElement, FileUploadModalProps>((props,
                 Clear Errors
               </Button>
             )}
-            <Button variant="default" onClick={handleClose} disabled={uploading}>
+            <Button size="sm" variant="default" onClick={handleClose} disabled={uploading}>
               {uploading ? 'Uploading...' : 'Close'}
             </Button>
             <Button
+              size="sm"
               variant="solid"
               onClick={handleUpload}
               disabled={pendingFiles === 0 || uploading}
diff --git a/ui/src/views/admin/listForm/edit/ChartTabAnimation.tsx b/ui/src/views/admin/listForm/edit/ChartTabAnimation.tsx
index 0ac71a0..84cc7cc 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAnimation.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAnimation.tsx
@@ -79,8 +79,8 @@ function ChartTabAnimation(props: FormEditProps) {
               <Field type="number" name="animationDto.maxPointCountSupported" component={Input} />
             </FormItem>
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx b/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
index dfcba16..26ea6a8 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
@@ -660,8 +660,8 @@ function ChartTabAnnotations(props: FormEditProps) {
               </TabContent>
             </Tabs>
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
index d485390..3538308 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
@@ -541,8 +541,8 @@ function ChartTabAxis(props: FormEditProps) {
               </TabContent>
             </Tabs>
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx b/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
index ead7d3b..d38dd24 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
@@ -716,8 +716,8 @@ function ChartTabCommonSettings(props: FormEditProps) {
               </TabContent>
             </Tabs>
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx b/ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx
index 870adba..e85bfd8 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx
@@ -49,7 +49,7 @@ function ChartTabCrosshair(props: FormEditProps) {
                       <Input
                         {...field}
                         type="color"
-                        className='!h-10 !p-0 !m-0 !border-0'
+                        className="!h-10 !p-0 !m-0 !border-0"
                         onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                       />
                     )}
@@ -112,7 +112,7 @@ function ChartTabCrosshair(props: FormEditProps) {
                       <Input
                         {...field}
                         type="color"
-                        className='!h-10 !p-0 !m-0 !border-0'
+                        className="!h-10 !p-0 !m-0 !border-0"
                         onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                       />
                     )}
@@ -157,64 +157,28 @@ function ChartTabCrosshair(props: FormEditProps) {
               </Card>
 
               <Card className="my-2" header="Font Options">
-                <FormItem
-                  label="Color"
-                  invalid={
-                    !!(
-                      errors.crosshairDto?.label?.font?.color &&
-                      touched.crosshairDto?.label?.font?.color
-                    )
-                  }
-                  errorMessage={errors.crosshairDto?.label?.font?.color}
-                >
+                <FormItem label="Color">
                   <Field name="crosshairDto.label.font.color">
                     {({ field, form }: FieldProps) => (
                       <Input
                         {...field}
                         type="color"
-                        className='!h-10 !p-0 !m-0 !border-0'
+                        className="!h-10 !p-0 !m-0 !border-0"
                         onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                       />
                     )}
                   </Field>
                 </FormItem>
 
-                <FormItem
-                  label="Family"
-                  invalid={
-                    !!(
-                      errors.crosshairDto?.label?.font?.family &&
-                      touched.crosshairDto?.label?.font?.family
-                    )
-                  }
-                  errorMessage={errors.crosshairDto?.label?.font?.family}
-                >
+                <FormItem label="Family">
                   <Field type="text" name="crosshairDto.label.font.family" component={Input} />
                 </FormItem>
 
-                <FormItem
-                  label="Size"
-                  invalid={
-                    !!(
-                      errors.crosshairDto?.label?.font?.size &&
-                      touched.crosshairDto?.label?.font?.size
-                    )
-                  }
-                  errorMessage={errors.crosshairDto?.label?.font?.size}
-                >
+                <FormItem label="Size">
                   <Field type="number" name="crosshairDto.label.font.size" component={Input} />
                 </FormItem>
 
-                <FormItem
-                  label="Weight"
-                  invalid={
-                    !!(
-                      errors.crosshairDto?.label?.font?.weight &&
-                      touched.crosshairDto?.label?.font?.weight
-                    )
-                  }
-                  errorMessage={errors.crosshairDto?.label?.font?.weight}
-                >
+                <FormItem label="Weight">
                   <Field type="number" name="crosshairDto.label.font.weight" component={Input} />
                 </FormItem>
               </Card>
@@ -232,7 +196,7 @@ function ChartTabCrosshair(props: FormEditProps) {
                 >
                   <Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
                 </FormItem>
-                
+
                 <FormItem
                   label="Color"
                   invalid={
@@ -248,7 +212,7 @@ function ChartTabCrosshair(props: FormEditProps) {
                       <Input
                         {...field}
                         type="color"
-                        className='!h-10 !p-0 !m-0 !border-0'
+                        className="!h-10 !p-0 !m-0 !border-0"
                         onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                       />
                     )}
@@ -324,7 +288,7 @@ function ChartTabCrosshair(props: FormEditProps) {
                       <Input
                         {...field}
                         type="color"
-                        className='!h-10 !p-0 !m-0 !border-0'
+                        className="!h-10 !p-0 !m-0 !border-0"
                         onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                       />
                     )}
@@ -372,8 +336,8 @@ function ChartTabCrosshair(props: FormEditProps) {
               </Card>
             </div>
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabExport.tsx b/ui/src/views/admin/listForm/edit/ChartTabExport.tsx
index 8a9de72..dc549eb 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabExport.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabExport.tsx
@@ -65,8 +65,8 @@ function ChartTabExport(props: FormEditProps) {
             </FormItem>
             
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabLegend.tsx b/ui/src/views/admin/listForm/edit/ChartTabLegend.tsx
index c627bd2..e39769c 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabLegend.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabLegend.tsx
@@ -216,8 +216,8 @@ function ChartTabLegend(props: FormEditProps) {
               </Card>
             </div>
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx b/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
index 5bfa6c5..6be8ddb 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabPanes.tsx
@@ -155,8 +155,8 @@ function ChartTabPanes(props: FormEditProps) {
               setData={setJsonRowOpModalData}
             />
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
index 806bc71..833fa02 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
@@ -523,8 +523,8 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
               </TabContent>
             </Tabs>
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx b/ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx
index 39f543f..435ed95 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx
@@ -176,8 +176,8 @@ const ChartTabZoomAndPan = (props: FormEditProps) => {
               </Card>
             </div>
             <div className="mt-4">
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </div>
           </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/FormCustomization.tsx b/ui/src/views/admin/listForm/edit/FormCustomization.tsx
index 79cabec..93ea16f 100644
--- a/ui/src/views/admin/listForm/edit/FormCustomization.tsx
+++ b/ui/src/views/admin/listForm/edit/FormCustomization.tsx
@@ -294,8 +294,8 @@ function FormCustomization({
                     />
                   </FormItem>
 
-                  <Button block variant="solid" loading={isSubmitting} type="submit">
-                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::Saving') : translate('::Save')}
                   </Button>
                 </FormContainer>
               </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabColumns.tsx b/ui/src/views/admin/listForm/edit/FormTabColumns.tsx
index 64dd0c4..c4ee30d 100644
--- a/ui/src/views/admin/listForm/edit/FormTabColumns.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabColumns.tsx
@@ -310,8 +310,8 @@ function FormTabColumns(props: FormEditProps) {
                 </div>
               </div>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit" className="my-2">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseDataSource.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseDataSource.tsx
index 080222c..740f78a 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseDataSource.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseDataSource.tsx
@@ -387,8 +387,8 @@ function FormTabDatabaseDataSource(props: FormEditProps) {
                 </FormItem>
               </Card>
 
-              <Button block variant="solid" loading={isSubmitting}>
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting}>
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
index 2a0a593..a6f659e 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
@@ -116,8 +116,8 @@ function FormTabDatabaseDelete({
                   </FormItem>
                 </div>
 
-                <Button block variant="solid" loading={isSubmitting}>
-                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" block variant="solid" loading={isSubmitting}>
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
                 </Button>
               </Card>
 
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
index 6c1712d..b9fccdc 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
@@ -114,8 +114,8 @@ function FormTabDatabaseInsert({
                     />
                   </FormItem>
                 </div>
-                <Button block variant="solid" loading={isSubmitting}>
-                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" block variant="solid" loading={isSubmitting}>
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
                 </Button>
               </Card>
 
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx
index 0996913..4b8b6c8 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx
@@ -65,8 +65,8 @@ function FormTabDatabaseSelect({
                     component={Input}
                   />
                 </FormItem>
-                <Button block variant="solid" loading={isSubmitting}>
-                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" block variant="solid" loading={isSubmitting}>
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
                 </Button>
               </Card>
 
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
index 8a3a0ac..7905536 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
@@ -114,8 +114,8 @@ function FormTabDatabaseUpdate({
                     />
                   </FormItem>
                 </div>
-                <Button block variant="solid" loading={isSubmitting}>
-                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" block variant="solid" loading={isSubmitting}>
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
                 </Button>
               </Card>
 
diff --git a/ui/src/views/admin/listForm/edit/FormTabDetails.tsx b/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
index 723468d..1cb3254 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
@@ -437,8 +437,8 @@ function FormTabDetails(
               </Card>
             </div>
 
-            <Button block variant="solid" loading={isSubmitting} type="submit">
-              {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+            <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+              {isSubmitting ? translate('::Saving') : translate('::Save')}
             </Button>
           </FormContainer>
         </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabEdit.tsx b/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
index 78fab02..bc3f51d 100644
--- a/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
@@ -454,8 +454,8 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
                   )}
                 </Card>
               </div>
-              <Button block variant="solid" loading={isSubmitting}>
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting}>
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabFilters.tsx b/ui/src/views/admin/listForm/edit/FormTabFilters.tsx
index 9924a2c..e4cceea 100644
--- a/ui/src/views/admin/listForm/edit/FormTabFilters.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabFilters.tsx
@@ -304,8 +304,8 @@ function FormTabFilters(props: FormEditProps) {
                 </TabContent>
               </Tabs>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm"  block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabGantt.tsx b/ui/src/views/admin/listForm/edit/FormTabGantt.tsx
index 34340f9..51913fe 100644
--- a/ui/src/views/admin/listForm/edit/FormTabGantt.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabGantt.tsx
@@ -471,8 +471,8 @@ function FormTabGantt(props: FormEditProps) {
               </Card>
             </div>
 
-            <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
-              {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+            <Button size="sm" block variant="solid" loading={isSubmitting} type="submit" className="my-2">
+              {isSubmitting ? translate('::Saving') : translate('::Save')}
             </Button>
           </FormContainer>
         </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabGroup.tsx b/ui/src/views/admin/listForm/edit/FormTabGroup.tsx
index 7da0f82..8eafc4f 100644
--- a/ui/src/views/admin/listForm/edit/FormTabGroup.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabGroup.tsx
@@ -54,8 +54,8 @@ function FormTabGroup(props: FormEditProps) {
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabPager.tsx b/ui/src/views/admin/listForm/edit/FormTabPager.tsx
index 71ee9cc..9208722 100644
--- a/ui/src/views/admin/listForm/edit/FormTabPager.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabPager.tsx
@@ -235,8 +235,8 @@ function FormTabPager(props: FormEditProps) {
                 </div>
               </div>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabPermissions.tsx b/ui/src/views/admin/listForm/edit/FormTabPermissions.tsx
index 85bc33c..e1e68f1 100644
--- a/ui/src/views/admin/listForm/edit/FormTabPermissions.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabPermissions.tsx
@@ -239,8 +239,8 @@ function FormTabPermissions(props: FormEditProps) {
                 </FormItem>
               )}
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabPivots.tsx b/ui/src/views/admin/listForm/edit/FormTabPivots.tsx
index 744f58d..ed8c392 100644
--- a/ui/src/views/admin/listForm/edit/FormTabPivots.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabPivots.tsx
@@ -186,8 +186,8 @@ function FormTabColumns(props: FormEditProps) {
                 </div>
               </div>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit" className="my-2">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabRow.tsx b/ui/src/views/admin/listForm/edit/FormTabRow.tsx
index ffdba9f..05ae0b7 100644
--- a/ui/src/views/admin/listForm/edit/FormTabRow.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabRow.tsx
@@ -98,8 +98,8 @@ function FormTabRow(props: FormEditProps) {
                 </Field>
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabScheduler.tsx b/ui/src/views/admin/listForm/edit/FormTabScheduler.tsx
index 94c7626..c5bb0f3 100644
--- a/ui/src/views/admin/listForm/edit/FormTabScheduler.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabScheduler.tsx
@@ -363,8 +363,8 @@ function FormTabScheduler(props: FormEditProps) {
                 </FormItem>
               </Card>
             </div>
-            <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
-              {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+            <Button size="sm" block variant="solid" loading={isSubmitting} type="submit" className="my-2">
+              {isSubmitting ? translate('::Saving') : translate('::Save')}
             </Button>{' '}
           </FormContainer>
         </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabSearch.tsx b/ui/src/views/admin/listForm/edit/FormTabSearch.tsx
index 96c3253..56e1187 100644
--- a/ui/src/views/admin/listForm/edit/FormTabSearch.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabSearch.tsx
@@ -55,8 +55,8 @@ function FormTabSearch(props: FormEditProps) {
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabSelect.tsx b/ui/src/views/admin/listForm/edit/FormTabSelect.tsx
index 32d9849..e5468fb 100644
--- a/ui/src/views/admin/listForm/edit/FormTabSelect.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabSelect.tsx
@@ -128,8 +128,8 @@ function FormTabSelect(props: FormEditProps) {
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabSorting.tsx b/ui/src/views/admin/listForm/edit/FormTabSorting.tsx
index b6c4419..e00a396 100644
--- a/ui/src/views/admin/listForm/edit/FormTabSorting.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabSorting.tsx
@@ -74,8 +74,8 @@ function FormTabSorting(props: FormEditProps) {
                 </Field>
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabState.tsx b/ui/src/views/admin/listForm/edit/FormTabState.tsx
index 69a3dc3..24815e6 100644
--- a/ui/src/views/admin/listForm/edit/FormTabState.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabState.tsx
@@ -97,8 +97,8 @@ function FormTabState(props: FormEditProps) {
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabTree.tsx b/ui/src/views/admin/listForm/edit/FormTabTree.tsx
index 7fa4c5b..fe253f4 100644
--- a/ui/src/views/admin/listForm/edit/FormTabTree.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabTree.tsx
@@ -185,8 +185,8 @@ function FormTabTree(props: FormEditProps) {
                 component={Checkbox}
               />
             </FormItem>
-            <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
-              {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+            <Button size="sm" block variant="solid" loading={isSubmitting} type="submit" className="my-2">
+              {isSubmitting ? translate('::Saving') : translate('::Save')}
             </Button>
           </FormContainer>
         </Form>
diff --git a/ui/src/views/admin/listForm/edit/FormTabWorkflow.tsx b/ui/src/views/admin/listForm/edit/FormTabWorkflow.tsx
index 0fd245a..bcb0d24 100644
--- a/ui/src/views/admin/listForm/edit/FormTabWorkflow.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabWorkflow.tsx
@@ -450,8 +450,8 @@ export function FormTabWorkflow(
                   </FormItem>
                 </div>
 
-                <Button block variant="solid" type="submit" loading={isSubmitting}>
-                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" block variant="solid" type="submit" loading={isSubmitting}>
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
                 </Button>
               </Card>
             </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabConditionalFormatting.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabConditionalFormatting.tsx
index df37822..edc9d12 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabConditionalFormatting.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabConditionalFormatting.tsx
@@ -316,8 +316,8 @@ function FormFieldTabConditionalFormatting({
                   />
                 </FormItem>
 
-                <Button block variant="solid" loading={isLoading} type="submit">
-                  {isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" block variant="solid" loading={isLoading} type="submit">
+                  {isLoading ? translate('::Saving') : translate('::Save')}
                 </Button>
               </FormContainer>
             </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCssOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCssOptions.tsx
index a7578e5..e42498f 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCssOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCssOptions.tsx
@@ -63,8 +63,8 @@ function FormFieldTabCssOptions({
                 />
               </FormItem>
 
-              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
index a225997..4fb5ba5 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
@@ -70,8 +70,8 @@ function FormFieldTabCustomization({
                 </Field>
               </FormItem>
 
-              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
index 9fbee93..9bd0f6f 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
@@ -133,8 +133,8 @@ function FormFieldTabDetails({
               </FormItem>
             </Card>
           </div>
-          <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::Saving') : translate('::Save')}
           </Button>
         </Form>
       )}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabFiltering.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabFiltering.tsx
index 5c79371..1c4ffb1 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabFiltering.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabFiltering.tsx
@@ -84,8 +84,8 @@ function FormFieldTabFiltering({
                 />
               </FormItem>
 
-              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
index 7ec57f6..7c4a371 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
@@ -176,8 +176,8 @@ function FormFieldTabGroupSummary({
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGrouping.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGrouping.tsx
index 95bce8f..e7f7aec 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGrouping.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGrouping.tsx
@@ -61,8 +61,8 @@ function FormFieldTabGrouping({
                 />
               </FormItem>
 
-              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabHeadering.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabHeadering.tsx
index ea51034..e847989 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabHeadering.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabHeadering.tsx
@@ -65,8 +65,8 @@ function FormFieldTabHeadering({
                 />
               </FormItem>
 
-              <Button  className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button  size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
index ccd822e..a795620 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
@@ -234,8 +234,8 @@ function FormFieldTabJoinOptions({
               </FormItem>
             </Card>
           </div>
-          <Button  className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          <Button  size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::Saving') : translate('::Save')}
           </Button>
         </Form>
       )}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
index 96af325..377960d 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
@@ -218,10 +218,8 @@ function TablePickerModal({
                   }}
                   block
                   variant="solid"
-                  color="indigo-600"
-                  className="mt-1 !h-auto !rounded !py-1.5 text-xs font-semibold text-white transition-colors hover:!bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-40"
                 >
-                  Tamam
+                  {translate('::OK')}
                 </Button>
               </>
             )}
@@ -467,8 +465,8 @@ function FormFieldTabLookup({
               </FormItem>
             </Card>
           </div>
-          <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::Saving') : translate('::Save')}
           </Button>
         </Form>
       )}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
index efe715c..b91623e 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
@@ -113,8 +113,8 @@ function FormFieldTabOptions({
             </Card>
           </div>
 
-          <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::Saving') : translate('::Save')}
           </Button>
         </Form>
       )}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
index f62a680..8c0fcbf 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
@@ -159,8 +159,8 @@ function FormFieldTabPermissions({
                 <Field name="permissionDto.i" component={Checkbox} />
               </FormItem>
 
-              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
index e27f66c..0d35415 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
@@ -214,8 +214,8 @@ function FormFieldTabPivotSetting({
               </FormItem>
             </Card>
           </div>
-          <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-            {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+          <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+            {isSubmitting ? translate('::Saving') : translate('::Save')}
           </Button>
         </Form>
       )}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
index dff53e7..59c3d23 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
@@ -177,8 +177,8 @@ function FormFieldTabTotalSummary({
                 />
               </FormItem>
 
-              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
-                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              <Button size="sm" className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
+                {isSubmitting ? translate('::Saving') : translate('::Save')}
               </Button>
             </FormContainer>
           </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
index 5089c56..3122155 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
@@ -355,8 +355,8 @@ function FormFieldTabValidationRules({
                   <Field name="trim" placeholder="Trim" component={Checkbox} />
                 </FormItem>
 
-                <Button className="mt-1" block variant="solid" loading={isLoading} type="submit">
-                  {isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" className="mt-1" block variant="solid" loading={isLoading} type="submit">
+                  {isLoading ? translate('::Saving') : translate('::Save')}
                 </Button>
               </FormContainer>
             </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
index 8b731cd..39a5013 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
@@ -390,7 +390,7 @@ function FormFields({
                 </Field>
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
+              <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? '...' : translate('::ListForms.ListFormField.Filter')}
               </Button>
             </FormContainer>
@@ -684,8 +684,8 @@ function FormFields({
                   </Field>
                 </FormItem>
 
-                <Button block variant="solid" loading={isSubmitting} type="submit">
-                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
                 </Button>
               </FormContainer>
             </Form>
@@ -1023,8 +1023,8 @@ function FormFields({
                     <Field name="copiedFields.pivotSetting" component={Checkbox} className="mr-1" />
                   </FormItem>
                 </div>
-                <Button block variant="solid" loading={isSubmitting} type="submit">
-                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" block variant="solid" loading={isSubmitting} type="submit">
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
                 </Button>
               </FormContainer>
             </Form>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
index c58cf59..7734d50 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
@@ -987,10 +987,10 @@ function EditorOptionsBuilderDialog({
       </Dialog.Body>
       <Dialog.Footer className="flex justify-end gap-2 border-t border-gray-200 pt-3 mt-1 dark:border-gray-700">
         <Button size="sm" type="button" variant="plain" icon={<FaTimes />} onClick={onClose}>
-          Vazgeç
+          {translate('::Cancel')}
         </Button>
         <Button size="sm" type="button" variant="solid" icon={<FaCheck />} onClick={applyOptions}>
-          Uygula
+          {translate('::Save')}
         </Button>
       </Dialog.Footer>
     </Dialog>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/EditorScriptBuilderDialog.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/EditorScriptBuilderDialog.tsx
index c4830f6..5577301 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/EditorScriptBuilderDialog.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/EditorScriptBuilderDialog.tsx
@@ -1,5 +1,6 @@
 import { Button, Dialog } from '@/components/ui'
 import { SelectBoxOption } from '@/types/shared'
+import { useLocalization } from '@/utils/hooks/useLocalization'
 import Editor from '@monaco-editor/react'
 import { useEffect, useMemo, useState } from 'react'
 import { FaBolt, FaCheck, FaCode, FaMagic, FaPlus, FaTimes, FaTrash } from 'react-icons/fa'
@@ -558,7 +559,8 @@ function EditorScriptBuilderDialog({
   const [serviceCall, setServiceCall] = useState('')
   const [scriptEditorValue, setScriptEditorValue] = useState('')
   const [lastGeneratedScript, setLastGeneratedScript] = useState('')
-
+  const { translate } = useLocalization()
+  
   useEffect(() => {
     if (!isOpen) return
     setCopyMappings([])
@@ -1354,7 +1356,7 @@ function EditorScriptBuilderDialog({
       </Dialog.Body>
       <Dialog.Footer className="flex justify-end gap-2 border-t border-gray-200 pt-3 mt-1 dark:border-gray-700">
         <Button size="sm" type="button" variant="plain" icon={<FaTimes />} onClick={onClose}>
-          Vazgeç
+          {translate('::Cancel')}
         </Button>
         <Button
           size="sm"
@@ -1366,7 +1368,7 @@ function EditorScriptBuilderDialog({
             onClose()
           }}
         >
-          Uygula
+          {translate('::Save')}
         </Button>
       </Dialog.Footer>
     </Dialog>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
index 71e2493..7cda97c 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
@@ -95,410 +95,394 @@ function JsonRowOpDialogAnnotation({
     >
       {(data.operation === 'create' || data.operation === 'update') && (
         <Formik
-            initialValues={
-              data.chartAnnotationValues ?? {
-                argument: '',
-                border: {
-                  color: '#d3d3d3',
-                  cornerRadius: 0,
-                  dashStyle: 'solid',
-                  visible: false,
-                  width: 1,
-                },
-                color: '',
-                description: '',
-                font: {
-                  color: '#FFFFFF',
-                  family: '"Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif',
-                  size: 12,
-                  weight: 400,
-                },
-                height: 0,
-                image: '',
-                name: '',
-                offsetX: 0,
-                offsetY: 0,
-                paddingLeftRight: 0,
-                paddingTopBottom: 0,
-                series: '',
-                text: '',
-                tooltipEnabled: false,
-                type: '',
-                value: '',
-                width: 0,
-                wordWrap: '',
-                x: 0,
-                y: 0,
-              }
+          initialValues={
+            data.chartAnnotationValues ?? {
+              argument: '',
+              border: {
+                color: '#d3d3d3',
+                cornerRadius: 0,
+                dashStyle: 'solid',
+                visible: false,
+                width: 1,
+              },
+              color: '',
+              description: '',
+              font: {
+                color: '#FFFFFF',
+                family: '"Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif',
+                size: 12,
+                weight: 400,
+              },
+              height: 0,
+              image: '',
+              name: '',
+              offsetX: 0,
+              offsetY: 0,
+              paddingLeftRight: 0,
+              paddingTopBottom: 0,
+              series: '',
+              text: '',
+              tooltipEnabled: false,
+              type: '',
+              value: '',
+              width: 0,
+              wordWrap: '',
+              x: 0,
+              y: 0,
             }
-            validationSchema={schema}
-            onSubmit={async (values, { setSubmitting }) => {
-              setSubmitting(true)
-              try {
-                const input: ListFormJsonRowDto = {
-                  index: data.index,
-                  fieldName: data.tabName,
-                  itemChartAnnotation: values,
-                }
-                if (data.index === -1) {
-                  await postListFormJsonRow(data.id, input)
-                } else {
-                  await putListFormJsonRow(data.id, input)
-                }
-                toast.push(
-                  <Notification type="success">
-                    {data.index === -1 ? 'Kayıt eklendi' : 'Kayıt güncellendi'}
-                  </Notification>,
-                  { placement: 'top-end' },
-                )
-                handleClose()
-              } catch (error: any) {
-                toast.push(
-                  <Notification type="danger">
-                    Hata
-                    <code>{error}</code>
-                  </Notification>,
-                  { placement: 'top-end' },
-                )
-              } finally {
-                setSubmitting(false)
+          }
+          validationSchema={schema}
+          onSubmit={async (values, { setSubmitting }) => {
+            setSubmitting(true)
+            try {
+              const input: ListFormJsonRowDto = {
+                index: data.index,
+                fieldName: data.tabName,
+                itemChartAnnotation: values,
               }
-            }}
-          >
-            {({ touched, errors, values, isSubmitting }) => (
-              <Form className="flex flex-col h-full">
-                <Dialog.Body className="flex flex-col gap-2 overflow-hidden">
-                  <h5 className="flex-shrink-0">{data.index === -1 ? 'Add' : 'Update'}</h5>
-                  <div className="flex-1 overflow-y-auto">
-                    <Tabs defaultValue="annotations_general">
-                      <TabList>
-                        <TabNav value="annotations_general">General</TabNav>
-                        <TabNav value="annotations_border">Border</TabNav>
-                      </TabList>
-                      <TabContent value="annotations_general">
-                        <div className="p-3 grid grid-cols-3 gap-x-4 gap-y-1">
-                          <FormItem
-                            label="Tooltip Enabled"
-                            invalid={errors.tooltipEnabled && touched.tooltipEnabled}
-                            errorMessage={errors.tooltipEnabled}
-                          >
-                            <Field name="tooltipEnabled" component={Checkbox} />
-                          </FormItem>
+              if (data.index === -1) {
+                await postListFormJsonRow(data.id, input)
+              } else {
+                await putListFormJsonRow(data.id, input)
+              }
+              toast.push(
+                <Notification type="success">
+                  {data.index === -1 ? 'Kayıt eklendi' : 'Kayıt güncellendi'}
+                </Notification>,
+                { placement: 'top-end' },
+              )
+              handleClose()
+            } catch (error: any) {
+              toast.push(
+                <Notification type="danger">
+                  Hata
+                  <code>{error}</code>
+                </Notification>,
+                { placement: 'top-end' },
+              )
+            } finally {
+              setSubmitting(false)
+            }
+          }}
+        >
+          {({ touched, errors, values, isSubmitting }) => (
+            <Form className="flex flex-col h-full">
+              <Dialog.Body className="flex flex-col gap-2 overflow-hidden">
+                <h5 className="flex-shrink-0">{data.index === -1 ? 'Add' : 'Update'}</h5>
+                <div className="flex-1 overflow-y-auto">
+                  <Tabs defaultValue="annotations_general">
+                    <TabList>
+                      <TabNav value="annotations_general">General</TabNav>
+                      <TabNav value="annotations_border">Border</TabNav>
+                    </TabList>
+                    <TabContent value="annotations_general">
+                      <div className="p-3 grid grid-cols-3 gap-x-4 gap-y-1">
+                        <FormItem
+                          label="Tooltip Enabled"
+                          invalid={errors.tooltipEnabled && touched.tooltipEnabled}
+                          errorMessage={errors.tooltipEnabled}
+                        >
+                          <Field name="tooltipEnabled" component={Checkbox} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Type"
-                            invalid={errors.type && touched.type}
-                            errorMessage={errors.type}
-                          >
-                            <Field type="text" name="type">
-                              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                                <Select
-                                  field={field}
-                                  form={form}
-                                  options={chartAnnotationTypeListOptions}
-                                  isClearable={true}
-                                  value={chartAnnotationTypeListOptions.filter(
-                                    (option) => option.value === values.type,
-                                  )}
-                                  onChange={(option) =>
-                                    form.setFieldValue(field.name, option?.value)
-                                  }
-                                />
-                              )}
-                            </Field>
-                          </FormItem>
+                        <FormItem
+                          label="Type"
+                          invalid={errors.type && touched.type}
+                          errorMessage={errors.type}
+                        >
+                          <Field type="text" name="type">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                options={chartAnnotationTypeListOptions}
+                                isClearable={true}
+                                value={chartAnnotationTypeListOptions.filter(
+                                  (option) => option.value === values.type,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
+                            )}
+                          </Field>
+                        </FormItem>
 
-                          <FormItem
-                            label="Series"
-                            invalid={errors.series && touched.series}
-                            errorMessage={errors.series}
-                          >
-                            <Field type="text" name="series">
-                              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                                <Select
-                                  field={field}
-                                  form={form}
-                                  isClearable={true}
-                                  options={SeriesList()}
-                                  value={SeriesList()?.find(
-                                    (option) => option.value === values.series,
-                                  )}
-                                  onChange={(option) =>
-                                    form.setFieldValue(field.name, option?.value)
-                                  }
-                                />
-                              )}
-                            </Field>
-                          </FormItem>
+                        <FormItem
+                          label="Series"
+                          invalid={errors.series && touched.series}
+                          errorMessage={errors.series}
+                        >
+                          <Field type="text" name="series">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                isClearable={true}
+                                options={SeriesList()}
+                                value={SeriesList()?.find(
+                                  (option) => option.value === values.series,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
+                            )}
+                          </Field>
+                        </FormItem>
 
-                          <FormItem
-                            label="Name"
-                            invalid={errors.name && touched.name}
-                            errorMessage={errors.name}
-                          >
-                            <Field type="text" name="name" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Name"
+                          invalid={errors.name && touched.name}
+                          errorMessage={errors.name}
+                        >
+                          <Field type="text" name="name" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Text"
-                            invalid={errors.text && touched.text}
-                            errorMessage={errors.text}
-                          >
-                            <Field type="text" name="text" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Text"
+                          invalid={errors.text && touched.text}
+                          errorMessage={errors.text}
+                        >
+                          <Field type="text" name="text" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Value"
-                            invalid={errors.value && touched.value}
-                            errorMessage={errors.value}
-                          >
-                            <Field type="text" name="value" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Value"
+                          invalid={errors.value && touched.value}
+                          errorMessage={errors.value}
+                        >
+                          <Field type="text" name="value" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Argument"
-                            invalid={errors.argument && touched.argument}
-                            errorMessage={errors.argument}
-                          >
-                            <Field name="argument" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Argument"
+                          invalid={errors.argument && touched.argument}
+                          errorMessage={errors.argument}
+                        >
+                          <Field name="argument" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Color"
-                            invalid={errors.color && touched.color}
-                            errorMessage={errors.color}
-                          >
-                            <Field name="color">
-                              {({ field, form }: FieldProps) => (
-                                <Input
-                                  {...field}
-                                  type="color"
-                                  className='!h-10 !p-0 !m-0 !border-0'
-                                  onChange={(e) => form.setFieldValue(field.name, e.target.value)}
-                                />
-                              )}
-                            </Field>
-                          </FormItem>
+                        <FormItem
+                          label="Color"
+                          invalid={errors.color && touched.color}
+                          errorMessage={errors.color}
+                        >
+                          <Field name="color">
+                            {({ field, form }: FieldProps) => (
+                              <Input
+                                {...field}
+                                type="color"
+                                className="!h-10 !p-0 !m-0 !border-0"
+                                onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                              />
+                            )}
+                          </Field>
+                        </FormItem>
 
-                          <FormItem
-                            label="Word Wrap"
-                            invalid={errors.wordWrap && touched.wordWrap}
-                            errorMessage={errors.wordWrap}
-                          >
-                            <Field type="text" name="wordWrap">
-                              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                                <Select
-                                  field={field}
-                                  form={form}
-                                  options={chartTitleWordWrapListOptions}
-                                  isClearable={true}
-                                  value={chartTitleWordWrapListOptions.filter(
-                                    (option) => option.value === values.wordWrap,
-                                  )}
-                                  onChange={(option) =>
-                                    form.setFieldValue(field.name, option?.value)
-                                  }
-                                />
-                              )}
-                            </Field>
-                          </FormItem>
+                        <FormItem
+                          label="Word Wrap"
+                          invalid={errors.wordWrap && touched.wordWrap}
+                          errorMessage={errors.wordWrap}
+                        >
+                          <Field type="text" name="wordWrap">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                options={chartTitleWordWrapListOptions}
+                                isClearable={true}
+                                value={chartTitleWordWrapListOptions.filter(
+                                  (option) => option.value === values.wordWrap,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
+                            )}
+                          </Field>
+                        </FormItem>
 
-                          <FormItem
-                            label="Description"
-                            invalid={errors.description && touched.description}
-                            errorMessage={errors.description}
-                          >
-                            <Field type="text" name="description" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Description"
+                          invalid={errors.description && touched.description}
+                          errorMessage={errors.description}
+                        >
+                          <Field type="text" name="description" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Image"
-                            invalid={errors.image && touched.image}
-                            errorMessage={errors.image}
-                          >
-                            <Field type="text" name="image" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Image"
+                          invalid={errors.image && touched.image}
+                          errorMessage={errors.image}
+                        >
+                          <Field type="text" name="image" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Width"
-                            invalid={errors.width && touched.width}
-                            errorMessage={errors.width}
-                          >
-                            <Field type="number" name="width" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Width"
+                          invalid={errors.width && touched.width}
+                          errorMessage={errors.width}
+                        >
+                          <Field type="number" name="width" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Height"
-                            invalid={errors.height && touched.height}
-                            errorMessage={errors.height}
-                          >
-                            <Field type="number" name="height" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Height"
+                          invalid={errors.height && touched.height}
+                          errorMessage={errors.height}
+                        >
+                          <Field type="number" name="height" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Padding Left/Right"
-                            invalid={errors.paddingLeftRight && touched.paddingLeftRight}
-                            errorMessage={errors.paddingLeftRight}
-                          >
-                            <Field type="number" name="paddingLeftRight" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Padding Left/Right"
+                          invalid={errors.paddingLeftRight && touched.paddingLeftRight}
+                          errorMessage={errors.paddingLeftRight}
+                        >
+                          <Field type="number" name="paddingLeftRight" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Padding Top/Bottom"
-                            invalid={errors.paddingTopBottom && touched.paddingTopBottom}
-                            errorMessage={errors.paddingTopBottom}
-                          >
-                            <Field type="number" name="paddingTopBottom" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="Padding Top/Bottom"
+                          invalid={errors.paddingTopBottom && touched.paddingTopBottom}
+                          errorMessage={errors.paddingTopBottom}
+                        >
+                          <Field type="number" name="paddingTopBottom" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="X"
-                            invalid={errors.x && touched.x}
-                            errorMessage={errors.x}
-                          >
-                            <Field type="number" name="x" component={Input} />
-                          </FormItem>
+                        <FormItem label="X" invalid={errors.x && touched.x} errorMessage={errors.x}>
+                          <Field type="number" name="x" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Y"
-                            invalid={errors.y && touched.y}
-                            errorMessage={errors.y}
-                          >
-                            <Field type="number" name="y" component={Input} />
-                          </FormItem>
+                        <FormItem label="Y" invalid={errors.y && touched.y} errorMessage={errors.y}>
+                          <Field type="number" name="y" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="OffsetX"
-                            invalid={errors.offsetX && touched.offsetX}
-                            errorMessage={errors.offsetX}
-                          >
-                            <Field type="number" name="offsetX" component={Input} />
-                          </FormItem>
+                        <FormItem
+                          label="OffsetX"
+                          invalid={errors.offsetX && touched.offsetX}
+                          errorMessage={errors.offsetX}
+                        >
+                          <Field type="number" name="offsetX" component={Input} />
+                        </FormItem>
 
-                          <FormItem
-                            label="OffsetY"
-                            invalid={errors.offsetY && touched.offsetY}
-                            errorMessage={errors.offsetY}
-                          >
-                            <Field type="number" name="offsetY" component={Input} />
-                          </FormItem>
-                        </div>
-                      </TabContent>
-                      <TabContent value="annotations_border">
-                        <div className="p-3 grid grid-cols-2 gap-x-4 gap-y-1">
-                          <FormItem
-                            label="Visible"
-                            invalid={errors.border?.visible && touched.border?.visible}
-                            errorMessage={errors.border?.visible}
-                          >
-                            <Field name="border.visible" component={Checkbox} />
-                          </FormItem>
+                        <FormItem
+                          label="OffsetY"
+                          invalid={errors.offsetY && touched.offsetY}
+                          errorMessage={errors.offsetY}
+                        >
+                          <Field type="number" name="offsetY" component={Input} />
+                        </FormItem>
+                      </div>
+                    </TabContent>
+                    <TabContent value="annotations_border">
+                      <div className="p-3 grid grid-cols-2 gap-x-4 gap-y-1">
+                        <FormItem
+                          label="Visible"
+                          invalid={errors.border?.visible && touched.border?.visible}
+                          errorMessage={errors.border?.visible}
+                        >
+                          <Field name="border.visible" component={Checkbox} />
+                        </FormItem>
 
-                          <FormItem
-                            label="Color"
-                            invalid={errors.border?.color && touched.border?.color}
-                            errorMessage={errors.border?.color}
-                          >
-                            <Field name="border.color">
-                              {({ field, form }: FieldProps) => (
-                                <Input
-                                  {...field}
-                                  type="color"
-                                  className='!h-10 !p-0 !m-0 !border-0'
-                                  onChange={(e) => form.setFieldValue(field.name, e.target.value)}
-                                />
-                              )}
-                            </Field>
-                          </FormItem>
+                        <FormItem
+                          label="Color"
+                          invalid={errors.border?.color && touched.border?.color}
+                          errorMessage={errors.border?.color}
+                        >
+                          <Field name="border.color">
+                            {({ field, form }: FieldProps) => (
+                              <Input
+                                {...field}
+                                type="color"
+                                className="!h-10 !p-0 !m-0 !border-0"
+                                onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                              />
+                            )}
+                          </Field>
+                        </FormItem>
 
-                          <FormItem
-                            label="Dash Style"
-                            invalid={errors.border?.dashStyle && touched.border?.dashStyle}
-                            errorMessage={errors.border?.dashStyle}
-                          >
-                            <Field type="text" name="border.dashStyle">
-                              {({ field, form }: FieldProps<SelectBoxOption>) => (
-                                <Select
-                                  field={field}
-                                  form={form}
-                                  options={chartSeriesDashStyleOptions}
-                                  isClearable={true}
-                                  value={chartSeriesDashStyleOptions.filter(
-                                    (option) => option.value === values.border.dashStyle,
-                                  )}
-                                  onChange={(option) =>
-                                    form.setFieldValue(field.name, option?.value)
-                                  }
-                                />
-                              )}
-                            </Field>
-                          </FormItem>
+                        <FormItem
+                          label="Dash Style"
+                          invalid={errors.border?.dashStyle && touched.border?.dashStyle}
+                          errorMessage={errors.border?.dashStyle}
+                        >
+                          <Field type="text" name="border.dashStyle">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                options={chartSeriesDashStyleOptions}
+                                isClearable={true}
+                                value={chartSeriesDashStyleOptions.filter(
+                                  (option) => option.value === values.border.dashStyle,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
+                            )}
+                          </Field>
+                        </FormItem>
 
-                          <FormItem
-                            label="Width"
-                            invalid={errors.border?.width && touched.border?.width}
-                            errorMessage={errors.border?.width}
-                          >
-                            <Field type="number" name="border.width" component={Input} />
-                          </FormItem>
-                        </div>
-                      </TabContent>
-                    </Tabs>
-                  </div>
-                </Dialog.Body>
-                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
-                  <Button variant="plain" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="solid" loading={isSubmitting} type="submit">
-                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                  </Button>
-                </Dialog.Footer>
-              </Form>
-            )}
-          </Formik>
+                        <FormItem
+                          label="Width"
+                          invalid={errors.border?.width && touched.border?.width}
+                          errorMessage={errors.border?.width}
+                        >
+                          <Field type="number" name="border.width" component={Input} />
+                        </FormItem>
+                      </div>
+                    </TabContent>
+                  </Tabs>
+                </div>
+              </Dialog.Body>
+              <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                <Button size="sm" variant="plain" onClick={handleClose}>
+                  {translate('::Cancel')}
+                </Button>
+                <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
+                </Button>
+              </Dialog.Footer>
+            </Form>
+          )}
+        </Formik>
       )}
       {data.operation === 'delete' && (
         <Formik
-            initialValues={data}
-            onSubmit={async (values, { setSubmitting }) => {
-              setSubmitting(true)
-              try {
-                await deleteListFormJsonRow(data.id, data.tabName, values.index)
-                toast.push(<Notification type="success">Kayıt silindi </Notification>, {
-                  placement: 'top-end',
-                })
-                handleClose()
-              } catch (error: any) {
-                toast.push(
-                  <Notification type="danger">
-                    Hata
-                    <code>{error}</code>
-                  </Notification>,
-                  { placement: 'top-end' },
-                )
-              } finally {
-                setSubmitting(false)
-              }
-            }}
-          >
-            {({ isSubmitting }) => (
-              <Form className="flex flex-col h-full">
-                <Dialog.Body className="flex flex-col gap-2">
-                  <h5>Delete</h5>
-                  <p>Silmek istediğinize emin misiniz?</p>
-                </Dialog.Body>
-                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
-                  <Button variant="plain" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="solid" loading={isSubmitting} type="submit">
-                    {isSubmitting ? 'Deleting' : 'Delete'}
-                  </Button>
-                </Dialog.Footer>
-              </Form>
-            )}
-          </Formik>
+          initialValues={data}
+          onSubmit={async (values, { setSubmitting }) => {
+            setSubmitting(true)
+            try {
+              await deleteListFormJsonRow(data.id, data.tabName, values.index)
+              toast.push(<Notification type="success">Kayıt silindi </Notification>, {
+                placement: 'top-end',
+              })
+              handleClose()
+            } catch (error: any) {
+              toast.push(
+                <Notification type="danger">
+                  Hata
+                  <code>{error}</code>
+                </Notification>,
+                { placement: 'top-end' },
+              )
+            } finally {
+              setSubmitting(false)
+            }
+          }}
+        >
+          {({ isSubmitting }) => (
+            <Form className="flex flex-col h-full">
+              <Dialog.Body className="flex flex-col gap-2">
+                <h5>Delete</h5>
+                <p>Silmek istediğinize emin misiniz?</p>
+              </Dialog.Body>
+              <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                <Button size="sm" variant="plain" onClick={handleClose}>
+                  {translate('::Cancel')}
+                </Button>
+                <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                  {isSubmitting ? 'Deleting' : 'Delete'}
+                </Button>
+              </Dialog.Footer>
+            </Form>
+          )}
+        </Formik>
       )}
     </Dialog>
   )
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
index 2c2d021..12dddb8 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
@@ -310,8 +310,10 @@ function JsonRowOpDialogAxis({
                                     <Input
                                       {...field}
                                       type="color"
-                                      className='!h-10 !p-0 !m-0 !border-0'
-                                      onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                                      className="!h-10 !p-0 !m-0 !border-0"
+                                      onChange={(e) =>
+                                        form.setFieldValue(field.name, e.target.value)
+                                      }
                                     />
                                   )}
                                 </Field>
@@ -340,8 +342,10 @@ function JsonRowOpDialogAxis({
                                     <Input
                                       {...field}
                                       type="color"
-                                      className='!h-10 !p-0 !m-0 !border-0'
-                                      onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                                      className="!h-10 !p-0 !m-0 !border-0"
+                                      onChange={(e) =>
+                                        form.setFieldValue(field.name, e.target.value)
+                                      }
                                     />
                                   )}
                                 </Field>
@@ -450,11 +454,16 @@ function JsonRowOpDialogAxis({
                       </Tabs>
                     </div>
                     <div className="text-right mt-4">
-                      <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                        Cancel
+                      <Button
+                        size="sm"
+                        className="ltr:mr-2 rtl:ml-2"
+                        variant="plain"
+                        onClick={handleClose}
+                      >
+                        {translate('::Cancel')}
                       </Button>
-                      <Button variant="solid" loading={isSubmitting} type="submit">
-                        {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                      <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                        {isSubmitting ? translate('::Saving') : translate('::Save')}
                       </Button>
                     </div>
                   </FormContainer>
@@ -495,10 +504,10 @@ function JsonRowOpDialogAxis({
               <Form>
                 <FormContainer size="sm">
                   <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
+                    <Button size="sm" className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      {translate('::Cancel')}
                     </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                       {isSubmitting ? 'Deleting' : 'Delete'}
                     </Button>
                   </div>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogCommand.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogCommand.tsx
index 8e48925..51391b5 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogCommand.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogCommand.tsx
@@ -366,11 +366,11 @@ function JsonRowOpDialogCommand({
                     </Tabs>
                   </div>
                   <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
+                    <Button size="sm" className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      {translate('::Cancel')}
                     </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                      {isSubmitting ? translate('::Saving') : translate('::Save')}
                     </Button>
                   </div>
                 </FormContainer>
@@ -411,10 +411,10 @@ function JsonRowOpDialogCommand({
               <Form>
                 <FormContainer size="sm">
                   <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
+                    <Button size="sm" className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      { translate('::Cancel') }
                     </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                       {isSubmitting ? 'Deleting' : 'Delete'}
                     </Button>
                   </div>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogDatabase.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogDatabase.tsx
index 65ea252..3f99884 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogDatabase.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogDatabase.tsx
@@ -239,11 +239,11 @@ function JsonRowOpDialogDatabase({
                     )}
                   </div>
                   <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
+                    <Button size="sm" className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      { translate('::Cancel') }
                     </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                      {isSubmitting ? translate('::Saving') : translate('::Save')}
                     </Button>
                   </div>
                 </FormContainer>
@@ -284,10 +284,10 @@ function JsonRowOpDialogDatabase({
               <Form>
                 <FormContainer size="sm">
                   <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
+                    <Button size="sm" className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      { translate('::Cancel') }
                     </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                       {isSubmitting ? 'Deleting' : 'Delete'}
                     </Button>
                   </div>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx
index c797d28..5783be7 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx
@@ -893,11 +893,11 @@ function JsonRowOpDialogEditForm({
                   {translate('::ListForms.ListFormFieldEdit.HelperOpen')}
                 </Button>
                 <div className="flex gap-2">
-                  <Button variant="plain" onClick={handleClose}>
-                    Cancel
+                  <Button size="sm" variant="plain" onClick={handleClose}>
+                    { translate('::Cancel') }
                   </Button>
-                  <Button variant="solid" loading={isSubmitting} type="submit">
-                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::Saving') : translate('::Save')}
                   </Button>
                 </div>
               </Dialog.Footer>
@@ -930,14 +930,14 @@ function JsonRowOpDialogEditForm({
           {({ isSubmitting }) => (
             <Form className="flex flex-col h-full">
               <Dialog.Body className="flex flex-col gap-2">
-                <h5>Delete</h5>
-                <p>Silmek istediğinize emin misiniz?</p>
+                <h5>{translate('::Delete')}</h5>
+                <p>{translate('::DeleteConfirmation')}</p>
               </Dialog.Body>
               <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
-                <Button variant="plain" onClick={handleClose}>
-                  Cancel
+                <Button size="sm" variant="plain" onClick={handleClose}>
+                  { translate('::Cancel') }
                 </Button>
-                <Button variant="solid" loading={isSubmitting} type="submit">
+                <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                   {isSubmitting ? 'Deleting' : 'Delete'}
                 </Button>
               </Dialog.Footer>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogExtraFilter.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogExtraFilter.tsx
index f31e4d6..1f52494 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogExtraFilter.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogExtraFilter.tsx
@@ -286,11 +286,11 @@ function JsonRowOpDialogExtraFilter({
                     </FormItem>
                   </div>
                   <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
+                    <Button size="sm" className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      {translate('::Cancel')}
                     </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                      {isSubmitting ? translate('::Saving') : translate('::Save')}
                     </Button>
                   </div>
                 </FormContainer>
@@ -331,10 +331,10 @@ function JsonRowOpDialogExtraFilter({
               <Form>
                 <FormContainer size="sm">
                   <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
+                    <Button size="sm" className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      {translate('::Cancel')}
                     </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                       {isSubmitting ? 'Deleting' : 'Delete'}
                     </Button>
                   </div>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
index 1ad5357..4016ac1 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
@@ -152,11 +152,11 @@ function JsonRowOpDialogPane({
                     </FormItem>
                   </div>
                   <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
+                    <Button size="sm" className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      {translate('::Cancel')}
                     </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                      {isSubmitting ? translate('::Saving') : translate('::Save')}
                     </Button>
                   </div>
                 </FormContainer>
@@ -196,10 +196,10 @@ function JsonRowOpDialogPane({
               <Form>
                 <FormContainer size="sm">
                   <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
+                    <Button size="sm" className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
+                      {translate('::Cancel')}
                     </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                       {isSubmitting ? 'Deleting' : 'Delete'}
                     </Button>
                   </div>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
index 5804be8..153ea89 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
@@ -535,11 +535,11 @@ function JsonRowOpDialogSeries({
                   </div>
                 </Dialog.Body>
                 <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
-                  <Button variant="plain" onClick={handleClose}>
-                    Cancel
+                  <Button size="sm" variant="plain" onClick={handleClose}>
+                    {translate('::Cancel')}
                   </Button>
-                  <Button variant="solid" loading={isSubmitting} type="submit">
-                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::Saving') : translate('::Save')}
                   </Button>
                 </Dialog.Footer>
               </Form>
@@ -573,14 +573,14 @@ function JsonRowOpDialogSeries({
             {({ isSubmitting }) => (
               <Form className="flex flex-col h-full">
                 <Dialog.Body className="flex flex-col gap-2">
-                  <h5>Delete</h5>
-                  <p>Silmek istediğinize emin misiniz?</p>
+                  <h5>{translate('::Delete')}</h5>
+                  <p>{translate('::DeleteConfirmation')}</p>
                 </Dialog.Body>
                 <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
-                  <Button variant="plain" onClick={handleClose}>
-                    Cancel
+                  <Button size="sm" variant="plain" onClick={handleClose}>
+                    {translate('::Cancel')}
                   </Button>
-                  <Button variant="solid" loading={isSubmitting} type="submit">
+                  <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                     {isSubmitting ? 'Deleting' : 'Delete'}
                   </Button>
                 </Dialog.Footer>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx
index b6835d1..e1bb0fb 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx
@@ -433,11 +433,11 @@ function JsonRowOpDialogSubForm({
                 </div>
               </Dialog.Body>
               <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
-                <Button variant="plain" onClick={handleClose}>
-                  Cancel
+                <Button size="sm" variant="plain" onClick={handleClose}>
+                  {translate('::Cancel')}
                 </Button>
-                <Button variant="solid" loading={isSubmitting} type="submit">
-                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
                 </Button>
               </Dialog.Footer>
             </Form>
@@ -470,14 +470,14 @@ function JsonRowOpDialogSubForm({
           {({ isSubmitting }) => (
             <Form className="flex flex-col h-full">
               <Dialog.Body className="flex flex-col gap-2">
-                <h5>Delete</h5>
-                <p>Silmek istediğinize emin misiniz?</p>
+                <h5>{translate('::Delete')}</h5>
+                <p>{translate('::DeleteConfirmation')}</p>
               </Dialog.Body>
               <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
-                <Button variant="plain" onClick={handleClose}>
-                  Cancel
+                <Button size="sm" variant="plain" onClick={handleClose}>
+                  {translate('::Cancel')}
                 </Button>
-                <Button variant="solid" loading={isSubmitting} type="submit">
+                <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                   {isSubmitting ? 'Deleting' : 'Delete'}
                 </Button>
               </Dialog.Footer>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
index e5404c1..967fce5 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
@@ -427,11 +427,11 @@ function JsonRowOpDialogWidget({
                   </div>
                 </Dialog.Body>
                 <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
-                  <Button variant="plain" onClick={handleClose}>
-                    Cancel
+                  <Button size="sm" variant="plain" onClick={handleClose}>
+                    {translate('::Cancel')}
                   </Button>
-                  <Button variant="solid" loading={isSubmitting} type="submit">
-                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::Saving') : translate('::Save')}
                   </Button>
                 </Dialog.Footer>
               </Form>
@@ -466,14 +466,14 @@ function JsonRowOpDialogWidget({
             {({ isSubmitting }) => (
               <Form className="flex flex-col h-full">
                 <Dialog.Body className="flex flex-col gap-2">
-                  <h5>Delete</h5>
-                  <p>Silmek istediğinize emin misiniz?</p>
+                  <h5>{translate('::Delete')}</h5>
+                  <p>{translate('::DeleteConfirmation')}</p>
                 </Dialog.Body>
                 <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
-                  <Button variant="plain" onClick={handleClose}>
-                    Cancel
+                  <Button size="sm" variant="plain" onClick={handleClose}>
+                    {translate('::Cancel')}
                   </Button>
-                  <Button variant="solid" loading={isSubmitting} type="submit">
+                  <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                     {isSubmitting ? 'Deleting' : 'Delete'}
                   </Button>
                 </Dialog.Footer>
diff --git a/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx b/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
index 1747201..adbb9b7 100644
--- a/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
@@ -227,7 +227,7 @@ const WizardFileManager = () => {
                     variant="plain"
                     className="text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
                     type="button"
-                    title={translate('::App.Platform.Delete') || 'Delete'}
+                    title={translate('::Delete') || 'Delete'}
                     loading={deletingFile === f.fileName}
                     onClick={() =>
                       setConfirm({ fileName: f.fileName, wizardName: f.wizardName || f.fileName })
@@ -279,16 +279,15 @@ const WizardFileManager = () => {
             </div>
             <div className="flex justify-end gap-2 mt-4">
               <Button size="sm" variant="plain" type="button" onClick={() => setConfirm(null)}>
-                İptal
+                {translate('::Cancel')}
               </Button>
               <Button
                 size="sm"
                 variant="solid"
-                color="red"
                 type="button"
                 onClick={handleDeleteConfirm}
               >
-                {translate('::App.Platform.Delete') || 'Yes, Delete'}
+                {translate('::Delete') || 'Yes, Delete'}
               </Button>
             </div>
           </div>
diff --git a/ui/src/views/admin/listForm/wizard/WizardStep1.tsx b/ui/src/views/admin/listForm/wizard/WizardStep1.tsx
index b8a61b5..3193b78 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStep1.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStep1.tsx
@@ -529,9 +529,7 @@ const WizardStep1 = ({
                   }}
                   size="xs"
                   variant="solid"
-                  color="green-500"
                   icon={<FaPlus className="text-xs" />}
-                  className="!inline-flex !h-auto !items-center !justify-center gap-1 !rounded !px-2 !py-0.5 text-xs text-white whitespace-nowrap hover:!bg-green-600"
                 >
                   <span className="whitespace-nowrap">
                     {translate('::ListForms.Wizard.Add') || 'Ekle'}
diff --git a/ui/src/views/admin/listForm/wizard/WizardStep3.tsx b/ui/src/views/admin/listForm/wizard/WizardStep3.tsx
index 3d22c18..6be2369 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStep3.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStep3.tsx
@@ -548,7 +548,6 @@ function SortableItem({
                       }}
                       block
                       variant="solid"
-                      color="indigo-600"
                       className="mt-1 !h-auto !rounded !py-1.5 text-xs font-semibold text-white transition-colors hover:!bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-40"
                     >
                       Tamam
diff --git a/ui/src/views/admin/listForm/wizard/WizardStep4.tsx b/ui/src/views/admin/listForm/wizard/WizardStep4.tsx
index ffd6822..7d3a1b6 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStep4.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStep4.tsx
@@ -439,10 +439,15 @@ function WizardStep4({
                   </FormItem>
                 </Dialog.Body>
                 <Dialog.Footer className="flex justify-end gap-2">
-                  <Button type="button" variant="plain" onClick={() => setDialogIndex(null)}>
-                    Cancel
+                  <Button
+                    size="sm"
+                    type="button"
+                    variant="plain"
+                    onClick={() => setDialogIndex(null)}
+                  >
+                    {translate('::Cancel')}
                   </Button>
-                  <Button type="submit" variant="solid">
+                  <Button size="sm" type="submit" variant="solid">
                     {translate('::Save')}
                   </Button>
                 </Dialog.Footer>
@@ -458,15 +463,15 @@ function WizardStep4({
         onRequestClose={() => setDeleteIndex(null)}
       >
         <Dialog.Body>
-          <h5>Delete</h5>
-          <p>Silmek istediğinize emin misiniz?</p>
+          <h5>{translate('::Delete')}</h5>
+          <p>{translate('::DeleteConfirmation')}</p>
         </Dialog.Body>
         <Dialog.Footer className="flex justify-end gap-2">
           <Button type="button" variant="plain" onClick={() => setDeleteIndex(null)}>
-            Cancel
+            {translate('::Cancel')}
           </Button>
           <Button type="button" variant="solid" onClick={removeSubForm}>
-            Delete
+            {translate('::Delete')}
           </Button>
         </Dialog.Footer>
       </Dialog>
diff --git a/ui/src/views/admin/listForm/wizard/WizardStep5.tsx b/ui/src/views/admin/listForm/wizard/WizardStep5.tsx
index 4435f7b..1fe3756 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStep5.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStep5.tsx
@@ -318,7 +318,7 @@ function WizardStep5({ widgets, translate, onChange, onBack, onNext }: Props) {
                 </Dialog.Body>
                 <Dialog.Footer className="flex justify-end gap-2">
                   <Button type="button" variant="plain" onClick={() => setDialogIndex(null)}>
-                    Cancel
+                    {translate('::Cancel')}
                   </Button>
                   <Button type="submit" variant="solid">
                     {translate('::Save')}
@@ -336,15 +336,15 @@ function WizardStep5({ widgets, translate, onChange, onBack, onNext }: Props) {
         onRequestClose={() => setDeleteIndex(null)}
       >
         <Dialog.Body>
-          <h5>Delete</h5>
-          <p>Silmek istediğinize emin misiniz?</p>
+          <h5>{translate('::Delete')}</h5>
+          <p>{translate('::DeleteConfirmation')}</p>
         </Dialog.Body>
         <Dialog.Footer className="flex justify-end gap-2">
           <Button type="button" variant="plain" onClick={() => setDeleteIndex(null)}>
-            Cancel
+            {translate('::Cancel')}
           </Button>
           <Button type="button" variant="solid" onClick={removeWidget}>
-            Delete
+            {translate('::Delete')}
           </Button>
         </Dialog.Footer>
       </Dialog>
diff --git a/ui/src/views/admin/listForm/wizard/WizardStep7.tsx b/ui/src/views/admin/listForm/wizard/WizardStep7.tsx
index fb3df26..8efced2 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStep7.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStep7.tsx
@@ -121,7 +121,7 @@ function Section({ title, badge, children, defaultOpen = true }: SectionProps) {
         onClick={() => setOpen((v) => !v)}
         variant="plain"
         shape="none"
-        className="w-full !h-auto !items-center !justify-between !rounded-none bg-gray-50 !px-4 !py-2.5 transition-colors hover:!bg-gray-100 dark:bg-gray-800 dark:hover:!bg-gray-750"
+        className="w-full !h-auto !items-center !justify-between !rounded-none !bg-gray-50 !px-4 !py-2.5 transition-colors hover:!bg-gray-100 dark:!bg-gray-800 dark:hover:!bg-gray-700"
       >
         <div className="flex items-center gap-2">
           {open ? (
diff --git a/ui/src/views/admin/listForm/workflow/WorkflowCriteria.tsx b/ui/src/views/admin/listForm/workflow/WorkflowCriteria.tsx
index 477e196..9d3bda1 100644
--- a/ui/src/views/admin/listForm/workflow/WorkflowCriteria.tsx
+++ b/ui/src/views/admin/listForm/workflow/WorkflowCriteria.tsx
@@ -463,6 +463,7 @@ export function WorkflowCriteria({
               {translate('::Cancel')}
             </Button>
             <Button
+              size="sm"
               type="button"
               variant="plain"
               disabled={busy || !formValues.id}
@@ -470,7 +471,7 @@ export function WorkflowCriteria({
             >
               {translate('::Delete')}
             </Button>
-            <Button variant="solid" loading={busy} type="submit">
+            <Button size="sm" variant="solid" loading={busy} type="submit">
               {translate('::Save')}
             </Button>
           </Dialog.Footer>
diff --git a/ui/src/views/admin/listForm/workflow/WorkflowDesigner.tsx b/ui/src/views/admin/listForm/workflow/WorkflowDesigner.tsx
index 956d1fd..03dfce1 100644
--- a/ui/src/views/admin/listForm/workflow/WorkflowDesigner.tsx
+++ b/ui/src/views/admin/listForm/workflow/WorkflowDesigner.tsx
@@ -177,8 +177,8 @@ function DesignerToolbar({
     <div className="flex flex-wrap justify-end gap-2">
       <Button
         type="button"
-        variant="plain"
-        shape="none"
+        variant="solid"
+        shape="round"
         className={classNames(
           designerButtonClass,
           'border-gray-300 !bg-white text-slate-700 hover:!bg-gray-50 dark:border-gray-700 dark:!bg-gray-800 dark:text-gray-200 dark:hover:!bg-gray-700',
@@ -192,8 +192,8 @@ function DesignerToolbar({
       </Button>
       <Button
         type="button"
-        variant="plain"
-        shape="none"
+        variant="solid"
+        shape="round"
         className={classNames(
           designerButtonClass,
           'border-blue-600 !bg-white text-blue-600 hover:!bg-blue-50 dark:border-blue-500 dark:!bg-gray-800 dark:text-blue-300 dark:hover:!bg-blue-900/30',
@@ -207,8 +207,8 @@ function DesignerToolbar({
       </Button>
       <Button
         type="button"
-        variant="plain"
-        shape="none"
+        variant="solid"
+        shape="round"
         className={classNames(
           designerIconButtonClass,
           'border-blue-600 !bg-white text-blue-600 hover:!bg-blue-50 dark:border-blue-500 dark:!bg-gray-800 dark:text-blue-300 dark:hover:!bg-blue-900/30',
@@ -220,8 +220,8 @@ function DesignerToolbar({
       </Button>
       <Button
         type="button"
-        variant="plain"
-        shape="none"
+        variant="solid"
+        shape="round"
         className={classNames(
           designerIconButtonClass,
           'border-blue-600 !bg-white text-blue-600 hover:!bg-blue-50 dark:border-blue-500 dark:!bg-gray-800 dark:text-blue-300 dark:hover:!bg-blue-900/30',
@@ -240,8 +240,8 @@ function DesignerToolbar({
           <Button
             key={option.value}
             type="button"
-            variant="plain"
-            shape="none"
+            variant="solid"
+            shape="round"
             className={classNames(
               designerButtonClass,
               'border-blue-600 !bg-white text-blue-600 hover:!bg-blue-50 dark:border-blue-500 dark:!bg-gray-800 dark:text-blue-300 dark:hover:!bg-blue-900/30',
diff --git a/ui/src/views/admin/notification/CreateNotification.tsx b/ui/src/views/admin/notification/CreateNotification.tsx
index 4997b33..19eea4b 100644
--- a/ui/src/views/admin/notification/CreateNotification.tsx
+++ b/ui/src/views/admin/notification/CreateNotification.tsx
@@ -95,10 +95,10 @@ function CreateNotification({
                 </FormItem>
 
                 <div className="mt-6 flex flex-row justify-end gap-3">
-                  <Button variant="solid" loading={isSubmitting} type="submit">
-                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::Saving') : translate('::Save')}
                   </Button>
-                  <Button type="button" variant="plain" onClick={onDialogClose}>
+                  <Button size="sm" type="button" variant="plain" onClick={onDialogClose}>
                     {translate('::Cancel')}
                   </Button>
                 </div>
diff --git a/ui/src/views/admin/organization-unit/OrganizationUnits.tsx b/ui/src/views/admin/organization-unit/OrganizationUnits.tsx
index 7aa327b..8d089e4 100644
--- a/ui/src/views/admin/organization-unit/OrganizationUnits.tsx
+++ b/ui/src/views/admin/organization-unit/OrganizationUnits.tsx
@@ -388,7 +388,7 @@ const OrganizationUnits = () => {
       <div
         className={classNames(
           'h-8 text-md flex gap-2 items-center',
-          node.isSelected ? 'bg-indigo-200 text-black dark:text-black' : '',
+          node.isSelected ? 'bg-indigo-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100' : '',
         )}
         style={style}
         ref={dragHandle}
@@ -401,7 +401,7 @@ const OrganizationUnits = () => {
             {node.isInternal && (node.isOpen ? <FaMinusCircle /> : <FaPlusCircle />)}
           </div>
 
-          <FaFolder className="w-3" color="#337ab7" />
+          <FaFolder className="w-3" />
 
           <span className="node-text m-1">
             {node.isEditing ? (
@@ -431,21 +431,27 @@ const OrganizationUnits = () => {
             <Button
               size='xs'
               variant='plain'
-              icon={<FaUserPlus color="#2d6da3" />}
+              shape="circle"
+              className="!h-6 !w-6 !bg-blue-50 !p-0 text-blue-600 hover:!bg-blue-100 hover:text-blue-700 dark:!bg-blue-900/30 dark:text-blue-300 dark:hover:!bg-blue-800/60 dark:hover:text-blue-100"
+              icon={<FaUserPlus className="text-xs" />}
               onClick={() => setIsMoveAllUsersOpen(true)}
               title={translate('::Abp.Identity.OrganizationUnit.MoveAllUsers')}
             ></Button>
             <Button
               size='xs'
               variant='plain'
-              icon={<FaEdit className="text-teal-900" />}
+              shape="circle"
+              className="!h-6 !w-6 !bg-teal-50 !p-0 text-teal-600 hover:!bg-teal-100 hover:text-teal-700 dark:!bg-teal-900/30 dark:text-teal-300 dark:hover:!bg-teal-800/60 dark:hover:text-teal-100"
+              icon={<FaEdit className="text-xs" />}
               onClick={() => node.edit()}
               title={translate('::Abp.Identity.OrganizationUnit.Rename')}
             ></Button>
             <Button
               size='xs'
               variant='plain'
-              icon={<FaTrashAlt color="#d9534f" />}
+              shape="circle"
+              className="!h-6 !w-6 !bg-red-50 !p-0 text-red-600 hover:!bg-red-100 hover:text-red-700 dark:!bg-red-900/30 dark:text-red-300 dark:hover:!bg-red-800/60 dark:hover:text-red-100"
+              icon={<FaTrashAlt className="text-xs" />}
               onClick={() => setDeleteRow({ id: node.data.id, name: 'Organization Unit' })}
               title={translate('::Delete')}
             ></Button>
@@ -715,10 +721,10 @@ const OrganizationUnits = () => {
                     </FormItem>
 
                     <div className="mt-6 flex flex-row justify-end gap-3">
-                      <Button variant="solid" loading={isSubmitting} type="submit">
+                      <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                         {isSubmitting ? translate('::...') : translate('::Save')}
                       </Button>
-                      <Button type="button" variant="plain" onClick={onDialogClose}>
+                      <Button size="sm" type="button" variant="plain" onClick={onDialogClose}>
                         {translate('::Cancel')}
                       </Button>
                     </div>
@@ -1048,10 +1054,11 @@ const OrganizationUnits = () => {
                   </FormItem>
 
                   <div className="mt-6 flex flex-row justify-end gap-3">
-                    <Button variant="solid" loading={isSubmitting} type="submit">
+                    <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
                       {isSubmitting ? translate('::...') : translate('::Save')}
                     </Button>
                     <Button
+                      size="sm"
                       type="button"
                       variant="plain"
                       onClick={() => setIsMoveAllUsersOpen(false)}
diff --git a/ui/src/views/admin/profile/components/General.tsx b/ui/src/views/admin/profile/components/General.tsx
index 32ee524..4953639 100644
--- a/ui/src/views/admin/profile/components/General.tsx
+++ b/ui/src/views/admin/profile/components/General.tsx
@@ -383,9 +383,16 @@ const General = () => {
                             beforeUpload={beforeUpload}
                             onChange={onChooseImage}
                           >
-                            <Button icon={<FaPlus />} type="button"></Button>
+                            <Button
+                              size="sm"
+                              variant="default"
+                              icon={<FaPlus />}
+                              type="button"
+                            ></Button>
                           </Upload>
                           <Button
+                            size="sm"
+                            variant="solid"
                             type="button"
                             icon={<FaTrashAlt />}
                             onClick={() => setImage(undefined)}
@@ -403,11 +410,16 @@ const General = () => {
                 </div>
               </div>
               <div className="mt-4 ltr:text-right">
-                <Button className="ltr:mr-2 rtl:ml-2" type="button" onClick={() => resetForm()}>
+                <Button
+                  size="sm"
+                  className="ltr:mr-2 rtl:ml-2"
+                  type="button"
+                  onClick={() => resetForm()}
+                >
                   {translate('::Cancel')}
                 </Button>
-                <Button variant="solid" loading={isSubmitting} type="submit">
-                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                <Button size="sm" variant="solid" loading={isSubmitting} type="submit">
+                  {isSubmitting ? translate('::Saving') : translate('::Save')}
                 </Button>
               </div>
             </FormContainer>
diff --git a/ui/src/views/admin/profile/components/Password.tsx b/ui/src/views/admin/profile/components/Password.tsx
index 933a060..16e247c 100644
--- a/ui/src/views/admin/profile/components/Password.tsx
+++ b/ui/src/views/admin/profile/components/Password.tsx
@@ -138,7 +138,7 @@ const Password = ({ data }: { data?: LoginHistory[] }) => {
                     {translate('::Cancel')}
                   </Button>
                   <Button variant="solid" loading={isSubmitting} type="submit">
-                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                    {isSubmitting ? translate('::Saving') : translate('::Save')}
                   </Button>
                 </div>
               </FormContainer>
diff --git a/ui/src/views/admin/role-management/RolesPermission.tsx b/ui/src/views/admin/role-management/RolesPermission.tsx
index 340953b..9818b14 100644
--- a/ui/src/views/admin/role-management/RolesPermission.tsx
+++ b/ui/src/views/admin/role-management/RolesPermission.tsx
@@ -165,7 +165,7 @@ function PermissionDialogContent({
 
       <Dialog.Footer className="flex justify-between items-center mt-4 pt-3 border-t">
         <div className="flex items-center">
-          <Button variant="solid" color="sky-500" onClick={() => setCopyDialogOpen(true)}>
+          <Button variant="plain" onClick={() => setCopyDialogOpen(true)}>
             {translate('::AbpIdentity.Roles.CopyPermissions')}
           </Button>
         </div>
@@ -174,7 +174,7 @@ function PermissionDialogContent({
             {translate('::Cancel')}
           </Button>
           <Button variant="solid" loading={isLoading} onClick={onDialogOk}>
-            {isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
+            {isLoading ? translate('::Saving') : translate('::Save')}
           </Button>
         </div>
       </Dialog.Footer>
diff --git a/ui/src/views/admin/tenant-management/TenantsConnectionString.tsx b/ui/src/views/admin/tenant-management/TenantsConnectionString.tsx
index 03f6499..95ee1a3 100644
--- a/ui/src/views/admin/tenant-management/TenantsConnectionString.tsx
+++ b/ui/src/views/admin/tenant-management/TenantsConnectionString.tsx
@@ -337,18 +337,17 @@ function TenantConnectionString({
                           disabled={connectionString.isNew}
                           className="mr-auto"
                           type="button"
-                          color="red-500"
-                          variant="twoTone"
+                          variant="plain"
                           onClick={deleteConnectionString}
                         >
                           {translate('::Delete')}
                         </Button>
-                        <Button variant="solid" loading={isSubmitting} type="submit">
-                          {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                        </Button>
                         <Button type="button" variant="plain" onClick={onDialogClose}>
                           {translate('::Cancel')}
                         </Button>
+                        <Button variant="solid" loading={isSubmitting} type="submit">
+                          {isSubmitting ? translate('::Saving') : translate('::Save')}
+                        </Button>
                       </div>
                     </FormContainer>
                   </Form>
@@ -395,6 +394,9 @@ function TenantConnectionString({
                       </FormItem>
 
                       <div className="mt-6 flex flex-row justify-end gap-3">
+                        <Button type="button" variant="plain" onClick={onDialogClose}>
+                          {translate('::Cancel')}
+                        </Button>
                         <Button variant="solid" loading={isSubmitting} type="submit">
                           {isSubmitting
                             ? connectionString.isNew
@@ -404,9 +406,6 @@ function TenantConnectionString({
                               ? translate('::Abp.Identity.CreateUser')
                               : translate('::AbpTenantManagement.Tenants.DatabaseSeed')}
                         </Button>
-                        <Button type="button" variant="plain" onClick={onDialogClose}>
-                          {translate('::Cancel')}
-                        </Button>
                       </div>
                     </FormContainer>
                   </Form>
diff --git a/ui/src/views/admin/user-management/Details.tsx b/ui/src/views/admin/user-management/Details.tsx
index 4e855d9..0d109d6 100644
--- a/ui/src/views/admin/user-management/Details.tsx
+++ b/ui/src/views/admin/user-management/Details.tsx
@@ -593,7 +593,7 @@ function UserDetails() {
 
                       <div className="mt-4 ltr:text-right">
                         <Button variant="solid" loading={isSubmitting} type="submit">
-                          {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                          {isSubmitting ? translate('::Saving') : translate('::Save')}
                         </Button>
                       </div>
                     </Form>
@@ -705,7 +705,7 @@ function UserDetails() {
 
                       <div className="mt-4 ltr:text-right">
                         <Button variant="solid" loading={isSubmitting} type="submit">
-                          {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                          {isSubmitting ? translate('::Saving') : translate('::Save')}
                         </Button>
                       </div>
                     </Form>
@@ -887,7 +887,7 @@ function UserDetails() {
 
                       <div className="mt-4 ltr:text-right">
                         <Button variant="solid" loading={isSubmitting} type="submit">
-                          {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                          {isSubmitting ? translate('::Saving') : translate('::Save')}
                         </Button>
                       </div>
                     </Form>
@@ -1244,7 +1244,7 @@ function UserDetails() {
 
                       <div className="mt-4 ltr:text-right">
                         <Button variant="solid" loading={isSubmitting} type="submit">
-                          {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                          {isSubmitting ? translate('::Saving') : translate('::Save')}
                         </Button>
                       </div>
                     </Form>
@@ -1632,7 +1632,7 @@ function UserDetails() {
 
                       <div className="mt-4 ltr:text-right">
                         <Button variant="solid" loading={isSubmitting} type="submit">
-                          {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                          {isSubmitting ? translate('::Saving') : translate('::Save')}
                         </Button>
                       </div>
                     </Form>
@@ -1747,12 +1747,12 @@ function UserDetails() {
                   </FormItem>
 
                   <div className="mt-6 flex flex-row justify-end gap-3">
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                    </Button>
                     <Button type="button" variant="plain" onClick={() => setOpen(false)}>
                       {translate('::Cancel')}
                     </Button>
+                    <Button variant="solid" loading={isSubmitting} type="submit">
+                      {isSubmitting ? translate('::Saving') : translate('::Save')}
+                    </Button>
                   </div>
                 </FormContainer>
               </Form>
diff --git a/ui/src/views/admin/user-management/UsersPermission.tsx b/ui/src/views/admin/user-management/UsersPermission.tsx
index a81d03a..a1b8617 100644
--- a/ui/src/views/admin/user-management/UsersPermission.tsx
+++ b/ui/src/views/admin/user-management/UsersPermission.tsx
@@ -171,10 +171,10 @@ function UserPermissionDialogContent({
 
       <Dialog.Footer className="flex justify-end items-center mt-4 pt-3 border-t gap-2">
         <Button variant="plain" onClick={onDialogClose}>
-          Cancel
+          {translate('::Cancel')}
         </Button>
         <Button variant="solid" loading={isLoading} onClick={onDialogOk}>
-          {isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
+          {isLoading ? translate('::Saving') : translate('::Save')}
         </Button>
       </Dialog.Footer>
     </>
diff --git a/ui/src/views/admin/videoroom/RoomList.tsx b/ui/src/views/admin/videoroom/RoomList.tsx
index 87ad353..223b0e1 100644
--- a/ui/src/views/admin/videoroom/RoomList.tsx
+++ b/ui/src/views/admin/videoroom/RoomList.tsx
@@ -454,11 +454,11 @@ const RoomList: React.FC = () => {
                                 className="flex items-center gap-1"
                                 onClick={() => openDeleteModal(classSession)}
                                 disabled={!!classSession.actualStartTime}
-                                title={translate('::App.Platform.Delete')}
+                                title={translate('::Delete')}
                               >
                                 
                                 <span className="hidden sm:inline">
-                                  {translate('::App.Platform.Delete')}
+                                  {translate('::Delete')}
                                 </span>
                               </Button>
                             </>
@@ -880,10 +880,10 @@ const RoomList: React.FC = () => {
               >
                 {translate('::Cancel') || 'İptal'}
               </Button>
-              <Button type="submit" variant="solid" color="blue-600">
+              <Button type="submit" variant="solid">
                 {showCreateModal
                   ? translate('::App.Videoroom.CreateRoom') || 'Oda Oluştur'
-                  : translate('::App.Videoroom.SaveChanges') || 'Değişiklikleri Kaydet'}
+                  : translate('::App.SaveChanges') || 'Değişiklikleri Kaydet'}
               </Button>
             </Dialog.Footer>
           </form>
@@ -932,7 +932,7 @@ const RoomList: React.FC = () => {
               {translate('::Cancel') || 'İptal'}
             </Button>
             <Button variant="solid" color="red-600" onClick={handleDeleteClass}>
-              {translate('::App.Platform.Delete') || 'Sil'}
+              {translate('::Delete') || 'Sil'}
             </Button>
           </Dialog.Footer>
         </Dialog>
diff --git a/ui/src/views/auth/ExtendLogin.tsx b/ui/src/views/auth/ExtendLogin.tsx
index 27411f6..b16888c 100644
--- a/ui/src/views/auth/ExtendLogin.tsx
+++ b/ui/src/views/auth/ExtendLogin.tsx
@@ -142,8 +142,9 @@ const ExtendLogin = () => {
                 onExpire={() => setFieldValue('captchaResponse', '')}
                 onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
               />
-              <Button block loading={isSubmitting} variant="solid" type="submit">
-                {emailSent ? 'Resend Email' : 'Send Email'}
+              <Button variant="solid" block loading={isSubmitting} type="submit">
+                {translate('::Abp.Account.Backto')}
+                {emailSent ? translate('::Resend') : translate('::Send')}
               </Button>
               <div className="mt-4 text-center">
                 <span>{translate('::Abp.Account.Backto')} </span>
diff --git a/ui/src/views/auth/ForgotPassword.tsx b/ui/src/views/auth/ForgotPassword.tsx
index 6c868da..f14cf7e 100644
--- a/ui/src/views/auth/ForgotPassword.tsx
+++ b/ui/src/views/auth/ForgotPassword.tsx
@@ -136,7 +136,7 @@ const ForgotPassword = () => {
                       onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
                     />
                     <Button block loading={isSubmitting} variant="solid" type="submit">
-                      Send Email
+                      {translate('::Send')}
                     </Button>
                     <div className="mt-4 text-center">
                       <span>{translate('::Abp.Account.Backto')} </span>
diff --git a/ui/src/views/auth/Login.tsx b/ui/src/views/auth/Login.tsx
index 391f2c8..137072e 100644
--- a/ui/src/views/auth/Login.tsx
+++ b/ui/src/views/auth/Login.tsx
@@ -284,7 +284,7 @@ const Login = () => {
                     </Alert>
                   )}
 
-                  <Button block loading={isSubmitting} variant="solid" type="submit">
+                  <Button block loading={isSubmitting} size="md" variant="solid" type="submit">
                     {isSubmitting ? 'Signing in...' : 'Sign In'}
                   </Button>
 
diff --git a/ui/src/views/auth/Register.tsx b/ui/src/views/auth/Register.tsx
index bdb4ecd..5c6f02c 100644
--- a/ui/src/views/auth/Register.tsx
+++ b/ui/src/views/auth/Register.tsx
@@ -191,7 +191,9 @@ const Register = () => {
                       onSuccess={(token) => setFieldValue('captchaResponse', token)}
                     />
                     <Button block loading={isSubmitting} variant="solid" type="submit">
-                      {isSubmitting ? 'Creating Account...' : 'Sign Up'}
+                      {isSubmitting
+                        ? translate('::Abp.Account.CreatingAccount')
+                        : translate('::Abp.Account.SignUp')}
                     </Button>
                     <div className="mt-4 text-center">
                       <span>{translate('::Abp.Account.Register.AlreadyHaveAnAccount')} </span>
diff --git a/ui/src/views/auth/ResetPassword.tsx b/ui/src/views/auth/ResetPassword.tsx
index cca94ea..e0c906b 100644
--- a/ui/src/views/auth/ResetPassword.tsx
+++ b/ui/src/views/auth/ResetPassword.tsx
@@ -144,7 +144,7 @@ const ResetPassword = () => {
                     />
                   </FormItem>
                   <Button block loading={isSubmitting} variant="solid" type="submit">
-                    {isSubmitting ? 'Submitting...' : 'Submit'}
+                    {isSubmitting ? translate('Submitting') : translate('Submit')}
                   </Button>
                 </>
               ) : (
diff --git a/ui/src/views/auth/SendConfirmationCode.tsx b/ui/src/views/auth/SendConfirmationCode.tsx
index 3a87928..30787d8 100644
--- a/ui/src/views/auth/SendConfirmationCode.tsx
+++ b/ui/src/views/auth/SendConfirmationCode.tsx
@@ -124,7 +124,7 @@ const SendConfirmationCode = () => {
                       onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
                     />
                     <Button block loading={isSubmitting} variant="solid" type="submit">
-                      {isSubmitting ? 'Sending code...' : 'Send Code'}
+                      {isSubmitting ? translate('::SendingCode') : translate('::SendCode')}
                     </Button>
                     <div className="mt-4 text-center">
                       <span>{translate('::Abp.Account.Backto')} </span>
diff --git a/ui/src/views/developerKit/ComponentEditor.tsx b/ui/src/views/developerKit/ComponentEditor.tsx
index 8b7b42f..4bb858c 100644
--- a/ui/src/views/developerKit/ComponentEditor.tsx
+++ b/ui/src/views/developerKit/ComponentEditor.tsx
@@ -242,7 +242,6 @@ export default ${pascalCaseName}Component;`
                       type="button"
                       variant='solid'
                       size="sm"
-                      color='green'
                       onClick={submitForm}
                       disabled={isSubmitting || !values.name.trim() || !isValid}
                       className="flex items-center gap-2 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 dark:hover:bg-emerald-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
diff --git a/ui/src/views/developerKit/ComponentManager.tsx b/ui/src/views/developerKit/ComponentManager.tsx
index 9988270..991dd1a 100644
--- a/ui/src/views/developerKit/ComponentManager.tsx
+++ b/ui/src/views/developerKit/ComponentManager.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { useComponents } from '../../contexts/ComponentContext'
 import {
   FaPlus,
@@ -21,6 +21,7 @@ import { Button } from '@/components/ui'
 
 const ComponentManager: React.FC = () => {
   const { components, loading, updateComponent, deleteComponent } = useComponents()
+  const navigate = useNavigate()
   const [searchTerm, setSearchTerm] = useState('')
   const [filterActive, setFilterActive] = useState<'all' | 'active' | 'inactive'>('all')
 
@@ -108,7 +109,7 @@ const ComponentManager: React.FC = () => {
             placeholder={translate('::App.DeveloperKit.Component.SearchPlaceholder')}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 border border-slate-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full pl-10 pr-2 py-1 border border-slate-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           />
         </div>
         <div className="flex items-center gap-2">
@@ -116,7 +117,7 @@ const ComponentManager: React.FC = () => {
           <select
             value={filterActive}
             onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
-            className="px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="px-2 py-1 border border-slate-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           >
             <option value="all">{translate('::App.DeveloperKit.Component.Filter.All')}</option>
             <option value="active">
@@ -128,13 +129,15 @@ const ComponentManager: React.FC = () => {
           </select>
         </div>
         <div>
-          <Link
-            to={ROUTES_ENUM.protected.saas.developerKit.componentsNew}
-            className="flex items-center gap-2 bg-blue-600 dark:bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
+          <Button
+            type="button"
+            variant="solid"
+            className="flex items-center gap-2"
+            onClick={() => navigate(ROUTES_ENUM.protected.saas.developerKit.componentsNew)}
           >
             <FaPlus className="w-4 h-4" />
             {translate('::App.DeveloperKit.Component.New')}
-          </Link>
+          </Button>
         </div>
       </div>
 
@@ -212,13 +215,9 @@ const ComponentManager: React.FC = () => {
                     <Button
                       type="button"
                       variant="plain"
-                      shape="none"
+                      shape="circle"
                       onClick={() => handleToggleActive(component.id, !component.isActive)}
-                      className={`!inline-flex !h-auto items-center gap-1 rounded !px-2 py-1 text-xs font-medium transition-colors ${
-                        component.isActive
-                          ? '!bg-green-100 text-green-700 hover:!bg-green-200 dark:!bg-green-900/20 dark:text-green-400 dark:hover:!bg-green-800'
-                          : '!bg-slate-100 text-slate-600 hover:!bg-slate-200 dark:!bg-gray-800 dark:text-gray-400 dark:hover:!bg-gray-700'
-                      }`}
+                      className={`!inline-flex !h-auto items-center gap-1 rounded !px-2 py-1 text-xs font-medium transition-colors`}
                     >
                       {component.isActive ? (
                         <>
@@ -234,36 +233,50 @@ const ComponentManager: React.FC = () => {
                     </Button>
                   </div>
                   <div className="flex items-center gap-1">
-                    <Link
-                      to={ROUTES_ENUM.protected.saas.developerKit.componentsEdit.replace(
-                        ':id',
-                        component.id,
-                      )}
-                      target="_blank"
-                      className="p-2 text-slate-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 rounded transition-colors"
-                      title={translate('::App.DeveloperKit.Component.Edit')}
-                    >
-                      <FaRegEdit className="w-4 h-4" />
-                    </Link>
-                    <Link
-                      to={ROUTES_ENUM.protected.saas.developerKit.componentsView.replace(
-                        ':id',
-                        component.id,
-                      )}
-                      className="p-2 text-slate-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 rounded transition-colors"
-                      title={translate('::App.DeveloperKit.Component.View')}
-                    >
-                      <FaEye className="w-4 h-4" />
-                    </Link>
                     <Button
                       type="button"
-                      variant="plain"
-                      shape="none"
+                      variant="solid"
+                      shape="circle"
+                      color="blue-600"
+                      onClick={() =>
+                        window.open(
+                          ROUTES_ENUM.protected.saas.developerKit.componentsEdit.replace(
+                            ':id',
+                            component.id,
+                          ),
+                          '_blank',
+                        )
+                      }
+                      title={translate('::App.DeveloperKit.Component.Edit')}
+                    >
+                      <FaRegEdit className="w-3 h-3" />
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="solid"
+                      shape="circle"
+                      color="green-600"
+                      onClick={() =>
+                        navigate(
+                          ROUTES_ENUM.protected.saas.developerKit.componentsView.replace(
+                            ':id',
+                            component.id,
+                          ),
+                        )
+                      }
+                      title={translate('::App.DeveloperKit.Component.View')}
+                    >
+                      <FaEye className="w-3 h-3" />
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="solid"
+                      shape="circle"
+                      color="red-600"
                       onClick={() => handleDelete(component.id, component.name)}
-                      className="!inline-flex !h-auto items-center justify-center rounded !bg-transparent !p-2 text-slate-600 transition-colors hover:!bg-red-50 hover:text-red-600 dark:text-gray-400 dark:hover:!bg-red-900 dark:hover:text-red-400"
                       title={translate('::App.DeveloperKit.Component.Delete')}
                     >
-                      <FaTrashAlt className="w-4 h-4" />
+                      <FaTrashAlt className="w-3 h-3" />
                     </Button>
                   </div>
                 </div>
diff --git a/ui/src/views/developerKit/CrudEndpointManager.tsx b/ui/src/views/developerKit/CrudEndpointManager.tsx
index 24b51f9..563ce52 100644
--- a/ui/src/views/developerKit/CrudEndpointManager.tsx
+++ b/ui/src/views/developerKit/CrudEndpointManager.tsx
@@ -557,7 +557,6 @@ const CrudEndpointManager: React.FC = () => {
                     onClick={() => handleGenerate(selectedTable)}
                     disabled={generatingFor === selectedTable.fullName}
                     variant="solid"
-                    color="blue-600"
                     icon={
                       generatingFor === selectedTable.fullName ? (
                         <FaSyncAlt className="animate-spin" />
@@ -732,7 +731,6 @@ const CrudEndpointManager: React.FC = () => {
                                   onClick={() => testEndpoint(ep)}
                                   disabled={loadingEndpoints.has(ep.id)}
                                   variant="solid"
-                                  color="blue-600"
                                   icon={
                                     loadingEndpoints.has(ep.id) ? (
                                       <FaSyncAlt className="animate-spin" />
diff --git a/ui/src/views/developerKit/DynamicServiceEditor.tsx b/ui/src/views/developerKit/DynamicServiceEditor.tsx
index ea41880..89949e2 100644
--- a/ui/src/views/developerKit/DynamicServiceEditor.tsx
+++ b/ui/src/views/developerKit/DynamicServiceEditor.tsx
@@ -232,9 +232,7 @@ const DynamicServiceEditor: React.FC = () => {
               type="button"
               onClick={copyCode}
               variant="plain"
-              shape="none"
               icon={<FaCopy className="h-3.5 w-3.5" />}
-              className="!inline-flex !h-auto !items-center !justify-center gap-2 whitespace-nowrap !rounded-lg border border-slate-300 px-4 py-2 text-slate-600 transition-colors hover:!bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:!bg-gray-800"
             >
               {translate('::App.DeveloperKit.DynamicServices.Editor.CopyCode')}
             </Button>
@@ -251,7 +249,6 @@ const DynamicServiceEditor: React.FC = () => {
                   <FaPlay className="h-3.5 w-3.5" />
                 )
               }
-              className="!inline-flex !h-auto !items-center !justify-center gap-2 whitespace-nowrap !rounded-lg !bg-orange-500 px-4 py-2 text-white transition-colors hover:!bg-orange-600 disabled:cursor-not-allowed disabled:opacity-50 dark:!bg-orange-700"
             >
               {isCompiling
                 ? translate('::App.DeveloperKit.DynamicServices.Editor.Compiling')
@@ -263,7 +260,7 @@ const DynamicServiceEditor: React.FC = () => {
               onClick={handlePublish}
               disabled={isPublishing}
               variant="solid"
-              color="emerald-600"
+              color="green-500"
               icon={
                 isPublishing ? (
                   <FaSpinner className="h-3.5 w-3.5 animate-spin" />
@@ -271,7 +268,6 @@ const DynamicServiceEditor: React.FC = () => {
                   <FaSave className="h-3.5 w-3.5" />
                 )
               }
-              className="!inline-flex !h-auto !items-center !justify-center gap-2 whitespace-nowrap !rounded-lg px-4 py-2 text-white transition-colors hover:!bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50 dark:!bg-emerald-800"
             >
               {isPublishing
                 ? translate('::App.DeveloperKit.DynamicServices.Editor.Publishing')
@@ -423,7 +419,7 @@ const DynamicServiceEditor: React.FC = () => {
 
           {/* Aktif */}
           <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">
+            <label className="block text-sm font-medium mb-1">
               {translate('::App.DeveloperKit.DynamicServices.Editor.IsActive')}
             </label>
             <input
diff --git a/ui/src/views/developerKit/SqlQueryManager.tsx b/ui/src/views/developerKit/SqlQueryManager.tsx
index c6f85ba..0d491b6 100644
--- a/ui/src/views/developerKit/SqlQueryManager.tsx
+++ b/ui/src/views/developerKit/SqlQueryManager.tsx
@@ -1357,7 +1357,6 @@ GO`,
               <Button
                 size="sm"
                 variant="solid"
-                color="blue-600"
                 icon={<FaPlay />}
                 onClick={handleExecute}
                 loading={state.isExecuting}
@@ -1597,7 +1596,6 @@ GO`,
             variant="solid"
             onClick={handleConfirmTemplateReplace}
             icon={<FaExclamationTriangle />}
-            color="red-600"
           >
             {translate('::App.Platform.Replace')}
           </Button>
diff --git a/ui/src/views/developerKit/SqlResultsGrid.tsx b/ui/src/views/developerKit/SqlResultsGrid.tsx
index 4abc625..6b0f1ab 100644
--- a/ui/src/views/developerKit/SqlResultsGrid.tsx
+++ b/ui/src/views/developerKit/SqlResultsGrid.tsx
@@ -486,10 +486,10 @@ const SqlResultsGrid = ({
             <span className="mr-auto text-sm text-red-500">{validationError}</span>
           )}
           <Button size="sm" onClick={closeDialog} disabled={isSaving}>
-            Cancel
+            {translate('::Cancel')}
           </Button>
           <Button size="sm" variant="solid" loading={isSaving} onClick={saveRecord}>
-            Save
+            {translate('::Save')}
           </Button>
         </Dialog.Footer>
       </Dialog>
diff --git a/ui/src/views/form/FormButtons.tsx b/ui/src/views/form/FormButtons.tsx
index 3247be8..2c57f21 100644
--- a/ui/src/views/form/FormButtons.tsx
+++ b/ui/src/views/form/FormButtons.tsx
@@ -188,9 +188,7 @@ const FormButtons = (props: {
           <Button
             size="sm"
             variant="default"
-            className="dx-button dx-button-mode-contained dx-button-normal"
             icon={<FaChevronLeft />}
-            color="gray-500"
             title={translate('::Cancel')}
             onClick={() => {
               if (onActionView && id) {
@@ -204,10 +202,8 @@ const FormButtons = (props: {
         {mode != 'new' && (
           <Button
             size="sm"
-            variant="default"
-            className="dx-button dx-button-mode-contained dx-button-normal"
+            variant="solid"
             icon={<FaTrashAlt />}
-            color="red-500"
             title={translate('::Delete')}
             onClick={() => {
               setDeleteRowId(id)
@@ -218,8 +214,8 @@ const FormButtons = (props: {
         {mode != 'new' && (
           <Button
             size="sm"
-            variant="default"
-            className="dx-button dx-button-mode-contained dx-button-normal"
+            variant="solid"
+            color='blue-500'
             icon={<FaPlusCircle />}
             title={translate('::AddNew')}
             onClick={() => {
@@ -235,8 +231,8 @@ const FormButtons = (props: {
         {mode == 'view' && (
           <Button
             size="sm"
-            variant="default"
-            className="dx-button dx-button-mode-contained dx-button-normal"
+            variant="solid"
+            color="green-600"
             icon={<FaPencilAlt />}
             title={translate('::Edit')}
             onClick={() => {
@@ -256,8 +252,8 @@ const FormButtons = (props: {
         {(mode == 'edit' || (onActionView && mode == 'new')) && (
           <Button
             size="sm"
-            variant="default"
-            className="dx-button dx-button-mode-contained dx-button-normal"
+            variant="solid"
+            color="gray-500"
             icon={<FaEye />}
             title={translate('::Detail')}
             onClick={() => {
@@ -277,8 +273,7 @@ const FormButtons = (props: {
         {(mode == 'edit' || mode == 'new') && (
           <Button
             size="sm"
-            variant="default"
-            className="dx-button dx-button-mode-contained dx-button-normal"
+            variant="solid"
             icon={<FaSave />}
             title={translate('::Save')}
             onClick={handleSubmit}
@@ -288,8 +283,8 @@ const FormButtons = (props: {
         {id && !isSubForm && (
           <Button
             size="sm"
-            variant="default"
-            className="dx-button dx-button-mode-contained dx-button-normal"
+            variant="solid"
+            color="gray-800"
             icon={<FaSistrix />}
             title={translate('::App.Reports.Form')}
             onClick={openDynamicGridReport}
@@ -298,8 +293,7 @@ const FormButtons = (props: {
         {checkPermission('App.Listforms.Listform.Update') && !isSubForm && (
           <Button
             size="sm"
-            variant="default"
-            className="dx-button dx-button-mode-contained dx-button-normal"
+            variant="solid"
             icon={<FaCog />}
             color="green-500"
             title={translate('::ListForms.ListForm.Manage')}
@@ -321,9 +315,9 @@ const FormButtons = (props: {
         onClose={() => setDeleteRowId(undefined)}
         onRequestClose={() => setDeleteRowId(undefined)}
       >
-        <h5 className="mb-4">Delete</h5>
+        <h5 className="mb-4">{translate('::Delete')}</h5>
 
-        <p>Silmek istediğinize emin misiniz?</p>
+        <p>{translate('::DeleteConfirmation')}</p>
 
         <div className="text-right mt-6">
           <Button
@@ -333,10 +327,10 @@ const FormButtons = (props: {
               setDeleteRowId(undefined)
             }}
           >
-            Cancel
+            {translate('::Cancel')}
           </Button>
-          <Button variant="solid" color="red-500" onClick={handleDelete}>
-            Delete
+          <Button variant="solid" onClick={handleDelete}>
+            {translate('::Delete')}
           </Button>
         </div>
       </Dialog>
diff --git a/ui/src/views/form/notes/NoteModal.tsx b/ui/src/views/form/notes/NoteModal.tsx
index c35c592..846da78 100644
--- a/ui/src/views/form/notes/NoteModal.tsx
+++ b/ui/src/views/form/notes/NoteModal.tsx
@@ -256,12 +256,11 @@ function NoteModalContent({
 
             {/* ALT BUTONLAR */}
             <Dialog.Footer className="mt-2 flex justify-between items-center pt-4 border-t border-gray-200">
-              <Button variant="default" size="md" onClick={onClose} disabled={uploading}>
+              <Button variant="default" onClick={onClose} disabled={uploading}>
                 {translate('::Cancel')}
               </Button>
               <Button
                 variant="solid"
-                size="md"
                 type="submit"
                 disabled={isSubmitting || !values.subject || !values.type}
                 className="px-6 flex items-center gap-2"
diff --git a/ui/src/views/forum/admin/AdminView.tsx b/ui/src/views/forum/admin/AdminView.tsx
index 217ddde..bbb8abd 100644
--- a/ui/src/views/forum/admin/AdminView.tsx
+++ b/ui/src/views/forum/admin/AdminView.tsx
@@ -112,17 +112,12 @@ export function AdminView({
             return (
               <Button
                 key={item.id}
-                variant={isActive ? 'twoTone' : 'plain'}
-                color="blue-500"
+                variant={isActive ? "solid" : "plain"}
                 active={isActive}
                 onClick={() => setActiveSection(item.id)}
-                className={`w-full flex items-center space-x-3 px-4 py-3 text-left transition-colors
-                  ${isActive
-                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300'
-                    : 'bg-transparent text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}
-                `}
+                className={`w-full flex items-center space-x-3 px-4 py-3 text-left transition-colors`}
               >
-                <Icon className={`w-5 h-5 ${isActive ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}`} />
+                <Icon className={`w-5 h-5`} />
                 <span className="font-medium">{item.label}</span>
               </Button>
             )
diff --git a/ui/src/views/forum/admin/CategoryManagement.tsx b/ui/src/views/forum/admin/CategoryManagement.tsx
index 0214264..ff88cf1 100644
--- a/ui/src/views/forum/admin/CategoryManagement.tsx
+++ b/ui/src/views/forum/admin/CategoryManagement.tsx
@@ -294,7 +294,7 @@ export function CategoryManagement({
                         {translate('::Cancel')}
                       </Button>
                       <Button variant="solid" type="submit" loading={isSubmitting}>
-                        {editingCategory ? 'Update' : 'Create'}
+                        {editingCategory ? translate('::Update') : translate('::Create')}
                       </Button>
                     </div>
                   </div>
@@ -316,7 +316,7 @@ export function CategoryManagement({
             variant="solid"
             onClick={() => setShowCreateForm(true)}
             disabled={loading}
-            className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors disabled:opacity-50"
+            className="flex items-center space-x-2"
           >
             <FaPlus className="w-4 h-4" />
             <span>{translate('::App.Forum.CategoryManagement.AddCategory')}</span>
@@ -335,13 +335,18 @@ export function CategoryManagement({
             {categories
               .sort((a, b) => a.displayOrder - b.displayOrder)
               .map((category) => (
-                <div key={category.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                <div
+                  key={category.id}
+                  className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                >
                   <div className="flex items-center justify-between">
                     <div className="flex items-start space-x-4">
                       <div className="text-2xl">{category.icon}</div>
                       <div>
                         <div className="flex items-center space-x-2 mb-1">
-                          <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{category.name}</h4>
+                          <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                            {category.name}
+                          </h4>
                           {!category.isActive && (
                             <span className="px-2 py-1 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs rounded-full">
                               Inactive
@@ -353,7 +358,9 @@ export function CategoryManagement({
                             </span>
                           )}
                         </div>
-                        <p className="text-gray-600 dark:text-gray-300 mb-2">{category.description}</p>
+                        <p className="text-gray-600 dark:text-gray-300 mb-2">
+                          {category.description}
+                        </p>
                         <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
                           <span>{category.topicCount} topics</span>
                           <span>{category.postCount} posts</span>
@@ -429,7 +436,6 @@ export function CategoryManagement({
           title={translate('::DeleteConfirmation')}
           confirmText={translate('::Delete')}
           cancelText={translate('::Cancel')}
-          confirmButtonColor="red-600"
           onCancel={() => {
             setShowConfirm(false)
             setCategoryToDelete(null)
diff --git a/ui/src/views/forum/admin/PostManagement.tsx b/ui/src/views/forum/admin/PostManagement.tsx
index 330336d..eff5edc 100644
--- a/ui/src/views/forum/admin/PostManagement.tsx
+++ b/ui/src/views/forum/admin/PostManagement.tsx
@@ -338,7 +338,7 @@ export function PostManagement({
             variant="solid"
             onClick={() => setShowCreateForm(true)}
             disabled={loading}
-            className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors disabled:opacity-50"
+            className="flex items-center space-x-2"
           >
             <FaPlus className="w-4 h-4" />
             <span>{translate('::App.Forum.PostManagement.AddPost')}</span>
@@ -446,7 +446,6 @@ export function PostManagement({
           title={translate('::DeleteConfirmation')}
           confirmText={translate('::Delete')}
           cancelText={translate('::Cancel')}
-          confirmButtonColor="red-600"
           onCancel={() => {
             setShowConfirm(false)
             setPostToDelete(null)
diff --git a/ui/src/views/forum/admin/TopicManagement.tsx b/ui/src/views/forum/admin/TopicManagement.tsx
index 0dab074..7e02797 100644
--- a/ui/src/views/forum/admin/TopicManagement.tsx
+++ b/ui/src/views/forum/admin/TopicManagement.tsx
@@ -320,7 +320,7 @@ export function TopicManagement({
                       {translate('::Cancel')}
                     </Button>
                     <Button variant="solid" type="submit" loading={isSubmitting}>
-                      {editingTopic ? 'Update' : 'Create'}
+                      {editingTopic ? translate('::Update') : translate('::Create')}
                     </Button>
                   </div>
                 </FormContainer>
@@ -341,7 +341,7 @@ export function TopicManagement({
             variant="solid"
             onClick={() => setShowCreateForm(true)}
             disabled={loading}
-            className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors disabled:opacity-50"
+            className="flex items-center space-x-2"
           >
             <FaPlus className="w-4 h-4" />
             <span>{translate('::App.Forum.TopicManagement.AddTopic')}</span>
@@ -362,19 +362,30 @@ export function TopicManagement({
                 (a, b) => new Date(b.creationTime).getTime() - new Date(a.creationTime).getTime(),
               )
               .map((topic) => (
-                <div key={topic.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                <div
+                  key={topic.id}
+                  className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                >
                   <div className="flex items-start justify-between">
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center space-x-2 mb-2">
-                        {topic.isPinned && <FaThumbtack className="w-4 h-4 text-orange-500 dark:text-orange-400" />}
-                        {topic.isLocked && <FaLock className="w-4 h-4 text-gray-400 dark:text-gray-500" />}
-                        {topic.isSolved && <FaCheckCircle className="w-4 h-4 text-emerald-500 dark:text-emerald-400" />}
+                        {topic.isPinned && (
+                          <FaThumbtack className="w-4 h-4 text-orange-500 dark:text-orange-400" />
+                        )}
+                        {topic.isLocked && (
+                          <FaLock className="w-4 h-4 text-gray-400 dark:text-gray-500" />
+                        )}
+                        {topic.isSolved && (
+                          <FaCheckCircle className="w-4 h-4 text-emerald-500 dark:text-emerald-400" />
+                        )}
                         <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 line-clamp-1">
                           {topic.title}
                         </h4>
                       </div>
 
-                      <p className="text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">{topic.content}</p>
+                      <p className="text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
+                        {topic.content}
+                      </p>
 
                       <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                         <div className="flex items-center space-x-4">
@@ -477,7 +488,6 @@ export function TopicManagement({
           title={translate('::DeleteConfirmation')}
           confirmText={translate('::Delete')}
           cancelText={translate('::Cancel')}
-          confirmButtonColor="red-600"
           onCancel={() => {
             setShowConfirm(false)
             setTopicToDelete(null)
diff --git a/ui/src/views/intranet/SocialWall/CreatePost.tsx b/ui/src/views/intranet/SocialWall/CreatePost.tsx
index 1bb0da0..6921b75 100644
--- a/ui/src/views/intranet/SocialWall/CreatePost.tsx
+++ b/ui/src/views/intranet/SocialWall/CreatePost.tsx
@@ -230,7 +230,6 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
                       type="button"
                       onClick={() => removeMediaItem(item.id)}
                       variant="solid"
-                      color="red-600"
                       shape="circle"
                       icon={<FaTimes className="h-4 w-4" />}
                       className="absolute -right-2 -top-2 !h-6 !w-6 !px-0 text-white opacity-0 transition-opacity group-hover:opacity-100"
@@ -483,11 +482,10 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
                 )}
               </div>
               <Button
+                size="sm"
                 type="submit"
                 disabled={!content.trim() && mediaItems.length === 0 && !mediaType}
                 variant="solid"
-                color="blue-600"
-                className="!h-auto !rounded-full !px-6 !py-2 font-medium text-white transition-colors hover:!bg-blue-700 disabled:cursor-not-allowed disabled:!bg-gray-400"
               >
                 {translate('::App.Platform.Intranet.SocialWall.CreatePost.Submit')}
               </Button>
diff --git a/ui/src/views/intranet/SocialWall/LocationMap.tsx b/ui/src/views/intranet/SocialWall/LocationMap.tsx
index efde743..3a4c044 100644
--- a/ui/src/views/intranet/SocialWall/LocationMap.tsx
+++ b/ui/src/views/intranet/SocialWall/LocationMap.tsx
@@ -102,9 +102,7 @@ const LocationMap: React.FC<LocationMapProps> = ({
             type="button"
             onClick={handleOpenGoogleMaps}
             variant="solid"
-            color="blue-600"
             icon={<FaExternalLinkAlt className="h-5 w-5" />}
-            className="w-full !h-auto !rounded-lg !px-4 !py-2.5 font-medium text-white transition-colors hover:!bg-blue-700"
           >
             <span>
               {translate('::App.Platform.Intranet.SocialWall.LocationMap.OpenInGoogleMaps')}
diff --git a/ui/src/views/intranet/SocialWall/LocationPicker.tsx b/ui/src/views/intranet/SocialWall/LocationPicker.tsx
index e816fcc..c76fb0a 100644
--- a/ui/src/views/intranet/SocialWall/LocationPicker.tsx
+++ b/ui/src/views/intranet/SocialWall/LocationPicker.tsx
@@ -260,11 +260,10 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ onSelect, onClose }) =>
             {translate('::App.Platform.Intranet.SocialWall.LocationPicker.AddLocation')}
           </h2>
           <Button
+            size="sm"
             onClick={onClose}
             variant="plain"
-            shape="circle"
             icon={<FaTimes className="h-5 w-5 text-gray-500 dark:text-gray-400" />}
-            className="!h-9 !w-9 !px-0 transition-colors hover:!bg-gray-100 dark:hover:!bg-gray-700"
           />
         </div>
 
@@ -281,7 +280,7 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ onSelect, onClose }) =>
                 '::App.Platform.Intranet.SocialWall.LocationPicker.SearchPlaceholder',
               )}
               disabled={!isGoogleLoaded}
-              className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:cursor-not-allowed"
+              className="w-full pl-10 pr-2 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:cursor-not-allowed"
             />
           </div>
           {!isGoogleLoaded && (
@@ -333,16 +332,10 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ onSelect, onClose }) =>
             <div className="space-y-2">
               {locations.map((location) => (
                 <Button
+                  size="sm"
                   key={location.id}
                   onClick={() => handleSelect(location)}
                   variant="plain"
-                  shape="none"
-                  className={classNames(
-                    'w-full !h-auto !justify-start !rounded-lg border-2 !p-3 text-left transition-all hover:!bg-gray-50 dark:hover:!bg-gray-700',
-                    selectedLocation?.id === location.id
-                      ? '!bg-blue-50 border-blue-500 dark:!bg-blue-900/30'
-                      : 'border-transparent',
-                  )}
                 >
                   <div className="flex items-start gap-3">
                     <div className="mt-1">
@@ -413,18 +406,17 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ onSelect, onClose }) =>
           </div>
           <div className="flex gap-2">
             <Button
+              size="sm"
               onClick={onClose}
               variant="plain"
-              className="!h-auto !rounded-lg !px-4 !py-2 text-gray-700 transition-colors hover:!bg-gray-200 dark:text-gray-200 dark:hover:!bg-gray-700"
             >
               {translate('::Cancel')}
             </Button>
             <Button
+              size="sm"
               onClick={handleConfirm}
               disabled={!selectedLocation}
               variant="solid"
-              color="blue-600"
-              className="!h-auto !rounded-lg !px-6 !py-2 font-medium text-white transition-colors hover:!bg-blue-700 disabled:cursor-not-allowed disabled:!bg-gray-400 dark:bg-blue-700 dark:hover:!bg-blue-800 dark:disabled:!bg-gray-700"
             >
               {translate('::ListForms.Wizard.Add')}
             </Button>
diff --git a/ui/src/views/intranet/SocialWall/MediaManager.tsx b/ui/src/views/intranet/SocialWall/MediaManager.tsx
index 2733bc6..16353e1 100644
--- a/ui/src/views/intranet/SocialWall/MediaManager.tsx
+++ b/ui/src/views/intranet/SocialWall/MediaManager.tsx
@@ -86,7 +86,7 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
         </div>
 
         {/* Tabs */}
-        <div className="flex border-b border-gray-200 dark:border-gray-700 px-4">
+        <div className="flex border-b border-gray-200 dark:border-gray-700 px-2 py-2">
           <Button
             onClick={() => setActiveTab('upload')}
             variant="plain"
@@ -153,8 +153,7 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
                 <div className="flex gap-2">
                   <Button
                     onClick={() => setMediaType('image')}
-                    variant="plain"
-                    shape="none"
+                    variant="solid"
                     className={classNames(
                       'flex-1 !h-auto !rounded-lg !px-4 !py-2 font-medium transition-colors',
                       mediaType === 'image'
@@ -190,14 +189,13 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
                       ? translate('::App.Platform.Intranet.SocialWall.MediaManager.EnterImageUrl')
                       : translate('::App.Platform.Intranet.SocialWall.MediaManager.EnterVideoUrl')
                   }
-                  className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="flex-1 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
                 />
                 <Button
+                  size="sm"
                   onClick={handleUrlAdd}
                   disabled={!urlInput.trim()}
                   variant="solid"
-                  color="blue-600"
-                  className="!h-auto !rounded-lg !px-6 !py-2 font-medium text-white transition-colors hover:!bg-blue-700 disabled:cursor-not-allowed disabled:!bg-gray-400"
                 >
                   {translate('::ListForms.Wizard.Add')}
                 </Button>
@@ -237,7 +235,6 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
                     <Button
                       onClick={() => removeMedia(item.id)}
                       variant="solid"
-                      color="red-600"
                       shape="circle"
                       icon={<FaTimes className="h-4 w-4" />}
                       className="absolute -right-2 -top-2 !h-6 !w-6 !px-0 text-white opacity-0 transition-opacity group-hover:opacity-100"
@@ -257,18 +254,17 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
         {/* Footer */}
         <div className="flex items-center justify-end gap-2 p-4 border-t border-gray-200 dark:border-gray-700">
           <Button
+            size="sm"
             onClick={onClose}
             variant="plain"
-            className="!h-auto !rounded-lg !px-4 !py-2 text-gray-700 transition-colors hover:!bg-gray-100 dark:text-gray-300 dark:hover:!bg-gray-700"
           >
             {translate('::Cancel')}
           </Button>
           <Button
+            size="sm"
             onClick={onClose}
             disabled={media.length === 0}
             variant="solid"
-            color="blue-600"
-            className="!h-auto !rounded-lg !px-6 !py-2 font-medium text-white transition-colors hover:!bg-blue-700 disabled:cursor-not-allowed disabled:!bg-gray-400"
           >
             {translate('::App.Platform.Intranet.SocialWall.MediaManager.Done', {
               count: media.length,
diff --git a/ui/src/views/intranet/SocialWall/PostItem.tsx b/ui/src/views/intranet/SocialWall/PostItem.tsx
index 72e0807..d29103b 100644
--- a/ui/src/views/intranet/SocialWall/PostItem.tsx
+++ b/ui/src/views/intranet/SocialWall/PostItem.tsx
@@ -362,16 +362,14 @@ const PostItem: React.FC<PostItemProps> = ({ post, onLike, onComment, onDelete,
                   placeholder={translate(
                     '::App.Platform.Intranet.SocialWall.PostItem.CommentPlaceholder',
                   )}
-                  className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="flex-1 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
                 />
                 <Button
+                  size="sm"
                   type="submit"
                   disabled={!commentText.trim()}
                   variant="solid"
-                  color="blue-600"
-                  shape="circle"
                   icon={<FaPaperPlane className="h-5 w-5" />}
-                  className="!h-10 !w-10 !px-0 text-white transition-colors hover:!bg-blue-700 disabled:cursor-not-allowed disabled:!bg-gray-400"
                 />
               </div>
             </form>
diff --git a/ui/src/views/intranet/widgets/AnnouncementModal.tsx b/ui/src/views/intranet/widgets/AnnouncementModal.tsx
index 21b1ebd..e589f3c 100644
--- a/ui/src/views/intranet/widgets/AnnouncementModal.tsx
+++ b/ui/src/views/intranet/widgets/AnnouncementModal.tsx
@@ -405,7 +405,7 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
         </div>
       </Dialog.Body>
 
-      <Dialog.Footer className="p-1 pt-2 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 flex items-end gap-3">
+      <Dialog.Footer className="pt-2 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 flex items-end gap-1">
         <div className="flex flex-1 gap-2 items-end">
           <textarea
             value={commentText}
@@ -416,25 +416,23 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
               '::App.Platform.Intranet.SocialWall.PostItem.CommentPlaceholder',
             )}
             rows={1}
-            className="flex-1 resize-none px-3 py-2 text-sm rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+            className="flex-1 resize-none px-2 py-1 text-sm rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
           />
           <Button
+            size="sm"
             type="button"
             onClick={handleSubmitComment}
             disabled={!commentText.trim() || submitting}
             variant="solid"
-            color="blue-500"
-            shape="none"
             icon={<FaPaperPlane className="h-4 w-4" />}
-            className="!h-10 !w-10 flex-shrink-0 !rounded-xl !px-0 text-white transition-colors hover:!bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
           />
         </div>
         <Button
+          size="sm"
           onClick={onClose}
           type="button"
           variant="solid"
-          color="blue-600"
-          className="!h-auto flex-shrink-0 !rounded-lg !px-2 !py-2 text-sm font-medium text-white transition-colors hover:!bg-blue-700"
+          className="ltr:mr-2 rtl:ml-2"
         >
           {translate('::App.Platform.Close')}
         </Button>
diff --git a/ui/src/views/intranet/widgets/EventModal.tsx b/ui/src/views/intranet/widgets/EventModal.tsx
index a2f72a3..aeaad7e 100644
--- a/ui/src/views/intranet/widgets/EventModal.tsx
+++ b/ui/src/views/intranet/widgets/EventModal.tsx
@@ -326,7 +326,7 @@ function EventModalContent({ event, onClose }: EventModalProps) {
         </div>
       </Dialog.Body>
 
-      <Dialog.Footer className="p-1 pt-2 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 flex items-end gap-3">
+      <Dialog.Footer className="pt-2 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 flex items-end gap-1">
         <div className="flex flex-1 gap-2 items-end">
           <textarea
             ref={commentInputRef}
@@ -336,25 +336,22 @@ function EventModalContent({ event, onClose }: EventModalProps) {
             onKeyDown={handleKeyDown}
             placeholder={translate('::App.Intranet.Events.EventAttendance')}
             rows={1}
-            className="flex-1 resize-none px-3 py-2 text-sm rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors"
+            className="flex-1 resize-none px-2 py-1 text-sm rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors"
           />
           <Button
             type="button"
+            size="sm"
             onClick={handleSubmitComment}
             disabled={!commentText.trim() || submitting}
             variant="solid"
-            color="green-500"
-            shape="none"
             icon={<FaPaperPlane className="h-4 w-4" />}
-            className="!h-10 !w-10 flex-shrink-0 !rounded-xl !px-0 text-white transition-colors hover:!bg-green-600 disabled:cursor-not-allowed disabled:opacity-50"
           />
         </div>
         <Button
+          size="sm"
           onClick={onClose}
           type="button"
           variant="solid"
-          color="green-600"
-          className="!h-auto flex-shrink-0 !rounded-lg !px-2 !py-2 text-sm font-medium text-white transition-colors hover:!bg-green-700"
         >
           {translate('::App.Platform.Close')}
         </Button>
diff --git a/ui/src/views/intranet/widgets/SurveyModal.tsx b/ui/src/views/intranet/widgets/SurveyModal.tsx
index d4e2511..7b80d7d 100644
--- a/ui/src/views/intranet/widgets/SurveyModal.tsx
+++ b/ui/src/views/intranet/widgets/SurveyModal.tsx
@@ -276,18 +276,19 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
 
       <Dialog.Footer className="flex gap-3 pt-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
         <Button
+          block
+          size="sm"
           type="button"
           onClick={onClose}
           variant="default"
-          className="flex-1 !rounded-lg border-gray-300 text-gray-700 transition-colors hover:!bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:!bg-gray-700"
         >
           {translate('::Cancel')}
         </Button>
         <Button
+          block
+          size="sm"
           type="submit"
           variant="solid"
-          color="blue-600"
-          className="flex-1 !rounded-lg text-white transition-colors hover:!bg-blue-700"
         >
           {isUpdate
             ? translate('::App.Platform.Intranet.SurveyModal.Update')
diff --git a/ui/src/views/list/ChartDrawer.tsx b/ui/src/views/list/ChartDrawer.tsx
index 7dbf179..863cafe 100644
--- a/ui/src/views/list/ChartDrawer.tsx
+++ b/ui/src/views/list/ChartDrawer.tsx
@@ -367,7 +367,7 @@ const ChartDrawer = ({
                     >
                       <div className="flex items-center justify-center gap-2">
                         {isSubmitting
-                          ? translate('::SavingWithThreeDot')
+                          ? translate('::Saving')
                           : translate('::App.Platform.ChartDrawer.Save')}
                       </div>
                     </Button>
diff --git a/ui/src/views/menu/MenuManager.tsx b/ui/src/views/menu/MenuManager.tsx
index 51a6815..dbde9a5 100644
--- a/ui/src/views/menu/MenuManager.tsx
+++ b/ui/src/views/menu/MenuManager.tsx
@@ -75,7 +75,6 @@ export const MenuManager = () => {
             onClick={refetch}
             block
             variant="solid"
-            color="blue-600"
             className="!rounded-lg !py-2 hover:!bg-blue-700 dark:bg-blue-700 dark:hover:!bg-blue-800 transition-colors"
           >
             Retry
@@ -137,22 +136,22 @@ export const MenuManager = () => {
                 onClick={handleSave}
                 disabled={!isDesignMode || isSaving}
                 size="sm"
-                variant="plain"
+                variant="solid"
                 className={`
                               !inline-flex !h-auto !items-center !justify-center gap-2 !rounded-lg !px-2 !py-1 transition-colors
-                              ${isDesignMode ? 'bg-green-600 text-white hover:!bg-green-700 dark:bg-green-700 dark:hover:!bg-green-800' : 'bg-gray-300 text-gray-500 dark:bg-gray-700 dark:text-gray-400 cursor-not-allowed'}
+                              ${isDesignMode ? 'text-white' : 'cursor-not-allowed'}
                               ${isSaving ? 'opacity-50' : ''}
                             `}
               >
                 {isSaving ? (
                   <>
                     <FaSpinner size={10} className="animate-spin" />
-                    Saving...
+                    {translate('::Saving')}
                   </>
                 ) : (
                   <>
                     <FaRegSave size={10} />
-                    Save Changes
+                    {translate('::App.SaveChanges')}
                   </>
                 )}
               </Button>
diff --git a/ui/src/views/public/Blog.tsx b/ui/src/views/public/Blog.tsx
index 5e11235..fc22e73 100644
--- a/ui/src/views/public/Blog.tsx
+++ b/ui/src/views/public/Blog.tsx
@@ -265,9 +265,9 @@ const Blog = () => {
             <input
               type="email"
               placeholder={translate('::Abp.Account.EmailAddress')}
-              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
+              className="flex-1 px-2 py-1 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
             />
-            <Button className="bg-blue-600 text-black px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors dark:bg-blue-500 dark:hover:bg-blue-600">
+            <Button variant='solid'>
               {translate('::Public.common.subscribe')}
             </Button>
           </div>
diff --git a/ui/src/views/public/Demo.tsx b/ui/src/views/public/Demo.tsx
index e5627ae..b358a81 100644
--- a/ui/src/views/public/Demo.tsx
+++ b/ui/src/views/public/Demo.tsx
@@ -147,8 +147,6 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                 });
               }}
               variant="solid"
-              color="blue-600"
-              className="!h-auto !rounded-xl !px-6 !py-3 text-white transition-all duration-300 hover:!bg-blue-700"
             >
               {translate('::Public.demo.newDemo')}
             </Button>
diff --git a/ui/src/views/public/Services.tsx b/ui/src/views/public/Services.tsx
index ac0262b..5a2581d 100644
--- a/ui/src/views/public/Services.tsx
+++ b/ui/src/views/public/Services.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { FaCheckCircle } from 'react-icons/fa'
-import { Link } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { Helmet } from 'react-helmet'
@@ -281,6 +281,7 @@ function buildServicesContent(
 
 const Services: React.FC = () => {
   const { translate } = useLocalization()
+  const navigate = useNavigate()
   const { setLang } = useStoreActions((actions) => actions.locale)
   const { getConfig } = useStoreActions((actions) => actions.abpConfig)
   const configCultureName = useStoreState(
@@ -907,6 +908,7 @@ const Services: React.FC = () => {
       {isDesignMode && !isPanelVisible && (
         <Button
           type="button"
+          variant='solid'
           onClick={() => setIsPanelVisible(true)}
           className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl"
         >
@@ -1014,12 +1016,15 @@ const Services: React.FC = () => {
                           </li>
                         ))}
                       </ul>
-                      <Link
-                        to={ROUTES_ENUM.public.contact}
-                        className={content?.supportButtonStyleClass || 'block text-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors'}
+                      <Button
+                        block
+                        size="md"
+                        type="button"
+                        variant="solid"
+                        onClick={() => navigate(ROUTES_ENUM.public.contact)}
                       >
                         {content?.supportButtonLabel}
-                      </Link>
+                      </Button>
                     </div>
                   </SelectableBlock>
                 )
@@ -1039,12 +1044,14 @@ const Services: React.FC = () => {
           <div className="container mx-auto px-4 text-center">
             <h2 className={content?.ctaTitleStyleClass || 'text-3xl font-bold mb-6 text-white'}>{content?.ctaTitle}</h2>
             <p className={content?.ctaDescriptionStyleClass || 'text-xl mb-8 max-w-2xl mx-auto'}>{content?.ctaDescription}</p>
-            <Link
-              to={ROUTES_ENUM.public.contact}
-              className={content?.ctaButtonStyleClass || 'bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors'}
+            <Button
+              type="button"
+              variant="solid"
+              size="lg"
+              onClick={() => navigate(ROUTES_ENUM.public.contact)}
             >
               {content?.ctaButtonLabel}
-            </Link>
+            </Button>
           </div>
         </div>
       </SelectableBlock>
diff --git a/ui/src/views/public/designer/DesignerDrawer.tsx b/ui/src/views/public/designer/DesignerDrawer.tsx
index c4744fc..1599237 100644
--- a/ui/src/views/public/designer/DesignerDrawer.tsx
+++ b/ui/src/views/public/designer/DesignerDrawer.tsx
@@ -144,7 +144,7 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
         </div>
 
         <div className="flex items-center justify-between border-t border-slate-200 dark:border-gray-700 px-5 py-4">
-            <Button variant="solid" block={true} onClick={onSave}>
+            <Button variant="solid" block onClick={onSave}>
               {translate('::Public.designer.save')}
             </Button>
         </div>
diff --git a/ui/src/views/settings/Settings.tsx b/ui/src/views/settings/Settings.tsx
index 252f55c..22223f8 100644
--- a/ui/src/views/settings/Settings.tsx
+++ b/ui/src/views/settings/Settings.tsx
@@ -222,7 +222,7 @@ const Settings = () => {
                               loading={isSubmitting}
                             >
                               {isSubmitting
-                                ? translate('::SavingWithThreeDot')
+                                ? translate('::Saving')
                                 : translate('::Save')}
                             </Button>
                           </div>
diff --git a/ui/src/views/setup/DatabaseSetup.tsx b/ui/src/views/setup/DatabaseSetup.tsx
index 3e74fe5..bdb10d9 100644
--- a/ui/src/views/setup/DatabaseSetup.tsx
+++ b/ui/src/views/setup/DatabaseSetup.tsx
@@ -252,7 +252,6 @@ const DatabaseSetup = () => {
               <Button
                 variant='solid'
                 onClick={startMigration}
-                className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-colors"
               >
                 {status === 'error' ? 'Retry' : 'Start Setup'}
               </Button>
diff --git a/ui/src/views/shared/MenuAddDialog.tsx b/ui/src/views/shared/MenuAddDialog.tsx
index 641b6d1..0b54668 100644
--- a/ui/src/views/shared/MenuAddDialog.tsx
+++ b/ui/src/views/shared/MenuAddDialog.tsx
@@ -113,11 +113,9 @@ export function IconPickerField({ value, onChange, invalid }: IconPickerFieldPro
                 type="button"
                 onClick={() => setLimit((l) => l + ICON_PAGE_SIZE)}
                 size="xs"
-                variant="twoTone"
-                color="indigo-600"
-                className="!h-auto !px-3 !py-1 !rounded text-xs bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 hover:!bg-indigo-100 dark:hover:!bg-indigo-900/50 font-medium"
+                variant="solid"
               >
-                Load More
+                {translate('::Abp.Identity.ActivityLogs.LoadMore')}
               </Button>
             </div>
           )}
@@ -386,7 +384,7 @@ export function MenuAddDialog({
             }
             onClick={handleSave}
           >
-            {translate('::App.Platform.Save') || 'Kaydet'}
+            {translate('::Save') || 'Kaydet'}
           </Button>
         </div>
       </div>