diff --git a/pages/archive.tsx b/pages/arkisto.tsx
similarity index 100%
rename from pages/archive.tsx
rename to pages/arkisto.tsx
diff --git a/pages/performers/[id].tsx b/pages/esiintyjat/[id].tsx
similarity index 100%
rename from pages/performers/[id].tsx
rename to pages/esiintyjat/[id].tsx
diff --git a/pages/index.tsx b/pages/index.tsx
index 50734dc..855a620 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,7 +6,7 @@ import styles from '../styles/Index.module.scss';
 import Lead from './components/Lead';
 import Collaboration from './components/Collaboration';
 import Workshops from './workshops';
-import Archive from './archive';
+import Archive from './arkisto';
 // import Workshops from './workshops';
 
 const Home: NextPage = () => {
diff --git a/pages/performers.tsx b/pages/performers.tsx
index 3bbbcb2..ab08411 100644
--- a/pages/performers.tsx
+++ b/pages/performers.tsx
@@ -89,7 +89,7 @@ const Performers = () => {
       ) : (
         <i>Lisätietoja tulossa myöhemmin...</i>
       )}
-      <Link href="/archive">
+      <Link href="/arkisto">
         <a>
           <span className={styles.archiveLinkText}>Aiempien vuosien esiintyjiä</span>
           <FiExternalLink fontSize={20} />
diff --git a/pages/program.tsx b/pages/program.tsx
index c478b71..a4be5d4 100644
--- a/pages/program.tsx
+++ b/pages/program.tsx
@@ -4,6 +4,9 @@ import shared from '../styles/Shared.module.scss';
 import styles from '../styles/Program.module.scss';
 import { CSSTransition } from 'react-transition-group';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
