diff --git a/signup_form/css/style.css b/signup_form/css/style.css
new file mode 100644
index 0000000..8b306d4
--- /dev/null
+++ b/signup_form/css/style.css
@@ -0,0 +1,190 @@
+:root {
+    --main-bg: #C4DFDF;
+    --light-bg: #F8F6F4;
+    --text-color: rgb(22, 72, 99);
+    --error-color: #EF6262;
+}
+
+
+.container {
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    height: 100vh;
+    margin: 0;
+    background-color: var(--light-bg);
+}
+
+.sidebar {
+    height: 100%;
+        background-image: url(../static/background.jpg);
+        background-position: center;
+        background-size: auto;
+        background-repeat: no-repeat;
+        height: 100%; 
+}
+.logo {
+    position: relative;
+    background-color: rgb(22, 72, 99, 0.7);
+    top: 15vh;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo img {
+    height: 14vh;
+}
+
+.logo img {
+    height: 14vh;
+}
+
+.logo h1 {
+    font-weight: 900;
+    font-size: 3rem;
+    color: var(--light-bg);
+}
+
+.form {
+    width: 60vw;
+}
+
+.form-input {
+    margin-bottom: 40px;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+}
+
+.form-input input[type='text'],
+.form-input input[type='password'],
+.form-input input[type='email'] {
+    background-color: #FFFFFF;
+    border: 1px solid #D6D9DC;
+    border-radius: 3px;
+    width: 100%;
+    padding: 7px;
+    font-size: 14px;
+  }
+  
+.form-input label {
+    margin-bottom: 5px;
+}
+
+.form-button {
+    margin-top: 20px;
+}
+
+.form-button p {
+    margin-top: 25px;
+}
+
+.error {
+    color: var(--error-color);
+    font-size: 0.85rem;
+    margin-left: 5px;
+}
+
+
+@media only screen and (min-width: 700px) {
+    .container {
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+    }
+    .sidebar {
+        width: 50vw;
+        margin-right: 10px;
+    }
+    .form {
+        margin-left: 30px;
+        padding: 20px;
+    }
+    form {
+        display: flex;
+        flex-wrap: wrap;
+        width: 700px;
+        gap: 20px;
+    }
+
+    .form-input {
+        align-items: flex-start; /* To avoid stretching */
+        margin-bottom: 10px;
+    }
+    .form-input input[type='text'],
+    .form-input input[type='password'],
+    .form-input input[type='email'] {
+        width: 290px;
+        height: initial;
+    }
+    .form-input label {
+        width: 290px;
+    }
+
+    /* Left side of the screen */
+
+    .sidebar {
+        background-image: url(../static/background.jpg);
+        background-position: center;
+        background-size: auto;
+        background-repeat: no-repeat;
+        height: 100%; 
+    }
+    .logo {
+        position: relative;
+        background-color: rgb(22, 72, 99, 0.7);
+        top: 35vh;
+        height: 400px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .logo img {
+        height: 14vh;
+    }
+
+    .logo h1 {
+        font-weight: 900;
+        font-size: 3rem;
+        color: var(--light-bg);
+    }
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+    color: var(--text-color);
+}
+
+button {
+    cursor: pointer;
+    padding: 0.7rem 4.5rem;
+    border: 0.2rem solid var(--text-color);
+    margin: 1;
+    box-sizing: border-box;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-weight: 500;
+    color: var(--light-bg);
+    background-color: var(--text-color);
+    transition: all 0.15s;
+}
+
+button:hover {
+    background-color: var(--light-bg);
+    color: var(--text-color);
+}
+
+a {
+    text-decoration: none;
+    color: var(--text-color);
+    font-weight: 900;
+}
\ No newline at end of file
diff --git a/signup_form/index.html b/signup_form/index.html
new file mode 100644
index 0000000..7ee7fba
--- /dev/null
+++ b/signup_form/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Sign up! | Smig.Tech™</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,900&display=swap" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+</head>
+
+<body>
+    <div class="container">
+        <div class="sidebar">
+            <div class="logo logo-text">
+               <img src="static/logo.png" alt="" srcset=""> 
+               <h1>Smig.Tech</h1>
+            </div>
+        </div>
+        <div class="form">
+            <h1 class="call-to-action">Sign up today!</h1>
+            <form action="post" method="#">
+                <div class="form-input">
+                    <label for="name">NAME</label>
+                    <input type="text" name="name" id="name"required>
+                </div>
+                <div class="form-input">
+                    <label for="email">EMAIL</label>
+                    <input type="email" name="email" id="email" required>
+                </div>
+                <div class="form-input">
+                    <label for="password">PASSWORD</label>
+                    <input type="password" name="password" id="password" required minlength="8">
+                    <div class="error"></div>
+                </div>
+                <div class="form-input">
+                    <label for="password-confirmation">CONFIRM PASSWORD</label>
+                    <input type="password" name="password-confirmation" id="password-confirmation" required
+                        minlength="8">
+                    <div class="error"></div>
+                </div>
+                <div class="form-button">
+                    <button type="#">Create Account</button>
+                    <p>Already have an account? <a href="#">Log in</a></p>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script src="js/script.js"></script>
+</body>
+
+</html>
diff --git a/signup_form/js/script.js b/signup_form/js/script.js
new file mode 100644
index 0000000..62b893d
--- /dev/null
+++ b/signup_form/js/script.js
@@ -0,0 +1,31 @@
+const name = document.querySelector('#name'),
+      email = document.querySelector('#email'),
+      password = document.querySelector('#password'),
+      passwordConfirmation = document.querySelector('#password-confirmation'),
+      formInputs = document.querySelectorAll('.form-input')
+
+password.addEventListener('keyup', e => {
+    let error = '*Password must be at least 8 characters!';
+    let errorDiv = password.nextElementSibling;
+
+    if (password.value.length < 8) {
+        password.style.borderColor = "#EF6262";
+        errorDiv.textContent = error;
+    } else {
+        password.style.borderColor = "";
+        errorDiv.textContent = "";
+    }
+})
+
+passwordConfirmation.addEventListener('keyup', e => {
+    let error = '*Passwords do not match!';
+    let errorDiv = passwordConfirmation.nextElementSibling;
+
+    if (password.value !== e.target.value ) {
+        passwordConfirmation.style.borderColor = "#EF6262";
+        errorDiv.textContent = error;
+    } else {
+        passwordConfirmation.style.borderColor = "";
+        errorDiv.textContent = "";
+    }
+});
diff --git a/signup_form/static/background.jpg b/signup_form/static/background.jpg
new file mode 100644
index 0000000..4a945ea
Binary files /dev/null and b/signup_form/static/background.jpg differ
diff --git a/signup_form/static/logo.png b/signup_form/static/logo.png
new file mode 100644
index 0000000..5bded5c
Binary files /dev/null and b/signup_form/static/logo.png differ