diff --git a/osinaweb/customercore/__pycache__/urls.cpython-311.pyc b/osinaweb/customercore/__pycache__/urls.cpython-311.pyc
index b85861c3..f68a92f7 100644
Binary files a/osinaweb/customercore/__pycache__/urls.cpython-311.pyc and b/osinaweb/customercore/__pycache__/urls.cpython-311.pyc differ
diff --git a/osinaweb/customercore/__pycache__/views.cpython-311.pyc b/osinaweb/customercore/__pycache__/views.cpython-311.pyc
index bd003379..522d838f 100644
Binary files a/osinaweb/customercore/__pycache__/views.cpython-311.pyc and b/osinaweb/customercore/__pycache__/views.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc
index 95879d1e..978a76a3 100644
Binary files a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc and b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/add/__pycache__/views.cpython-311.pyc b/osinaweb/osinacore/add/__pycache__/views.cpython-311.pyc
index f62a7561..f9afaa7a 100644
Binary files a/osinaweb/osinacore/add/__pycache__/views.cpython-311.pyc and b/osinaweb/osinacore/add/__pycache__/views.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/api/__pycache__/views.cpython-311.pyc b/osinaweb/osinacore/api/__pycache__/views.cpython-311.pyc
index af906bbb..b9eb4083 100644
Binary files a/osinaweb/osinacore/api/__pycache__/views.cpython-311.pyc and b/osinaweb/osinacore/api/__pycache__/views.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/templates/login.html b/osinaweb/osinacore/templates/login.html
index d497012b..cdbf17e9 100644
--- a/osinaweb/osinacore/templates/login.html
+++ b/osinaweb/osinacore/templates/login.html
@@ -26,11 +26,11 @@
 </head>
 
 
-<body class="bg-gray-100 font-poppinsLight">
-    <div class="w-full h-full flex flex-row gap-5 lg:gap-0">
+<body class="font-poppinsLight">
+    <div class="w-full h-fit xlg1:h-[100vh] grid grid-cols-1 xlg1:grid-cols-2 gap-5">
         <!-- SIDE BANNER -->
         <div
-            class="bg-gradient-to-b from-gray-100 to-blue-950 p-9 overflow-hidden fixed w-full l:w-[40%] xlg1:w-[50%] h-[100vh] border-r border-gray-100 duration-500">
+            class="bg-gradient-to-b from-gray-100 to-blue-950 p-5 s:p-9 overflow-hidden w-full h-full border-r border-gray-100 duration-500 hidden xlg1:block relative">
             <div class="relative w-full h-full flex justify-center items-center">
                 <div
                     class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
@@ -46,9 +46,10 @@
                 </div>
             </div>
 
-            <div class="absolute w-full h-full hidden l:flex justify-between items-center m-auto inset-0 z-10 p-9">
+
+            <div class="absolute w-full h-full hidden xlg1:flex justify-between items-center m-auto inset-0 z-10 p-9">
                 <div class="flex flex-col">
-                    <p class="text-white text-[30px] lg:text-[45px] xl:text-[70px] font-poppinsExtraBold">
+                    <p class="text-white text-[30px] lg:text-[48px] xll:text-[70px] font-poppinsExtraBold">
                         PROVIDING
                         OPTIMAL
                         <br />SOLUTIONS<br />
@@ -58,7 +59,7 @@
                         <img src="{% static 'images/ositcom.png' %}" class="w-[120px] h-auto">
                     </div>
                 </div>
-                <div class="absolute w-[400px] lg:w-[480px] xl:w-[550px] h-auto -right-40 bottom-5 animate-bouncePop">
+                <div class="absolute w-[400px] lg:w-[480px] xll:w-[550px] h-auto -right-40 bottom-5 animate-bouncePop">
                     <img src="{% static 'images/banner-logo.png' %}" class="w-full h-auto">
                 </div>
             </div>
@@ -66,162 +67,190 @@
 
 
         <!-- LOGIN/REGISTRATION -->