+import Performer from '../types/Performer';
+import Image from 'next/image';
+import Link from 'next/link';
 
 interface DayToggles {
   wed: boolean;
@@ -12,56 +15,100 @@ interface DayToggles {
   sat: boolean;
 }
 
+const firstPerformers: Performer[] = [];
+const secondPerformers: Performer[] = [];
+
 const Program = () => {
+  const [firstPerformers] = useState([
+    { id: "ayras", name: "Äyräs", paragraphs: [] },
+    { id: "hanna_storm", name: "Hanna Storm", paragraphs: [] },
+    { id: "juha_rautio", name: "Juha Rautio", paragraphs: [] },
+    { id: "katariina_vuorinen", name: "Katariina Vuorinen & Ilkka Turta", paragraphs: [] }]);
+
+  const [secondPerformers] = useState([
+    { id: "juha_kulmala", name: "Juha Kulmala + Positroninen runo-orkesteri", paragraphs: [] },
+    { id: "terhi_forssen", name: "Terhi Forssén", paragraphs: [] },
+    { id: "katariina_vuorinen", name: "Katariina Vuorinen & Björn", paragraphs: [] }]);
+
   return (
     <section className={shared.page}>
       <h1 id='program-start'>Ohjelma</h1>
 
-      {/* Vaihela */}
-      <h2 className={styles.programTitle}>
-        <span>7.6.</span>
-        <a href='https://www.cafelaituri.fi'>
-          <span className={styles.placeName}>Vaihela</span>
+      <div className={styles.eventContainer}>
+        {/* Vaihela */}
+        <div className={styles.event}>
+          <div className={styles.programTitle}>
+            <span className={styles.timeSpan}>pe</span>
+            <span className={styles.timeSpan}>7.6.</span>
+            <span className={styles.timeSpan}>18 - 21</span>
+          </div>
+          <h2>
+            <a href='https://www.cafelaituri.fi'>
+              <span className={styles.placeName}>Vaihela</span>
+              <FiExternalLink fontSize={20} />
+            </a>
+          </h2>
+
+          <div className={styles.performerList}>
+            {firstPerformers.map((p) => (
+              <a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
+                <Image
+                  className={styles.performerImage}
+                  src={'/performers/2024/' + p.id + '.jpg'}
+                  width={80}
+                  height={80}
+                  layout='fixed'
+                  alt={p.name}
+                />
+                <span className={styles.performerName}>{p.name}</span>
+              </a>
+            ))}
+          </div>
+          <br />
+          <br />
+          <i>Ohjelma täydentyy...</i>
+        </div>
+
+        {/* Laituri */}
+        <div className={styles.event}>
+          <div className={styles.programTitle}>
+            <span className={styles.timeSpan}>pe</span>
+            <span className={styles.timeSpan}>14.6.</span>
+            <span className={styles.timeSpan}>18 - 21</span>
+          </div>
+          <h2>
+            <a href='https://www.cafelaituri.fi'>
+              <span className={styles.placeName}>Laituri</span>
+              <FiExternalLink fontSize={20} />
+            </a>
+          </h2>
+          <div className={styles.performerList}>
+            {secondPerformers.map((p) => (
+              <a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
+                <Image
+                  className={styles.performerImage}
+                  src={'/performers/2024/' + p.id + '.jpg'}
+                  width={80}
+                  height={80}
+                  layout='fixed'
+                  alt={p.name}
+                />
+                <span className={styles.performerName}>{p.name}</span>
+              </a>
+            ))}
+          </div>
+          <br />
+          <br />
+          <i>Ohjelma täydentyy...</i>
+        </div>
+      </div>
+      <Link href="/arkisto">
+        <a>
+          <span className={styles.archiveLinkText}>Aiempien vuosien esiintyjiä</span>
           <FiExternalLink fontSize={20} />
         </a>
-        <span>pe</span>
-      </h2>
-      <span className={styles.locationAddress}>
-        Saaristohotelli Vaihela, Velkuanmaantie 168, Velkuanmaa
-      </span>
-      <span className={styles.timeSpan}>18:00 - 21:00</span>
-
-      <ul className={styles.performerList}>
-        <li>Äyräs</li>
-        <li>Hanna Storm</li>
-        <li>Juha Rautio</li>
-        <li>Katariina Vuorinen<br />& Ilkka Turta</li>
-      </ul>
-      <i>Ohjelma täydentyy...</i>
-      <hr className={styles.programHr} />
-
-      {/* Laituri */}
-      <h2 className={styles.programTitle}>
-        <span>14.6.</span>
-        <a href='https://www.cafelaituri.fi'>
-          <span className={styles.placeName}>Laituri</span>
-          <FiExternalLink fontSize={20} />
-        </a>
-        <span>pe</span>
-      </h2>
-      <span className={styles.locationAddress}>
-        Café Laituri, Voiponlahdentie 37, Palva
-      </span>
-      <span className={styles.timeSpan}>18:00 - 21:00</span>
-
-      <ul className={styles.performerList}>
-        <li>Juha Kulmala + Positroninen runo-orkesteri </li>
-        <li>Terhi Forssén</li>
-        <li>Katariina Vuorinen & Björn</li>
-      </ul>
-      <i>Ohjelma täydentyy...</i>
-      <hr className={styles.programHr} />
-    </section>
+      </Link>
+    </section >
   );
 };
 
diff --git a/pages/safety.tsx b/pages/turvallisuus.tsx
similarity index 100%
rename from pages/safety.tsx
rename to pages/turvallisuus.tsx
diff --git a/styles/Program.module.scss b/styles/Program.module.scss
index 5a4ba95..ac6619a 100644
--- a/styles/Program.module.scss
+++ b/styles/Program.module.scss
@@ -22,7 +22,7 @@
 .programTitle {
   display: flex;
   align-items: baseline;
-  justify-content: space-evenly;
+  justify-content: space-between;
   width: 80%;
   max-width: 25rem;
   padding-left: 1.5rem;
@@ -54,16 +54,54 @@
 }
 
 .performerList {
-  font-size: 1.5rem;
-  font-weight: bold;
-  list-style-type: none;
-  line-height: 1.5rem;
-  max-width: 20rem;
-  padding-left: 0;
-  margin-top: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2em;
+  justify-content: space-around;
+  margin-top: 3rem;
+}
 
-  li {
-    margin-top: 1em;
+.performerCard {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  text-decoration: none;
+  color: #2f273e;
+
+  img {
+    border-radius: 50%;
+  }
+}
+
+.performerCard:hover {
+  color: rgb(117, 117, 117);
+  transition: color 0.3s;
+}
+
+.performerName {
+  max-width: 105px;
+  word-wrap: normal;
+}
+
+.eventContainer {
+  display: flex;  
+  gap: 4%;
+  margin-bottom: 2em;
+}
+
+.event {
+  min-width: 40%;
+  padding: 4%;
+  background-color: #e7e2f5;
+}
+
+@media screen and (max-width: 768px) {
+  .eventContainer {
+    flex-wrap: wrap;
+  }
+
+  .event {
+    margin-top: 2em;
   }
 }
 
@@ -124,4 +162,16 @@
   border: 0.1rem solid #d5caf29d;
   width: 43%;
   margin-top: 1em;
+}
+
+.archiveLink {
+  margin-top: 1rem;
+}
+
+.archiveLinkText {
+  font-size: 2.5rem;
+  margin-right: 1rem;
+  color: #2f273e;
+  text-decoration: none;
+  font-weight: bold;
 }
\ No newline at end of file