diff --git a/src/lib/CalendarMonth.svelte b/src/lib/CalendarMonth.svelte
index d546ad6..bc2ad8e 100644
--- a/src/lib/CalendarMonth.svelte
+++ b/src/lib/CalendarMonth.svelte
@@ -1,16 +1,15 @@
-<script>
+<script lang="ts">
     import Tooltip from './Tooltip.svelte';
 
-    export let year;
-    export let month;
-    export let holidays = [];
-    export let optimizedDaysOff = [];
-    export let consecutiveDaysOff = [];
-    export let selectedCountryCode;
+    export let year: number;
+    export let month: number;
+    export let holidays: Array<{ date: Date; name: string; hidden?: boolean }>;
+    export let optimizedDaysOff: Date[];
+    export let consecutiveDaysOff: Array<{ startDate: Date; endDate: Date; totalDays: number }>;
+    export let selectedCountryCode: string;
 
     // Function to determine the first day of the week based on locale
-    function getFirstDayOfWeek(locale) {
-        // Convert 'us' to proper locale format
+    function getFirstDayOfWeek(locale: string): number {
         const normalizedLocale = locale.toLowerCase() === 'us' ? 'en-US' : `en-${locale.toUpperCase()}`;
     
         try {
@@ -34,15 +33,15 @@
     $: firstDayOfWeek = getFirstDayOfWeek(locale);
     $: adjustedFirstDay = (getFirstDayOfMonth(year, month) - firstDayOfWeek + 7) % 7;
 
-    function getDaysInMonth(year, month) {
+    function getDaysInMonth(year: number, month: number): number {
         return new Date(year, month + 1, 0).getDate();
     }
 
-    function getFirstDayOfMonth(year, month) {
+    function getFirstDayOfMonth(year: number, month: number): number {
         return new Date(year, month, 1).getDay();
     }
 
-    function getHoliday(day) {
+    function getHoliday(day: number): { date: Date; name: string; hidden?: boolean } | undefined {
         return holidays.find(holiday => 
             holiday.date.getFullYear() === year &&
             holiday.date.getMonth() === month &&
@@ -50,7 +49,7 @@
         );
     }
 
-    function isOptimizedDayOff(day) {
+    function isOptimizedDayOff(day: number): boolean {
         return optimizedDaysOff.some(date => 
             date.getFullYear() === year &&
             date.getMonth() === month &&
@@ -58,8 +57,7 @@
         );
     }
 
-    // Determine the dominant month for each consecutive days off period
-    function getDominantMonth(period) {
+    function getDominantMonth(period: { startDate: Date; endDate: Date }): number {
         const startMonth = period.startDate.getMonth();
         const endMonth = period.endDate.getMonth();
 
@@ -73,7 +71,7 @@
         return startDays > endDays ? startMonth : endMonth;
     }
 
-    function isConsecutiveDayOff(day) {
+    function isConsecutiveDayOff(day: number): boolean {
         return consecutiveDaysOff.some(period => {
             const start = period.startDate;
             const end = period.endDate;
@@ -82,26 +80,21 @@
         });
     }
 
-    // Function to determine if a day is a weekend
-    function isWeekend(day) {
+    function isWeekend(day: number): boolean {
         const dayOfWeek = (adjustedFirstDay + day - 1) % 7;
-        // Calculate the indices for Saturday and Sunday
         const saturdayIndex = (6 - firstDayOfWeek + 7) % 7;
         const sundayIndex = (7 - firstDayOfWeek + 7) % 7;
         return dayOfWeek === saturdayIndex || dayOfWeek === sundayIndex;
     }
 
-    // Fixed array of day initials starting from Sunday
     const dayInitials = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 
-    // Reactive declaration to get the ordered day initials
     $: orderedDayInitials = dayInitials.slice(firstDayOfWeek).concat(dayInitials.slice(0, firstDayOfWeek));
 </script>
 
 <div class="calendar">
     <div class="month-name">{new Date(year, month).toLocaleString('default', { month: 'long' })}</div>
     
-    <!-- Day initials header -->
     {#each orderedDayInitials as dayInitial}
         <div class="day-initial">{dayInitial}</div>
     {/each}
@@ -113,7 +106,7 @@
         <div class="day {isWeekend(day) ? 'weekend' : ''} {getHoliday(day) ? 'holiday' : ''} {isOptimizedDayOff(day) ? 'optimized' : ''} {isConsecutiveDayOff(day) ? 'consecutive-day' : ''}">
             {day}
             {#if getHoliday(day)}
-                <Tooltip text={getHoliday(day).name} />
+                <Tooltip text={getHoliday(day)?.name} />
             {/if}
         </div>
     {/each}
diff --git a/src/lib/holidayUtils.js b/src/lib/holidayUtils.ts
similarity index 73%
rename from src/lib/holidayUtils.js
rename to src/lib/holidayUtils.ts
index 614dcf0..098e2e4 100644
--- a/src/lib/holidayUtils.js
+++ b/src/lib/holidayUtils.ts
@@ -5,32 +5,32 @@ const MS_IN_A_DAY = 86400000;
 const MAX_GAP_LENGTH = 5;
 
 // Helper function to check if a date is a weekend
-const isWeekend = date => date.getDay() === 0 || date.getDay() === 6;
+const isWeekend = (date: Date): boolean => date.getDay() === 0 || date.getDay() === 6;
 
 // Helper function to check if two dates are the same day
-const isSameDay = (date1, date2) => 
+const isSameDay = (date1: Date, date2: Date): boolean => 
     date1.getFullYear() === date2.getFullYear() &&
     date1.getMonth() === date2.getMonth() &&
     date1.getDate() === date2.getDate();
 
 // Helper function to generate a unique key for a date
-const dateKey = date => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+const dateKey = (date: Date): string => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
 
 // Helper function to check if a date is a holiday
-const isHoliday = (date, holidays) => holidays.some(h => isSameDay(h.date, date));
+const isHoliday = (date: Date, holidays: { date: Date }[]): boolean => holidays.some(h => isSameDay(h.date, date));
 
 // Helper function to check if a date is a day off
-const isDayOff = (date, allDaysOffSet) => allDaysOffSet.has(dateKey(date));
+const isDayOff = (date: Date, allDaysOffSet: Set<string>): boolean => allDaysOffSet.has(dateKey(date));
 
 // Helper function to calculate the number of days between two dates
-const daysBetween = (startDate, endDate) => Math.round((endDate - startDate) / MS_IN_A_DAY);
+const daysBetween = (startDate: Date, endDate: Date): number => Math.round((endDate.getTime() - startDate.getTime()) / MS_IN_A_DAY);
 
 // Helper function to format a date
-const formatDate = date => date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+const formatDate = (date: Date): string => date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
 
 // Get holidays for a specific year and country
-export function getHolidaysForYear(countryCode, year, stateCode = '') {
-    const hd = new Holidays(countryCode, stateCode);
+export function getHolidaysForYear(countryCode: string, year: number, stateCode?: string): { date: Date; name: string }[] {
+    const hd = stateCode ? new Holidays(countryCode, stateCode) : new Holidays(countryCode);
     return hd.getHolidays(year)
         .filter(holiday => holiday.type === 'public')
         .map(holiday => ({
@@ -40,14 +40,9 @@ export function getHolidaysForYear(countryCode, year, stateCode = '') {
 }
 
 // Optimize days off to create the longest possible chains
-export function optimizeDaysOff(holidays, year, daysOff) {
-    // Filter holidays to include only those in the current year
+export function optimizeDaysOff(holidays: { date: Date }[], year: number, daysOff: number): Date[] {
     const currentYearHolidays = holidays.filter(h => h.date.getFullYear() === year);
-
-    // Recalculate weekends for the current year
     const weekends = getWeekends(year);
-
-    // Initialize a new Set for all days off
     const allDaysOffSet = new Set([
         ...currentYearHolidays.map(h => dateKey(h.date)),
         ...weekends.map(d => dateKey(d))
@@ -59,15 +54,15 @@ export function optimizeDaysOff(holidays, year, daysOff) {
 }
 
 // Calculate consecutive days off
-export function calculateConsecutiveDaysOff(holidays, optimizedDaysOff, year) {
+export function calculateConsecutiveDaysOff(holidays: { date: Date }[], optimizedDaysOff: Date[], year: number): { startDate: Date; endDate: Date; usedDaysOff: number; totalDays: number }[] {
     const allDaysOffSet = new Set([...holidays.map(h => dateKey(h.date)), ...optimizedDaysOff.map(d => dateKey(d))]);
-    const consecutiveDaysOff = [];
-    let currentGroup = [];
+    const consecutiveDaysOff: { startDate: Date; endDate: Date; usedDaysOff: number; totalDays: number }[] = [];
+    let currentGroup: Date[] = [];
     
     for (let month = 0; month < 12; month++) {
         for (let day = 1; day <= 31; day++) {
             const date = new Date(year, month, day);
-            if (date.getMonth() !== month) break; // Skip invalid dates
+            if (date.getMonth() !== month) break;
 
             if (isWeekend(date) || isHoliday(date, holidays) || isDayOff(date, allDaysOffSet)) {
                 currentGroup.push(date);
@@ -80,7 +75,6 @@ export function calculateConsecutiveDaysOff(holidays, optimizedDaysOff, year) {
         }
     }
 
-    // Check the last group at the end of the year
     if (currentGroup.length > 2) {
         addConsecutiveDaysOff(consecutiveDaysOff, currentGroup, optimizedDaysOff);
     }
@@ -89,8 +83,8 @@ export function calculateConsecutiveDaysOff(holidays, optimizedDaysOff, year) {
 }
 
 // Get all weekends for a specific year
-function getWeekends(year) {
-    const weekends = [];
+function getWeekends(year: number): Date[] {
+    const weekends: Date[] = [];
     for (let month = 0; month < 12; month++) {
         for (let day = 1; day <= 31; day++) {
             const date = new Date(year, month, day);
@@ -102,9 +96,9 @@ function getWeekends(year) {
 }
 
 // Find gaps between days off
-function findGaps(allDaysOffSet, year) {
-    const gaps = [];
-    let currentGapStart = null;
+function findGaps(allDaysOffSet: Set<string>, year: number): { start: Date; end: Date; gapLength: number }[] {
+    const gaps: { start: Date; end: Date; gapLength: number }[] = [];
+    let currentGapStart: Date | null = null;
 
     for (let month = 0; month < 12; month++) {
         for (let day = 1; day <= 31; day++) {
@@ -137,7 +131,7 @@ function findGaps(allDaysOffSet, year) {
 }
 
 // Rank gaps by efficiency
-function rankGapsByEfficiency(gaps, allDaysOffSet) {
+function rankGapsByEfficiency(gaps: { start: Date; end: Date; gapLength: number }[], allDaysOffSet: Set<string>): any[] {
     return gaps.map(gap => {
         const backward = calculateChain(gap.start, gap.gapLength, allDaysOffSet, 'backward');
         const forward = calculateChain(gap.end, gap.gapLength, allDaysOffSet, 'forward');
@@ -149,7 +143,7 @@ function rankGapsByEfficiency(gaps, allDaysOffSet) {
 }
 
 // Calculate potential chain length and days off used
-function calculateChain(startDate, gapLength, allDaysOffSet, direction) {
+function calculateChain(startDate: Date, gapLength: number, allDaysOffSet: Set<string>, direction: 'backward' | 'forward'): { chainLength: number; usedDaysOff: number } {
     let chainLength = gapLength;
     let usedDaysOff = 0;
     let currentDate = new Date(startDate);
@@ -174,13 +168,12 @@ function calculateChain(startDate, gapLength, allDaysOffSet, direction) {
 }
 
 // Select days off based on ranked gaps
-function selectDaysOff(rankedGaps, daysOff, allDaysOffSet, year) {
-    const selectedDays = [];
+function selectDaysOff(rankedGaps: any[], daysOff: number, allDaysOffSet: Set<string>, year: number): Date[] {
+    const selectedDays: Date[] = [];
 
     while (daysOff > 0 && rankedGaps.length > 0) {
-        const gap = rankedGaps.shift(); // Get the highest-ranked gap
+        const gap = rankedGaps.shift();
 
-        // Determine the direction and starting point for filling the gap
         const increment = gap.fillFrom === 'start' ? 1 : -1;
         const startDate = gap.fillFrom === 'start' ? gap.start : gap.end;
 
@@ -195,7 +188,6 @@ function selectDaysOff(rankedGaps, daysOff, allDaysOffSet, year) {
             }
         }
 
-        // Recalculate gaps and re-rank them after each assignment
         const newGaps = findGaps(allDaysOffSet, year);
         rankedGaps = rankGapsByEfficiency(newGaps, allDaysOffSet);
     }
@@ -204,7 +196,7 @@ function selectDaysOff(rankedGaps, daysOff, allDaysOffSet, year) {
 }
 
 // Add consecutive days off to the list
-function addConsecutiveDaysOff(consecutiveDaysOff, currentGroup, optimizedDaysOff) {
+function addConsecutiveDaysOff(consecutiveDaysOff: { startDate: Date; endDate: Date; usedDaysOff: number; totalDays: number }[], currentGroup: Date[], optimizedDaysOff: Date[]) {
     const startDate = currentGroup[0];
     const endDate = currentGroup[currentGroup.length - 1];
     const totalDays = daysBetween(startDate, endDate) + 1;
diff --git a/src/lib/ptoData.js b/src/lib/ptoData.ts
similarity index 99%
rename from src/lib/ptoData.js
rename to src/lib/ptoData.ts
index 279da49..e92d179 100644
--- a/src/lib/ptoData.js
+++ b/src/lib/ptoData.ts
@@ -1,4 +1,4 @@
-export const ptoData = {
+export const ptoData: Record<string, number> = {
     // Afghanistan
     AF: 20, // 20 days recreational leave, 15 paid public holidays
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 273042b..60415fd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,62 +1,62 @@
-<script>
+<script lang="ts">
     import { onMount } from 'svelte';
     import { injectSpeedInsights } from '@vercel/speed-insights';
-    import { inject } from '@vercel/analytics'
+    import { inject } from '@vercel/analytics';
     import countries from 'i18n-iso-countries';
     import enLocale from 'i18n-iso-countries/langs/en.json';
     import CalendarMonth from '../lib/CalendarMonth.svelte';
-    import { getHolidaysForYear, optimizeDaysOff, calculateConsecutiveDaysOff } from '../lib/holidayUtils.js';
-    import { ptoData } from '../lib/ptoData.js';
+    import { getHolidaysForYear, optimizeDaysOff, calculateConsecutiveDaysOff } from '../lib/holidayUtils';
+    import { ptoData } from '../lib/ptoData';
     import Holidays from 'date-holidays';
 
     countries.registerLocale(enLocale);
-    let countriesList = countries.getNames('en');
+    let countriesList: Record<string, string> = countries.getNames('en');
 
-    let year;
-    let months = Array.from({ length: 12 }, (_, i) => i);
-    let selectedCountry = '';
-    let holidays = [];
-    let daysOff = 0;
-    let optimizedDaysOff = [];
-    let consecutiveDaysOff = [];
-    let placeholder = "Country";
-    let countriesInput;
-    let statesInput;
-    let showHowItWorks = false;
+    let year: number;
+    let months: number[] = Array.from({ length: 12 }, (_, i) => i);
+    let selectedCountry: string = '';
+    let holidays: Array<{ date: Date; name: string; hidden?: boolean }> = [];
+    let daysOff: number = 0;
+    let optimizedDaysOff: Date[] = [];
+    let consecutiveDaysOff: Array<{ startDate: Date; endDate: Date; totalDays: number }> = [];
+    let countriesInput: HTMLInputElement | null = null;
+    let statesInput: HTMLInputElement | null = null;
+    let showHowItWorks: boolean = false;
 
     // Default settings
-    let defaultYear = new Date().getFullYear();
-    let defaultCountry = '';
-    let defaultDaysOff = 0;
+    let defaultYear: number = new Date().getFullYear();
+    let defaultCountry: string = '';
+    let defaultDaysOff: number = 0;
 
-    let selectedState = '';
-    let selectedStateCode = '';
-    let statesList = [];
+    let selectedState: string = '';
+    let selectedStateCode: string = '';
+    let statesList: Record<string, string> = {};
 
-    let showHolidaysList = false; // State to toggle the visibility of the holidays list
+    let showHolidaysList: boolean = false;
 
-    $: selectedCountryCode = Object.keys(countriesList).find(code => countriesList[code] === selectedCountry);
+    $: selectedCountryCode = Object.keys(countriesList).find(code => countriesList[code] === selectedCountry) || '';
 
     $: if (selectedCountryCode || selectedStateCode || daysOff || year) {
         updateHolidays();
     }
 
     $: if (daysOff) {
-        localStorage.setItem('daysOff', daysOff);
+        localStorage.setItem('daysOff', daysOff.toString());
     }
 
     $: if (year) {
-        localStorage.setItem('year', year);
+        localStorage.setItem('year', year.toString());
     }
 
-    function updateStatesList(countryCode) {
+    function updateStatesList(countryCode: string) {
         const hd = new Holidays(countryCode);
-        statesList = hd.getStates(countryCode) || [];
+        statesList = hd.getStates(countryCode) || {};
     }
 
-    function handleStateChange(event) {
-        const stateName = event.target.value;
-        selectedStateCode = Object.keys(statesList).find(code => statesList[code] === stateName);
+    function handleStateChange(event: Event) {
+        const target = event.target as HTMLInputElement;
+        const stateName = target.value;
+        selectedStateCode = Object.keys(statesList).find(code => statesList[code] === stateName) || '';
         selectedState = stateName;
         localStorage.setItem('selectedState', selectedState);
         localStorage.setItem('selectedStateCode', selectedStateCode);
@@ -66,11 +66,10 @@
         inject();
         injectSpeedInsights();
 
-        // Always fetch the real country and PTO data
         fetchCountryCode().then(() => {
             defaultYear = new Date().getFullYear();
             defaultCountry = selectedCountry;
-            defaultDaysOff = ptoData[selectedCountryCode];
+            defaultDaysOff = ptoData[selectedCountryCode] || 0;
 
             const storedYear = localStorage.getItem('year');
             const storedCountry = localStorage.getItem('selectedCountry');
@@ -104,8 +103,9 @@
         }
     }
 
-    function handleCountryChange(event) {
-        const fullValue = event.target.value;
+    function handleCountryChange(event: Event) {
+        const target = event.target as HTMLInputElement;
+        const fullValue = target.value;
         if (selectedCountryCode) {
             daysOff = ptoData[selectedCountryCode] || 0;
             selectedState = ''; // Reset state
@@ -114,7 +114,7 @@
             localStorage.setItem('selectedCountry', selectedCountry);
             localStorage.setItem('selectedState', selectedState);
             localStorage.setItem('selectedStateCode', selectedStateCode);
-            localStorage.setItem('daysOff', daysOff);
+            localStorage.setItem('daysOff', daysOff.toString());
         }
     }
 
@@ -124,9 +124,11 @@
             let allHolidays = getHolidaysForYear(selectedCountryCode, year, selectedStateCode);
             holidays = allHolidays.map(holiday => ({
                 ...holiday,
+                date: new Date(holiday.date),
                 hidden: isHolidayHidden(holiday)
             }));
-            const visibleHolidays = holidays.filter(h => !h.hidden);
+            const visibleHolidays = holidays
+                .filter(h => !h.hidden);
             optimizedDaysOff = optimizeDaysOff(visibleHolidays, year, daysOff);
             consecutiveDaysOff = calculateConsecutiveDaysOff(visibleHolidays, optimizedDaysOff, year);
         } else {
@@ -142,14 +144,14 @@
         selectedState = '';
         selectedStateCode = '';
         daysOff = defaultDaysOff;
-        localStorage.setItem('year', year);
+        localStorage.setItem('year', year.toString());
         localStorage.setItem('selectedCountry', selectedCountry);
         localStorage.setItem('selectedState', selectedState);
         localStorage.setItem('selectedStateCode', selectedStateCode);
-        localStorage.setItem('daysOff', daysOff);
+        localStorage.setItem('daysOff', daysOff.toString());
     }
 
-    function handleKeyDown(event) {
+    function handleKeyDown(event: KeyboardEvent) {
         switch (event.key) {
             case 'ArrowRight':
                 event.preventDefault();
@@ -176,8 +178,8 @@
         }
     }
 
-    function adjustInputWidth(inputElement, value) {
-        if (typeof window !== 'undefined' && inputElement) { // Ensure this runs only in the browser
+    function adjustInputWidth(inputElement: HTMLInputElement | null, value: string) {
+        if (typeof window !== 'undefined' && inputElement) {
             const tempSpan = document.createElement('span');
             tempSpan.style.visibility = 'hidden';
             tempSpan.style.position = 'absolute';
@@ -189,15 +191,14 @@
         }
     }
 
-    // Reactive statements to adjust input width when values change
     $: if (countriesInput) adjustInputWidth(countriesInput, selectedCountry);
     $: if (statesInput) adjustInputWidth(statesInput, selectedState);
 
-    function getFlagEmoji(countryCode) {
-        if (!countryCode) return ''; // Return an empty string if countryCode is not available
+    function getFlagEmoji(countryCode: string) {
+        if (!countryCode) return '';
         return countryCode
             .toUpperCase()
-            .replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt()));
+            .replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt(0)));
     }
 
     function toggleHowItWorks() {
@@ -210,48 +211,39 @@
         }
     }
 
-    // Function to toggle the visibility of a holiday
-    function toggleHolidayVisibility(holiday) {
-        const countryCode = Object.keys(countriesList).find(code => countriesList[code] === selectedCountry);
-        if (!countryCode) return;
+    function toggleHolidayVisibility(holiday: { date: Date; name: string; hidden?: boolean }) {
+        if (!selectedCountryCode) return;
 
-        const storageKey = `hiddenHolidays_${countryCode}`;
-        let hiddenHolidays = JSON.parse(localStorage.getItem(storageKey)) || {};
+        const storageKey = `hiddenHolidays_${selectedCountryCode}`;
+        let hiddenHolidays = JSON.parse(localStorage.getItem(storageKey) || '{}');
 
-        // Toggle the hidden state of the holiday
-        hiddenHolidays[holiday.date] = !hiddenHolidays[holiday.date];
+        hiddenHolidays[holiday.date.toString()] = !hiddenHolidays[holiday.date.toString()];
         localStorage.setItem(storageKey, JSON.stringify(hiddenHolidays));
 
-        // Update the holidays list to trigger reactivity
         holidays = holidays.map(h => {
             if (h.date === holiday.date) {
-                return { ...h, hidden: hiddenHolidays[h.date] };
+                return { ...h, hidden: hiddenHolidays[h.date.toString()] };
             }
             return h;
         });
 
-        // Recalculate holidays to ensure hidden ones are excluded
         updateHolidays();
     }
 
-    // Function to check if a holiday is hidden
-    function isHolidayHidden(holiday) {
-        const countryCode = Object.keys(countriesList).find(code => countriesList[code] === selectedCountry);
-        if (!countryCode) return false;
+    function isHolidayHidden(holiday: { date: Date; name: string; hidden?: boolean }) {
+        if (!selectedCountryCode) return false;
 
-        const storageKey = `hiddenHolidays_${countryCode}`;
-        const hiddenHolidays = JSON.parse(localStorage.getItem(storageKey)) || {};
+        const storageKey = `hiddenHolidays_${selectedCountryCode}`;
+        const hiddenHolidays = JSON.parse(localStorage.getItem(storageKey) || '{}');
 
-        return hiddenHolidays[holiday.date] || false;
+        return hiddenHolidays[holiday.date.toString()] || false;
     }
 
-    // Function to format the date
-    function formatDate(dateString) {
-        const options = { day: '2-digit', month: 'short', year: 'numeric' };
-        return new Date(dateString).toLocaleDateString('en-GB', options);
+    function formatDate(date: Date) {
+        const options: Intl.DateTimeFormatOptions = { day: '2-digit', month: 'short', year: 'numeric' };
+        return new Date(date).toLocaleDateString('en-GB', options);
     }
 
-    // Reactive statement to calculate the number of visible holidays
     $: visibleHolidaysCount = holidays.filter(h => !h.hidden).length;
 </script>
 
@@ -321,7 +313,7 @@
 
     @media (max-width: 600px) {
         .calendar-grid {
-            grid-template-columns: repeat(2, 1fr); /* Allow 2 columns on smaller screens */
+            grid-template-columns: repeat(2, 1fr);
             gap: 5px;
             padding: 5px;
         }
@@ -400,23 +392,23 @@
 
     button {
         background-color: #333;
-        border-left: 4px solid #111; /* Lighter border on the left */
-        border-top: 4px solid #111; /* Lighter border on the top */
-        border-right: 4px solid #555; /* Darker border on the right */
-        border-bottom: 4px solid #555; /* Darker border on the bottom */
+        border-left: 4px solid #111;
+        border-top: 4px solid #111;
+        border-right: 4px solid #555;
+        border-bottom: 4px solid #555;
         color: #fff;
-        font-size: 0.8em; /* Smaller font size */
+        font-size: 0.8em;
         cursor: pointer;
-        padding: 3px; /* Reduced padding */
-        margin: 0 3px; /* Reduced margin */
-        border-radius: 4px; /* Slightly less rounded edges */
+        padding: 3px;
+        margin: 0 3px;
+        border-radius: 4px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         transition: transform 0.1s;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 30px; /* Smaller width */
-        height: 30px; /* Smaller height */
+        width: 30px;
+        height: 30px;
         font-weight: bold;
     }
 
@@ -443,18 +435,6 @@
         font-size: 1.5em;
     }
 
-    .day {
-        aspect-ratio: 1;
-        text-align: center;
-        font-size: 0.6em;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #ddd;
-        background-color: #222;
-        position: relative;
-    }
-
     .how-it-works {
         margin: 20px auto;
         padding: 25px;
@@ -482,10 +462,22 @@
         text-align: center;
         font-size: 1em;
         transition: color 0.3s;
+        display: block;
+        width: auto;
+        background: none;
+        border: none;
+        padding: 0;
     }
 
     .toggle-text:hover {
         color: #61dafb;
+        background: none;
+        border: none;
+        padding: 0;
+    }
+
+    .toggle-text:focus {
+        outline: none;
     }
 
     .reset-link {
@@ -579,7 +571,7 @@
         <p>
             In 
             <strong>
-                {getFlagEmoji(Object.keys(countriesList).find(code => countriesList[code] === selectedCountry))}
+                {getFlagEmoji(selectedCountryCode)}
                 {#if selectedState}
                     {selectedState}, 
                 {/if}
@@ -594,9 +586,13 @@
     <div class="content-box">
         <p>
             I live in 
-            <span class="flag" style="vertical-align: middle;">{getFlagEmoji(Object.keys(countriesList).find(code => countriesList[code] === selectedCountry))}</span>
+            <span class="flag" style="vertical-align: middle;">{getFlagEmoji(selectedCountryCode)}</span>
             {#if Object.keys(statesList).length > 0}
-                <input bind:this={statesInput} list="states" class="editable-input bold" bind:value={selectedState} on:input={(e) => { handleStateChange(e); }} on:focus={() => { statesInput.value = ''; }} placeholder="State" aria-label="State" />
+                <input bind:this={statesInput} list="states" class="editable-input bold" bind:value={selectedState} 
+                    on:input={(e) => handleStateChange(e)} 
+                    on:focus={(e) => { (e.target as HTMLInputElement).value = ''; }} 
+                    placeholder="State" 
+                    aria-label="State" />
                 <datalist id="states">
                     {#each Object.entries(statesList) as [code, name]}
                         <option value={name}>{name}</option>
@@ -604,7 +600,11 @@
                 </datalist>
                 in
             {/if}
-            <input bind:this={countriesInput} list="countries" class="editable-input bold" bind:value={selectedCountry} placeholder={placeholder} on:input={(e) => { handleCountryChange(e); }} on:focus={() => { countriesInput.value = ''; }} aria-label="Select country" />
+            <input bind:this={countriesInput} list="countries" class="editable-input bold" bind:value={selectedCountry} 
+                on:input={(e) => handleCountryChange(e)} 
+                on:focus={(e) => { (e.target as HTMLInputElement).value = ''; }} 
+                placeholder="Country" 
+                aria-label="Select country" />
             and have 
             <span class="arrow-controls">
                 <button on:click={() => { if (daysOff > 0) { daysOff--; updateHolidays(); } }} aria-label="Decrease days off">▼</button>
@@ -682,15 +682,15 @@
         </div>
     </div>
 
-    <div class="toggle-text" on:click={toggleHowItWorks}>
+    <button type="button" class="toggle-text" on:click={toggleHowItWorks}>
         {showHowItWorks ? 'Hide Details' : 'How does this work?'}
-    </div>
+    </button>
 
     {#if showHowItWorks}
     <div id="how-it-works" class="content-box how-it-works">
         <h3>How does this work?</h3>
         <p>
-            This tool detects your country from your IP, uses a default number of government-mandated days off from <a href="https://en.wikipedia.org/wiki/List_of_minimum_annual_leave_by_country" target="_blank" rel="noopener noreferrer">Wikipedia</a>, and a <a href={`https://github.com/commenthol/date-holidays/blob/master/data/countries/${Object.keys(countriesList).find(code => countriesList[code] === selectedCountry)}.yaml`} target="_blank" rel="noopener noreferrer">list of holidays</a> for {selectedCountry}.
+            This tool detects your country from your IP, uses a default number of government-mandated days off from <a href="https://en.wikipedia.org/wiki/List_of_minimum_annual_leave_by_country" target="_blank" rel="noopener noreferrer">Wikipedia</a>, and a <a href={`https://github.com/commenthol/date-holidays/blob/master/data/countries/${selectedCountryCode}.yaml`} target="_blank" rel="noopener noreferrer">list of holidays</a> for {selectedCountry}.
         </p>
         <p>
             The algorithm prioritizes filling the shortest gaps first. It optimizes for spreading your holidays throughout the year to create the most number of consecutive vacation periods.