diff --git a/newsaggregator/templates/partials/base_auth.html b/newsaggregator/templates/partials/base_auth.html
index 9944559..9d06d6e 100644
--- a/newsaggregator/templates/partials/base_auth.html
+++ b/newsaggregator/templates/partials/base_auth.html
@@ -1,40 +1,43 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Onion News</title>
-    
+
     <!--- favicon-->
-    <link rel="shortcut icon" href="{% static './assets/images/news.png' %}" type="image/x-icon">
+    <link
+      rel="shortcut icon"
+      href="{% static './assets/images/news.png' %}"
+      type="image/x-icon"
+    />
 
     <!-- google cdns -->
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    
-    <!-- apps stylesheets -->
-
-</head>
-<body>   
-    {% block authentication %}
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <!-- boot strap -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
 
-    {% endblock authentication %}
+    <!-- apps stylesheets -->
+  </head>
+  <body>
+    {% block authentication %} {% endblock authentication %}
     <body class="light-theme">
-
-        <header>
-            <div class="navbar-section">
-                {% include 'components/navbar.html' %}
-                {% load social_share %}
-            </div>
-            {% block category %}
-                {% endblock category %}
-            {% block index %}
-            {% endblock index %}
-        </header>
-        {% include 'components/footer.html' %}
-    
+      <header>
+        <div class="navbar-section">
+          {% include 'components/navbar.html' %} {% load social_share %}
+        </div>
+        {% block category %} {% endblock category %} {% block index %} {%
+        endblock index %}
+      </header>
+      {% include 'components/footer.html' %}
     </body>
     <!-- apps js -->
     <script src="{% static 'assets/js/userauth.js' %}"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/newsaggregator/templates/userauths/sign-in.html b/newsaggregator/templates/userauths/sign-in.html
index b47d1fc..058282f 100644
--- a/newsaggregator/templates/userauths/sign-in.html
+++ b/newsaggregator/templates/userauths/sign-in.html
@@ -1,63 +1,85 @@
-{% extends 'partials/base.html' %}
-{% load static %}
-
-{% block authentication %}
+{% extends 'partials/base.html' %} {% load static %} {% block authentication %}
 <div class="container">
-    <div class="main-container">
-        <div class="main-content">
-            <div class="row">
-                <div class="col-md-6">
-                    <img src="../../static/assets/images/sign-in-animate.svg" style="width: max-content;">
-                </div>
-                <div class="col-md-6" style="display: flex;align-items: center;justify-content: center;">
-                    <div class="form-container">
-                        <div class="form-content box">
-                            <div class="logo">
-                                <img src="../../static/assets/images/news.png" width="80px" alt="News logo" class="logo-light">
-                                <img src="../../static/assets/images/news.png" width="80px" alt="News logo" class="logo-dark">
-                            </div>
-        
-                            <form method="POST">
-                                {% csrf_token %}
-                                <div class="signin-form" id="signin-form">
-                                    <div class="form-group">
-                                        <div class="animate-input">
-                                            <span>
-                                                Enter email
-                                            </span>
-                                            <input class="login-signup-input" type="text" name="email" maxlength="100" required="" id="login_username">
-                                        </div>
-                                    </div>
-                                    <div class="form-group">
-                                        <div class="animate-input">
-                                            <span>
-                                                Enter Password
-                                            </span>
-                                            <input class="login-signup-input" type="password" name="password" autocomplete="current-password" required="" id="login_password">
-                                            <button>Show</button>
-                                        </div>
-                                    </div>
-                                    <div class="btn-groupss">
-                                        <button class="btn-login" id="signin-btn" type="submit">
-                                            Sign In
-                                        </button>
-                                    </div>
-                                </div>
-                            </form>
-        
-        
-                        </div>
-                        <div class="box goto">
-                            <p>
-                                <span style="color: var(--foreground-tertiary);">Don't have an account?</span>
-                                <a href="{% url 'userauths:sign-up' %}">Sign up</a>
-                            </p>
-                        </div>
-        
+  <div class="main-container">
+    <div class="main-content">
+      <div class="row">
+        <div class="col-md-6">
+          <img
+            src="../../static/assets/images/sign-in-animate.svg"
+            style="width: max-content"
+          />
+        </div>
+        <div
+          class="col-md-6"
+          style="display: flex; align-items: center; justify-content: center"
+        >
+          <div class="form-container">
+            <div class="form-content box">
+              <div class="logo">
+                <img
+                  src="../../static/assets/images/news.png"
+                  width="80px"
+                  alt="News logo"
+                  class="logo-light"
+                />
+                <img
+                  src="../../static/assets/images/news.png"
+                  width="80px"
+                  alt="News logo"
+                  class="logo-dark"
+                />
+              </div>
+
+              <form method="POST">
+                {% csrf_token %}
+                <div class="signin-form" id="signin-form">
+                  <div class="form-group">
+                    <div class="animate-input">
+                      <span> Enter email </span>
+                      <input
+                        class="login-signup-input form-control"
+                        type="text"
+                        name="email"
+                        maxlength="100"
+                        required=""
+                        id="login_username"
+                      />
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="animate-input">
+                      <span> Enter Password </span>
+                      <input
+                        class="login-signup-input form-control"
+                        type="password"
+                        name="password"
+                        autocomplete="current-password"
+                        required=""
+                        id="login_password"
+                      />
+                      <button>Show</button>
                     </div>
