diff --git a/index.html b/index.html
index 0cc1325..76e8199 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WEATHER APP</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  </head>
+  <body>
+    <main>
+      <form action="">
+        <input type="text" name="" id="" autocomplete="off" />
+        <button><i class="fa-solid fa-magnifying-glass"></i></button>
+      </form>
+    </main>
     <script src="script.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/style.css b/style.css
index e69de29..84dee4b 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,30 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url('https://images.pexels.com/photos/1118873/pexels-photo-1118873.jpeg?cs=srgb&dl=pexels-jplenio-1118873.jpg&fm=jpg');
+   font-family: sans-serif;
+   background-size: cover;
+}
+
+main{
+    width: 300px;
+    height: max-content;
+    min-height: 300px;
+    background-color: #f7f7f7;
+    border-radius: 30px;
+    box-shadow: 0px 30px 50px #5553;
+    padding: 30px;
+    box-sizing: border-box;
+}
+
+main form{
+    
+}
\ No newline at end of file
