diff --git a/app.js b/app.js
index cf17b18..fc5c5e8 100644
--- a/app.js
+++ b/app.js
@@ -10,6 +10,7 @@ dotenv.config();
 
 const indexRouter = require('./routes/index');
 const authRouter = require('./routes/auth');
+const lectureRouter = require('./routes/lecture');
 
 const app = express();
 
@@ -61,6 +62,8 @@ initSocket(server, app);
 // Set Router
 app.use('/', indexRouter);
 app.use('/auth', authRouter);
+app.use('/lecture', lectureRouter);
+
 
 // Page not found handler
 app.use((req, res, next) => {
diff --git a/controllers/auth.js b/controllers/auth.js
index c0d9817..66eeadc 100644
--- a/controllers/auth.js
+++ b/controllers/auth.js
@@ -1,8 +1,9 @@
 const bycrpt = require('bcrypt');
+const jwt = require('jsonwebtoken');
 const User = require('../models/user');
 
 exports.signup = async (req, res, next) => {
-    // destructure req.body
+    // Destructure req.body
     const {
         name, email, password, isOAuth, OAuthType,
         school, major, grade, savedLectures, usePurpose,
@@ -11,23 +12,82 @@ exports.signup = async (req, res, next) => {
     try {
         const exUser = await User.findOne({ email: email });
         if (exUser)
-            return res.redirect('/join?error=userAlreadyExists');
+            return res.status(409).json({ status: "fail", message: "User already exists" });
 
-        // hash password
+        // Hash password
         const salt = await bycrpt.genSalt(10);
         const hashedPW = await bycrpt.hash(password, salt);
 
-        // save newUser
+        // Save newUser
         const newUser = new User({
-            name, email, hashedPW, isOAuth, OAuthType,
+            name, email, password: hashedPW, isOAuth, OAuthType,
             school, major, grade, savedLectures, usePurpose,
         });
         await newUser.save();
 
-        res.status(201).json({ status: "success", message: "Signup success" })
+        return res.status(201).json({ status: "success", message: "Signup success" });
     } catch (error) {
         console.error(error);
         return next(error);
     }
 
+}
+
+exports.login = async (req, res, next) => {
+    // Destructure req.body
+    const {
+        email, password, isOAuth, OAuthType,
+    } = req.body;
+
+    // OAuth
+    if (isOAuth)
+        return res.status(405).json({ status: "fail", message: "OAuth not implemented" });
+
+    try {
+        // Find User
+        const exUser = await User.findOne({ email: email });
+        if (!exUser)
+            return res.status(401).json({ status: "fail", message: "Unknown user" });
+
+        // Match password
+        const matchPW = await bycrpt.compare(password, exUser.password);
+        if (!matchPW)
+            return res.status(401).json({ status: "fail", message: "Wrong password" });
+
+        // Certify Tokens
+        const accessToken = jwt.sign({ userID: exUser._id }, process.env.JWT_SECRET, {
+            expiresIn: '1h',
+        });
+        const refreshToken = jwt.sign({ userID: exUser._id }, process.env.JWT_SECRET, {
+            expiresIn: '24h',
+        });
+
+        return res.status(201).json({
+            status: "success",
+            message: "Login success",
+            accessToken: accessToken,
+            refreshToken: refreshToken,
+        });
+    } catch (error) {
+        console.error(error);
+        return next(error);
+    }
+}
+
+exports.renewAccessToken = async (req, res, next) => {
+    try {
+        // Renew Access Token
+        const accessToken = jwt.sign({ userID: req.userID }, process.env.JWT_SECRET, {
+            expiresIn: '1h',
+        });
+
+        return res.status(201).json({
+            status: "success",
+            message: "Renew Access Token",
+            accessToken: accessToken,
+        });
+    } catch (error) {
+        console.error(error);
+        return next(error);
+    }
 }
\ No newline at end of file
diff --git a/controllers/lecture.js b/controllers/lecture.js
new file mode 100644
index 0000000..c7a1a31
--- /dev/null
+++ b/controllers/lecture.js
@@ -0,0 +1,4 @@
+exports.renderLecture = (req, res) => {
+    res.locals.userID = req.userID;
+    res.render('lecture');
+};
\ No newline at end of file
diff --git a/middlewares/jwtToken.js b/middlewares/jwtToken.js
new file mode 100644
index 0000000..be74f51
--- /dev/null
+++ b/middlewares/jwtToken.js
@@ -0,0 +1,15 @@
+const jwt = require('jsonwebtoken');
+
+exports.verifyToken = (req, res, next) => {
+    const token = req.header('Authorization');
+    if (!token)
+        return res.status(401).json({ error: 'Access denied' });
+
+    try {
+        const decoded = jwt.verify(token, process.env.JWT_SECRET);
+        req.userId = decoded.userId;
+        next();
+    } catch (error) {
+        res.status(401).json({ error: 'Invalid token' });
+    }
+};
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 96fa8ed..498ca18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "helmet": "^7.1.0",
         "hpp": "^0.2.3",
         "http-errors": "~1.6.3",
+        "jsonwebtoken": "^9.0.2",
         "mongodb": "^6.3.0",
         "mongoose": "^8.1.3",
         "morgan": "~1.9.1",
@@ -1034,6 +1035,11 @@
         "node": ">=16.20.1"
       }
     },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -1684,6 +1690,14 @@
         "url": "https://github.com/motdotla/dotenv?sponsor=1"
       }
     },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -2737,6 +2751,32 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
     "node_modules/jstransformer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
