diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index 16e690b..c6f36a6 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -6144,6 +6144,12 @@
             "tr": "Yapay zekanın iş süreçlerindeki etkileri ve geleceği...",
             "en": "The impacts and future of AI in business processes..."
         },
+        {
+            "resourceName": "Platform",
+            "key": "Public.blog.posts.web.excerpt",
+            "tr": "Modern web geliştirme teknikleri ve araçları...",
+            "en": "Modern web development techniques and tools..."
+        },
         {
             "resourceName": "Platform",
             "key": "Public.blog.posts.ai.title",
@@ -7658,7 +7664,7 @@
         },
         {
             "resourceName": "Platform",
-            "key": "Public.services.integration.features.Api",
+            "key": "Public.services.integration.features.api",
             "tr": "Api Entegrasyonu",
             "en": "Api Integration"
         },
diff --git a/ui/src/components/codeLayout/ComponentSelector.tsx b/ui/src/components/codeLayout/ComponentSelector.tsx
index 909a957..1d4adc2 100644
--- a/ui/src/components/codeLayout/ComponentSelector.tsx
+++ b/ui/src/components/codeLayout/ComponentSelector.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentInfo } from '../../proxy/developerKit/componentInfo';
+import { Button } from '../ui';
 
 interface ComponentSelectorProps {
   components: ComponentInfo[];
@@ -20,13 +21,15 @@ const ComponentSelector: React.FC<ComponentSelectorProps> = ({
         <label className="block text-sm font-medium text-gray-700">
           Select Component
         </label>
-        <button
+        <Button
+          variant='solid'
+          size="xs"
           onClick={onRefresh}
           className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors"
           title="Refresh component list"
         >
           Refresh
-        </button>
+        </Button>
       </div>
       <select
         value={selectedComponentId || ''}
diff --git a/ui/src/components/codeLayout/PropertyPanel.tsx b/ui/src/components/codeLayout/PropertyPanel.tsx
index 1654bc1..e277f50 100644
--- a/ui/src/components/codeLayout/PropertyPanel.tsx
+++ b/ui/src/components/codeLayout/PropertyPanel.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import TailwindModal from "./TailwindModal";
 import { ComponentInfo, HookInfo, PropertyInfo } from "../../proxy/developerKit/componentInfo";
 import { getComponentDefinition } from "./data/componentDefinitions";
+import { Button } from "../ui";
 
 interface PropertyPanelProps {
   selectedComponent: ComponentInfo | null;
@@ -525,7 +526,9 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
           </div>
         </div>
         {/* Sil Butonu */}
-        <button
+        <Button
+          variant="solid"
+          size="xs"
           className="mr-2 px-3 py-1 rounded bg-red-500 text-white hover:bg-red-600 transition-colors text-sm"
           onClick={() => {
             if (selectedComponent) {
@@ -541,28 +544,32 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
           title="Komponenti Sil"
         >
           Sil
-        </button>
+        </Button>
       </div>
 
       {/* Footer Action Buttons - her iki tabda da sabit */}
       <div className="p-4 border-t">
         <div className="flex gap-2">
-          <button
+          <Button
+            size="xs"
+            variant="solid"
             onClick={
               activeTab === "props"
                 ? handleApplyPropChanges
                 : handleApplyHookChanges
             }
             disabled={activeTab === "props" ? !hasChanges : !hasHookChanges}
-            className={`flex-1 px-4 py-2 rounded-md font-medium transition-colors ${
+            className={`flex-1 rounded-md font-medium transition-colors ${
               (activeTab === "props" ? hasChanges : hasHookChanges)
                 ? "bg-green-500 text-white hover:bg-green-600"
                 : "bg-gray-300 text-gray-500 cursor-not-allowed"
             }`}
           >
             Uygula
-          </button>
-          <button
+          </Button>
+          <Button
+            size="xs"
+            variant="default"
             onClick={
               activeTab === "props"
                 ? handleResetChanges
@@ -572,20 +579,20 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
                   }
             }
             disabled={activeTab === "props" ? !hasChanges : !hasHookChanges}
-            className={`flex-1 px-4 py-2 rounded-md font-medium transition-colors ${
+            className={`flex-1 rounded-md font-medium transition-colors ${
               (activeTab === "props" ? hasChanges : hasHookChanges)
                 ? "bg-red-500 text-white hover:bg-red-600"
                 : "bg-gray-300 text-gray-500 cursor-not-allowed"
             }`}
           >
             İptal
-          </button>
+          </Button>
         </div>
       </div>
 
       {/* Content */}
       {activeTab === "props" && (
-        <div className="flex-1 overflow-y-auto p-4 max-h-[calc(100vh-200px)]">
+        <div className="flex-1 text-black overflow-y-auto p-4 max-h-[calc(100vh-200px)]">
           <h3 className="text-md font-medium text-gray-800 mb-4">Properties</h3>
           {/* Properties */}
           {properties.length > 0 && (
diff --git a/ui/src/components/codeLayout/TailwindModal.tsx b/ui/src/components/codeLayout/TailwindModal.tsx
index 3a471f5..0adacb9 100644
--- a/ui/src/components/codeLayout/TailwindModal.tsx
+++ b/ui/src/components/codeLayout/TailwindModal.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { searchTailwindClasses, TAILWIND_CLASSES } from './data/tailwindClasses';
+import { Button } from '../ui';
 
 interface TailwindModalProps {
   isOpen: boolean;
@@ -61,7 +62,7 @@ const TailwindModal: React.FC<TailwindModalProps> = ({
         </div>
 
         {/* Search and Filter */}
-        <div className="p-4 border-b bg-gray-50">
+        <div className="p-4 border-b bg-gray-50 text-black">
           <div className="flex gap-4 mb-4">
             <input
               type="text"
@@ -106,25 +107,15 @@ const TailwindModal: React.FC<TailwindModalProps> = ({
                   key={`${className}-${index}`}
                   className="group relative"
                 >
-                  <button
+                  <Button
+                    variant='default'
                     onClick={() => handleClassSelect(className)}
                     className="w-full text-left px-3 py-2 text-sm bg-gray-100 hover:bg-blue-100 rounded border hover:border-blue-300 transition-colors"
                   >
                     <span className="font-mono text-xs text-gray-600">
                       {className}
                     </span>
-                  </button>
-                  
-                  {/* Add to current value button */}
-                  {currentValue && (
-                    <button
-                      onClick={() => handleAddToCurrentValue(className)}
-                      className="absolute top-1 right-1 w-6 h-6 bg-blue-500 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity hover:bg-blue-600"
-                      title="Add to current value"
-                    >
-                      +
-                    </button>
-                  )}
+                  </Button>
                 </div>
               ))}
             </div>
@@ -137,18 +128,20 @@ const TailwindModal: React.FC<TailwindModalProps> = ({
             {filteredClasses.length} classes found
           </div>
           <div className="flex gap-2">
-            <button
+            <Button
+              variant='default'
               onClick={() => onSelectClass('')}
               className="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
             >
               Clear
-            </button>
-            <button
+            </Button>
+            <Button
+              variant='solid'
               onClick={onClose}
               className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
             >
               Close
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/ui/src/views/NotFound.tsx b/ui/src/views/NotFound.tsx
index 79482d0..bb191bd 100644
--- a/ui/src/views/NotFound.tsx
+++ b/ui/src/views/NotFound.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui'
 import { APP_NAME } from '@/constants/app.constant'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -27,14 +28,15 @@ const NotFoundPage = () => {
         {translate('::Public.notFound.message')}
       </p>
       <div className="flex items-center justify-center font-inter">
-        <button
+        <Button
+          variant='solid'
           onClick={() =>
             navigate(isAdminPath ? ROUTES_ENUM.protected.dashboard : ROUTES_ENUM.public.home)
           }
           className="px-6 py-3 bg-blue-500 rounded-xl shadow hover:bg-blue-600 transition"
         >
           {translate('::Public.notFound.button')}
-        </button>
+        </Button>
       </div>
     </div>
   )
diff --git a/ui/src/views/admin/files/components/Breadcrumb.tsx b/ui/src/views/admin/files/components/Breadcrumb.tsx
index ee1b6e8..9a74a8e 100644
--- a/ui/src/views/admin/files/components/Breadcrumb.tsx
+++ b/ui/src/views/admin/files/components/Breadcrumb.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from 'react'
 import classNames from 'classnames'
 import { FaChevronRight, FaFolder, FaHome } from 'react-icons/fa'
 import type { BreadcrumbItem } from '@/types/fileManagement'
+import { Button } from '@/components/ui'
 
 export interface BreadcrumbProps {
   items: BreadcrumbItem[]
@@ -17,7 +18,8 @@ const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
       {items.map((item, index) => (
         <div key={item.path} className="flex items-center">
           {index > 0 && <FaChevronRight className="mx-2 h-4 w-4 text-gray-400" />}
-          <button
+          <Button
+            size="xs"
             onClick={() => onNavigate(item)}
             className={classNames(
               'flex items-center px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors',
@@ -33,7 +35,7 @@ const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
               <FaFolder className="h-4 w-4 mr-1" />
             )}
             <span className="truncate max-w-32">{item.name}</span>
-          </button>
+          </Button>
         </div>
       ))}
     </div>
diff --git a/ui/src/views/admin/listForm/WizardStep2.tsx b/ui/src/views/admin/listForm/WizardStep2.tsx
index b072a6c..aa36a6d 100644
--- a/ui/src/views/admin/listForm/WizardStep2.tsx
+++ b/ui/src/views/admin/listForm/WizardStep2.tsx
@@ -473,20 +473,20 @@ const WizardStep2 = ({
         extra={
           selectCommandColumns.length > 0 ? (
             <div className="flex items-center gap-2 ml-3">
-              <button
-                type="button"
+              <Button
+                variant='solid'
                 onClick={() => onToggleAllColumns(true)}
                 className="text-xs px-2 py-0.5 rounded bg-indigo-500 text-white hover:bg-indigo-600"
               >
                 {translate('::ListForms.Wizard.Step2.SelectAll') || 'Tümünü Seç'}
-              </button>
-              <button
-                type="button"
+              </Button>
+              <Button
+                variant='default'
                 onClick={() => onToggleAllColumns(false)}
                 className="text-xs px-2 py-0.5 rounded border border-gray-300 dark:border-gray-600 text-gray-500 hover:text-red-500 hover:border-red-400"
               >
                 {translate('::ListForms.Wizard.Step2.ClearAll') || 'Tümünü Kaldır'}
-              </button>
+              </Button>
               <span className="text-xs text-gray-400">
                 {selectedColumns.size}/{selectCommandColumns.length}{' '}
                 {translate('::App.Listform.ListformField.Column')}
diff --git a/ui/src/views/admin/organization-unit/OrganizationUnits.tsx b/ui/src/views/admin/organization-unit/OrganizationUnits.tsx
index d40d549..cc3d168 100644
--- a/ui/src/views/admin/organization-unit/OrganizationUnits.tsx
+++ b/ui/src/views/admin/organization-unit/OrganizationUnits.tsx
@@ -430,24 +430,24 @@ const OrganizationUnits = () => {
 
         <div className="file-actions">
           <div className="flex gap-1 folderFileActions">
-            <button
+            <Button
               onClick={() => setIsMoveAllUsersOpen(true)}
               title={translate('::Abp.Identity.OrganizationUnit.MoveAllUsers')}
             >
               <FaUserPlus size="20" color="#2d6da3" />
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={() => node.edit()}
               title={translate('::Abp.Identity.OrganizationUnit.Rename')}
             >
               <FaEdit size="20" className="text-teal-900" />
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={() => setDeleteRow({ id: node.data.id, name: 'Organization Unit' })}
               title={translate('::Delete')}
             >
               <FaTrashAlt size="20" className="text-red-500" />
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/ui/src/views/forum/Forum.tsx b/ui/src/views/forum/Forum.tsx
index 5da9691..f0320a9 100644
--- a/ui/src/views/forum/Forum.tsx
+++ b/ui/src/views/forum/Forum.tsx
@@ -7,6 +7,7 @@ import { Container } from '@/components/shared'
 import { Helmet } from 'react-helmet'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { APP_NAME } from '@/constants/app.constant'
+import { Button } from '@/components/ui'
 
 export function Forum() {
   const { translate } = useLocalization()
@@ -63,9 +64,9 @@ export function Forum() {
           <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
             <strong className="font-bold">Error: </strong>
             <span className="block sm:inline">{error}</span>
-            <button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
+            <Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
               <span className="sr-only">Dismiss</span>×
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/ui/src/views/forum/Management.tsx b/ui/src/views/forum/Management.tsx
index c82b4be..2cfc0d8 100644
--- a/ui/src/views/forum/Management.tsx
+++ b/ui/src/views/forum/Management.tsx
@@ -5,6 +5,7 @@ import { Container } from '@/components/shared'
 import { Helmet } from 'react-helmet'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { APP_NAME } from '@/constants/app.constant'
+import { Button } from '@/components/ui'
 
 export function Management() {
   const {
@@ -69,9 +70,9 @@ export function Management() {
           <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
             <strong className="font-bold">Error: </strong>
             <span className="block sm:inline">{error}</span>
-            <button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
+            <Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
               <span className="sr-only">Dismiss</span>×
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/ui/src/views/forum/admin/AdminView.tsx b/ui/src/views/forum/admin/AdminView.tsx
index fc4c7e0..8bbe83c 100644
--- a/ui/src/views/forum/admin/AdminView.tsx
+++ b/ui/src/views/forum/admin/AdminView.tsx
@@ -6,6 +6,7 @@ import { PostManagement } from './PostManagement'
 import { ForumCategory, ForumPost, ForumTopic } from '@/proxy/forum/forum'
 import { AdminStats } from './Dashboard'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import { Button } from '@/components/ui'
 
 interface AdminViewProps {
   categories: ForumCategory[]
@@ -108,7 +109,7 @@ export function AdminView({
           {navigationItems.map((item) => {
             const Icon = item.icon
             return (
-              <button
+              <Button
                 key={item.id}
                 onClick={() => setActiveSection(item.id)}
                 className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
@@ -119,7 +120,7 @@ export function AdminView({
               >
                 <Icon className="w-5 h-5" />
                 <span className="font-medium">{item.label}</span>
-              </button>
+              </Button>
             )
           })}
         </nav>
diff --git a/ui/src/views/forum/admin/CategoryManagement.tsx b/ui/src/views/forum/admin/CategoryManagement.tsx
index 700caab..6fe4938 100644
--- a/ui/src/views/forum/admin/CategoryManagement.tsx
+++ b/ui/src/views/forum/admin/CategoryManagement.tsx
@@ -165,14 +165,15 @@ export function CategoryManagement({
         <h2 className="text-2xl font-bold text-gray-900">
           {translate('::App.Forum.CategoryManagement.Title')}
         </h2>
-        <button
+        <Button
+          variant="solid"
           onClick={() => setShowCreateForm(true)}
           disabled={loading}
-          className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+          className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
         >
           <FaPlus className="w-4 h-4" />
           <span>{translate('::App.Forum.CategoryManagement.AddCategory')}</span>
-        </button>
+        </Button>
       </div>
 
       {/* Create/Edit Form */}
@@ -367,7 +368,8 @@ export function CategoryManagement({
                     </div>
 
                     <div className="flex items-center space-x-2">
-                      <button
+                      <Button
+                        size='xs'
                         onClick={() => handleToggleActive(category)}
                         className={`p-2 rounded-lg transition-colors ${
                           category.isActive
@@ -381,9 +383,10 @@ export function CategoryManagement({
                         ) : (
                           <FaEyeSlash className="w-4 h-4" />
                         )}
-                      </button>
+                      </Button>
 
-                      <button
+                      <Button
+                        size='xs'
                         onClick={() => handleToggleLocked(category)}
                         className={`p-2 rounded-lg transition-colors ${
                           category.isLocked
@@ -397,23 +400,25 @@ export function CategoryManagement({
                         ) : (
                           <FaUnlock className="w-4 h-4" />
                         )}
-                      </button>
+                      </Button>
 
-                      <button
+                      <Button
+                        size='xs'
                         onClick={() => handleEdit(category)}
                         className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
                         title={translate('::App.Forum.CategoryManagement.EditCategory')}
                       >
                         <FaEdit className="w-4 h-4" />
-                      </button>
+                      </Button>
 
-                      <button
+                      <Button
+                        size='xs'
                         onClick={() => confirmDeleteCategory(category)}
                         className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
                         title={translate('::App.Forum.CategoryManagement.DeleteCategory')}
                       >
                         <FaTrash className="w-4 h-4" />
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 </div>
diff --git a/ui/src/views/forum/admin/PostManagement.tsx b/ui/src/views/forum/admin/PostManagement.tsx
index 8b38a24..fc80653 100644
--- a/ui/src/views/forum/admin/PostManagement.tsx
+++ b/ui/src/views/forum/admin/PostManagement.tsx
@@ -164,14 +164,15 @@ export function PostManagement({
         <h2 className="text-2xl font-bold text-gray-900">
           {translate('::App.Forum.PostManagement.Title')}
         </h2>
-        <button
+        <Button
+          variant="solid"
           onClick={() => setShowCreateForm(true)}
           disabled={loading}
-          className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+          className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
         >
           <FaPlus className="w-4 h-4" />
           <span>{translate('::App.Forum.PostManagement.AddPost')}</span>
-        </button>
+        </Button>
       </div>
 
       {/* Create/Edit Form */}
@@ -397,7 +398,7 @@ export function PostManagement({
                     </div>
 
                     <div className="flex items-center space-x-2 ml-4">
-                      <button
+                      <Button
                         onClick={() => handleToggleAcceptedAnswer(post)}
                         className={`p-2 rounded-lg transition-colors ${
                           post.isAcceptedAnswer
@@ -415,23 +416,23 @@ export function PostManagement({
                         ) : (
                           <FaCircle className="w-4 h-4" />
                         )}
-                      </button>
+                      </Button>
 
-                      <button
+                      <Button
                         onClick={() => handleEdit(post)}
                         className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
                         title={translate('::App.Forum.PostManagement.EditPost')}
                       >
                         <FaEdit className="w-4 h-4" />
-                      </button>
+                      </Button>
 
-                      <button
+                      <Button
                         onClick={() => confirmDeletePost(post)}
                         className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
                         title={translate('::App.Forum.PostManagement.DeletePost')}
                       >
                         <FaTrashAlt className="w-4 h-4" />
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 </div>
diff --git a/ui/src/views/forum/admin/TopicManagement.tsx b/ui/src/views/forum/admin/TopicManagement.tsx
index bff5b2c..39e4714 100644
--- a/ui/src/views/forum/admin/TopicManagement.tsx
+++ b/ui/src/views/forum/admin/TopicManagement.tsx
@@ -206,14 +206,15 @@ export function TopicManagement({
         <h2 className="text-2xl font-bold text-gray-900">
           {translate('::App.Forum.TopicManagement.Title')}
         </h2>
-        <button
+        <Button
+          variant="solid"
           onClick={() => setShowCreateForm(true)}
           disabled={loading}
-          className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+          className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
         >
           <FaPlus className="w-4 h-4" />
           <span>{translate('::App.Forum.TopicManagement.AddTopic')}</span>
-        </button>
+        </Button>
       </div>
 
       {/* Create/Edit Form */}
@@ -398,7 +399,7 @@ export function TopicManagement({
                     </div>
 
                     <div className="flex items-center space-x-2 ml-4">
-                      <button
+                      <Button
                         onClick={() => handlePin(topic)}
                         className={`p-2 rounded-lg transition-colors ${
                           topic.isPinned
@@ -412,9 +413,9 @@ export function TopicManagement({
                         ) : (
                           <FaTree className="w-4 h-4" />
                         )}
-                      </button>
+                      </Button>
 
-                      <button
+                      <Button
                         onClick={() => handleLock(topic)}
                         className={`p-2 rounded-lg transition-colors ${
                           topic.isLocked
@@ -428,9 +429,9 @@ export function TopicManagement({
                         ) : (
                           <FaUnlock className="w-4 h-4" />
                         )}
-                      </button>
+                      </Button>
 
-                      <button
+                      <Button
                         onClick={() => handleSolved(topic)}
                         className={`p-2 rounded-lg transition-colors ${
                           topic.isSolved
@@ -444,23 +445,23 @@ export function TopicManagement({
                         ) : (
                           <FaCircle className="w-4 h-4" />
                         )}
-                      </button>
+                      </Button>
 
-                      <button
+                      <Button
                         onClick={() => handleEdit(topic)}
                         className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
                         title={translate('::App.Forum.TopicManagement.EditTopic')}
                       >
                         <FaEdit className="w-4 h-4" />
-                      </button>
+                      </Button>
 
-                      <button
+                      <Button
                         onClick={() => confirmDeleteTopic(topic)}
                         className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
                         title={translate('::App.Forum.TopicManagement.DeleteTopic')}
                       >
                         <FaTrashAlt className="w-4 h-4" />
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 </div>
diff --git a/ui/src/views/forum/forum/ForumView.tsx b/ui/src/views/forum/forum/ForumView.tsx
index 2514ccb..8cee359 100644
--- a/ui/src/views/forum/forum/ForumView.tsx
+++ b/ui/src/views/forum/forum/ForumView.tsx
@@ -11,6 +11,7 @@ import { ForumTopicCard } from './ForumTopicCard'
 import { useStoreState } from '@/store/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { forumService } from '@/services/forum.service'
+import { Button } from '@/components/ui'
 
 interface ForumViewProps {
   categories: ForumCategory[]
@@ -352,41 +353,45 @@ export function ForumView({
         {/* Right Side: Actions + Search */}
         <div className="flex items-center space-x-2 ml-auto">
           {viewState === 'topics' && selectedCategory && !selectedCategory.isLocked && (
-            <button
+            <Button
+              variant='solid'
               onClick={() => setShowCreateTopic(true)}
               className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
             >
               <FaPlus className="w-4 h-4" />
               <span>{translate('::App.Forum.TopicManagement.NewTopic')}</span>
-            </button>
+            </Button>
           )}
           {viewState === 'posts' && selectedTopic && !selectedTopic.isLocked && (
-            <button
+            <Button
+              variant='solid'
               onClick={() => setShowCreatePost(true)}
               className="flex items-center space-x-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors"
             >
               <FaPlus className="w-4 h-4" />
               <span>{translate('::App.Forum.PostManagement.NewPost')}</span>
-            </button>
+            </Button>
           )}
 
           {/* Search */}
-          <button
+          <Button
             onClick={() => setIsSearchModalOpen(true)}
+            variant='default'
             className="hidden md:flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
           >
             <FaSearch className="w-4 h-4 text-gray-400" />
             <span className="text-gray-500">
               {translate('::App.Forum.TopicManagement.Searchtopics')}
             </span>
-          </button>
+          </Button>
 
-          <button
+          <Button
             onClick={() => setIsSearchModalOpen(true)}
+            variant='default'
             className="md:hidden p-2 text-gray-400 hover:text-gray-600 transition-colors"
           >
             <FaSearch className="w-5 h-5" />
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/ui/src/views/list/ChartDrawer.tsx b/ui/src/views/list/ChartDrawer.tsx
index c4a5db0..d74c313 100644
--- a/ui/src/views/list/ChartDrawer.tsx
+++ b/ui/src/views/list/ChartDrawer.tsx
@@ -143,13 +143,13 @@ const ChartDrawer = ({
                     <span>📊</span>
                     {translate('::App.Platform.ChartDrawer.ChartSeries')}
                   </h2>
-                  <button
+                  <Button
                     type="button"
                     onClick={onClose}
                     className="p-2 hover:bg-gray-200 rounded-full transition-colors"
                   >
                     <FaTimes />
-                  </button>
+                  </Button>
                 </div>
 
                 <FormContainer size="sm" className="flex flex-col flex-1 overflow-hidden">
@@ -205,7 +205,7 @@ const ChartDrawer = ({
                                 <Field name={`series[${index}].type`}>
                                   {({ field, form }: FieldProps) => (
                                     <div className="relative">
-                                      <button
+                                      <Button
                                         type="button"
                                         onClick={() =>
                                           setSelectedSeriesIndex(
@@ -222,12 +222,12 @@ const ChartDrawer = ({
                                           {chartSeriesTypeOptions.find((t) => t.label === field.value)
                                             ?.label || field.value}
                                         </span>
-                                      </button>
+                                      </Button>
                                       {selectedSeriesIndex === index && (
                                         <div className="absolute z-50 mt-1 w-full bg-white border rounded-lg shadow-xl p-2">
                                           <div className="grid grid-cols-2 gap-2">
                                             {chartSeriesTypeOptions.map((chartType) => (
-                                              <button
+                                              <Button
                                                 key={chartType.label}
                                                 type="button"
                                                 onClick={() => {
@@ -244,7 +244,7 @@ const ChartDrawer = ({
                                                 <span className="text-xs font-medium">
                                                   {chartType.label}
                                                 </span>
-                                              </button>
+                                              </Button>
                                             ))}
                                           </div>
                                         </div>
diff --git a/ui/src/views/public/About.tsx b/ui/src/views/public/About.tsx
index 9d25560..dfaacce 100644
--- a/ui/src/views/public/About.tsx
+++ b/ui/src/views/public/About.tsx
@@ -6,7 +6,7 @@ import { getAbout, saveAboutPage } from '@/services/about'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import Loading from '@/components/shared/Loading'
 import { APP_NAME } from '@/constants/app.constant'
-import { Notification, toast } from '@/components/ui'
+import { Button, Notification, toast } from '@/components/ui'
 import { useStoreState } from '@/store'
 import { useStoreActions } from '@/store'
 import DesignerDrawer from './designer/DesignerDrawer'
@@ -699,13 +699,13 @@ const About: React.FC = () => {
 
       <div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
         {isDesignMode && !isPanelVisible && (
-          <button
+          <Button
             type="button"
             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"
           >
             {translate('::Public.designer.showPanel')}
-          </button>
+          </Button>
         )}
 
         {/* Hero Section */}
diff --git a/ui/src/views/public/Blog.tsx b/ui/src/views/public/Blog.tsx
index eef191d..ac81280 100644
--- a/ui/src/views/public/Blog.tsx
+++ b/ui/src/views/public/Blog.tsx
@@ -8,6 +8,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Helmet } from 'react-helmet'
 import { Loading } from '@/components/shared'
 import { APP_NAME } from '@/constants/app.constant'
+import { Button } from '@/components/ui'
 
 const Blog = () => {
   const { translate } = useLocalization()
@@ -120,7 +121,7 @@ const Blog = () => {
 
             {/* Category Filter */}
             <div className="flex gap-2 flex-wrap">
-              <button
+              <Button
                 onClick={() => handleCategoryChange('')}
                 className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
                   selectedCategory === ''
@@ -129,9 +130,9 @@ const Blog = () => {
                 }`}
               >
                 {translate('::App.Reports.Search')}
-              </button>
+              </Button>
               {categories.map((category) => (
-                <button
+                <Button
                   key={category.id}
                   onClick={() => handleCategoryChange(category.id)}
                   className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
@@ -141,7 +142,7 @@ const Blog = () => {
                   }`}
                 >
                   {translate('::Public.' + category.name)} ({category.postCount})
-                </button>
+                </Button>
               ))}
             </div>
           </div>
@@ -213,16 +214,16 @@ const Blog = () => {
         {totalPages > 1 && (
           <div className="mt-12 flex justify-center">
             <nav className="flex gap-2">
-              <button
+              <Button
                 onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                 disabled={currentPage === 1}
                 className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 Önceki
-              </button>
+              </Button>
 
               {[...Array(totalPages)].map((_, i) => (
-                <button
+                <Button
                   key={i + 1}
                   onClick={() => setCurrentPage(i + 1)}
                   className={`px-4 py-2 rounded-lg ${
@@ -232,16 +233,16 @@ const Blog = () => {
                   }`}
                 >
                   {i + 1}
-                </button>
+                </Button>
               ))}
 
-              <button
+              <Button
                 onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                 disabled={currentPage === totalPages}
                 className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 Sonraki
-              </button>
+              </Button>
             </nav>
           </div>
         )}
@@ -262,9 +263,9 @@ const Blog = () => {
               placeholder={translate('::Abp.Account.EmailAddress')}
               className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
-            <button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+            <Button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
               {translate('::Public.common.subscribe')}
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/ui/src/views/public/Contact.tsx b/ui/src/views/public/Contact.tsx
index 502b291..7f6e6cd 100644
--- a/ui/src/views/public/Contact.tsx
+++ b/ui/src/views/public/Contact.tsx
@@ -20,7 +20,7 @@ import DesignerDrawer from './designer/DesignerDrawer'
 import SelectableBlock from './designer/SelectableBlock'
 import { DesignerSelection } from './designer/types'
 import { useDesignerState } from './designer/useDesignerState'
-import { Notification, toast } from '@/components/ui'
+import { Button, Notification, toast } from '@/components/ui'
 
 interface ContactContent {
   heroTitle: string
@@ -659,13 +659,13 @@ const Contact: React.FC = () => {
       )}
 
       {isDesignMode && !isPanelVisible && (
-        <button
+        <Button
           type="button"
           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"
         >
           {translate('::Public.designer.showPanel')}
-        </button>
+        </Button>
       )}
 
       <SelectableBlock
diff --git a/ui/src/views/public/Services.tsx b/ui/src/views/public/Services.tsx
index efa761f..b200eeb 100644
--- a/ui/src/views/public/Services.tsx
+++ b/ui/src/views/public/Services.tsx
@@ -15,7 +15,7 @@ import DesignerDrawer from './designer/DesignerDrawer'
 import SelectableBlock from './designer/SelectableBlock'
 import { DesignerSelection } from './designer/types'
 import { useDesignerState } from './designer/useDesignerState'
-import { Notification, toast } from '@/components/ui'
+import { Button, Notification, toast } from '@/components/ui'
 
 interface ServiceCardContent {
   icon: string
@@ -905,13 +905,13 @@ const Services: React.FC = () => {
       ></Helmet>
 
       {isDesignMode && !isPanelVisible && (
-        <button
+        <Button
           type="button"
           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"
         >
           {translate('::Public.designer.showPanel')}
-        </button>
+        </Button>
       )}
 
       {/* Hero Section */}
diff --git a/ui/src/views/public/designer/DesignerDrawer.tsx b/ui/src/views/public/designer/DesignerDrawer.tsx
index 0773f06..b3cc6cc 100644
--- a/ui/src/views/public/designer/DesignerDrawer.tsx
+++ b/ui/src/views/public/designer/DesignerDrawer.tsx
@@ -72,7 +72,7 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
 
             <div className="mt-4 flex flex-wrap gap-1.5">
               {languages.map((language) => (
-                <button
+                <Button
                   key={`${language.cultureName}-${language.key}`}
                   type="button"
                   title={language.displayName}
@@ -89,7 +89,7 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
                     shape="circle"
                     src={`/img/countries/${language.cultureName}.png`}
                   />
-                </button>
+                </Button>
               ))}
             </div>
         </div>