diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index 49691e4..92bae80 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -8970,18 +8970,36 @@
             "en": "Total Components",
             "tr": "Toplam Bileşen"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.Component.TotalDescription",
+            "en": "Total number of custom React components created",
+            "tr": "Oluşturulan özel React bileşenlerinin toplam sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.Component.Active",
             "en": "Active Components",
             "tr": "Aktif Bileşenler"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.Component.ActiveDescription",
+            "en": "Total number of active custom React components",
+            "tr": "Aktif özel React bileşenlerinin toplam sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.Component.Inactive",
             "en": "Inactive Components",
             "tr": "Pasif Bileşenler"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.Component.InactiveDescription",
+            "en": "Total number of inactive custom React components",
+            "tr": "Pasif özel React bileşenlerinin toplam sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.Component.SearchPlaceholder",
@@ -16382,6 +16400,12 @@
             "en": "Total",
             "tr": "Toplam"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.Listform.ListformField.TotalDescription",
+            "en": "Total number of items",
+            "tr": "Toplam öğe sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.Listform.ListformField.TotalAmount",
@@ -17948,18 +17972,36 @@
             "en": "Total Tables",
             "tr": "Toplam Tablo"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.CrudEndpoints.TotalTablesDescription",
+            "en": "Number of total tables",
+            "tr": "Toplam tabloların sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.CrudEndpoints.EndpointInstalled",
             "en": "Endpoint Installed",
             "tr": "Endpoint Kurulu"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.CrudEndpoints.EndpointInstalledDescription",
+            "en": "Number of installed endpoints",
+            "tr": "Kurulu endpointlerin sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.CrudEndpoints.ActiveEndpoint",
             "en": "Active Endpoint",
             "tr": "Aktif Endpoint"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.CrudEndpoints.ActiveEndpointDescription",
+            "en": "Number of active endpoints",
+            "tr": "Aktif endpointlerin sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.CrudEndpoints.DataSource",
@@ -18134,24 +18176,48 @@
             "en": "Successful",
             "tr": "Başarılı"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.DynamicServices.SuccessfulDescription",
+            "en": "Number of successful services",
+            "tr": "Başarılı servislerin sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.DynamicServices.Failed",
             "en": "Failed",
             "tr": "Başarısız"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.DynamicServices.FailedDescription",
+            "en": "Number of failed services",
+            "tr": "Başarısız servislerin sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.DynamicServices.Active",
             "en": "Active",
             "tr": "Aktif"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.DynamicServices.ActiveDescription",
+            "en": "Number of active services",
+            "tr": "Aktif servislerin sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.DynamicServices.Passive",
             "en": "Passive",
             "tr": "Pasif"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.DynamicServices.PassiveDescription",
+            "en": "Number of passive services",
+            "tr": "Pasif servislerin sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.DynamicServices.SearchPlaceholder",
diff --git a/ui/src/views/developerKit/ComponentManager.tsx b/ui/src/views/developerKit/ComponentManager.tsx
index 1ea121f..07b2e3b 100644
--- a/ui/src/views/developerKit/ComponentManager.tsx
+++ b/ui/src/views/developerKit/ComponentManager.tsx
@@ -10,10 +10,8 @@ import {
   FaEyeSlash,
   FaFilter,
   FaCalendarAlt,
-  FaPuzzlePiece,
-  FaCheckCircle,
-  FaTimesCircle,
 } from 'react-icons/fa'
