diff --git a/website/src/components/logos/si-icon.tsx b/website/src/components/logos/si-icon.tsx
new file mode 100644
index 000000000..fe3e3f2c7
--- /dev/null
+++ b/website/src/components/logos/si-icon.tsx
@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import { HTMLAttributes } from 'react';
+
+export function SIIcon({ className, ...props }: HTMLAttributes<SVGElement>) {
+	return (
+		<svg
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			xmlSpace="preserve"
+			fill="currentColor"
+			aria-hidden={true}
+			aria-labelledby="si-icon"
+			viewBox="0 0 816 815.8"
+			className={classNames('text-si-yellow', className)}
+			{...props}
+		>
+			<title id="si-icon">Social Income Icon</title>
+			<g>
+				<path id="Pfad_185" className="st0" d="M714.1,663.9h102v-512h-102V663.9z" />
+				<path id="Pfad_186" className="st0" d="M366.4,631.9l92.8,43.3l216.3-463.8l-92.8-43.3L366.4,631.9z" />
+				<path id="Pfad_187" className="st0" d="M0,596.7l65.8,78.4l392-329l-65.7-78.3L0,596.7z" />
+			</g>
+		</svg>
+	);
+}
diff --git a/website/src/components/navbar/navbar-client.tsx b/website/src/components/navbar/navbar-client.tsx
index 3237bcef7..9f72fcbcb 100644
--- a/website/src/components/navbar/navbar-client.tsx
+++ b/website/src/components/navbar/navbar-client.tsx
@@ -2,10 +2,11 @@
 
 import { DefaultParams } from '@/app/[lang]/[region]';
 import { I18nDialog } from '@/components/i18n-dialog';
+import { SIIcon } from '@/components/logos/si-icon';
 import { SILogo } from '@/components/logos/si-logo';
 import { WebsiteCurrency } from '@/i18n';
 import { UserCircleIcon } from '@heroicons/react/24/outline';