+                  </div>
+                  <div class="btn-groupss">
+                    <button class="btn-login" id="signin-btn" type="submit">
+                      Sign In
+                    </button>
+                  </div>
                 </div>
+              </form>
+            </div>
+            <div class="box goto">
+              <p>
+                <span style="color: var(--foreground-tertiary)"
+                  >Don't have an account?</span
+                >
+                <a href="{% url 'userauths:sign-up' %}">Sign up</a>
+              </p>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
-{% endblock authentication %}
\ No newline at end of file
+{% endblock authentication %}
diff --git a/newsaggregator/templates/userauths/sign-up.html b/newsaggregator/templates/userauths/sign-up.html
index 643f89d..e1a4c10 100644
--- a/newsaggregator/templates/userauths/sign-up.html
+++ b/newsaggregator/templates/userauths/sign-up.html
@@ -1,104 +1,136 @@
-{% extends 'partials/base.html' %}
-{% load static %}
-
-{% block authentication %}
+{% extends 'partials/base.html' %} {% load static %} {% block authentication %}
 <div class="container">
-    <div class="main-container">
-        <div class="main-content">
-            <div class="row">
-                <div class="col-md-6">
-                    <img src="../../static/assets/images/sign-up-animate.svg" style="width: max-content;">
-                </div>
-                <div class="col-md-6" style="display: flex;align-items: center;justify-content: center;">
-                    <div class="form-container">
-                        <div class="form-content box">
-                            <div class="logo">
-                                <img src="../../static/assets/images/news.png" width="80px" alt="News logo" class="logo-light">
-                                <img src="../../static/assets/images/news.png" width="80px" alt="News logo" class="logo-dark">
-                            </div>
+  <div class="main-container">
+    <div class="main-content">
+      <div class="row">
+        <div class="col-md-6">
+          <img
+            src="../../static/assets/images/sign-up-animate.svg"
+            style="width: max-content"
+          />
+        </div>
+        <div
+          class="col-md-6"
+          style="display: flex; align-items: center; justify-content: center"
+        >
+          <div class="form-container">
+            <div class="form-content box">
+              <div class="logo">
+                <img
+                  src="../../static/assets/images/news.png"
+                  width="80px"
+                  alt="News logo"
+                  class="logo-light"
+                />
+                <img
+                  src="../../static/assets/images/news.png"
+                  width="80px"
+                  alt="News logo"
+                  class="logo-dark"
+                />
+              </div>
+
+              {% if form.errors %}
+              <div class="errors">
+                <ul>
+                  {% for field, error_list in form.errors.items %} {% for error
+                  in error_list %}
+                  <li>{{ error }}</li>
+                  {% endfor %} {% endfor %}
+                </ul>
+                <p>Please try again</p>
+              </div>
+              {% endif %}
 