+import Widget from '@/components/common/Widget'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Loading } from '../../components/shared'
@@ -31,30 +29,6 @@ const ComponentManager: React.FC = () => {
   const inactiveComponents = totalComponents - activeComponents
   const { translate } = useLocalization()
 
-  const stats = [
-    {
-      name: translate('::App.DeveloperKit.Component.Total'),
-      value: totalComponents,
-      icon: FaPuzzlePiece,
-      color: 'text-purple-600',
-      bgColor: 'bg-purple-100',
-    },
-    {
-      name: translate('::App.DeveloperKit.Component.Active'),
-      value: activeComponents,
-      icon: FaCheckCircle,
-      color: 'text-emerald-600',
-      bgColor: 'bg-emerald-100',
-    },
-    {
-      name: translate('::App.DeveloperKit.Component.Inactive'),
-      value: inactiveComponents,
-      icon: FaTimesCircle,
-      color: 'text-slate-600',
-      bgColor: 'bg-slate-100',
-    },
-  ]
-
   const filteredComponents = components?.filter((component) => {
     const matchesSearch =
       component.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -98,19 +72,30 @@ const ComponentManager: React.FC = () => {
       ></Helmet>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-2 mb-4">
-        {stats.map((stat, index) => (
-          <div key={index} className="bg-white rounded-lg border border-slate-200 p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-slate-600 mb-1">{stat.name}</p>
-                <p className="text-3xl font-bold text-slate-900">{stat.value}</p>
-              </div>
-              <div className={`p-3 rounded-lg ${stat.bgColor}`}>
-                <stat.icon className={`w-6 h-6 ${stat.color}`} />
-              </div>
-            </div>
-          </div>
-        ))}
+        <Widget
+          title={translate('::App.DeveloperKit.Component.Total')}
+          value={totalComponents}
+          color="purple"
+          icon="FaPuzzlePiece"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.Component.TotalDescription')}
+        />
+        <Widget
+          title={translate('::App.DeveloperKit.Component.Active')}
+          value={activeComponents}
+          color="green"
+          icon="FaCheckCircle"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.Component.ActiveDescription')}
+        />
+        <Widget
+          title={translate('::App.DeveloperKit.Component.Inactive')}
+          value={inactiveComponents}
+          color="gray"
+          icon="FaTimesCircle"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.Component.InactiveDescription')}
+        />
       </div>
 
       {/* Filters */}
diff --git a/ui/src/views/developerKit/CrudEndpointManager.tsx b/ui/src/views/developerKit/CrudEndpointManager.tsx
index aa3f5e1..f679a92 100644
--- a/ui/src/views/developerKit/CrudEndpointManager.tsx
+++ b/ui/src/views/developerKit/CrudEndpointManager.tsx
@@ -19,6 +19,7 @@ import {
   FaServer,
 } from 'react-icons/fa'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Widget from '@/components/common/Widget'
 import { getDataSources } from '@/services/data-source.service'
 import { sqlObjectManagerService } from '@/services/sql-query-manager.service'
 import { developerKitService } from '@/services/developerKit.service'
@@ -325,50 +326,38 @@ const CrudEndpointManager: React.FC = () => {
 
       {/* Stats Row */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-2">
-        <div className="bg-white rounded-lg border border-slate-200 p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-slate-600 mb-1">{translate('::App.DeveloperKit.CrudEndpoints.TotalTables')}</p>
-              <p className="text-3xl font-bold text-slate-900">{dbTables.length}</p>
-            </div>
-            <div className="p-3 rounded-lg bg-blue-100">
-              <FaDatabase className="w-6 h-6 text-blue-600" />
-            </div>
-          </div>
-        </div>
-        <div className="bg-white rounded-lg border border-slate-200 p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-slate-600 mb-1">{translate('::App.DeveloperKit.CrudEndpoints.EndpointInstalled')}</p>
-              <p className="text-3xl font-bold text-slate-900">{tablesWithEndpoints}</p>
-            </div>
-            <div className="p-3 rounded-lg bg-green-100">
-              <FaCheckCircle className="w-6 h-6 text-green-600" />
-            </div>
-          </div>
-        </div>
-        <div className="bg-white rounded-lg border border-slate-200 p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-slate-600 mb-1">{translate('::App.DeveloperKit.CrudEndpoints.ActiveEndpoint')}</p>
-              <p className="text-3xl font-bold text-slate-900">{totalActiveEndpoints}</p>
-            </div>
-            <div className="p-3 rounded-lg bg-emerald-100">
-              <FaBolt className="w-6 h-6 text-emerald-600" />
-            </div>
-          </div>
-        </div>
-        <div className="bg-white rounded-lg border border-slate-200 p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-slate-600 mb-1">{translate('::App.DeveloperKit.CrudEndpoints.DataSource')}</p>
-              <p className="text-3xl font-bold text-slate-900">{dataSources.length}</p>
-            </div>
-            <div className="p-3 rounded-lg bg-purple-100">
-              <FaServer className="w-6 h-6 text-purple-600" />
-            </div>
-          </div>
-        </div>
+        <Widget
+          title={translate('::App.DeveloperKit.CrudEndpoints.TotalTables')}
+          value={dbTables.length}
+          color="blue"
+          icon="FaDatabase"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.CrudEndpoints.TotalTablesDescription')}
+        />
+        <Widget
+          title={translate('::App.DeveloperKit.CrudEndpoints.EndpointInstalled')}
+          value={tablesWithEndpoints}
+          color="green"
+          icon="FaCheckCircle"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.CrudEndpoints.EndpointInstalledDescription')}
+        />
+        <Widget
+          title={translate('::App.DeveloperKit.CrudEndpoints.ActiveEndpoint')}
+          value={totalActiveEndpoints}
+          color="teal"
+          icon="FaBolt"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.CrudEndpoints.ActiveEndpointDescription')}  
+        />
+        <Widget
+          title={translate('::App.DeveloperKit.CrudEndpoints.DataSource')}
+          value={dataSources.length}
+          color="purple"
+          icon="FaServer"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.CrudEndpoints.DataSourceDescription')}
+        />
       </div>
 
       {/* Main two-panel layout */}
diff --git a/ui/src/views/developerKit/DynamicServiceManager.tsx b/ui/src/views/developerKit/DynamicServiceManager.tsx
index 8118505..791158f 100644
--- a/ui/src/views/developerKit/DynamicServiceManager.tsx
+++ b/ui/src/views/developerKit/DynamicServiceManager.tsx
@@ -5,16 +5,13 @@ import {
   FaSearch,
   FaRegEdit,
   FaTrashAlt,
-  FaCheckCircle,
-  FaTimesCircle,
   FaFilter,
   FaCalendarAlt,
   FaCode,
   FaSpinner,
   FaExternalLinkAlt,
-  FaArrowDown,
-  FaArrowUp,
 } from 'react-icons/fa'
+import Widget from '@/components/common/Widget'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { dynamicServiceService, type DynamicServiceDto } from '@/services/dynamicService.service'
 import { Helmet } from 'react-helmet'
@@ -61,44 +58,6 @@ const DynamicServiceManager: React.FC = () => {
   const activeServices = services.filter((s) => s.isActive).length
   const inactiveServices = services.filter((s) => !s.isActive).length
 
-  const stats = [
-    {
-      name: translate('::App.Listform.ListformField.Total'),
-      value: totalServices,
-      icon: FaCode,
-      color: 'text-purple-600',
-      bgColor: 'bg-purple-100',
-    },
-    {
-      name: translate('::App.DeveloperKit.DynamicServices.Successful'),
-      value: successServices,
-      icon: FaCheckCircle,
-      color: 'text-emerald-600',
-      bgColor: 'bg-emerald-100',
-    },
-    {
-      name: translate('::App.DeveloperKit.DynamicServices.Failed'),
-      value: failedServices,
-      icon: FaTimesCircle,
-      color: 'text-red-600',
-      bgColor: 'bg-red-100',
-    },
-    {
-      name: translate('::App.DeveloperKit.DynamicServices.Active'),
-      value: activeServices,
-      icon: FaArrowUp,
-      color: 'text-emerald-600',
-      bgColor: 'bg-blue-300',
-    },
-    {
-      name: translate('::App.DeveloperKit.DynamicServices.Passive'),
-      value: inactiveServices,
-      icon: FaArrowDown,
-      color: 'text-emerald-600',
-      bgColor: 'bg-green-400',
-    },
-  ]
-
   const filteredServices = services.filter((service) => {
     const matchesSearch =
       service.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -127,19 +86,46 @@ const DynamicServiceManager: React.FC = () => {
 
       {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4 mt-2 mb-4">
-        {stats.map((stat, index) => (
-          <div key={index} className="bg-white rounded-lg border border-slate-200 p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-slate-600 mb-1">{stat.name}</p>
-                <p className="text-3xl font-bold text-slate-900">{stat.value}</p>
-              </div>
-              <div className={`p-3 rounded-lg ${stat.bgColor}`}>
-                <stat.icon className={`w-6 h-6 ${stat.color}`} />
-              </div>
-            </div>
-          </div>
-        ))}
+        <Widget
+          title={translate('::App.Listform.ListformField.Total')}
+          value={totalServices}
+          color="purple"
+          icon="FaCode"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.DynamicServices.TotalDescription')}
+        />
+        <Widget
+          title={translate('::App.DeveloperKit.DynamicServices.Successful')}
+          value={successServices}
+          color="green"
+          icon="FaCheckCircle"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.DynamicServices.SuccessfulDescription')}
+        />
+        <Widget
+          title={translate('::App.DeveloperKit.DynamicServices.Failed')}
+          value={failedServices}
+          color="red"
+          icon="FaTimesCircle"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.DynamicServices.FailedDescription')}
+        />
+        <Widget
+          title={translate('::App.DeveloperKit.DynamicServices.Active')}
+          value={activeServices}
+          color="teal"
+          icon="FaArrowUp"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.DynamicServices.ActiveDescription')}
+        />
+        <Widget
+          title={translate('::App.DeveloperKit.DynamicServices.Passive')}
+          value={inactiveServices}
+          color="gray"
+          icon="FaArrowDown"
+          valueClassName="text-3xl"
+          subTitle={translate('::App.DeveloperKit.DynamicServices.PassiveDescription')}
+        />
       </div>
 
       {/* Toolbar */}