diff --git a/src/front/test.css b/src/front/test.css
new file mode 100644
index 0000000..fe0d485
--- /dev/null
+++ b/src/front/test.css
@@ -0,0 +1,127 @@
+* {
+  margin: 0;
+  padding: 0;
+  outline: none;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+body {
+  height: 100vh;
+  width: 100%;
+  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
+}
+
+.href {
+  color: #3498db;
+  cursor: pointer;
+}
+.href:hover {
+  text-decoration: underline;
+}
+
+
+.login-btn,
+.signup-btn {
+  background: #fff;
+  padding: 10px 20px;
+  font-size: 20px;
+  font-weight: 500;
+  color: #3498db;
+  cursor: pointer;
+  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+}
+
+.show {
+  display: none;
+}
+.login-container,
+.signup-container{
+  display: none;
+  background: #fff;
+  width: 410px;
+  padding: 30px;
+  box-shadow: 0 0 8px rgba(0,0,0,0.1);
+}
+
+#show-login:checked ~ .login-container{
+  display: block;
+}
+#show-signup:checked ~ .signup-container{
+  display: block;
+}
+
+.login-container .close-btn,
+.signup-container .close-btn{
+  position: absolute;
+  right: 20px;
+  top: 15px;
+  font-size: 18px;
+  cursor: pointer;
+}
+.login-container  .close-btn:hover,
+.signup-container .close-btn:hover{
+  color: #3498db;
+}
+.login-container  .text,
+.signup-container .text{
+  font-size: 35px;
+  font-weight: 600;
+  text-align: center;
+}
+.login-container  form,
+.signup-container form{
+  margin-top: -20px;
+}
+.login-container  form .data,
+.signup-container form .data{
+  height: 45px;
+  width: 100%;
+  margin: 40px 0;
+}
+form .data label{
+  font-size: 18px;
+}
+form .data input{
+  height: 100%;
+  width: 100%;
+  padding-left: 10px;
+  font-size: 17px;
+  border: 1px solid silver;
+}
+form .data input:focus{
+  border-color: #3498db;
+  border-bottom-width: 2px;
+}
+form .forgot-pass{
+  margin-top: -8px;
+}
+form .forgot-pass a{
+  color: #3498db;
+  text-decoration: none;
+}
+form .forgot-pass a:hover{
+  text-decoration: underline;
+}
+form .btn{
+  margin: 30px 0;
+  height: 45px;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+form .btn button{
+  height: 100%;
+  width: 100%;
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  cursor: pointer;
+  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
+}
+form .signup-login-link{
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/front/test.html b/src/front/test.html
new file mode 100644
index 0000000..554f687
--- /dev/null
+++ b/src/front/test.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- Created By CodingNepal -->
+<html lang="en" dir="ltr">
+   <head>
+      <meta charset="utf-8">
+      <title>Popup Login Form Design | CodingNepal</title>
+      <link rel="stylesheet" href="test.css">
+      <script>
+         function toggleLoginSignup(l, s) {
+            document.getElementById("show-login").checked = l;
+            document.getElementById("show-signup").checked = s;
+         }
+      </script>
+   </head>
+   <body>
+
+      <input type="checkbox" id="show-login" class="show">
+      <label for="show-login" class="login-btn">Login</label>
+
+      <input type="checkbox" id="show-signup" class="show">
+      <label for="show-signup" class="signup-btn">Signup</label>
+
+      <div class="login-container">
+         <label for="show-login" class="close-btn" title="close">X</label>
+         <div class="text">
+            Login
+         </div>
+         <form action="#">
+            <div class="data">
+               <label>Nickname</label>
+               <input type="text" required>
+            </div>
+            <div class="data">
+               <label>Password</label>
+               <input type="password" required>
+            </div>
+            <div class="forgot-pass">
+               <a href="#">Forgot Password?</a>
+            </div>
+            <div class="btn">
+               <button type="submit">login</button>
+            </div>
+            <div class="signup-login-link">
+               Not a member? <div class="href" onclick="toggleLoginSignup(false, true)">Signup now</div>
+            </div>
+         </form>
+      </div>
+
+      <div class="signup-container">
+         <label for="show-signup" class="close-btn" title="close">X</label>
+         <div class="text">
+            Signup
+         </div>
+         <form action="#">
+            <div class="data">
+               <label>Nickname</label>
+               <input type="text" required>
+            </div>
+            <div class="data">
+               <label>Password</label>
+               <input type="password" required>
+            </div>
+            <div class="btn">
+               <button type="submit">signup</button>
+            </div>
+            <div class="signup-login-link">
+               Already a member? <div class="href" onclick="toggleLoginSignup(true, false)">Login now</div>
+            </div>
+         </form>
+      </div>
+   </body>
+</html>
\ No newline at end of file
