diff --git a/.changeset/nice-jeans-film.md b/.changeset/nice-jeans-film.md
new file mode 100644
index 0000000..3a4c9f8
--- /dev/null
+++ b/.changeset/nice-jeans-film.md
@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": patch
+---
+
+remove dimenstions from SidebarHeader Icon
diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx
index 28481ab..938e505 100644
--- a/src/components/Sidebar/Sidebar.stories.tsx
+++ b/src/components/Sidebar/Sidebar.stories.tsx
@@ -39,7 +39,7 @@ export const defaultStory: Story = {
 	args: {
 		children: (
 			<>
-				<SidebarHeader icon={<CloseButton />} title="ZenML Tenant">
+				<SidebarHeader icon={<CloseButton className="w-6 h-6" />} title="ZenML Tenant">
 					<SidebarHeaderImage>
 						<img src={`https://avatar.vercel.sh/ZenMLTenant?size=32`} />
 					</SidebarHeaderImage>
@@ -50,21 +50,21 @@ export const defaultStory: Story = {
 						<li className="w-full">
 							<SidebarItem isActive={true}>
 								<div>
-									<SidebarItemContent isActive={true} icon={<CPU />} label="Models" />
+									<SidebarItemContent svgStroke isActive={true} icon={<CPU />} label="Models" />
 								</div>
 							</SidebarItem>
 						</li>
 						<li className="w-full">
 							<SidebarItem isActive={false}>
 								<div>
-									<SidebarItemContent isActive={false} icon={<CPU />} label="Models" />
+									<SidebarItemContent svgStroke isActive={false} icon={<CPU />} label="Models" />
 								</div>
 							</SidebarItem>
 						</li>
 						<li className="w-full">
 							<SidebarItem isActive={false}>
 								<div>
-									<SidebarItemContent isActive={false} icon={<CPU />} label="Models" />
+									<SidebarItemContent svgStroke isActive={false} icon={<CPU />} label="Models" />
 								</div>
 							</SidebarItem>
 						</li>
@@ -72,7 +72,7 @@ export const defaultStory: Story = {
 					<div style={{ marginTop: "auto" }}>
 						<SidebarItem>
 							<div>
-								<SidebarItemContent isActive={false} icon={<CPU />} label="Models" />
+								<SidebarItemContent svgStroke isActive={false} icon={<CPU />} label="Models" />
 							</div>
 						</SidebarItem>
 					</div>
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index d853f2e..652b0c2 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -62,7 +62,7 @@ export const SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(
 
 		const iconClasses = cn(
 			existingIconClasses,
-			"w-6 ml-auto shrink-0 h-6 opacity-0 group-hover:opacity-100  duration-300 transition-all"
+			"ml-auto shrink-0 opacity-0 group-hover:opacity-100  duration-300 transition-all"
 		);
 
 		return (
diff --git a/src/components/Sidebar/SidebarHeader.stories.tsx b/src/components/Sidebar/SidebarHeader.stories.tsx
index 0e5df48..7c7022f 100644
--- a/src/components/Sidebar/SidebarHeader.stories.tsx
+++ b/src/components/Sidebar/SidebarHeader.stories.tsx
@@ -25,7 +25,7 @@ export const sidebarHeader: Story = {
 	name: "Sidebar Header",
 	args: {
 		title: "ZenML Tenant",
-		icon: <CloseButton />,
+		icon: <CloseButton className="w-6 h-6" />,
 		children: (
 			<SidebarHeaderImage>
 				<img src={`https://avatar.vercel.sh/ZenMLTenant?size=32`} />
diff --git a/src/components/Sidebar/SidebarItem.stories.tsx b/src/components/Sidebar/SidebarItem.stories.tsx
index c440112..5aac3ec 100644
--- a/src/components/Sidebar/SidebarItem.stories.tsx
+++ b/src/components/Sidebar/SidebarItem.stories.tsx
@@ -27,7 +27,7 @@ export const inactive: Story = {
 		isActive: false,
 		children: (
 			<div>
-				<SidebarItemContent icon={<CPU />} label="Models" />
+				<SidebarItemContent svgStroke icon={<CPU />} label="Models" />
 			</div>
 		)
 	}
@@ -39,7 +39,7 @@ export const active: Story = {
 		isActive: true,
 		children: (
 			<div>
-				<SidebarItemContent isActive={true} icon={<CPU />} label="Models" />
+				<SidebarItemContent svgStroke isActive={true} icon={<CPU />} label="Models" />
 			</div>
 		)
 	}