@@ -2746,6 +2786,25 @@
         "promise": "^7.0.1"
       }
     },
+    "node_modules/jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/kareem": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.5.1.tgz",
@@ -2791,6 +2850,41 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
+    },
     "node_modules/log-driver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/log-driver/-/log-driver-1.2.7.tgz",
@@ -5934,6 +6028,11 @@
       "resolved": "https://registry.npmjs.org/bson/-/bson-6.3.0.tgz",
       "integrity": "sha512-balJfqwwTBddxfnidJZagCBPP/f48zj9Sdp3OJswREOgsJzHiQSaOIAtApSgDQFYgHqAvFkp53AFSqjMDZoTFw=="
     },
+    "buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
+    },
     "buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -6432,6 +6531,14 @@
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
       "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ=="
     },
+    "ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7220,6 +7327,30 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "requires": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
     "jstransformer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
@@ -7229,6 +7360,25 @@
         "promise": "^7.0.1"
       }
     },
+    "jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "requires": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "requires": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "kareem": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.5.1.tgz",
@@ -7262,6 +7412,41 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
+    },
+    "lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
+    },
+    "lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
+    "lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
+    },
+    "lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
+    },
     "log-driver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/log-driver/-/log-driver-1.2.7.tgz",
diff --git a/package.json b/package.json
index 6c97de0..49f64c8 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "helmet": "^7.1.0",
     "hpp": "^0.2.3",
     "http-errors": "~1.6.3",
+    "jsonwebtoken": "^9.0.2",
     "mongodb": "^6.3.0",
     "mongoose": "^8.1.3",
     "morgan": "~1.9.1",
diff --git a/public/images/logo-red.png b/public/images/logo-red.png
new file mode 100644
index 0000000..d1f24b5
Binary files /dev/null and b/public/images/logo-red.png differ
diff --git a/routes/auth.js b/routes/auth.js
index 46c72d9..cf1834d 100644
--- a/routes/auth.js
+++ b/routes/auth.js
@@ -1,8 +1,13 @@
 const express = require('express');
-const { signup } = require('../controllers/auth');
+const { verifyToken } = require('../middlewares/jwtToken');
+const { signup, login, renewAccessToken } = require('../controllers/auth');
 
 const router = express.Router();
 
 router.post('/signup', signup);
 
+router.post('/login', login);
+
+router.post('/renewToken', verifyToken, renewAccessToken);
+
 module.exports = router;
\ No newline at end of file
diff --git a/routes/index.js b/routes/index.js
index 9f5bf4b..12683ed 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,4 +1,5 @@
 var express = require('express');
+
 const {
   renderIndex
 } = require('../controllers/index');
diff --git a/routes/lecture.js b/routes/lecture.js
new file mode 100644
index 0000000..36efd43
--- /dev/null
+++ b/routes/lecture.js
@@ -0,0 +1,11 @@
+const { verifyToken } = require('../middlewares/jwtToken');
+var express = require('express');
+
+const {
+    renderLecture
+} = require('../controllers/lecture');
+var router = express.Router();
+
+router.get('/', verifyToken, renderLecture);
+
+module.exports = router;
\ No newline at end of file
diff --git a/views/lecture.html b/views/lecture.html
new file mode 100644
index 0000000..e6e121e
--- /dev/null
+++ b/views/lecture.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            background-color: #121212;
+            margin: 0;
+        }
+
+        .background {
+            height: 100vh;
+        }
+
+        .card-container {
+            border-radius: 20px;
+            width: 30%;
+            height: 50%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: #1e1e1e;
+        }
+
+        .card-item {
+            margin: 15px;
+        }
+
+        .logo-img {
+            border-radius: 100px;
+            width: 150px;
+        }
+
+        .btn {
+            font-size: 20px;
+            border-radius: 10px;
+            background-color: #337ea9;
+            color: white;
+        }
+
+        .text {
+            font-size: 15px;
+            color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="background d-flex justify-content-center align-items-center vh-100">
+        <div class="card-container text-center">
+            <img src="/images/logo-red.png" alt="Logo" class="card-item logo-img mb-3" />
+            <p class="text">Protected Lecture API</p>
+            <p class="text">{{userID}}</p>
+        </div>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file