diff --git a/components/CaseCard.js b/components/CaseCard.js
new file mode 100644
index 0000000..3185f1a
--- /dev/null
+++ b/components/CaseCard.js
@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./modules/CaseCard.module.css";
+
+export default function CaseCard(props) {
+  const study = props.study;
+
+  return (
+    <div className={styles.container}>
+      <img
+        className={`${styles.cover}`}
+        src={props.study.cover}
+        alt="The one and only bongo cat!"
+      />
+      <div className={styles.cardInfo}>
+        <b className={styles.title}>{study.title}</b>
+        <p className={styles.description}>{study.short_description}</p>
+        <b>{study.date}</b>
+      </div>
+    </div>
+  );
+}
+
+CaseCard.propTypes = {
+  study: PropTypes.object.isRequired,
+};
diff --git a/components/CaseSection.js b/components/CaseSection.js
new file mode 100644
index 0000000..67d5d6b
--- /dev/null
+++ b/components/CaseSection.js
@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import React from "react";
+import styles from "./modules/CaseSection.module.css";
+import Section from "./Section";
+import CaseCard from "./CaseCard";
+
+export default function CaseSection(props) {
+  return (
+    <Section>
+      <div className={styles.bg} />
+      <div className={styles.content}>
+        <h1 className={styles.title}>Case Studies</h1>
+        <div className={styles.cardRow}>
+          {props.caseStudies.map((study) => (
+            <CaseCard key={study.title} study={props.caseStudies[0]} />
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+CaseSection.propTypes = {
+  caseStudies: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
diff --git a/components/HomeSection.js b/components/HomeSection.js
new file mode 100644
index 0000000..d563ea8
--- /dev/null
+++ b/components/HomeSection.js
@@ -0,0 +1,33 @@
+import PropTypes from "prop-types";
+import React from "react";
+import Avatar from "../components/Avatar";
+import Infos from "../components/Infos";
+import Presentation from "../components/Presentation";
+import styles from "./modules/HomeSection.module.css";
+import Section from "./Section";
+
+export default function HomeSection(props) {
+  const person = props.person;
+  return (
+    <Section>
+      <div className={styles.bg} />
+
+      <div className={styles.flexCenter}>
+        <div className={styles.container}>
+          <Presentation
+            firstName={person.firstName}
+            lastName={person.lastName}
+            description={person.description}
+          />
+          <Avatar />
+
+          <Infos infos={person.infos} />
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+HomeSection.propTypes = {
+  person: PropTypes.object.isRequired,
+};
diff --git a/components/HorizontalSection.js b/components/HorizontalSection.js
deleted file mode 100644
index 3340c8f..0000000
--- a/components/HorizontalSection.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import styles from "./modules/HorizontalSection.module.css";
-
-export default function HorizontalSection(props) {
-  return (
-    <section className={"wrapper"} {...props}>
-      <div className={styles.bg} />
-      {props.children}
-    </section>
-  );
-}
-
-HorizontalSection.propTypes = {
-  children: PropTypes.node.isRequired,
-};
diff --git a/components/Layout.js b/components/Layout.js
deleted file mode 100644
index 9dc274f..0000000
--- a/components/Layout.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import styles from "./modules/Layout.module.css";
-
-export default function Layout(props) {
-  const childrenArray = React.Children.toArray(props.children);
-  let gridItems = [];
-  let otherChild = [];
-  for (let i in childrenArray) {
-    if (i <= 1) {
-      gridItems.push(childrenArray[i]);
-    } else {
-      otherChild.push(childrenArray[i]);
-    }
-  }
-  return (
-    <div className={styles.grid}>
-      <div className={styles.gridItem}>{gridItems[0]}</div>
-      <div className={`${styles.gridItem} ${styles.darkbg}`}>
-        {gridItems[1]}
-      </div>
-      {otherChild}
-    </div>
-  );
-}
-
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
diff --git a/components/modules/Avatar.module.css b/components/modules/Avatar.module.css
index 6a7365c..1fe07ea 100644
--- a/components/modules/Avatar.module.css
+++ b/components/modules/Avatar.module.css
@@ -4,12 +4,8 @@
 }
 
 .absolute {
-  position: absolute;
-
-  max-width: 256px;
-  max-height: 256px;
-  top: calc(50vh - 128px);
-  left: calc(50vw - 128px);
+  width: 256px;
+  height: 256px;
 }
 
 @media screen and (max-width: 1440px) {
diff --git a/components/modules/CaseCard.module.css b/components/modules/CaseCard.module.css
new file mode 100644
index 0000000..f4f621c
--- /dev/null
+++ b/components/modules/CaseCard.module.css
@@ -0,0 +1,25 @@
+.container {
+  height: 100%;
+  border-radius: 16px;
+  background-color: var(--lightDark);
+  overflow: hidden;
+}
+
+.cover {
+  height: 198px;
+  width: 100%;
+}
+
+.cardInfo {
+  padding: 2rem;
+}
+
+.title {
+  font-size: 1.25em;
+}
+
+.description {
+  width: auto;
+  max-width: 320px;
+  margin: 1rem 0;
+}
diff --git a/components/modules/CaseSection.module.css b/components/modules/CaseSection.module.css
new file mode 100644
index 0000000..f1cdbbd
--- /dev/null
+++ b/components/modules/CaseSection.module.css
@@ -0,0 +1,34 @@
+.content {
+  height: 100%;
+
+  position: relative;
+  z-index: 1;
+
+  padding: 4rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.title {
+  color: var(--primary);
+
+  margin-bottom: 8rem;
+}
+
+.cardRow {
+  width: 100%;
+
+  align-self: center;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+@media screen and (max-width: 1280px) {
+  .cardRow {
+    flex-direction: column;
+  }
+}
diff --git a/components/modules/HomeSection.module.css b/components/modules/HomeSection.module.css
new file mode 100644
index 0000000..bd6a4b2
--- /dev/null
+++ b/components/modules/HomeSection.module.css
@@ -0,0 +1,24 @@
+.bg {
+  position: absolute;
+  right: 0%;
+  width: 50vw;
+  height: 100%;
+  background-color: var(--lightDark);
+}
+
+.flexCenter {
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+}
diff --git a/components/modules/HorizontalSection.module.css b/components/modules/HorizontalSection.module.css
deleted file mode 100644
index 38afdfb..0000000
--- a/components/modules/HorizontalSection.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.bg {
-  position: absolute;
-  width: 100%;
-  height: 50vh;
-  background-color: var(--lightDark);
-}
diff --git a/components/modules/Layout.module.css b/components/modules/Layout.module.css
deleted file mode 100644
index 31f541d..0000000
--- a/components/modules/Layout.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.grid {
-  position: relative;
-  display: grid;
-  width: 100%;
-  height: inherit;
-  grid-template-columns: 1fr 1fr;
-}
-
-.gridItem {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.darkbg {
-  background-color: var(--lightDark);
-}
diff --git a/pages/index.js b/pages/index.js
index 03afa48..9917b89 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,10 +1,6 @@
 import Head from "next/head";
-import Layout from "../components/Layout";
-import Section from "../components/Section";
-import Presentation from "../components/Presentation";
-import Infos from "../components/Infos";
-import Avatar from "../components/Avatar";
-import HorizontalSection from "../components/HorizontalSection";
+import HomeSection from "../components/HomeSection";
+import CaseSection from "../components/CaseSection";
 
 export default function Home({ person, caseStudies }) {
   return (
@@ -14,21 +10,9 @@ export default function Home({ person, caseStudies }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <Section>
-        <Layout>
-          <Presentation
-            firstName={person.firstName}
-            lastName={person.lastName}
-            description={person.description}
-          />
-          <Infos infos={person.infos} />
-          <Avatar />
-        </Layout>
-      </Section>
+      <HomeSection person={person} />
 
-      <HorizontalSection>
-        <div>Lol</div>
-      </HorizontalSection>
+      <CaseSection caseStudies={caseStudies} />
     </div>
   );
 }
@@ -64,21 +48,21 @@ export async function getStaticProps() {
       short_description:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
       date: "June 12, 2020",
-      cover: "/public/images/bongo.svg",
+      cover: "/images/bongo.png",
     },
     {
       title: "Doodle",
       short_description:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
       date: "June 12, 2020",
-      cover: "/public/images/bongo.svg",
+      cover: "/images/bongo.png",
     },
     {
       title: "Poodle",
       short_description:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
       date: "June 12, 2020",
-      cover: "/public/images/bongo.svg",
+      cover: "/images/bongo.png",
     },
   ];
 
diff --git a/styles/global.css b/styles/global.css
index 99470d6..275b11f 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -56,6 +56,8 @@ p {
   font-style: normal;
   font-size: 1em;
   color: var(--light);
+
+  line-height: 1.35;
 }
 
 a,