diff --git a/pages/archive.tsx b/pages/archive.tsx
index d4c64aa..95da0bd 100644
--- a/pages/archive.tsx
+++ b/pages/archive.tsx
@@ -15,350 +15,86 @@ interface PerformerCard extends Performer {
   showDesc: boolean;
 }
 
+const dataByYear: Record<number, Performer[]> = {
+  2025: PerformersData2025,
+  2024: PerformersData2024,
+  2023: PerformersData2023,
+  2022: PerformersData2022,
+  2021: PerformersData2021,
+};
+
+const sortedYears = Object.keys(dataByYear).map(Number).sort((a, b) => b - a);
+
 const Archive = () => {
-  const [performers2021, setPerformers2021] = useState<PerformerCard[]>([]);
-  const [performers2022, setPerformers2022] = useState<PerformerCard[]>([]);
-  const [performers2023, setPerformers2023] = useState<PerformerCard[]>([]);
-  const [performers2024, setPerformers2024] = useState<PerformerCard[]>([]);
-  const [performers2025, setPerformers2025] = useState<PerformerCard[]>([]);
+  const [performersByYear, setPerformersByYear] = useState<Record<number, PerformerCard[]>>({});
 
   useEffect(() => {
-    let cards: PerformerCard[] = [];
-
-    PerformersData2021.map((p) => {
-      let newCard = { ...p, showDesc: false };
-      cards.push(newCard);
-    });
-
-    setPerformers2021(cards);
+    const initial: Record<number, PerformerCard[]> = {};
+    for (const year of sortedYears) {
+      initial[year] = dataByYear[year].map((p) => ({ ...p, showDesc: false }));
+    }
+    setPerformersByYear(initial);
   }, []);
 
-  useEffect(() => {
-    let cards: PerformerCard[] = [];
-
-    PerformersData2022.map((p) => {
-      let newCard = { ...p, showDesc: false };
-      cards.push(newCard);
-    });
-
-    setPerformers2022(cards);
-  }, []);
-
-  useEffect(() => {
-    let cards: PerformerCard[] = [];
-
-    PerformersData2023.map((p) => {
-      let newCard = { ...p, showDesc: false };
-      cards.push(newCard);
-    });
-
-    setPerformers2023(cards);
-  }, []);
-
-  useEffect(() => {
-    let cards: PerformerCard[] = [];
-
-    PerformersData2024.map((p) => {
-      let newCard = { ...p, showDesc: false };
-      cards.push(newCard);
-    });
-
-    setPerformers2024(cards);
-  }, []);
-
-  useEffect(() => {
-    let cards: PerformerCard[] = [];
-
-    PerformersData2025.map((p) => {
-      let newCard = { ...p, showDesc: false };
-      cards.push(newCard);
-    });
-
-    setPerformers2025(cards);
-  }, []);
-
-  const togglePerformerDesc2021 = (id: string) => {
-    let updated: PerformerCard[];
-    updated = performers2021.map((p) => {
-      if (p.id === id) {
-        p.showDesc = !p.showDesc;
-      }
-      return p;
-    });
-
-    setPerformers2021(updated);
+  const togglePerformerDesc = (year: number, id: string) => {
+    setPerformersByYear((prev) => ({
+      ...prev,
+      [year]: prev[year].map((p) =>
+        p.id === id ? { ...p, showDesc: !p.showDesc } : p
+      ),
+    }));
   };
 
-  const togglePerformerDesc2022 = (id: string) => {
-    let updated: PerformerCard[];
-    updated = performers2022.map((p) => {
-      if (p.id === id) {
-        p.showDesc = !p.showDesc;
-      }
-      return p;
-    });
-
-    setPerformers2022(updated);
-  };
-
-  const togglePerformerDesc2023 = (id: string) => {
-    let updated: PerformerCard[];
-    updated = performers2023.map((p) => {
-      if (p.id === id) {
-        p.showDesc = !p.showDesc;
-      }
-      return p;
-    });
-
-    setPerformers2023(updated);
-  };
-
-  const togglePerformerDesc2024 = (id: string) => {
-    let updated: PerformerCard[];
-    updated = performers2024.map((p) => {
-      if (p.id === id) {
-        p.showDesc = !p.showDesc;
-      }
-      return p;
-    });
-
-    setPerformers2024(updated);
-  };
-
-  const togglePerformerDesc2025 = (id: string) => {
-    let updated: PerformerCard[];
-    updated = performers2025.map((p) => {
-      if (p.id === id) {
-        p.showDesc = !p.showDesc;
-      }
-      return p;
-    });
-
-    setPerformers2025(updated);
-  }
-
   return (
     <section className={shared.page + ' ' + styles.archivePage}>
       <h1>Arkisto</h1>
-      <h2 className={styles.year}>2025</h2>
-      {performers2025.map((p) => (
-        <div className={styles.performerContainer} key={p.id}>
-          <Image
-            className={styles.performerImage}
-            src={'/performers/2025/' + p.id + '.jpg'}
-            width={100}
-            height={100}
-            layout='fixed'
-            alt={p.name}
-          />
-          <div className={styles.performerTextContainer}>
-            <div
-              className={styles.performerTitle}
-              onClick={() => togglePerformerDesc2025(p.id)}
-            >
-              <h2>{p.name}</h2>
-              <button className={shared.openingChevron}>
-                {p.showDesc ? (
-                  <BiChevronDown size='3rem' />
-                ) : (
-                  <BiChevronLeft size='3rem' />
-                )}
-              </button>
-            </div>
-            <CSSTransition
-              in={p.showDesc}
-              timeout={1000}
-              classNames='fadeTransition'
-            >
-              {p.showDesc ? (
-                <div>
-                  {p.paragraphs.map((parag, index) => (
-                    <p key={index}>{parag.toString()}</p>
-                  ))}
+      {sortedYears.map((year) => (
+        <React.Fragment key={year}>
+          <h2 className={styles.year}>{year}</h2>
+          {(performersByYear[year] ?? []).map((p) => (
+            <div className={styles.performerContainer} key={p.id}>
+              <Image
+                className={styles.performerImage}
+                src={'/performers/' + year + '/' + p.id + '.jpg'}
+                width={100}
+                height={100}
+                layout='fixed'
+                alt={p.name}
+              />
+              <div className={styles.performerTextContainer}>
+                <div
+                  className={styles.performerTitle}
+                  onClick={() => togglePerformerDesc(year, p.id)}
+                >
+                  <h2>{p.name}</h2>
+                  <button className={shared.openingChevron}>
+                    {p.showDesc ? (
+                      <BiChevronDown size='3rem' />
+                    ) : (
+                      <BiChevronLeft size='3rem' />
+                    )}
+                  </button>
                 </div>
-              ) : (
-                <span></span>
-              )}
-            </CSSTransition>
-            <hr />
-          </div>
-        </div>
-      ))}
-      <h2 className={styles.year}>2024</h2>
-      {performers2024.map((p) => (
-        <div className={styles.performerContainer} key={p.id}>
-          <Image
-            className={styles.performerImage}
-            src={'/performers/2024/' + p.id + '.jpg'}
-            width={100}
-            height={100}
-            layout='fixed'
-            alt={p.name}
-          />
-          <div className={styles.performerTextContainer}>
-            <div
-              className={styles.performerTitle}
-              onClick={() => togglePerformerDesc2024(p.id)}
-            >
-              <h2>{p.name}</h2>
-              <button className={shared.openingChevron}>
-                {p.showDesc ? (
-                  <BiChevronDown size='3rem' />
-                ) : (
-                  <BiChevronLeft size='3rem' />
-                )}
-              </button>
+                <CSSTransition
+                  in={p.showDesc}
+                  timeout={1000}
+                  classNames='fadeTransition'
+                >
+                  {p.showDesc ? (
+                    <div>
+                      {p.paragraphs.map((parag, index) => (
+                        <p key={index}>{parag.toString()}</p>
+                      ))}
+                    </div>
+                  ) : (
+                    <span></span>
+                  )}
+                </CSSTransition>
+                <hr />
+              </div>
             </div>
-            <CSSTransition
-              in={p.showDesc}
-              timeout={1000}
-              classNames='fadeTransition'
-            >
-              {p.showDesc ? (
-                <div>
-                  {p.paragraphs.map((parag, index) => (
-                    <p key={index}>{parag.toString()}</p>
-                  ))}
-                </div>
-              ) : (
-                <span></span>
-              )}
-            </CSSTransition>
-            <hr />
-          </div>
-        </div>
-      ))}
-      <h2 className={styles.year}>2023</h2>
-      {performers2023.map((p) => (
-        <div className={styles.performerContainer} key={p.id}>
-          <Image
-            className={styles.performerImage}
-            src={'/performers/2023/' + p.id + '.jpg'}
-            width={100}
-            height={100}
-            layout='fixed'
-            alt={p.name}
-          />
-          <div className={styles.performerTextContainer}>
-            <div
-              className={styles.performerTitle}
-              onClick={() => togglePerformerDesc2023(p.id)}
-            >
-              <h2>{p.name}</h2>
-              <button className={shared.openingChevron}>
-                {p.showDesc ? (
-                  <BiChevronDown size='3rem' />
-                ) : (
-                  <BiChevronLeft size='3rem' />
-                )}
-              </button>
-            </div>
-            <CSSTransition
-              in={p.showDesc}
-              timeout={1000}
-              classNames='fadeTransition'
-            >
-              {p.showDesc ? (
-                <div>
-                  {p.paragraphs.map((parag, index) => (
-                    <p key={index}>{parag.toString()}</p>
-                  ))}
-                </div>
-              ) : (
-                <span></span>
-              )}
-            </CSSTransition>
-            <hr />
-          </div>
-        </div>
-      ))}
-      <h2 className={styles.year}>2022</h2>
-      {performers2022.map((p) => (
-        <div className={styles.performerContainer} key={p.id}>
-          <Image
-            className={styles.performerImage}
-            src={'/performers/2022/' + p.id + '.jpg'}
-            width={100}
-            height={100}
-            layout='fixed'
-            alt={p.name}
-          />
-          <div className={styles.performerTextContainer}>
-            <div
-              className={styles.performerTitle}
-              onClick={() => togglePerformerDesc2022(p.id)}
-            >
-              <h2>{p.name}</h2>
-              <button className={shared.openingChevron}>
-                {p.showDesc ? (
-                  <BiChevronDown size='3rem' />
-                ) : (
-                  <BiChevronLeft size='3rem' />
-                )}
-              </button>
-            </div>
-            <CSSTransition
-              in={p.showDesc}
-              timeout={1000}
-              classNames='fadeTransition'
-            >
-              {p.showDesc ? (
-                <div>
-                  {p.paragraphs.map((parag, index) => (
-                    <p key={index}>{parag.toString()}</p>
-                  ))}
-                </div>
-              ) : (
-                <span></span>
-              )}
-            </CSSTransition>
-            <hr />
-          </div>
-        </div>
-      ))}
-      <h2 className={styles.year}>2021</h2>
-      {performers2021.map((p) => (
-        <div className={styles.performerContainer} key={p.id}>
-          <Image
-            className={styles.performerImage}
-            src={'/performers/2021/' + p.id + '.jpg'}
-            width={100}
-            height={100}
-            layout='fixed'
-            alt={p.name}
-          />
-          <div className={styles.performerTextContainer}>
-            <div
-              className={styles.performerTitle}
-              onClick={() => togglePerformerDesc2021(p.id)}
-            >
-              <h2>{p.name}</h2>
-              <button className={shared.openingChevron}>
-                {p.showDesc ? (
-                  <BiChevronDown size='3rem' />
-                ) : (
-                  <BiChevronLeft size='3rem' />
-                )}
-              </button>
-            </div>
-            <CSSTransition
-              in={p.showDesc}
-              timeout={1000}
-              classNames='fadeTransition'
-            >
-              {p.showDesc ? (
-                <div>
-                  {p.paragraphs.map((parag, index) => (
-                    <p key={index}>{parag.toString()}</p>
-                  ))}
-                </div>
-              ) : (
-                <span></span>
-              )}
-            </CSSTransition>
-            <hr />
-          </div>
-        </div>
+          ))}
+        </React.Fragment>
       ))}
     </section>
   );