diff --git a/pages/performers.tsx b/pages/performers.tsx
index 90e7274..6f3dada 100644
--- a/pages/performers.tsx
+++ b/pages/performers.tsx
@@ -1,16 +1,34 @@
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from '../styles/Performers.module.scss';
 import shared from '../styles/Shared.module.scss';
 import Performer from '../types/Performer';
-import performers2021 from '../data/performers/2021';
+import performers2021 from '../data/performers/2022';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
 
+interface PerformerCard extends Performer {
+  id: number;
+  showDesc: boolean;
+}
+
 const Performers = () => {
-  const [performers, setPerformers] = useState<Performer[]>(performers2021);
+  const [performers, setPerformers] = useState<PerformerCard[]>([]);
+
+  useEffect(() => {
+    let cards: PerformerCard[] = [];
+
+    performers2021.map((p, index) => {
+      let newCard = { ...p, id: index, showDesc: false };
+      cards.push(newCard);
+    });
+
+    return () => {
+      setPerformers(cards);
+    };
+  }, []);
 
   const togglePerformerDesc = (id: number) => {
-    let updated: Performer[];
+    let updated: PerformerCard[];
     updated = performers.map((p) => {
       if (p.id === id) {
         p.showDesc = !p.showDesc;
@@ -19,47 +37,51 @@ const Performers = () => {
     });
 
     setPerformers(updated);
+
+    console.log(performers);
   };
 
   return (
     <section className={shared.page}>
       <h1>Esiintyjät</h1>
-
-      <div className={styles.performersContainer}>
-        {performers2021.map((p) => (
-          <div className={styles.performerCard}>
-            <div
-              className={styles.performerTitle}
-              onClick={() => togglePerformerDesc(p.id)}
-            >
-              <Image
-                className={styles.performerImage}
-                src={p.imagePath}
-                width={100}
-                height={100}
-                layout='fixed'
-              />
-              <h2>{p.name}</h2>
-              <button className={shared.openingChevron}>
-                {p.showDesc ? (
-                  <BiChevronDown size='3rem' />
-                ) : (
-                  <BiChevronLeft size='3rem' />
-                )}
-              </button>
+      {performers.map((p) => (
+        <>
+          <div
+            className={styles.performerContainer}
+            onClick={() => togglePerformerDesc(p.id)}
+          >
+            <Image
+              className={styles.performerImage}
+              src={p.imagePath}
+              width={100}
+              height={100}
+              layout='fixed'
+            />
+            <div className={styles.performerTextContainer}>
+              <div className={styles.performerTitle}>
+                <h2>{p.name}</h2>
+                <button className={shared.openingChevron}>
+                  {p.showDesc ? (
+                    <BiChevronDown size='3rem' />
+                  ) : (
+                    <BiChevronLeft size='3rem' />
+                  )}
+                </button>
+              </div>
+              {p.showDesc && (
+                <>
+                  {p.paragraphs.map((parag) => (
+                    <p className={styles.performerDescription}>
+                      {parag.toString()}
+                    </p>
+                  ))}
+                </>
+              )}
+              <hr />
             </div>
-            {p.showDesc && (
-              <>
-                {p.paragraphs.map((parag) => (
-                  <p className={styles.performerDescription}>
-                    {parag.toString()}
-                  </p>
-                ))}
-              </>
-            )}
           </div>
-        ))}
-      </div>
+        </>
+      ))}
     </section>
   );
 };
diff --git a/styles/Info.module.scss b/styles/Info.module.scss
index 548db7d..4b6fc5a 100644
--- a/styles/Info.module.scss
+++ b/styles/Info.module.scss
@@ -3,14 +3,13 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
   hr {
     border: 0.2rem solid #d5caf29d;
-    width: 60%;
+    width: 80%;
   }
 
   p {
-    width: 60%;
+    width: 80%;
   }
 }
 
@@ -18,11 +17,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 60%;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   margin-top: 1.5rem;
   cursor: pointer;
+  width: 80%;
 
   h2 {
     margin-right: 1rem;
diff --git a/styles/Performers.module.scss b/styles/Performers.module.scss
index 69da961..6fdc086 100644
--- a/styles/Performers.module.scss
+++ b/styles/Performers.module.scss
@@ -1,14 +1,26 @@
-.performersContainer {
+.performerContainer {
   display: flex;
-  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 90%;
+
+  p {
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: 0.2rem solid #d5caf29d;
+    width: 100%;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    width: 100%;
+  }
 }
 
-.performerCard {
-  display: flex;
-  flex-direction: column;
-  background-color: #d5caf29d;
-  margin: 2rem;
-  padding: 2rem;
+.performerTextContainer {
+  width: 80%;
+  margin-left: 1rem;
+  margin-top: 1rem;
 }
 
 .performerTitle {
@@ -16,6 +28,7 @@
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
+  width: 100%;
 
   h2 {
     margin-left: 1rem;
@@ -28,9 +41,9 @@
 }
 
 .performerImage {
-  margin-right: 15rem;
   height: 100px;
   border-radius: 100%;
+  margin-bottom: 2rem;
 }
 
 .performerButton:hover {
diff --git a/styles/Program.module.scss b/styles/Program.module.scss
index e5937d4..d2c5247 100644
--- a/styles/Program.module.scss
+++ b/styles/Program.module.scss
@@ -6,11 +6,11 @@
 
   hr {
     border: 0.2rem solid #d5caf29d;
-    width: 60%;
+    width: 80%;
   }
 
   p {
-    width: 60%;
+    width: 80%;
   }
 }
 
@@ -18,7 +18,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 60%;
+  width: 80%;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   margin-top: 1.5rem;
diff --git a/styles/Shared.module.scss b/styles/Shared.module.scss
index dac9dc8..c5c4f01 100644
--- a/styles/Shared.module.scss
+++ b/styles/Shared.module.scss
@@ -1,8 +1,7 @@
 .openingChevron {
-  height: 3rem;
-  width: 3rem;
   background-color: transparent;
   border: transparent;
+  cursor: pointer;
 }
 
 .openingChevron:hover {
diff --git a/types/Performer.ts b/types/Performer.ts
index 205dd98..97308c0 100644
--- a/types/Performer.ts
+++ b/types/Performer.ts
@@ -1,9 +1,7 @@
 type Performer = {
-    id: number,
     name: string,
     paragraphs: Array<string>,
     imagePath: string,
-    showDesc: boolean
 }
 
 export default Performer;
\ No newline at end of file