diff --git a/server/app.js b/server/app.js
index 022cc4b..8c3da7a 100644
--- a/server/app.js
+++ b/server/app.js
@@ -22,8 +22,8 @@ app.use(express.static(path.join(__dirname, 'public')));
 app.use('/', indexRouter);
 app.use('/users', usersRouter);
 
-  app.listen(port, () => {
-    console.log(`Server is running on port ${port}`);
-  });
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`);
+});
   
 module.exports = app;
diff --git a/server/package-lock.json b/server/package-lock.json
index 527ff5e..e52ce49 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.2",
+        "bootstrap": "^5.3.3",
         "cookie-parser": "~1.4.4",
         "cors": "^2.8.5",
         "debug": "~2.6.9",
@@ -62,6 +63,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@types/node": {
       "version": "18.19.39",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.39.tgz",
@@ -225,6 +236,24 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
diff --git a/server/package.json b/server/package.json
index fa36c68..e2f8279 100644
--- a/server/package.json
+++ b/server/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "bootstrap": "^5.3.3",
     "cookie-parser": "~1.4.4",
     "cors": "^2.8.5",
     "debug": "~2.6.9",
diff --git a/server/public/stylesheets/style.css b/server/public/stylesheets/style.css
index 9453385..daeb1f7 100644
--- a/server/public/stylesheets/style.css
+++ b/server/public/stylesheets/style.css
@@ -1,8 +1,9 @@
 body {
-  padding: 50px;
+  margin: 0;
+  padding: 0;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
 
-a {
-  color: #00B7FF;
+.login-container {
+  background: linear-gradient(90deg, rgb(123, 91, 199) 0%, rgb(234, 56, 141) 100%);
 }
diff --git a/server/routes/users.js b/server/routes/users.js
index 623e430..4418614 100644
--- a/server/routes/users.js
+++ b/server/routes/users.js
@@ -6,4 +6,8 @@ router.get('/', function(req, res, next) {
   res.send('respond with a resource');
 });
 
+router.get('/login', (req, res) => {
+  res.render('login', { title: 'Login' });
+});
+
 module.exports = router;
diff --git a/server/views/layout.pug b/server/views/layout.pug
index 15af079..41fd738 100644
--- a/server/views/layout.pug
+++ b/server/views/layout.pug
@@ -1,7 +1,15 @@
 doctype html
 html
   head
+    meta(name='viewport', content='width=device-width, initial-scale=1')
     title= title
-    link(rel='stylesheet', href='/stylesheets/style.css')
+    link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous")
+    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css')
+    link(rel='stylesheet' href='/stylesheets/style.css')
   body
+    
     block content
+    
+    script(src='https://code.jquery.com/jquery-3.5.1.slim.min.js')
+    script(src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js')
+    script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js')
\ No newline at end of file
diff --git a/server/views/login.pug b/server/views/login.pug
new file mode 100644
index 0000000..250bcb0
--- /dev/null
+++ b/server/views/login.pug
@@ -0,0 +1,16 @@
+extends layout 
+block content
+
+  .login-container.vh-100.d-flex.align-items-center.justify-content-center
+    .card.text-center.bg-dark.text-white.shadow-lg(style="width: 22rem; border-radius: 1rem;")
+      .card-body.p-5
+        h2.fw-bold.mb-2.text-uppercase Login
+        p.text-white-50.mb-5 Please log in using one of the following options!
+
+        .d-flex.flex-column.align-items-center
+          button.btn.btn-outline-light.btn-lg.mb-3.w-100(type='button' onclick="window.location.href='/auth/github'")
+            i.fab.fa-github.fa-lg(style='margin-right: 8px')
+            | Login with Github
+          button.btn.btn-outline-light.btn-lg.w-100(type='button' onclick="window.location.href='/auth/linkedin'")
+            i.fab.fa-linkedin.fa-lg(style='margin-right: 8px') 
+            | Login with Linkedin
\ No newline at end of file
diff --git a/server/views/navbar.pug b/server/views/navbar.pug
new file mode 100644
index 0000000..7ba62b5
--- /dev/null
+++ b/server/views/navbar.pug
@@ -0,0 +1,5 @@
+nav 
+  a(href='/') Home
+  a(href='/login') Login
+  a(href='/logout') Logout
+  a(href='/post') Post 
\ No newline at end of file