diff --git a/playground/app.tsx b/playground/app.tsx
index b500108..66cb1ed 100644
--- a/playground/app.tsx
+++ b/playground/app.tsx
@@ -10,8 +10,9 @@ export default () => {
 
 	return (<div className='app'>
 		<div className="border">
-			<SingleWeekPicker />
-			<SingleDatePicker />
+			<div>
+				<SingleWeekPicker />
+			</div>
 		</div>
 	</div>)
 }
\ No newline at end of file
diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index b379cbe..0d24d4e 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -3,14 +3,14 @@ import { getCalendarDates, getL10Weekday, generateUniqueId, applyColor } from '.
 
 export interface SingleDatePickerProps {
 	/**
-	 	* Control the selected
+			* Control the selected
 		* date programmatically, including situations like provide a default value or control the selected 
 		* date by parent component. Use 1-12 for month, instead of 0-11, if you are using object to set the
 		* value.
 		* @example { year: 2025, month: 1, day: 1 }
 		* @example new Date(2025, 0, 1)
 		* @default new Date()
-	 	*/
+			*/
 	value?: Date | { year: number, month: number, day: number }
 
 	/**
@@ -97,11 +97,11 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 		if (!value) return
 		if (!(value instanceof Date)) {
 			if (value.year < 100) value.year = Number(`20${value.year}`)
-			if (value.month < 0 || value.month > 11) 
+			if (value.month < 0 || value.month > 11)
 				return console.warn('Invalid value: Month should be between 1 and 12.')
 			if (value.day < 1 || value.day > 31)
 				return console.warn('Invalid value: Day should be between 1 and 31.')
-		} 
+		}
 		const date = value instanceof Date ? value : new Date(value.year, value.month - 1, value.day)
 		setSelectedDate(date)
 		setCurrentMonth(date.getMonth())
@@ -121,7 +121,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 			hoverColor: hoverColor,
 			borderColor: borderColor
 		})
-	} , [mainColor, accentColor, reversedColor, hoverColor, borderColor])
+	}, [mainColor, accentColor, reversedColor, hoverColor, borderColor])
 
 	function selectDate(date: Date) {
 		setSelectedDate(date)
@@ -175,15 +175,17 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 					setCurrentYear(currentYear + 1)
 				}} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
-			<div className='month-selector-body'>
-				{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
-					setCurrentMonth(index)
-					setSelectMonth(false)
-				}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
-					{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
-				</button>)}
+			<div className='body'>
+				<div className='month-selector-body'>
+					{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
+						setCurrentMonth(index)
+						setSelectMonth(false)
+					}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
+						{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
+					</button>)}
+				</div>
 			</div>
-			{ !!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button> }
+			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	)
 	else return (
@@ -195,23 +197,25 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 				</button>
 				<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
-			<div className='calendar-view-body grid' aria-live="polite">
-				{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
+			<div className='body'>
+				<div className='calendar-view-body grid' aria-live="polite">
+					{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
 
-				{dates.map(date => <button
-					className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
-					key={date.toISOString()}
-					onClick={() => selectDate(date)}
-					aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`}
-					tabIndex={currentMonth !== date.getMonth() ? -1 : 0}
-					aria-hidden={currentMonth !== date.getMonth()}
-					disabled={currentMonth !== date.getMonth()}
-				>
-					{date.getDate()}
-					{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
-				</button>)}
+					{dates.map(date => <button
+						className={`item date ${currentMonth !== date.getMonth() && 'extra-month'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
+						key={date.toISOString()}
+						onClick={() => selectDate(date)}
+						aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`}
+						tabIndex={currentMonth !== date.getMonth() ? -1 : 0}
+						aria-hidden={currentMonth !== date.getMonth()}
+						disabled={currentMonth !== date.getMonth()}
+					>
+						{date.getDate()}
+						{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
+					</button>)}
+				</div>
 			</div>
-			{ !!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button> }
+			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	)
 }
diff --git a/src/components/SingleWeekPicker.tsx b/src/components/SingleWeekPicker.tsx
index 8cf1b4b..db9f862 100644
--- a/src/components/SingleWeekPicker.tsx
+++ b/src/components/SingleWeekPicker.tsx
@@ -133,23 +133,34 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 				<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
 
-			<div className='calendar-view-body flex' aria-live="polite">
-				<div className="listitem">
-					{Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)}
+			<div className="body">
+				<div className="week-indicator">
+					<div className="item title">Wk</div>
+
+					{calendarWeeks.map(week => <div className={`item ${selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum && selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear ? 'active' : ''}`} key={calculateWeekNum(week[0]).weekNum} onClick={() => selectWeek(week[0])}>
+						{calculateWeekNum(week[0]).weekNum}
+					</div>)}
+
 				</div>
 
-				{calendarWeeks.map((week, index) => {
-					const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum
-					return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])}>
-						{week.map(date => <div
-							className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
-							key={date.getDate()}
-						>
-							{date.getDate()}
-							{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
-						</div>)}
-					</button>
-				})}
+				<div className='calendar-view-body flex' aria-live="polite">
+					<div className="listitem">
+						{Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)}
+					</div>
+
+					{calendarWeeks.map((week, index) => {
+						const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum
+						return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])}>
+							{week.map(date => <div
+								className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
+								key={date.getDate()}
+							>
+								{date.getDate()}
+								{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
+							</div>)}
+						</button>
+					})}
+				</div>
 			</div>
 		</div>
 	}
diff --git a/src/style.scss b/src/style.scss
index f2b0a0f..9dde3c2 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -7,6 +7,7 @@
 		background: none;
 		cursor: pointer;
 		color: var(--datenel-main-color);
+
 		&:hover {
 			background: var(--datenel-hover-color);
 		}
@@ -36,7 +37,7 @@
 				height: 1rem;
 			}
 
-			&.stepper{
+			&.stepper {
 				width: 1.75rem;
 				height: 1.75rem;
 				display: flex;
@@ -52,89 +53,132 @@
 		}
 
 		input.indicator {
-			border:none;
+			border: none;
 			background: none;
 			text-align: center;
 			outline: none;
 			border-radius: 0.25rem;
 			padding: 0.25rem 0;
 			color: var(--datenel-main-color);
+
 			&:hover {
 				background: var(--datenel-hover-color);
 			}
 		}
 	}
 
-	.calendar-view-body {
-		padding: 0.75rem;
-		gap: 0.125rem;
-		&.grid{
-			display: grid;
-			grid-template-columns: repeat(7, 1fr);
-			.item.date {
-				border-radius: 50%;
-				&.extra-month {
-					cursor: default;
-				}
-	
-				&.active {
-					background: var(--datenel-accent-color);
-					color: var(--datenel-reversed-color);
-				}
-			}
-		}
-		&.flex {
-			display: flex;
-			flex-direction: column;
-			.listitem {
-				padding: 0;
+	.body {
+		display: flex;
+		.calendar-view-body {
+			padding: 0.75rem;
+			gap: 0.125rem;
+
+			&.grid {
 				display: grid;
 				grid-template-columns: repeat(7, 1fr);
-				border-radius: 1rem;
+
 				.item.date {
-					background: none;
-				}
-				&.active {
-					background: var(--datenel-accent-color);
-					color: var(--datenel-reversed-color);
-					.extra-month {
-						opacity: 0.5;
+					border-radius: 50%;
+
+					&.extra-month {
+						cursor: default;
+					}
+
+					&.active {
+						background: var(--datenel-accent-color);
+						color: var(--datenel-reversed-color);
 					}
 				}
 			}
-			
-		}
-		.item {
-			width: 2rem;
-			height: 2rem;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			font-size: 0.75rem;
-			position: relative;
-			&.extra-month {
-				opacity: 0.3;
+
+			&.flex {
+				display: flex;
+				flex-direction: column;
+
+				.listitem {
+					padding: 0;
+					display: grid;
+					grid-template-columns: repeat(7, 1fr);
+					border-radius: 1rem;
+
+					.item.date {
+						background: none;
+					}
+
+					&.active {
+						background: var(--datenel-accent-color);
+						color: var(--datenel-reversed-color);
+
+						.extra-month {
+							opacity: 0.5;
+						}
+					}
+				}
+
 			}
-			&.day-indicator {
+
+			.item {
+				width: 2rem;
+				height: 2rem;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 0.75rem;
+				position: relative;
+
+				&.extra-month {
+					opacity: 0.3;
+				}
+
+				&.day-indicator {
+					opacity: 0.5;
+				}
+
+				.today-indicator {
+					position: absolute;
+					bottom: 0.25rem;
+					width: 0.25rem;
+					height: 0.25rem;
+				}
+			}
+		}
+
+		.month-selector-body {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			padding: 0.75rem;
+			gap: 0.125rem;
+
+			.item {
+				border-radius: 0.25rem;
+				height: 2rem;
+			}
+		}
+
+		.week-indicator {
+			display: flex;
+			flex-direction: column;
+			border-right: 1px solid var(--datenel-border-color);
+			gap: 0.125rem;
+			padding: 0.75rem;
+
+			.item {
+				font-size: 0.75rem;
+				width: 2rem;
+				height: 2rem;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 50%;
+			}
+
+			.item.title {
 				opacity: 0.5;
 			}
-			.today-indicator {
-				position: absolute;
-				bottom: 0.25rem;
-				width: 0.25rem;
-				height: 0.25rem;
+			.item.active {
+				background: var(--datenel-accent-color);
+				color: var(--datenel-reversed-color);
 			}
 		}
 	}
-
-	.month-selector-body {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		padding: 0.75rem;
-		gap: 0.125rem;
-		.item {
-			border-radius: 0.25rem;
-			height: 2rem;
-		}
-	}
-}
+}
\ No newline at end of file