diff --git a/44 - frontendmentor multistep form/jonas/.DS_Store b/44 - frontendmentor multistep form/jonas/.DS_Store
new file mode 100644
index 0000000..3bcb0bd
Binary files /dev/null and b/44 - frontendmentor multistep form/jonas/.DS_Store differ
diff --git a/44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Bold.ttf b/44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Bold.ttf
new file mode 100644
index 0000000..c2293d5
Binary files /dev/null and b/44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Bold.ttf differ
diff --git a/44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Medium.ttf b/44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Medium.ttf
new file mode 100644
index 0000000..7340a40
Binary files /dev/null and b/44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Medium.ttf differ
diff --git a/44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Regular.ttf b/44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Regular.ttf
new file mode 100644
index 0000000..f98a2da
Binary files /dev/null and b/44 - frontendmentor multistep form/jonas/assets/fonts/Ubuntu-Regular.ttf differ
diff --git a/44 - frontendmentor multistep form/jonas/assets/images/bg-sidebar-desktop.svg b/44 - frontendmentor multistep form/jonas/assets/images/bg-sidebar-desktop.svg
new file mode 100644
index 0000000..d9153d9
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/assets/images/bg-sidebar-desktop.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="274" height="568" fill="none" viewBox="0 0 274 568"><rect width="274" height="568" fill="#483EFF" rx="10"/><mask id="a" width="274" height="568" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><rect width="274" height="568" fill="#fff" rx="10"/></mask><g mask="url(#a)"><path fill="#6259FF" fill-rule="evenodd" d="M-34.692 543.101C3.247 632.538 168.767 685.017 211.96 612.52c43.194-72.497-66.099-85.653-104.735-160.569-38.635-74.916-68.657-121.674-124.482-104.607-55.824 17.068-55.375 106.32-17.436 195.757Z" clip-rule="evenodd"/><path fill="#F9818E" fill-rule="evenodd" d="M233.095 601.153c60.679-28.278 92.839-143.526 41.875-171.528-50.965-28.003-57.397 47.579-108.059 75.987-50.662 28.408-82.14 50.207-69.044 88.241 13.096 38.034 74.549 35.578 135.228 7.3Z" clip-rule="evenodd"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="5" d="m165.305 469.097 10.607-10.806M209.461 474.581l-12.506-10.503M187.56 488.991l-6.908 14.798"/><path fill="#FFAF7E" d="M.305 546.891c37.003 0 67-29.997 67-67s-29.997-67-67-67-67 29.997-67 67 29.997 67 67 67Z"/></g></svg>
\ No newline at end of file
diff --git a/44 - frontendmentor multistep form/jonas/assets/images/bg-sidebar-mobile.svg b/44 - frontendmentor multistep form/jonas/assets/images/bg-sidebar-mobile.svg
new file mode 100644
index 0000000..0097d56
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/assets/images/bg-sidebar-mobile.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="375" height="172" viewBox="0 0 375 172"><defs><path id="a" d="M0 0h375v172H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a" fill="#483EFF"/><g mask="url(#b)"><g transform="translate(-151.029 -133.957)"><path fill="#6259FF" d="M79.546 349.634c54.547 128.646 292.524 204.132 354.626 99.852 62.102-104.28-95.035-123.204-150.583-230.963-55.547-107.759-98.711-175.015-178.973-150.466C24.354 92.607 25 220.987 79.546 349.634Z"/><ellipse cx="129.864" cy="258.711" fill="#FFAF7E" rx="96.329" ry="96.373"/><path fill="#F9818E" d="M464.88 433.146c87.31-40.69 133.585-206.525 60.253-246.82-73.333-40.293-82.587 68.465-155.485 109.343-72.898 40.877-118.192 72.245-99.348 126.973 18.845 54.728 107.27 51.194 194.58 10.504Z"/><g stroke="#FFF" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="5"><path d="m367.336 243.125 15.263-15.549M430.872 251.016l-17.995-15.112M399.36 271.751l-9.94 21.293"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/44 - frontendmentor multistep form/jonas/assets/images/favicon-32x32.png b/44 - frontendmentor multistep form/jonas/assets/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/44 - frontendmentor multistep form/jonas/assets/images/favicon-32x32.png differ
diff --git a/44 - frontendmentor multistep form/jonas/assets/images/icon-advanced.svg b/44 - frontendmentor multistep form/jonas/assets/images/icon-advanced.svg
new file mode 100644
index 0000000..a0b2c3f
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/assets/images/icon-advanced.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" fill-rule="evenodd"><circle cx="20" cy="20" r="20" fill="#F9818E"/><path fill="#FFF" fill-rule="nonzero" d="M25.057 15H14.944C12.212 15 10 17.03 10 19.885c0 2.857 2.212 4.936 4.944 4.936h10.113c2.733 0 4.943-2.08 4.943-4.936S27.79 15 25.057 15ZM17.5 20.388c0 .12-.108.237-.234.237h-1.552v1.569c0 .126-.138.217-.259.217H14.5c-.118 0-.213-.086-.213-.203v-1.583h-1.569c-.126 0-.217-.139-.217-.26v-.956c0-.117.086-.213.202-.213h1.584v-1.554c0-.125.082-.231.203-.231h.989c.12 0 .236.108.236.234v1.551h1.555c.125 0 .231.083.231.204v.988Zm5.347.393a.862.862 0 0 1-.869-.855c0-.472.39-.856.869-.856.481 0 .87.384.87.856 0 .471-.389.855-.87.855Zm1.9 1.866a.86.86 0 0 1-.87-.852.86.86 0 0 1 .87-.855c.48 0 .87.38.87.855a.86.86 0 0 1-.87.852Zm0-3.736a.862.862 0 0 1-.87-.854c0-.472.39-.856.87-.856s.87.384.87.856a.862.862 0 0 1-.87.854Zm1.899 1.87a.862.862 0 0 1-.868-.855c0-.472.389-.856.868-.856s.868.384.868.856a.862.862 0 0 1-.868.855Z"/></g></svg>
\ No newline at end of file
diff --git a/44 - frontendmentor multistep form/jonas/assets/images/icon-arcade.svg b/44 - frontendmentor multistep form/jonas/assets/images/icon-arcade.svg
new file mode 100644
index 0000000..5e062fe
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/assets/images/icon-arcade.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" fill-rule="evenodd"><circle cx="20" cy="20" r="20" fill="#FFAF7E"/><path fill="#FFF" fill-rule="nonzero" d="M24.995 18.005h-3.998v5.998h-2v-5.998H15a1 1 0 0 0-1 1V29a1 1 0 0 0 1 1h9.995a1 1 0 0 0 1-1v-9.995a1 1 0 0 0-1-1Zm-5.997 8.996h-2v-1.999h2v2Zm2-11.175a2.999 2.999 0 1 0-2 0v2.18h2v-2.18Z"/></g></svg>
\ No newline at end of file
diff --git a/44 - frontendmentor multistep form/jonas/assets/images/icon-checkmark.svg b/44 - frontendmentor multistep form/jonas/assets/images/icon-checkmark.svg
new file mode 100644
index 0000000..f6017b2
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/assets/images/icon-checkmark.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9"><path fill="none" stroke="#FFF" stroke-width="2" d="m1 4 3.433 3.433L10.866 1"/></svg>
\ No newline at end of file
diff --git a/44 - frontendmentor multistep form/jonas/assets/images/icon-pro.svg b/44 - frontendmentor multistep form/jonas/assets/images/icon-pro.svg
new file mode 100644
index 0000000..57e438a
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/assets/images/icon-pro.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" fill-rule="evenodd"><circle cx="20" cy="20" r="20" fill="#483EFF"/><path fill="#FFF" fill-rule="nonzero" d="M26.666 13H13.334A3.333 3.333 0 0 0 10 16.333v7.193a3.447 3.447 0 0 0 2.14 3.24c1.238.5 2.656.182 3.56-.8L18.52 23h2.96l2.82 2.966a3.2 3.2 0 0 0 3.56.8 3.447 3.447 0 0 0 2.14-3.24v-7.193A3.333 3.333 0 0 0 26.666 13Zm-9.333 6H16v1.333a.667.667 0 0 1-1.333 0V19h-1.333a.667.667 0 0 1 0-1.334h1.333v-1.333a.667.667 0 1 1 1.333 0v1.333h1.333a.667.667 0 1 1 0 1.334Zm7.333 2a2.667 2.667 0 1 1 0-5.333 2.667 2.667 0 0 1 0 5.333ZM26 18.333a1.333 1.333 0 1 1-2.667 0 1.333 1.333 0 0 1 2.667 0Z"/></g></svg>
\ No newline at end of file
diff --git a/44 - frontendmentor multistep form/jonas/assets/images/icon-thank-you.svg b/44 - frontendmentor multistep form/jonas/assets/images/icon-thank-you.svg
new file mode 100644
index 0000000..5aea55d
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/assets/images/icon-thank-you.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><g fill="none"><circle cx="40" cy="40" r="40" fill="#F9818E"/><path fill="#E96170" d="M48.464 79.167c.768-.15 1.53-.321 2.288-.515a40.04 40.04 0 0 0 3.794-1.266 40.043 40.043 0 0 0 3.657-1.63 40.046 40.046 0 0 0 12.463-9.898A40.063 40.063 0 0 0 78.3 51.89c.338-1.117.627-2.249.867-3.391L55.374 24.698a21.6 21.6 0 0 0-15.332-6.365 21.629 21.629 0 0 0-15.344 6.365c-8.486 8.489-8.486 22.205 0 30.694l23.766 23.775Z"/><path fill="#FFF" d="M40.003 18.333a21.58 21.58 0 0 1 15.31 6.351c8.471 8.471 8.471 22.158 0 30.63-8.47 8.47-22.156 8.47-30.627 0-8.47-8.472-8.47-22.159 0-30.63a21.594 21.594 0 0 1 15.317-6.35Zm9.865 15c-.316.028-.622.15-.872.344l-12.168 9.13-5.641-5.642c-1.224-1.275-3.63 1.132-2.356 2.356l6.663 6.663c.56.56 1.539.63 2.173.156l13.326-9.995c1.122-.816.43-2.993-.956-3.013a1.666 1.666 0 0 0-.17 0Z"/></g></svg>
\ No newline at end of file
diff --git a/44 - frontendmentor multistep form/jonas/assets/javasript/main.js b/44 - frontendmentor multistep form/jonas/assets/javasript/main.js
new file mode 100644
index 0000000..9b8daa3
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/assets/javasript/main.js	
@@ -0,0 +1,27 @@
+let current_step;
+
+document.addEventListener("DOMContentLoaded", () => {
+  current_step = document.localStorage.getItem("current_step");
+  console.log("Current step:", current_step);
+});
+
+document.addEventListener("click", (event) => {
+  event.preventDefault();
+  console.log("Clicked:", event.target);
+
+  const class_list = event.target.classList;
+  const next_button = class_list.contains("next");
+  const prev_button = class_list.contains("prev");
+
+  if (next_button) {
+    current_step++;
+  } else if (prev_button) {
+    current_step--;
+  }
+
+  document.localStorage.setItem("current_step", current_step);
+  document.querySelectorAll(".step").forEach((step, index) => {
+    step.classList.toggle("active", index === current_step);
+  });
+  console.log("Current step:", current_step);
+});
diff --git a/44 - frontendmentor multistep form/jonas/assets/style/main.css b/44 - frontendmentor multistep form/jonas/assets/style/main.css
new file mode 100644
index 0000000..8edbcdb
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/assets/style/main.css	
@@ -0,0 +1,67 @@
+@font-face {
+  font-family: "Ubuntu";
+  src: url("/assets/fonts/Ubuntu-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Ubuntu";
+  src: url("/assets/fonts/Ubuntu-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Ubuntu";
+  src: url("/assets/fonts/Ubuntu-Bold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+
+/* Reset */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Ubuntu", sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #333;
+  /* center child */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+.form {
+  width: 100%;
+  max-width: 500px;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: #f00;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+/* sidebar */
+
+.progress {
+  background-color: #f4f4f4;
+  z-index: 1000;
+}
+
+.step {
+  display: none;
+}
+
+.step--active {
+  display: block;
+}
diff --git a/44 - frontendmentor multistep form/jonas/index.html b/44 - frontendmentor multistep form/jonas/index.html
new file mode 100644
index 0000000..da7d056
--- /dev/null
+++ b/44 - frontendmentor multistep form/jonas/index.html	
@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- displays site properly based on user's device -->
+
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/assets/images/favicon-32x32.png"
+    />
+
+    <link rel="stylesheet" href="/assets/style/main.css" />
+
+    <title>Frontend Mentor | Multi-step form</title>
+  </head>
+  <body>
+    <main class="form">
+      <!-- Sidebar start -->
+      <aside class="progress">
+        <div class="progress-step">
+          <p class="progress-step__name">Step 1</p>
+          <h3 class="progress-step__description">Personal info</h3>
+        </div>
+        <div class="progress-step">
+          <p class="progress-step__name">Step 2</p>
+          <h3 class="progress-step__description">Select plan</h3>
+        </div>
+        <div class="progress-step">
+          <p class="progress-step__name">Step 3</p>
+          <h3 class="progress-step__description">Add-ons</h3>
+        </div>
+        <div class="progress-step">
+          <p class="progress-step__name">Step 4</p>
+          <h3 class="progress-step__description">Summary</h3>
+        </div>
+      </aside>
+
+      <!-- Sidebar end -->
+
+      <form name="multistep-form" action="#" method="POST">
+        <!-- Step 1 start -->
+        <section class="step step--active">
+          <h1 class="step__title">Personal info</h1>
+          <p class="step__subtitle">
+            Please provide your name, email address, and phone number.
+          </p>
+
+          <fieldset class="step__input-group">
+            <label for="name">Name</label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              required
+              placeholder="e.g. Stephen King"
+            />
+          </fieldset>
+
+          <fieldset class="step__input-group">
+            <label for="email">Email Address</label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              required
+              placeholder="e.g. stephenking@lorem.com"
+            />
+          </fieldset>
+
+          <fieldset class="step__input-group">
+            <label for="phone">Phone Number</label>
+            <input
+              type="tel"
+              id="phone"
+              name="phone"
+              required
+              placeholder="e.g. +1 234 567 890"
+            />
+          </fieldset>
+
+          <button class="step__btn next">Next Step</button>
+        </section>
+        <!-- Step 1 end -->
+
+        <!-- Step 2 start -->
+        <section class="step">
+          <h1 class="step__title">Select your plan</h1>
+          <p class="step__subtitle">
+            You have the option of monthly or yearly billing.
+          </p>
+
+          <fieldset class="step__input-group">
+            <label for="arcade">Arcade</label>
+            <input
+              type="radio"
+              id="arcade"
+              name="plan"
+              value="arcade"
+              required
+            />
+            <span>$9/mo</span>
+          </fieldset>
+
+          <fieldset class="step__input-group">
+            <label for="advanced">Advanced</label>
+            <input
+              type="radio"
+              id="advanced"
+              name="plan"
+              value="advanced"
+              required
+            />
+            <span>$12/mo</span>
+          </fieldset>
+
+          <fieldset class="step__input-group">
+            <label for="pro">Pro</label>
+            <input type="radio" id="pro" name="plan" value="pro" required />
+            <span>$15/mo</span>
+          </fieldset>
+
+          <button class="step__btn back">Go Back</button>
+          <button class="step__btn next">Next Step</button>
+        </section>
+        <!-- Step 2 end -->
+
+        <!-- Step 3 start -->
+        <section class="step">
+          <h1 class="step__title">Pick add-ons</h1>
+          <p class="step__subtitle">
+            Add-ons help enhance your gaming experience.
+          </p>
+
+          <fieldset class="step__input-group">
+            <label for="online-service">Online service</label>
+            <input
+              type="checkbox"
+              id="online-service"
+              name="online-service"
+              value="online-service"
+            />
+            <span>Access to multiplayer games +$1/mo</span>
+          </fieldset>
+
+          <fieldset class="step__input-group">
+            <label for="larger-storage">Larger storage</label>
+            <input
+              type="checkbox"
+              id="larger-storage"
+              name="larger-storage"
+              value="larger-storage"
+            />
+            <span>Extra 1TB of cloud save +$2/mo</span>
+          </fieldset>
+
+          <fieldset class="step__input-group">
+            <label for="customizable-profile">Customizable Profile</label>
+            <input
+              type="checkbox"
+              id="customizable-profile"
+              name="customizable-profile"
+              value="customizable-profile"
+            />
+            <span>Custom theme on your profile +$2/mo</span>
+          </fieldset>
+
+          <button class="step__btn back">Go Back</button>
+          <button class="step__btn next">Next Step</button>
+        </section>
+        <!-- Step 3 end -->
+
+        <!-- Step 4 start -->
+        <section class="step">
+          <h1 class="step__title">Finishing up</h1>
+          <p class="step__subtitle">
+            Double-check everything looks OK before confirming.
+          </p>
+
+          <!-- Dynamically add subscription and add-on selections here -->
+          <p>Total (per month/year)</p>
+
+          <button class="step__btn back">Go Back</button>
+          <button class="step__btn next">Confirm</button>
+        </section>
+        <!-- Step 4 end -->
+
+        <!-- Step 5 start -->
+        <section class="step">
+          <h1 class="step__title">Thank you!</h1>
+          <p class="step__subtitle">
+            Thanks for confirming your subscription! We hope you have fun using
+            our platform. If you ever need support, please feel free to email us
+            at support@loremgaming.com.
+          </p>
+        </section>
+      </form>
+      <!-- Step 5 end -->
+    </main>
+  </body>
+</html>