diff --git a/apps/portal-shell/src/app/components/header/header.html b/apps/portal-shell/src/app/components/header/header.html
index 7582263..cd54e4a 100644
--- a/apps/portal-shell/src/app/components/header/header.html
+++ b/apps/portal-shell/src/app/components/header/header.html
@@ -73,11 +73,11 @@
       <button
         type="button"
         (click)="signIn()"
-        class="ml-1 inline-flex h-11 items-center gap-2 rounded-md bg-brand-primary-500 px-4 text-sm font-semibold text-white transition-colors hover:bg-brand-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500"
+        class="ml-1 inline-flex h-11 items-center gap-1.5 rounded-md bg-transparent px-3 text-sm font-semibold text-brand-primary-500 transition-colors hover:bg-brand-primary-50 hover:text-brand-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 dark:text-brand-primary-300 dark:hover:bg-gray-800 dark:hover:text-brand-primary-200"
         data-testid="sign-in-button"
-        i18n="@@header.signIn"
       >
-        Sign in
+        <lib-icon name="log-in" [size]="16" aria-hidden="true" />
+        <span i18n="@@header.signIn">Sign in</span>
       </button>
       } @case ('authenticated') { @if (authState(); as state) { @if (state.kind === 'authenticated')
       {
diff --git a/libs/shared/ui/src/lib/icon/icon.ts b/libs/shared/ui/src/lib/icon/icon.ts
index 7bb2063..51995c5 100644
--- a/libs/shared/ui/src/lib/icon/icon.ts
+++ b/libs/shared/ui/src/lib/icon/icon.ts
@@ -15,6 +15,7 @@ import {
   Grid2x2,
   House,
   LayoutDashboard,
+  LogIn,
   LogOut,
   type LucideIconData,
   LucideAngularModule,
@@ -67,6 +68,7 @@ const ICON_REGISTRY = {
   'grid-2x2': Grid2x2,
   home: House,
   'layout-dashboard': LayoutDashboard,
+  'log-in': LogIn,
   'log-out': LogOut,
   mail: Mail,
   monitor: Monitor,