diff --git a/.prettierrc b/.prettierrc
index fa51da2..a3c4bea 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "jsxSingleQuote": true
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index dc5369f..53a9ed9 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,9 +1,9 @@
-import { Source } from '@/components/Source'
 import { ThemeSwitcher } from '@/components/ThemeSwitcher'
+import { Source } from '@/components/Source'
 
 export const Footer = () => {
   return (
-    <div className="fixed bottom-0 py-5 left-0 right-0 text-center space-x-5">
+    <div className='fixed bottom-0 py-5 left-0 right-0 text-center space-x-5'>
       <Source />
       <ThemeSwitcher />
     </div>
diff --git a/src/components/Source.tsx b/src/components/Source.tsx
index 13f17c3..b3d3e77 100644
--- a/src/components/Source.tsx
+++ b/src/components/Source.tsx
@@ -1,16 +1,16 @@
-import { RiOpenSourceFill } from 'react-icons/ri'
+import { VscGithubInverted } from 'react-icons/vsc'
 import { Button } from '@nextui-org/button'
 
 export const Source = () => {
   return (
     <Button
-      aria-label="Source Code"
-      size="sm"
+      aria-label='Source Code'
+      size='sm'
       onClick={() =>
         window.open('https://github.com/skidoodle/erettsegi-browser')
       }
     >
-      <RiOpenSourceFill size={20} />
+      <VscGithubInverted size={20} />
     </Button>
   )
 }
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index 92dad63..97d606a 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -1,30 +1,29 @@
-import { BsSunFill, BsMoonFill } from 'react-icons/bs'
-import { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes'
+import { VscColorMode } from 'react-icons/vsc'
 import { Button } from '@nextui-org/button'
+import { useTheme } from 'next-themes'
 
 export const ThemeSwitcher = () => {
-  const [mounted, setMounted] = useState(false)
   const { theme, setTheme } = useTheme()
 
   const toggle = () => {
-    if (theme === 'dark') {
-      setTheme('light')
-    } else {
-      setTheme('dark')
+    switch (theme) {
+      case 'dark':
+        setTheme('light')
+        break
+      case 'light':
+        setTheme('dark')
+        break
+      default:
+        break
     }
   }
 
-  useEffect(() => setMounted(true), [])
-
-  if (!mounted) return null
-
   return (
-    <Button aria-label="Switch Theme" size="sm" onClick={() => toggle()}>
+    <Button aria-label='Switch Theme' size='sm' onClick={() => toggle()}>
       {theme === 'light' ? (
-        <BsMoonFill style={{ fill: 'black' }} size={20} />
+        <VscColorMode style={{ fill: 'black' }} size={20} />
       ) : (
-        <BsSunFill size={20} />
+        <VscColorMode size={20} key={'dark'} />
       )}
     </Button>
   )
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4f66d47..aed523a 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,8 +1,8 @@
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { Analytics } from '@vercel/analytics/react'
+import { NextUIProvider } from '@nextui-org/react'
 import { Inter } from 'next/font/google'
 import { AppProps } from 'next/app'
-import { NextUIProvider } from '@nextui-org/react'
-import { Analytics } from '@vercel/analytics/react'
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import Head from 'next/head'
 import '@/styles/globals.css'
 
@@ -20,8 +20,8 @@ export default function App({ Component, pageProps }: AppProps) {
       </Head>
       <NextUIProvider className={`${inter.variable} font-sans`}>
         <NextThemesProvider
-          attribute="class"
-          defaultTheme="dark"
+          attribute='class'
+          defaultTheme='dark'
           enableSystem={true}
         >
           <Component {...pageProps} />
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 972ae8f..dbd36c1 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -2,11 +2,11 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html lang="hu">
+    <Html lang='hu'>
       <Head>
-        <meta name="theme-color" content="#121212" />
-        <meta name="title" content="Érettségi kereső" />
-        <meta name="author" content="albert" />
+        <meta name='theme-color' content='#121212' />
+        <meta name='title' content='Érettségi kereső' />
+        <meta name='author' content='albert' />
       </Head>
       <body>
         <Main />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8ae521b..efe9a1d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
-import { useAvailableYears } from '@/utils/years'
+import { Footer } from '@/components/Footer'
 import { subjects } from '@/utils/subjects'
+import { useYears } from '@/utils/years'
 import {
   Select,
   SelectItem,
@@ -8,7 +9,6 @@ import {
   ButtonGroup,
   Divider,
 } from '@nextui-org/react'
-import { Footer } from '@/components/Footer'
 
 export default function Home() {
   const [flPdfLink, setflPdfLink] = useState<string>('')
@@ -21,7 +21,7 @@ export default function Home() {
   const [selectedLevel, setSelectedLevel] = useState<string>('')
   const [years, setYears] = useState<string[]>([])
 
-  useAvailableYears(setYears)
+  useYears(setYears)
 
   useEffect(() => {
     const fetchData = async () => {
@@ -66,20 +66,20 @@ export default function Home() {
   ])
 
   return (
-    <main className="dark:bg-[#121212] text-foreground bg-background py-5">
-      <h1 className="text-4xl font-bold text-blue-400 text-center mt-16">
+    <main className='dark:bg-[#121212] text-foreground bg-background py-5'>
+      <h1 className='text-4xl font-bold text-blue-400 text-center mt-16'>
         Érettségi kereső
       </h1>
-      <div className="flex min-h-screen flex-col items-center justify-between">
-        <div className="container mx-auto">
-          <div className="flex flex-col items-center justify-center">
-            <div className="mt-5 mb-3">
+      <div className='flex min-h-screen flex-col items-center justify-between'>
+        <div className='container mx-auto'>
+          <div className='flex flex-col items-center justify-center'>
+            <div className='mt-5 mb-3'>
               <Select
-                selectionMode="single"
-                label="Tárgy"
+                selectionMode='single'
+                label='Tárgy'
                 value={selectedSubject}
                 onChange={(e) => setSelectedSubject(e.target.value)}
-                className="w-56"
+                className='w-56'
               >
                 {subjects.map((subject) => (
                   <SelectItem key={subject.value} value={subject.value}>
@@ -88,13 +88,13 @@ export default function Home() {
                 ))}
               </Select>
             </div>
-            <div className="mb-3">
+            <div className='mb-3'>
               <Select
-                selectionMode="single"
-                label="Év"
+                selectionMode='single'
+                label='Év'
                 value={selectedYear}
                 onChange={(e) => setSelectedYear(e.target.value)}
-                className="w-56"
+                className='w-56'
               >
                 {years.map((year) => (
                   <SelectItem key={year} value={year}>
@@ -103,13 +103,13 @@ export default function Home() {
                 ))}
               </Select>
             </div>
-            <div className="mb-3">
+            <div className='mb-3'>
               <Select
-                selectionMode="single"
-                label="Időszak"
+                selectionMode='single'
+                label='Időszak'
                 value={selectedPeriod}
                 onChange={(e) => setSelectedPeriod(e.target.value)}
-                className="w-56"
+                className='w-56'
               >
                 <SelectItem key={'tavasz'} value={'tavasz'}>
                   Tavasz
@@ -119,13 +119,13 @@ export default function Home() {
                 </SelectItem>
               </Select>
             </div>
-            <div className="mb-3">
+            <div className='mb-3'>
               <Select
-                selectionMode="single"
-                label="Szint"
+                selectionMode='single'
+                label='Szint'
                 value={selectedLevel}
                 onChange={(e) => setSelectedLevel(e.target.value)}
-                className="w-56"
+                className='w-56'
               >
                 <SelectItem key={'kozep'} value={'kozep'}>
                   Közép
@@ -136,33 +136,33 @@ export default function Home() {
               </Select>
             </div>
 
-            <div className="space-x-3">
+            <div className='space-x-3'>
               <ButtonGroup>
                 <Button
                   isDisabled={!flPdfLink}
-                  className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
+                  className='w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2'
                   onClick={flPdfLink ? () => window.open(flPdfLink) : () => {}}
                 >
                   Feladatlap
                 </Button>
-                <Divider orientation="vertical" />
+                <Divider orientation='vertical' />
                 <Button
                   isDisabled={!utPdfLink}
-                  className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
+                  className='w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2'
                   onClick={utPdfLink ? () => window.open(utPdfLink) : () => {}}
                 >
                   Útmutató
                 </Button>
               </ButtonGroup>
             </div>
-            <div className="space-x-3">
+            <div className='space-x-3'>
               <ButtonGroup>
                 {selectedSubject === 'inf' ||
                 selectedSubject === 'infoism' ||
                 selectedSubject === 'digkult' ? (
                   <Button
                     isDisabled={!flZipLink}
-                    className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700  text-white font-bold py-2 px-2"
+                    className='w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700  text-white font-bold py-2 px-2'
                     onClick={
                       flZipLink ? () => window.open(flZipLink) : () => {}
                     }
@@ -170,13 +170,13 @@ export default function Home() {
                     Forrás
                   </Button>
                 ) : null}
-                <Divider orientation="vertical" />
+                <Divider orientation='vertical' />
                 {selectedSubject === 'inf' ||
                 selectedSubject === 'infoism' ||
                 selectedSubject === 'digkult' ? (
                   <Button
                     isDisabled={!utZipLink}
-                    className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
+                    className='w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2'
                     onClick={
                       utZipLink ? () => window.open(utZipLink) : () => {}
                     }
diff --git a/src/utils/years.tsx b/src/utils/years.tsx
index d20b60f..8b4705c 100644
--- a/src/utils/years.tsx
+++ b/src/utils/years.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-export function useAvailableYears(
+export function useYears(
   setYears: React.Dispatch<React.SetStateAction<string[]>>
 ) {
   useEffect(() => {