diff --git a/app/mayor/[year]/page.tsx b/app/mayor/[year]/page.tsx
new file mode 100644
index 00000000..3350ec73
--- /dev/null
+++ b/app/mayor/[year]/page.tsx
@@ -0,0 +1,23 @@
+import { Metadata } from "next";
+import { YearlyMayor } from "../../../components/Mayor/YearlyMayor";
+import { Container } from "react-bootstrap";
+import NavBar from "../../../components/NavBar/NavBar";
+import Search from "../../../components/Search/Search";
+
+export const metadata: Metadata = {
+    title: "Mayor Flips",
+    description: "A list of items that are affected by the current or upcoming mayor.",
+};
+
+export default async function MayorPage({ params }: { params: { year: string } }) {
+    const year = params.year;
+    return (
+        <Container>
+            <NavBar />
+            <Search />
+            <h1>Mayor Data for Year {year}</h1>
+            <hr />
+            <YearlyMayor year={year} />
+        </Container>
+    );
+}
diff --git a/app/mayor/all/page.tsx b/app/mayor/all/page.tsx
new file mode 100644
index 00000000..7c8d36bb
--- /dev/null
+++ b/app/mayor/all/page.tsx
@@ -0,0 +1,22 @@
+import { Metadata } from "next";
+import { AllMayors } from "../../../components/Mayor/AllMayors";
+import { Container } from "react-bootstrap";
+import NavBar from "../../../components/NavBar/NavBar";
+import Search from "../../../components/Search/Search";
+
+export const metadata: Metadata = {
+    title: "All Mayor Flips",
+    description: "A list of all mayor flips from the last 5 years.",
+};
+
+export default function AllMayorPage() {
+    return (
+        <Container>
+            <NavBar />
+            <Search />
+            <h1>All Mayors</h1>
+            <hr />
+            <AllMayors />
+        </Container>
+    );
+}
diff --git a/components/Mayor/AllMayors.tsx b/components/Mayor/AllMayors.tsx
new file mode 100644
index 00000000..dc6b5c07
--- /dev/null
+++ b/components/Mayor/AllMayors.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { useMemo } from "react";
+import { useGetApiMayor } from "../../api/_generated/skyApi";
+import { MayorDetailsDisplay } from "./MayorDetailsDisplay";
+
+const FIVE_YEARS_IN_MS = 5 * 365 * 24 * 60 * 60 * 1000;
+const NOW = new Date()
+const FIVE_YEARS_AGO = new Date(Date.now() - FIVE_YEARS_IN_MS);
+NOW.setHours(0, 0, 0, 0);
+FIVE_YEARS_AGO.setHours(0, 0, 0, 0);
+
+export function AllMayors() {
+    const { from, to } = useMemo(() => {
+        return {
+            from: FIVE_YEARS_AGO.toISOString(),
+            to: NOW.toISOString()
+        };
+    }, []);
+
+    const { data: mayorData, isLoading, error } = useGetApiMayor({ from, to });
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    if (error) {
+        return <div>Error loading mayor data</div>;
+    }
+
+    const elections = mayorData?.data ? (Array.isArray(mayorData.data) ? mayorData.data : [mayorData.data]) : [];
+
+    return <MayorDetailsDisplay elections={elections} />;
+}
\ No newline at end of file
diff --git a/components/Mayor/MayorDetails.module.css b/components/Mayor/MayorDetails.module.css
new file mode 100644
index 00000000..bb488001
--- /dev/null
+++ b/components/Mayor/MayorDetails.module.css
@@ -0,0 +1,105 @@
+.container {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 2rem auto;
+    background-color: #1a1a1a;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    color: #f0f0f0;
+}
+
+.container h1 {
+    text-align: center;
+    color: #00aaff;
+    margin-bottom: 1rem;
+}
+
+.container h2 {
+    text-align: center;
+    color: #00aaff;
+    margin-bottom: 2rem;
+}
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 2rem;
+}
+
+.table th, .table td {
+    border: 1px solid #333;
+    padding: 12px 15px;
+    text-align: left;
+}
+
+.table th {
+    background-color: #003366;
+    color: #ffffff;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.table tr:nth-child(even) {
+    background-color: #2a2a2a;
+}
+
+.table tr:hover {
+    background-color: #3a3a3a;
+}
+
+.yearLinks {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+}
+
+.yearLinks a {
+    text-decoration: none;
+    color: #f0f0f0;
+    background-color: #0055a4;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.yearLinks a:hover {
+    background-color: #0077cc;
+    text-decoration: none;
+}
+
+.customAccordion {
+    --bs-accordion-bg: #1a1a1a;
+    --bs-accordion-color: #f0f0f0;
+    --bs-accordion-border-color: #333;
+    --bs-accordion-active-bg: #222;
+    --bs-accordion-active-color: #00aaff;
+    --bs-accordion-btn-focus-box-shadow: none;
+}
+
+.customAccordion :global(.accordion-button) {
+    font-weight: 500;
+}
+
+.customAccordion :global(.accordion-button:not(.collapsed)::after) {
+    filter: invert(1);
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
+
+    .table th, .table td {
+        padding: 8px;
+    }
+
+    .yearLinks {
+        gap: 0.5rem;
+    }
+
+    .yearLinks a {
+        padding: 0.4rem 0.8rem;
+    }
+}
diff --git a/components/Mayor/MayorDetails.tsx b/components/Mayor/MayorDetails.tsx
new file mode 100644
index 00000000..78eef8e9
--- /dev/null
+++ b/components/Mayor/MayorDetails.tsx
@@ -0,0 +1,107 @@
+"use client";
+import { useGetApiMayor, useGetApiMayorYear } from "../../api/_generated/skyApi";
+import styles from "./MayorDetails.module.css";
+import Link from "next/link";
+import { Accordion, Card, Col, Container, Row } from "react-bootstrap";
+import { CoflnetSkyMayorModelsModelElectionPeriod } from "../../api/_generated/skyApi.schemas";
+
+type Props = {
+    year?: string;
+}
+
+function MayorElectionPeriod({ election }: { election: CoflnetSkyMayorModelsModelElectionPeriod }) {
+    return (
+        <Card className="mb-3">
+            <Card.Header>
+                <Accordion.Header>
+                    Election in year {election.year}
+                </Accordion.Header>
+            </Card.Header>
+            <Accordion.Body>
+                <Card.Body>
+                    <Row>
+                        <Col md={6}>
+                            <h5>Candidates</h5>
+                            <ul>
+                                {election.candidates?.map(candidate => (
+                                    <li key={candidate.key}>{candidate.name}</li>
+                                ))}
+                            </ul>
+                        </Col>
+                        <Col md={6}>
+                            <h5>Winner</h5>
+                            {election.winner ? (
+                                <div>
+                                    <p>Name: {election.winner.name}</p>
+                                    <p>Key: {election.winner.key}</p>
+                                    <h6>Perks:</h6>
+                                    <ul>
+                                        {election.winner.perks?.map(perk => (
+                                            <li key={perk.name}>{perk.name}: {perk.description}</li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            ) : <p>No winner declared.</p>}
+                        </Col>
+                    </Row>
+                </Card.Body>
+            </Accordion.Body>
+        </Card>
+    )
+}
+
+
+export default function MayorDetails({ year }: Props) {
+    const { data: mayorData, isLoading: isMayorLoading, error: mayorError } = useGetApiMayor(undefined,
+        {
+            query: {
+                enabled: !year,
+            },
+        }
+    );
+
+    const { data: mayorYearData, isLoading: isMayorYearLoading, error: mayorYearError } = useGetApiMayorYear(
+        parseInt(year || new Date().getFullYear().toString(), 10),
+        {
+            query: {
+                enabled: !!year,
+            },
+        }
+    );
+
+    const isLoading = isMayorLoading || isMayorYearLoading;
+    const error = mayorError || mayorYearError;
+    const data = year ? mayorYearData : mayorData;
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    if (error) {
+        return <div>Error loading mayor data</div>;
+    }
+
+    const elections = data?.data ? (Array.isArray(data.data) ? data.data : [data.data]) : [];
+    const years = Array.from(new Set(elections.map(e => e.year)));
+
+    return (
+        <Container className={styles.container}>
+            <h1>Mayor Details</h1>
+            {year && <h2>Year: {year}</h2>}
+
+            <div className={styles.yearLinks}>
+                {years.map(y => (
+                    <Link key={y} href={`/mayor/${y}`}>
+                        {y}
+                    </Link>
+                ))}
+            </div>
+
+            <Accordion defaultActiveKey="0">
+                {elections.map((election, index) => (
+                    <MayorElectionPeriod key={index} election={election} />
+                ))}
+            </Accordion>
+        </Container>
+    );
+}
diff --git a/components/Mayor/MayorDetailsDisplay.tsx b/components/Mayor/MayorDetailsDisplay.tsx
new file mode 100644
index 00000000..f3b65142
--- /dev/null
+++ b/components/Mayor/MayorDetailsDisplay.tsx
@@ -0,0 +1,162 @@
+"use client";
+import { useState, useRef, useMemo } from "react";
+import styles from "./MayorDetails.module.css";
+import { Accordion, Card, Col, Row, ListGroup, Badge, Form, Button, InputGroup } from "react-bootstrap";
+import { CoflnetSkyMayorModelsModelElectionPeriod } from "../../api/_generated/skyApi.schemas";
+import { getMinecraftColorCodedElement } from "../../utils/Formatter";
+
+type MayorElectionPeriodProps = {
+    election: CoflnetSkyMayorModelsModelElectionPeriod;
+    isSingleYear?: boolean;
+}
+
+function MayorElectionPeriod({ election, isSingleYear }: MayorElectionPeriodProps) {
+    const initialCandidateKey = election.winner?.key ?? election.candidates?.[0]?.key ?? null;
+    const [selectedCandidateKey, setSelectedCandidateKey] = useState<string | null>(initialCandidateKey);
+
+    const selectedCandidate = election.candidates?.find(c => c.key === selectedCandidateKey) ?? election.winner;
+
+    const renderContent = () => (
+        <div className="py-2">
+            <Row className="g-4">
+                <Col md={4} xl={3}>
+                    <h5 className="text-muted mb-3 border-bottom pb-2">Candidates</h5>
+                    <ListGroup variant="flush">
+                        {election.candidates?.map(candidate => (
+                            <ListGroup.Item
+                                key={candidate.key}
+                                action
+                                onClick={() => setSelectedCandidateKey(candidate.key ?? null)}
+                                className={`px-3 py-2 mb-2 rounded border ${selectedCandidateKey === candidate.key ? 'bg-primary text-white border-primary shadow' : 'bg-transparent text-light border-secondary opacity-75'}`}
+                                style={{ cursor: 'pointer', transition: 'all 0.2s ease' }}
+                            >
+                                <div className="d-flex justify-content-between align-items-center">
+                                    <span>{candidate.name}</span>
+                                    {election.winner?.key === candidate.key && (
+                                        <Badge bg="success" className="ms-2">Winner</Badge>
+                                    )}
+                                </div>
+                            </ListGroup.Item>
+                        ))}
+                    </ListGroup>
+                </Col>
+                <Col md={8} xl={9}>
+                    <h5 className="text-info mb-3 border-bottom pb-2">
+                        {selectedCandidateKey === election.winner?.key ? "Election Winner" : "Candidate Details"}
+                    </h5>
+                    {selectedCandidate ? (
+                        <div className="mb-2">
+                            <h3 className="mb-1">{selectedCandidate.name}</h3>
+
+                            <h6 className="mt-4 mb-3 text-warning">Mayor Perks</h6>
+                            <Row className="g-3">
+                                {selectedCandidate.perks?.map(perk => (
+                                    <Col sm={12} lg={6} key={perk.name}>
+                                        <Card className="h-100 border-secondary" style={{ backgroundColor: '#2a2a2a' }}>
+                                            <Card.Body className="p-3">
+                                                <Card.Title className="text-info fw-bold mb-2 fs-6">{perk.name}</Card.Title>
+                                                <Card.Text className="mb-0" style={{ fontSize: '0.95rem', lineHeight: '1.4', color: '#e0e0e0' }}>
+                                                    {getMinecraftColorCodedElement(perk.description ?? '')}
+                                                </Card.Text>
+                                            </Card.Body>
+                                        </Card>
+                                    </Col>
+                                ))}
+                            </Row>
+                        </div>
+                    ) : (
+                        <div className="p-4 text-center text-muted rounded border border-secondary" style={{ backgroundColor: '#2a2a2a' }}>
+                            No candidate selected or data is missing.
+                        </div>
+                    )}
+                </Col>
+            </Row>
+        </div>
+    );
+
+    if (isSingleYear) {
+        return (
+            <Card className="mb-3 border-secondary bg-transparent">
+                <Card.Body>
+                    {renderContent()}
+                </Card.Body>
+            </Card>
+        );
+    }
+
+    return (
+        <Accordion.Item eventKey={election.year.toString()} id={`year-item-${election.year}`} className="mb-3 rounded border border-secondary" style={{ overflow: 'hidden' }}>
+            <Accordion.Header>
+                Election in year {election.year}
+            </Accordion.Header>
+            <Accordion.Body>
+                {renderContent()}
+            </Accordion.Body>
+        </Accordion.Item>
+    )
+}
+
+type Props = {
+    elections: CoflnetSkyMayorModelsModelElectionPeriod[];
+    isSingleYear?: boolean;
+    year?: string;
+}
+
+export function MayorDetailsDisplay({ elections, isSingleYear, year }: Props) {
+    const defaultKey = elections.length > 0 ? elections[0].year.toString() : "0";
+    const [activeKey, setActiveKey] = useState<string | string[]>(defaultKey);
+    const searchInputRef = useRef<HTMLInputElement>(null);
+
+    const handleSearch = (e: React.FormEvent) => {
+        e.preventDefault();
+        const searchYear = searchInputRef.current?.value;
+        if (searchYear) {
+            setActiveKey(searchYear);
+            const el = document.getElementById(`year-item-${searchYear}`);
+            if (el) {
+                const yOffset = -20;
+                const y = el.getBoundingClientRect().top + window.scrollY + yOffset;
+                window.scrollTo({ top: y, behavior: 'smooth' });
+            }
+        }
+    };
+
+    const accordionItems = useMemo(() => {
+        return elections.map((election) => (
+            <MayorElectionPeriod key={election.year} election={election} />
+        ));
+    }, [elections]);
+
+    return (
+        <div>
+            {!isSingleYear && (
+                <div className="mb-4">
+                    <Form onSubmit={handleSearch} className="d-flex align-items-center">
+                        <span className="me-3 fw-bold text-light">Jump to Year:</span>
+                        <InputGroup style={{ maxWidth: '300px' }}>
+                            <Form.Control
+                                type="number"
+                                placeholder="e.g. 200"
+                                ref={searchInputRef}
+                                className="bg-dark text-light border-secondary"
+                            />
+                            <Button variant="primary" type="submit">Search</Button>
+                        </InputGroup>
+                    </Form>
+                </div>
+            )}
+
+            {isSingleYear ? (
+                <div>
+                    {elections.map((election) => (
+                        <MayorElectionPeriod key={election.year} election={election} isSingleYear={true} />
+                    ))}
+                </div>
+            ) : (
+                <Accordion activeKey={activeKey} onSelect={(k) => setActiveKey(k || "")} className={styles.customAccordion}>
+                    {accordionItems}
+                </Accordion>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/Mayor/YearlyMayor.tsx b/components/Mayor/YearlyMayor.tsx
new file mode 100644
index 00000000..86356aba
--- /dev/null
+++ b/components/Mayor/YearlyMayor.tsx
@@ -0,0 +1,28 @@
+"use client";
+import { useGetApiMayorYear } from "../../api/_generated/skyApi";
+import { MayorDetailsDisplay } from "./MayorDetailsDisplay";
+
+type Props = {
+    year: string;
+};
+
+export function YearlyMayor({ year }: Props) {
+    const yearInt = parseInt(year, 10);
+    const { data: mayorYearData, isLoading, error } = useGetApiMayorYear(yearInt, {
+        query: {
+            enabled: !isNaN(yearInt),
+        },
+    });
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    if (error) {
+        return <div>Error loading mayor data for year {year}</div>;
+    }
+
+    const elections = mayorYearData?.data ? (Array.isArray(mayorYearData.data) ? mayorYearData.data : [mayorYearData.data]) : [];
+
+    return <MayorDetailsDisplay elections={elections} isSingleYear={true} year={year} />;
+}
\ No newline at end of file