diff --git a/apps/web/app/home/(user)/_components/home-menu-navigation.tsx b/apps/web/app/home/(user)/_components/home-menu-navigation.tsx
index 534698672..1ef536ade 100644
--- a/apps/web/app/home/(user)/_components/home-menu-navigation.tsx
+++ b/apps/web/app/home/(user)/_components/home-menu-navigation.tsx
@@ -36,7 +36,7 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
 
   return (
     <div className={'flex w-full flex-1 justify-between'}>
-      <div className={'flex items-center space-x-4'}>
+      <div className={'flex items-center space-x-8'}>
         <AppLogo />
 
         <BorderedNavigationMenu>
@@ -46,7 +46,7 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
         </BorderedNavigationMenu>
       </div>
 
-      <div className={'flex justify-end space-x-4'}>
+      <div className={'flex justify-end space-x-2.5'}>
         <HomeAccountSelector accounts={accounts} collapsed={false} />
 
         <UserNotifications userId={user.id} />
diff --git a/apps/web/app/home/(user)/_components/home-sidebar.tsx b/apps/web/app/home/(user)/_components/home-sidebar.tsx
index 749bfdba3..e84dadcb7 100644
--- a/apps/web/app/home/(user)/_components/home-sidebar.tsx
+++ b/apps/web/app/home/(user)/_components/home-sidebar.tsx
@@ -5,6 +5,7 @@ import { AppLogo } from '~/components/app-logo';
 import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
 import featuresFlagConfig from '~/config/feature-flags.config';
 import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+import { UserNotifications } from '~/home/(user)/_components/user-notifications';
 
 // home imports
 import type { UserWorkspace } from '../_lib/server/load-user-workspace';
@@ -16,12 +17,16 @@ export function HomeSidebar(props: { workspace: UserWorkspace }) {
   return (
     <Sidebar>
       <SidebarContent className={'h-16 justify-center'}>
-        <If
-          condition={featuresFlagConfig.enableTeamAccounts}
-          fallback={<AppLogo className={'py-2'} />}
-        >
-          <HomeAccountSelector collapsed={false} accounts={accounts} />
-        </If>
+        <div className={'flex items-center justify-between'}>
+          <If
+            condition={featuresFlagConfig.enableTeamAccounts}
+            fallback={<AppLogo className={'py-2'} />}
+          >
+            <HomeAccountSelector collapsed={false} accounts={accounts} />
+          </If>
+
+          <UserNotifications userId={user.id} />
+        </div>
       </SidebarContent>
 
       <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
diff --git a/apps/web/app/home/(user)/layout.tsx b/apps/web/app/home/(user)/layout.tsx
index 36cb8c93d..c681865f9 100644
--- a/apps/web/app/home/(user)/layout.tsx
+++ b/apps/web/app/home/(user)/layout.tsx
@@ -31,13 +31,8 @@ function UserHomeLayout({ children }: React.PropsWithChildren) {
       </PageNavigation>
 
       <PageMobileNavigation className={'flex items-center justify-between'}>
-        <div>
-          <AppLogo />
-        </div>
-
-        <div>
-          <HomeMobileNavigation workspace={workspace} />
-        </div>
+        <AppLogo />
+        <HomeMobileNavigation workspace={workspace} />
       </PageMobileNavigation>
 
       {children}
diff --git a/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx b/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx
index ed134bc5d..e8ba8d57e 100644
--- a/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx
+++ b/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx
@@ -16,6 +16,7 @@ import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
 import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
+import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
 
 import { TeamAccountAccountsSelector } from '../_components/team-account-accounts-selector';
 import { TeamAccountLayoutSidebarNavigation } from './team-account-layout-sidebar-navigation';
@@ -59,11 +60,18 @@ function SidebarContainer(props: {
 
   return (
     <>
-      <SidebarContent className={'mt-4 justify-center'}>
-        <TeamAccountAccountsSelector
-          selectedAccount={account}
-          accounts={accounts}
-        />
+      <SidebarContent className={'mt-4'}>
+        <div className={'flex items-center justify-between'}>
+          <TeamAccountAccountsSelector
+            selectedAccount={account}
+            accounts={accounts}
+          />
+
+          <TeamAccountNotifications
+            userId={props.user.id}
+            accountId={account}
+          />
+        </div>
       </SidebarContent>
 
       <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
@@ -72,12 +80,10 @@ function SidebarContainer(props: {
 
       <div className={'absolute bottom-4 left-0 w-full'}>
         <SidebarContent>
-          <div className={'flex space-x-2'}>
-            <ProfileAccountDropdownContainer
-              user={props.user}
-              collapsed={props.collapsed}
-            />
-          </div>
+          <ProfileAccountDropdownContainer
+            user={props.user}
+            collapsed={props.collapsed}
+          />
 
           <If condition={props.collapsible}>
             <AppSidebarFooterMenu
diff --git a/apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx b/apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx
index 3da4a5d66..3c53df1a0 100644
--- a/apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx
+++ b/apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx
@@ -38,7 +38,7 @@ export function TeamAccountNavigationMenu(props: {
 
   return (
     <div className={'flex w-full flex-1 justify-between'}>
-      <div className={'flex items-center space-x-4'}>
+      <div className={'flex items-center space-x-8'}>
         <AppLogo />
 
         <BorderedNavigationMenu>
@@ -48,7 +48,7 @@ export function TeamAccountNavigationMenu(props: {
         </BorderedNavigationMenu>
       </div>
 
-      <div className={'flex justify-end space-x-4'}>
+      <div className={'flex justify-end space-x-2.5'}>
         <TeamAccountAccountsSelector
           selectedAccount={account.id}
           accounts={accounts.map((account) => ({
diff --git a/apps/web/app/home/[account]/layout.tsx b/apps/web/app/home/[account]/layout.tsx
index 8969f9e1e..e520746d1 100644
--- a/apps/web/app/home/[account]/layout.tsx
+++ b/apps/web/app/home/[account]/layout.tsx
@@ -5,7 +5,6 @@ import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
 
 import { AppLogo } from '~/components/app-logo';
 import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
-import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 // local imports
diff --git a/apps/web/app/home/[account]/page.tsx b/apps/web/app/home/[account]/page.tsx
index f2dd96ab5..943efb768 100644
--- a/apps/web/app/home/[account]/page.tsx
+++ b/apps/web/app/home/[account]/page.tsx
@@ -54,7 +54,7 @@ function TeamAccountHomePage({ params }: { params: Params }) {
         title={<Trans i18nKey={'common:dashboardTabLabel'} />}
         description={<Trans i18nKey={'common:dashboardTabDescription'} />}
       >
-        <Button size={'sm'}>
+        <Button>
           <PlusCircle className={'mr-1 h-4'} />
           <span>Add Widget</span>
         </Button>
diff --git a/packages/features/accounts/src/components/account-selector.tsx b/packages/features/accounts/src/components/account-selector.tsx
index acc5f12a4..d02a60a70 100644
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -98,7 +98,7 @@ export function AccountSelector({
             variant="ghost"
             role="combobox"
             aria-expanded={open}
-            className={cn('dark:shadow-primary/10 group w-full border px-4', {
+            className={cn('dark:shadow-primary/10 group px-2', {
               'justify-between': !collapsed,
               'justify-center': collapsed,
             })}
@@ -144,11 +144,11 @@ export function AccountSelector({
               )}
             </If>
 
-            <CaretSortIcon className="ml-1 h-4 w-4 shrink-0 opacity-50" />
+            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
 
-        <PopoverContent className="w-full p-0">
+        <PopoverContent className="w-full p-0" collisionPadding={20}>
           <Command>
             <CommandInput placeholder={t('searchAccount')} className="h-9" />
 
diff --git a/packages/features/notifications/src/components/notifications-popover.tsx b/packages/features/notifications/src/components/notifications-popover.tsx
index dc17b0f9b..60b17a2fe 100644
--- a/packages/features/notifications/src/components/notifications-popover.tsx
+++ b/packages/features/notifications/src/components/notifications-popover.tsx
@@ -111,12 +111,12 @@ export function NotificationsPopover(params: {
   return (
     <Popover modal open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button className={'h-8 w-8'} variant={'ghost'}>
+        <Button className={'h-9 w-9'} variant={'ghost'}>
           <Bell className={'min-h-5 min-w-5'} />
 
           <span
             className={cn(
-              `fade-in animate-in zoom-in absolute right-5 top-5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
+              `fade-in animate-in zoom-in absolute right-5 top-5 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
               {
                 hidden: !unread.length,
               },
@@ -129,7 +129,8 @@ export function NotificationsPopover(params: {
 
       <PopoverContent
         className={'flex w-full flex-col p-0 lg:min-w-64'}
-        collisionPadding={{ right: 20 }}
+        align={'start'}
+        collisionPadding={20}
         sideOffset={10}
       >
         <div className={'flex items-center px-3 py-2 text-sm font-semibold'}>
diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx
index 940927d42..4e11a98f8 100644
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -56,7 +56,7 @@ export function PageMobileNavigation(
   }>,
 ) {
   return (
-    <div className={cn('w-full py-4 lg:hidden', props.className)}>
+    <div className={cn('w-full py-2 lg:hidden', props.className)}>
       {props.children}
     </div>
   );
diff --git a/packages/ui/src/makerkit/profile-avatar.tsx b/packages/ui/src/makerkit/profile-avatar.tsx
index 693ad6c44..0ccc6671f 100644
--- a/packages/ui/src/makerkit/profile-avatar.tsx
+++ b/packages/ui/src/makerkit/profile-avatar.tsx
@@ -18,13 +18,13 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
     return (
       <Avatar className={avatarClassName}>
         <AvatarFallback>
-          <span className={'uppercase'}>{props.text.slice(0, 2)}</span>
+          <span className={'uppercase'}>{props.text.slice(0, 1)}</span>
         </AvatarFallback>
       </Avatar>
     );
   }
 
-  const initials = props.displayName?.slice(0, 2);
+  const initials = props.displayName?.slice(0, 1);
 
   return (
     <Avatar className={avatarClassName}>