-        <div
-            class="w-full h-[100vh] flex flex-col gap-5 justify-center items-center py-9 px-0 s:px-5 ml-0 l:ml-[40%] xlg1:ml-[50%] absolute l:relative z-30 l:z-0">
-
-
-            <form id="loginForm" method="POST" action="{% url 'signin' %}"
-                class="w-full s:w-fit flex flex-col gap-5 justify-center items-center">
-                {% csrf_token %}
-
-                <!-- OSINA LOGO ON DESKTOP -->
-                <img src="{% static 'images/osinab.png' %}" class="w-[250px] h-auto hidden l:block">
-
-                <!-- OSINA LOGO ON MOBILE -->
-                <img src="{% static 'images/osinaw.png' %}" class="w-[250px] h-auto block l:hidden">
-
-                <div class="w-full flex justify-center items-center px-5 s:px-0">
-                    <div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
-                        <div class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
-                            <button
-                                class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
-                                style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);" type="button">
-                                Login
-                            </button>
-                            <button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
-                                id="loginToRegisterButton" type="button">
-                                Register
-                            </button>
-                        </div>
+        <div class="w-full h-[100vh] xlg1:h-full flex justify-center py-9 px-0 s:px-5 relative overflow-hidden xlg1:overflow-visible bg-gradient-to-b from-gray-100 to-blue-950 xlg1:from-white xlg1:to-white" id="loginRegisterContainer">
+
+            <!-- Background blobs -->
+            <div class="relative w-full flex justify-center items-center">
+                <div
+                    class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
+                </div>
+                <div
+                    class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
+                </div>
+                <div
+                    class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
+                </div>
+                <div
+                    class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
+                </div>
 
-                        <div class="mt-5 w-full flex flex-col gap-3">
-                            <!-- LOGIN ERROR MESSAGE -->
-                            <div id="error-message"
-                                class="messages opacity-0 absolute top-20 w-[85%] s:w-fit left-0 right-0 mx-auto px-9 s:px-14 py-3 rounded-md bg-red-500 bg-opacity-80 text-white text-center rounded-t-md shadow-md text-xl z-10 pointer-events-none">
-                                {% for message in messages %}
-                                <p {% if message.tags %}
-                                    class="{{ message.tags }} text-white text-base s:text-xl font-light text-center"
-                                    {% endif %}>{{ message }}</p>
-                                {% endfor %}
+
+                <!-- LOGIN FORM -->
+                <form id="loginForm" method="POST" action="{% url 'signin' %}"
+                    class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">
+                    {% csrf_token %}
+
+                    <!-- OSINA LOGO ON DESKTOP -->
+                    <img src="{% static 'images/osinab.png' %}" class="w-[250px] h-auto hidden xlg1:block">
+
+                    <!-- OSINA LOGO ON MOBILE -->
+                    <img src="{% static 'images/osinaw.png' %}" class="w-[220px] h-auto block xlg1:hidden">
+
+                    <div class="w-full flex justify-center items-center px-5 s:px-0">
+                        <div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
+                            <div
+                                class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
+                                <button
+                                    class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
+                                    style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);"
+                                    type="button">
+                                    Login
+                                </button>
+                                <button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
+                                    id="loginToRegisterButton" type="button">
+                                    Register
+                                </button>
                             </div>
 
-                            <input name="username" id="emailInput" 
-                                class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
-                                placeholder="Email" required>
+                            <div class="mt-5 w-full flex flex-col gap-3">
+                                <!-- LOGIN ERROR MESSAGE -->
+                                <div id="error-message"
+                                    class="messages opacity-0 absolute top-20 w-[85%] s:w-fit left-0 right-0 mx-auto px-9 s:px-14 py-3 rounded-md bg-red-500 bg-opacity-80 text-white text-center rounded-t-md shadow-md text-xl z-10 pointer-events-none">
+                                    {% for message in messages %}
+                                    {% if message.tags %}
+                                    <p
+                                        class="{{ message.tags }} text-white text-base s:text-[17px] font-light text-center">
+                                        {{ message }}</p>
+                                    {% endif %}
+                                    {% endfor %}
+                                </div>
 
-                            <div class="w-full h-fit relative">
-                                <input name="password" id="passwordInput" type="password"
+                                <input name="username" id="emailInput"
                                     class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
