diff --git a/packages/extension-polkagate/src/components/AccountIcons.tsx b/packages/extension-polkagate/src/components/AccountIcons.tsx
index 6e4a004ae..18de05bf9 100644
--- a/packages/extension-polkagate/src/components/AccountIcons.tsx
+++ b/packages/extension-polkagate/src/components/AccountIcons.tsx
@@ -54,7 +54,7 @@ function AccountIcons ({ address, identiconTheme, isSubId, judgements, prefix }:
           judgement={judgements}
           prefix={prefix}
           size={40}
-          value={formatted}
+          value={formatted || address}
         />
       </Grid>
       <Grid container direction='row' item justifyContent='center'>
diff --git a/packages/extension-polkagate/src/components/Identicon.tsx b/packages/extension-polkagate/src/components/Identicon.tsx
index 286a4946c..368797e85 100644
--- a/packages/extension-polkagate/src/components/Identicon.tsx
+++ b/packages/extension-polkagate/src/components/Identicon.tsx
@@ -1,8 +1,6 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
-import type { ThemeProps } from '@polkadot/extension-polkagate/types';
 import type { IconTheme } from '@polkadot/react-identicon/types';
 import type { AccountId } from '@polkadot/types/interfaces/runtime';
 
@@ -14,7 +12,7 @@ import Icon from '@polkadot/react-identicon';
 
 interface Props {
   className?: string;
-  iconTheme?: IconTheme | string;
+  iconTheme?: IconTheme;
   isSubId?: boolean;
   judgement?: RegExpMatchArray | null | undefined;
   onCopy?: () => void;
@@ -23,7 +21,7 @@ interface Props {
   value?: AccountId | string | null;
 }
 
-function Identicon({ className, iconTheme, isSubId, judgement, onCopy, prefix, size, value }: Props): React.ReactElement<Props> {
+function Identicon ({ className, iconTheme, isSubId, judgement, onCopy, prefix, size, value }: Props): React.ReactElement<Props> {
   return (
     <div style={{ position: 'relative' }}>
       <div className={className}>
@@ -70,7 +68,7 @@ function Identicon({ className, iconTheme, isSubId, judgement, onCopy, prefix, s
   );
 }
 
-export default React.memo(styled(Identicon)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Identicon)(() => `
   background: rgba(192, 192, 292, 0.25);
   border-radius: 50%;
   display: flex;
diff --git a/packages/extension-polkagate/src/components/Main.tsx b/packages/extension-polkagate/src/components/Main.tsx
index 80df317e3..5ebe56862 100644
--- a/packages/extension-polkagate/src/components/Main.tsx
+++ b/packages/extension-polkagate/src/components/Main.tsx
@@ -1,7 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
-
 
 import React from 'react';
 
@@ -10,30 +8,10 @@ interface Props {
   className?: string;
 }
 
-export default function Main({ children, className }: Props): React.ReactElement<Props> {
+export default function Main ({ children, className }: Props): React.ReactElement<Props> {
   return (
     <main className={className}>
       {children}
     </main>
   );
-}
-
-// export default styled(Main)(({ theme }: ThemeProps) => `
-//   display: flex;
-//   flex-direction: column;
-//   height: calc(100vh - 2px);
-//   background: ${theme.background};
-//   color: ${theme.textColor};
-//   font-size: ${theme.fontSize};
-//   line-height: ${theme.lineHeight};
-//   border: 1px solid ${theme.inputBorderColor};
-
-//   * {
-//     font-family: ${theme.fontFamily};
-//   }
-
-//   > * {
-//     padding-left: 20px;
-//     padding-right: 20px;
-//   }
-// `);
+}
\ No newline at end of file
diff --git a/packages/extension-polkagate/src/components/VaadinIcon.tsx b/packages/extension-polkagate/src/components/VaadinIcon.tsx
index 3bfafc5d7..e43e959fe 100644
--- a/packages/extension-polkagate/src/components/VaadinIcon.tsx
+++ b/packages/extension-polkagate/src/components/VaadinIcon.tsx
@@ -1,16 +1,51 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
-import React from 'react';
 import '@vaadin/icons';
 
+import React, { useEffect } from 'react';
+
 interface VaadinIconProps extends React.HTMLAttributes<HTMLElement> {
   icon: string;
+  spin?: boolean;
+  float?: boolean;
 }
 
-const VaadinIcon: React.FC<VaadinIconProps> = ({ icon, ...props }) => {
-  return <vaadin-icon icon={icon} {...props} />;
+const VaadinIcon: React.FC<VaadinIconProps> = ({ float = false, icon, spin = false, style, ...props }) => {
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  useEffect(() => {
+    // Check if the animations are already injected
+    if (!document.getElementById('vaadin-icon-animation-keyframes')) {
+      const styleSheet = document.createElement('style');
+
+      styleSheet.id = 'vaadin-icon-animation-keyframes';
+      styleSheet.innerText = `
+        @keyframes vaadinSpin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        @keyframes float {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-4px); }
+        }
+      `;
+      document.head.appendChild(styleSheet);
+    }
+  }, []);
+
+  // Combine inline styles with the animations if enabled
+  const combinedStyles: React.CSSProperties = {
+    animation: `${spin && !prefersReducedMotion ? 'vaadinSpin 3s linear infinite' : ''} ${float && !prefersReducedMotion ? 'float 2s ease-in-out infinite' : ''}`,
+    ...style
+  };
+
+  // @ts-ignore
+  return <vaadin-icon
+    icon={icon}
+    style={combinedStyles}
+    {...props}
+  />;
 };
 
 export default VaadinIcon;
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountSetting.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountSetting.tsx
index 8e9b14dd1..620cf2bd0 100644
--- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountSetting.tsx
+++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountSetting.tsx
@@ -1,6 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
@@ -21,7 +20,7 @@ interface Props {
   setDisplayPopup: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
 
-export default function AccountSetting({ address, setDisplayPopup }: Props): React.ReactElement {
+export default function AccountSetting ({ address, setDisplayPopup }: Props): React.ReactElement {
   const { t } = useTranslation();
   const theme = useTheme();
   const { account, chain } = useInfo(address);
@@ -77,7 +76,7 @@ export default function AccountSetting({ address, setDisplayPopup }: Props): Rea
         />
       </Grid>
       <Collapse in={showAccountSettings} sx={{ width: '100%' }}>
-        <Grid alignItems='center' container direction='column' item justifyContent='center'>
+        <Grid alignItems='flex-end' container direction='column' item justifyContent='center'>
           <Divider sx={{ bgcolor: 'divider', height: '2px', m: '5px auto 15px', width: '90%' }} />
           <TaskButton
             disabled={identityDisable}
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx
index 9789fff4b..e3efe61b3 100644
--- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx
+++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx
@@ -30,15 +30,16 @@ interface Props {
 }
 
 interface TaskButtonProps {
+  disabled?: boolean;
+  dividerWidth?: string;
   icon: React.JSX.Element;
-  text: string;
+  loading?: boolean;
+  mr?: string;
+  noBorderButton?: boolean;
   onClick: () => void;
   secondaryIconType: 'popup' | 'page';
-  noBorderButton?: boolean;
-  disabled?: boolean;
+  text: string;
   show?: boolean;
-  mr?: string;
-  loading?: boolean;
 }
 
 export const openOrFocusTab = (relativeUrl: string, closeCurrentTab?: boolean): void => {
@@ -69,7 +70,7 @@ export const openOrFocusTab = (relativeUrl: string, closeCurrentTab?: boolean):
   });
 };
 
-export const TaskButton = ({ disabled, icon, loading, mr = '25px', noBorderButton = false, onClick, secondaryIconType, show = true, text }: TaskButtonProps) => {
+export const TaskButton = ({ disabled, dividerWidth = '66%', icon, loading, mr = '25px', noBorderButton = false, onClick, secondaryIconType, show = true, text }: TaskButtonProps) => {
   const theme = useTheme();
 
   return (
@@ -99,7 +100,8 @@ export const TaskButton = ({ disabled, icon, loading, mr = '25px', noBorderButto
               />
             }
           </Grid>
-          {!noBorderButton && <Divider sx={{ bgcolor: 'divider', height: '2px', m: '5px auto', width: '85%' }} />
+          {!noBorderButton &&
+           <Divider sx={{ bgcolor: 'divider', height: '2px', justifySelf: 'flex-end', m: '5px 15px', width: dividerWidth }} />
           }
         </>
       }
diff --git a/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx b/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx
index 9f8adb2b9..dd798e6d8 100644
--- a/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx
+++ b/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx
@@ -1,6 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
@@ -10,7 +9,7 @@ import React, { useCallback, useContext } from 'react';
 
 import { ColorContext } from '../../../components';
 
-function ThemeChanger(): React.ReactElement {
+function ThemeChanger ({ color = 'white', left = '7px', noBorder }: {color?: string, left?: string, noBorder?: boolean}): React.ReactElement {
   const theme = useTheme();
   const colorMode = useContext(ColorContext);
 
@@ -51,9 +50,9 @@ function ThemeChanger(): React.ReactElement {
   const themeIconsStyle = {
     animationDuration: '250ms',
     animationFillMode: 'forwards',
-    color: 'white',
+    color,
     fontSize: '27px',
-    left: '7px',
+    left,
     m: 'auto',
     position: 'absolute',
     top: 0
@@ -62,7 +61,7 @@ function ThemeChanger(): React.ReactElement {
   const toggleTheme = useCallback(() => colorMode.toggleColorMode(), [colorMode]);
 
   return (
-    <Grid container item onClick={toggleTheme} sx={{ border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', height: '42px', overflow: 'hidden', position: 'relative', width: '42px' }}>
+    <Grid container item onClick={toggleTheme} sx={{ border: noBorder ? undefined : '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', height: '42px', overflow: 'hidden', position: 'relative', width: '42px' }}>
       <LightModeOutlinedIcon sx={{ animationName: `${theme.palette.mode === 'dark' ? sunSlide.go : sunSlide.come}`, ...themeIconsStyle }} />
       <DarkModeOutlinedIcon sx={{ animationName: `${theme.palette.mode === 'dark' ? moonSlide.come : moonSlide.go}`, ...themeIconsStyle }} />
     </Grid>
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx
index f378e7172..464d6606d 100644
--- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx
+++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx
@@ -53,7 +53,9 @@ export const TaskButton = ({ children, disabled, extra, hasChildren, icon, isSub
       </Grid>
       {extra}
       <Grid container item justifyContent='flex-end'>
-        {!noBorderButton && <Divider sx={{ bgcolor: 'divider', height: '2px', width: '98%' }} />}
+        {!noBorderButton &&
+         <Divider sx={{ bgcolor: 'divider', height: '2px', width: '81%' }} />
+         }
       </Grid>
       {children}
     </>
@@ -118,7 +120,7 @@ export default function HomeMenu(): React.ReactElement {
         <TaskButton
           hasChildren
           icon={
-            <VaadinIcon icon='vaadin:upload-alt' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
+            <VaadinIcon float={showImport} icon='vaadin:upload-alt' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
           }
           onClick={onImportClick}
           secondaryIconType='page'
@@ -139,7 +141,7 @@ export default function HomeMenu(): React.ReactElement {
         <TaskButton
           hasChildren
           icon={
-            <VaadinIcon icon='vaadin:cog' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
+            <VaadinIcon icon='vaadin:cog' spin ={showSetting} style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
           }
           noBorderButton
           onClick={onSettingClick}
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx
index 287764e3a..4f0ff7482 100644
--- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx
+++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx
@@ -1,19 +1,16 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import { faSitemap } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material';
 import { Collapse, Grid, useTheme } from '@mui/material';
 import React, { useCallback } from 'react';
 
 import settings from '@polkadot/ui-settings';
 
-import { useTranslation } from '../../../hooks';
 import { VaadinIcon } from '../../../components';
+import { useTranslation } from '../../../hooks';
 import { openOrFocusTab } from '../../accountDetails/components/CommonTasks';
 import { TaskButton } from './HomeMenu';
 
@@ -22,7 +19,7 @@ interface Props {
   show: boolean;
 }
 
-function ImportAccSubMenuFullScreen({ show, toggleSettingSubMenu }: Props): React.ReactElement<Props> {
+function ImportAccSubMenuFullScreen ({ show, toggleSettingSubMenu }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const theme = useTheme();
 
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx
index e821533da..72fa0d292 100644
--- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx
+++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx
@@ -93,7 +93,7 @@ export default function SettingSubMenuFullScreen({ show }: Props): React.ReactEl
     <>
       <Collapse in={show}>
         <>
-          <Divider sx={{ bgcolor: 'divider', height: '1px' }} />
+          <Divider sx={{ bgcolor: 'divider', height: '1px', justifySelf: 'flex-end', width: '81%' }} />
           <Grid container direction='column' sx={{ p: '0px 0 15px 40px' }}>
             <TaskButton
               icon={
diff --git a/packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx b/packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx
index 2bd11155b..9c90f0c87 100644
--- a/packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx
+++ b/packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx
@@ -1,6 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
@@ -50,7 +49,6 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
 
   const pool = usePool(address, undefined, refresh);
 
-  const isDarkTheme = useMemo(() => theme.palette.mode === 'dark', [theme.palette.mode]);
   const poolState = useMemo(() => pool?.bondedPool?.state?.toString(), [pool?.bondedPool?.state]);
   const canChangeState = useMemo(() => pool?.bondedPool && formatted && [String(pool?.bondedPool?.roles?.root), String(pool?.bondedPool?.roles?.bouncer)].includes(String(formatted)), [pool?.bondedPool, formatted]);
   const poolRoot = useMemo(() => pool?.bondedPool && formatted && String(pool?.bondedPool?.roles?.root) === (String(formatted)), [pool?.bondedPool, formatted]);
@@ -115,6 +113,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
         <Grid alignItems='center' container direction='column' display='block' item justifyContent='center'>
           <TaskButton
             disabled={!justMember || !staked || staked.isZero()}
+            dividerWidth='76%'
             icon={
               <FontAwesomeIcon
                 color={!justMember || !staked || staked.isZero() ? theme.palette.action.disabledBackground : theme.palette.text.primary}
@@ -144,9 +143,10 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
                 withHoverEffect
               >
                 <Collapse in={showManagePool} style={{ paddingRight: 0 }} sx={{ '& p': { pl: '5px' }, width: '100%' }}>
-                  <Divider sx={{ bgcolor: 'divider', height: '2px', m: '5px auto', width: 'calc(100% - 8px)' }} />
+                  <Divider sx={{ bgcolor: 'divider', height: '2px', justifySelf: 'flex-end', my: '5px', width: '89%' }} />
                   <TaskButton
                     disabled={poolState === 'Destroying' || !poolRoot}
+                    dividerWidth='73%'
                     icon={
                       <FontAwesomeIcon
                         color={`${poolState === 'Destroying' || !poolRoot ? theme.palette.action.disabledBackground : theme.palette.text.primary}`}
@@ -162,6 +162,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
                   />
                   <TaskButton
                     disabled={poolState === 'Destroying' || !poolRoot}
+                    dividerWidth='73%'
                     icon={
                       <FontAwesomeIcon
                         color={poolState === 'Destroying' || !poolRoot ? theme.palette.action.disabledBackground : theme.palette.text.primary}
@@ -176,6 +177,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
                   />
                   <TaskButton
                     disabled={isRemoveAllDisabled || (!poolRoot && !poolBouncer)}
+                    dividerWidth='73%'
                     icon={
                       <FontAwesomeIcon
                         color={isRemoveAllDisabled || (!poolRoot && !poolBouncer) ? theme.palette.action.disabledBackground : theme.palette.text.primary}
@@ -190,6 +192,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
                   />
                   <TaskButton
                     disabled={poolState === 'Destroying' || (!poolRoot && !poolBouncer)}
+                    dividerWidth='73%'
                     icon={
                       <FontAwesomeIcon
                         color={poolState === 'Destroying' || (!poolRoot && !poolBouncer) ? theme.palette.action.disabledBackground : theme.palette.text.primary}
@@ -204,6 +207,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
                   />
                   <TaskButton
                     disabled={poolState === 'Destroying' || (!poolRoot && !poolBouncer)}
+                    dividerWidth='73%'
                     icon={
                       <AutoDeleteIcon
                         sx={{ color: poolState === 'Destroying' || (!poolRoot && !poolBouncer) ? 'action.disabledBackground' : 'text.primary', fontSize: '23px' }}
@@ -227,7 +231,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
         <EditPool
           address={address}
           api={api}
-          chain={chain as any}
+          chain={chain}
           onClose={resetModal}
           pool={pool}
           setRefresh={setRefresh}
@@ -237,7 +241,6 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
         <SetState
           address={address}
           api={api}
-          chain={chain as any}
           formatted={formatted}
           onClose={resetModal}
           pool={pool}
@@ -257,7 +260,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
         <RemoveAll
           address={address}
           api={api}
-          chain={chain as any}
+          chain={chain}
           onClose={resetModal}
           pool={pool}
           setRefresh={setRefresh}
diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/CommonTasks.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/CommonTasks.tsx
index 22b8ab2ee..38b569877 100644
--- a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/CommonTasks.tsx
+++ b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/CommonTasks.tsx
@@ -63,6 +63,7 @@ export default function CommonTasks ({ address, setRefresh, staked }: Props): Re
         <Grid alignItems='center' container direction='column' display='block' item justifyContent='center'>
           <TaskButton
             disabled={isDisabled}
+            dividerWidth='75%'
             icon={
               <FontAwesomeIcon
                 color={`${iconColor}`}
diff --git a/packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx b/packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx
index 57b9b81e3..b073ae564 100644
--- a/packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx
+++ b/packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx
@@ -1,6 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
@@ -19,7 +18,7 @@ interface Props {
   show: boolean;
 }
 
-function ImportAccSubMenu({ show, toggleSettingSubMenu }: Props): React.ReactElement<Props> {
+function ImportAccSubMenu ({ show, toggleSettingSubMenu }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const theme = useTheme();
   const onAction = useContext(ActionContext);
@@ -54,8 +53,8 @@ function ImportAccSubMenu({ show, toggleSettingSubMenu }: Props): React.ReactEle
 
   return (
     <Collapse easing={{ enter: '200ms', exit: '100ms' }} in={show} sx={{ width: '100%' }}>
-      <Grid container item>
-        <Divider sx={{ bgcolor: 'secondary.light', height: '1px', width: '100%' }} />
+      <Grid container item justifyContent='flex-end'>
+        <Divider sx={{ bgcolor: 'divider', height: '1px', mr: '10px', width: '83%' }} />
         <Grid container direction='column' display='block' item sx={{ p: '10px', pr: 0 }}>
           <MenuItem
             fontSize='17px'
diff --git a/packages/extension-polkagate/src/partials/Menu.tsx b/packages/extension-polkagate/src/partials/Menu.tsx
index ae162a86d..a1a5bcbc5 100644
--- a/packages/extension-polkagate/src/partials/Menu.tsx
+++ b/packages/extension-polkagate/src/partials/Menu.tsx
@@ -1,15 +1,16 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
+import type { Theme } from '@mui/material/styles';
+
 import { Close as CloseIcon } from '@mui/icons-material';
 import { Divider, Grid, IconButton, Typography } from '@mui/material';
-import { keyframes, Theme } from '@mui/material/styles';
+import { keyframes } from '@mui/material/styles';
 import React, { useCallback, useContext, useState } from 'react';
 
-import { AccountContext, ActionContext, MenuItem, TwoButtons, VaadinIcon,Warning } from '../components';
+import { AccountContext, ActionContext, MenuItem, TwoButtons, VaadinIcon, Warning } from '../components';
 import { setStorage } from '../components/Loading';
 import { useTranslation } from '../hooks';
 import { tieAccount } from '../messaging';
@@ -31,9 +32,12 @@ const COLLAPSIBLE_MENUS = {
   SETTING: 3
 };
 
-function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
+const Div = () => <Divider sx={{ bgcolor: 'divider', height: '1px', justifySelf: 'flex-end', mx: '10px', width: '83%' }} />;
+
+function Menu ({ setShowMenu, theme }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const onAction = useContext(ActionContext);
+
   const [collapsedMenu, setCollapsedMenu] = useState<number>(COLLAPSIBLE_MENUS.SETTING);
   const [isTestnetEnableConfirmed, setIsTestnetEnableConfirmed] = useState<boolean>();
   const [showWarning, setShowWarning] = useState<boolean>();
@@ -117,7 +121,7 @@ function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
           ? <>
             <MenuItem
               iconComponent={
-                <VaadinIcon icon='vaadin:plus-circle' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
+                <VaadinIcon icon='vaadin:plus-circle' spin={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT} style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
               }
               onClick={toggleNewAccountSubMenu}
               showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT}
@@ -126,10 +130,10 @@ function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
             >
               <NewAccountSubMenu show={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT} />
             </MenuItem>
-            <Divider sx={{ bgcolor: 'secondary.light', height: '1px' }} />
+            <Div />
             <MenuItem
               iconComponent={
-                <VaadinIcon icon='vaadin:upload-alt' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
+                <VaadinIcon float ={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} icon='vaadin:upload-alt' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
               }
               onClick={toggleImportSubMenu}
               showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT}
@@ -138,7 +142,7 @@ function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
             >
               <ImportAccSubMenu show={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} toggleSettingSubMenu={toggleSettingSubMenu} />
             </MenuItem>
-            <Divider sx={{ bgcolor: 'secondary.light', height: '1px' }} />
+            <Div />
             <MenuItem
               iconComponent={
                 <VaadinIcon icon='vaadin:download' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
@@ -147,10 +151,10 @@ function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
               text={t('Export all accounts')}
               withHoverEffect
             />
-            <Divider sx={{ bgcolor: 'secondary.light', height: '1px' }} />
+            <Div />
             <MenuItem
               iconComponent={
-                <VaadinIcon icon='vaadin:cog' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
+                <VaadinIcon icon='vaadin:cog' spin={collapsedMenu === COLLAPSIBLE_MENUS.SETTING} style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
               }
               onClick={toggleSettingSubMenu}
               showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.SETTING}
diff --git a/packages/extension-polkagate/src/partials/NewAccountSubMenu.tsx b/packages/extension-polkagate/src/partials/NewAccountSubMenu.tsx
index 74f88d4ee..b68eec6ce 100644
--- a/packages/extension-polkagate/src/partials/NewAccountSubMenu.tsx
+++ b/packages/extension-polkagate/src/partials/NewAccountSubMenu.tsx
@@ -1,6 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
@@ -15,7 +14,7 @@ interface Props {
   show: boolean;
 }
 
-function NewAccountSubMenu({ show }: Props): React.ReactElement<Props> {
+function NewAccountSubMenu ({ show }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const theme = useTheme();
   const onAction = useContext(ActionContext);
@@ -31,8 +30,8 @@ function NewAccountSubMenu({ show }: Props): React.ReactElement<Props> {
 
   return (
     <Collapse easing={{ enter: '200ms', exit: '100ms' }} in={show} sx={{ width: '100%' }}>
-      <Grid container item>
-        <Divider sx={{ bgcolor: 'secondary.light', height: '1px', width: '100%' }} />
+      <Grid container item justifyContent='flex-end'>
+        <Divider sx={{ bgcolor: 'divider', height: '1px', mr: '10px', width: '83%' }} />
         <Grid container direction='column' display='block' item sx={{ p: '10px', pr: 0 }}>
           <MenuItem
             fontSize='17px'
diff --git a/packages/extension-polkagate/src/partials/SettingSubMenu.tsx b/packages/extension-polkagate/src/partials/SettingSubMenu.tsx
index 803bdc579..6431d6d65 100644
--- a/packages/extension-polkagate/src/partials/SettingSubMenu.tsx
+++ b/packages/extension-polkagate/src/partials/SettingSubMenu.tsx
@@ -11,9 +11,10 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 
 import settings from '@polkadot/ui-settings';
 
-import { ActionContext, Checkbox2, ColorContext, FullScreenIcon, Infotip2, MenuItem, Select, Switch, VaadinIcon } from '../components';
+import { ActionContext, Checkbox2, FullScreenIcon, Infotip2, MenuItem, Select, VaadinIcon } from '../components';
 import { getStorage, updateStorage } from '../components/Loading';
 import { useExtensionLockContext } from '../context/ExtensionLockContext';
+import ThemeChanger from '../fullscreen/governance/partials/ThemeChanger';
 import { useIsExtensionPopup, useIsLoginEnabled, useTranslation } from '../hooks';
 import { lockExtension, setNotification } from '../messaging';
 import { NO_PASS_PERIOD } from '../util/constants';
@@ -32,7 +33,6 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
   const isPopup = useIsExtensionPopup();
   const isLoginEnabled = useIsLoginEnabled();
   const onAction = useContext(ActionContext);
-  const colorMode = useContext(ColorContext);
   const { setExtensionLock } = useExtensionLockContext();
 
   const [notification, updateNotification] = useState(settings.notification);
@@ -60,10 +60,6 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
     settings.set({ i18nLang: value as string });
   }, []);
 
-  const onChangeTheme = useCallback((): void => {
-    colorMode.toggleColorMode();
-  }, [colorMode]);
-
   const onManageLoginPassword = useCallback(() => {
     onAction('/login-password');
   }, [onAction]);
@@ -89,35 +85,35 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
 
   return (
     <Collapse easing={{ enter: '200ms', exit: '100ms' }} in={show} sx={{ width: '100%' }}>
-      <Grid container item>
-        <Divider sx={{ bgcolor: 'secondary.light', height: '1px', width: '100%' }} />
-        <Grid container direction='column' pl='30px' pt='10px' sx={{ p: '10px', pr: 0 }}>
-          <Grid alignItems='center' container item justifyContent='space-between'>
+      <Grid container item justifyContent='flex-end'>
+        <Divider sx={{ bgcolor: 'divider', height: '1px', mx: '10px', width: '83%' }} />
+        <Grid container direction='column' pl='40px' pr= '5px' pt='10px'>
+          <Grid alignItems='center' container item justifyContent='space-around' pr='10px'>
             <Grid item>
-              <Switch
-                checkedLabel={t('Dark')}
-                defaultColor
-                fontSize='17px'
-                isChecked={theme.palette.mode === 'dark'}
-                onChange={onChangeTheme}
-                theme={theme}
-                uncheckedLabel={t('Light')}
-              />
+              <Infotip2
+                text={t('Switch Theme')}
+              >
+                <IconButton
+                  sx={{ height: '35px', p: 0, width: '35px' }}
+                >
+                  <ThemeChanger color= 'secondary.light' left='4px' noBorder />
+                </IconButton>
+              </Infotip2>
             </Grid>
             {isLoginEnabled &&
               <>
                 <Grid item>
-                  <Divider orientation='vertical' sx={{ backgroundColor: 'text.primary', height: '20px', my: 'auto' }} />
+                  <Divider orientation='vertical' sx={{ bgcolor: 'divider', height: '20px', my: 'auto' }} />
                 </Grid>
-                <Grid item>
+                <Grid container item width='fit-content'>
                   <Infotip2
                     text={t('Lock Extension')}
                   >
                     <IconButton
                       onClick={onLockExtension}
-                      sx={{ height: '35px', mr: '-5px', width: '35px' }}
+                      sx={{ height: '35px', ml: '-5px', p: 0, width: '35px' }}
                     >
-                      <LockIcon sx={{ color: 'secondary.light', cursor: 'pointer', fontSize: '25px' }} />
+                      <LockIcon sx={{ color: 'secondary.light', cursor: 'pointer', fontSize: '27px' }} />
                     </IconButton>
                   </Infotip2>
                 </Grid>
@@ -126,9 +122,9 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
             {isPopup &&
               <>
                 <Grid item>
-                  <Divider orientation='vertical' sx={{ backgroundColor: 'text.primary', height: '20px', my: 'auto' }} />
+                  <Divider orientation='vertical' sx={{ bgcolor: 'divider', height: '20px', my: 'auto' }} />
                 </Grid>
-                <FullScreenIcon url='/' isSettingSubMenu/>
+                <FullScreenIcon isSettingSubMenu url='/' />
               </>
             }
           </Grid>
@@ -168,7 +164,7 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
             <MenuItem
               fontSize='17px'
               iconComponent={
-                <VaadinIcon icon='vaadin:key' style={{ color: `${theme.palette.text.primary}`, height: '18px'}} />
+                <VaadinIcon icon='vaadin:key' style={{ color: `${theme.palette.text.primary}`, height: '18px' }} />
               }
               onClick={onManageLoginPassword}
               py='2px'
diff --git a/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx b/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx
index b25d3d141..763ff7a83 100644
--- a/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx
+++ b/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx
@@ -73,10 +73,10 @@ export default function AiBackgroundImage ({ bgImage, setBgImage }: Props): Reac
   useEffect(() => {
     /** initiate background image on load and UI theme change */
     chrome.storage.local.get('backgroundImage', (res) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-      const imgUrl = res?.['backgroundImage']?.[mode] as string;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      const imgUrl = res?.['backgroundImage']?.[mode] as string | undefined;
 
-      tryToApplyImg(imgUrl);
+      imgUrl && tryToApplyImg(imgUrl);
     });
   }, [tryToApplyImg, mode]);
 
diff --git a/packages/extension-ui/src/types.ts b/packages/extension-ui/src/types.ts
deleted file mode 100644
index 4cbb3a99b..000000000
--- a/packages/extension-ui/src/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
-
-import { Theme } from './components/themes';
-
-export { Theme };
-
-export interface ThemeProps {
-  theme: Theme;
-}
diff --git a/packages/extension/public/locales/en/translation.json b/packages/extension/public/locales/en/translation.json
index 11530058c..4877e35c8 100644
--- a/packages/extension/public/locales/en/translation.json
+++ b/packages/extension/public/locales/en/translation.json
@@ -1409,5 +1409,6 @@
   "No identity": "",
   "Recoverable": "",
   "Not recoverable": "",
-  "No proxy": ""
+  "No proxy": "",
+  "Switch Theme": ""
 }