-import { Bars3Icon, GlobeEuropeAfricaIcon, LanguageIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { Bars3Icon, ChevronDownIcon, GlobeEuropeAfricaIcon, LanguageIcon, XMarkIcon } from '@heroicons/react/24/solid';
 import { LanguageCode } from '@socialincome/shared/src/types/language';
 import {
 	Accordion,
@@ -78,23 +79,26 @@ export function NavbarClient(
 				currency: translations.currency,
 			}}
 		>
-			<Button variant="ghost" className="flex max-w-md space-x-2">
-				<LanguageIcon className="h-4 w-4" />
-				<GlobeEuropeAfricaIcon className="h-4 w-4" />
+			<Button variant="ghost" className="flex max-w-md space-x-2 py-6">
+				<LanguageIcon className="h-6 w-6" />
+				<GlobeEuropeAfricaIcon className="h-6 w-6" />
 			</Button>
 		</I18nDialog>
 	);
 
 	return (
-		<nav className="min-h-navbar flex flex-col justify-start pt-4">
+		<nav className="min-h-navbar flex flex-col justify-start py-8 pt-4">
 			<Collapsible
 				open={isOpen}
 				onOpenChange={setIsOpen}
-				className="mx-auto flex w-screen max-w-6xl flex-col space-y-4 px-3 md:px-5"
+				className="mx-auto flex w-screen max-w-6xl flex-col space-y-4 md:px-5"
 			>
-				<div className="flex flex-row items-center justify-between md:grid-cols-4">
+				<div className="flex flex-row items-center justify-between px-5 md:grid-cols-4 md:px-0">
 					<Link href={`/${lang}/${region}`}>
-						<SILogo className="h-6" />
+						{/* Large Screen Logo */}
+						<SILogo className="hidden h-6 lg:block" />
+						{/* Small Screen Icon */}
+						<SIIcon className="block h-11 lg:hidden" />
 					</Link>
 					{/*Desktop menu*/}
 					{showNavigation && (
@@ -104,8 +108,8 @@ export function NavbarClient(
 									<div key={index}>
 										{_.isEmpty(section.links) && section.href ? (
 											<Link href={section.href} key={index}>
-												<Button variant="ghost">
-													<Typography size="md" weight="medium">
+												<Button variant="ghost" className="text-secondary-foreground py-6">
+													<Typography size="xl" weight="medium">
 														{section.title}
 													</Typography>
 												</Button>
@@ -113,18 +117,24 @@ export function NavbarClient(
 										) : (
 											<HoverCard key={index} openDelay={0} closeDelay={200}>
 												<HoverCardTrigger asChild>
-													<Button variant="ghost">
-														<Typography size="md" weight="medium">
+													<Button variant="ghost" className="flex items-center space-x-2 py-6">
+														<Typography size="xl" weight="medium" className="text-secondary-foreground">
 															{section.title}
 														</Typography>
+														{(section.links?.length ?? 0) > 0 && <ChevronDownIcon className="h-4 w-4" />}
 													</Button>
 												</HoverCardTrigger>
-												<HoverCardContent asChild alignOffset={20} className="bg-popover w-72">
-													<ul>
+												<HoverCardContent asChild alignOffset={20} className="bg-popover w-56 p-0">
+													<ul className="divide-muted divide-y">
 														{section.links?.map((link, index) => (
-															<li key={index} className="hover:bg-accent rounded p-2">
+															<li key={index} className="hover:bg-accent py-2 pl-10">
 																<Link href={link.href}>
-																	<Typography size="md" weight="medium" lineHeight="loose">
+																	<Typography
+																		size="xl"
+																		weight="medium"
+																		lineHeight="loose"
+																		className="text-secondary-foreground"
+																	>
 																		{link.title}
 																	</Typography>
 																</Link>
@@ -143,8 +153,8 @@ export function NavbarClient(
 						{i18nDialog}
 						{showNavigation && (
 							<Link href={`/${lang}/${region}/me`}>
-								<Button variant="ghost" className="cursor-pointer">
-									<UserCircleIcon className="h-5 w-5" />
+								<Button variant="ghost" className="cursor-pointer py-6">
+									<UserCircleIcon className="h-6 w-6" />
 								</Button>
 							</Link>
 						)}
@@ -153,11 +163,11 @@ export function NavbarClient(
 						{i18nDialog}
 						{showNavigation && (
 							<CollapsibleTrigger asChild>
-								<Button variant="ghost" size="icon" className="w-9 p-0">
+								<Button variant="ghost" size="icon" className="w-11 py-6">
 									{isOpen ? (
-										<XMarkIcon className="block h-5 w-5" aria-hidden="true" />
+										<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
 									) : (
-										<Bars3Icon className="block h-5 w-5" aria-hidden="true" />
+										<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
 									)}
 								</Button>
 							</CollapsibleTrigger>
@@ -167,28 +177,42 @@ export function NavbarClient(
 
 				{/*Mobile menu*/}
 				<CollapsibleContent className="border-b md:hidden">
-					<Accordion type="single" collapsible className="border-border mb-4 flex w-full flex-col">
+					<Accordion type="single" collapsible className="divide-border mb-0 flex w-full flex-col divide-y">
 						{navigation.map((section, index) => (
 							<div key={index}>
 								{_.isEmpty(section.links) && section.href ? (
-									<div className="flex flex-1 items-center justify-between py-1.5 font-medium">
-										<Link href={section.href}>{section.title}</Link>
-									</div>
+									// Entire section is a link with hover effect
+									<Link
+										href={section.href}
+										className="hover:bg-accent flex flex-1 items-center justify-between px-5 py-4 text-lg font-medium md:px-0"
+									>
+										<span>{section.title}</span>
+									</Link>
 								) : (
-									<AccordionItem value={`value-${index}`} className="hover:underline-none border-none">
-										<AccordionTrigger className="py-1.5">{section.title}</AccordionTrigger>
+									// Accordion section
+									<AccordionItem
+										value={`value-${index}`}
+										className="divide-border divide-y border-none text-lg font-medium"
+									>
+										<AccordionTrigger className=" hover:bg-accent pl-5 pr-8 pt-4 hover:no-underline md:pl-0">
+											{section.title}
+										</AccordionTrigger>
 										{section.links?.map((link, index2) => (
-											<AccordionContent key={index2}>
-												<Link href={link.href}>{link.title}</Link>
+											<AccordionContent key={index2} className="hover:bg-accent px-10 pt-2 text-lg md:px-0">
+												<Link href={link.href} className="mt-2 block">
+													{link.title}
+												</Link>
 											</AccordionContent>
 										))}
 									</AccordionItem>
 								)}
 							</div>
 						))}
-						<div className="flex flex-1 items-center justify-between py-1.5 font-medium">
-							<Link href={`/${lang}/${region}/me`}>{translations.myProfile}</Link>
-						</div>
+						<Link href={`/${lang}/${region}/me`} className="block">
+							<div className="hover:bg-accent flex flex-1 items-center justify-between px-5 py-4 text-lg font-medium md:px-0">
+								{translations.myProfile}
+							</div>
+						</Link>
 					</Accordion>
 				</CollapsibleContent>
 			</Collapsible>