-                                    placeholder="Password" id="passwordInput" required>
-                                <div class="absolute top-[14px] right-3 text-[20px] text-gray-500 cursor-pointer"
-                                    id="showPasswordButton">
-                                    <i class="fa fa-eye"></i>
+                                    placeholder="Email" required>
+
+                                <div class="w-full h-fit relative">
+                                    <input name="password" id="passwordInput" type="password"
+                                        class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
+                                        placeholder="Password" id="passwordInput" required>
+                                    <div class="absolute top-[14px] right-3 text-[20px] text-gray-500 cursor-pointer"
+                                        id="showPasswordButton">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
                                 </div>
-                            </div>
 
-                            <a class="text-gray-500 hover:text-osiblue duration-300 cursor-pointer">Forgot Your
-                                Password?</a>
+                                <a class="text-gray-500 hover:text-osiblue duration-300 cursor-pointer">Forgot Your
+                                    Password?</a>
 
-                            <button type="submit"
-                                class="w-full bg-osiblue text-white rounded-md px-3 py-2 mt-5 border border-osiblue hover:bg-transparent hover:text-osiblue cursor-pointer duration-300 text-xl">
-                                Login
-                            </button>
+                                <button type="submit"
+                                    class="w-full bg-osiblue text-white rounded-md px-3 py-2 mt-5 border border-osiblue hover:bg-transparent hover:text-osiblue cursor-pointer duration-300 text-xl">
+                                    Login
+                                </button>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </form>
-
-
-            <!-- REGISTER FORM -->
-            <form id="registerForm" style="display: none;" method="POST" action="" class="w-full s:w-fit flex flex-col gap-5 justify-center items-center">
-                {% csrf_token %}
-
-                <!-- OSINA LOGO ON MOBILE -->
-                <img src="{% static 'images/osinaw.png' %}" class="w-[250px] h-auto block l:hidden mt-32 l:mt-0">
-
-
-                <div class="w-full h-fit flex justify-center items-center px-5 s:px-0">
-                    <div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
-                        <div class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
-                            <button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
-                                id="registerToLoginButton" type="button">
-                                Login
-                            </button>
-                            <button
-                                class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer" type="button"
-                                style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">
-                                Register
-                            </button>
-                        </div>
-
-                        <!-- REGISTARTION ERROR MESSAGE -->
-                        <div id="register-error-message"
-                            class="opacity-0 absolute top-10 w-[85%] s:w-fit left-0 right-0 mx-auto px-9 s:px-14 py-3 rounded-md bg-red-500 bg-opacity-80 text-white text-center rounded-t-md shadow-md text-xl z-10 pointer-events-none">
-                            <p>Please Fill Out All The Fields</p>
-                        </div>
-
-                        <div class="mt-5 w-full flex flex-col gap-3">
-                            <div class="w-full py-1">
-                                <p class="text-red-500 text-center font-light hidden" id="registrationErrorMessage">
-                                    Please fill out all the fields.</p>
+                </form>
+
+
+                <!-- REGISTER FORM -->
+                <form id="registerForm" style="display: none;" method="POST" action=""
+                    class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">
+                    {% csrf_token %}
+
+                    <!-- OSINA LOGO ON DESKTOP -->
+                    <img src="{% static 'images/osinab.png' %}" class="w-[250px] h-auto hidden xlg1:block">
+
+                    <!-- OSINA LOGO ON MOBILE -->
+                    <img src="{% static 'images/osinaw.png' %}" class="w-[220px] h-auto block xlg1:hidden">
+
+                    <div class="w-full h-fit flex justify-center items-center px-5 s:px-0">
+                        <div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
+                            <div
+                                class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
+                                <button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
+                                    id="registerToLoginButton" type="button">
+                                    Login
+                                </button>
+                                <button
+                                    class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
+                                    type="button"
+                                    style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">
+                                    Register
+                                </button>
                             </div>
 
-                            <input type="text" placeholder="Username" name="username" id="username"
-                                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4 hidden"
-                                required>
+                            <!-- REGISTARTION ERROR MESSAGE -->
+                            <div id="register-error-message"
+                                class="opacity-0 absolute top-10 w-[85%] s:w-fit left-0 right-0 mx-auto px-9 s:px-14 py-3 rounded-md bg-red-500 bg-opacity-80 text-white text-center rounded-t-md shadow-md text-xl z-10 pointer-events-none">
+                                <p>Please Fill Out All The Fields</p>
+                            </div>
 