-                            {% if form.errors %}
-                            <div class="errors">
-                                <ul>
-                                    {% for field, error_list in form.errors.items %}
-                                        {% for error in error_list %}
-                                            <li>{{ error }}</li>
-                                        {% endfor %}
-                                    {% endfor %}
-                                </ul>
-                                <p>Please try again</p>
-                            </div>
-                        {% endif %}
-        
-        
-                            <form method="POST">
-                                {% csrf_token %}
-                                <div class="signin-form" id="signin-form">
-                                    <div class="form-group">
-                                        <div class="animate-input">
-                                            <span>
-                                                Enter Username
-                                            </span>
-                                            <input class="login-signup-input" type="text" name="username" maxlength="100" required id="id_username">
-                                        </div>
-                                    </div>
-                                    <div class="form-group">
-                                        <div class="animate-input">
-                                            <span>
-                                                Enter email
-                                            </span>
-                                            <input class="login-signup-input" type="email" name="email" maxlength="320" required id="id_email">
-                                        </div>
-                                    </div>
-                                    <div class="form-group">
-                                        <div class="animate-input">
-                                            <span>
-                                                Enter Password
-                                            </span>
-                                            <input class="login-signup-input" type="password" name="password1" autocomplete="new-password" required aria-describedby="id_password1_helptext" id="id_password1">
-                                            <button type="button">Show</button>
-                                        </div>
-                                    </div>
-                                    <div class="form-group">
-                                        <div class="animate-input">
-                                            <span>
-                                                Enter confirm Password
-                                            </span>
-                                            <input class="login-signup-input" type="password" name="password2" autocomplete="new-password" required aria-describedby="id_password2_helptext" id="id_password2">
-                                            <button type="button">Show</button>
-                                        </div>
-                                    </div>
-                                    <div class="password-requirements">
-                                        <ul>
-                                            <li>Username must be atleast 6 characters long</li>
-                                            <li>Password must be at least 8 characters long</li>
-                                            <li>Password shouldn't be very similar to the username</li>
-                                            <li>Password shouldn't be entirely numeric</li>
-                                        </ul>
-                                    </div>
-                                    <div class="btn-groupss">
-                                        <button class="btn-login" id="signin-btn" type="submit">
-                                            Sign Up
-                                        </button>
-                                    </div>
-                                    
-                                    
-                                </div>
-                            </form>
-        
-        
-                        </div>
-                        <div class="box goto">
-                            <p>
-                                <span style="color: var(--foreground-tertiary);">have an account?</span>
-                                <a href="{% url 'userauths:sign-in' %}">Sign in</a>
-                            </p>
-                        </div>
-        
+              <form method="POST">
+                {% csrf_token %}
+                <div class="signin-form" id="signin-form">
+                  <div class="form-group">
+                    <div class="animate-input">
+                      <span> Enter Username </span>
+                      <input
+                        class="login-signup-input virtualenv venv"
+                        type="text"
+                        name="username"
+                        maxlength="100"
+                        required
+                        id="id_username"
+                      />
                     </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="animate-input">
+                      <span> Enter email </span>
+                      <input
+                        class="login-signup-input"
+                        type="email"
+                        name="email"
+                        maxlength="320"
+                        required
+                        id="id_email"
+                      />
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="animate-input">
+                      <span> Enter Password </span>
+                      <input
+                        class="login-signup-input"
+                        type="password"
+                        name="password1"
+                        autocomplete="new-password"
+                        required
+                        aria-describedby="id_password1_helptext"
+                        id="id_password1"
+                      />
+                      <button type="button">Show</button>
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="animate-input">
+                      <span> Enter confirm Password </span>
+                      <input
+                        class="login-signup-input"
+                        type="password"
+                        name="password2"
+                        autocomplete="new-password"
+                        required
+                        aria-describedby="id_password2_helptext"
+                        id="id_password2"
+                      />
+                      <button type="button">Show</button>
+                    </div>
+                  </div>
+                  <div class="password-requirements">
+                    <ul>
+                      <li>Username must be atleast 6 characters long</li>
+                      <li>Password must be at least 8 characters long</li>
+                      <li>
+                        Password shouldn't be very similar to the username
+                      </li>
+                      <li>Password shouldn't be entirely numeric</li>
+                    </ul>
+                  </div>
+                  <div class="btn-groupss">
+                    <button class="btn-login" id="signin-btn" type="submit">
+                      Sign Up
+                    </button>
+                  </div>
                 </div>
+              </form>
+            </div>
+            <div class="box goto">
+              <p>
+                <span style="color: var(--foreground-tertiary)"
+                  >have an account?</span
+                >
+                <a href="{% url 'userauths:sign-in' %}">Sign in</a>
+              </p>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
-{% endblock authentication %}
\ No newline at end of file
+{% endblock authentication %}
