diff --git a/ui/dev-dist/sw.js b/ui/dev-dist/sw.js
index 65e34dd6..d9ba6e78 100644
--- a/ui/dev-dist/sw.js
+++ b/ui/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.271iot081v"
+    "revision": "0.tihrrtufp5o"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/ui/src/components/layouts/SimpleLayout.tsx b/ui/src/components/layouts/SimpleLayout.tsx
index ff6a8878..5a56c9b7 100644
--- a/ui/src/components/layouts/SimpleLayout.tsx
+++ b/ui/src/components/layouts/SimpleLayout.tsx
@@ -24,9 +24,9 @@ const HeaderActionsEnd = () => {
     <>
       <Search />
       <AiAssistant />
-      <LanguageSelector />
       <Notification />
       <SidePanel />
+      <LanguageSelector />
       <UserDropdown hoverable={false} />
     </>
   )
diff --git a/ui/src/components/template/AiAssistant.tsx b/ui/src/components/template/AiAssistant.tsx
index 6ffea875..1a0b7e31 100644
--- a/ui/src/components/template/AiAssistant.tsx
+++ b/ui/src/components/template/AiAssistant.tsx
@@ -2,7 +2,7 @@ import Tooltip from '@/components/ui/Tooltip'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { usePermission } from '@/utils/hooks/usePermission'
-import { FaHeadset } from 'react-icons/fa';
+import { FcAssistant, FcHeadset } from 'react-icons/fc'
 import { useNavigate } from 'react-router-dom'
 
 const AiAssistant = () => {
@@ -15,18 +15,16 @@ const AiAssistant = () => {
   if (!canViewAi) {
     return null
   }
-  
+
   return (
-    <>
-      <Tooltip title={translate('::Abp.Identity.Ai')}>
-        <div
-          onClick={() => navigate(ROUTES_ENUM.protected.admin.ai)}
-          className="flex items-center justify-center w-9 h-9 m-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200"
-        >
-          <FaHeadset size={28} />
-        </div>
-      </Tooltip>
-    </>
+    <Tooltip title={translate('::Abp.Identity.Ai')}>
+      <div
+        onClick={() => navigate(ROUTES_ENUM.protected.admin.ai)}
+        className="flex items-center justify-center w-9 h-9 m-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200"
+      >
+        <FcHeadset size={24} />
+      </div>
+    </Tooltip>
   )
 }
 
diff --git a/ui/src/components/template/LanguageSelector.tsx b/ui/src/components/template/LanguageSelector.tsx
index afce61eb..5363d86c 100644
--- a/ui/src/components/template/LanguageSelector.tsx
+++ b/ui/src/components/template/LanguageSelector.tsx
@@ -10,6 +10,8 @@ import { FaCheck } from 'react-icons/fa'
 import type { CommonProps } from '@/@types/common'
 import appConfig from '@/configs/app.config'
 import { dateLocales } from '@/constants/dateLocales.constant'
+import { Tooltip } from '../ui'
+import { useLocalization } from '@/utils/hooks/useLocalization'
 
 const _LanguageSelector = ({ className }: CommonProps) => {
   const [loading, setLoading] = useState(false)
@@ -23,6 +25,8 @@ const _LanguageSelector = ({ className }: CommonProps) => {
     return languageList?.find((lang) => lang.cultureName === currentLang)?.cultureName
   }, [currentLang, languageList])
 
+  const { translate } = useLocalization()
+  
   const selectedLanguage = (
     <div className={classNames(className, 'flex items-center')}>
       {loading ? (
@@ -58,26 +62,28 @@ const _LanguageSelector = ({ className }: CommonProps) => {
   }
 
   return (
-    <Dropdown renderTitle={selectedLanguage} placement="bottom-end">
-      {languageList?.map((lang) => (
-        <Dropdown.Item
-          key={lang.cultureName}
-          className="justify-between"
-          eventKey={lang.cultureName}
-          onClick={() => onLanguageSelect(lang.cultureName)}
-        >
-          <span className="flex items-center">
-            <Avatar
-              size={18}
-              shape="circle"
-              src={`/img/countries/${lang.cultureName ?? 'default'}.png`}
-            />
-            <span className="ltr:ml-2 rtl:mr-2">{lang.displayName}</span>
-          </span>
-          {currentLang === lang.cultureName && <FaCheck className="text-emerald-500 text-lg" />}
-        </Dropdown.Item>
-      ))}
-    </Dropdown>
+    <Tooltip title={translate('::App.Languages.Language')}>
+      <Dropdown renderTitle={selectedLanguage} placement="bottom-end">
+        {languageList?.map((lang) => (
+          <Dropdown.Item
+            key={lang.cultureName}
+            className="justify-between"
+            eventKey={lang.cultureName}
+            onClick={() => onLanguageSelect(lang.cultureName)}
+          >
+            <span className="flex items-center">
+              <Avatar
+                size={18}
+                shape="circle"
+                src={`/img/countries/${lang.cultureName ?? 'default'}.png`}
+              />
+              <span className="ltr:ml-2 rtl:mr-2">{lang.displayName}</span>
+            </span>
+            {currentLang === lang.cultureName && <FaCheck className="text-emerald-500 text-lg" />}
+          </Dropdown.Item>
+        ))}
+      </Dropdown>
+    </Tooltip>
   )
 }
 
diff --git a/ui/src/components/template/Notification.tsx b/ui/src/components/template/Notification.tsx
index 9364c637..e747e4be 100644
--- a/ui/src/components/template/Notification.tsx
+++ b/ui/src/components/template/Notification.tsx
@@ -19,9 +19,10 @@ import classNames from 'classnames'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { FaBell, FaEnvelopeOpen } from 'react-icons/fa';
+import { FaEnvelopeOpen } from 'react-icons/fa'
 import { Link } from 'react-router-dom'
 import { Notification as Notify, toast } from '../ui'
+import { FcAdvertising } from 'react-icons/fc'
 
 dayjs.extend(relativeTime)
 
@@ -57,10 +58,10 @@ const NotificationToggle = ({
           content={unreadCount}
           innerClass="py-0 px-1"
         >
-          <FaBell />
+          <FcAdvertising />
         </Badge>
       ) : (
-        <FaBell />
+        <FcAdvertising />
       )}
     </div>
   )
@@ -250,88 +251,90 @@ const _Notification = ({ className }: { className?: string }) => {
   }, [desktopNotificationList])
 
   return (
-    <Dropdown
-      renderTitle={
-        <NotificationToggle unreadCount={unreadNotificationCount} className={className} />
-      }
-      menuClass="p-0 min-w-[280px] md:min-w-[340px]"
-      placement={larger.md ? 'bottom-end' : 'bottom-center'}
-      onOpen={onNotificationOpen}
-    >
-      <Dropdown.Item variant="header">
-        <div className="border-b border-gray-200 dark:border-gray-600 px-4 py-2 flex items-center justify-between">
-          <h6>{translate('::Abp.Identity.ActivityLogs.Notifications')}</h6>
-          <Tooltip title={translate('::Abp.Identity.ActivityLogs.MarkAllRead')}>
-            <Button
-              variant="plain"
-              shape="circle"
-              size="sm"
-              icon={<FaEnvelopeOpen className="text-xl" />}
-              onClick={onMarkAllAsRead}
-            />
-          </Tooltip>
-        </div>
-      </Dropdown.Item>
-      <div className={classNames('overflow-y-auto', notificationHeight)}>
-        <ScrollBar direction={direction}>
-          {notificationList.length > 0 &&
-            notificationList.map((item, index) => (
-              <div
-                key={item.id}
-                className={`relative flex px-4 py-4 cursor-pointer hover:bg-gray-50 active:bg-gray-100 dark:hover:bg-black dark:hover:bg-opacity-20  ${
-                  !isLastChild(notificationList, index)
-                    ? 'border-b border-gray-200 dark:border-gray-600'
-                    : ''
-                }`}
-                onClick={() => onMarkAsRead(item.id)}
-              >
-                <div>{notificationTypeAvatar(item.creatorId, item.tenantId)}</div>
-                <div className="ltr:ml-3 rtl:mr-3">
-                  <div>
-                    {item.notificationType && (
-                      <span className="font-semibold heading-text">{item.notificationType} </span>
-                    )}
-                    <div>{item.message}</div>
+    <Tooltip title={translate('::App.Notifications')}>
+      <Dropdown
+        renderTitle={
+          <NotificationToggle unreadCount={unreadNotificationCount} className={className} />
+        }
+        menuClass="p-0 min-w-[280px] md:min-w-[340px]"
+        placement={larger.md ? 'bottom-end' : 'bottom-center'}
+        onOpen={onNotificationOpen}
+      >
+        <Dropdown.Item variant="header">
+          <div className="border-b border-gray-200 dark:border-gray-600 px-4 py-2 flex items-center justify-between">
+            <h6>{translate('::Abp.Identity.ActivityLogs.Notifications')}</h6>
+            <Tooltip title={translate('::Abp.Identity.ActivityLogs.MarkAllRead')}>
+              <Button
+                variant="plain"
+                shape="circle"
+                size="sm"
+                icon={<FaEnvelopeOpen className="text-xl" />}
+                onClick={onMarkAllAsRead}
+              />
+            </Tooltip>
+          </div>
+        </Dropdown.Item>
+        <div className={classNames('overflow-y-auto', notificationHeight)}>
+          <ScrollBar direction={direction}>
+            {notificationList.length > 0 &&
+              notificationList.map((item, index) => (
+                <div
+                  key={item.id}
+                  className={`relative flex px-4 py-4 cursor-pointer hover:bg-gray-50 active:bg-gray-100 dark:hover:bg-black dark:hover:bg-opacity-20  ${
+                    !isLastChild(notificationList, index)
+                      ? 'border-b border-gray-200 dark:border-gray-600'
+                      : ''
+                  }`}
+                  onClick={() => onMarkAsRead(item.id)}
+                >
+                  <div>{notificationTypeAvatar(item.creatorId, item.tenantId)}</div>
+                  <div className="ltr:ml-3 rtl:mr-3">
+                    <div>
+                      {item.notificationType && (
+                        <span className="font-semibold heading-text">{item.notificationType} </span>
+                      )}
+                      <div>{item.message}</div>
+                    </div>
+                    <span className="text-xs">{dayjs(item.date).fromNow()}</span>
                   </div>
-                  <span className="text-xs">{dayjs(item.date).fromNow()}</span>
+                  <Badge
+                    className="absolute top-4 ltr:right-4 rtl:left-4 mt-1.5"
+                    innerClass={`${item.readed ? 'bg-gray-300' : bgTheme} `}
+                  />
                 </div>
-                <Badge
-                  className="absolute top-4 ltr:right-4 rtl:left-4 mt-1.5"
-                  innerClass={`${item.readed ? 'bg-gray-300' : bgTheme} `}
-                />
+              ))}
+            {loading && (
+              <div className={classNames('flex items-center justify-center', notificationHeight)}>
+                <Spinner size={40} />
               </div>
-            ))}
-          {loading && (
-            <div className={classNames('flex items-center justify-center', notificationHeight)}>
-              <Spinner size={40} />
-            </div>
-          )}
-          {noResult && (
-            <div className={classNames('flex items-center justify-center', notificationHeight)}>
-              <div className="text-center">
-                <img
-                  className="mx-auto mb-2 max-w-[150px]"
-                  src="/img/others/no-notification.png"
-                  alt="no-notification"
-                />
-                <h6 className="font-semibold">No notifications!</h6>
-                <p className="mt-1">Please Try again later</p>
+            )}
+            {noResult && (
+              <div className={classNames('flex items-center justify-center', notificationHeight)}>
+                <div className="text-center">
+                  <img
+                    className="mx-auto mb-2 max-w-[150px]"
+                    src="/img/others/no-notification.png"
+                    alt="no-notification"
+                  />
+                  <h6 className="font-semibold">No notifications!</h6>
+                  <p className="mt-1">Please Try again later</p>
+                </div>
               </div>
-            </div>
-          )}
-        </ScrollBar>
-      </div>
-      <Dropdown.Item variant="header">
-        <div className="flex justify-center border-t border-gray-200 dark:border-gray-600 px-4 py-2">
-          <Link
-            to={ROUTES_ENUM.protected.admin.activityLog}
-            className="font-semibold cursor-pointer p-2 px-3 text-gray-600 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
-          >
-            {translate('::Abp.Identity.ActivityLogs.ViewAllActivity')}
-          </Link>
+            )}
+          </ScrollBar>
         </div>
-      </Dropdown.Item>
-    </Dropdown>
+        <Dropdown.Item variant="header">
+          <div className="flex justify-center border-t border-gray-200 dark:border-gray-600 px-4 py-2">
+            <Link
+              to={ROUTES_ENUM.protected.admin.activityLog}
+              className="font-semibold cursor-pointer p-2 px-3 text-gray-600 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
+            >
+              {translate('::Abp.Identity.ActivityLogs.ViewAllActivity')}
+            </Link>
+          </div>
+        </Dropdown.Item>
+      </Dropdown>
+    </Tooltip>
   )
 }
 
