diff --git a/static/css/styles.css b/static/css/styles.css
index 2a930b0..e69de29 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,4 +0,0 @@
-*{
-    background-color: #fdecb5;
-    
-}
diff --git a/templates/3204121.jpg b/templates/3204121.jpg
new file mode 100644
index 0000000..97d8a8e
Binary files /dev/null and b/templates/3204121.jpg differ
diff --git a/templates/index.html b/templates/index.html
index f010c5b..9333d19 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,18 +1,165 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+
 <head>
-    <title>Image to PDF Converter</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Background Removal Tool</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
+
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    h1 {
+        padding: 2rem 0;
+        font-size: 2rem; /* 32px converted to rem */
+        font-weight: bold;
+        text-align: center;
+        margin-bottom: 1.875rem; /* 30px converted to rem */
+        color: #007BFF;
+    }
+
+    #div-form {
+        background-color: #fff;
+        border-radius: 0.5rem; /* 8px converted to rem */
+        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+        padding: 1.25rem; /* 20px converted to rem */
+        position: relative;
+        width: 25rem; /* 40rem converted to rem */
+        height: 100%;
+        border: 0.0625rem solid blanchedalmond; /* 1px converted to rem */
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-image: url(3204121.jpg);
+        object-fit: cover;
+        opacity: 4;
+        transition: all 0.3s ease;
+    }
+
+    #div-form:hover {
+        opacity: 0.3;
+    }
+
+    .file-label {
+        display: inline-block;
+        padding: 1rem 2rem; /* 16px converted to rem */
+        color: #fff;
+        border-radius: 0.375rem; /* 6px converted to rem */
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+        text-align: center; /* Center text horizontally */
+    }
+
+    .upload-file {
+        /* Make the file input take full width */
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100vh;
+    }
+
+    #div-form {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+
+    #button {
+        display: inline-block;
+        padding: 1rem 2rem; /* 16px converted to rem */
+        background-color: #4CAF50;
+        color: #fff;
+        border: none;
+        border-radius: 0.375rem; /* 6px converted to rem */
+        cursor: pointer;
+        font-size: 1.125rem; /* 18px converted to rem */
+        transition: background-color 0.3s ease;
+        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
+        margin-top: 2rem;
+    }
+
+    #button:hover {
+        background-color: #45a049;
+    }
+
+    @media (max-width: 43.75rem) { /* 700px converted to rem */
+        h1 {
+            font-size: 1.5rem; /* 24px converted to rem */
+            margin-bottom: 1.25rem; /* 20px converted to rem */
+        }
+
+        #div-form {
+            width: 20rem; /* 320px converted to rem */
+        }
+
+        .file-label {
+            padding: 1rem 1.875rem; /* 16px and 30px converted to rem */
+        }
+
+        #button {
+            padding: 1rem 1.875rem; /* 16px and 30px converted to rem */
+            font-size: 1rem; /* 16px converted to rem */
+            margin-top: 1.25rem; /* 20px converted to rem */
+        }
+    }
+
+
+    @media (max-width:340px) {
+        html{
+            font-size: 90%;
+        }
+    }
+
+    @media (max-width:300px) {
+        html{
+            font-size: 80%;
+        }
+    }
+
+    @media (max-width:250px) {
+        html{
+            font-size: 70%;
+        }
+    }
+</style>
+
 <body>
-    <h1>Image to PDF Converter</h1>
-    <div id="div-form">
-    <form action="/convert" method="post" enctype="multipart/form-data">
-        <input type="file" name="images" accept="image/*" multiple>
+    <main class="container">
+        <h1>Upload an image to remove the background</h1>
+
+        <div id="div-form">
+            <form action="/convert" method="post" enctype="multipart/form-data">
+                <!-- Use a div as a "Choose a File" button -->
+                <label for="images" class="file-label">
+                    <div class="file-button">Choose File</div>
+                    <input type="file" id="images" name="images" class="upload-file" accept="image/*" multiple>
+                </label>
+            </form>
+        </div>
         <div id="btn-con">
-        <button type="submit" id="button">Convert to PDF</button>
-    </div>
-    </form>
-</div>
+            <button type="submit" id="button">Convert to PDF</button>
+        </div>
+    </main>
 </body>
+
 </html>