-                            <input type="text" name="first_name"
-                                class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
-                                placeholder="First Name" required>
+                            <div class="mt-5 w-full flex flex-col gap-3">
+                                <div class="w-full py-1">
+                                    <p class="text-red-500 text-center font-light hidden" id="registrationErrorMessage">
+                                        Please fill out all the fields.</p>
+                                </div>
 
-                            <input type="text" name="last_name"
-                                class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
-                                placeholder="Last Name" required>
+                                <input type="text" placeholder="Username" name="username" id="username"
+                                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4 hidden"
+                                    required>
 
-                            <input type="email" id="emailAddressInput" name="email"
-                                class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
-                                placeholder="Email" required>
+                                <input type="text" name="first_name"
+                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
+                                    placeholder="First Name" required>
 
-                            <p class="text-red-500 font-light text-sm" id="emailError"></p>
+                                <input type="text" name="last_name"
+                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
+                                    placeholder="Last Name" required>
 
+                                <input type="email" id="emailAddressInput" name="email"
+                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
+                                    placeholder="Email" required>
 
-                            <input type="number" id="phone" name="mobile_number"
-                                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none"
-                                placeholder="Mobile Number" required>
+                                <p class="text-red-500 font-light text-sm" id="emailError"></p>
 
-                            <input type="password" name="password1"
-                                class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
-                                placeholder="Password" required>
 
-                            <input type="password" name="password2"
-                                class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
-                                placeholder="Password Confirmation" required>
+                                <input type="number" id="phone" name="mobile_number"
+                                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none"
+                                    placeholder="Mobile Number" required>
 
-                            <p class="text-red-500 font-light text-sm" id="passwordError"></p>
+                                <input type="password" name="password1"
+                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
+                                    placeholder="Password" required>
 
-                            <div class="w-full flex justify-start items-center gap-3 mt-5">
-                                <input type="checkbox" name="" id="" required>
-                                <p class="text-gray-500 text-sm s:text-base">
-                                    I agree to OSINA's <a
-                                        class="text-osiblue cursor-pointer hover:text-gray-500">Terms &
-                                        Conditions</a> and <a
-                                        class="text-osiblue cursor-pointer hover:text-gray-500">Privacy
-                                        Policy</a>
-                                </p>
-                            </div>
+                                <input type="password" name="password2"
+                                    class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
+                                    placeholder="Password Confirmation" required>
+
+                                <p class="text-red-500 font-light text-sm" id="passwordError"></p>
+
+                                <div class="w-full flex justify-start items-center gap-3 mt-5">
+                                    <input type="checkbox" name="" id="" required>
+                                    <p class="text-gray-500 text-sm s:text-base">
+                                        I agree to OSINA's <a
+                                            class="text-osiblue cursor-pointer hover:text-gray-500">Terms
+                                            &
+                                            Conditions</a> and <a
+                                            class="text-osiblue cursor-pointer hover:text-gray-500">Privacy
+                                            Policy</a>
+                                    </p>
+                                </div>
 
-                            <button
-                                class="w-full bg-osiblue text-white rounded-md px-3 py-2 mt-3 border border-osiblue hover:bg-transparent hover:text-osiblue cursor-pointer duration-300 text-[20px]"
-                                type="submit" id="openOtpModalButton">
-                                Register
-                            </button>
+                                <button
+                                    class="w-full bg-osiblue text-white rounded-md px-3 py-2 mt-3 border border-osiblue hover:bg-transparent hover:text-osiblue cursor-pointer duration-300 text-[20px]"
+                                    type="submit" id="openOtpModalButton">
+                                    Register
+                                </button>
 
 
+                            </div>
                         </div>
                     </div>
-                </div>
+                </form>
+            </div>
+
+
 
-            </form>
 
 
             <script>
@@ -237,37 +266,6 @@
     </div>
 
 
