diff --git a/index.html b/index.html
index 23206b2..618e14c 100644
--- a/index.html
+++ b/index.html
@@ -4,17 +4,17 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <!-- //login form -->
      <form action="/login" method="post">
         <label for="username">Username:</label>
-        <input type="text" id="username" name="username" required>
+        <input type="text" id="username" name="username" required class="field">
         <br>
         <label for="password">Password:</label>
-        <input type="password" id="password" name="password" required>
+        <input type="password" id="password" name="password" required  class="field">
         <br>
         <button type="submit">Login</button>
-        
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index e69de29..db7b8b8 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,53 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+
+form {
+    background-color: rgb(197, 197, 232);
+    height: 30em;
+    width: 70vw;
+    display: flex;
+    flex-direction: column;
+    padding: 3em;
+    border-radius: 10px;
+    gap: 25px;
+    box-shadow: 0 0 10px rgb(184, 180, 180);
+    outline: 2px solid rgb(194, 183, 183);
+}
+
+
+.field {
+    height: 2.3em;
+    border-radius: 4px;
+    font-size: 30px;
+    border: none;
+    padding: 5px;
+}
+
+button {
+    height: 45px;
+    border-radius: 4px;
+    border: none;
+    box-sizing: 0 0 10px black;
+    border: 2px solid rgb(164, 181, 165);
+}
+
+button:active {
+    outline: 2px solid black;
+}
+
+button:hover {
+    cursor: pointer;
+}
\ No newline at end of file
