diff --git a/apps/web/lib/fonts.ts b/apps/web/lib/fonts.ts
index 85572e07a..8a3c6a41f 100644
--- a/apps/web/lib/fonts.ts
+++ b/apps/web/lib/fonts.ts
@@ -23,7 +23,7 @@ const heading = HeadingFont({
   variable: '--font-heading',
   fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
   preload: true,
-  weight: ['500', '700'],
+  weight: ['500', '600'],
 });
 
 // we export these fonts into the root layout
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 4551fa264..b70fea9bc 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -13,7 +13,7 @@
     --popover: 0deg 0% 100%;
     --popover-foreground: 222.2deg 47.4% 11.2%;
 
-    --border: 214.3deg 31.8% 91.4%;
+    --border: 214.3deg 31.8% 94.4%;
     --input: 214.3deg 31.8% 91.4%;
 
     --card: 0deg 0% 100%;
diff --git a/packages/billing/gateway/src/components/plan-picker.tsx b/packages/billing/gateway/src/components/plan-picker.tsx
index 1c95ec4cc..0d0991dbd 100644
--- a/packages/billing/gateway/src/components/plan-picker.tsx
+++ b/packages/billing/gateway/src/components/plan-picker.tsx
@@ -142,10 +142,10 @@ export function PlanPicker(
                                 htmlFor={interval}
                                 key={interval}
                                 className={cn(
-                                  'hover:bg-secondary flex items-center space-x-2 rounded-md border border-transparent px-4 py-2',
+                                  'flex items-center space-x-2 rounded-md border border-transparent px-4 py-2 transition-colors',
                                   {
-                                    ['border-primary bg-secondary']: selected,
-                                    ['hover:bg-secondary']: !selected,
+                                    ['border-primary']: selected,
+                                    ['hover:border-primary']: !selected,
                                   },
                                 )}
                               >
diff --git a/packages/features/accounts/src/components/account-selector.tsx b/packages/features/accounts/src/components/account-selector.tsx
index 309031cea..f19a3ef2e 100644
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -240,21 +240,24 @@ export function AccountSelector({
           <Separator />
 
           <If condition={features.enableTeamCreation}>
-            <Button
-              data-test={'create-team-account-trigger'}
-              variant="ghost"
-              className="w-full justify-start rounded-none"
-              onClick={() => {
-                setIsCreatingAccount(true);
-                setOpen(false);
-              }}
-            >
-              <Plus className="mr-3 h-4 w-4" />
+            <div className={'p-1'}>
+              <Button
+                data-test={'create-team-account-trigger'}
+                variant="ghost"
+                size={'sm'}
+                className="w-full justify-start text-sm font-normal"
+                onClick={() => {
+                  setIsCreatingAccount(true);
+                  setOpen(false);
+                }}
+              >
+                <Plus className="mr-3 h-4 w-4" />
 
-              <span>
-                <Trans i18nKey={'teams:createTeam'} />
-              </span>
-            </Button>
+                <span>
+                  <Trans i18nKey={'teams:createTeam'} />
+                </span>
+              </Button>
+            </div>
           </If>
         </PopoverContent>
       </Popover>
diff --git a/packages/ui/src/makerkit/bordered-navigation-menu.tsx b/packages/ui/src/makerkit/bordered-navigation-menu.tsx
index 718dacb37..7f8a05dd3 100644
--- a/packages/ui/src/makerkit/bordered-navigation-menu.tsx
+++ b/packages/ui/src/makerkit/bordered-navigation-menu.tsx
@@ -9,7 +9,6 @@ import {
   NavigationMenuItem,
   NavigationMenuList,
 } from '../shadcn/navigation-menu';
-
 import { cn, isRouteActive } from '../utils';
 import { Trans } from './trans';
 
@@ -31,20 +30,24 @@ export function BorderedNavigationMenuItem(props: {
 }) {
   const pathname = usePathname();
 
-  const active =
-    props.active ??
-    isRouteActive(props.path, pathname, props.end);
+  const active = props.active ?? isRouteActive(props.path, pathname, props.end);
 
   return (
     <NavigationMenuItem>
-      <Button asChild variant={'ghost'} className={'relative'}>
-        <Link href={props.path} className={'text-sm'}>
+      <Button asChild variant={'ghost'} className={'relative active:shadow-sm'}>
+        <Link
+          href={props.path}
+          className={cn('text-sm', {
+            'text-primary': active,
+            'text-primary/80 hover:text-primary': !active,
+          })}
+        >
           <Trans i18nKey={props.label} defaults={props.label} />
 
           {active ? (
             <span
               className={cn(
-                'absolute -bottom-2.5 left-0 h-1 w-full bg-primary animate-in fade-in zoom-in-90',
+                'absolute -bottom-2.5 left-0 h-0.5 w-full bg-primary animate-in fade-in zoom-in-90',
               )}
             />
           ) : null}
@@ -52,4 +55,4 @@ export function BorderedNavigationMenuItem(props: {
       </Button>
     </NavigationMenuItem>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx
index 9230b2ee2..b15b795d2 100644
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -72,10 +72,9 @@ function PageWithHeader(props: PageProps) {
       >
         <div
           className={cn(
-            'dark:border-primary-900 flex h-14 items-center justify-between px-4 shadow-sm dark:shadow-primary/10 lg:justify-start',
+            'dark:border-primary-900 flex h-14 items-center justify-between bg-muted/30 px-4 shadow-sm dark:shadow-primary/10 lg:justify-start',
             {
-              'sticky top-0 z-10 bg-background/80 backdrop-blur-md':
-                props.sticky ?? true,
+              'sticky top-0 z-10 backdrop-blur-md': props.sticky ?? true,
             },
           )}
         >
diff --git a/packages/ui/src/makerkit/sidebar.tsx b/packages/ui/src/makerkit/sidebar.tsx
index 6effbb6b2..7ae911a3b 100644
--- a/packages/ui/src/makerkit/sidebar.tsx
+++ b/packages/ui/src/makerkit/sidebar.tsx
@@ -193,7 +193,9 @@ export function SidebarItem({
 
 function getClassNameBuilder() {
   return cva(
-    ['flex box-content h-screen flex-col border-r border-border relative'],
+    [
+      'flex box-content h-screen flex-col relative bg-muted/20 shadow-sm dark:shadow-primary/20',
+    ],
     {
       variants: {
         collapsed: {
diff --git a/packages/ui/src/shadcn/radio-group.tsx b/packages/ui/src/shadcn/radio-group.tsx
index fc026b615..631164857 100644
--- a/packages/ui/src/shadcn/radio-group.tsx
+++ b/packages/ui/src/shadcn/radio-group.tsx
@@ -53,10 +53,11 @@ const RadioGroupItemLabel = (
       className={cn(
         props.className,
         'flex cursor-pointer rounded-md' +
-          ' items-center space-x-4 border border-input hover:bg-secondary' +
+          ' items-center space-x-4 border border-input' +
           ' transition-duration-500 p-4 text-sm transition-all focus-within:border-primary',
         {
-          [`border-primary bg-secondary`]: props.selected,
+          [`border-primary`]: props.selected,
+          [`hover:border-primary`]: !props.selected,
         },
       )}
     >