diff --git a/apps/web/components/organisms/header/header.tsx b/apps/web/components/organisms/header/header.tsx
index df9bca6..72f2791 100644
--- a/apps/web/components/organisms/header/header.tsx
+++ b/apps/web/components/organisms/header/header.tsx
@@ -17,11 +17,7 @@ export const Header = () => {
 	return (
 		<header className="flex  px-12 py-4  justify-between items-center w-full sticky shadow-xl z-10">
 			<Link href="/">
-				<Heading
-					tag="h1"
-					size="large"
-					className="font-bold text-2xl whitespace-nowrap mr-20"
-				>
+				<Heading tag="h1" size="large" fontWeight="bold">
 					Start-Coding
 				</Heading>
 			</Link>
diff --git a/apps/web/components/templates/challenge/single/singleChallenge.tsx b/apps/web/components/templates/challenge/single/singleChallenge.tsx
index e5707c5..92fe584 100644
--- a/apps/web/components/templates/challenge/single/singleChallenge.tsx
+++ b/apps/web/components/templates/challenge/single/singleChallenge.tsx
@@ -32,11 +32,7 @@ export const SingleChallengePage = ({
 				onClose={onClickHandler}
 			/>
 			<div className="flex items-baseline justify-between border-b border-gray-200 pt-10 pb-6">
-				<Heading
-					tag="h2"
-					size="large"
-					className="text-4xl font-bold tracking-tight text-gray-900"
-				>
+				<Heading tag="h2" size="2xl" fontWeight="bold">
 					{challenge?.title}
 				</Heading>
 				<div className="flex items-center">
diff --git a/apps/web/components/templates/challenges/all/allChallenges.tsx b/apps/web/components/templates/challenges/all/allChallenges.tsx
index a38bdf8..3b865e1 100644
--- a/apps/web/components/templates/challenges/all/allChallenges.tsx
+++ b/apps/web/components/templates/challenges/all/allChallenges.tsx
@@ -112,11 +112,7 @@ export const AllChallengesPage = () => {
 			</Transition.Root>
 			<main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 				<div className="flex items-baseline justify-between border-b border-gray-200 pt-10 pb-6">
-					<Heading
-						tag="h1"
-						size="large"
-						className="text-4xl font-bold tracking-tight text-gray-900"
-					>
+					<Heading tag="h1" size="2xl" fontWeight="bold">
 						Zadania
 					</Heading>
 					<div className="flex items-center">
diff --git a/apps/web/components/templates/errors/404.tsx b/apps/web/components/templates/errors/404.tsx
index 727832d..2abff9f 100644
--- a/apps/web/components/templates/errors/404.tsx
+++ b/apps/web/components/templates/errors/404.tsx
@@ -3,7 +3,7 @@ import { Heading, Link, Text } from 'ui';
 export const Error404 = () => {
 	return (
 		<section className="flex h-[85vh] md:h-[90vh] flex-col justify-center items-center">
-			<Heading tag="h2" size="large" className="text-4xl pb-5">
+			<Heading tag="h2" size="2xl" fontWeight="bold">
 				Error 404
 			</Heading>
 			<Text size="medium" variant="default" tag="p">
diff --git a/packages/ui/components/atoms/heading/heading.tsx b/packages/ui/components/atoms/heading/heading.tsx
index 366bf0d..0d66a32 100644
--- a/packages/ui/components/atoms/heading/heading.tsx
+++ b/packages/ui/components/atoms/heading/heading.tsx
@@ -1,32 +1,46 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import cx from 'clsx';
 
-type TextSize = 'small' | 'medium' | 'large';
+const defaultStyles = 'whitespace-nowrap';
+
+type TextSize = 'small' | 'base' | 'large' | 'xl' | '2xl';
+const textSizes = {
+	small: 'text-sm',
+	base: 'text-base',
+	large: 'text-lg',
+	xl: 'text-xl',
+	'2xl': 'text-2xl',
+} as const;
 
 export type HeadingTag = keyof Pick<
 	JSX.IntrinsicElements,
 	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 >;
 
+type FontWeight = 'normal' | 'medium' | 'bold';
+const fontWeights = {
+	normal: 'font-normal',
+	medium: 'font-medium',
+	bold: 'font-bold',
+} as const;
+
 type HeadingProps = {
 	children: ReactNode;
 	tag: HeadingTag;
 	size: TextSize;
+	fontWeight: FontWeight;
 } & HTMLAttributes<HTMLHeadingElement>;
 
 export const Heading = ({
 	children,
 	tag: Tag,
 	size,
+	fontWeight,
 	...rest
 }: HeadingProps) => {
 	return (
 		<Tag
-			className={cx({
-				'text-sm': size === 'small',
-				'text-base': size === 'medium',
-				'text-lg': size === 'large',
-			})}
+			className={cx(defaultStyles, textSizes[size], fontWeights[fontWeight])}
 			{...rest}
 		>
 			{children}