diff --git a/static/css/global.css b/static/css/global.css
index c7d9129..3e6ab01 100644
--- a/static/css/global.css
+++ b/static/css/global.css
@@ -22,14 +22,39 @@ body {
 
 }
 
+.form-group {
+
+    display: flex;
+    flex-direction: row;
+
+}
+
+.form-group label {
+    display: block;
+    width: 100%;
+}
+
+.form-group input {
+
+    width: 400%;
+
+}
+
 .titlebar {
     width: 100%;
 }
 
-a:link {
+a {
 
     color: purple;
     text-decoration: none;
+    transition: color 100ms ease-in-out;
+
+}
+
+a:hover {
+
+    color: blueviolet;
 
 }
 
@@ -51,6 +76,8 @@ a:link {
 
 #sidenav {
 
+    position: relative;
+
     width: 25%;
     font-size: 12pt;
 
@@ -60,6 +87,72 @@ a:link {
     flex-direction: column;
 }
 
+#login-modal {
+
+    display: block;
+    background: #222222;
+    border: solid 4px purple;
+    padding: 20px;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+}
+
+#login-modal .container {
+
+    display: flex;
+    flex-direction: column;
+    
+}
+
+#login-modal label {
+
+    cursor: pointer;
+
+}
+
+#login-modal-container {
+
+    display: block;
+    pointer-events: none;
+
+    opacity: 0;
+    transition: opacity 400ms ease-in-out;
+
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.774);
+    backdrop-filter: blur(2px);
+
+}
+
+#login-btn {
+
+    position: absolute;
+    cursor: pointer;
+
+    left: 50%;
+    color: purple;
+    transform: translateX(-50%);
+    bottom: 10px;
+
+}
+
+#toggle {
+
+    display: none;
+
+}
+
+#toggle:checked ~ #login-modal-container {
+    pointer-events: auto;
+    opacity: 1;
+}
+
 @media only screen and (max-width: 1080px) {
     #content {
         width: 90%;
@@ -89,4 +182,18 @@ a:link {
 
     }
 
+    #login-modal {
+
+        padding: 10px;
+        width: 80%; 
+
+    }
+
+    #login-btn {
+
+        transform: none;
+        right: 0px;
+
+    }
+
 }
diff --git a/static/css/index.css b/static/css/index.css
index 543a92f..0c4ebc9 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,16 +1,17 @@
-
-
-
 .post {
     border: 2px solid purple;
     height: 10%;
-    /* position: relative;
-    object-fit: contain; */
+    display: flex;
+    justify-items: center;
+    margin-bottom: 10px;
 }
 
-.post-img {
-    /* width: fit-content;
-    height: fit-content;
-    position: relative;
-    width: fit-content; */
-}
\ No newline at end of file
+.post img {
+    display: block;
+    height: 100%;
+}
+
+.post span {
+    margin-left: 10px;
+    margin-top: 1%;
+}
diff --git a/templates/index.html b/templates/index.html
index 074aaed..8595aeb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,6 +12,8 @@
 
     <body>
 
+        <input type="checkbox" id="toggle">
+
         <div id="content">
 
             <div class="box titlebar">
@@ -31,6 +33,8 @@
                     <a href="#">Home</a>
                     <a href="#">Home</a>
                     <a href="#">Home</a>
+                    <label id="login-btn" for="toggle">Login</label>
+
                 </div>
 
                 <div class="box" id="content-pane">
@@ -40,15 +44,58 @@
 
                     <div class="post">
                         <img class="post-img" src="/static/assets/uwu.jpg" alt="post img">
-                        <h3 class="post-title">Title text</h3>
-                        <h5 class="post-desc">Description text</h5>
+                        <span>
+                            <h2 class="post-title">Title text</h3>
+                            <p class="post-desc">Description text</p>
+                        </span>
                     </div>
+
+                    <div class="post">
+                        <img class="post-img" src="/static/assets/uwu.jpg" alt="post img">
+                        <span>
+                            <h2 class="post-title">Title text</h3>
+                            <p class="post-desc">Description text</p>
+                        </span>
+                    </div>
+
                 </div>
 
             </div>
 
         </div>
 
+        <div id="login-modal-container">
+
+            <div id="login-modal">
+                        
+                <h1>login <labeL for="toggle">(x)</labeL></h1>
+                <p>secrets beyond human comprehension lie beneath this unassuming login screen</p>
+    
+                <div class="container">
+
+                    <div class="form-group">
+                        <label for="uname"><b>Email:</b></label>
+                        <input type="text" name="uname" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="psw"><b>Password:</b></label>
+                        <input type="password" name="psw" required>
+                    </div>
+                      
+                    <br>
+
+                    <button type="submit">Login</button>
+                    <br>
+                    <label>
+                      <input type="checkbox" checked="checked" name="remember"> Remember me
+                    </label>
+                  </div>
+
+            </div>
+
+        </div>
+
     </body>
 
 </html>
