diff --git a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte b/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte
index 0ae91a53..bf8bbc8b 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowLeft01Icon, UserCircleIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface IHeaderProps extends HTMLAttributes<HTMLElement> {
@@ -11,7 +11,7 @@ interface IHeaderProps extends HTMLAttributes<HTMLElement> {
 	handleProfile?: () => void;
 }
 
-let {
+const {
 	title = "Create PIN",
 	isUserLoggedIn = true,
 	isBackRequired = true,
@@ -23,20 +23,14 @@ const cBase = "w-full h-[9vh] flex justify-between items-center";
 
 <header {...restProps} class={cn(cBase, restProps.class)}>
     {#if isBackRequired}
-        <button class="flex justify-start" onclick={() => window.history.back()}>
-            <HugeiconsIcon size="5.5vw"  color="var(--color-black-700)" icon={ArrowLeft01Icon} />
-        </button>
+        <Button.Icon icon={ArrowLeft01Icon} iconSize="5.5vw" iconColor={"text-black-700"} onclick={() => window.history.back()} />
     {:else}
-        <!-- svelte-ignore element_invalid_self_closing_tag -->
-        <span aria-hidden="true"/>
+        <span aria-hidden="true"></span>
     {/if}
     <h3 class="text-center">{title}</h3>
     {#if isUserLoggedIn}
-        <button class="flex justify-end" onclick={handleProfile}>
-            <HugeiconsIcon size="8.1vw" color="var(--color-black-700)" icon={UserCircleIcon} />
-        </button>
+        <Button.Icon icon={UserCircleIcon} iconSize="8.1vw" iconColor={"text-black-700"} onclick={handleProfile} />
     {:else}
-        <!-- svelte-ignore element_invalid_self_closing_tag -->
-        <span aria-hidden="true"/>
+        <span aria-hidden="true"></span>
     {/if}
 </header>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
index 823c307a..7c056126 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -20,7 +21,7 @@ interface IIdentityCard extends HTMLAttributes<HTMLElement> {
 	usedStorage?: number;
 }
 
-let {
+const {
 	variant = "eName",
 	userId,
 	viewBtn,
@@ -48,22 +49,17 @@ $effect(() => {
     <div class="p-5 flex flex-col gap-2">
         <div class="flex justify-between">
             {#if variant === 'eName'}  
-                <HugeiconsIcon size={30} strokeWidth={2} color="var(--color-secondary)" icon={CheckmarkBadge02Icon} />
-                <div class="flex gap-3 items-center"> 
-                    <button class="flex justify-start" onclick={shareBtn}>
-                        <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={Upload03Icon} />
-                    </button>
-                    <button class="flex justify-start" onclick={viewBtn}>
-                        <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
-                    </button>
-                </div>
+                <HugeiconsIcon size={30} strokeWidth={2} className="text-secondary" icon={CheckmarkBadge02Icon} />
+                <div class="flex gap-3 items-center">  
+                    <Button.Icon icon={Upload03Icon} iconColor={"white"} strokeWidth={2} onclick={shareBtn} />
+                    <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                    </div>
             {:else if variant === 'ePassport'}
-                <p class="bg-white flex items-center rounded-4xl px-5 py-2 small font-semibold">HIGH SECURITY</p>
-                <button class="flex justify-start" onclick={viewBtn}>
-                    <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
-                </button>
+                <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+                <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                
             {:else if variant === 'eVault'}
-            <h3 class="text-black-300 font-semibold mb-3">{state.progressWidth} Used</h3>
+                <div class="text-black-300 text-3xl mb-3">{state.progressWidth} Used</div>
             {/if}
         </div>
         <div>
@@ -98,4 +94,5 @@ $effect(() => {
     </div>
 </div>
 
-
+    
+    
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts
index d43d0d56..9cdec274 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts
@@ -1,4 +1,4 @@
-import { FlashlightIcon } from "@hugeicons/core-free-icons";
+import { FlashlightIcon, ViewIcon } from "@hugeicons/core-free-icons";
 import type { ComponentProps } from "svelte";
 import ButtonIcon from "./ButtonIcon.svelte";
 
@@ -6,10 +6,7 @@ export default {
 	title: "UI/ButtonIcon",
 	component: ButtonIcon,
 	tags: ["autodocs"],
-	render: (args: {
-		Component: ButtonIcon<{ icon: typeof FlashlightIcon }>;
-		props: ComponentProps<typeof ButtonIcon>;
-	}) => ({
+	render: (args: ComponentProps<typeof ButtonIcon>) => ({
 		Component: ButtonIcon,
 		props: args,
 	}),
@@ -19,10 +16,26 @@ export const Default = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
 			ariaLabel: "Default button",
-			size: "md",
+			bgSize: "md", // Predefined size
+			iconSize: "md",
+			icon: ViewIcon,
+			bgColor: "black",
+			iconColor: "white",
+		},
+	}),
+};
+
+export const CustomSize = {
+	render: () => ({
+		Component: ButtonIcon,
+		props: {
+			ariaLabel: "Custom sized button",
+			bgSize: "w-[120px] h-[120px]", // Custom Tailwind size
+			iconSize: 56, // Custom pixel size
 			icon: FlashlightIcon,
+			bgColor: "bg-danger",
+			iconColor: "white",
 		},
 	}),
 };
@@ -31,24 +44,32 @@ export const Loading = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
 			ariaLabel: "Loading button",
-			size: "md",
+			bgSize: "md",
+			iconSize: "md",
 			icon: FlashlightIcon,
 			isLoading: true,
+			bgColor: "black",
+			iconColor: "white",
 		},
 	}),
 };
 
-export const Active = {
+export const WithCallback = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
-			ariaLabel: "Active button",
-			size: "md",
+			ariaLabel: "Button with async callback",
+			bgSize: "md",
+			iconSize: "md",
 			icon: FlashlightIcon,
-			isActive: true,
+			callback: async () => {
+				await new Promise((resolve) => setTimeout(resolve, 2000));
+				console.log("Action completed!");
+			},
+			blockingClick: true,
+			bgColor: "primary",
+			iconColor: "white",
 		},
 	}),
 };
diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
index 0fd927da..4e6be406 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte
@@ -1,32 +1,49 @@
-<script lang="ts" generics="T">
+<script lang="ts">
 import { cn } from "$lib/utils";
 import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 
 interface IButtonProps extends HTMLButtonAttributes {
-	variant?: "white" | "clear-on-light" | "clear-on-dark";
+	icon: IconSvgElement;
 	isLoading?: boolean;
 	callback?: () => Promise<void>;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
-	size?: "sm" | "md" | "lg";
-	iconSize?: "sm" | "md" | "lg" | number;
-	icon: IconSvgElement;
-	isActive?: boolean;
+	bgSize?: "sm" | "md" | "lg" | number | string;
+	bgColor?:
+		| "black"
+		| "white"
+		| "gray"
+		| "primary"
+		| "secondary"
+		| "danger"
+		| string;
+	iconSize?: "sm" | "md" | "lg" | number | string;
+	iconColor?:
+		| "black"
+		| "white"
+		| "gray"
+		| "primary"
+		| "secondary"
+		| "danger"
+		| string;
+	strokeWidth?: number;
 }
 
 const {
-	variant = "white",
+	icon,
 	isLoading,
 	callback,
 	onclick,
 	blockingClick,
 	type = "button",
-	size = "md",
-	icon,
-	iconSize = undefined,
-	isActive = false,
+	bgSize,
+	bgColor = "transparent",
+	iconSize = "md",
+	iconColor = "black",
+	strokeWidth = 1.5,
+	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 
@@ -46,119 +63,122 @@ const handleClick = async () => {
 	}
 };
 
-const variantClasses = {
-	white: { background: "bg-white", text: "text-black" },
-	"clear-on-light": { background: "transparent", text: "text-black" },
-	"clear-on-dark": { background: "transparent", text: "text-white" },
-};
-
-const disabledClasses = {
-	white: { background: "bg-white", text: "text-black-500" },
-	"clear-on-light": { background: "bg-transparent", text: "text-black-500" },
-	"clear-on-dark": { background: "bg-transparent", text: "text-black-500" },
-};
-
-const isActiveClasses = {
-	white: { background: "bg-secondary-500", text: "text-black" },
-	"clear-on-light": { background: "bg-secondary-500", text: "text-black" },
-	"clear-on-dark": { background: "bg-secondary-500", text: "text-black" },
-};
-
 const sizeVariant = {
 	sm: "h-8 w-8",
 	md: "h-[54px] w-[54px]",
 	lg: "h-[108px] w-[108px]",
-};
+} as const;
 
 const iconSizeVariant = {
 	sm: 24,
-	md: 24,
+	md: 30,
 	lg: 36,
-};
+} as const;
+
+const backgroundColor: Record<string, string> = {
+	black: "bg-black",
+	white: "bg-white",
+	gray: "bg-gray",
+	primary: "bg-primary",
+	secondary: "bg-secondary",
+	danger: "bg-danger",
+} as const;
+
+const textColor: Record<string, string> = {
+	black: "text-black",
+	white: "text-white",
+	gray: "text-gray",
+	primary: "text-primary",
+	secondary: "text-secondary",
+	danger: "text-danger",
+} as const;
 
 const resolvedIconSize =
-	typeof iconSize === "number" ? iconSize : iconSizeVariant[iconSize ?? size];
+	iconSize === undefined
+		? iconSizeVariant.md
+		: typeof iconSize === "number"
+			? iconSize
+			: iconSize in iconSizeVariant
+				? iconSizeVariant[iconSize as keyof typeof iconSizeVariant]
+				: iconSize;
+
+const resolvedBgSize =
+	bgSize === undefined
+		? "" // if bgSize is empty, there is no background
+		: typeof bgSize === "number"
+			? `h-${bgSize} w-${bgSize}`
+			: bgSize in sizeVariant
+				? sizeVariant[bgSize as keyof typeof sizeVariant]
+				: bgSize;
 
 const classes = $derived({
 	common: cn(
-		"cursor-pointer w-min flex items-center justify-center rounded-full font-semibold duration-100",
-		sizeVariant[size],
+		"cursor-pointer flex items-center justify-center rounded-full font-semibold duration-100",
 	),
-	background: disabled
-		? disabledClasses[variant].background
-		: isActive
-			? isActiveClasses[variant].background
-			: variantClasses[variant].background,
-	text: disabled
-		? disabledClasses[variant].text
-		: isActive
-			? isActiveClasses[variant].text
-			: variantClasses[variant].text,
-	disabled: "cursor-not-allowed",
+	bgSize: resolvedBgSize,
+	background: bgColor in backgroundColor ? backgroundColor[bgColor] : bgColor,
+	iconColor: iconColor in textColor ? textColor[iconColor] : iconColor,
+	disabled: "cursor-not-allowed opacity-50",
+	iconSize: resolvedIconSize,
 });
 </script>
 
 <button
-  {...restProps}
-  class={cn(
-    [
-      classes.common,
-      classes.background,
-      classes.text,
-      disabled && classes.disabled,
-      restProps.class,
-    ].join(' ')
-  )}
-  {disabled}
-  onclick={callback ? handleClick : onclick}
-  {type}
+	{...restProps}
+	class={cn([classes.common, classes.bgSize, classes.iconColor, classes.background, disabled && classes.disabled, restProps.class].join(' '))}
+	{disabled}
+	onclick={callback ? handleClick : onclick}
+	{type}
 >
-  {#if isLoading || isSubmitting}
-    <div
-      class="loading loading-spinner absolute loading-lg {variantClasses[
-        variant
-      ].text}"
-    ></div>
-  {:else}
-    <HugeiconsIcon {icon} size={resolvedIconSize} />
-  {/if}
+	{#if isLoading || isSubmitting}
+	<div class="loading loading-spinner absolute loading-lg {cn(classes.iconColor)}"></div>
+	{:else}
+	<HugeiconsIcon {icon} size={classes.iconSize} {strokeWidth} color={classes.iconColor} />
+	{/if}
 </button>
 
 <!-- 
     @component
     export default ButtonIcon
     @description
-    ButtonIcon component is a button with an icon.
-    
+    ButtonIcon is a customizable icon button component supporting both predefined and custom styles for size and colors.
+
     @props
-    - variant: 'white' | 'clear-on-light' | 'clear-on-dark' .
-    - isLoading: boolean 
-    - callback: () => Promise<void> 
-    - onclick: () => void 
-    - blockingClick: boolean - Prevents multiple clicks
-    - type: 'button' | 'submit' | 'reset' 
-    - size: 'sm' | 'md' | 'lg' 
-    - iconSize: 'sm' | 'md' | 'lg' | number 
-    - icon: IconSvgElement - Needs icon from Hugeicon library
-    - isActive: boolean 
-
-   
+    - icon: IconSvgElement - An icon from the Hugeicons library.
+    - isLoading: boolean - Displays a loading spinner when true.
+    - callback: () => Promise<void> - Async function executed on click.
+    - onclick: () => void - Regular click handler.
+    - blockingClick: boolean - Prevents multiple clicks while an async action is in progress.
+    - type: 'button' | 'submit' | 'reset' - Defines the button type.
+    - bgSize: 'sm' | 'md' | 'lg' | number | string - Predefined size, numeric pixel value, or a Tailwind class.
+    - iconSize: 'sm' | 'md' | 'lg' | number | string - Predefined size, numeric pixel value, or a Tailwind class.
+    - bgColor: 'black' | 'white' | 'gray' | 'primary' | 'secondary' | 'danger' | string - Predefined color or any Tailwind background class.
+    - iconColor: 'black' | 'white' | 'gray' | 'primary' | 'secondary' | 'danger' | string - Predefined color or any Tailwind text class.
+    - strokeWidth: number - Defines the stroke width of the icon.
+
     @usage
     ```html
     <script lang="ts">
-      import * as Button from '$lib/ui/Button'
-      import { FlashlightIcon } from '@hugeicons/core-free-icons'
+      import * as Button from '$lib/ui/Button';
+      import { FlashlightIcon, Upload03Icon } from '@hugeicons/core-free-icons';
+
+	  function shareBtn() {
+	  	console.log('Share button clicked');		
+	}				
       
-      let flashlightOn = $state(false)
+      let flashlightOn = $state(false);
     </script>
 
     <Button.Icon
-      variant="white"
-      aria-label="Open pane"
-      size="md"
+      aria-label="Toggle flashlight"
+      bgSize="w-12 h-12"  // Custom Tailwind class for background size
+      iconSize={32}        // Numeric pixel size
+      bgColor="primary"    // Predefined or Tailwind color class
+      iconColor="white"    // Predefined or Tailwind text color
       icon={FlashlightIcon}
       onclick={() => (flashlightOn = !flashlightOn)}
-      isActive={flashlightOn}
-    ></Button.Icon>
+    />
+
+	<Button.Icon icon={Upload03Icon} iconColor={"white"} strokeWidth={2} onclick={shareBtn} />
     ```
-     -->
+-->
\ No newline at end of file