diff --git a/Frontend/index.html b/Frontend/index.html
index 01f3eb9..eaa3cee 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -46,6 +46,8 @@
             target="_blank"
             >GitHub</a
           >
+          <a href="sign.html">Sign In</a>
+          <a href="login.html">Login</a>
         </div>
           <div id="theme-button">
         <button id="theme-toggle" class="theme-toggle" aria-label="Toggle light/dark mode"><span id="theme-icon">☀️</span></button> </div>
diff --git a/Frontend/login.html b/Frontend/login.html
new file mode 100644
index 0000000..2bc5f9c
--- /dev/null
+++ b/Frontend/login.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Climate Shield|Login</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <section class="sign">
+      <div class="sign-form">
+        <div class="logo-img"></div>
+        <div class="logo-tit"><h2>Climate Shield</h2></div>
+
+          <div class="form-group">
+            <label for="email">Email</label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autocomplete="email"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autocomplete="new-password"
+              minlength="8"
+              required
+            />
+
+            <div class="password-meter">
+              <span></span>
+            </div>
+
+          <button class="sign-submit" type="submit">
+            <span>Login</span>
+          </button>
+        </form>
+
+        <p class="sign-login">
+          Already have an account?
+          <a href="sign.html">Log in</a>
+        </p>
+      </div>
+    </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/Frontend/sign.html b/Frontend/sign.html
new file mode 100644
index 0000000..c666220
--- /dev/null
+++ b/Frontend/sign.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Climate Shield | Sign in</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <section class="sign">
+      <div class="sign-form">
+        <div class="logo-img"></div>
+        <div class="logo-tit"><h2>Climate Shield</h2></div>
+
+          <div class="form-group">
+            <label for="name">Name</label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              autocomplete="name"
+              minlength="2"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="email">Email</label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autocomplete="email"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autocomplete="new-password"
+              minlength="8"
+              required
+            />
+            <p>Use at least 8 characters with uppercase, lowercase, and a
+              number.</p>
+          </div>
+
+          <div class="form-group">
+            <label for="confirmPassword">Confirm Password</label>
+            <input
+              id="confirmPassword"
+              name="confirmPassword"
+              type="password"
+              autocomplete="new-password"
+              minlength="8"
+              required
+            />
+          </div>
+
+          <button class="sign-submit" type="submit">
+            <span>Sign Up</span>
+          </button>
+        </form>
+
+        <p class="sign-login">
+          New User
+          <a href="sign.html">Sign in</a>
+        </p>
+      </div>
+    </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/Frontend/style.css b/Frontend/style.css
index ddf221e..aea4d3e 100644
--- a/Frontend/style.css
+++ b/Frontend/style.css
@@ -1324,4 +1324,75 @@ body.light-mode .navbar {
 .scroll-top-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(14, 165, 233, 0.45);
-}
\ No newline at end of file
+}
+
+/* sign in */
+.sign{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 15vh;
+    overflow-y: hidden;
+
+}
+.sign-form{
+  display: flex;
+  flex-direction: column;
+}
+.logo-img{
+  width: 5vw;
+  height: 5vw;
+  background-image: url(favicon.png);
+ background-repeat: no-repeat;
+  background-position: center;
+  background-size: 125%;
+  border-radius: 50%; 
+  align-self:center;
+}
+.logo-tit{
+  align-self:center;
+}
+.form-group{
+display: flex;
+flex-direction: column;
+margin: 2vmin;
+}
+.sign-submit,.sign-login
+{
+  width: 50%;
+  align-self: center;
+}
+.form-group label {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.form-group input{
+  box-sizing: border-box;
+    width: 100%;
+  border: 1px solid var(--glass-border);
+  border-radius: 8px;
+  background-color: rgba(248, 230, 230, 0.07);
+  color: var(--text-primary);
+  padding: 0.75rem 0.9rem;
+}
+.form-group input:focus{
+    border-color: var(--primary-light);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
+}
+
+.sign-submit{ 
+  background: rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--text);
+  padding: 10px 18px;
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  min-height: 44px;
+  margin-top: 1vh;
+ }
+.sign-login{
+  margin-top: 1vh;
+}    
\ No newline at end of file
diff --git a/favicon.png b/favicon.png
index 7950715..38bbc25 100644
Binary files a/favicon.png and b/favicon.png differ
