diff --git a/src/app/api/erettsegi/route.ts b/src/app/api/erettsegi/route.ts
index 629da99..fd94524 100644
--- a/src/app/api/erettsegi/route.ts
+++ b/src/app/api/erettsegi/route.ts
@@ -9,12 +9,46 @@ export async function GET(req: NextRequest) {
 		const idoszak = searchParams.get("idoszak");
 		const szint = searchParams.get("szint");
 
+		if (!vizsgatargy && !ev && !idoszak && !szint) {
+			const currentYear = new Date().getFullYear();
+			return NextResponse.json({
+				parameters: {
+					vizsgatargy: {
+						type: "string",
+						required: true,
+						values: subjects.map((s) => ({
+							value: s.value,
+							label: s.label,
+						})),
+					},
+					ev: {
+						type: "integer",
+						required: true,
+						values: `2013 - ${currentYear}`,
+					},
+					idoszak: {
+						type: "string",
+						required: true,
+						values: ["tavasz", "osz"],
+					},
+					szint: {
+						type: "string",
+						required: true,
+						values: ["kozep", "emelt"],
+					},
+				},
+				example:
+					"/api/erettsegi?vizsgatargy=mat&ev=2023&idoszak=tavasz&szint=kozep",
+			});
+		}
+
 		if (!vizsgatargy || !ev || !idoszak || !szint) {
-			const missingParams = [];
-			if (!vizsgatargy) missingParams.push("vizsgatargy");
-			if (!ev) missingParams.push("ev");
-			if (!idoszak) missingParams.push("idoszak");
-			if (!szint) missingParams.push("szint");
+			const missingParams = [
+				!vizsgatargy && "vizsgatargy",
+				!ev && "ev",
+				!idoszak && "idoszak",
+				!szint && "szint",
+			].filter(Boolean);
 
 			return NextResponse.json(
 				{ error: `Hiányzó paraméterek: ${missingParams.join(", ")}` },
@@ -34,41 +68,16 @@ export async function GET(req: NextRequest) {
 			);
 		}
 
-		let honap: string;
-		switch (idoszak) {
-			case "osz":
-				honap = "okt";
-				break;
-			case "tavasz":
-				honap = "maj";
-				break;
-			default:
-				return NextResponse.json(
-					{ error: "Érvénytelen időszak" },
-					{ status: 400 },
-				);
-		}
-
-		let prefix: string;
-		switch (szint) {
-			case "emelt":
-				prefix = `e_${vizsgatargy}`;
-				break;
-			case "kozep":
-				prefix = `k_${vizsgatargy}`;
-				break;
-			default:
-				return NextResponse.json(
-					{ error: "Érvénytelen szint" },
-					{ status: 400 },
-				);
-		}
+		const honap = idoszak === "osz" ? "okt" : "maj";
+		const prefix = szint === "emelt" ? `e_${vizsgatargy}` : `k_${vizsgatargy}`;
 
 		const protocol =
 			req.headers.get("x-forwarded-proto") === "https" ? "https" : "http";
 		const host = req.headers.get("host");
 		const baseUrl = `https://dload-oktatas.educatio.hu/erettsegi/feladatok_${ev}${idoszak}_${szint}/`;
-		const proxiedUrl = `${protocol}://${host}/api/proxy?link=${encodeURI(baseUrl)}`;
+		const proxiedUrl = `${protocol}://${host}/api/proxy?link=${encodeURI(
+			baseUrl,
+		)}`;
 
 		const shortev = ev.slice(-2);
 		const feladat = "fl";
@@ -76,40 +85,24 @@ export async function GET(req: NextRequest) {
 		const forras = "for";
 		const megoldas = "meg";
 
-		let flPdfUrl: string | undefined,
-			utPdfUrl: string | undefined,
-			flZipUrl: string | undefined,
-			utZipUrl: string | undefined,
-			flMp3Url: string | undefined;
+		const urls = {
+			flPdfUrl: `${proxiedUrl}${prefix}_${shortev}${honap}_${feladat}.pdf`,
+			utPdfUrl: `${proxiedUrl}${prefix}_${shortev}${honap}_${utmutato}.pdf`,
+			flZipUrl: ["inf", "infoism", "digkult"].includes(vizsgatargy)
+				? `${baseUrl}${prefix}${forras}_${shortev}${honap}_${feladat}.zip`
+				: undefined,
+			utZipUrl: ["inf", "infoism", "digkult"].includes(vizsgatargy)
+				? `${baseUrl}${prefix}${megoldas}_${shortev}${honap}_${utmutato}.zip`
+				: undefined,
+			flMp3Url: ["angol", "nemet"].includes(vizsgatargy)
+				? `${baseUrl}${prefix}_${shortev}${honap}_${feladat}.mp3`
+				: undefined,
+		};
 
-		switch (vizsgatargy) {
-			case "inf":
-			case "infoism":
-			case "digkult":
-				flZipUrl = `${baseUrl}${prefix}${forras}_${shortev}${honap}_${feladat}.zip`;
-				flPdfUrl = `${proxiedUrl}${prefix}_${shortev}${honap}_${feladat}.pdf`;
-				utZipUrl = `${baseUrl}${prefix}${megoldas}_${shortev}${honap}_${utmutato}.zip`;
-				utPdfUrl = `${proxiedUrl}${prefix}_${shortev}${honap}_${utmutato}.pdf`;
-				break;
-			case "angol":
-			case "nemet":
-				flPdfUrl = `${proxiedUrl}${prefix}_${shortev}${honap}_${feladat}.pdf`;
-				utPdfUrl = `${proxiedUrl}${prefix}_${shortev}${honap}_${utmutato}.pdf`;
-				flMp3Url = `${baseUrl}${prefix}_${shortev}${honap}_${feladat}.mp3`;
-				break;
-			default:
-				flPdfUrl = `${proxiedUrl}${prefix}_${shortev}${honap}_${feladat}.pdf`;
-				utPdfUrl = `${proxiedUrl}${prefix}_${shortev}${honap}_${utmutato}.pdf`;
-				break;
-		}
-
-		return NextResponse.json(
-			{ flPdfUrl, utPdfUrl, flZipUrl, utZipUrl, flMp3Url },
-			{
-				status: 200,
-				headers: { "Cache-Control": "s-maxage=31536000" },
-			},
-		);
+		return NextResponse.json(urls, {
+			status: 200,
+			headers: { "Cache-Control": "s-maxage=31536000" },
+		});
 	} catch (e: unknown) {
 		console.error("An unexpected error occurred in the API route:", e);
 		return NextResponse.json(
diff --git a/src/app/api/proxy/route.ts b/src/app/api/proxy/route.ts
index e73df09..103020e 100644
--- a/src/app/api/proxy/route.ts
+++ b/src/app/api/proxy/route.ts
@@ -13,10 +13,15 @@ export async function GET(req: NextRequest) {
 		const link = searchParams.get("link");
 
 		if (!link) {
-			return NextResponse.json(
-				{ error: "Hiányzó paraméter: link" },
-				{ status: 400 },
-			);
+			return NextResponse.json({
+				parameters: {
+					link: {
+						type: "string",
+						required: true,
+					},
+				},
+				example: `/api/proxy?link=https://dload-oktatas.educatio.hu/erettsegi/feladatok_2023tavasz_kozep/k_mat_23maj_fl.pdf`,
+			});
 		}
 
 		let url: URL;
@@ -48,8 +53,9 @@ export async function GET(req: NextRequest) {
 		const body = await externalResponse.arrayBuffer();
 
 		const contentType = externalResponse.headers.get("content-type");
-		const headers = new Headers();
-		headers.set("Cache-Control", "s-maxage=31536000, stale-while-revalidate");
+		const headers = new Headers({
+			"Cache-Control": "s-maxage=31536000, stale-while-revalidate",
+		});
 
 		if (contentType) {
 			headers.set("Content-Type", contentType);
@@ -61,18 +67,14 @@ export async function GET(req: NextRequest) {
 
 		return new Response(body, {
 			status: 200,
-			headers: headers,
+			headers,
 		});
 	} catch (e: unknown) {
 		console.error("Proxy Error:", e);
-		if (e instanceof Error) {
-			return NextResponse.json(
-				{ error: "Internal Server Error", message: e.message },
-				{ status: 500 },
-			);
-		}
+		const errorMessage =
+			e instanceof Error ? e.message : "An unexpected internal error occurred";
 		return NextResponse.json(
-			{ error: "An unexpected internal error occurred" },
+			{ error: "Internal Server Error", message: errorMessage },
 			{ status: 500 },
 		);
 	}
diff --git a/src/app/api/validate/route.ts b/src/app/api/validate/route.ts
index 6dd450c..77469c6 100644
--- a/src/app/api/validate/route.ts
+++ b/src/app/api/validate/route.ts
@@ -19,10 +19,16 @@ export async function GET(req: NextRequest) {
 		const link = searchParams.get("link");
 
 		if (!link) {
-			return NextResponse.json(
-				{ error: "Hiányzó paraméter: link" },
-				{ status: 400 },
-			);
+			return NextResponse.json({
+				parameters: {
+					link: {
+						type: "string",
+						required: true,
+						allowed_hosts: ALLOWED_HOSTS,
+					},
+				},
+				example: `/api/validate?link=https://dload-oktatas.educatio.hu/erettsegi/feladatok_2023tavasz_kozep/k_mat_23maj_fl.pdf`,
+			});
 		}
 
 		let url: URL;
@@ -48,26 +54,13 @@ export async function GET(req: NextRequest) {
 	} catch (e: unknown) {
 		console.error("Validation Error:", e);
 
-		if (e instanceof Error) {
-			const cause = e.cause as { code?: unknown } | undefined;
-			return NextResponse.json(
-				{
-					error: "Internal Server Error",
-					message: e.message,
-					cause: cause?.code ? String(cause.code) : undefined,
-					stack: process.env.NODE_ENV === "development" ? e.stack : undefined,
-				},
-				{ status: 500 },
-			);
-		}
+		const errorResponse = {
+			error: "Internal Server Error",
+			message: e instanceof Error ? e.message : "An unexpected error occurred",
+			...(process.env.NODE_ENV === "development" &&
+				e instanceof Error && { stack: e.stack }),
+		};
 
-		return NextResponse.json(
-			{
-				error: "Internal Server Error",
-				message: "An unexpected error occurred",
-				details: String(e),
-			},
-			{ status: 500 },
-		);
+		return NextResponse.json(errorResponse, { status: 500 });
 	}
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 658f29e..8f23580 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import Script from "next/script";
 import { Providers } from "@/app/providers";
 import { Inter } from "next/font/google";
 import "@/styles/globals.css";
+import { AppProvider } from "@/ctx/app";
 
 const inter = Inter({
 	subsets: ["latin"],
@@ -45,7 +46,9 @@ export default function RootLayout({
 				data-website-id="7b196f47-39c9-4b8e-8dfd-b6e707282eea"
 			/>
 			<body className={`${inter.variable} antialiased font-sans`}>
-				<Providers>{children}</Providers>
+				<AppProvider>
+					<Providers>{children}</Providers>
+				</AppProvider>
 			</body>
 		</html>
 	);
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index e58e4fa..bc63a0e 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -8,23 +8,15 @@ export default function NotFound() {
 	return (
 		<>
 			<main className="dark:bg-[#121212] text-foreground bg-background py-5">
-				<h1 className="text-7xl font-bold text-blue-400 text-center mt-16">
-					404
-				</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="text-2xl font-semibold text-gray-600">
-									<p className="mt-2">Az keresett oldal nem található.</p>
-									<p className="mt-8 text-center">
-										<Link href="/">
-											<Button color="primary">Vissza</Button>
-										</Link>
-									</p>
-								</div>
-							</div>
-						</div>
+				<div className="flex min-h-screen flex-col items-center justify-center">
+					<h1 className="text-7xl font-bold text-blue-400">404</h1>
+					<div className="mt-5 mb-3 text-center">
+						<p className="text-2xl font-semibold text-gray-600">
+							Az keresett oldal nem található.
+						</p>
+						<Link href="/" className="mt-8 inline-block">
+							<Button color="primary">Vissza a főoldalra</Button>
+						</Link>
 					</div>
 				</div>
 				<Footer />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a5bf412..a4b275e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,45 +1,38 @@
 "use client";
 
 import { ButtonGroup, Divider } from "@heroui/react";
-import { useEffect } from "react";
-import { Mp3Button, PdfButton, ZipButton } from "@/components/Buttons";
+import { useContext, useEffect, useCallback } from "react";
+import { Resource } from "@/components/Resources";
 import { Footer } from "@/components/Footer";
-import {
-	LevelSelector,
-	PeriodSelector,
-	SubjectSelector,
-	YearSelector,
-} from "@/components/Selectors";
-import { useAppState } from "@/hooks/useState";
-import useYears from "@/hooks/useYears";
+import { Selector, periodItems, levelItems } from "@/components/Selectors";
+import { AppContext } from "@/ctx/app";
 import { fetchData } from "@/utils/fetch";
 import { subjects } from "@/utils/subjects";
+import useYears from "@/hooks/useYears";
 
 export default function Home() {
+	const { state, dispatch } = useContext(AppContext);
 	const {
 		flPdfLink,
-		setflPdfLink,
 		utPdfLink,
-		setutPdfLink,
 		flZipLink,
-		setflZipLink,
 		utZipLink,
-		setutZipLink,
 		flMp3Link,
-		setflMp3Link,
 		selectedSubject,
-		setSelectedSubject,
 		selectedYear,
-		setSelectedYear,
 		selectedPeriod,
-		setSelectedPeriod,
 		selectedLevel,
-		setSelectedLevel,
 		years,
-		setYears,
-	} = useAppState();
+	} = state;
 
-	useYears(setYears);
+	const setYearsCallback = useCallback(
+		(newYears: string[]) => {
+			dispatch({ type: "SET_YEARS", payload: newYears });
+		},
+		[dispatch],
+	);
+
+	useYears(setYearsCallback);
 
 	useEffect(() => {
 		if (selectedLevel && selectedPeriod && selectedSubject && selectedYear) {
@@ -48,24 +41,16 @@ export default function Home() {
 				selectedYear,
 				selectedPeriod,
 				selectedLevel,
-				setflZipLink,
-				setutZipLink,
-				setflPdfLink,
-				setutPdfLink,
-				setflMp3Link,
+				dispatch,
 			);
 		}
-	}, [
-		selectedLevel,
-		selectedPeriod,
-		selectedSubject,
-		selectedYear,
-		setutPdfLink,
-		setflZipLink,
-		setutZipLink,
-		setflPdfLink,
-		setflMp3Link,
-	]);
+	}, [selectedLevel, selectedPeriod, selectedSubject, selectedYear, dispatch]);
+
+	const subjectItems = subjects.map((subject) => ({
+		value: subject.value,
+		label: subject.label,
+	}));
+	const yearItems = years.map((year) => ({ value: year, label: year }));
 
 	return (
 		<main className="dark:bg-[#121212] text-foreground bg-background py-5">
@@ -76,50 +61,64 @@ export default function Home() {
 				<div className="container mx-auto">
 					<div className="flex flex-col items-center justify-center">
 						<div className="mt-5 mb-3">
-							<SubjectSelector
-								selectedSubject={selectedSubject}
-								setSelectedSubject={setSelectedSubject}
-								subjects={subjects}
+							<Selector
+								label="Tárgy"
+								selectedValue={selectedSubject}
+								onSelectionChange={(subject) =>
+									dispatch({ type: "SET_SELECTED_SUBJECT", payload: subject })
+								}
+								items={subjectItems}
 							/>
 						</div>
 						<div className="mb-3">
-							<YearSelector
-								selectedYear={selectedYear}
-								setSelectedYear={setSelectedYear}
-								years={years}
+							<Selector
+								label="Év"
+								selectedValue={selectedYear}
+								onSelectionChange={(year) =>
+									dispatch({ type: "SET_SELECTED_YEAR", payload: year })
+								}
+								items={yearItems}
 							/>
 						</div>
 						<div className="mb-3">
-							<PeriodSelector
-								selectedPeriod={selectedPeriod}
-								setSelectedPeriod={setSelectedPeriod}
+							<Selector
+								label="Időszak"
+								selectedValue={selectedPeriod}
+								onSelectionChange={(period) =>
+									dispatch({ type: "SET_SELECTED_PERIOD", payload: period })
+								}
+								items={periodItems}
 							/>
 						</div>
 						<div className="mb-3">
-							<LevelSelector
-								selectedLevel={selectedLevel}
-								setSelectedLevel={setSelectedLevel}
+							<Selector
+								label="Szint"
+								selectedValue={selectedLevel}
+								onSelectionChange={(level) =>
+									dispatch({ type: "SET_SELECTED_LEVEL", payload: level })
+								}
+								items={levelItems}
 							/>
 						</div>
 						<div className="space-x-3">
 							<ButtonGroup>
-								<PdfButton label="Feladatlap" link={flPdfLink} />
+								<Resource label="Feladatlap" link={flPdfLink} />
 								<Divider orientation="vertical" />
-								<PdfButton label="Útmutató" link={utPdfLink} />
+								<Resource label="Útmutató" link={utPdfLink} />
 							</ButtonGroup>
 						</div>
 						{["inf", "infoism", "digkult"].includes(selectedSubject) && (
 							<div className="space-x-3">
 								<ButtonGroup>
-									<ZipButton label="Forrás" link={flZipLink} />
+									<Resource label="Forrás" link={flZipLink} />
 									<Divider orientation="vertical" />
-									<ZipButton label="Megoldás" link={utZipLink} />
+									<Resource label="Megoldás" link={utZipLink} />
 								</ButtonGroup>
 							</div>
 						)}
 						{["angol", "nemet"].includes(selectedSubject) && (
 							<div className="space-x-3">
-								<Mp3Button label="Hang" link={flMp3Link} />
+								<Resource label="Hang" link={flMp3Link} />
 							</div>
 						)}
 					</div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c931017..d76af34 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,11 +3,11 @@
 import { Source } from "@/components/Source";
 import { ThemeSwitcher } from "@/components/ThemeSwitcher";
 
-export const Footer = () => {
+export function Footer() {
 	return (
 		<div className="fixed bottom-0 py-5 left-0 right-0 text-center space-x-5">
 			<Source />
 			<ThemeSwitcher />
 		</div>
 	);
-};
+}
diff --git a/src/components/Buttons.tsx b/src/components/Resources.tsx
similarity index 55%
rename from src/components/Buttons.tsx
rename to src/components/Resources.tsx
index 79d1154..698ef56 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Resources.tsx
@@ -1,11 +1,16 @@
 "use client";
 
-import { Button } from "@heroui/react";
-import React, { useCallback, useEffect, useState } from "react";
-import type { ButtonProps } from "@/utils/props";
-import type { ButtonColor } from "@/utils/types";
+import { Button, type ButtonProps as HeroButtonProps } from "@heroui/react";
+import { useCallback, useEffect, useState, memo } from "react";
 
-const CustomButton: React.FC<ButtonProps> = React.memo(({ label, link }) => {
+export interface ResourceProps {
+	label: string;
+	link: string;
+}
+
+type ButtonColor = HeroButtonProps["color"];
+
+const ResourceComponent = ({ label, link }: ResourceProps) => {
 	const [status, setStatus] = useState<number>();
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 
@@ -21,6 +26,8 @@ const CustomButton: React.FC<ButtonProps> = React.memo(({ label, link }) => {
 			} finally {
 				setIsLoading(false);
 			}
+		} else {
+			setStatus(undefined);
 		}
 	}, [link]);
 
@@ -29,16 +36,10 @@ const CustomButton: React.FC<ButtonProps> = React.memo(({ label, link }) => {
 	}, [checkLinkStatus]);
 
 	const getColor = useCallback((): ButtonColor => {
-		switch (true) {
-			case isLoading:
-				return "default";
-			case status === 200:
-				return "primary";
-			case status === 404:
-				return "danger";
-			default:
-				return "default";
-		}
+		if (isLoading) return "default";
+		if (status === 200) return "primary";
+		if (status === 404) return "danger";
+		return "default";
 	}, [isLoading, status]);
 
 	const handleClick = useCallback(() => {
@@ -60,16 +61,6 @@ const CustomButton: React.FC<ButtonProps> = React.memo(({ label, link }) => {
 			{label}
 		</Button>
 	);
-});
+};
 
-export const PdfButton: React.FC<ButtonProps> = React.memo(
-	({ label, link }) => <CustomButton label={label} link={link} />,
-);
-
-export const ZipButton: React.FC<ButtonProps> = React.memo(
-	({ label, link }) => <CustomButton label={label} link={link} />,
-);
-
-export const Mp3Button: React.FC<ButtonProps> = React.memo(
-	({ label, link }) => <CustomButton label={label} link={link} />,
-);
+export const Resource = memo(ResourceComponent);
diff --git a/src/components/Selectors.tsx b/src/components/Selectors.tsx
index b1a2f77..f165b0a 100644
--- a/src/components/Selectors.tsx
+++ b/src/components/Selectors.tsx
@@ -1,79 +1,54 @@
 "use client";
 
 import { Select, SelectItem } from "@heroui/react";
-import type { SelectorProps } from "@/utils/props";
-import type { ChangeEvent } from "react";
 
-export const SubjectSelector: React.FC<
-	Pick<SelectorProps, "selectedSubject" | "setSelectedSubject" | "subjects">
-> = ({ selectedSubject, setSelectedSubject, subjects }) => (
-	<Select
-		selectionMode="single"
-		disallowEmptySelection={true}
-		label="Tárgy"
-		value={selectedSubject}
-		onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-			setSelectedSubject(e.target.value)
-		}
-		className="w-56"
-	>
-		{subjects.map((subject) => (
-			<SelectItem key={subject.value}>{subject.label}</SelectItem>
-		))}
-	</Select>
-);
+interface SelectorItem {
+	value: string;
+	label: string;
+}
 
-export const YearSelector: React.FC<
-	Pick<SelectorProps, "selectedYear" | "setSelectedYear" | "years">
-> = ({ selectedYear, setSelectedYear, years }) => (
-	<Select
-		selectionMode="single"
-		disallowEmptySelection={true}
-		label="Év"
-		value={selectedYear}
-		onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-			setSelectedYear(e.target.value)
-		}
-		className="w-56"
-	>
-		{years.map((year) => (
-			<SelectItem key={year}>{year}</SelectItem>
-		))}
-	</Select>
-);
+interface SelectorProps {
+	label: string;
+	selectedValue: string;
+	onSelectionChange: (value: string) => void;
+	items: SelectorItem[];
+	className?: string;
+}
 
-export const PeriodSelector: React.FC<
-	Pick<SelectorProps, "selectedPeriod" | "setSelectedPeriod">
-> = ({ selectedPeriod, setSelectedPeriod }) => (
-	<Select
-		selectionMode="single"
-		disallowEmptySelection={true}
-		label="Időszak"
-		value={selectedPeriod}
-		onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-			setSelectedPeriod(e.target.value)
-		}
-		className="w-56"
-	>
-		<SelectItem key={"tavasz"}>Tavasz</SelectItem>
-		<SelectItem key={"osz"}>Ősz</SelectItem>
-	</Select>
-);
+export const periodItems = [
+	{ value: "tavasz", label: "Tavasz" },
+	{ value: "osz", label: "Ősz" },
+];
 
-export const LevelSelector: React.FC<
-	Pick<SelectorProps, "selectedLevel" | "setSelectedLevel">
-> = ({ selectedLevel, setSelectedLevel }) => (
-	<Select
-		selectionMode="single"
-		disallowEmptySelection={true}
-		label="Szint"
-		value={selectedLevel}
-		onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-			setSelectedLevel(e.target.value)
-		}
-		className="w-56"
-	>
-		<SelectItem key={"kozep"}>Közép</SelectItem>
-		<SelectItem key={"emelt"}>Emelt</SelectItem>
-	</Select>
-);
+export const levelItems = [
+	{ value: "kozep", label: "Közép" },
+	{ value: "emelt", label: "Emelt" },
+];
+
+export function Selector({
+	label,
+	selectedValue,
+	onSelectionChange,
+	items,
+	className = "w-56",
+}: SelectorProps) {
+	return (
+		<Select
+			selectionMode="single"
+			disallowEmptySelection={true}
+			label={label}
+			selectedKeys={selectedValue ? [selectedValue] : []}
+			onSelectionChange={(keys) => {
+				const key = Array.from(keys)[0];
+				if (key) {
+					onSelectionChange(String(key));
+				}
+			}}
+			className={className}
+		>
+			{items.map((item) => (
+				<SelectItem key={item.value}>{item.label}</SelectItem>
+			))}
+		</Select>
+	);
+}
diff --git a/src/components/Source.tsx b/src/components/Source.tsx
index 2e219a2..609cef8 100644
--- a/src/components/Source.tsx
+++ b/src/components/Source.tsx
@@ -3,7 +3,7 @@
 import { Button } from "@heroui/button";
 import { VscGithubInverted } from "react-icons/vsc";
 
-export const Source = () => {
+export function Source() {
 	return (
 		<Button
 			aria-label="Source Code"
@@ -15,4 +15,4 @@ export const Source = () => {
 			<VscGithubInverted size={20} />
 		</Button>
 	);
-};
+}
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index 6e25394..6c8700d 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -4,7 +4,7 @@ import { Button } from "@heroui/button";
 import { useTheme } from "next-themes";
 import { VscColorMode } from "react-icons/vsc";
 
-export const ThemeSwitcher = () => {
+export function ThemeSwitcher() {
 	const { theme, setTheme } = useTheme();
 
 	const toggle = () => {
@@ -20,4 +20,4 @@ export const ThemeSwitcher = () => {
 			)}
 		</Button>
 	);
-};
+}
diff --git a/src/ctx/app.tsx b/src/ctx/app.tsx
new file mode 100644
index 0000000..dc465f5
--- /dev/null
+++ b/src/ctx/app.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import {
+	createContext,
+	useReducer,
+	type Dispatch,
+	type ReactNode,
+} from "react";
+
+interface State {
+	flPdfLink: string;
+	utPdfLink: string;
+	flZipLink: string;
+	utZipLink: string;
+	flMp3Link: string;
+	selectedSubject: string;
+	selectedYear: string;
+	selectedPeriod: string;
+	selectedLevel: string;
+	years: string[];
+}
+
+const initialState: State = {
+	flPdfLink: "",
+	utPdfLink: "",
+	flZipLink: "",
+	utZipLink: "",
+	flMp3Link: "",
+	selectedSubject: "",
+	selectedYear: "",
+	selectedPeriod: "",
+	selectedLevel: "",
+	years: [],
+};
+
+type Action =
+	| { type: "SET_FL_PDF_LINK"; payload: string }
+	| { type: "SET_UT_PDF_LINK"; payload: string }
+	| { type: "SET_FL_ZIP_LINK"; payload: string }
+	| { type: "SET_UT_ZIP_LINK"; payload: string }
+	| { type: "SET_FL_MP3_LINK"; payload: string }
+	| { type: "SET_SELECTED_SUBJECT"; payload: string }
+	| { type: "SET_SELECTED_YEAR"; payload: string }
+	| { type: "SET_SELECTED_PERIOD"; payload: string }
+	| { type: "SET_SELECTED_LEVEL"; payload: string }
+	| { type: "SET_YEARS"; payload: string[] };
+
+const reducer = (state: State, action: Action): State => {
+	switch (action.type) {
+		case "SET_FL_PDF_LINK":
+			return { ...state, flPdfLink: action.payload };
+		case "SET_UT_PDF_LINK":
+			return { ...state, utPdfLink: action.payload };
+		case "SET_FL_ZIP_LINK":
+			return { ...state, flZipLink: action.payload };
+		case "SET_UT_ZIP_LINK":
+			return { ...state, utZipLink: action.payload };
+		case "SET_FL_MP3_LINK":
+			return { ...state, flMp3Link: action.payload };
+		case "SET_SELECTED_SUBJECT":
+			return { ...state, selectedSubject: action.payload };
+		case "SET_SELECTED_YEAR":
+			return { ...state, selectedYear: action.payload };
+		case "SET_SELECTED_PERIOD":
+			return { ...state, selectedPeriod: action.payload };
+		case "SET_SELECTED_LEVEL":
+			return { ...state, selectedLevel: action.payload };
+		case "SET_YEARS":
+			return { ...state, years: action.payload };
+		default:
+			return state;
+	}
+};
+
+export const AppContext = createContext<{
+	state: State;
+	dispatch: Dispatch<Action>;
+}>({
+	state: initialState,
+	dispatch: () => null,
+});
+
+export const AppProvider = ({ children }: { children: ReactNode }) => {
+	const [state, dispatch] = useReducer(reducer, initialState);
+
+	return (
+		<AppContext.Provider value={{ state, dispatch }}>
+			{children}
+		</AppContext.Provider>
+	);
+};
diff --git a/src/hooks/useState.ts b/src/hooks/useState.ts
deleted file mode 100644
index aacaff9..0000000
--- a/src/hooks/useState.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import useYears from "@/hooks/useYears";
-
-export const useAppState = () => {
-	const [flPdfLink, setflPdfLink] = useState<string>("");
-	const [utPdfLink, setutPdfLink] = useState<string>("");
-	const [flZipLink, setflZipLink] = useState<string>("");
-	const [utZipLink, setutZipLink] = useState<string>("");
-	const [flMp3Link, setflMp3Link] = useState<string>("");
-	const [selectedSubject, setSelectedSubject] = useState<string>("");
-	const [selectedYear, setSelectedYear] = useState<string>("");
-	const [selectedPeriod, setSelectedPeriod] = useState<string>("");
-	const [selectedLevel, setSelectedLevel] = useState<string>("");
-	const [years, setYears] = useState<string[]>([]);
-
-	useYears(setYears);
-
-	return {
-		flPdfLink,
-		setflPdfLink,
-		utPdfLink,
-		setutPdfLink,
-		flZipLink,
-		setflZipLink,
-		utZipLink,
-		setutZipLink,
-		flMp3Link,
-		setflMp3Link,
-		selectedSubject,
-		setSelectedSubject,
-		selectedYear,
-		setSelectedYear,
-		selectedPeriod,
-		setSelectedPeriod,
-		selectedLevel,
-		setSelectedLevel,
-		years,
-		setYears,
-	};
-};
diff --git a/src/hooks/useYears.tsx b/src/hooks/useYears.tsx
index 5161ab7..1e0a791 100644
--- a/src/hooks/useYears.tsx
+++ b/src/hooks/useYears.tsx
@@ -2,9 +2,7 @@
 
 import { useEffect } from "react";
 
-export default function useYears(
-	setYears: React.Dispatch<React.SetStateAction<string[]>>,
-) {
+export default function useYears(setYears: (years: string[]) => void) {
 	useEffect(() => {
 		const currentYear = new Date().getFullYear();
 		const availableYears: string[] = [];
diff --git a/src/utils/fetch.ts b/src/utils/fetch.ts
index a918a51..5e2a004 100644
--- a/src/utils/fetch.ts
+++ b/src/utils/fetch.ts
@@ -1,13 +1,18 @@
+import type { Dispatch } from "react";
+
+type Action =
+	| { type: "SET_FL_ZIP_LINK"; payload: string }
+	| { type: "SET_UT_ZIP_LINK"; payload: string }
+	| { type: "SET_FL_PDF_LINK"; payload: string }
+	| { type: "SET_UT_PDF_LINK"; payload: string }
+	| { type: "SET_FL_MP3_LINK"; payload: string };
+
 export const fetchData = async (
 	selectedSubject: string,
 	selectedYear: string,
 	selectedPeriod: string,
 	selectedLevel: string,
-	setflZipLink: (link: string) => void,
-	setutZipLink: (link: string) => void,
-	setflPdfLink: (link: string) => void,
-	setutPdfLink: (link: string) => void,
-	setflMp3Link: (link: string) => void,
+	dispatch: Dispatch<Action>,
 ) => {
 	try {
 		const url = `/api/erettsegi?vizsgatargy=${selectedSubject}&ev=${selectedYear}&idoszak=${selectedPeriod}&szint=${selectedLevel}`;
@@ -16,25 +21,25 @@ export const fetchData = async (
 
 		if (response.ok) {
 			const data = (await response.json()) as {
-				flZipUrl: string;
-				utZipUrl: string;
+				flZipUrl?: string;
+				utZipUrl?: string;
 				flPdfUrl: string;
 				utPdfUrl: string;
-				flMp3Url: string;
+				flMp3Url?: string;
 			};
 
 			if (data.utZipUrl && data.flZipUrl) {
-				setflZipLink(data.flZipUrl);
-				setutZipLink(data.utZipUrl);
+				dispatch({ type: "SET_FL_ZIP_LINK", payload: data.flZipUrl });
+				dispatch({ type: "SET_UT_ZIP_LINK", payload: data.utZipUrl });
 			}
 
 			if (data.utPdfUrl && data.flPdfUrl) {
-				setflPdfLink(data.flPdfUrl);
-				setutPdfLink(data.utPdfUrl);
+				dispatch({ type: "SET_FL_PDF_LINK", payload: data.flPdfUrl });
+				dispatch({ type: "SET_UT_PDF_LINK", payload: data.utPdfUrl });
 			}
 
 			if (data.flMp3Url) {
-				setflMp3Link(data.flMp3Url);
+				dispatch({ type: "SET_FL_MP3_LINK", payload: data.flMp3Url });
 			}
 		} else {
 			console.error("Hiba történt az API hívás során.");
diff --git a/src/utils/props.ts b/src/utils/props.ts
deleted file mode 100644
index b517dce..0000000
--- a/src/utils/props.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface SelectorProps {
-	years: string[];
-	subjects: { label: string; value: string }[];
-	selectedSubject: string;
-	selectedYear: string;
-	selectedPeriod: string;
-	selectedLevel: string;
-	setSelectedSubject: React.Dispatch<React.SetStateAction<string>>;
-	setSelectedYear: React.Dispatch<React.SetStateAction<string>>;
-	setSelectedPeriod: React.Dispatch<React.SetStateAction<string>>;
-	setSelectedLevel: React.Dispatch<React.SetStateAction<string>>;
-}
-
-export interface ButtonProps {
-	label: string;
-	link: string;
-}
diff --git a/src/utils/types.ts b/src/utils/types.ts
deleted file mode 100644
index 5f704e1..0000000
--- a/src/utils/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type ButtonColor =
-	| "primary"
-	| "danger"
-	| "default"
-	| "secondary"
-	| "success"
-	| "warning"
-	| undefined;