diff --git a/templates/base.html b/templates/base.html
index 19e1314..f96f7ba 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,6 +12,7 @@
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
 
 <body>
   <nav class="navbar navbar-expand-sm bg-light">
diff --git a/templates/index.html b/templates/index.html
index cee4c97..87c9d82 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,25 +10,37 @@
     <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
   </div>
 
-  <!-- The slideshow/carousel -->
   <div class="carousel-inner">
     <div class="carousel-item active">
       <img src="assets/images/slide-01.jpg" alt="View from the dock" class="d-block w-100">
+      <div class="carousel-caption">
+        <h3>Jean-Marie Family</h3>
+        <p>View from the dock</p>
+      </div>
     </div>
     <div class="carousel-item">
       <img src="assets/images/slide-02.jpg" alt="Sunset at 3 sisters" class="d-block w-100">
+      <div class="carousel-caption">
+        <h3>Jean-Marie Family</h3>
+        <p>Sunset over the 3 sisters</p>
+      </div>
     </div>
     <div class="carousel-item">
       <img src="assets/images/slide-03.jpg" alt="Purple sunset" class="d-block w-100">
+      <div class="carousel-caption">
+        <h3>Jean-Marie Family</h3>
+        <p>Purple sunset</p>
+      </div>
     </div>
-  </div>
+    <!-- The slideshow/carousel -->
 
-  <!-- Left and right controls/icons -->
-  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
-    <span class="carousel-control-prev-icon"></span>
-  </button>
-  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
-    <span class="carousel-control-next-icon"></span>
-  </button>
-</div>
-{% endblock content %}
\ No newline at end of file
+
+    <!-- Left and right controls/icons -->
+    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon"></span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
+      <span class="carousel-control-next-icon"></span>
+    </button>
+  </div>
+  {% endblock content %}
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index 2bab6b2..f32c8e3 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,147 +1,54 @@
-<!doctype html>
-<html>
+{% extends "base.html" %}
+{% block content %}
+<div class="container-fluid vh-100" style="margin-top:200px">
+    <div class="" style="margin-top:200px">
+        <div class="rounded d-flex justify-content-center">
+            <div class="col-md-4 col-sm-12 shadow-lg p-5 bg-light">
+                <div class="text-center">
+                    <h3 class="text-primary">Sign In</h3>
+                </div>
+                <form action="">
+                    <div class="p-4">
+                        <!--                         <div class="input-group mb-3">
+                            <span class="input-group-text bg-primary"><i
+                                    class="bi bi-person-plus-fill text-white"></i></span>
+                            <input type="text" class="form-control" placeholder="Username">
+                        </div>
+                        <div class="input-group mb-3">
+                            <span class="input-group-text bg-primary"><i class="bi bi-key-fill text-white"></i></span>
+                            <input type="password" class="form-control" placeholder="password">
+                        </div>
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+                            <label class="form-check-label" for="flexCheckDefault">
+                                Remember Me
+                            </label>
+                        </div>
+                        <button class="btn btn-primary text-center mt-2" type="submit">
+                            Login
+                        </button>
+                        <p class="text-center mt-5">Don't have an account?
+                            <span class="text-primary">Sign Up</span>
+                        </p>
+                        <p class="text-center text-primary">Forgot your password?</p> -->
+                        <a href="/discord_auth" title="Image from freepnglogos.com"><img
+                                src="https://www.freepnglogos.com/uploads/discord-logo-png/discord-logo-logodownload-download-logotipos-1.png"
+                                width="100" alt="Login with Discord" /></a>
 
