diff --git a/opdracht-1/index.html b/opdracht-1/index.html
index 6eafaaa..6faead8 100644
--- a/opdracht-1/index.html
+++ b/opdracht-1/index.html
@@ -30,7 +30,7 @@
 
 <!-- Navigatiebalk 3 -->
 <nav class="navbar-three">
-    <div>
+    <div class="image-wrapper">
         <img src="../assets/logo-acme.svg" alt="Company logo"/>
         <p>NOVI Futuristic Inc</p>
     </div>
@@ -44,11 +44,11 @@
 
 <!-- Navigatiebalk 4 -->
 <nav class="navbar-four">
-    <div>
+    <div class="image-wrapper">
         <img src="../assets/logo-acme.svg" alt="Company logo"/>
         <p>NOVI Futuristic Inc</p>
     </div>
-    <ul>
+    <ul class="nav-links">
         <li><a href="/">Home</a></li>
         <li><a href="/">About Us</a></li>
         <li><a href="/">Our Products</a></li>
@@ -62,7 +62,7 @@
 
 <!-- Navigatiebalk 5 -->
 <nav class="navbar-five">
-    <div>
+    <div class="image-wrapper">
         <img src="../assets/logo-acme.svg" alt="Company logo"/>
         <p>NOVI Futuristic Inc</p>
     </div>
diff --git a/opdracht-1/styles.css b/opdracht-1/styles.css
index e69de29..4eb806c 100644
--- a/opdracht-1/styles.css
+++ b/opdracht-1/styles.css
@@ -0,0 +1,65 @@
+/*Opdracht 1a*/
+
+.navbar-one ul {
+    display: flex;
+    justify-content: space-between;
+    list-style: none;
+}
+
+/*Opdracht 1b*/
+
+.navbar-two ul {
+    display: flex;
+    justify-content: flex-end;
+    list-style: none;
+}
+
+/*Opdracht 1c*/
+
+.navbar-three {
+    display: flex;
+    justify-content: space-between;
+}
+
+.navbar-three ul {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    list-style: none;
+}
+
+.image-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+/*Opdracht 1d*/
+.navbar-four {
+    display: flex;
+    justify-content: space-between;
+}
+
+.navbar-four ul {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    list-style: none;
+}
+
+.navbar-four .nav-links {
+    flex: 1;
+}
+
+/*Opdracht 1e*/
+.navbar-five {
+    display: flex;
+    justify-content: space-between;
+}
+
+.navbar-five ul {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    list-style: none;
+}
\ No newline at end of file
diff --git a/opdracht-2/index.html b/opdracht-2/index.html
index 142d2ed..42c7900 100644
--- a/opdracht-2/index.html
+++ b/opdracht-2/index.html
@@ -7,6 +7,86 @@
     <title>NOVI Flexbox opdracht 2</title>
 </head>
 <body>
-    <p>It's Flexbox time!</p>
+<nav>
+    <div class="image-wrapper">
+        <img src="../assets/logo-acme.svg" alt="Company logo"/>
+        <p>NOVI Futuristic Inc</p>
+    </div>
+    <div class="menu">
+        <div>
+            <ul>
+                <li><a href="/"><img src="../assets/home.svg" alt="home-icon"/>Dashboard</a></li>
+                <li><a href="/"><img src="../assets/apps.svg" alt="apps-icon"/>Projecten</a></li>
+                <li><a href="/"><img src="../assets/calendar.svg" alt="calendar-icon"/>Opleidingen en trainingen</a>
+                </li>
+                <li><a href="/"><img src="../assets/graduation-cap.svg" alt="graduation-cap-icon"/>Cursusmateriaal</a>
+                </li>
+            </ul>
+        </div>
+        <div class="login">
+            <button type="button" class="button-primary">
+                Meld je aan
+            </button>
+            <button type="button" class="button-secondary">
+                Login
+            </button>
+        </div>
+    </div>
+</nav>
+<div class="main-content">
+    <header>
+        <h1>Opleidingsaanbod</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/> Animi at aut, consectetur fuga fugit magni
+            minus quo quos repudiandae veniam.</p>
+    </header>
+    <main>
+        <article>
+            <img src="../assets/placeholder-image.svg" alt="placeholder-image" />
+            <h2>Some amazing title</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+            <span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
+            <button type="button" class="button-secondary">Inschrijven</button>
+        </article>
+        <article>
+            <img src="../assets/placeholder-image.svg" alt="placeholder-image" />
+            <h2>Some amazing title</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+            <span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
+            <button type="button" class="button-secondary">Inschrijven</button>
+        </article>
+        <article>
+            <img src="../assets/placeholder-image.svg" alt="placeholder-image" />
+            <h2>Some amazing title</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+            <span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
+            <button type="button" class="button-secondary">Inschrijven</button>
+        </article>
+        <article>
+            <img src="../assets/placeholder-image.svg" alt="placeholder-image" />
+            <h2>Some amazing title</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+            <span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
+            <button type="button" class="button-secondary">Inschrijven</button>
+        </article>
+        <article>
+            <img src="../assets/placeholder-image.svg" alt="placeholder-image" />
+            <h2>Some amazing title</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+            <span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
+            <button type="button" class="button-secondary">Inschrijven</button>
+        </article>
+        <article>
+            <img src="../assets/placeholder-image.svg" alt="placeholder-image" />
+            <h2>Some amazing title</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+            <span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
+            <button type="button" class="button-secondary">Inschrijven</button>
+        </article>
+    </main>
+    <footer>
+        <p>&copy; NOVI Hogeschool</p>
+    </footer>
+</div>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/opdracht-2/styles.css b/opdracht-2/styles.css
index e69de29..e1e5080 100644
--- a/opdracht-2/styles.css
+++ b/opdracht-2/styles.css
@@ -0,0 +1,100 @@
+body {
+    display: flex;
+    height: 100vh;
+}
+
+/*------------------------------- NAVIGATION BAR -------------------------------*/
+
+nav {
+    display: flex;
+    flex: 1 0 250px;
+    flex-direction: column;
+    gap: 20px;
+}
+
+ul {
+    list-style: none;
+}
+
+li a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.image-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.menu {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: auto;
+}
+
+.login {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+/*------------------------------- MAIN CONTENT -------------------------------*/
+
+.main-content {
+    display: flex;
+    flex-direction: column;
+    flex: 9;
+}
+
+header,
+main,
+footer,
+article {
+    display: flex;
+}
+
+header {
+    flex-direction: column;
+    flex: 0 0 40vh;
+    justify-content: center;
+    background: url("../assets/placeholder-image.svg") center no-repeat;
+    background-size: cover;
+    text-align: center;
+}
+
+main {
+    flex: 1 0 0;
+    overflow: scroll;
+    flex-wrap: wrap;
+    gap: 24px;
+    justify-content: center;
+    padding: 24px;
+}
+
+article {
+    display: flex;
+    max-width: 260px;
+    max-height: 500px;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+span {
+    display: flex;
+    justify-content: space-between;
+}
+
+.icon {
+    max-width: 16px;
+}
+
+footer {
+    background-color: #383838;
+    color: #fff;
+    justify-content: center;
+    font-size: 12px;
+    padding: 12px;
+}
\ No newline at end of file