-    <!-- <div class="w-full flex flex-col justify-center items-center">
-        <div class="w-full flex justify-center items-center mt-[5%]">
-            <h1 class="text-[50px] text-slate-800 font-semibold">OSINA</h1>
-        </div>
-        <div class="w-[90%] s:w-[500px] h-fit rounded-md bg-white shadow-lg mt-5 flex flex-col items-center pt-3 pb-5 px-3">
-            <h1 class="text-blue-500 text-[25px] text-center font-light mt-2">Login To Dashboard</h1>
-            <form class="w-full mt-5"  method="post" action="{% url 'signin' %}">
-                {% csrf_token %}
-                <input type="text" name="username" placeholder="Username"  class="w-full bg-transparent border border-gray-300 rounded-md py-2 px-3 outline-none">
-                <input type="password" name="password" placeholder="Password" class="w-full bg-transparent border border-gray-300 rounded-md py-2 px-3 outline-none mt-4">
-                {% if form.non_field_errors %}
-                <ul class="messages">
-                    <li style="text-align: center; color:red; margin-top:20px;">{{ form.non_field_errors }}</li>
-                </ul>
-                {% endif %}
-                <div class="w-full flex justify-start items-center gap-1 mt-5">
-                    <input type="checkbox" checked>
-                    <p class="text-base text-gray-400 font-light">Keep me logged in</p>
-                </div>
-                <div class="w-full flex justify-center items-center mt-5">
-                    <button type="submit" class="w-full px-3 py-1 bg-blue-500 border border-blue-500 text-white text-base s:text-xl rounded-md font-medium hover:bg-white hover:text-blue-500 duration-300">LOGIN</button>
-                </div>
-                <div class="mt-3 w-full flex justify-center items-center">
-                    <p class="text-base text-gray-400 font-light cursor-pointer">Forgot Password?</p>
-                </div>
-            
-            </form>
-        </div>
-    </div> -->
-
-
     <!-------------- JS SCRIPTS --------------->
 
     <!-- Include the intl-tel-input JS -->
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index affa99c1..a2cfb82a 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -27,7 +27,7 @@ def login_with_email(request, email, key):
     else:
         pass
 
-
+from django.contrib import messages
 # Pages views
 def signin(request):
     if request.user.is_authenticated:
@@ -46,7 +46,7 @@ def signin(request):
                 Connection.objects.create(status='Online', date=datetime.now(), user=user)
                 return redirect('home')
             else:
-                form.add_error(None, 'Invalid email or password. Please try again.')
+                messages.error(request, 'Invalid email or password. Please try again.')
 
     else:
         form = CustomLoginForm() 
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index f963cb13..8d02fbf1 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -670,6 +670,10 @@ video {
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+}
+
 .inset-0 {
   inset: 0px;
 }
@@ -949,10 +953,6 @@ video {
   margin-top: 100px;
 }
 
-.mt-\[5\%\] {
-  margin-top: 5%;
-}
-
 .mt-\[50px\] {
   margin-top: 50px;
 }
@@ -1175,6 +1175,10 @@ video {
   width: 20px;
 }
 
+.w-\[220px\] {
+  width: 220px;
+}
+
 .w-\[22px\] {
   width: 22px;
 }
@@ -1267,10 +1271,6 @@ video {
   width: 85%;
 }
 
-.w-\[90\%\] {
-  width: 90%;
-}
-
 .w-\[95\%\] {
   width: 95%;
 }