diff --git a/ui/src/components/template/Search.tsx b/ui/src/components/template/Search.tsx
index 39df0596..043a57d9 100644
--- a/ui/src/components/template/Search.tsx
+++ b/ui/src/components/template/Search.tsx
@@ -6,12 +6,13 @@ import useThemeClass from '@/utils/hooks/useThemeClass'
 import classNames from 'classnames'
 import { useEffect, useRef, useState } from 'react'
 import Highlighter from 'react-highlight-words'
-import { FaChevronRight, FaSearch } from 'react-icons/fa';
+import { FaChevronRight, FaSearch } from 'react-icons/fa'
 import { Link } from 'react-router-dom'
 import { PermissionCheck } from '../shared'
-import { Badge, Checkbox, Pagination } from '../ui'
+import { Badge, Checkbox, Pagination, Tooltip } from '../ui'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { getSearch, getSystems } from '@/services/global-search.service'
+import { FcSearch } from 'react-icons/fc'
 
 type SearchData = {
   title: string
@@ -173,9 +174,12 @@ const _Search = ({ className }: { className?: string }) => {
 
   return (
     <PermissionCheck permissions={[GLOBAL_SEARCH]}>
-      <div className={classNames(className, 'text-2xl')} onClick={handleSearchOpen}>
-        <FaSearch />
-      </div>
+      <Tooltip title={translate('::App.Search')}>
+        <div className={classNames(className, 'text-2xl')} onClick={handleSearchOpen}>
+          <FcSearch />
+        </div>
+      </Tooltip>
+
       <Dialog
         contentClassName="p-0"
         isOpen={searchDialogOpen}
@@ -193,7 +197,7 @@ const _Search = ({ className }: { className?: string }) => {
                 onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
               />
             </div>
-            <Button size="xs" onClick={handleSearch}>
+            <Button size="sm" onClick={handleSearch}>
               <FaSearch />
             </Button>
           </div>
diff --git a/ui/src/components/template/SidePanel/SidePanel.tsx b/ui/src/components/template/SidePanel/SidePanel.tsx
index aeed9439..2973cb84 100644
--- a/ui/src/components/template/SidePanel/SidePanel.tsx
+++ b/ui/src/components/template/SidePanel/SidePanel.tsx
@@ -1,18 +1,19 @@
 import classNames from 'classnames'
 import Drawer from '@/components/ui/Drawer'
-import { FaCog } from 'react-icons/fa';
 import SidePanelContent, { SidePanelContentProps } from './SidePanelContent'
 import withHeaderItem from '@/utils/hoc/withHeaderItem'
 import { useStoreState, useStoreActions } from '@/store'
 import type { CommonProps } from '@/@types/common'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import { FcEngineering } from 'react-icons/fc'
+import { Tooltip } from '@/components/ui'
 
 type SidePanelProps = SidePanelContentProps & CommonProps
 
 const _SidePanel = (props: SidePanelProps) => {
   const { setPanelExpand } = useStoreActions((actions) => actions.theme)
 
-  const {translate } = useLocalization()
+  const { translate } = useLocalization()
 
   const { className, ...rest } = props
 
@@ -34,9 +35,11 @@ const _SidePanel = (props: SidePanelProps) => {
 
   return (
     <>
-      <div className={classNames('text-2xl', className)} onClick={openPanel} {...rest}>
-        <FaCog />
-      </div>
+      <Tooltip title={translate('::SidePanel.Title')}>
+        <div className={classNames('text-2xl', className)} onClick={openPanel} {...rest}>
+          <FcEngineering />
+        </div>
+      </Tooltip>
       <Drawer
         title={translate('::SidePanel.Title')}
         isOpen={panelExpand}
diff --git a/ui/src/components/template/UserDropdown.tsx b/ui/src/components/template/UserDropdown.tsx
index 43447af6..eb28d9c4 100644
--- a/ui/src/components/template/UserDropdown.tsx
+++ b/ui/src/components/template/UserDropdown.tsx
@@ -6,10 +6,11 @@ import withHeaderItem from '@/utils/hoc/withHeaderItem'
 import useAuth from '@/utils/hooks/useAuth'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import classNames from 'classnames'
-import { FaChartLine } from 'react-icons/fa';
-import { FaSignOutAlt, FaUser } from 'react-icons/fa';
+import { FaChartLine } from 'react-icons/fa'
+import { FaSignOutAlt, FaUser } from 'react-icons/fa'
 import { Link } from 'react-router-dom'
 import { Avatar } from '../ui'
+import { FcNext, FcNfcSign, FcPodiumWithSpeaker, FcVoicePresentation } from 'react-icons/fc'
 
 type DropdownList = {
   label: string
@@ -27,12 +28,12 @@ const _UserDropdown = ({ className }: CommonProps) => {
     {
       label: translate('::Abp.Identity.Profile'),
       path: ROUTES_ENUM.protected.admin.profile.general,
-      icon: <FaUser />,
+      icon: <FcVoicePresentation />,
     },
     {
       label: translate('::Abp.Identity.ActivityLogs'),
       path: ROUTES_ENUM.protected.admin.activityLog,
-      icon: <FaChartLine />,
+      icon: <FcNfcSign />,
     },
   ]
 
@@ -48,37 +49,35 @@ const _UserDropdown = ({ className }: CommonProps) => {
   )
 
   return (
-    <div>
-      <Dropdown menuStyle={{ minWidth: 240 }} renderTitle={UserAvatar} placement="bottom-end">
-        <Dropdown.Item variant="header">
-          <div className="py-2 px-3 flex items-center gap-2">
-            <Avatar shape="circle" src={avatar} alt="avatar" />
-            <div>
-              <div className="font-bold text-gray-900 dark:text-gray-100">{name}</div>
-              <div className="text-xs">{email}</div>
-            </div>
+    <Dropdown menuStyle={{ minWidth: 240 }} renderTitle={UserAvatar} placement="bottom-end">
+      <Dropdown.Item variant="header">
+        <div className="py-2 px-3 flex items-center gap-2">
+          <Avatar shape="circle" src={avatar} alt="avatar" />
+          <div>
+            <div className="font-bold text-gray-900 dark:text-gray-100">{name}</div>
+            <div className="text-xs">{email}</div>
           </div>
+        </div>
+      </Dropdown.Item>
+      <Dropdown.Item variant="divider" />
+      {dropdownItemList.map((item) => (
+        <Dropdown.Item key={item.label} eventKey={item.label} className="mb-1 px-0">
+          <Link className="flex h-full w-full px-2" to={item.path}>
+            <span className="flex gap-2 items-center w-full">
+              <span className="text-xl opacity-50">{item.icon}</span>
+              <span>{item.label}</span>
+            </span>
+          </Link>
         </Dropdown.Item>
-        <Dropdown.Item variant="divider" />
-        {dropdownItemList.map((item) => (
-          <Dropdown.Item key={item.label} eventKey={item.label} className="mb-1 px-0">
-            <Link className="flex h-full w-full px-2" to={item.path}>
-              <span className="flex gap-2 items-center w-full">
-                <span className="text-xl opacity-50">{item.icon}</span>
-                <span>{item.label}</span>
-              </span>
-            </Link>
-          </Dropdown.Item>
-        ))}
-        {/* <Dropdown.Item variant="divider" /> */}
-        <Dropdown.Item eventKey="Sign Out" className="gap-2" onClick={signOut}>
-          <span className="text-xl opacity-50">
-            <FaSignOutAlt />
-          </span>
-          <span>{translate('::Abp.Identity.SignOut')} </span>
-        </Dropdown.Item>
-      </Dropdown>
-    </div>
+      ))}
+      {/* <Dropdown.Item variant="divider" /> */}
+      <Dropdown.Item eventKey="Sign Out" className="mb-1 px-2" onClick={signOut}>
+        <span className="text-xl opacity-50">
+          <FcNext />
+        </span>
+        <span>{translate('::Abp.Identity.SignOut')} </span>
+      </Dropdown.Item>
+    </Dropdown>
   )
 }
 
diff --git a/ui/src/components/ui/Menu/MenuCollapse.tsx b/ui/src/components/ui/Menu/MenuCollapse.tsx
index 16f0cc0b..dce32324 100644
--- a/ui/src/components/ui/Menu/MenuCollapse.tsx
+++ b/ui/src/components/ui/Menu/MenuCollapse.tsx
@@ -52,7 +52,7 @@ const MenuCollapse = (props: MenuCollapseProps) => {
       <div className={menuCollapseItemClass} role="presentation" onClick={toggleCollapse}>
         <span className="flex items-center">{label}</span>
         <motion.span
-          className="text-lg"
+          className="text-md"
           initial={{ transform: 'rotate(0deg)' }}
           animate={{
             transform: isExpanded ? 'rotate(-180deg)' : 'rotate(0deg)',
diff --git a/ui/src/components/ui/MenuItem/index.tsx b/ui/src/components/ui/MenuItem/index.tsx
index 1fc6feca..c9856a7a 100644
--- a/ui/src/components/ui/MenuItem/index.tsx
+++ b/ui/src/components/ui/MenuItem/index.tsx
@@ -23,7 +23,7 @@ const MenuItem = forwardRef<HTMLElement, MenuItemProps>((props, ref) => {
     disabled,
     eventKey,
     isActive,
-    menuItemHeight = 35,
+    menuItemHeight = 30,
     onSelect,
     style,
     variant = 'light',