diff --git a/src/assets/json/board.json b/src/assets/json/board.json
new file mode 100644
index 0000000..45e764a
--- /dev/null
+++ b/src/assets/json/board.json
@@ -0,0 +1,159 @@
+{
+    "name_fi": "Hallitus",
+    "name_en": "Board",
+    "roles": [
+      {
+        "name_fi": "Puheenjohtaja",
+        "name_en": "Chairman",
+        "representatives": [
+          {
+            "name": "Johannes Ora"
+          }
+        ]
+      },
+      {
+        "name_fi": "Sihteeri",
+        "name_en": "Secretary",
+        "representatives": [
+          {
+            "name": "Salla Lyytikäinen",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Rahastonhoitaja",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Santeri Huhtala",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Fuksitoimikunnan Puheenjohtaja",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Toni Ojala",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Fuksitoimikunnan puheenjohtajan adjutantti",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Toni Lyttinen",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Hovimestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Eveliina Ahonen",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Hovineuvos",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Melissa Dönmez",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "ISOvastaava",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Heidi Mäkitalo",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Hyvinvointimestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Sauli Norja",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Opintomestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Simo Hakanummi",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Teknologiamestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Oskari Ponkala",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Ulkomestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Oliver Hiekkamies",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Yrityssuhdemestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Otto Julkunen",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/src/assets/json/hvtmk.json b/src/assets/json/hvtmk.json
new file mode 100644
index 0000000..421f9bd
--- /dev/null
+++ b/src/assets/json/hvtmk.json
@@ -0,0 +1,55 @@
+{
+    "name_fi": "Hyvinvointitoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Hyvinvointimestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Sauli Norja" }
+            ]
+        },
+        {
+            "name_fi": "Kulttuurivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Juha Anttila" },
+                { "name": "Aino Suomi" },
+                { "name": "Nestori Ylönjoki" }
+            ]
+        },
+        {
+            "name_fi": "Liikuntavastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Elmeri Pälikkö" },
+                { "name": "Joel Wickström" }
+            ]
+        },
+        {
+            "name_fi": "Kiltahuonevastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ilari Ojakorpi" }
+            ]
+        },
+        {
+            "name_fi": "Kiltapäiväkerhovastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Samuel Laine" },
+                { "name": "Aleksanteri Vesala" }
+            ]
+        },
+        {
+            "name_fi": "Retkivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jarno Mustonen" },
+                { "name": "Suvi Karanta" },
+                { "name": "Jesse Räisänen" },
+                { "name": "Mikko Suhonen" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/mtmk.json b/src/assets/json/mtmk.json
new file mode 100644
index 0000000..6261ca0
--- /dev/null
+++ b/src/assets/json/mtmk.json
@@ -0,0 +1,89 @@
+{
+    "name_fi": "Mediatoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Puheenjohtaja",
+            "name_en": "",
+            "representatives": [
+                {
+                    "name": "Salla Lyytikäinen",
+                    "phone_number": null,
+                    "email": null,
+                    "image": null
+                }
+            ]
+        },
+        {
+            "name_fi": "Päätoimittaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Sasu Salasti" }
+            ]
+        },
+        {
+            "name_fi": "Toimittaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Tuukka Syrjänen" },
+                { "name": "Ilmari Kasvi" },
+                { "name": "Elias Hirvonen" },
+                { "name": "Miika Koskela" },
+                { "name": "Taneli Myllykangas" },
+                { "name": "Emmaleena Ahonen" },
+                { "name": "Ville-Pekka Laakkonen" },
+                { "name": "Sofia Öhman" },
+                { "name": "Nestori Yrjönkoski" },
+                { "name": "Jami Hyytiäinen" },
+                { "name": "Aleksanteri Vesala" }
+            ]
+        },
+        {
+            "name_fi": "Toimittaja & Valokuvaaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Kiia-Einola" }
+            ]
+        },
+        {
+            "name_fi": "Taittaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Aino Suomi" },
+                { "name": "Olli Komulainen" },
+                { "name": "Emilia Kortelainen" }
+            ]
+        },
+        {
+            "name_fi": "Taittaja & Valokuvaaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jonna Tammikivi" }
+            ]
+        },
+        {
+            "name_fi": "Valokuvaaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Suvi Karanta" },
+                { "name": "Mikko Haaparanta" },
+                { "name": "Johannes Viirimäki" }
+            ]
+        },
+        {
+            "name_fi": "Valokuvaaja & Graafikko",
+            "name_en": "",
+            "representatives": [
+                { "name": "Kalle Petäjäaho" },
+                { "name": "Maria Pöllä" }
+            ]
+        },
+        {
+            "name_fi": "Videokuvaaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Aaro Rasilainen" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/optmk.json b/src/assets/json/optmk.json
new file mode 100644
index 0000000..91fdb26
--- /dev/null
+++ b/src/assets/json/optmk.json
@@ -0,0 +1,31 @@
+{
+    "name_fi": "Opintotoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Opintomestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Simo Hakanummi" }
+            ]
+        },
+        {
+            "name_fi": "Opintovastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Miina-Maija Simonen" },
+                { "name": "Tomi Valkonen" },
+                { "name": "Leo Lahti" },
+                { "name": "Ville-Pekka Laakkonen" },
+                { "name": "Samu Nyman" } 
+            ]
+        },
+        {
+            "name_fi": "Abimarkkinointi Vastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ilkka Huttu" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/otmk.json b/src/assets/json/otmk.json
new file mode 100644
index 0000000..99495f7
--- /dev/null
+++ b/src/assets/json/otmk.json
@@ -0,0 +1,63 @@
+{
+    "name_fi": "Ohjelmatoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Hovimestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Eveliina Ahonen" }
+            ]
+        },
+        {
+            "name_fi": "Hovineuvos",
+            "name_en": "",
+            "representatives": [
+                { "name": "Melissa Dönmez" }
+            ]
+        },
+        {
+            "name_fi": "Emäntä",
+            "name_en": "",
+            "representatives": [
+                { "name": "Oona Karjalainen" },
+                { "name": "Emilia Kortemäki" },
+                { "name": "Venla Vastamäki" }
+            ]
+        },
+        {
+            "name_fi": "Isäntä",
+            "name_en": "",
+            "representatives": [
+                { "name": "Henry Jaakkola" },
+                { "name": "Sakke Kangas" },
+                { "name": "Otto Torkkeli" },
+                { "name": "Tommi Oinen" },
+                { "name": "Eero Ketonen" }
+            ]
+        },
+        {
+            "name_fi": "Lukkari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Tuomo Leino" },
+                { "name": "Hami Hyytinen" },
+                { "name": "Tuomas Pajunpää" },
+                { "name": "Samuel Laine" },
+                { "name": "Toni Miilunpalo" }
+            ]
+        },
+        {
+            "name_fi": "Lukkarikisällit",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jesse Räisänen" },
+                { "name": "Eino Laakso" },
+                { "name": "Sakari Harjunpää" },
+                { "name": "Niilo Ojala" },
+                { "name": "Ilkka Huttu" },
+                { "name": "Akseli Järvinen" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/ptmk.json b/src/assets/json/ptmk.json
new file mode 100644
index 0000000..7c531c9
--- /dev/null
+++ b/src/assets/json/ptmk.json
@@ -0,0 +1,29 @@
+{
+    "name_fi": "Pajatoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Pajavastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Karl Lipping" }
+            ]
+        },
+        {
+            "name_fi": "Pajakisälli",
+            "name_en": "",
+            "representatives": [
+                { "name": "Tommi Sytelä" },
+                { "name": "Eerikki Eskola" },
+                { "name": "Arkadii Kolchin" },
+                { "name": "Samu Nyman" },
+                { "name": "Konsta Langi" },
+                { "name": "Johannes Viirimäki" },
+                { "name": "Justus Ojala" },
+                { "name": "Ville Tujunen" },
+                { "name": "Antti Tarkka" },
+                { "name": "Pyry Vaara" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/sstmk.json b/src/assets/json/sstmk.json
new file mode 100644
index 0000000..51581a1
--- /dev/null
+++ b/src/assets/json/sstmk.json
@@ -0,0 +1,70 @@
+{
+    "name_fi": "SIK100-toimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Puheenjohtaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Erna Virtanen" }
+            ]
+        },
+        {
+            "name_fi": "Webivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jaakko Koskela" }
+            ]
+        },
+        {
+            "name_fi": "Markkinointivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Sasu Salasti" }
+            ]
+        },
+        {
+            "name_fi": "Yritysvastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Juuli Leppänen" }
+            ]
+        },
+        {
+            "name_fi": "Seminaarivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Sini Huhtinen" }
+            ]
+        },
+        {
+            "name_fi": "Kevätkarnevaalimajuri",
+            "name_en": "",
+            "representatives": [
+                { "name": "Olli Komulainen" }
+            ]
+        },
+        {
+            "name_fi": "PoTa100-pääjuhlatirehtööri",
+            "name_en": "",
+            "representatives": [
+                { "name": "Emmaleena Ahonen" },
+                { "name": "Jonna Tammikivi" }
+            ]
+        },
+        {
+            "name_fi": "PoTa100-jatkokuvernööri",
+            "name_en": "",
+            "representatives": [
+                { "name": "Mikael Liimatainen" }
+            ]
+        },
+        {
+            "name_fi": "PoTa100-sillistirehtööri",
+            "name_en": "",
+            "representatives": [
+                { "name": "Tuomo Leino" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/ttmk.json b/src/assets/json/ttmk.json
new file mode 100644
index 0000000..c87b0f0
--- /dev/null
+++ b/src/assets/json/ttmk.json
@@ -0,0 +1,35 @@
+{
+    "name_fi": "Teknologiatoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Teknologiamestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Oskari Ponkala" }
+            ]
+        },
+        {
+            "name_fi": "Tekniikkavastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Antti Mäki" }
+            ]
+        },
+        {
+            "name_fi": "Web-Kisälli",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ilari Ojakorpi" },
+                { "name": "Leo Lahti" },
+                { "name": "Jyri Korhonen" },
+                { "name": "Tuukka Syrjänen" },
+                { "name": "Emmaleena Ahonen" },
+                { "name": "Mikko Suhonen" },
+                { "name": "Jaakko Koskela" },
+                { "name": "Justus Ojala" }
+            ]
+        }
+    ]
+}
+        
\ No newline at end of file
diff --git a/src/assets/json/utmk.json b/src/assets/json/utmk.json
new file mode 100644
index 0000000..1051174
--- /dev/null
+++ b/src/assets/json/utmk.json
@@ -0,0 +1,43 @@
+{
+    "name_fi": "Ulkotoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Ulkomestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Oliver Hiekkamies" }
+            ]
+        },
+        {
+            "name_fi": "Kv-ISOvastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Elias Hirvonen" }
+            ]
+        },
+        {
+            "name_fi": "International Helper",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ville-Pekka Laakkonen" }
+            ]
+        },
+        {
+            "name_fi": "Ulkosuhdevastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Leo Muller" },
+                { "name": "Eino Tyrvänen" },
+                { "name": "Pekka Aho" }
+            ]
+        },
+        {
+            "name_fi": "Ulkowanhus",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jyri Korhonen" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/ytmk.json b/src/assets/json/ytmk.json
new file mode 100644
index 0000000..e173861
--- /dev/null
+++ b/src/assets/json/ytmk.json
@@ -0,0 +1,33 @@
+{
+    "name_fi": "Yrityssuhdetoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Yrityssuhdemestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Otto Julkunen" }
+            ]
+        },
+        {
+            "name_fi": "Excursiopäävastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Henry Gustafsson" }
+            ]
+        },
+        {
+            "name_fi": "Yrityssuhdevastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ilkka Huttu" },
+                { "name": "Arkadii Kolchin" },
+                { "name": "Oskari Luukkonen" },
+                { "name": "Niilo Ojala" },
+                { "name": "Emma Reinikainen" },
+                { "name": "Melina Sundell" },
+                { "name": "Elma Tuohimetsä" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/components/CommitteeContainer.tsx b/src/components/CommitteeContainer.tsx
index b8fa65c..699420c 100644
--- a/src/components/CommitteeContainer.tsx
+++ b/src/components/CommitteeContainer.tsx
@@ -1,17 +1,19 @@
 import React from "react";
 import styled from "styled-components";
 import ContactCard from "./ContactCard";
+import { Committee } from "@views/ContactsPage/ContactsPageView"
 import { colors } from "@theme/colors";
 
+const blank_profile = "/img/blank_profile.png";
+
 interface CommitteeContainerProps {
-  name_fi: string;
-  name_en: string;
-  contacts: any[];
+  committee: Committee;
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: flex-start;
   color: ${colors.darkBlue};
 
@@ -27,31 +29,27 @@ const Container = styled.div`
   & > div {
     display: flex;
     flex-flow: row wrap;
-    justify-content: flex-start;
+    justify-content: center;
   }
 `;
 
-const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ name_fi, name_en, contacts }) => (
+const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ committee }) => (
   <Container>
     <p>
-      {name_fi}
-    </p>
-    <p>
-      {name_en}
+      {committee.name_fi||committee.name_en}
     </p>
     <div>
-      {contacts.map(occupation => (
-        occupation.officials.map(official => (
+      {committee.roles.map(role => (
+        role.representatives.map(representative => (
           <ContactCard
-            key={official.first_name}
-            first_name={official.first_name}
-            last_name={official.last_name}
-            phone={official.phone_number}
-            email={official.email}
-            image={official.image}
-            // role_fi={occupation.role}
-            role_fi="TODO"
-            role_en="TODO"
+            key={representative.name}
+            name={representative.name}
+            phone={representative.phone_number}
+            email={representative.email}
+            //conditional image for dev
+            image={ !(committee.name_en === "Board") ? representative.image : blank_profile}
+            role_fi={role.name_fi}
+            role_en={role.name_en}
           />
         ))
       ))}
@@ -59,4 +57,4 @@ const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ name_fi, name_e
   </Container>
 );
 
-export default CommitteeContainer;
+export default CommitteeContainer;
\ No newline at end of file
diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx
index ba23ccc..38996a9 100644
--- a/src/components/ContactCard.tsx
+++ b/src/components/ContactCard.tsx
@@ -1,23 +1,24 @@
 import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
-const blank_profile = "/img/blank_profile.png";
 
 const Card = styled.article`
   display: flex;
+  align-items: flex-start;
   flex-flow: row nowrap;
+  padding: 0.5rem;
   color: ${colors.darkBlue};
-  margin: 1rem;
+  width: 19rem;
 `;
 
 const ImageContainer = styled.div`
-  padding: 1rem;
+  padding: 0.5rem;
   display: flex;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  max-height: 100px;
-  max-width: 100px;
+  height: 5rem;
+  width: 5rem;
 
   & > img {
     width: 100%;
@@ -29,42 +30,49 @@ const ImageContainer = styled.div`
 const Info = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0.5rem;
-  justify-content: flex-start;
-  font-size: 1rem;
-  font-weight: 300;
+  align-items: flex-start;
+  padding: 0.25rem;
   color: ${colors.darkBlue};
+
+  & > p {
+    font-size: 0.8rem;
+    margin: 0;
+  }
+
+  & > h1 {
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
 `;
 
 interface ContactCardProps {
-  first_name: string;
-  last_name: string;
-  phone: number;
+  name: string;
+  phone: string;
   email: string;
   image: string;
   role_fi: string;
   role_en: string;
 }
 
-const ContactCard: React.FC<ContactCardProps> = ({ first_name, last_name, phone, email, image, role_fi, role_en }) => {
-  const fullName = `${first_name} ${last_name}`;
+const ContactCard: React.FC<ContactCardProps> = ({ name, phone, email, image, role_fi, role_en }) => {
   return(
     <Card>
-      <ImageContainer>
-        <img
-          src={image || blank_profile}
-          alt={fullName}
-        />
-      </ImageContainer>
+      {image ?
+        <ImageContainer>
+          <img
+            src={image}
+            alt={name}
+          />
+        </ImageContainer> : null
+      }
       <Info>
-        <p>{fullName}</p>
-        <p>{phone}</p>
-        <p>{email}</p>
-        <p>{role_fi}</p>
-        <p>{role_en}</p>
+        <h1>{name}</h1>
+        <p>{role_fi || role_en}</p>
+        {phone ? <p>{phone}</p> : null}
+        {email ? <p>{email}</p> : null}
       </Info>
     </Card>
   )
 }
 
-export default ContactCard;
+export default ContactCard;
\ No newline at end of file
diff --git a/src/pages/yhteystiedot.tsx b/src/pages/yhteystiedot.tsx
index 0581f9b..fcb1971 100644
--- a/src/pages/yhteystiedot.tsx
+++ b/src/pages/yhteystiedot.tsx
@@ -10,7 +10,7 @@ const ContactsPage: NextPage = () => (
       <link rel="canonical" href="https://sik.ayy.fi/yhteystiedot" />
     </Head>
     <PageWrapper>
-      <ContactsPageView contacts={[]} committees={[]} />
+      <ContactsPageView />
     </PageWrapper>
   </>
 );
diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx
index 13e02ca..6e3a5bd 100644
--- a/src/views/ContactsPage/ContactsPageView.tsx
+++ b/src/views/ContactsPage/ContactsPageView.tsx
@@ -4,11 +4,16 @@ import CommitteeContainer from "@components/CommitteeContainer";
 import { Divider, TextSection } from "@components/index";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
-
-interface ContactsPageViewProps {
-  contacts: any[];
-  committees: any[];
-}
+import BoardJson from "@assets/json/board.json";
+import HvtmkJson from "@assets/json/hvtmk.json";
+import MtmkJson from "@assets/json/mtmk.json";
+import OptmkJson from "@assets/json/optmk.json";
+import OtmkJson from "@assets/json/otmk.json";
+import PtmkJson from "@assets/json/ptmk.json";
+import SstmkJson from "@assets/json/sstmk.json";
+import TtmkJson from "@assets/json/ttmk.json";
+import UtmkJson from "@assets/json/utmk.json";
+import YtmkJson from "@assets/json/ytmk.json";
 
 const BlueLink = styled(Link)`
   color: ${colors.blue1};
@@ -18,46 +23,120 @@ const BlueLink = styled(Link)`
   }
 `;
 
-
-class ContactsPageView extends React.Component<ContactsPageViewProps> {
-  render() {
-    const { contacts, committees } = this.props;
-    const board = contacts.filter(x => x.role.is_board);
-    return (
-      <>
-        <TextSection>
-          <p>
-            Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
-            Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
-          </p>
-        </TextSection>
-
-        <TextSection>
-          <div>
-            <CommitteeContainer name_fi="Hallitus" name_en="Board" contacts={board} />
-            <p>
-              {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-              <BlueLink to="mailto:sik-hallitus@list.ayy.fi" passHref={true}>
-                sik-hallitus@list.ayy.fi
-              </BlueLink>
-            </p>
-          </div>
-        </TextSection>
-        <Divider />
-        {committees.map((committee, index) => {
-          // const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0;
-          return (
-            <>
-              <TextSection key={index}>
-                <CommitteeContainer name_fi={committee.name_fi} name_en={committee.name_en} contacts={contacts.filter(x => x.role.committee.name_fi === committee.name_fi)} />
-              </TextSection>
-              <Divider />
-            </>
-          )
-        })}
-      </>
-    );
-  }
+export interface Committee {
+  name_fi: string;
+  name_en: string;
+  roles: Array<Role>;
 }
 
-export default ContactsPageView;
+export interface Role {
+  name_fi: string;
+  name_en: string;
+  representatives: Array<Representative>
+}
+
+export interface Representative {
+  name: string;
+  phone_number?: string;
+  email?: string;
+  image?: string;
+}
+
+const ContactsPageView: React.FC = () => (
+  <>
+    <TextSection>
+      <p>
+        Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
+        Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
+      </p>
+    </TextSection>
+
+    <TextSection>
+      <div>
+        <CommitteeContainer committee={BoardJson} />
+        <p>
+          {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
+          <BlueLink to="mailto:sik-hallitus@list.ayy.fi">
+            sik-hallitus@list.ayy.fi
+          </BlueLink>
+        </p>
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={HvtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={MtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={OptmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={OtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={PtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={SstmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={TtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={UtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={YtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+  </>
+)
+
+export default ContactsPageView;
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 2c28198..33480b6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,9 +5,14 @@
     "noImplicitAny": false,
     "esModuleInterop": true,
     "experimentalDecorators": true,
-    // "emitDecoratorMetadata": true,
-    // "allowSyntheticDefaultImports": true,
-    // "resolveJsonModule": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
     "module": "commonjs",
     "target": "es5",
     "jsx": "preserve",
@@ -21,6 +26,9 @@
     ],
     "baseUrl": "./",
     "paths": {
+      "@assets/*": [
+        "src/assets/*"
+      ],
       "@components/*": [
         "src/components/*"
       ],
@@ -43,14 +51,6 @@
         "src/utils/*"
       ]
     },
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true
   },
   "include": [
     "./src/**/*",