diff --git a/sign-up.html b/sign-up.html
new file mode 100644
index 0000000..2d3290d
--- /dev/null
+++ b/sign-up.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign up</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="sign-up-page">
+        <div class="sign-up-intro">
+            <h1>Welcome to Paint Quote System</h1>
+            <hr class="divider">
+            <p>Consequat adipiscing ea do labore irure adipiscing</p>
+            <p>occaecat cupidatat excepteur duis mo</p>
+        </div>
+
+        <div class="sign-up-card">
+            <h2>Sign Up</h2>
+            <p class="sign-up-card-subtitle">Enter details to create your account</p>
+
+            <form class="sign-up-form" action="/signUp" method="get">
+                <label for="name">Your name</label>
+                <input type="text" name="name" id="name" placeholder="Enter your name">
+                <br>
+                <label for="phone-number">Phone number</label>
+                <input type="tel" name="phone-number" id="phone-number" placeholder="Enter your phone number">
+                <br>
+                <label for="account">Dulux account</label>
+                <input type="text" name="account" id="account" placeholder="Enter your Dulux account">
+                
+                <button type="submit">Sign up</button>
+            </form>
+
+            <p class="sign-up-footer-text">Already have an account?
+                <a href="Login.html">Sign in</a>
+            </p>
+
+        </div>
+            
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/signup-background-image.png b/signup-background-image.png
new file mode 100644
index 0000000..606f3be
Binary files /dev/null and b/signup-background-image.png differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..89716b5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,105 @@
+*{
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+.sign-up-page {
+    background-image: url("signup-background-image.png");
+    height: 100vh;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    display: flex;
+    align-items: center;
+
+    justify-content: space-between;
+    padding: 0 80px;
+}
+
+.sign-up-intro {
+    flex: 0.6;
+}
+
+.sign-up-intro {
+    color: #134d74;
+    font-size: 16px;
+    width: 307px;
+}
+
+.sign-up-intro h1 {
+    margin-bottom: 12px;
+    font-size: 26px;
+}
+
+.divider {
+    width: 395px;
+    border-top: 1.5px solid #134d74;
+    margin-bottom: 12px;
+}
+
+.sign-up-card {
+    max-width: 380px;
+    width: 100%;
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+    height: 430px;
+    padding: 30px;
+    margin: auto;
+}
+
+.sign-up-card h2 {
+    text-align: center;
+    margin-bottom: 8px;
+}
+
+.sign-up-card-subtitle {
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 14px;
+    color: gray;
+}
+
+.sign-up-form {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.sign-up-form label {
+    font-size: 14px;
+    color: #555;
+}
+
+.sign-up-form input {
+    padding: 12px;
+    border-radius: 6px;
+    border: 1px solid #ccc;
+}
+
+.sign-up-form button {
+    margin-top: 16px;
+    padding: 14px;
+    border: none;
+    border-radius: 6px;
+    background-color: #0077a3;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.sign-up-footer-text {
+    margin-top: 16px;
+    text-align: center;
+    font-size: 14px;
+    color: gray;
+}
+
+.sign-up-footer-text a {
+    text-decoration: none;
+}
+
+.sign-up-footer-text a:hover {
+    text-decoration: underline;
+}
