diff --git a/background.png b/background.png
new file mode 100644
index 0000000..4212c30
Binary files /dev/null and b/background.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ecd0f38
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Paint Quote System - Sign Up</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div class="page">
+    <div class="left">
+      <h1>Welcome to Paint Quote System</h1>
+      <div class="line"></div>
+      <p>
+        Consequat adipisicing ea do labore irure adipisicing occaecat
+        cupidatat excepteur duis mo
+      </p>
+    </div>
+
+    <div class="card">
+      <h2>Sign Up</h2>
+      <p class="subtitle">Enter details to create your account</p>
+
+      <div class="form-group">
+        <label for="name">Your name</label>
+        <input id="name" type="text" placeholder="Enter your name" />
+      </div>
+
+      <div class="form-group">
+        <label for="phone">Phone number</label>
+        <input id="phone" type="tel" placeholder="Enter your phone number" />
+      </div>
+
+      <div class="form-group">
+        <label for="dulux">Dulux account</label>
+        <input id="dulux" type="text" placeholder="Enter your Dulux account" />
+      </div>
+
+      <button type="button">Sign up</button>
+
+      <p class="signin-box">
+        Already have an account?
+        <a href="#">Sign in</a>
+      </p>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..b54e620
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,125 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+  background-image: url("background.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.page {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 40px;
+  min-height: 100vh;
+}
+
+.left {
+  max-width: 380px;
+}
+
+.left h1 {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+.left p {
+  color: #555;
+  line-height: 1.4;
+}
+
+.line {
+  width: 100px;
+  height: 2px;
+  background-color: #333;
+  margin: 12px 0 16px;
+}
+
+.card {
+  width: 380px;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 30px 28px;
+  border: 1px solid #ddd;
+}
+
+.card h2 {
+  text-align: center;
+  margin-bottom: 6px;
+  font-size: 24px;
+}
+
+.subtitle {
+  text-align: center;
+  color: #777;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  font-size: 14px;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+button {
+  width: 100%;
+  padding: 12px;
+  background-color: #0b74b8;
+  border: none;
+  color: white;
+  border-radius: 6px;
+  font-size: 15px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.signin-box {
+  text-align: center;
+  margin-top: 15px;
+  font-size: 14px;
+}
+
+.signin-box a {
+  color: #0b74b8;
+  text-decoration: none;
+}
+
+@media (max-width: 768px) {
+  .page {
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+  }
+
+  .left {
+    text-align: c
+    }
+
+  .line {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .card {
+    width: 100%;
+    max-width: 380px;
+  }
+}
