diff --git a/src/form/Calendar/Calendar.story.tsx b/src/form/Calendar/Calendar.story.tsx
index 869baec5..85bdd51d 100644
--- a/src/form/Calendar/Calendar.story.tsx
+++ b/src/form/Calendar/Calendar.story.tsx
@@ -25,6 +25,25 @@ export const Simple = () => {
   );
 };
 
+export const Today = () => {
+  const [date, setDate] = useState<Date>();
+
+  return (
+    <Card>
+      <Calendar
+        showToday
+        showDayOfWeek
+        value={date}
+        onChange={(date: Date) => setDate(date)}
+      />
+      <Divider />
+      <Stack inline={false} justifyContent="center">
+        {date?.toLocaleDateString() ?? 'No date selected'}
+      </Stack>
+    </Card>
+  );
+};
+
 export const Disabled = () => {
   const [date, setDate] = useState<Date>();
 
@@ -121,6 +140,7 @@ export const Range = () => {
         onChange={val => setRange(val as [Date, Date | undefined])}
         isRange
         showDayOfWeek
+        showToday
       />
       <Divider />
       <Stack justifyContent="center">
diff --git a/src/form/Calendar/Calendar.tsx b/src/form/Calendar/Calendar.tsx
index af0f5236..fcd60d33 100644
--- a/src/form/Calendar/Calendar.tsx
+++ b/src/form/Calendar/Calendar.tsx
@@ -74,6 +74,11 @@ export interface CalendarProps {
    */
   showDayOfWeek?: boolean;
 
+  /**
+   * Whether to highlight the today.
+   */
+  showToday?: boolean;
+
   /**
    * Whether to animate the calendar.
    */
@@ -101,9 +106,10 @@ export const Calendar: FC<CalendarProps> = ({
   value,
   disabled,
   isRange,
-  previousArrow = '←',
-  nextArrow = '→',
+  previousArrow = '‹',
+  nextArrow = '›',
   showDayOfWeek,
+  showToday,
   animated = true,
   onChange,
   onViewChange,
@@ -221,7 +227,7 @@ export const Calendar: FC<CalendarProps> = ({
           variant="text"
           disabled={disabled}
           onClick={previousClickHandler}
-          className={twMerge(theme.header.prev)}
+          className={theme.header.prev}
           disablePadding
         >
           {previousArrow}
@@ -230,11 +236,11 @@ export const Calendar: FC<CalendarProps> = ({
           disabled={disabled}
           variant="text"
           onClick={headerClickHandler}
-          className={twMerge(theme.header.mid)}
+          className={theme.header.mid}
           disablePadding
           fullWidth
         >
-          <SmallHeading disableMargins className={twMerge(theme.title)}>
+          <SmallHeading disableMargins className={theme.title}>
             {view === 'days' && format(viewValue, 'MMMM')}
             {view === 'months' && <>{yearValue}</>}
             {view === 'years' && (
@@ -248,7 +254,7 @@ export const Calendar: FC<CalendarProps> = ({
           variant="text"
           disabled={disabled}
           onClick={nextClickHandler}
-          className={twMerge(theme.header.next)}
+          className={theme.header.next}
           disablePadding
         >
           {nextArrow}
@@ -277,6 +283,7 @@ export const Calendar: FC<CalendarProps> = ({
               isRange={isRange}
               current={isRange ? [rangeStart, rangeEnd] : value}
               showDayOfWeek={showDayOfWeek}
+              showToday={showToday}
               xAnimation={xAnimation}
               animated={animated}
               onChange={dateChangeHandler}
diff --git a/src/form/Calendar/CalendarDays/CalendarDays.tsx b/src/form/Calendar/CalendarDays/CalendarDays.tsx
index 0208c8cc..7db689ac 100644
--- a/src/form/Calendar/CalendarDays/CalendarDays.tsx
+++ b/src/form/Calendar/CalendarDays/CalendarDays.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
-import { isAfter, isBefore } from 'date-fns';
+import { isAfter, isBefore, isToday } from 'date-fns';
 import { Button } from '@/elements';
 import {
   daysOfWeek,
@@ -9,7 +9,7 @@ import {
   isPreviousWeekEmpty
 } from '@/form/Calendar/utils';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { twMerge } from 'tailwind-merge';
 
@@ -64,6 +64,11 @@ export interface CalendarDaysProps {
    */
   showDayOfWeek?: boolean;
 
+  /**
+   * Whether to highlight the today.
+   */
+  showToday?: boolean;
+
   /**
    * Customize the labels for the days of the week.
    */
@@ -116,6 +121,7 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
   animated,
   xAnimation = 0,
   showDayOfWeek,
+  showToday,
   dayOfWeekLabels = daysOfWeek,
   hidePrevMonthDays,
   hideNextMonthDays,
@@ -187,17 +193,19 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
       return (
         <Button
           key={day.formattedDate}
-          className={twMerge(
-            days.day,
-            !isActive &&
-              (day.isNextMonth || day.isPreviousMonth) &&
-              days.outside,
-            isRangeMiddle && days.range,
-            isRange && isRangeStart && !isRangeEnd && days.startRangeDate,
-            isRange && !rangeConnectsBottom && days.cornerStartDateBottom,
-            isRange && isRangeEnd && !isRangeStart && days.endRangeDate,
-            isRange && !rangeConnectsTop && days.cornerEndDateTop
-          )}
+          className={cn(days.day, {
+            [days.outside]:
+              !isActive && (day.isNextMonth || day.isPreviousMonth),
+            [days.today]: showToday && isToday(day.date),
+            [days.selected]: isActive,
+            [days.hover]: day.date === currentHover,
+            [days.range]: isRangeMiddle,
+            [days.startRangeDate]: isRange && isRangeStart && !isRangeEnd,
+            [days.cornerStartDateBottom]:
+              isRange && isActive && !rangeConnectsBottom,
+            [days.endRangeDate]: isRange && isRangeEnd && !isRangeStart,
+            [days.cornerEndDateTop]: isRange && isActive && !rangeConnectsTop
+          })}
           onMouseEnter={() => handleHover(day.date)}
           onMouseLeave={() => handleHover(null)}
           variant={buttonVariant}
@@ -223,7 +231,8 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
       hoveringDate,
       days,
       hideNextMonthDays,
-      hidePrevMonthDays
+      hidePrevMonthDays,
+      showToday
     ]
   );
 
@@ -239,16 +248,16 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
         }}
       >
         {showDayOfWeek && (
-          <div className={twMerge(days.header)}>
+          <div className={days.header}>
             {dayOfWeekLabels.map(day => (
-              <div key={`day-${day}`} className={twMerge(days.dayOfWeek)}>
+              <div key={`day-${day}`} className={days.dayOfWeek}>
                 {day.substring(0, 2)}
               </div>
             ))}
           </div>
         )}
         {weeks.map((week, i) => (
-          <div key={`week-${i}`} className={twMerge(days.week)}>
+          <div key={`week-${i}`} className={days.week}>
             {week.map(renderDay)}
           </div>
         ))}
diff --git a/src/form/Calendar/CalendarMonths/CalendarMonths.tsx b/src/form/Calendar/CalendarMonths/CalendarMonths.tsx
index 7e6cdbb1..7dd589ae 100644
--- a/src/form/Calendar/CalendarMonths/CalendarMonths.tsx
+++ b/src/form/Calendar/CalendarMonths/CalendarMonths.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Button } from '@/elements';
 import { monthNames } from '@/form/Calendar/utils';
-import { useComponentTheme } from '@/utils';
+import { cn, theme, useComponentTheme } from '@/utils';
 import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { twMerge } from 'tailwind-merge';
 
@@ -30,11 +30,11 @@ export const CalendarMonths: FC<CalendarMonthsProps> = ({
   const { months }: CalendarTheme = useComponentTheme('calendar', customTheme);
 
   return (
-    <div className={twMerge(months.root)}>
+    <div className={months.root}>
       {monthNames.map((month, i) => (
         <Button
           key={month}
-          className={twMerge(months.month)}
+          className={cn(months.month, { [months.selected]: value === i })}
           color={value === i ? 'primary' : 'default'}
           variant={value === i ? 'filled' : 'text'}
           disableMargins
diff --git a/src/form/Calendar/CalendarRange.tsx b/src/form/Calendar/CalendarRange.tsx
index e6f1a7c5..4ad8586e 100644
--- a/src/form/Calendar/CalendarRange.tsx
+++ b/src/form/Calendar/CalendarRange.tsx
@@ -13,7 +13,6 @@ import { CalendarProps } from './Calendar';
 import { CalendarDays } from './CalendarDays';
 import { SmallHeading } from '@/typography';
 import { Divider, Stack } from '@/layout';
-import { twMerge } from 'tailwind-merge';
 import { useComponentTheme } from '@/utils';
 import { CalendarRangeTheme } from './CalendarRangeTheme';
 
@@ -140,14 +139,14 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
   }, [scrollDirection]);
 
   return (
-    <div className={twMerge(theme.base)}>
-      <header className={twMerge(theme.header.base)}>
+    <div className={theme.base}>
+      <header className={theme.header.base}>
         <Stack>
           <Button
             variant="text"
             disabled={disabled}
             onClick={previousYearClickHandler}
-            className={twMerge(theme.header.prev)}
+            className={theme.header.prev}
             disablePadding
           >
             {previousYearArrow}
@@ -156,13 +155,13 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
             variant="text"
             disabled={disabled}
             onClick={previousClickHandler}
-            className={twMerge(theme.header.mid)}
+            className={theme.header.mid}
             disablePadding
           >
             {previousArrow}
           </Button>
         </Stack>
-        <SmallHeading className={twMerge(theme.title)} disableMargins>
+        <SmallHeading className={theme.title} disableMargins>
           {displayMonths.map(i => (
             <span key={addMonths(viewValue, showPast ? -i : i).toDateString()}>
               {format(addMonths(viewValue, showPast ? -i : i), 'MMMM')}
@@ -174,7 +173,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
             variant="text"
             disabled={disabled}
             onClick={nextClickHandler}
-            className={twMerge(theme.header.next)}
+            className={theme.header.next}
             disablePadding
           >
             {nextArrow}
@@ -201,7 +200,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
             scale: { type: animated ? 'tween' : false }
           }}
         >
-          <div className={twMerge(theme.content)}>
+          <div className={theme.content}>
             {displayMonths.map((offset, idx) => (
               <Fragment key={`calendar-${offset}`}>
                 <CalendarDays
diff --git a/src/form/Calendar/CalendarTheme.ts b/src/form/Calendar/CalendarTheme.ts
index 330ea1cb..5ce8d535 100644
--- a/src/form/Calendar/CalendarTheme.ts
+++ b/src/form/Calendar/CalendarTheme.ts
@@ -19,14 +19,19 @@ export interface CalendarTheme {
     endRangeDate: string;
     cornerEndDateTop: string;
     range: string;
+    selected: string;
+    hover: string;
+    today: string;
   };
   months: {
     root: string;
     month: string;
+    selected: string;
   };
   years: {
     root: string;
     year: string;
+    selected: string;
   };
 }
 
@@ -34,43 +39,93 @@ const baseTheme: CalendarTheme = {
   base: 'relative overflow-hidden',
   header: {
     base: 'flex text-center justify-between mb-2 items-center',
-    prev: '',
+    prev: 'text-xl leading-4',
     mid: '',
-    next: ''
+    next: 'text-xl leading-4'
   },
   title: 'font-semibold',
   content: 'flex',
 
   days: {
-    header: 'text-center grid grid-cols-7 opacity-50 mb-1 pt-2',
-    dayOfWeek: 'text-center font-bold',
+    header: 'text-center grid grid-cols-7 mb-1 pt-2 font-medium',
+    dayOfWeek: 'text-center font-medium',
     week: 'grid grid-cols-7',
-    day: 'flex p-2',
+    day: 'font-normal flex p-2 border',
     outside: '',
     startRangeDate: 'rounded-tl-md rounded-tr-none rounded-br-none',
     cornerStartDateBottom: 'rounded-bl-none',
     endRangeDate: 'rounded-br-md rounded-bl-none rounded-tl-none',
     cornerEndDateTop: 'rounded-tr-none',
-    range: 'rounded-none'
+    range: 'rounded-none',
+    selected: '',
+    hover: 'rounded',
+    today: 'rounded border'
   },
 
   months: {
     root: 'grid grid-cols-4 gap-2',
-    month: 'p-1.5'
+    month: 'p-1.5',
+    selected: ''
   },
 
   years: {
     root: 'grid grid-cols-4 gap-2',
-    year: 'p-1.5'
+    year: 'p-1.5',
+    selected: ''
   }
 };
 
 export const calendarTheme: CalendarTheme = {
   ...baseTheme,
+  header: {
+    ...baseTheme.header,
+    base: [baseTheme.header.base, 'text-panel-secondary-content'].join(' ')
+  },
   days: {
     ...baseTheme.days,
-    header: [baseTheme.days.header, 'text-panel-content'].join(' '),
-    outside: [baseTheme.days.outside, 'opacity-50'].join(' ')
+    day: [
+      baseTheme.days.day,
+      'border-transparent text-panel-secondary-content opacity-90 hover:bg-primary-hover hover:text-black'
+    ].join(' '),
+    header: [baseTheme.days.header, 'text-panel-secondary-content'].join(' '),
+    outside: [
+      baseTheme.days.outside,
+      'opacity-40 text-panel-secondary-content'
+    ].join(' '),
+    selected: [
+      baseTheme.days.selected,
+      'text-black border-transparent light:text-white light:border-transparent opacity-100'
+    ].join(' '),
+    hover: [
+      baseTheme.days.hover,
+      'bg-primary-active text-black border-transparent light:text-white opacity-100'
+    ].join(' '),
+    today: [
+      baseTheme.days.today,
+      'border-panel-content text-panel-content opacity-100'
+    ].join(' ')
+  },
+  months: {
+    ...baseTheme.months,
+    month: [
+      baseTheme.months.month,
+      'hover:bg-primary-hover hover:text-black border-transparent text-panel-secondary-content light:hover:text-white'
+    ].join(' '),
+    selected: [
+      baseTheme.years.selected,
+      'border-transparent text-black light:text-white'
+    ].join(' ')
+  },
+  years: {
+    ...baseTheme.years,
+    year: [
+      baseTheme.years.year,
+      'hover:bg-primary-hover hover:text-black border-transparent text-panel-secondary-content light:hover:text-white'
+    ].join(' '),
+    selected: [
+      baseTheme.years.selected,
+      'border-transparent text-black light:text-white'
+    ].join(' ')
   }
 };
 
diff --git a/src/form/Calendar/CalendarYears/CalendarYears.tsx b/src/form/Calendar/CalendarYears/CalendarYears.tsx
index 509e564d..066e3363 100644
--- a/src/form/Calendar/CalendarYears/CalendarYears.tsx
+++ b/src/form/Calendar/CalendarYears/CalendarYears.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Button } from '@/elements';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { twMerge } from 'tailwind-merge';
 
@@ -68,7 +68,7 @@ export const CalendarYears: FC<CalendarYearsProps> = ({
   return (
     <AnimatePresence mode="popLayout">
       <motion.div
-        className={twMerge(years.root)}
+        className={years.root}
         key={`${decadeStart.toString()}-${decadeEnd.toString()}`}
         initial={{ opacity: 0, x: xAnimation }}
         animate={{ opacity: 1, x: 0 }}
@@ -80,7 +80,7 @@ export const CalendarYears: FC<CalendarYearsProps> = ({
         {yearDates.map(year => (
           <Button
             key={year}
-            className={twMerge(years.year)}
+            className={cn(years.year, { [years.selected]: value === year })}
             color={value === year ? 'primary' : 'default'}
             variant={value === year ? 'filled' : 'text'}
             disableMargins