diff --git a/src/components/Experience/ExperienceBox.astro b/src/components/Experience/ExperienceBox.astro
new file mode 100644
index 0000000..380e0bf
--- /dev/null
+++ b/src/components/Experience/ExperienceBox.astro
@@ -0,0 +1,135 @@
+---
+const { experience } = Astro.props;
+
+const color: string = experience.color
+---
+
+
+
+<div class="container">
+    <div class="accent"></div>
+
+    <div class="content">
+        <div class="titleRow">
+            <div class="titleContainer">
+                <h3 class="main-title">{experience.name}</h3>
+                <p class="sub-title">{experience.role}</p>
+
+                <p class="description">
+                    {experience.description}
+                </p>
+            </div>
+
+            <div class="dateContainer">
+                <p>
+                    {experience.start.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}
+                    -
+                    {experience.end
+                        ? experience.end.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
+                        : 'Nu'}
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style define:vars={{color}}>
+    .container {
+        font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+        position: relative;
+        display: flex;
+        align-items: stretch;
+        gap: 1rem;
+        min-height: 120px;
+        padding: 1rem 1rem 1rem 0.9rem;
+        background: rgba(255,255,255,0.05);
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 14px;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.18);
+        color: white;
+        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+    }
+
+    .container:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 14px 28px rgba(0,0,0,0.24);
+        border-color: rgba(255,255,255,0.14);
+    }
+
+    .accent {
+        width: 4px;
+        border-radius: 999px;
+        background: var(--color);
+        flex-shrink: 0;
+    }
+
+    .content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+    }
+
+    .titleRow {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .titleContainer {
+        min-width: 0;
+    }
+
+    .main-title {
+        font-size: 1.1rem;
+        line-height: 1.2;
+        margin: 0 0 0.3rem 0;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        font-size: 0.92rem;
+        line-height: 1.45;
+        margin: 0;
+        opacity: 0.8;
+    }
+
+    .dateContainer {
+        flex-shrink: 0;
+    }
+
+    .dateContainer p {
+        font-size: 0.8rem;
+        margin: 0;
+        white-space: nowrap;
+        opacity: 0.7;
+    }
+
+    @media (max-width: 768px) {
+        .container {
+            min-height: 100px;
+            padding: 0.85rem 0.85rem 0.85rem 0.75rem;
+            gap: 0.8rem;
+        }
+
+        .titleRow {
+            flex-direction: column;
+            gap: 0.55rem;
+        }
+
+        .main-title {
+            font-size: 1rem;
+        }
+
+        .sub-title {
+            font-size: 0.84rem;
+        }
+
+        .dateContainer p {
+            font-size: 0.74rem;
+            white-space: normal;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Experience/Page.astro b/src/components/Experience/Page.astro
new file mode 100644
index 0000000..8fd0ff1
--- /dev/null
+++ b/src/components/Experience/Page.astro
@@ -0,0 +1,65 @@
+---
+import { siteData } from '../../data/site';
+import ExperienceBox from './ExperienceBox.astro';
+import TitleCard from '../TitleCard.astro';
+
+const experience = [...siteData.experience];
+const sortedExperience = experience.sort((a, b) => b.start.getTime() - a.start.getTime());
+---
+
+<div id="container">
+    <section class="studies-section" aria-label="Studies">
+        <div class="studies-list">
+            <TitleCard title="Ervaringen" description="Hieronder zie je alle werkervaring die ik tot nu toe hebv opgedaan. "/>
+            {sortedExperience.map((experience) => (
+                <ExperienceBox experience={experience} />
+            ))}
+        </div>
+    </section>
+</div>
+
+<style>
+#container {
+    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+    position: relative;
+    margin: 10px;
+    padding: clamp(1.5rem, 3vw, 2.5rem);
+    background:
+        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
+        rgb(74, 74, 74);
+    border-radius: 20px;
+    box-shadow: 0 24px 60px rgba(16, 14, 12, 0.18);
+    overflow: hidden;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    align-items: start;
+}
+
+.studies-section {
+    min-width: 0;
+}
+
+.studies-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.3rem;
+    position: relative;
+}
+
+/* Mobile: collapse to one column,
+   so "Kennis" ends up fully under studies */
+@media (max-width: 768px) {
+    #container {
+        margin: 5px;
+        padding: 1rem;
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .studies-section {
+        margin-top: 2rem;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/data/site.ts b/src/data/site.ts
index d634a5b..2303560 100644
--- a/src/data/site.ts
+++ b/src/data/site.ts
@@ -35,6 +35,17 @@ export const siteData = {
             end: new Date("2025-06-18"),
             color: "#8FE508"
         }
+    ],
+    experience: [
+        {
+            name: "Brightpark",
+            role: "Stagaire Junior Developer",
+            description: "Bij Brightpark heb ik mijn eerste ervaring opgedaan in het werkveld van Software Ontwikkeling. Ik heb hier gewerkt aan meerdere projecten. Een van de leukere was een iOS app die helpt bij het meten van huizen door gebruik te maken van de Bosch GLM- series meetapperatuur. Deze app heb ik gemaakt in Flutter, met wat kleine stappen Swift in om de meetapperatuur werkend te krijgen.",
+            start: new Date("2024-09-10"),
+            end: new Date("2025-05-1"),
+            tech: ["Flutter", "Swift", "Svelte", "Laravel"],
+            color: "#30e7ffe9"
+        }
     ]
 }
 
@@ -47,5 +58,8 @@ export const techColors = {
     "Tkinter": "#3e759e",
     "Spotify API": "#1DB954",
     "C++": "#00599C",
-    "Arduino": "#00979D"
+    "Arduino": "#00979D",
+    "Flutter": "#02569B",
+    "Svelte": "#FF3E00",
+    "Laravel": "#FF2D20",
 };
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2f27e68..71f67fa 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,11 +3,13 @@ import Layout from '../layouts/Layout.astro';
 import Hero from '../components/Hero/Page.astro';
 import Studies from "../components/Studies/Page.astro"
 import Projects from "../components/Projects/Page.astro"
+import Experience from "../components/Experience/Page.astro"
 ---
 
 
 <Layout>
 	<Hero />
 	<Projects/>
-	<Studies/>
+	<Experience/>
+	<!-- <Studies/> -->
 </Layout>