diff --git a/playground/app.tsx b/playground/app.tsx
index 66cb1ed..4529d80 100644
--- a/playground/app.tsx
+++ b/playground/app.tsx
@@ -5,13 +5,13 @@ import './app.scss'
 export default () => {
 
 	function onSelect(value) {
-		alert(`You select ${value.year}-${value.month}-${value.day}`)
+		alert(`You select ${value.weekYear} - ${value.weekNum}`)
 	}
 
 	return (<div className='app'>
 		<div className="border">
 			<div>
-				<SingleWeekPicker />
+				<SingleWeekPicker onSelect={onSelect} />
 			</div>
 		</div>
 	</div>)
diff --git a/src/components/SingleWeekPicker.tsx b/src/components/SingleWeekPicker.tsx
index de3a67b..0cfa11f 100644
--- a/src/components/SingleWeekPicker.tsx
+++ b/src/components/SingleWeekPicker.tsx
@@ -43,8 +43,8 @@ export interface SingleWeekPickerProps {
 
 	/**
 	 * A callback function that will be called when a week is selected inside the panel. Note that
-	 * Datenel will follow the ISO 8601 standard as well as the return rules of Luxon, which will
-	 * treat the week number 53 as the first week of the next year if exist.
+	 * Datenel will follow the ISO 8601 standard to calculate the week number, which means that the first
+	 * week of the year is the week with the first Friday in it (week started from Monday).
 	 * @param {{ year: number, month: number, day: number }} - The date user selected.
 	 * @example { year: 2025, month: 1, day: 1 } // User selected 1 Jan 2025
 	 */
@@ -70,7 +70,7 @@ export interface SingleWeekPickerProps {
  * 
  * @param 
  */
-export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose }: SingleWeekPickerProps) => {
+export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose, onSelect }: SingleWeekPickerProps) => {
 	const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
 	const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
 	const [selectedWeek, setSelectedWeek] = useState<{ weekYear: number, weekNum: number }>(calculateWeekNum(new Date()))
@@ -126,6 +126,7 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 
 	function selectWeek(date: Date) {
 		setSelectedWeek(calculateWeekNum(date))
+		onSelect?.(calculateWeekNum(date))
 	}
 
 	function changeYear(year: string) {
diff --git a/src/utils/calculateWeekNum.ts b/src/utils/calculateWeekNum.ts
index 0b5d59c..b7ebbc7 100644
--- a/src/utils/calculateWeekNum.ts
+++ b/src/utils/calculateWeekNum.ts
@@ -4,15 +4,15 @@ export default (date: Date): { weekYear: number, weekNum: number } => {
 
 	tempDate.setDate(tempDate.getDate() + 3 - (tempDate.getDay() || 7))
 
-	const firstThursday = new Date(tempDate.getFullYear(), 0, 4)
-	firstThursday.setDate(firstThursday.getDate() + 3 - (firstThursday.getDay() || 7))
+	const firstFriday = new Date(tempDate.getFullYear(), 0, 5) // Changed to 5 for Friday
+	firstFriday.setDate(firstFriday.getDate() + 3 - (firstFriday.getDay() || 7))
 
-	const diffInDays = Math.floor((tempDate.getTime() - firstThursday.getTime()) / (24 * 60 * 60 * 1000))
+	const diffInDays = Math.floor((tempDate.getTime() - firstFriday.getTime()) / (24 * 60 * 60 * 1000))
 
 	const weekNum = Math.ceil((diffInDays + 1) / 7)
 
 	return {
-		weekYear: weekNum === 53 ? tempDate.getFullYear() + 1 : tempDate.getFullYear(),
+		weekYear: tempDate.getFullYear(),
 		weekNum
 	}
 }
\ No newline at end of file