diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index 96ae254..49691e4 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -3726,23 +3726,47 @@
             "en": "Total Rooms",
             "tr": "Toplam Oda"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.Videoroom.TotalRoomsDescription",
+            "en": "Total number of rooms",
+            "tr": "Toplam oda sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.Videoroom.ActiveRooms",
             "en": "Active Rooms",
             "tr": "Aktif Oda"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.Videoroom.ActiveRoomDescription",
+            "en": "Rooms with started sessions",
+            "tr": "Oturumu başlatılmış odalar"
+        },
         {
             "resourceName": "Platform",
             "key": "App.Videoroom.OpenRooms",
             "en": "Open Rooms",
             "tr": "Katılıma Açık"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.Videoroom.OpenRoomsDescription",
+            "en": "Rooms where participants can join",
+            "tr": "Katılımcıların katılabileceği odalar"
+        },
         {
             "resourceName": "Platform",
             "key": "App.Videoroom.PassiveRooms",
             "en": "Passive Rooms",
-            "tr": "Pasif Oda"
+            "tr": "Pasif Odalar"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Videoroom.PassiveRoomsDescription",
+            "en": "Rooms that are not currently active",
+            "tr": "Şu anda aktif olmayan odalar"
         },
         {
             "resourceName": "Platform",
@@ -3750,6 +3774,12 @@
             "en": "Total Participants",
             "tr": "Toplam Katılımcı"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.Videoroom.TotalParticipantsDescription",
+            "en": "Total number of participants",
+            "tr": "Toplam katılımcı sayısı"
+        },
         {
             "resourceName": "Platform",
             "key": "App.Videoroom.RoomSettings",
diff --git a/ui/src/components/common/Widget.tsx b/ui/src/components/common/Widget.tsx
index 1129f6c..67e8d96 100644
--- a/ui/src/components/common/Widget.tsx
+++ b/ui/src/components/common/Widget.tsx
@@ -77,7 +77,7 @@ export default function Widget({
     >
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-sm font-semibold text-gray-600 uppercase tracking-wide">
+          <p className="text-sm font-semibold text-gray-600 tracking-wide">
             {title}
           </p>
           <p
diff --git a/ui/src/views/admin/files/FileManager.tsx b/ui/src/views/admin/files/FileManager.tsx
index fdc362c..289467f 100644
--- a/ui/src/views/admin/files/FileManager.tsx
+++ b/ui/src/views/admin/files/FileManager.tsx
@@ -956,7 +956,7 @@ const FileManager = () => {
 
             {/* Sort */}
             <Select
-              size="sm"
+              size="xs"
               options={[
                 { value: 'name-asc', label: 'Name (A-Z)' },
                 { value: 'name-desc', label: 'Name (Z-A)' },
@@ -990,30 +990,21 @@ const FileManager = () => {
                   setFilters((prev) => ({ ...prev, sortBy, sortOrder }))
                 }
               }}
-              className="min-w-32 sm:min-w-36 flex-shrink-0"
             />
 
             {/* View Mode */}
-            <div className="flex border border-gray-300 dark:border-gray-600 rounded flex-shrink-0">
+            <div className="flex gap-1 ml-auto">
               <Button
-                variant="plain"
                 size="sm"
                 icon={<FaTh />}
-                className={classNames(
-                  'rounded-r-none border-r ',
-                  viewMode === 'grid' && 'bg-blue-50 dark:bg-blue-900/20 text-blue-600',
-                )}
+                variant={viewMode === 'grid' ? 'solid' : 'default'}
                 onClick={() => setViewMode('grid')}
                 title="Grid view"
               />
               <Button
-                variant="plain"
                 size="sm"
                 icon={<FaList />}
-                className={classNames(
-                  'rounded-l-none ',
-                  viewMode === 'list' && 'bg-blue-50 dark:bg-blue-900/20 text-blue-600',
-                )}
+                variant={viewMode === 'list' ? 'solid' : 'default'}
                 onClick={() => setViewMode('list')}
                 title="List view"
               />
diff --git a/ui/src/views/admin/videoroom/RoomList.tsx b/ui/src/views/admin/videoroom/RoomList.tsx
index a53f74c..926dbee 100644
--- a/ui/src/views/admin/videoroom/RoomList.tsx
+++ b/ui/src/views/admin/videoroom/RoomList.tsx
@@ -19,6 +19,7 @@ import {
 import { useStoreState } from '@/store/store'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { Container } from '@/components/shared'
+import Widget from '@/components/common/Widget'
 import {
   createVideoroom,
   deleteVideoroom,
@@ -307,112 +308,47 @@ const RoomList: React.FC = () => {
         </div>
 
         {/* Stats Cards */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 sm:gap-6 mt-4 mb-3">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="bg-white rounded-lg shadow-md p-4 sm:p-6"
-          >
-            <div className="flex items-center">
-              <div className="p-2 sm:p-3 bg-blue-100 rounded-full">
-                <FaCalendarAlt className="text-blue-600" size={20} />
-              </div>
-              <div className="ml-3 sm:ml-4">
-                <p className="text-xs sm:text-sm font-medium text-gray-600">
-                  {translate('::App.Videoroom.TotalRooms')}
-                </p>
-                <p className="text-xl sm:text-2xl font-bold text-gray-900">
-                  {widgets().totalCount}{' '}
-                </p>
-              </div>
-            </div>
-          </motion.div>
-
-          {/* Aktif Sınıf */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.1 }}
-            className="bg-white rounded-lg shadow-md p-4 sm:p-6"
-          >
-            <div className="flex items-center">
-              <div className="p-2 sm:p-3 bg-green-100 rounded-full">
-                <FaPlay className="text-green-600" size={20} />
-              </div>
-              <div className="ml-3 sm:ml-4">
-                <p className="text-xs sm:text-sm font-medium text-gray-600">
-                  {translate('::App.Videoroom.ActiveRooms')}
-                </p>
-                <p className="text-xl sm:text-2xl font-bold text-gray-900">
-                  {widgets().activeCount}
-                </p>
-              </div>
-            </div>
-          </motion.div>
-
-          {/* Katılıma Açık */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.15 }}
-            className="bg-white rounded-lg shadow-md p-4 sm:p-6"
-          >
-            <div className="flex items-center">
-              <div className="p-2 sm:p-3 bg-blue-100 rounded-full">
-                <FaDoorOpen className="text-blue-600" size={20} />
-              </div>
-              <div className="ml-3 sm:ml-4">
-                <p className="text-xs sm:text-sm font-medium text-gray-600">
-                  {translate('::App.Videoroom.OpenRooms')}
-                </p>
-                <p className="text-xl sm:text-2xl font-bold text-gray-900">{widgets().openCount}</p>
-              </div>
-            </div>
-          </motion.div>
-
-          {/* Pasif Sınıf */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-            className="bg-white rounded-lg shadow-md p-4 sm:p-6"
-          >
-            <div className="flex items-center">
-              <div className="p-2 sm:p-3 bg-gray-100 rounded-full">
-                <FaHourglassEnd className="text-gray-600" size={20} />
-              </div>
-              <div className="ml-3 sm:ml-4">
-                <p className="text-xs sm:text-sm font-medium text-gray-600">
-                  {translate('::App.Videoroom.PassiveRooms')}
-                </p>
-                <p className="text-xl sm:text-2xl font-bold text-gray-900">
-                  {widgets().passiveCount}
-                </p>
-              </div>
-            </div>
-          </motion.div>
-
-          {/* Toplam Katılımcı */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-            className="bg-white rounded-lg shadow-md p-4 sm:p-6 sm:col-span-2 lg:col-span-1"
-          >
-            <div className="flex items-center">
-              <div className="p-2 sm:p-3 bg-purple-100 rounded-full">
-                <FaUsers className="text-purple-600" size={20} />
-              </div>
-              <div className="ml-3 sm:ml-4">
-                <p className="text-xs sm:text-sm font-medium text-gray-600">
-                  {translate('::App.Videoroom.TotalParticipants')}
-                </p>
-                <p className="text-xl sm:text-2xl font-bold text-gray-900">
-                  {videoList.reduce((sum, c) => sum + c.participantCount, 0)}
-                </p>
-              </div>
-            </div>
-          </motion.div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mt-2 mb-2">
+          <Widget
+            title={translate('::App.Videoroom.TotalRooms')}
+            value={widgets().totalCount}
+            color="blue"
+            icon="FaCalendarAlt"
+            valueClassName="text-2xl"
+            subTitle={translate('::App.Videoroom.TotalRoomsDescription')}
+          />
+          <Widget
+            title={translate('::App.Videoroom.ActiveRooms')}
+            value={widgets().activeCount}
+            color="green"
+            icon="FaPlay"
+            valueClassName="text-2xl"
+            subTitle={translate('::App.Videoroom.ActiveRoomDescription')}
+          />
+          <Widget
+            title={translate('::App.Videoroom.OpenRooms')}
+            value={widgets().openCount}
+            color="indigo"
+            icon="FaDoorOpen"
+            valueClassName="text-2xl"
+            subTitle={translate('::App.Videoroom.OpenRoomsDescription')}
+          />
+          <Widget
+            title={translate('::App.Videoroom.PassiveRooms')}
+            value={widgets().passiveCount}
+            color="gray"
+            icon="FaHourglassEnd"
+            valueClassName="text-2xl"
+            subTitle={translate('::App.Videoroom.PassiveRoomsDescription')}
+          />
+          <Widget
+            title={translate('::App.Videoroom.TotalParticipants')}
+            value={videoList.reduce((sum, c) => sum + c.participantCount, 0)}
+            color="purple"
+            icon="FaUsers"
+            valueClassName="text-2xl"
+            subTitle={translate('::App.Videoroom.TotalParticipantsDescription')}
+          />
         </div>
 
         {/* Scheduled Classes */}
diff --git a/ui/src/views/list/Grid.tsx b/ui/src/views/list/Grid.tsx
index e667f36..0e2160e 100644
--- a/ui/src/views/list/Grid.tsx
+++ b/ui/src/views/list/Grid.tsx
@@ -1093,7 +1093,7 @@ const Grid = (props: GridProps) => {
 
   return (
     <>
-      <div ref={widgetGroupRef}>
+      <div ref={widgetGroupRef} className="mt-2">
         <WidgetGroup widgetGroups={gridDto?.widgets ?? []} />
       </div>
 
diff --git a/ui/src/views/shared/MenuAddDialog.tsx b/ui/src/views/shared/MenuAddDialog.tsx
index 439364f..3c0e37d 100644
--- a/ui/src/views/shared/MenuAddDialog.tsx
+++ b/ui/src/views/shared/MenuAddDialog.tsx
@@ -51,7 +51,7 @@ export function IconPickerField({ value, onChange, invalid }: IconPickerFieldPro
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
-        className={`flex items-center gap-2 w-full h-11 px-3 py-2 rounded-lg border text-sm text-left transition-colors
+        className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg border text-sm text-left transition-colors
           ${invalid ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'}
           bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:border-indigo-400`}
       >