diff --git a/src/pages/login/Styalized-login.css b/src/pages/login/Styalized-login.css
new file mode 100644
index 0000000..5d32658
--- /dev/null
+++ b/src/pages/login/Styalized-login.css
@@ -0,0 +1,16 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  border: 3px solid orangered;
+  justify-content: center;
+  color: darkorange;
+  background-color: dimgray;
+  background-image: url(https://img.freepik.com/free-vector/evening-cloudy-sky-purple-background-with-group-cumulus-cirrus-clouds-flat-cartoon-illustration_1284-62768.jpg);
+  background-repeat: no-repeat;
+  background-size: 150% 270% 180%;
+}
+
+h1 {
+  text-align: center;
+
+}
diff --git a/src/pages/login/Styalizes-login.jsx b/src/pages/login/Styalizes-login.jsx
new file mode 100644
index 0000000..81a0f1a
--- /dev/null
+++ b/src/pages/login/Styalizes-login.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import "./App.css";
+
+const App = () => {
+  return (
+    <div className="app">
+      <h1>Login</h1>
+      
+      <div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label htmlFor="email">Email:</label><br />
+          <input 
+            type="text"
+            id="email"
+          />
+        </div>
+      </div>
+
+      <div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label htmlFor="password">Password:</label><br />
+          <input 
+            type="password"
+            id="password"
+          />
+        </div>
+      </div>
+
+      <div>
+       <h6>Don't have an account? Sign Up</h6>
+      </div>
+
+    </div>
+  );
+};
+
+export default App;