@@ -1531,6 +1531,14 @@ video {
   overflow: hidden;
 }
 
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -2154,6 +2162,10 @@ video {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
 
+.to-white {
+  --tw-gradient-to: #fff var(--tw-gradient-to-position);
+}
+
 .stroke-black {
   stroke: #000;
 }
@@ -2376,18 +2388,10 @@ video {
   font-size: 22px;
 }
 
-.text-\[25px\] {
-  font-size: 25px;
-}
-
 .text-\[30px\] {
   font-size: 30px;
 }
 
-.text-\[50px\] {
-  font-size: 50px;
-}
-
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2980,11 +2984,6 @@ video {
   padding: 0.5rem;
 }
 
-.hover\:text-blue-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -3142,6 +3141,10 @@ video {
     line-height: 2rem;
   }
 
+  .s\:text-\[17px\] {
+    font-size: 17px;
+  }
+
   .s\:text-\[20px\] {
     font-size: 20px;
   }
@@ -3207,30 +3210,6 @@ video {
 }
 
 @media (min-width: 960px) {
-  .l\:relative {
-    position: relative;
-  }
-
-  .l\:z-0 {
-    z-index: 0;
-  }
-
-  .l\:ml-\[40\%\] {
-    margin-left: 40%;
-  }
-
-  .l\:mt-0 {
-    margin-top: 0px;
-  }
-
-  .l\:block {
-    display: block;
-  }
-
-  .l\:flex {
-    display: flex;
-  }
-
   .l\:grid {
     display: grid;
   }
@@ -3247,10 +3226,6 @@ video {
     width: 300px;
   }
 
-  .l\:w-\[40\%\] {
-    width: 40%;
-  }
-
   .l\:w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -3278,12 +3253,8 @@ video {
     width: 480px;
   }
 
-  .lg\:gap-0 {
-    gap: 0px;
-  }
-
-  .lg\:text-\[45px\] {
-    font-size: 45px;
+  .lg\:text-\[48px\] {
+    font-size: 48px;
   }
 }
 
@@ -3292,20 +3263,46 @@ video {
     position: fixed;
   }
 
-  .xlg1\:ml-\[50\%\] {
-    margin-left: 50%;
+  .xlg1\:block {
+    display: block;
+  }
+
+  .xlg1\:flex {
+    display: flex;
   }
 
   .xlg1\:hidden {
     display: none;
   }
 
+  .xlg1\:h-\[100vh\] {
+    height: 100vh;
+  }
+
+  .xlg1\:h-full {
+    height: 100%;
+  }
+
   .xlg1\:w-\[300px\] {
     width: 300px;
   }
 
-  .xlg1\:w-\[50\%\] {
-    width: 50%;
+  .xlg1\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .xlg1\:overflow-visible {
+    overflow: visible;
+  }
+
+  .xlg1\:from-white {
+    --tw-gradient-from: #fff var(--tw-gradient-from-position);
+    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  }
+
+  .xlg1\:to-white {
+    --tw-gradient-to: #fff var(--tw-gradient-to-position);
   }
 }
 
@@ -3346,17 +3343,9 @@ video {
 }
 
 @media (min-width: 1536px) {
-  .xl\:w-\[550px\] {
-    width: 550px;
-  }
-
   .xl\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-
-  .xl\:text-\[70px\] {
-    font-size: 70px;
-  }
 }
 
 @media (min-width: 1600px) {
@@ -3372,7 +3361,15 @@ video {
     display: none;
   }
 
+  .xll\:w-\[550px\] {
+    width: 550px;
+  }
+
   .xll\:rounded-none {
     border-radius: 0px;
   }
+
+  .xll\:text-\[70px\] {
+    font-size: 70px;
+  }
 }
\ No newline at end of file
diff --git a/osinaweb/static/js/login-register.js b/osinaweb/static/js/login-register.js
index c9d2cdb4..28a6b61b 100644
--- a/osinaweb/static/js/login-register.js
+++ b/osinaweb/static/js/login-register.js
@@ -3,6 +3,7 @@ const loginToRegisterButton = document.getElementById('loginToRegisterButton');
 const registerToLoginButton = document.getElementById('registerToLoginButton');
 const loginForm = document.getElementById('loginForm');
 const registerForm = document.getElementById('registerForm');
+const loginRegisterContainer = document.getElementById('loginRegisterContainer');
 
 loginToRegisterButton.addEventListener('click', showRegisterForm);
 registerToLoginButton.addEventListener('click', showLoginForm);
@@ -11,11 +12,19 @@ registerToLoginButton.addEventListener('click', showLoginForm);
 function showRegisterForm() {
     loginForm.style.display = 'none';
     registerForm.style.display = 'flex';
+    if (window.innerWidth < 1200) {
+        loginRegisterContainer.classList.remove('h-[100vh]');
+        loginRegisterContainer.classList.add('h-fit');
+    }
 }
 
 function showLoginForm() {
     loginForm.style.display = 'flex';
     registerForm.style.display = 'none';
+    if (window.innerWidth < 1200) {
+        loginRegisterContainer.classList.add('h-[100vh]');
+        loginRegisterContainer.classList.remove('h-fit');
+    }
 }
 
 