-<head>
-    <meta charset='utf-8'>
-    <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <title>Jean-Marie Family</title>
-    <link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' rel='stylesheet'>
-    <link href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' rel='stylesheet'>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-
-        * {
-            padding: 0;
-            margin: 0;
-            box-sizing: border-box;
-            font-family: 'Poppins', sans-serif
-        }
-
-        body {
-            height: 100vh;
-            background: linear-gradient(to top, #c9c9ff 50%, #9090fa 90%) no-repeat
-        }
-
-        .container {
-            margin: 50px auto
-        }
-
-        .panel-heading {
-            text-align: center;
-            margin-bottom: 10px
-        }
-
-        #forgot {
-            min-width: 100px;
-            margin-left: auto;
-            text-decoration: none
-        }
-
-        a:hover {
-            text-decoration: none
-        }
-
-        .form-inline label {
-            padding-left: 10px;
-            margin: 0;
-            cursor: pointer
-        }
-
-        .btn.btn-primary {
-            margin-top: 20px;
-            border-radius: 15px
-        }
-
-        .panel {
-            min-height: 380px;
-            box-shadow: 20px 20px 80px rgb(218, 218, 218);
-            border-radius: 12px
-        }
-
-        .input-field {
-            border-radius: 5px;
-            padding: 5px;
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            border: 1px solid #ddd;
-            color: #4343ff
-        }
-
-        input[type='text'],
-        input[type='password'] {
-            border: none;
-            outline: none;
-            box-shadow: none;
-            width: 100%
-        }
-
-        .fa-eye-slash.btn {
-            border: none;
-            outline: none;
-            box-shadow: none
-        }
-
-        img {
-            width: 40px;
-            height: 40px;
-            object-fit: cover;
-            border-radius: 50%;
-            position: relative
-        }
-
-        a[target='_blank'] {
-            position: relative;
-            transition: all 0.1s ease-in-out
-        }
-
-        .bordert {
-            border-top: 1px solid #aaa;
-            position: relative
-        }
-
-        .bordert:after {
-            content: "or connect with";
-            position: absolute;
-            top: -13px;
-            left: 33%;
-            background-color: #fff;
-            padding: 0px 8px
-        }
-
-        @media(max-width: 360px) {
-            #forgot {
-                margin-left: 0;
-                padding-top: 10px
-            }
-
-            body {
-                height: 100%
-            }
-
-            .container {
-                margin: 30px 0
-            }
-
-            .bordert:after {
-                left: 25%
-            }
-        }
-    </style>
-    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
-    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
-    <script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js'></script>
-</head>
-
-<body oncontextmenu='return false' class='snippet-body'>
-    <div class="container">
-        <div class="row">
-            <div class="offset-md-2 col-lg-5 col-md-7 offset-lg-4 offset-md-3">
-                <div class="panel border bg-white">
-                    <div class="panel-heading">
-                        <h3 class="pt-3 font-weight-bold">Login</h3>
                     </div>
-                    <!--                   <div class="panel-body p-3">
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+<!--<div class="container">
+    <div class="row">
+        <div class="offset-md-2 col-lg-5 col-md-7 offset-lg-4 offset-md-3">
+            <div class="panel border bg-white">
+                <div class="panel-heading">
+                    <h3 class="pt-3 font-weight-bold">Login</h3>
+                </div>
+                                   <div class="panel-body p-3">
                         <form action="login_script.php" method="POST">
                             <div class="form-group py-2">
                                 <div class="input-field"> <span class="far fa-user p-2"></span> <input type="text"
@@ -160,10 +67,10 @@
                             <div class="text-center pt-4 text-muted">Don't have an account? <a href="#">Sign up</a>
                             </div>
                         </form>
-                    </div> -->
-                    <div class="mx-3 my-2 py-2 bordert">
-                        <div class="text-center py-3">
-                            <!--                            <a href="https://wwww.facebook.com" target="_blank" class="px-2"> <img
+                    </div> 
+                <div class="mx-3 my-2 py-2 bordert">
+                    <div class="text-center py-3">
+                                                    <a href="https://wwww.facebook.com" target="_blank" class="px-2"> <img
                                     src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" alt="">
                             </a>
                             <a href="https://www.google.com" target="_blank" class="px-2"> <img
@@ -171,17 +78,15 @@
                                     alt=""> </a>
                             <a href="https://www.github.com" target="_blank" class="px-2"> <img
                                     src="https://www.freepnglogos.com/uploads/512x512-logo-png/512x512-logo-github-icon-35.png"
-                                    alt=""> </a> -->
-                            <a href="/discord_auth" title="Image from freepnglogos.com"><img
-                                    src="https://www.freepnglogos.com/uploads/discord-logo-png/discord-logo-logodownload-download-logotipos-1.png"
-                                    width="200" alt="discord logo logodownload download logotipos" /></a>
-                        </div>
+                                    alt=""> </a> 
+                        <a href="/discord_auth" title="Image from freepnglogos.com"><img
+                                src="https://www.freepnglogos.com/uploads/discord-logo-png/discord-logo-logodownload-download-logotipos-1.png"
+                                width="200" alt="discord logo logodownload download logotipos" /></a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <script type='text/javascript'></script>
-</body>
-
-</html>
\ No newline at end of file
+</div>
+<script type='text/javascript'></script> -->
+{% endblock content %}
\ No newline at end of file
