all

2024-04-21 14:42:52 +02:00
parent 4b69674ede
commit 8a25f53c99
10700 changed files with 55767 additions and 14201 deletions
--- a/Securite/Linkwarden/pages/_app.tsx
+++ b/Securite/Linkwarden/pages/_app.tsx
@ -0,0 +1,69 @@
+import React, { useEffect } from "react";
+import "@/styles/globals.css";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import { SessionProvider } from "next-auth/react";
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import AuthRedirect from "@/layouts/AuthRedirect";
+import { Toaster } from "react-hot-toast";
+import { Session } from "next-auth";
+import { isPWA } from "@/lib/client/utils";
+
+export default function App({
+  Component,
+  pageProps,
+}: AppProps<{
+  session: Session;
+}>) {
+  useEffect(() => {
+    if (isPWA()) {
+      const meta = document.createElement("meta");
+      meta.name = "viewport";
+      meta.content = "width=device-width, initial-scale=1, maximum-scale=1";
+      document.getElementsByTagName("head")[0].appendChild(meta);
+    }
+  }, []);
+
+  return (
+    <SessionProvider
+      session={pageProps.session}
+      refetchOnWindowFocus={false}
+      basePath="/api/v1/auth"
+    >
+      <Head>
+        <title>Linkwarden</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/site.webmanifest" />
+      </Head>
+      <AuthRedirect>
+        <Toaster
+          position="top-center"
+          reverseOrder={false}
+          toastOptions={{
+            className:
+              "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
+          }}
+        />
+        <Component {...pageProps} />
+      </AuthRedirect>
+    </SessionProvider>
+  );
+}
--- a/Securite/Linkwarden/pages/_document.tsx
+++ b/Securite/Linkwarden/pages/_document.tsx
@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
--- a/Securite/Linkwarden/pages/api/v1/archives/[linkId].ts
+++ b/Securite/Linkwarden/pages/api/v1/archives/[linkId].ts
@ -0,0 +1,155 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import readFile from "@/lib/api/storage/readFile";
+import { prisma } from "@/lib/api/db";
+import { ArchivedFormat } from "@/types/global";
+import verifyUser from "@/lib/api/verifyUser";
+import getPermission from "@/lib/api/getPermission";
+import { UsersAndCollections } from "@prisma/client";
+import formidable from "formidable";
+import createFile from "@/lib/api/storage/createFile";
+import fs from "fs";
+import verifyToken from "@/lib/api/verifyToken";
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+
+export default async function Index(req: NextApiRequest, res: NextApiResponse) {
+  const linkId = Number(req.query.linkId);
+  const format = Number(req.query.format);
+  const isPreview = Boolean(req.query.preview);
+
+  let suffix: string;
+
+  if (format === ArchivedFormat.png) suffix = ".png";
+  else if (format === ArchivedFormat.jpeg) suffix = ".jpeg";
+  else if (format === ArchivedFormat.pdf) suffix = ".pdf";
+  else if (format === ArchivedFormat.readability) suffix = "_readability.json";
+
+  //@ts-ignore
+  if (!linkId || !suffix)
+    return res.status(401).json({ response: "Invalid parameters." });
+
+  if (req.method === "GET") {
+    const token = await verifyToken({ req });
+    const userId = typeof token === "string" ? undefined : token?.id;
+
+    const collectionIsAccessible = await prisma.collection.findFirst({
+      where: {
+        links: {
+          some: {
+            id: linkId,
+          },
+        },
+        OR: [
+          { ownerId: userId || -1 },
+          { members: { some: { userId: userId || -1 } } },
+          { isPublic: true },
+        ],
+      },
+    });
+
+    if (!collectionIsAccessible)
+      return res
+        .status(401)
+        .json({ response: "You don't have access to this collection." });
+
+    if (isPreview) {
+      const { file, contentType, status } = await readFile(
+        `archives/preview/${collectionIsAccessible.id}/${linkId}.jpeg`
+      );
+
+      res.setHeader("Content-Type", contentType).status(status as number);
+
+      return res.send(file);
+    } else {
+      const { file, contentType, status } = await readFile(
+        `archives/${collectionIsAccessible.id}/${linkId + suffix}`
+      );
+
+      res.setHeader("Content-Type", contentType).status(status as number);
+
+      return res.send(file);
+    }
+  }
+  // else if (req.method === "POST") {
+  //   const user = await verifyUser({ req, res });
+  //   if (!user) return;
+
+  //   const collectionPermissions = await getPermission({
+  //     userId: user.id,
+  //     linkId,
+  //   });
+
+  //   const memberHasAccess = collectionPermissions?.members.some(
+  //     (e: UsersAndCollections) => e.userId === user.id && e.canCreate
+  //   );
+
+  //   if (!(collectionPermissions?.ownerId === user.id || memberHasAccess))
+  //     return { response: "Collection is not accessible.", status: 401 };
+
+  //   // await uploadHandler(linkId, )
+
+  //   const MAX_UPLOAD_SIZE = Number(process.env.NEXT_PUBLIC_MAX_FILE_SIZE);
+
+  //   const form = formidable({
+  //     maxFields: 1,
+  //     maxFiles: 1,
+  //     maxFileSize: MAX_UPLOAD_SIZE || 30 * 1048576,
+  //   });
+
+  //   form.parse(req, async (err, fields, files) => {
+  //     const allowedMIMETypes = [
+  //       "application/pdf",
+  //       "image/png",
+  //       "image/jpg",
+  //       "image/jpeg",
+  //     ];
+
+  //     if (
+  //       err ||
+  //       !files.file ||
+  //       !files.file[0] ||
+  //       !allowedMIMETypes.includes(files.file[0].mimetype || "")
+  //     ) {
+  //       // Handle parsing error
+  //       return res.status(500).json({
+  //         response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${MAX_UPLOAD_SIZE}MB.`,
+  //       });
+  //     } else {
+  //       const fileBuffer = fs.readFileSync(files.file[0].filepath);
+
+  //       const linkStillExists = await prisma.link.findUnique({
+  //         where: { id: linkId },
+  //       });
+
+  //       if (linkStillExists) {
+  //         await createFile({
+  //           filePath: `archives/${collectionPermissions?.id}/${
+  //             linkId + suffix
+  //           }`,
+  //           data: fileBuffer,
+  //         });
+
+  //         await prisma.link.update({
+  //           where: { id: linkId },
+  //           data: {
+  //             image: `archives/${collectionPermissions?.id}/${
+  //               linkId + suffix
+  //             }`,
+  //             lastPreserved: new Date().toISOString(),
+  //           },
+  //         });
+  //       }
+
+  //       fs.unlinkSync(files.file[0].filepath);
+  //     }
+
+  //     return res.status(200).json({
+  //       response: files,
+  //     });
+  //   });
+  // }
+}
--- a/Securite/Linkwarden/pages/api/v1/auth/[...nextauth].ts
+++ b/Securite/Linkwarden/pages/api/v1/auth/[...nextauth].ts
--- a/Securite/Linkwarden/pages/api/v1/avatar/[id].ts
+++ b/Securite/Linkwarden/pages/api/v1/avatar/[id].ts
@ -0,0 +1,100 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { prisma } from "@/lib/api/db";
+import readFile from "@/lib/api/storage/readFile";
+import verifyToken from "@/lib/api/verifyToken";
+
+export default async function Index(req: NextApiRequest, res: NextApiResponse) {
+  const queryId = Number(req.query.id);
+
+  if (!queryId)
+    return res
+      .setHeader("Content-Type", "text/plain")
+      .status(401)
+      .send("Invalid parameters.");
+
+  const token = await verifyToken({ req });
+  const userId = typeof token === "string" ? undefined : token?.id;
+
+  if (req.method === "GET") {
+    const targetUser = await prisma.user.findUnique({
+      where: {
+        id: queryId,
+      },
+      include: {
+        whitelistedUsers: true,
+      },
+    });
+
+    if (!targetUser) {
+      return res
+        .setHeader("Content-Type", "text/plain")
+        .status(400)
+        .send("File inaccessible.");
+    }
+
+    const isInAPublicCollection = await prisma.collection.findFirst({
+      where: {
+        ["OR"]: [
+          { ownerId: targetUser.id },
+          {
+            members: {
+              some: {
+                userId: targetUser.id,
+              },
+            },
+          },
+        ],
+        isPublic: true,
+      },
+    });
+
+    if (targetUser?.isPrivate && !isInAPublicCollection) {
+      if (!userId) {
+        return res
+          .setHeader("Content-Type", "text/plain")
+          .status(400)
+          .send("File inaccessible.");
+      }
+
+      const user = await prisma.user.findUnique({
+        where: {
+          id: userId,
+        },
+        include: {
+          subscriptions: true,
+        },
+      });
+
+      const whitelistedUsernames = targetUser?.whitelistedUsers.map(
+        (whitelistedUsername) => whitelistedUsername.username
+      );
+
+      if (!user?.username) {
+        return res
+          .setHeader("Content-Type", "text/plain")
+          .status(400)
+          .send("File inaccessible.");
+      }
+
+      if (
+        user.username &&
+        !whitelistedUsernames?.includes(user.username) &&
+        targetUser.id !== user.id
+      ) {
+        return res
+          .setHeader("Content-Type", "text/plain")
+          .status(400)
+          .send("File inaccessible.");
+      }
+    }
+
+    const { file, contentType, status } = await readFile(
+      `uploads/avatar/${queryId}.jpg`
+    );
+
+    return res
+      .setHeader("Content-Type", contentType)
+      .status(status as number)
+      .send(file);
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/collections/[id].ts
+++ b/Securite/Linkwarden/pages/api/v1/collections/[id].ts
@ -0,0 +1,28 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getCollectionById from "@/lib/api/controllers/collections/collectionId/getCollectionById";
+import updateCollectionById from "@/lib/api/controllers/collections/collectionId/updateCollectionById";
+import deleteCollectionById from "@/lib/api/controllers/collections/collectionId/deleteCollectionById";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function collections(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  const collectionId = Number(req.query.id);
+
+  if (req.method === "GET") {
+    const collections = await getCollectionById(user.id, collectionId);
+    return res
+      .status(collections.status)
+      .json({ response: collections.response });
+  } else if (req.method === "PUT") {
+    const updated = await updateCollectionById(user.id, collectionId, req.body);
+    return res.status(updated.status).json({ response: updated.response });
+  } else if (req.method === "DELETE") {
+    const deleted = await deleteCollectionById(user.id, collectionId);
+    return res.status(deleted.status).json({ response: deleted.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/collections/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/collections/index.ts
@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getCollections from "@/lib/api/controllers/collections/getCollections";
+import postCollection from "@/lib/api/controllers/collections/postCollection";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function collections(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const collections = await getCollections(user.id);
+    return res
+      .status(collections.status)
+      .json({ response: collections.response });
+  } else if (req.method === "POST") {
+    const newCollection = await postCollection(req.body, user.id);
+    return res
+      .status(newCollection.status)
+      .json({ response: newCollection.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/dashboard/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/dashboard/index.ts
@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { LinkRequestQuery } from "@/types/global";
+import getDashboardData from "@/lib/api/controllers/dashboard/getDashboardData";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const convertedData: LinkRequestQuery = {
+      sort: Number(req.query.sort as string),
+      cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
+    };
+
+    const links = await getDashboardData(user.id, convertedData);
+    return res.status(links.status).json({ response: links.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/links/[id]/archive/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/links/[id]/archive/index.ts
@ -0,0 +1,95 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { prisma } from "@/lib/api/db";
+import verifyUser from "@/lib/api/verifyUser";
+import isValidUrl from "@/lib/shared/isValidUrl";
+import removeFile from "@/lib/api/storage/removeFile";
+import { Collection, Link } from "@prisma/client";
+
+const RE_ARCHIVE_LIMIT = Number(process.env.RE_ARCHIVE_LIMIT) || 5;
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  const link = await prisma.link.findUnique({
+    where: {
+      id: Number(req.query.id),
+    },
+    include: { collection: { include: { owner: true } } },
+  });
+
+  if (!link)
+    return res.status(404).json({
+      response: "Link not found.",
+    });
+
+  if (link.collection.ownerId !== user.id)
+    return res.status(401).json({
+      response: "Permission denied.",
+    });
+
+  if (req.method === "PUT") {
+    if (
+      link?.lastPreserved &&
+      getTimezoneDifferenceInMinutes(new Date(), link?.lastPreserved) <
+        RE_ARCHIVE_LIMIT
+    )
+      return res.status(400).json({
+        response: `This link is currently being saved or has already been preserved. Please retry in ${
+          RE_ARCHIVE_LIMIT -
+          Math.floor(
+            getTimezoneDifferenceInMinutes(new Date(), link?.lastPreserved)
+          )
+        } minutes or create a new one.`,
+      });
+
+    if (!link.url || !isValidUrl(link.url))
+      return res.status(200).json({
+        response: "Invalid URL.",
+      });
+
+    await deleteArchivedFiles(link);
+
+    return res.status(200).json({
+      response: "Link is being archived.",
+    });
+  }
+}
+
+const getTimezoneDifferenceInMinutes = (future: Date, past: Date) => {
+  const date1 = new Date(future);
+  const date2 = new Date(past);
+
+  const diffInMilliseconds = Math.abs(date1.getTime() - date2.getTime());
+
+  const diffInMinutes = diffInMilliseconds / (1000 * 60);
+
+  return diffInMinutes;
+};
+
+const deleteArchivedFiles = async (link: Link & { collection: Collection }) => {
+  await prisma.link.update({
+    where: {
+      id: link.id,
+    },
+    data: {
+      image: null,
+      pdf: null,
+      readable: null,
+      preview: null,
+    },
+  });
+
+  await removeFile({
+    filePath: `archives/${link.collection.id}/${link.id}.pdf`,
+  });
+  await removeFile({
+    filePath: `archives/${link.collection.id}/${link.id}.png`,
+  });
+  await removeFile({
+    filePath: `archives/${link.collection.id}/${link.id}_readability.json`,
+  });
+  await removeFile({
+    filePath: `archives/preview/${link.collection.id}/${link.id}.png`,
+  });
+};
--- a/Securite/Linkwarden/pages/api/v1/links/[id]/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/links/[id]/index.ts
@ -0,0 +1,31 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import deleteLinkById from "@/lib/api/controllers/links/linkId/deleteLinkById";
+import updateLinkById from "@/lib/api/controllers/links/linkId/updateLinkById";
+import getLinkById from "@/lib/api/controllers/links/linkId/getLinkById";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const updated = await getLinkById(user.id, Number(req.query.id));
+    return res.status(updated.status).json({
+      response: updated.response,
+    });
+  } else if (req.method === "PUT") {
+    const updated = await updateLinkById(
+      user.id,
+      Number(req.query.id),
+      req.body
+    );
+    return res.status(updated.status).json({
+      response: updated.response,
+    });
+  } else if (req.method === "DELETE") {
+    const deleted = await deleteLinkById(user.id, Number(req.query.id));
+    return res.status(deleted.status).json({
+      response: deleted.response,
+    });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/links/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/links/index.ts
@ -0,0 +1,60 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getLinks from "@/lib/api/controllers/links/getLinks";
+import postLink from "@/lib/api/controllers/links/postLink";
+import { LinkRequestQuery } from "@/types/global";
+import verifyUser from "@/lib/api/verifyUser";
+import deleteLinksById from "@/lib/api/controllers/links/bulk/deleteLinksById";
+import updateLinks from "@/lib/api/controllers/links/bulk/updateLinks";
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    // Convert the type of the request query to "LinkRequestQuery"
+    const convertedData: LinkRequestQuery = {
+      sort: Number(req.query.sort as string),
+      cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
+      collectionId: req.query.collectionId
+        ? Number(req.query.collectionId as string)
+        : undefined,
+      tagId: req.query.tagId ? Number(req.query.tagId as string) : undefined,
+      pinnedOnly: req.query.pinnedOnly
+        ? req.query.pinnedOnly === "true"
+        : undefined,
+      searchQueryString: req.query.searchQueryString
+        ? (req.query.searchQueryString as string)
+        : undefined,
+      searchByName: req.query.searchByName === "true" ? true : undefined,
+      searchByUrl: req.query.searchByUrl === "true" ? true : undefined,
+      searchByDescription:
+        req.query.searchByDescription === "true" ? true : undefined,
+      searchByTextContent:
+        req.query.searchByTextContent === "true" ? true : undefined,
+      searchByTags: req.query.searchByTags === "true" ? true : undefined,
+    };
+
+    const links = await getLinks(user.id, convertedData);
+    return res.status(links.status).json({ response: links.response });
+  } else if (req.method === "POST") {
+    const newlink = await postLink(req.body, user.id);
+    return res.status(newlink.status).json({
+      response: newlink.response,
+    });
+  } else if (req.method === "PUT") {
+    const updated = await updateLinks(
+      user.id,
+      req.body.links,
+      req.body.removePreviousTags,
+      req.body.newData
+    );
+    return res.status(updated.status).json({
+      response: updated.response,
+    });
+  } else if (req.method === "DELETE") {
+    const deleted = await deleteLinksById(user.id, req.body.linkIds);
+    return res.status(deleted.status).json({
+      response: deleted.response,
+    });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/logins/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/logins/index.ts
@ -0,0 +1,408 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import * as process from "process";
+
+export type ResponseData = {
+  credentialsEnabled: string | undefined;
+  emailEnabled: string | undefined;
+  registrationDisabled: string | undefined;
+  buttonAuths: {
+    method: string;
+    name: string;
+  }[];
+};
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.json(getLogins());
+}
+
+export function getLogins() {
+  const buttonAuths = [];
+
+  // 42 School
+  if (process.env.NEXT_PUBLIC_FORTYTWO_ENABLED === "true") {
+    buttonAuths.push({
+      method: "42-school",
+      name: process.env.FORTYTWO_CUSTOM_NAME ?? "42 School",
+    });
+  }
+  // Apple
+  if (process.env.NEXT_PUBLIC_APPLE_ENABLED === "true") {
+    buttonAuths.push({
+      method: "apple",
+      name: process.env.APPLE_CUSTOM_NAME ?? "Apple",
+    });
+  }
+  // Atlassian
+  if (process.env.NEXT_PUBLIC_ATLASSIAN_ENABLED === "true") {
+    buttonAuths.push({
+      method: "atlassian",
+      name: process.env.ATLASSIAN_CUSTOM_NAME ?? "Atlassian",
+    });
+  }
+  // Auth0
+  if (process.env.NEXT_PUBLIC_AUTH0_ENABLED === "true") {
+    buttonAuths.push({
+      method: "auth0",
+      name: process.env.AUTH0_CUSTOM_NAME ?? "Auth0",
+    });
+  }
+  // Authentik
+  if (process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true") {
+    buttonAuths.push({
+      method: "authentik",
+      name: process.env.AUTHENTIK_CUSTOM_NAME ?? "Authentik",
+    });
+  }
+  // Battle.net
+  if (process.env.NEXT_PUBLIC_BATTLENET_ENABLED === "true") {
+    buttonAuths.push({
+      method: "battlenet",
+      name: process.env.BATTLENET_CUSTOM_NAME ?? "Battle.net",
+    });
+  }
+  // Box
+  if (process.env.NEXT_PUBLIC_BOX_ENABLED === "true") {
+    buttonAuths.push({
+      method: "box",
+      name: process.env.BOX_CUSTOM_NAME ?? "Box",
+    });
+  }
+  // Cognito
+  if (process.env.NEXT_PUBLIC_COGNITO_ENABLED === "true") {
+    buttonAuths.push({
+      method: "cognito",
+      name: process.env.COGNITO_CUSTOM_NAME ?? "Cognito",
+    });
+  }
+  // Coinbase
+  if (process.env.NEXT_PUBLIC_COINBASE_ENABLED === "true") {
+    buttonAuths.push({
+      method: "coinbase",
+      name: process.env.COINBASE_CUSTOM_NAME ?? "Coinbase",
+    });
+  }
+  // Discord
+  if (process.env.NEXT_PUBLIC_DISCORD_ENABLED === "true") {
+    buttonAuths.push({
+      method: "discord",
+      name: process.env.DISCORD_CUSTOM_NAME ?? "Discord",
+    });
+  }
+  // Dropbox
+  if (process.env.NEXT_PUBLIC_DROPBOX_ENABLED === "true") {
+    buttonAuths.push({
+      method: "dropbox",
+      name: process.env.DROPBOX_CUSTOM_NAME ?? "Dropbox",
+    });
+  }
+  // Duende IdentityServer6
+  if (process.env.NEXT_PUBLIC_DUENDE_IDS6_ENABLED === "true") {
+    buttonAuths.push({
+      method: "duende-identityserver6",
+      name: process.env.DUENDE_IDS6_CUSTOM_NAME ?? "DuendeIdentityServer6",
+    });
+  }
+  // EVE Online
+  if (process.env.NEXT_PUBLIC_EVEONLINE_ENABLED === "true") {
+    buttonAuths.push({
+      method: "eveonline",
+      name: process.env.EVEONLINE_CUSTOM_NAME ?? "EVE Online",
+    });
+  }
+  // Facebook
+  if (process.env.NEXT_PUBLIC_FACEBOOK_ENABLED === "true") {
+    buttonAuths.push({
+      method: "facebook",
+      name: process.env.FACEBOOK_CUSTOM_NAME ?? "Facebook",
+    });
+  }
+  // FACEIT
+  if (process.env.NEXT_PUBLIC_FACEIT_ENABLED === "true") {
+    buttonAuths.push({
+      method: "faceit",
+      name: process.env.FACEIT_CUSTOM_NAME ?? "FACEIT",
+    });
+  }
+  // Foursquare
+  if (process.env.NEXT_PUBLIC_FOURSQUARE_ENABLED === "true") {
+    buttonAuths.push({
+      method: "foursquare",
+      name: process.env.FOURSQUARE_CUSTOM_NAME ?? "Foursquare",
+    });
+  }
+  // Freshbooks
+  if (process.env.NEXT_PUBLIC_FRESHBOOKS_ENABLED === "true") {
+    buttonAuths.push({
+      method: "freshbooks",
+      name: process.env.FRESHBOOKS_CUSTOM_NAME ?? "Freshbooks",
+    });
+  }
+  // FusionAuth
+  if (process.env.NEXT_PUBLIC_FUSIONAUTH_ENABLED === "true") {
+    buttonAuths.push({
+      method: "fusionauth",
+      name: process.env.FUSIONAUTH_CUSTOM_NAME ?? "FusionAuth",
+    });
+  }
+  // GitHub
+  if (process.env.NEXT_PUBLIC_GITHUB_ENABLED === "true") {
+    buttonAuths.push({
+      method: "github",
+      name: process.env.GITHUB_CUSTOM_NAME ?? "GitHub",
+    });
+  }
+  // GitLab
+  if (process.env.NEXT_PUBLIC_GITLAB_ENABLED === "true") {
+    buttonAuths.push({
+      method: "gitlab",
+      name: process.env.GITLAB_CUSTOM_NAME ?? "GitLab",
+    });
+  }
+  // Google
+  if (process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true") {
+    buttonAuths.push({
+      method: "google",
+      name: process.env.GOOGLE_CUSTOM_NAME ?? "Google",
+    });
+  }
+  // HubSpot
+  if (process.env.NEXT_PUBLIC_HUBSPOT_ENABLED === "true") {
+    buttonAuths.push({
+      method: "hubspot",
+      name: process.env.HUBSPOT_CUSTOM_NAME ?? "HubSpot",
+    });
+  }
+  // IdentityServer4
+  if (process.env.NEXT_PUBLIC_IDS4_ENABLED === "true") {
+    buttonAuths.push({
+      method: "identity-server4",
+      name: process.env.IDS4_CUSTOM_NAME ?? "IdentityServer4",
+    });
+  }
+  // Kakao
+  if (process.env.NEXT_PUBLIC_KAKAO_ENABLED === "true") {
+    buttonAuths.push({
+      method: "kakao",
+      name: process.env.KAKAO_CUSTOM_NAME ?? "Kakao",
+    });
+  }
+  // Keycloak
+  if (process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true") {
+    buttonAuths.push({
+      method: "keycloak",
+      name: process.env.KEYCLOAK_CUSTOM_NAME ?? "Keycloak",
+    });
+  }
+  // LINE
+  if (process.env.NEXT_PUBLIC_LINE_ENABLED === "true") {
+    buttonAuths.push({
+      method: "line",
+      name: process.env.LINE_CUSTOM_NAME ?? "LINE",
+    });
+  }
+  // LinkedIn
+  if (process.env.NEXT_PUBLIC_LINKEDIN_ENABLED === "true") {
+    buttonAuths.push({
+      method: "linkedin",
+      name: process.env.LINKEDIN_CUSTOM_NAME ?? "LinkedIn",
+    });
+  }
+  // MailChimp
+  if (process.env.NEXT_PUBLIC_MAILCHIMP_ENABLED === "true") {
+    buttonAuths.push({
+      method: "mailchimp",
+      name: process.env.MAILCHIMP_CUSTOM_NAME ?? "Mailchimp",
+    });
+  }
+  // Mail.ru
+  if (process.env.NEXT_PUBLIC_MAILRU_ENABLED === "true") {
+    buttonAuths.push({
+      method: "mailru",
+      name: process.env.MAILRU_CUSTOM_NAME ?? "Mail.ru",
+    });
+  }
+  // Naver
+  if (process.env.NEXT_PUBLIC_NAVER_ENABLED === "true") {
+    buttonAuths.push({
+      method: "naver",
+      name: process.env.NAVER_CUSTOM_NAME ?? "Naver",
+    });
+  }
+  // Netlify
+  if (process.env.NEXT_PUBLIC_NETLIFY_ENABLED === "true") {
+    buttonAuths.push({
+      method: "netlify",
+      name: process.env.NETLIFY_CUSTOM_NAME ?? "Netlify",
+    });
+  }
+  // Okta
+  if (process.env.NEXT_PUBLIC_OKTA_ENABLED === "true") {
+    buttonAuths.push({
+      method: "okta",
+      name: process.env.OKTA_CUSTOM_NAME ?? "Okta",
+    });
+  }
+  // OneLogin
+  if (process.env.NEXT_PUBLIC_ONELOGIN_ENABLED === "true") {
+    buttonAuths.push({
+      method: "onelogin",
+      name: process.env.ONELOGIN_CUSTOM_NAME ?? "OneLogin",
+    });
+  }
+  // Osso
+  if (process.env.NEXT_PUBLIC_OSSO_ENABLED === "true") {
+    buttonAuths.push({
+      method: "osso",
+      name: process.env.OSSO_CUSTOM_NAME ?? "Osso",
+    });
+  }
+  // osu!
+  if (process.env.NEXT_PUBLIC_OSU_ENABLED === "true") {
+    buttonAuths.push({
+      method: "osu",
+      name: process.env.OSU_CUSTOM_NAME ?? "Osu!",
+    });
+  }
+  // Patreon
+  if (process.env.NEXT_PUBLIC_PATREON_ENABLED === "true") {
+    buttonAuths.push({
+      method: "patreon",
+      name: process.env.PATREON_CUSTOM_NAME ?? "Patreon",
+    });
+  }
+  // Pinterest
+  if (process.env.NEXT_PUBLIC_PINTEREST_ENABLED === "true") {
+    buttonAuths.push({
+      method: "pinterest",
+      name: process.env.PINTEREST_CUSTOM_NAME ?? "Pinterest",
+    });
+  }
+  // Pipedrive
+  if (process.env.NEXT_PUBLIC_PIPEDRIVE_ENABLED === "true") {
+    buttonAuths.push({
+      method: "pipedrive",
+      name: process.env.PIPEDRIVE_CUSTOM_NAME ?? "Pipedrive",
+    });
+  }
+  // Reddit
+  if (process.env.NEXT_PUBLIC_REDDIT_ENABLED === "true") {
+    buttonAuths.push({
+      method: "reddit",
+      name: process.env.REDDIT_CUSTOM_NAME ?? "Reddit",
+    });
+  }
+  // Salesforce
+  if (process.env.NEXT_PUBLIC_SALESFORCE_ENABLED === "true") {
+    buttonAuths.push({
+      method: "salesforce",
+      name: process.env.SALESFORCE_CUSTOM_NAME ?? "Salesforce",
+    });
+  }
+  // Slack
+  if (process.env.NEXT_PUBLIC_SLACK_ENABLED === "true") {
+    buttonAuths.push({
+      method: "slack",
+      name: process.env.SLACK_CUSTOM_NAME ?? "Slack",
+    });
+  }
+  // Spotify
+  if (process.env.NEXT_PUBLIC_SPOTIFY_ENABLED === "true") {
+    buttonAuths.push({
+      method: "spotify",
+      name: process.env.SPOTIFY_CUSTOM_NAME ?? "Spotify",
+    });
+  }
+  // Strava
+  if (process.env.NEXT_PUBLIC_STRAVA_ENABLED === "true") {
+    buttonAuths.push({
+      method: "strava",
+      name: process.env.STRAVA_CUSTOM_NAME ?? "Strava",
+    });
+  }
+  // Todoist
+  if (process.env.NEXT_PUBLIC_TODOIST_ENABLED === "true") {
+    buttonAuths.push({
+      method: "todoist",
+      name: process.env.TODOIST_CUSTOM_NAME ?? "Todoist",
+    });
+  }
+  // Twitch
+  if (process.env.NEXT_PUBLIC_TWITCH_ENABLED === "true") {
+    buttonAuths.push({
+      method: "twitch",
+      name: process.env.TWITCH_CUSTOM_NAME ?? "Twitch",
+    });
+  }
+  // United Effects
+  if (process.env.NEXT_PUBLIC_UNITED_EFFECTS_ENABLED === "true") {
+    buttonAuths.push({
+      method: "united-effects",
+      name: process.env.UNITED_EFFECTS_CUSTOM_NAME ?? "United Effects",
+    });
+  }
+  // VK
+  if (process.env.NEXT_PUBLIC_VK_ENABLED === "true") {
+    buttonAuths.push({
+      method: "vk",
+      name: process.env.VK_CUSTOM_NAME ?? "VK",
+    });
+  }
+  // Wikimedia
+  if (process.env.NEXT_PUBLIC_WIKIMEDIA_ENABLED === "true") {
+    buttonAuths.push({
+      method: "wikimedia",
+      name: process.env.WIKIMEDIA_CUSTOM_NAME ?? "Wikimedia",
+    });
+  }
+  // Wordpress.com
+  if (process.env.NEXT_PUBLIC_WORDPRESS_ENABLED === "true") {
+    buttonAuths.push({
+      method: "wordpress",
+      name: process.env.WORDPRESS_CUSTOM_NAME ?? "WordPress.com",
+    });
+  }
+  // Yandex
+  if (process.env.NEXT_PUBLIC_YANDEX_ENABLED === "true") {
+    buttonAuths.push({
+      method: "yandex",
+      name: process.env.YANDEX_CUSTOM_NAME ?? "Yandex",
+    });
+  }
+  // Zitadel
+  if (process.env.NEXT_PUBLIC_ZITADEL_ENABLED === "true") {
+    buttonAuths.push({
+      method: "zitadel",
+      name: process.env.ZITADEL_CUSTOM_NAME ?? "ZITADEL",
+    });
+  }
+  // Zoho
+  if (process.env.NEXT_PUBLIC_ZOHO_ENABLED === "true") {
+    buttonAuths.push({
+      method: "zoho",
+      name: process.env.ZOHO_CUSTOM_NAME ?? "Zoho",
+    });
+  }
+  // Zoom
+  if (process.env.NEXT_PUBLIC_ZOOM_ENABLED === "true") {
+    buttonAuths.push({
+      method: "zoom",
+      name: process.env.ZOOM_CUSTOM_NAME ?? "Zoom",
+    });
+  }
+  return {
+    credentialsEnabled:
+      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" ||
+      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
+        ? "true"
+        : "false",
+    emailEnabled:
+      process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" ? "true" : "false",
+    registrationDisabled:
+      process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true"
+        ? "true"
+        : "false",
+    buttonAuths: buttonAuths,
+  };
+}
--- a/Securite/Linkwarden/pages/api/v1/migration/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/migration/index.ts
@ -0,0 +1,41 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import exportData from "@/lib/api/controllers/migration/exportData";
+import importFromHTMLFile from "@/lib/api/controllers/migration/importFromHTMLFile";
+import importFromLinkwarden from "@/lib/api/controllers/migration/importFromLinkwarden";
+import { MigrationFormat, MigrationRequest } from "@/types/global";
+import verifyUser from "@/lib/api/verifyUser";
+
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: "10mb",
+    },
+  },
+};
+
+export default async function users(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const data = await exportData(user.id);
+
+    if (data.status === 200)
+      return res
+        .setHeader("Content-Type", "application/json")
+        .setHeader("Content-Disposition", "attachment; filename=backup.json")
+        .status(data.status)
+        .json(data.response);
+  } else if (req.method === "POST") {
+    const request: MigrationRequest = JSON.parse(req.body);
+
+    let data;
+    if (request.format === MigrationFormat.htmlFile)
+      data = await importFromHTMLFile(user.id, request.data);
+
+    if (request.format === MigrationFormat.linkwarden)
+      data = await importFromLinkwarden(user.id, request.data);
+
+    if (data) return res.status(data.status).json({ response: data.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/payment/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/payment/index.ts
@ -0,0 +1,41 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import paymentCheckout from "@/lib/api/paymentCheckout";
+import { Plan } from "@/types/global";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "@/lib/api/db";
+
+export default async function users(req: NextApiRequest, res: NextApiResponse) {
+  const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+  const MONTHLY_PRICE_ID = process.env.MONTHLY_PRICE_ID;
+  const YEARLY_PRICE_ID = process.env.YEARLY_PRICE_ID;
+
+  const token = await getToken({ req });
+
+  if (!STRIPE_SECRET_KEY || !MONTHLY_PRICE_ID || !YEARLY_PRICE_ID)
+    return res.status(400).json({ response: "Payment is disabled." });
+
+  console.log(token);
+
+  if (!token?.id) return res.status(404).json({ response: "Token invalid." });
+
+  const email = (await prisma.user.findUnique({ where: { id: token.id } }))
+    ?.email;
+
+  if (!email) return res.status(404).json({ response: "User not found." });
+
+  let PRICE_ID = MONTHLY_PRICE_ID;
+
+  if ((Number(req.query.plan) as Plan) === Plan.monthly)
+    PRICE_ID = MONTHLY_PRICE_ID;
+  else if ((Number(req.query.plan) as Plan) === Plan.yearly)
+    PRICE_ID = YEARLY_PRICE_ID;
+
+  if (req.method === "GET") {
+    const users = await paymentCheckout(
+      STRIPE_SECRET_KEY,
+      email as string,
+      PRICE_ID
+    );
+    return res.status(users.status).json({ response: users.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/public/collections/[id].ts
+++ b/Securite/Linkwarden/pages/api/v1/public/collections/[id].ts
@ -0,0 +1,20 @@
+import getPublicCollection from "@/lib/api/controllers/public/collections/getPublicCollection";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function collection(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (!req?.query?.id) {
+    return res
+      .status(401)
+      .json({ response: "Please choose a valid collection." });
+  }
+
+  if (req.method === "GET") {
+    const collection = await getPublicCollection(Number(req?.query?.id));
+    return res
+      .status(collection.status)
+      .json({ response: collection.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/public/collections/links/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/public/collections/links/index.ts
@ -0,0 +1,41 @@
+import getPublicLinksUnderCollection from "@/lib/api/controllers/public/links/getPublicLinksUnderCollection";
+import { LinkRequestQuery } from "@/types/global";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function collections(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "GET") {
+    // Convert the type of the request query to "LinkRequestQuery"
+    const convertedData: Omit<LinkRequestQuery, "tagId"> = {
+      sort: Number(req.query.sort as string),
+      cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
+      collectionId: req.query.collectionId
+        ? Number(req.query.collectionId as string)
+        : undefined,
+      pinnedOnly: req.query.pinnedOnly
+        ? req.query.pinnedOnly === "true"
+        : undefined,
+      searchQueryString: req.query.searchQueryString
+        ? (req.query.searchQueryString as string)
+        : undefined,
+      searchByName: req.query.searchByName === "true" ? true : undefined,
+      searchByUrl: req.query.searchByUrl === "true" ? true : undefined,
+      searchByDescription:
+        req.query.searchByDescription === "true" ? true : undefined,
+      searchByTextContent:
+        req.query.searchByTextContent === "true" ? true : undefined,
+      searchByTags: req.query.searchByTags === "true" ? true : undefined,
+    };
+
+    if (!convertedData.collectionId) {
+      return res
+        .status(400)
+        .json({ response: "Please choose a valid collection." });
+    }
+
+    const links = await getPublicLinksUnderCollection(convertedData);
+    return res.status(links.status).json({ response: links.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/public/links/[id].ts
+++ b/Securite/Linkwarden/pages/api/v1/public/links/[id].ts
@ -0,0 +1,13 @@
+import getLinkById from "@/lib/api/controllers/public/links/linkId/getLinkById";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function link(req: NextApiRequest, res: NextApiResponse) {
+  if (!req?.query?.id) {
+    return res.status(401).json({ response: "Please choose a valid link." });
+  }
+
+  if (req.method === "GET") {
+    const link = await getLinkById(Number(req?.query?.id));
+    return res.status(link.status).json({ response: link.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/public/users/[id].ts
+++ b/Securite/Linkwarden/pages/api/v1/public/users/[id].ts
@ -0,0 +1,18 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getPublicUser from "@/lib/api/controllers/public/users/getPublicUser";
+import verifyToken from "@/lib/api/verifyToken";
+
+export default async function users(req: NextApiRequest, res: NextApiResponse) {
+  const token = await verifyToken({ req });
+  const requestingId = typeof token === "string" ? undefined : token?.id;
+
+  const lookupId = req.query.id as string;
+
+  // Check if "lookupId" is the user "id" or their "username"
+  const isId = lookupId.split("").every((e) => Number.isInteger(parseInt(e)));
+
+  if (req.method === "GET") {
+    const users = await getPublicUser(lookupId, isId, requestingId);
+    return res.status(users.status).json({ response: users.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/tags/[id].ts
+++ b/Securite/Linkwarden/pages/api/v1/tags/[id].ts
@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import updeteTagById from "@/lib/api/controllers/tags/tagId/updeteTagById";
+import verifyUser from "@/lib/api/verifyUser";
+import deleteTagById from "@/lib/api/controllers/tags/tagId/deleteTagById";
+
+export default async function tags(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  const tagId = Number(req.query.id);
+
+  if (req.method === "PUT") {
+    const tags = await updeteTagById(user.id, tagId, req.body);
+    return res.status(tags.status).json({ response: tags.response });
+  } else if (req.method === "DELETE") {
+    const tags = await deleteTagById(user.id, tagId);
+    return res.status(tags.status).json({ response: tags.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/tags/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/tags/index.ts
@ -0,0 +1,13 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getTags from "@/lib/api/controllers/tags/getTags";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function tags(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const tags = await getTags(user.id);
+    return res.status(tags.status).json({ response: tags.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/tokens/[id].ts
+++ b/Securite/Linkwarden/pages/api/v1/tokens/[id].ts
@ -0,0 +1,13 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import verifyUser from "@/lib/api/verifyUser";
+import deleteToken from "@/lib/api/controllers/tokens/tokenId/deleteTokenById";
+
+export default async function token(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "DELETE") {
+    const deleted = await deleteToken(user.id, Number(req.query.id) as number);
+    return res.status(deleted.status).json({ response: deleted.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/tokens/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/tokens/index.ts
@ -0,0 +1,20 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import verifyUser from "@/lib/api/verifyUser";
+import postToken from "@/lib/api/controllers/tokens/postToken";
+import getTokens from "@/lib/api/controllers/tokens/getTokens";
+
+export default async function tokens(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "POST") {
+    const token = await postToken(JSON.parse(req.body), user.id);
+    return res.status(token.status).json({ response: token.response });
+  } else if (req.method === "GET") {
+    const token = await getTokens(user.id);
+    return res.status(token.status).json({ response: token.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/users/[id].ts
+++ b/Securite/Linkwarden/pages/api/v1/users/[id].ts
@ -0,0 +1,59 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getUserById from "@/lib/api/controllers/users/userId/getUserById";
+import updateUserById from "@/lib/api/controllers/users/userId/updateUserById";
+import deleteUserById from "@/lib/api/controllers/users/userId/deleteUserById";
+import { prisma } from "@/lib/api/db";
+import verifySubscription from "@/lib/api/verifySubscription";
+import verifyToken from "@/lib/api/verifyToken";
+
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
+export default async function users(req: NextApiRequest, res: NextApiResponse) {
+  const token = await verifyToken({ req });
+
+  if (typeof token === "string") {
+    res.status(401).json({ response: token });
+    return null;
+  }
+
+  const userId = token?.id;
+
+  if (userId !== Number(req.query.id))
+    return res.status(401).json({ response: "Permission denied." });
+
+  if (req.method === "GET") {
+    const users = await getUserById(userId);
+    return res.status(users.status).json({ response: users.response });
+  }
+
+  if (STRIPE_SECRET_KEY) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.id,
+      },
+      include: {
+        subscriptions: true,
+      },
+    });
+
+    if (user) {
+      const subscribedUser = await verifySubscription(user);
+      if (!subscribedUser) {
+        return res.status(401).json({
+          response:
+            "You are not a subscriber, feel free to reach out to us at support@linkwarden.app if you think this is an issue.",
+        });
+      }
+    } else {
+      return res.status(404).json({ response: "User not found." });
+    }
+  }
+
+  if (req.method === "PUT") {
+    const updated = await updateUserById(userId, req.body);
+    return res.status(updated.status).json({ response: updated.response });
+  } else if (req.method === "DELETE") {
+    const updated = await deleteUserById(userId, req.body);
+    return res.status(updated.status).json({ response: updated.response });
+  }
+}
--- a/Securite/Linkwarden/pages/api/v1/users/index.ts
+++ b/Securite/Linkwarden/pages/api/v1/users/index.ts
@ -0,0 +1,9 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import postUser from "@/lib/api/controllers/users/postUser";
+
+export default async function users(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "POST") {
+    const response = await postUser(req, res);
+    return response;
+  }
+}
--- a/Securite/Linkwarden/pages/choose-username.tsx
+++ b/Securite/Linkwarden/pages/choose-username.tsx
@ -0,0 +1,93 @@
+import SubmitButton from "@/components/SubmitButton";
+import { signOut } from "next-auth/react";
+import { FormEvent, useState } from "react";
+import { toast } from "react-hot-toast";
+import { useSession } from "next-auth/react";
+import useAccountStore from "@/store/account";
+import CenteredForm from "@/layouts/CenteredForm";
+import TextInput from "@/components/TextInput";
+import AccentSubmitButton from "@/components/AccentSubmitButton";
+
+export default function ChooseUsername() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const [inputedUsername, setInputedUsername] = useState("");
+
+  const { data, status, update } = useSession();
+
+  const { updateAccount, account } = useAccountStore();
+
+  async function submitUsername(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    setSubmitLoader(true);
+
+    const redirectionToast = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...account,
+      username: inputedUsername,
+    });
+
+    if (response.ok) {
+      toast.success("Username Applied!");
+
+      update({
+        id: data?.user.id,
+      });
+    } else toast.error(response.data as string);
+    toast.dismiss(redirectionToast);
+    setSubmitLoader(false);
+  }
+
+  return (
+    <CenteredForm>
+      <form onSubmit={submitUsername}>
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
+          <p className="text-3xl text-center font-extralight">
+            Choose a Username
+          </p>
+
+          <div className="divider my-0"></div>
+
+          <div>
+            <p className="text-sm w-fit font-semibold mb-1">Username</p>
+
+            <TextInput
+              autoFocus
+              placeholder="john"
+              value={inputedUsername}
+              className="bg-base-100"
+              onChange={(e) => setInputedUsername(e.target.value)}
+            />
+          </div>
+          <div>
+            <p className="text-md text-neutral mt-1">
+              Feel free to reach out to us at{" "}
+              <a
+                className="font-semibold underline"
+                href="mailto:support@linkwarden.app"
+              >
+                support@linkwarden.app
+              </a>{" "}
+              in case of any issues.
+            </p>
+          </div>
+
+          <AccentSubmitButton
+            type="submit"
+            label="Complete Registration"
+            className="mt-2 w-full"
+            loading={submitLoader}
+          />
+
+          <div
+            onClick={() => signOut()}
+            className="w-fit mx-auto cursor-pointer text-neutral font-semibold "
+          >
+            Sign Out
+          </div>
+        </div>
+      </form>
+    </CenteredForm>
+  );
+}
--- a/Securite/Linkwarden/pages/collections/[id].tsx
+++ b/Securite/Linkwarden/pages/collections/[id].tsx
@ -0,0 +1,450 @@
+import useCollectionStore from "@/store/collections";
+import useLinkStore from "@/store/links";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  Sort,
+  ViewMode,
+} from "@/types/global";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import MainLayout from "@/layouts/MainLayout";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import SortDropdown from "@/components/SortDropdown";
+import useLinks from "@/hooks/useLinks";
+import usePermissions from "@/hooks/usePermissions";
+import NoLinksFound from "@/components/NoLinksFound";
+import useLocalSettingsStore from "@/store/localSettings";
+import useAccountStore from "@/store/account";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import EditCollectionModal from "@/components/ModalContent/EditCollectionModal";
+import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
+import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal";
+import ViewDropdown from "@/components/ViewDropdown";
+import CardView from "@/components/LinkViews/Layouts/CardView";
+// import GridView from "@/components/LinkViews/Layouts/GridView";
+import ListView from "@/components/LinkViews/Layouts/ListView";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import toast from "react-hot-toast";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+
+export default function Index() {
+  const { settings } = useLocalSettingsStore();
+
+  const router = useRouter();
+
+  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
+    useLinkStore();
+  const { collections } = useCollectionStore();
+
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+
+  const [activeCollection, setActiveCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>();
+
+  const permissions = usePermissions(activeCollection?.id as number);
+
+  useLinks({ collectionId: Number(router.query.id), sort: sortBy });
+
+  useEffect(() => {
+    setActiveCollection(
+      collections.find((e) => e.id === Number(router.query.id))
+    );
+  }, [router, collections]);
+
+  const { account } = useAccountStore();
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (activeCollection && activeCollection.ownerId !== account.id) {
+        const owner = await getPublicUserData(
+          activeCollection.ownerId as number
+        );
+        setCollectionOwner(owner);
+      } else if (activeCollection && activeCollection.ownerId === account.id) {
+        setCollectionOwner({
+          id: account.id as number,
+          name: account.name,
+          username: account.username as string,
+          image: account.image as string,
+          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+          archiveAsPDF: account.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+
+    // When the collection changes, reset the selected links
+    setSelectedLinks([]);
+  }, [activeCollection]);
+
+  const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [newCollectionModal, setNewCollectionModal] = useState(false);
+  const [editCollectionSharingModal, setEditCollectionSharingModal] =
+    useState(false);
+  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
+
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Card
+  );
+
+  const linkView = {
+    [ViewMode.Card]: CardView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
+  return (
+    <MainLayout>
+      <div
+        className="h-[60rem] p-5 flex gap-3 flex-col"
+        style={{
+          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
+            settings.theme === "dark" ? "#262626" : "#f3f4f6"
+          } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+        }}
+      >
+        {activeCollection && (
+          <div className="flex gap-3 items-start justify-between">
+            <div className="flex items-center gap-2">
+              <i
+                className="bi-folder-fill text-3xl drop-shadow"
+                style={{ color: activeCollection?.color }}
+              ></i>
+
+              <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
+                {activeCollection?.name}
+              </p>
+            </div>
+
+            <div className="dropdown dropdown-bottom dropdown-end mt-2">
+              <div
+                tabIndex={0}
+                role="button"
+                onMouseDown={dropdownTriggerer}
+                className="btn btn-ghost btn-sm btn-square text-neutral"
+              >
+                <i className="bi-three-dots text-xl" title="More"></i>
+              </div>
+              <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+                {permissions === true && (
+                  <li>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        setEditCollectionModal(true);
+                      }}
+                    >
+                      Edit Collection Info
+                    </div>
+                  </li>
+                )}
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      setEditCollectionSharingModal(true);
+                    }}
+                  >
+                    {permissions === true
+                      ? "Share and Collaborate"
+                      : "View Team"}
+                  </div>
+                </li>
+                {permissions === true && (
+                  <li>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        setNewCollectionModal(true);
+                      }}
+                    >
+                      Create Sub-Collection
+                    </div>
+                  </li>
+                )}
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      setDeleteCollectionModal(true);
+                    }}
+                  >
+                    {permissions === true
+                      ? "Delete Collection"
+                      : "Leave Collection"}
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
+
+        {activeCollection && (
+          <div className={`min-w-[15rem]`}>
+            <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
+              <div
+                className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
+                onClick={() => setEditCollectionSharingModal(true)}
+              >
+                {collectionOwner.id ? (
+                  <ProfilePhoto
+                    src={collectionOwner.image || undefined}
+                    name={collectionOwner.name}
+                  />
+                ) : undefined}
+                {activeCollection.members
+                  .sort((a, b) => (a.userId as number) - (b.userId as number))
+                  .map((e, i) => {
+                    return (
+                      <ProfilePhoto
+                        key={i}
+                        src={e.user.image ? e.user.image : undefined}
+                        className="-ml-3"
+                        name={e.user.name}
+                      />
+                    );
+                  })
+                  .slice(0, 3)}
+                {activeCollection.members.length - 3 > 0 ? (
+                  <div className={`avatar drop-shadow-md placeholder -ml-3`}>
+                    <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
+                      <span>+{activeCollection.members.length - 3}</span>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+              <p className="text-neutral text-sm font-semibold">
+                By {collectionOwner.name}
+                {activeCollection.members.length > 0 &&
+                  ` and ${activeCollection.members.length} others`}
+                .
+              </p>
+            </div>
+          </div>
+        )}
+
+        {activeCollection?.description && (
+          <p>{activeCollection?.description}</p>
+        )}
+
+        {/* {collections.some((e) => e.parentId === activeCollection.id) ? (
+          <fieldset className="border rounded-md p-2 border-neutral-content">
+            <legend className="text-sm ml-2">Sub-Collections</legend>
+            <div className="flex gap-3">
+              {collections
+                .filter((e) => e.parentId === activeCollection?.id)
+                .map((e, i) => {
+                  return (
+                    <Link
+                      key={i}
+                      className="flex gap-1 items-center btn btn-ghost btn-sm"
+                      href={`/collections/${e.id}`}
+                    >
+                      <i
+                        className="bi-folder-fill text-2xl drop-shadow"
+                        style={{ color: e.color }}
+                      ></i>
+                      <p className="text-xs">{e.name}</p>
+                    </Link>
+                  );
+                })}
+            </div>
+          </fieldset>
+        ) : undefined} */}
+
+        <div className="divider my-0"></div>
+
+        <div className="flex justify-between items-center gap-5">
+          <p>Showing {activeCollection?._count?.links} results</p>
+          <div className="flex items-center gap-2">
+            {links.length > 0 &&
+              (permissions === true ||
+                permissions?.canUpdate ||
+                permissions?.canDelete) && (
+                <div
+                  role="button"
+                  onClick={() => {
+                    setEditMode(!editMode);
+                    setSelectedLinks([]);
+                  }}
+                  className={`btn btn-square btn-sm btn-ghost ${
+                    editMode
+                      ? "bg-primary/20 hover:bg-primary/20"
+                      : "hover:bg-neutral/20"
+                  }`}
+                >
+                  <i className="bi-pencil-fill text-neutral text-xl"></i>
+                </div>
+              )}
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
+        </div>
+
+        {editMode && links.length > 0 && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(permissions === true || permissions?.canUpdate)
+                }
+              >
+                Edit
+              </button>
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(permissions === true || permissions?.canDelete)
+                }
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+
+        {links.some((e) => e.collectionId === Number(router.query.id)) ? (
+          <LinkComponent
+            editMode={editMode}
+            links={links.filter(
+              (e) => e.collection.id === activeCollection?.id
+            )}
+          />
+        ) : (
+          <NoLinksFound />
+        )}
+      </div>
+      {activeCollection && (
+        <>
+          {editCollectionModal && (
+            <EditCollectionModal
+              onClose={() => setEditCollectionModal(false)}
+              activeCollection={activeCollection}
+            />
+          )}
+          {editCollectionSharingModal && (
+            <EditCollectionSharingModal
+              onClose={() => setEditCollectionSharingModal(false)}
+              activeCollection={activeCollection}
+            />
+          )}
+          {newCollectionModal && (
+            <NewCollectionModal
+              onClose={() => setNewCollectionModal(false)}
+              parent={activeCollection}
+            />
+          )}
+          {deleteCollectionModal && (
+            <DeleteCollectionModal
+              onClose={() => setDeleteCollectionModal(false)}
+              activeCollection={activeCollection}
+            />
+          )}
+          {bulkDeleteLinksModal && (
+            <BulkDeleteLinksModal
+              onClose={() => {
+                setBulkDeleteLinksModal(false);
+              }}
+            />
+          )}
+          {bulkEditLinksModal && (
+            <BulkEditLinksModal
+              onClose={() => {
+                setBulkEditLinksModal(false);
+              }}
+            />
+          )}
+        </>
+      )}
+    </MainLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/collections/index.tsx
+++ b/Securite/Linkwarden/pages/collections/index.tsx
@ -0,0 +1,79 @@
+import useCollectionStore from "@/store/collections";
+import CollectionCard from "@/components/CollectionCard";
+import { useState } from "react";
+import MainLayout from "@/layouts/MainLayout";
+import { useSession } from "next-auth/react";
+import SortDropdown from "@/components/SortDropdown";
+import { Sort } from "@/types/global";
+import useSort from "@/hooks/useSort";
+import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
+import PageHeader from "@/components/PageHeader";
+
+export default function Collections() {
+  const { collections } = useCollectionStore();
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortedCollections, setSortedCollections] = useState(collections);
+
+  const { data } = useSession();
+
+  useSort({ sortBy, setData: setSortedCollections, data: collections });
+
+  const [newCollectionModal, setNewCollectionModal] = useState(false);
+
+  return (
+    <MainLayout>
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-folder"}
+            title={"Collections"}
+            description={"Collections you own"}
+          />
+
+          <div className="flex gap-3 justify-end">
+            <div className="relative mt-2">
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            </div>
+          </div>
+        </div>
+
+        <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+          {sortedCollections
+            .filter((e) => e.ownerId === data?.user.id && e.parentId === null)
+            .map((e, i) => {
+              return <CollectionCard key={i} collection={e} />;
+            })}
+
+          <div
+            className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group btn"
+            onClick={() => setNewCollectionModal(true)}
+          >
+            <p className="group-hover:opacity-0 duration-100">New Collection</p>
+            <i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
+          </div>
+        </div>
+
+        {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
+          <>
+            <PageHeader
+              icon={"bi-folder"}
+              title={"Other Collections"}
+              description={"Shared collections you're a member of"}
+            />
+
+            <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+              {sortedCollections
+                .filter((e) => e.ownerId !== data?.user.id)
+                .map((e, i) => {
+                  return <CollectionCard key={i} collection={e} />;
+                })}
+            </div>
+          </>
+        ) : undefined}
+      </div>
+      {newCollectionModal ? (
+        <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
+      ) : undefined}
+    </MainLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/confirmation.tsx
+++ b/Securite/Linkwarden/pages/confirmation.tsx
@ -0,0 +1,27 @@
+import CenteredForm from "@/layouts/CenteredForm";
+import Link from "next/link";
+import React from "react";
+
+export default function EmailConfirmaion() {
+  return (
+    <CenteredForm>
+      <div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-base-200">
+        <p className="text-center text-2xl sm:text-3xl font-extralight mb-2 ">
+          Please check your Email
+        </p>
+
+        <div className="divider my-3"></div>
+
+        <p>A sign in link has been sent to your email address.</p>
+
+        <p className="mt-3">
+          Didn&apos;t see the email? Check your spam folder or visit the{" "}
+          <Link href="/forgot" className="font-bold underline">
+            Password Recovery
+          </Link>{" "}
+          page to resend the link.
+        </p>
+      </div>
+    </CenteredForm>
+  );
+}
--- a/Securite/Linkwarden/pages/dashboard.tsx
+++ b/Securite/Linkwarden/pages/dashboard.tsx
@ -0,0 +1,309 @@
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+import useTagStore from "@/store/tags";
+import MainLayout from "@/layouts/MainLayout";
+import { useEffect, useState } from "react";
+import useLinks from "@/hooks/useLinks";
+import Link from "next/link";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import React from "react";
+import { toast } from "react-hot-toast";
+import { MigrationFormat, MigrationRequest, ViewMode } from "@/types/global";
+import DashboardItem from "@/components/DashboardItem";
+import NewLinkModal from "@/components/ModalContent/NewLinkModal";
+import PageHeader from "@/components/PageHeader";
+import CardView from "@/components/LinkViews/Layouts/CardView";
+import ListView from "@/components/LinkViews/Layouts/ListView";
+import ViewDropdown from "@/components/ViewDropdown";
+import { dropdownTriggerer } from "@/lib/client/utils";
+// import GridView from "@/components/LinkViews/Layouts/GridView";
+
+export default function Dashboard() {
+  const { collections } = useCollectionStore();
+  const { links } = useLinkStore();
+  const { tags } = useTagStore();
+
+  const [numberOfLinks, setNumberOfLinks] = useState(0);
+
+  const [showLinks, setShowLinks] = useState(3);
+
+  useLinks({ pinnedOnly: true, sort: 0 });
+
+  useEffect(() => {
+    setNumberOfLinks(
+      collections.reduce(
+        (accumulator, collection) =>
+          accumulator + (collection._count as any).links,
+        0
+      )
+    );
+  }, [collections]);
+
+  const handleNumberOfLinksToShow = () => {
+    if (window.innerWidth > 1900) {
+      setShowLinks(8);
+    } else if (window.innerWidth > 1280) {
+      setShowLinks(6);
+    } else if (window.innerWidth > 650) {
+      setShowLinks(4);
+    } else setShowLinks(3);
+  };
+
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    handleNumberOfLinksToShow();
+  }, [width]);
+
+  const importBookmarks = async (e: any, format: MigrationFormat) => {
+    const file: File = e.target.files[0];
+
+    if (file) {
+      var reader = new FileReader();
+      reader.readAsText(file, "UTF-8");
+      reader.onload = async function (e) {
+        const load = toast.loading("Importing...");
+
+        const request: string = e.target?.result as string;
+
+        const body: MigrationRequest = {
+          format,
+          data: request,
+        };
+
+        const response = await fetch("/api/v1/migration", {
+          method: "POST",
+          body: JSON.stringify(body),
+        });
+
+        const data = await response.json();
+
+        toast.dismiss(load);
+
+        toast.success("Imported the Bookmarks! Reloading the page...");
+
+        setTimeout(() => {
+          location.reload();
+        }, 2000);
+      };
+      reader.onerror = function (e) {
+        console.log("Error:", e);
+      };
+    }
+  };
+
+  const [newLinkModal, setNewLinkModal] = useState(false);
+
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Card
+  );
+
+  const linkView = {
+    [ViewMode.Card]: CardView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
+  return (
+    <MainLayout>
+      <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
+        <div className="flex items-center justify-between">
+          <PageHeader
+            icon={"bi-house "}
+            title={"Dashboard"}
+            description={"A brief overview of your data"}
+          />
+          <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+        </div>
+
+        <div>
+          <div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
+            <DashboardItem
+              name={numberOfLinks === 1 ? "Link" : "Links"}
+              value={numberOfLinks}
+              icon={"bi-link-45deg"}
+            />
+
+            <div className="divider xl:divider-horizontal"></div>
+
+            <DashboardItem
+              name={collections.length === 1 ? "Collection" : "Collections"}
+              value={collections.length}
+              icon={"bi-folder"}
+            />
+
+            <div className="divider xl:divider-horizontal"></div>
+
+            <DashboardItem
+              name={tags.length === 1 ? "Tag" : "Tags"}
+              value={tags.length}
+              icon={"bi-hash"}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center">
+          <div className="flex gap-2 items-center">
+            <PageHeader
+              icon={"bi-clock-history"}
+              title={"Recent"}
+              description={"Recently added Links"}
+            />
+          </div>
+          <Link
+            href="/links"
+            className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
+          >
+            View All
+            <i className="bi-chevron-right text-sm"></i>
+          </Link>
+        </div>
+
+        <div
+          style={{ flex: "0 1 auto" }}
+          className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
+        >
+          {links[0] ? (
+            <div className="w-full">
+              <LinkComponent links={links.slice(0, showLinks)} />
+            </div>
+          ) : (
+            <div
+              style={{ flex: "1 1 auto" }}
+              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
+            >
+              <p className="text-center text-2xl">
+                View Your Recently Added Links Here!
+              </p>
+              <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
+                This section will view your latest added Links across every
+                Collections you have access to.
+              </p>
+
+              <div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
+                <div
+                  onClick={() => {
+                    setNewLinkModal(true);
+                  }}
+                  className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-violet-400 text-white"
+                >
+                  <i className="bi-plus-lg text-xl duration-100"></i>
+                  <span className="group-hover:opacity-0 text-right duration-100">
+                    Add New Link
+                  </span>
+                </div>
+
+                <div className="dropdown dropdown-bottom">
+                  <div
+                    tabIndex={0}
+                    role="button"
+                    onMouseDown={dropdownTriggerer}
+                    className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
+                    id="import-dropdown"
+                  >
+                    <i className="bi-cloud-upload text-xl duration-100"></i>
+                    <p>Import From</p>
+                  </div>
+                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                    <li>
+                      <label
+                        tabIndex={0}
+                        role="button"
+                        htmlFor="import-linkwarden-file"
+                        title="JSON File"
+                      >
+                        From Linkwarden
+                        <input
+                          type="file"
+                          name="photo"
+                          id="import-linkwarden-file"
+                          accept=".json"
+                          className="hidden"
+                          onChange={(e) =>
+                            importBookmarks(e, MigrationFormat.linkwarden)
+                          }
+                        />
+                      </label>
+                    </li>
+                    <li>
+                      <label
+                        tabIndex={0}
+                        role="button"
+                        htmlFor="import-html-file"
+                        title="HTML File"
+                      >
+                        From Bookmarks HTML file
+                        <input
+                          type="file"
+                          name="photo"
+                          id="import-html-file"
+                          accept=".html"
+                          className="hidden"
+                          onChange={(e) =>
+                            importBookmarks(e, MigrationFormat.htmlFile)
+                          }
+                        />
+                      </label>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-between items-center">
+          <div className="flex gap-2 items-center">
+            <PageHeader
+              icon={"bi-pin-angle"}
+              title={"Pinned"}
+              description={"Your pinned Links"}
+            />
+          </div>
+          <Link
+            href="/links/pinned"
+            className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
+          >
+            View All
+            <i className="bi-chevron-right text-sm "></i>
+          </Link>
+        </div>
+
+        <div
+          style={{ flex: "1 1 auto" }}
+          className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
+        >
+          {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+            <div className="w-full">
+              <LinkComponent
+                links={links
+                  .filter((e) => e.pinnedBy && e.pinnedBy[0])
+                  .slice(0, showLinks)}
+              />
+            </div>
+          ) : (
+            <div
+              style={{ flex: "1 1 auto" }}
+              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
+            >
+              <p className="text-center text-2xl">
+                Pin Your Favorite Links Here!
+              </p>
+              <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
+                You can Pin your favorite Links by clicking on the three dots on
+                each Link and clicking{" "}
+                <span className="font-semibold">Pin to Dashboard</span>.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
+    </MainLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/forgot.tsx
+++ b/Securite/Linkwarden/pages/forgot.tsx
@ -0,0 +1,91 @@
+import AccentSubmitButton from "@/components/AccentSubmitButton";
+import TextInput from "@/components/TextInput";
+import CenteredForm from "@/layouts/CenteredForm";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { FormEvent, useState } from "react";
+import { toast } from "react-hot-toast";
+
+interface FormData {
+  email: string;
+}
+
+export default function Forgot() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const [form, setForm] = useState<FormData>({
+    email: "",
+  });
+
+  async function sendConfirmation(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (form.email !== "") {
+      setSubmitLoader(true);
+
+      const load = toast.loading("Sending login link...");
+
+      await signIn("email", {
+        email: form.email,
+        callbackUrl: "/",
+      });
+
+      toast.dismiss(load);
+
+      setSubmitLoader(false);
+
+      toast.success("Login link sent.");
+    } else {
+      toast.error("Please fill out all the fields.");
+    }
+  }
+
+  return (
+    <CenteredForm>
+      <form onSubmit={sendConfirmation}>
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
+          <p className="text-3xl text-center font-extralight">
+            Password Recovery
+          </p>
+
+          <div className="divider my-0"></div>
+
+          <div>
+            <p>
+              Enter your email so we can send you a link to recover your
+              account. Make sure to change your password in the profile settings
+              afterwards.
+            </p>
+            <p className="text-sm text-neutral">
+              You wont get logged in if you haven&apos;t created an account yet.
+            </p>
+          </div>
+          <div>
+            <p className="text-sm w-fit font-semibold mb-1">Email</p>
+
+            <TextInput
+              autoFocus
+              type="email"
+              placeholder="johnny@example.com"
+              value={form.email}
+              className="bg-base-100"
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+            />
+          </div>
+
+          <AccentSubmitButton
+            type="submit"
+            label="Send Login Link"
+            className="mt-2 w-full"
+            loading={submitLoader}
+          />
+          <div className="flex items-baseline gap-1 justify-center">
+            <Link href={"/login"} className="block font-bold">
+              Go back
+            </Link>
+          </div>
+        </div>
+      </form>
+    </CenteredForm>
+  );
+}
--- a/Securite/Linkwarden/pages/index.tsx
+++ b/Securite/Linkwarden/pages/index.tsx
@ -0,0 +1,3 @@
+export default function Index() {
+  return null;
+}
--- a/Securite/Linkwarden/pages/links/index.tsx
+++ b/Securite/Linkwarden/pages/links/index.tsx
@ -0,0 +1,194 @@
+import NoLinksFound from "@/components/NoLinksFound";
+import SortDropdown from "@/components/SortDropdown";
+import useLinks from "@/hooks/useLinks";
+import MainLayout from "@/layouts/MainLayout";
+import useLinkStore from "@/store/links";
+import React, { useEffect, useState } from "react";
+import PageHeader from "@/components/PageHeader";
+import { Member, Sort, ViewMode } from "@/types/global";
+import ViewDropdown from "@/components/ViewDropdown";
+import CardView from "@/components/LinkViews/Layouts/CardView";
+import ListView from "@/components/LinkViews/Layouts/ListView";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import toast from "react-hot-toast";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+// import GridView from "@/components/LinkViews/Layouts/GridView";
+import { useRouter } from "next/router";
+
+export default function Links() {
+  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
+    useLinkStore();
+
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Card
+  );
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+
+  const router = useRouter();
+
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
+
+  const collectivePermissions = useCollectivePermissions(
+    selectedLinks.map((link) => link.collectionId as number)
+  );
+
+  useLinks({ sort: sortBy });
+
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
+  const linkView = {
+    [ViewMode.Card]: CardView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
+  return (
+    <MainLayout>
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-link-45deg"}
+            title={"All Links"}
+            description={"Links from every Collections"}
+          />
+
+          <div className="mt-2 flex items-center justify-end gap-2">
+            {links.length > 0 && (
+              <div
+                role="button"
+                onClick={() => {
+                  setEditMode(!editMode);
+                  setSelectedLinks([]);
+                }}
+                className={`btn btn-square btn-sm btn-ghost ${
+                  editMode
+                    ? "bg-primary/20 hover:bg-primary/20"
+                    : "hover:bg-neutral/20"
+                }`}
+              >
+                <i className="bi-pencil-fill text-neutral text-xl"></i>
+              </div>
+            )}
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
+        </div>
+
+        {editMode && links.length > 0 && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canUpdate
+                  )
+                }
+              >
+                Edit
+              </button>
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canDelete
+                  )
+                }
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+
+        {links[0] ? (
+          <LinkComponent editMode={editMode} links={links} />
+        ) : (
+          <NoLinksFound text="You Haven't Created Any Links Yet" />
+        )}
+      </div>
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+          }}
+        />
+      )}
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal
+          onClose={() => {
+            setBulkEditLinksModal(false);
+          }}
+        />
+      )}
+    </MainLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/links/pinned.tsx
+++ b/Securite/Linkwarden/pages/links/pinned.tsx
@ -0,0 +1,203 @@
+import SortDropdown from "@/components/SortDropdown";
+import useLinks from "@/hooks/useLinks";
+import MainLayout from "@/layouts/MainLayout";
+import useLinkStore from "@/store/links";
+import React, { useEffect, useState } from "react";
+import PageHeader from "@/components/PageHeader";
+import { Sort, ViewMode } from "@/types/global";
+import ViewDropdown from "@/components/ViewDropdown";
+import CardView from "@/components/LinkViews/Layouts/CardView";
+import ListView from "@/components/LinkViews/Layouts/ListView";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import toast from "react-hot-toast";
+// import GridView from "@/components/LinkViews/Layouts/GridView";
+import { useRouter } from "next/router";
+
+export default function PinnedLinks() {
+  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
+    useLinkStore();
+
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Card
+  );
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+
+  useLinks({ sort: sortBy, pinnedOnly: true });
+
+  const router = useRouter();
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
+
+  const collectivePermissions = useCollectivePermissions(
+    selectedLinks.map((link) => link.collectionId as number)
+  );
+
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
+  const linkView = {
+    [ViewMode.Card]: CardView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
+  return (
+    <MainLayout>
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-pin-angle"}
+            title={"Pinned Links"}
+            description={"Pinned Links from your Collections"}
+          />
+          <div className="mt-2 flex items-center justify-end gap-2">
+            {!(links.length === 0) && (
+              <div
+                role="button"
+                onClick={() => {
+                  setEditMode(!editMode);
+                  setSelectedLinks([]);
+                }}
+                className={`btn btn-square btn-sm btn-ghost ${
+                  editMode
+                    ? "bg-primary/20 hover:bg-primary/20"
+                    : "hover:bg-neutral/20"
+                }`}
+              >
+                <i className="bi-pencil-fill text-neutral text-xl"></i>
+              </div>
+            )}
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
+        </div>
+
+        {editMode && links.length > 0 && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canUpdate
+                  )
+                }
+              >
+                Edit
+              </button>
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canDelete
+                  )
+                }
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+
+        {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+          <LinkComponent editMode={editMode} links={links} />
+        ) : (
+          <div
+            style={{ flex: "1 1 auto" }}
+            className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
+          >
+            <p className="text-center text-2xl">
+              Pin Your Favorite Links Here!
+            </p>
+            <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
+              You can Pin your favorite Links by clicking on the three dots on
+              each Link and clicking{" "}
+              <span className="font-semibold">Pin to Dashboard</span>.
+            </p>
+          </div>
+        )}
+      </div>
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+          }}
+        />
+      )}
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal
+          onClose={() => {
+            setBulkEditLinksModal(false);
+          }}
+        />
+      )}
+    </MainLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/login.tsx
+++ b/Securite/Linkwarden/pages/login.tsx
@ -0,0 +1,184 @@
+import AccentSubmitButton from "@/components/AccentSubmitButton";
+import TextInput from "@/components/TextInput";
+import CenteredForm from "@/layouts/CenteredForm";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import React, { useState, FormEvent } from "react";
+import { toast } from "react-hot-toast";
+import { getLogins } from "./api/v1/logins";
+import { InferGetServerSidePropsType } from "next";
+
+interface FormData {
+  username: string;
+  password: string;
+}
+
+export const getServerSideProps = () => {
+  const availableLogins = getLogins();
+  return { props: { availableLogins } };
+};
+
+export default function Login({
+  availableLogins,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const [form, setForm] = useState<FormData>({
+    username: "",
+    password: "",
+  });
+
+  async function loginUser(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (form.username !== "" && form.password !== "") {
+      setSubmitLoader(true);
+
+      const load = toast.loading("Authenticating...");
+
+      const res = await signIn("credentials", {
+        username: form.username,
+        password: form.password,
+        redirect: false,
+      });
+
+      toast.dismiss(load);
+
+      setSubmitLoader(false);
+
+      if (!res?.ok) {
+        toast.error("Invalid login.");
+      }
+    } else {
+      toast.error("Please fill out all the fields.");
+    }
+  }
+
+  async function loginUserButton(method: string) {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Authenticating...");
+
+    const res = await signIn(method, {});
+
+    toast.dismiss(load);
+
+    setSubmitLoader(false);
+  }
+
+  function displayLoginCredential() {
+    if (availableLogins.credentialsEnabled === "true") {
+      return (
+        <>
+          <p className="text-3xl text-black dark:text-white text-center font-extralight">
+            Enter your credentials
+          </p>
+          <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+          <div>
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+              Username
+              {availableLogins.emailEnabled === "true"
+                ? " or Email"
+                : undefined}
+            </p>
+
+            <TextInput
+              autoFocus={true}
+              placeholder="johnny"
+              value={form.username}
+              className="bg-base-100"
+              onChange={(e) => setForm({ ...form, username: e.target.value })}
+            />
+          </div>
+          <div className="w-full">
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+              Password
+            </p>
+
+            <TextInput
+              type="password"
+              placeholder="••••••••••••••"
+              value={form.password}
+              className="bg-base-100"
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+            />
+            {availableLogins.emailEnabled === "true" && (
+              <div className="w-fit ml-auto mt-1">
+                <Link
+                  href={"/forgot"}
+                  className="text-gray-500 dark:text-gray-400 font-semibold"
+                >
+                  Forgot Password?
+                </Link>
+              </div>
+            )}
+          </div>
+          <AccentSubmitButton
+            type="submit"
+            label="Login"
+            className=" w-full text-center"
+            loading={submitLoader}
+          />
+
+          {availableLogins.buttonAuths.length > 0 ? (
+            <div className="divider my-1">OR</div>
+          ) : undefined}
+        </>
+      );
+    }
+  }
+  function displayLoginExternalButton() {
+    const Buttons: any = [];
+    availableLogins.buttonAuths.forEach((value, index) => {
+      Buttons.push(
+        <React.Fragment key={index}>
+          {index !== 0 ? <div className="divider my-1">OR</div> : undefined}
+
+          <AccentSubmitButton
+            type="button"
+            onClick={() => loginUserButton(value.method)}
+            label={`Sign in with ${value.name}`}
+            className=" w-full text-center"
+            loading={submitLoader}
+          />
+        </React.Fragment>
+      );
+    });
+    return Buttons;
+  }
+
+  function displayRegistration() {
+    if (availableLogins.registrationDisabled !== "true") {
+      return (
+        <div className="flex items-baseline gap-1 justify-center">
+          <p className="w-fit text-gray-500 dark:text-gray-400">New here?</p>
+          <Link
+            href={"/register"}
+            className="block text-black dark:text-white font-semibold"
+          >
+            Sign Up
+          </Link>
+        </div>
+      );
+    }
+  }
+
+  return (
+    <CenteredForm text="Sign in to your account">
+      <form onSubmit={loginUser}>
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+          {displayLoginCredential()}
+          {displayLoginExternalButton()}
+          {displayRegistration()}
+          <Link
+            href="https://docs.linkwarden.app/getting-started/pwa-installation"
+            className="underline text-center"
+            target="_blank"
+          >
+            You can install Linkwarden onto your device
+          </Link>
+        </div>
+      </form>
+    </CenteredForm>
+  );
+}
--- a/Securite/Linkwarden/pages/preserved/[id].tsx
+++ b/Securite/Linkwarden/pages/preserved/[id].tsx
@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import { useRouter } from "next/router";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import ReadableView from "@/components/ReadableView";
+
+export default function Index() {
+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    const fetchLink = async () => {
+      if (router.query.id) {
+        await getLink(Number(router.query.id));
+      }
+    };
+
+    fetchLink();
+  }, []);
+
+  useEffect(() => {
+    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  return (
+    <div className="relative">
+      {/* <div className="fixed left-1/2 transform -translate-x-1/2 w-fit py-1 px-3 bg-base-200 border border-neutral-content rounded-md">
+        Readable
+      </div> */}
+      {link && Number(router.query.format) === ArchivedFormat.readability && (
+        <ReadableView link={link} />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.pdf && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.png && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
+          className="w-fit mx-auto"
+        />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.jpeg && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}`}
+          className="w-fit mx-auto"
+        />
+      )}
+    </div>
+  );
+}
--- a/Securite/Linkwarden/pages/public/collections/[id].tsx
+++ b/Securite/Linkwarden/pages/public/collections/[id].tsx
@ -0,0 +1,256 @@
+"use client";
+import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  Sort,
+  ViewMode,
+} from "@/types/global";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import { motion, Variants } from "framer-motion";
+import Head from "next/head";
+import useLinks from "@/hooks/useLinks";
+import useLinkStore from "@/store/links";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import ToggleDarkMode from "@/components/ToggleDarkMode";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import Image from "next/image";
+import Link from "next/link";
+import FilterSearchDropdown from "@/components/FilterSearchDropdown";
+import SortDropdown from "@/components/SortDropdown";
+import useLocalSettingsStore from "@/store/localSettings";
+import SearchBar from "@/components/SearchBar";
+import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
+import ViewDropdown from "@/components/ViewDropdown";
+import CardView from "@/components/LinkViews/Layouts/CardView";
+import ListView from "@/components/LinkViews/Layouts/ListView";
+// import GridView from "@/components/LinkViews/Layouts/GridView";
+
+const cardVariants: Variants = {
+  offscreen: {
+    y: 50,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+export default function PublicCollections() {
+  const { links } = useLinkStore();
+
+  const { settings } = useLocalSettingsStore();
+
+  const router = useRouter();
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  const [searchFilter, setSearchFilter] = useState({
+    name: true,
+    url: true,
+    description: true,
+    tags: true,
+    textContent: false,
+  });
+
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+
+  useLinks({
+    sort: sortBy,
+    searchQueryString: router.query.q
+      ? decodeURIComponent(router.query.q as string)
+      : undefined,
+    searchByName: searchFilter.name,
+    searchByUrl: searchFilter.url,
+    searchByDescription: searchFilter.description,
+    searchByTextContent: searchFilter.textContent,
+    searchByTags: searchFilter.tags,
+  });
+
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>();
+
+  useEffect(() => {
+    if (router.query.id) {
+      getPublicCollectionData(Number(router.query.id), setCollection);
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (collection) {
+        const owner = await getPublicUserData(collection.ownerId as number);
+        setCollectionOwner(owner);
+      }
+    };
+
+    fetchOwner();
+  }, [collection]);
+
+  const [editCollectionSharingModal, setEditCollectionSharingModal] =
+    useState(false);
+
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Card
+  );
+
+  const linkView = {
+    [ViewMode.Card]: CardView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
+  return collection ? (
+    <div
+      className="h-96"
+      style={{
+        backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
+          settings.theme === "dark" ? "#262626" : "#f3f4f6"
+        } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+      }}
+    >
+      {collection ? (
+        <Head>
+          <title>{collection.name} | Linkwarden</title>
+          <meta
+            property="og:title"
+            content={`${collection.name} | Linkwarden`}
+            key="title"
+          />
+        </Head>
+      ) : undefined}
+      <div className="lg:w-3/4 w-full mx-auto p-5 bg">
+        <div className="flex items-center justify-between">
+          <p className="text-4xl font-thin mb-2 capitalize mt-10">
+            {collection.name}
+          </p>
+          <div className="flex gap-2 items-center mt-8 min-w-fit">
+            <ToggleDarkMode />
+
+            <Link href="https://linkwarden.app/" target="_blank">
+              <Image
+                src={`/icon.png`}
+                width={551}
+                height={551}
+                alt="Linkwarden"
+                title="Created with Linkwarden"
+                className="h-8 w-fit mx-auto rounded"
+              />
+            </Link>
+          </div>
+        </div>
+
+        <div className="mt-3">
+          <div className={`min-w-[15rem]`}>
+            <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
+              <div
+                className="flex items-center btn px-2 btn-ghost rounded-full"
+                onClick={() => setEditCollectionSharingModal(true)}
+              >
+                {collectionOwner.id ? (
+                  <ProfilePhoto
+                    src={collectionOwner.image || undefined}
+                    name={collectionOwner.name}
+                  />
+                ) : undefined}
+                {collection.members
+                  .sort((a, b) => (a.userId as number) - (b.userId as number))
+                  .map((e, i) => {
+                    return (
+                      <ProfilePhoto
+                        key={i}
+                        src={e.user.image ? e.user.image : undefined}
+                        className="-ml-3"
+                        name={e.user.name}
+                      />
+                    );
+                  })
+                  .slice(0, 3)}
+                {collection.members.length - 3 > 0 ? (
+                  <div className={`avatar drop-shadow-md placeholder -ml-3`}>
+                    <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
+                      <span>+{collection.members.length - 3}</span>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+
+              <p className="text-neutral text-sm font-semibold">
+                By {collectionOwner.name}
+                {collection.members.length > 0
+                  ? ` and ${collection.members.length} others`
+                  : undefined}
+                .
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <p className="mt-5">{collection.description}</p>
+
+        <div className="divider mt-5 mb-0"></div>
+
+        <div className="flex mb-5 mt-10 flex-col gap-5">
+          <div className="flex justify-between gap-3">
+            <SearchBar
+              placeholder={`Search ${collection._count?.links} Links`}
+            />
+
+            <div className="flex gap-2 items-center w-fit">
+              <FilterSearchDropdown
+                searchFilter={searchFilter}
+                setSearchFilter={setSearchFilter}
+              />
+
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+
+              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+            </div>
+          </div>
+
+          {links[0] ? (
+            <LinkComponent
+              links={links
+                .filter((e) => e.collectionId === Number(router.query.id))
+                .map((e, i) => {
+                  const linkWithCollectionData = {
+                    ...e,
+                    collection: collection, // Append collection data
+                  };
+                  return linkWithCollectionData;
+                })}
+            />
+          ) : (
+            <p>This collection is empty...</p>
+          )}
+
+          {/* <p className="text-center text-neutral">
+        List created with <span className="text-black">Linkwarden.</span>
+        </p> */}
+        </div>
+      </div>
+      {editCollectionSharingModal ? (
+        <EditCollectionSharingModal
+          onClose={() => setEditCollectionSharingModal(false)}
+          activeCollection={collection}
+        />
+      ) : undefined}
+    </div>
+  ) : (
+    <></>
+  );
+}
--- a/Securite/Linkwarden/pages/public/preserved/[id].tsx
+++ b/Securite/Linkwarden/pages/public/preserved/[id].tsx
@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import { useRouter } from "next/router";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import ReadableView from "@/components/ReadableView";
+
+export default function Index() {
+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : false;
+
+  useEffect(() => {
+    const fetchLink = async () => {
+      if (router.query.id) {
+        await getLink(Number(router.query.id), isPublic);
+      }
+    };
+
+    fetchLink();
+  }, []);
+
+  useEffect(() => {
+    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  return (
+    <div className="relative">
+      {/* <div className="fixed left-1/2 transform -translate-x-1/2 w-fit py-1 px-3 bg-base-200 border border-neutral-content rounded-md">
+        Readable
+      </div> */}
+      {link && Number(router.query.format) === ArchivedFormat.readability && (
+        <ReadableView link={link} />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.pdf && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.png && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
+          className="w-fit mx-auto"
+        />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.jpeg && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}`}
+          className="w-fit mx-auto"
+        />
+      )}
+    </div>
+  );
+}
--- a/Securite/Linkwarden/pages/register.tsx
+++ b/Securite/Linkwarden/pages/register.tsx
@ -0,0 +1,240 @@
+import Link from "next/link";
+import { useState, FormEvent } from "react";
+import { toast } from "react-hot-toast";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/router";
+import CenteredForm from "@/layouts/CenteredForm";
+import TextInput from "@/components/TextInput";
+import AccentSubmitButton from "@/components/AccentSubmitButton";
+
+const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
+
+type FormData = {
+  name: string;
+  username?: string;
+  email?: string;
+  password: string;
+  passwordConfirmation: string;
+};
+
+export default function Register() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const router = useRouter();
+
+  const [form, setForm] = useState<FormData>({
+    name: "",
+    username: emailEnabled ? undefined : "",
+    email: emailEnabled ? "" : undefined,
+    password: "",
+    passwordConfirmation: "",
+  });
+
+  async function registerUser(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (!submitLoader) {
+      const checkFields = () => {
+        if (emailEnabled) {
+          return (
+            form.name !== "" &&
+            form.email !== "" &&
+            form.password !== "" &&
+            form.passwordConfirmation !== ""
+          );
+        } else {
+          return (
+            form.name !== "" &&
+            form.username !== "" &&
+            form.password !== "" &&
+            form.passwordConfirmation !== ""
+          );
+        }
+      };
+
+      if (checkFields()) {
+        if (form.password !== form.passwordConfirmation)
+          return toast.error("Passwords do not match.");
+        else if (form.password.length < 8)
+          return toast.error("Passwords must be at least 8 characters.");
+        const { passwordConfirmation, ...request } = form;
+
+        setSubmitLoader(true);
+
+        const load = toast.loading("Creating Account...");
+
+        const response = await fetch("/api/v1/users", {
+          body: JSON.stringify(request),
+          headers: {
+            "Content-Type": "application/json",
+          },
+          method: "POST",
+        });
+
+        const data = await response.json();
+
+        toast.dismiss(load);
+        setSubmitLoader(false);
+
+        if (response.ok) {
+          if (form.email && emailEnabled)
+            await signIn("email", {
+              email: form.email,
+              callbackUrl: "/",
+            });
+          else if (!emailEnabled) router.push("/login");
+
+          toast.success("User Created!");
+        } else {
+          toast.error(data.response);
+        }
+      } else {
+        toast.error("Please fill out all the fields.");
+      }
+    }
+  }
+
+  return (
+    <CenteredForm
+      text={
+        process.env.NEXT_PUBLIC_STRIPE
+          ? `Unlock ${
+              process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
+            } days of Premium Service at no cost!`
+          : "Create a new account"
+      }
+    >
+      {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? (
+        <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
+          <p>
+            Registration is disabled for this instance, please contact the admin
+            in case of any issues.
+          </p>
+        </div>
+      ) : (
+        <form onSubmit={registerUser}>
+          <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-base-200 rounded-2xl shadow-md border border-neutral-content">
+            <p className="text-3xl text-center font-extralight">
+              Enter your details
+            </p>
+
+            <div className="divider my-0"></div>
+
+            <div>
+              <p className="text-sm w-fit font-semibold mb-1">Display Name</p>
+
+              <TextInput
+                autoFocus={true}
+                placeholder="Johnny"
+                value={form.name}
+                className="bg-base-100"
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+              />
+            </div>
+
+            {emailEnabled ? undefined : (
+              <div>
+                <p className="text-sm w-fit font-semibold mb-1">Username</p>
+
+                <TextInput
+                  placeholder="john"
+                  value={form.username}
+                  className="bg-base-100"
+                  onChange={(e) =>
+                    setForm({ ...form, username: e.target.value })
+                  }
+                />
+              </div>
+            )}
+
+            {emailEnabled ? (
+              <div>
+                <p className="text-sm w-fit font-semibold mb-1">Email</p>
+
+                <TextInput
+                  type="email"
+                  placeholder="johnny@example.com"
+                  value={form.email}
+                  className="bg-base-100"
+                  onChange={(e) => setForm({ ...form, email: e.target.value })}
+                />
+              </div>
+            ) : undefined}
+
+            <div className="w-full">
+              <p className="text-sm w-fit font-semibold  mb-1">Password</p>
+
+              <TextInput
+                type="password"
+                placeholder="••••••••••••••"
+                value={form.password}
+                className="bg-base-100"
+                onChange={(e) => setForm({ ...form, password: e.target.value })}
+              />
+            </div>
+
+            <div className="w-full">
+              <p className="text-sm w-fit font-semibold mb-1">
+                Confirm Password
+              </p>
+
+              <TextInput
+                type="password"
+                placeholder="••••••••••••••"
+                value={form.passwordConfirmation}
+                className="bg-base-100"
+                onChange={(e) =>
+                  setForm({ ...form, passwordConfirmation: e.target.value })
+                }
+              />
+            </div>
+
+            {process.env.NEXT_PUBLIC_STRIPE ? (
+              <div>
+                <p className="text-xs text-neutral">
+                  By signing up, you agree to our{" "}
+                  <Link
+                    href="https://linkwarden.app/tos"
+                    className="font-semibold underline"
+                  >
+                    Terms of Service
+                  </Link>{" "}
+                  and{" "}
+                  <Link
+                    href="https://linkwarden.app/privacy-policy"
+                    className="font-semibold underline"
+                  >
+                    Privacy Policy
+                  </Link>
+                  .
+                </p>
+                <p className="text-xs text-neutral">
+                  Need help?{" "}
+                  <Link
+                    href="mailto:support@linkwarden.app"
+                    className="font-semibold underline"
+                  >
+                    Get in touch
+                  </Link>
+                  .
+                </p>
+              </div>
+            ) : undefined}
+
+            <AccentSubmitButton
+              type="submit"
+              label="Sign Up"
+              className="w-full"
+              loading={submitLoader}
+            />
+            <div className="flex items-baseline gap-1 justify-center">
+              <p className="w-fit text-neutral">Already have an account?</p>
+              <Link href={"/login"} className="block font-bold">
+                Login
+              </Link>
+            </div>
+          </div>
+        </form>
+      )}
+    </CenteredForm>
+  );
+}
--- a/Securite/Linkwarden/pages/search.tsx
+++ b/Securite/Linkwarden/pages/search.tsx
@ -0,0 +1,97 @@
+import FilterSearchDropdown from "@/components/FilterSearchDropdown";
+import SortDropdown from "@/components/SortDropdown";
+import useLinks from "@/hooks/useLinks";
+import MainLayout from "@/layouts/MainLayout";
+import useLinkStore from "@/store/links";
+import { Sort, ViewMode } from "@/types/global";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import ViewDropdown from "@/components/ViewDropdown";
+import CardView from "@/components/LinkViews/Layouts/CardView";
+// import GridView from "@/components/LinkViews/Layouts/GridView";
+import ListView from "@/components/LinkViews/Layouts/ListView";
+import PageHeader from "@/components/PageHeader";
+import { GridLoader, PropagateLoader } from "react-spinners";
+
+export default function Search() {
+  const { links } = useLinkStore();
+
+  const router = useRouter();
+
+  const [searchFilter, setSearchFilter] = useState({
+    name: true,
+    url: true,
+    description: true,
+    tags: true,
+    textContent: false,
+  });
+
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Card
+  );
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+
+  const { isLoading } = useLinks({
+    sort: sortBy,
+    searchQueryString: decodeURIComponent(router.query.q as string),
+    searchByName: searchFilter.name,
+    searchByUrl: searchFilter.url,
+    searchByDescription: searchFilter.description,
+    searchByTextContent: searchFilter.textContent,
+    searchByTags: searchFilter.tags,
+  });
+
+  useEffect(() => {
+    console.log("isLoading", isLoading);
+  }, [isLoading]);
+
+  const linkView = {
+    [ViewMode.Card]: CardView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
+  return (
+    <MainLayout>
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
+        <div className="flex justify-between">
+          <PageHeader icon={"bi-search"} title={"Search Results"} />
+
+          <div className="flex gap-3 items-center justify-end">
+            <div className="flex gap-2 items-center mt-2">
+              <FilterSearchDropdown
+                searchFilter={searchFilter}
+                setSearchFilter={setSearchFilter}
+              />
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+            </div>
+          </div>
+        </div>
+
+        {!isLoading && !links[0] ? (
+          <p>
+            Nothing found.{" "}
+            <span className="font-bold text-xl" title="Shruggie">
+              ¯\_(ツ)_/¯
+            </span>
+          </p>
+        ) : links[0] ? (
+          <LinkComponent links={links} isLoading={isLoading} />
+        ) : (
+          isLoading && (
+            <GridLoader
+              color="oklch(var(--p))"
+              loading={true}
+              size={20}
+              className="m-auto py-10"
+            />
+          )
+        )}
+      </div>
+    </MainLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/settings/access-tokens.tsx
+++ b/Securite/Linkwarden/pages/settings/access-tokens.tsx
@ -0,0 +1,107 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React, { useEffect, useState } from "react";
+import NewTokenModal from "@/components/ModalContent/NewTokenModal";
+import RevokeTokenModal from "@/components/ModalContent/RevokeTokenModal";
+import { AccessToken } from "@prisma/client";
+import useTokenStore from "@/store/tokens";
+
+export default function AccessTokens() {
+  const [newTokenModal, setNewTokenModal] = useState(false);
+  const [revokeTokenModal, setRevokeTokenModal] = useState(false);
+  const [selectedToken, setSelectedToken] = useState<AccessToken | null>(null);
+
+  const openRevokeModal = (token: AccessToken) => {
+    setSelectedToken(token);
+    setRevokeTokenModal(true);
+  };
+
+  const { setTokens, tokens } = useTokenStore();
+
+  useEffect(() => {
+    fetch("/api/v1/tokens")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.response) setTokens(data.response as AccessToken[]);
+      });
+  }, []);
+
+  return (
+    <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Access Tokens</p>
+
+      <div className="divider my-3"></div>
+
+      <div className="flex flex-col gap-3">
+        <p>
+          Access Tokens can be used to access Linkwarden from other apps and
+          services without giving away your Username and Password.
+        </p>
+
+        <button
+          className={`btn ml-auto btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2`}
+          onClick={() => {
+            setNewTokenModal(true);
+          }}
+        >
+          New Access Token
+        </button>
+
+        {tokens.length > 0 ? (
+          <>
+            <div className="divider my-0"></div>
+
+            <table className="table">
+              {/* head */}
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>Name</th>
+                  <th>Created</th>
+                  <th>Expires</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {tokens.map((token, i) => (
+                  <React.Fragment key={i}>
+                    <tr>
+                      <th>{i + 1}</th>
+                      <td>{token.name}</td>
+                      <td>
+                        {new Date(token.createdAt || "").toLocaleDateString()}
+                      </td>
+                      <td>
+                        {new Date(token.expires || "").toLocaleDateString()}
+                      </td>
+                      <td>
+                        <button
+                          className="btn btn-sm btn-ghost btn-square hover:bg-red-500"
+                          onClick={() => openRevokeModal(token as AccessToken)}
+                        >
+                          <i className="bi-x text-lg"></i>
+                        </button>
+                      </td>
+                    </tr>
+                  </React.Fragment>
+                ))}
+              </tbody>
+            </table>
+          </>
+        ) : undefined}
+      </div>
+
+      {newTokenModal ? (
+        <NewTokenModal onClose={() => setNewTokenModal(false)} />
+      ) : undefined}
+      {revokeTokenModal && selectedToken && (
+        <RevokeTokenModal
+          onClose={() => {
+            setRevokeTokenModal(false);
+            setSelectedToken(null);
+          }}
+          activeToken={selectedToken}
+        />
+      )}
+    </SettingsLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/settings/account.tsx
+++ b/Securite/Linkwarden/pages/settings/account.tsx
@ -0,0 +1,385 @@
+import { useState, useEffect } from "react";
+import useAccountStore from "@/store/account";
+import { AccountSettings } from "@/types/global";
+import { toast } from "react-hot-toast";
+import SettingsLayout from "@/layouts/SettingsLayout";
+import TextInput from "@/components/TextInput";
+import { resizeImage } from "@/lib/client/resizeImage";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import SubmitButton from "@/components/SubmitButton";
+import React from "react";
+import { MigrationFormat, MigrationRequest } from "@/types/global";
+import Link from "next/link";
+import Checkbox from "@/components/Checkbox";
+import { dropdownTriggerer } from "@/lib/client/utils";
+
+export default function Account() {
+  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const { account, updateAccount } = useAccountStore();
+
+  const [user, setUser] = useState<AccountSettings>(
+    !objectIsEmpty(account)
+      ? account
+      : ({
+          // @ts-ignore
+          id: null,
+          name: "",
+          username: "",
+          email: "",
+          emailVerified: null,
+          image: "",
+          isPrivate: true,
+          // @ts-ignore
+          createdAt: null,
+          whitelistedUsers: [],
+        } as unknown as AccountSettings)
+  );
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) setUser({ ...account });
+  }, [account]);
+
+  const handleImageUpload = async (e: any) => {
+    const file: File = e.target.files[0];
+    const fileExtension = file.name.split(".").pop()?.toLowerCase();
+    const allowedExtensions = ["png", "jpeg", "jpg"];
+    if (allowedExtensions.includes(fileExtension as string)) {
+      const resizedFile = await resizeImage(file);
+      if (
+        resizedFile.size < 1048576 // 1048576 Bytes == 1MB
+      ) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          setUser({ ...user, image: reader.result as string });
+        };
+        reader.readAsDataURL(resizedFile);
+      } else {
+        toast.error("Please select a PNG or JPEG file thats less than 1MB.");
+      }
+    } else {
+      toast.error("Invalid file format.");
+    }
+  };
+
+  const submit = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...user,
+    });
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Settings Applied!");
+    } else toast.error(response.data as string);
+    setSubmitLoader(false);
+  };
+
+  const importBookmarks = async (e: any, format: MigrationFormat) => {
+    setSubmitLoader(true);
+
+    const file: File = e.target.files[0];
+
+    if (file) {
+      var reader = new FileReader();
+      reader.readAsText(file, "UTF-8");
+      reader.onload = async function (e) {
+        const load = toast.loading("Importing...");
+
+        const request: string = e.target?.result as string;
+
+        const body: MigrationRequest = {
+          format,
+          data: request,
+        };
+
+        const response = await fetch("/api/v1/migration", {
+          method: "POST",
+          body: JSON.stringify(body),
+        });
+
+        const data = await response.json();
+
+        toast.dismiss(load);
+
+        if (response.ok) {
+          toast.success("Imported the Bookmarks! Reloading the page...");
+          setTimeout(() => {
+            location.reload();
+          }, 2000);
+        } else toast.error(data.response as string);
+      };
+      reader.onerror = function (e) {
+        console.log("Error:", e);
+      };
+    }
+
+    setSubmitLoader(false);
+  };
+
+  const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState("");
+
+  useEffect(() => {
+    setWhiteListedUsersTextbox(account?.whitelistedUsers?.join(", "));
+  }, [account]);
+
+  useEffect(() => {
+    setUser({
+      ...user,
+      whitelistedUsers: stringToArray(whitelistedUsersTextbox),
+    });
+  }, [whitelistedUsersTextbox]);
+
+  const stringToArray = (str: string) => {
+    const stringWithoutSpaces = str?.replace(/\s+/g, "");
+
+    const wordsArray = stringWithoutSpaces?.split(",");
+
+    return wordsArray;
+  };
+
+  return (
+    <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Account Settings</p>
+
+      <div className="divider my-3"></div>
+
+      <div className="flex flex-col gap-5">
+        <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
+          <div className="flex flex-col gap-3">
+            <div>
+              <p className="mb-2">Display Name</p>
+              <TextInput
+                value={user.name || ""}
+                className="bg-base-200"
+                onChange={(e) => setUser({ ...user, name: e.target.value })}
+              />
+            </div>
+            <div>
+              <p className="mb-2">Username</p>
+              <TextInput
+                value={user.username || ""}
+                className="bg-base-200"
+                onChange={(e) => setUser({ ...user, username: e.target.value })}
+              />
+            </div>
+
+            {emailEnabled ? (
+              <div>
+                <p className="mb-2">Email</p>
+                {user.email !== account.email &&
+                process.env.NEXT_PUBLIC_STRIPE === "true" ? (
+                  <p className="text-neutral mb-2 text-sm">
+                    Updating this field will change your billing email as well
+                  </p>
+                ) : undefined}
+                <TextInput
+                  value={user.email || ""}
+                  className="bg-base-200"
+                  onChange={(e) => setUser({ ...user, email: e.target.value })}
+                />
+              </div>
+            ) : undefined}
+          </div>
+
+          <div className="sm:row-span-2 sm:justify-self-center my-3">
+            <p className="mb-2 sm:text-center">Profile Photo</p>
+            <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
+              <ProfilePhoto
+                priority={true}
+                src={user.image ? user.image : undefined}
+                large={true}
+              />
+              {user.image && (
+                <div
+                  onClick={() =>
+                    setUser({
+                      ...user,
+                      image: "",
+                    })
+                  }
+                  className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
+                >
+                  <i className="bi-x"></i>
+                </div>
+              )}
+              <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
+                <label className="btn btn-xs btn-neutral btn-outline bg-base-100">
+                  Browse...
+                  <input
+                    type="file"
+                    name="photo"
+                    id="upload-photo"
+                    accept=".png, .jpeg, .jpg"
+                    className="hidden"
+                    onChange={handleImageUpload}
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-2 w-full rounded-md h-8">
+            <p className="truncate w-full pr-7 text-3xl font-thin">
+              Import & Export
+            </p>
+          </div>
+
+          <div className="divider my-3"></div>
+
+          <div className="flex gap-3 flex-col">
+            <div>
+              <p className="mb-2">Import your data from other platforms.</p>
+              <div className="dropdown dropdown-bottom">
+                <div
+                  tabIndex={0}
+                  role="button"
+                  onMouseDown={dropdownTriggerer}
+                  className="flex gap-2 text-sm btn btn-outline btn-neutral group"
+                  id="import-dropdown"
+                >
+                  <i className="bi-cloud-upload text-xl duration-100"></i>
+                  <p>Import From</p>
+                </div>
+                <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                  <li>
+                    <label
+                      tabIndex={0}
+                      role="button"
+                      htmlFor="import-linkwarden-file"
+                      title="JSON File"
+                    >
+                      From Linkwarden
+                      <input
+                        type="file"
+                        name="photo"
+                        id="import-linkwarden-file"
+                        accept=".json"
+                        className="hidden"
+                        onChange={(e) =>
+                          importBookmarks(e, MigrationFormat.linkwarden)
+                        }
+                      />
+                    </label>
+                  </li>
+                  <li>
+                    <label
+                      tabIndex={0}
+                      role="button"
+                      htmlFor="import-html-file"
+                      title="HTML File"
+                    >
+                      From Bookmarks HTML file
+                      <input
+                        type="file"
+                        name="photo"
+                        id="import-html-file"
+                        accept=".html"
+                        className="hidden"
+                        onChange={(e) =>
+                          importBookmarks(e, MigrationFormat.htmlFile)
+                        }
+                      />
+                    </label>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div>
+              <p className="mb-2">Download your data instantly.</p>
+              <Link className="w-fit" href="/api/v1/migration">
+                <div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
+                  <i className="bi-cloud-download text-xl duration-100"></i>
+                  <p>Export Data</p>
+                </div>
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-2 w-full rounded-md h-8">
+            <p className="truncate w-full pr-7 text-3xl font-thin">
+              Profile Visibility
+            </p>
+          </div>
+
+          <div className="divider my-3"></div>
+
+          <Checkbox
+            label="Make profile private"
+            state={user.isPrivate}
+            onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
+          />
+
+          <p className="text-neutral text-sm">
+            This will limit who can find and add you to new Collections.
+          </p>
+
+          {user.isPrivate && (
+            <div className="pl-5">
+              <p className="mt-2">Whitelisted Users</p>
+              <p className="text-neutral text-sm mb-3">
+                Please provide the Username of the users you wish to grant
+                visibility to your profile. Separated by comma.
+              </p>
+              <textarea
+                className="w-full resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+                placeholder="Your profile is hidden from everyone right now..."
+                value={whitelistedUsersTextbox}
+                onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
+              />
+            </div>
+          )}
+        </div>
+
+        <SubmitButton
+          onClick={submit}
+          loading={submitLoader}
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
+        />
+
+        <div>
+          <div className="flex items-center gap-2 w-full rounded-md h-8">
+            <p className="text-red-500 dark:text-red-500 truncate w-full pr-7 text-3xl font-thin">
+              Delete Account
+            </p>
+          </div>
+
+          <div className="divider my-3"></div>
+
+          <p>
+            This will permanently delete ALL the Links, Collections, Tags, and
+            archived data you own.{" "}
+            {process.env.NEXT_PUBLIC_STRIPE
+              ? "It will also cancel your subscription. "
+              : undefined}{" "}
+            You will be prompted to enter your password before the deletion
+            process.
+          </p>
+        </div>
+
+        <Link
+          href="/settings/delete"
+          className="text-white w-full sm:w-fit flex items-center gap-2 py-2 px-4 rounded-md text-lg tracking-wide select-none font-semibold duration-100 bg-red-500 hover:bg-red-400 cursor-pointer"
+        >
+          <p className="text-center w-full">Delete Your Account</p>
+        </Link>
+      </div>
+    </SettingsLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/settings/billing.tsx
+++ b/Securite/Linkwarden/pages/settings/billing.tsx
@ -0,0 +1,43 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function Billing() {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!process.env.NEXT_PUBLIC_STRIPE) router.push("/settings/profile");
+  }, []);
+
+  return (
+    <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Billing Settings</p>
+
+      <div className="divider my-3"></div>
+
+      <div className="w-full mx-auto flex flex-col gap-3 justify-between">
+        <p className="text-md">
+          To manage/cancel your subscription, visit the{" "}
+          <a
+            href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
+            className="underline"
+          >
+            Billing Portal
+          </a>
+          .
+        </p>
+
+        <p className="text-md">
+          If you still need help or encountered any issues, feel free to reach
+          out to us at:{" "}
+          <a
+            className="font-semibold underline"
+            href="mailto:support@linkwarden.app"
+          >
+            support@linkwarden.app
+          </a>
+        </p>
+      </div>
+    </SettingsLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/settings/delete.tsx
+++ b/Securite/Linkwarden/pages/settings/delete.tsx
@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
+import CenteredForm from "@/layouts/CenteredForm";
+import { signOut, useSession } from "next-auth/react";
+import Link from "next/link";
+
+const keycloakEnabled = process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true";
+const authentikEnabled = process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true";
+
+export default function Delete() {
+  const [password, setPassword] = useState("");
+  const [comment, setComment] = useState<string>();
+  const [feedback, setFeedback] = useState<string>();
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const { data } = useSession();
+
+  const submit = async () => {
+    const body = {
+      password,
+      cancellation_details: {
+        comment,
+        feedback,
+      },
+    };
+
+    if (!keycloakEnabled && !authentikEnabled && password == "") {
+      return toast.error("Please fill the required fields.");
+    }
+
+    setSubmitLoader(true);
+
+    const load = toast.loading("Deleting everything, please wait...");
+
+    const response = await fetch(`/api/v1/users/${data?.user.id}`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    });
+
+    const message = (await response.json()).response;
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      signOut();
+    } else toast.error(message);
+
+    setSubmitLoader(false);
+  };
+
+  return (
+    <CenteredForm>
+      <div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 bg-base-200 rounded-2xl shadow-md border border-neutral-content">
+        <Link
+          href="/settings/account"
+          className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
+        >
+          <i className="bi-chevron-left  text-neutral text-xl"></i>
+        </Link>
+        <div className="flex items-center gap-2 w-full rounded-md h-8">
+          <p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">
+            Delete Account
+          </p>
+        </div>
+
+        <div className="divider my-0"></div>
+
+        <p>
+          This will permanently delete all the Links, Collections, Tags, and
+          archived data you own. It will also log you out
+          {process.env.NEXT_PUBLIC_STRIPE
+            ? " and cancel your subscription"
+            : undefined}
+          . This action is irreversible!
+        </p>
+
+        {process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED !== "true" ? (
+          <div>
+            <p className="mb-2">Confirm Your Password</p>
+
+            <TextInput
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••••••••"
+              className="bg-base-100"
+              type="password"
+            />
+          </div>
+        ) : undefined}
+
+        {process.env.NEXT_PUBLIC_STRIPE ? (
+          <fieldset className="border rounded-md p-2 border-primary">
+            <legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-primary">
+              <b>Optional</b>{" "}
+              <i className="min-[390px]:text-sm text-xs">
+                (but it really helps us improve!)
+              </i>
+            </legend>
+            <label className="w-full flex min-[430px]:items-center items-start gap-2 mb-3 min-[430px]:flex-row flex-col">
+              <p className="text-sm">Reason for cancellation:</p>
+              <select
+                className="rounded-md p-1 outline-none"
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+              >
+                <option value={undefined}>Please specify</option>
+                <option value="customer_service">Customer Service</option>
+                <option value="low_quality">Low Quality</option>
+                <option value="missing_features">Missing Features</option>
+                <option value="switched_service">Switched Service</option>
+                <option value="too_complex">Too Complex</option>
+                <option value="too_expensive">Too Expensive</option>
+                <option value="unused">Unused</option>
+                <option value="other">Other</option>
+              </select>
+            </label>
+            <div>
+              <p className="text-sm mb-2">
+                More information (the more details, the more helpful it&apos;d
+                be)
+              </p>
+
+              <textarea
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                placeholder="e.g. I needed a feature that..."
+                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-100 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+              />
+            </div>
+          </fieldset>
+        ) : undefined}
+
+        <button
+          className={`mx-auto text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
+            submitLoader
+              ? "bg-red-400 cursor-auto"
+              : "bg-red-500 hover:bg-red-400 cursor-pointer"
+          }`}
+          onClick={() => {
+            if (!submitLoader) {
+              submit();
+            }
+          }}
+        >
+          <p className="text-center w-full">Delete Your Account</p>
+        </button>
+      </div>
+    </CenteredForm>
+  );
+}
--- a/Securite/Linkwarden/pages/settings/index.tsx
+++ b/Securite/Linkwarden/pages/settings/index.tsx
@ -0,0 +1,10 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function Settings() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push("/settings/profile");
+  }, []);
+}
--- a/Securite/Linkwarden/pages/settings/password.tsx
+++ b/Securite/Linkwarden/pages/settings/password.tsx
@ -0,0 +1,86 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import { useState } from "react";
+import useAccountStore from "@/store/account";
+import SubmitButton from "@/components/SubmitButton";
+import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
+
+export default function Password() {
+  const [newPassword, setNewPassword1] = useState("");
+  const [newPassword2, setNewPassword2] = useState("");
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const { account, updateAccount } = useAccountStore();
+
+  const submit = async () => {
+    if (newPassword == "" || newPassword2 == "") {
+      return toast.error("Please fill all the fields.");
+    }
+
+    if (newPassword !== newPassword2)
+      return toast.error("Passwords do not match.");
+    else if (newPassword.length < 8)
+      return toast.error("Passwords must be at least 8 characters.");
+
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...account,
+      newPassword,
+    });
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Settings Applied!");
+      setNewPassword1("");
+      setNewPassword2("");
+    } else toast.error(response.data as string);
+
+    setSubmitLoader(false);
+  };
+
+  return (
+    <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Change Password</p>
+
+      <div className="divider my-3"></div>
+
+      <p className="mb-3">
+        To change your password, please fill out the following. Your password
+        should be at least 8 characters.
+      </p>
+      <div className="w-full flex flex-col gap-2 justify-between">
+        <p>New Password</p>
+
+        <TextInput
+          value={newPassword}
+          className="bg-base-200"
+          onChange={(e) => setNewPassword1(e.target.value)}
+          placeholder="••••••••••••••"
+          type="password"
+        />
+
+        <p>Confirm New Password</p>
+
+        <TextInput
+          value={newPassword2}
+          className="bg-base-200"
+          onChange={(e) => setNewPassword2(e.target.value)}
+          placeholder="••••••••••••••"
+          type="password"
+        />
+
+        <SubmitButton
+          onClick={submit}
+          loading={submitLoader}
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
+        />
+      </div>
+    </SettingsLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/settings/preference.tsx
+++ b/Securite/Linkwarden/pages/settings/preference.tsx
@ -0,0 +1,237 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import { useState, useEffect } from "react";
+import useAccountStore from "@/store/account";
+import { AccountSettings } from "@/types/global";
+import { toast } from "react-hot-toast";
+import React from "react";
+import useLocalSettingsStore from "@/store/localSettings";
+import Checkbox from "@/components/Checkbox";
+import SubmitButton from "@/components/SubmitButton";
+import { LinksRouteTo } from "@prisma/client";
+
+export default function Appearance() {
+  const { updateSettings } = useLocalSettingsStore();
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { account, updateAccount } = useAccountStore();
+  const [user, setUser] = useState<AccountSettings>(account);
+
+  const [preventDuplicateLinks, setPreventDuplicateLinks] =
+    useState<boolean>(false);
+  const [archiveAsScreenshot, setArchiveAsScreenshot] =
+    useState<boolean>(false);
+  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
+  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
+    useState<boolean>(false);
+  const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(
+    user.linksRouteTo
+  );
+
+  useEffect(() => {
+    setUser({
+      ...account,
+      archiveAsScreenshot,
+      archiveAsPDF,
+      archiveAsWaybackMachine,
+      linksRouteTo,
+      preventDuplicateLinks,
+    });
+  }, [
+    account,
+    archiveAsScreenshot,
+    archiveAsPDF,
+    archiveAsWaybackMachine,
+    linksRouteTo,
+    preventDuplicateLinks,
+  ]);
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) {
+      setArchiveAsScreenshot(account.archiveAsScreenshot);
+      setArchiveAsPDF(account.archiveAsPDF);
+      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
+      setLinksRouteTo(account.linksRouteTo);
+      setPreventDuplicateLinks(account.preventDuplicateLinks);
+    }
+  }, [account]);
+
+  const submit = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...user,
+    });
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Settings Applied!");
+    } else toast.error(response.data as string);
+    setSubmitLoader(false);
+  };
+
+  return (
+    <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Preference</p>
+
+      <div className="divider my-3"></div>
+
+      <div className="flex flex-col gap-5">
+        <div>
+          <p className="mb-3">Select Theme</p>
+          <div className="flex gap-3 w-full">
+            <div
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+                localStorage.getItem("theme") === "dark"
+                  ? "dark:outline-primary text-primary"
+                  : "text-white"
+              }`}
+              onClick={() => updateSettings({ theme: "dark" })}
+            >
+              <i className="bi-moon-fill text-6xl"></i>
+              <p className="ml-2 text-2xl">Dark</p>
+
+              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
+            </div>
+            <div
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+                localStorage.getItem("theme") === "light"
+                  ? "outline-primary text-primary"
+                  : "text-black"
+              }`}
+              onClick={() => updateSettings({ theme: "light" })}
+            >
+              <i className="bi-sun-fill text-6xl"></i>
+              <p className="ml-2 text-2xl">Light</p>
+              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p className="capitalize text-3xl font-thin inline">
+            Archive Settings
+          </p>
+
+          <div className="divider my-3"></div>
+
+          <p>Formats to Archive/Preserve webpages:</p>
+          <div className="p-3">
+            <Checkbox
+              label="Screenshot"
+              state={archiveAsScreenshot}
+              onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
+            />
+
+            <Checkbox
+              label="PDF"
+              state={archiveAsPDF}
+              onClick={() => setArchiveAsPDF(!archiveAsPDF)}
+            />
+
+            <Checkbox
+              label="Archive.org Snapshot"
+              state={archiveAsWaybackMachine}
+              onClick={() =>
+                setArchiveAsWaybackMachine(!archiveAsWaybackMachine)
+              }
+            />
+          </div>
+        </div>
+
+        <div>
+          <p className="capitalize text-3xl font-thin inline">Link Settings</p>
+
+          <div className="divider my-3"></div>
+          <div className="mb-3">
+            <Checkbox
+              label="Prevent duplicate links"
+              state={preventDuplicateLinks}
+              onClick={() => setPreventDuplicateLinks(!preventDuplicateLinks)}
+            />
+          </div>
+
+          <p>Clicking on Links should:</p>
+          <div className="p-3">
+            <label
+              className="label cursor-pointer flex gap-2 justify-start w-fit"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="Original"
+                checked={linksRouteTo === LinksRouteTo.ORIGINAL}
+                onChange={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
+              />
+              <span className="label-text">Open the original content</span>
+            </label>
+
+            <label
+              className="label cursor-pointer flex gap-2 justify-start w-fit"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="PDF"
+                checked={linksRouteTo === LinksRouteTo.PDF}
+                onChange={() => setLinksRouteTo(LinksRouteTo.PDF)}
+              />
+              <span className="label-text">Open PDF, if available</span>
+            </label>
+
+            <label
+              className="label cursor-pointer flex gap-2 justify-start w-fit"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="Readable"
+                checked={linksRouteTo === LinksRouteTo.READABLE}
+                onChange={() => setLinksRouteTo(LinksRouteTo.READABLE)}
+              />
+              <span className="label-text">Open Readable, if available</span>
+            </label>
+
+            <label
+              className="label cursor-pointer flex gap-2 justify-start w-fit"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="Screenshot"
+                checked={linksRouteTo === LinksRouteTo.SCREENSHOT}
+                onChange={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
+              />
+              <span className="label-text">Open Screenshot, if available</span>
+            </label>
+          </div>
+        </div>
+
+        <SubmitButton
+          onClick={submit}
+          loading={submitLoader}
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
+        />
+      </div>
+    </SettingsLayout>
+  );
+}
--- a/Securite/Linkwarden/pages/subscribe.tsx
+++ b/Securite/Linkwarden/pages/subscribe.tsx
@ -0,0 +1,116 @@
+import { signOut, useSession } from "next-auth/react";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+import { useRouter } from "next/router";
+import CenteredForm from "@/layouts/CenteredForm";
+import { Plan } from "@/types/global";
+import AccentSubmitButton from "@/components/AccentSubmitButton";
+
+export default function Subscribe() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const session = useSession();
+
+  const [plan, setPlan] = useState<Plan>(1);
+
+  const router = useRouter();
+
+  async function submit() {
+    setSubmitLoader(true);
+
+    const redirectionToast = toast.loading("Redirecting to Stripe...");
+
+    const res = await fetch("/api/v1/payment?plan=" + plan);
+    const data = await res.json();
+
+    router.push(data.response);
+  }
+
+  return (
+    <CenteredForm
+      text={`Start with a ${
+        process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
+      }-day free trial, cancel anytime!`}
+    >
+      <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
+        <p className="sm:text-3xl text-2xl text-center font-extralight">
+          Subscribe to Linkwarden!
+        </p>
+
+        <div className="divider my-0"></div>
+
+        <div>
+          <p>
+            You will be redirected to Stripe, feel free to reach out to us at{" "}
+            <a className="font-semibold" href="mailto:support@linkwarden.app">
+              support@linkwarden.app
+            </a>{" "}
+            in case of any issue.
+          </p>
+        </div>
+
+        <div className="flex gap-3 border border-solid border-neutral-content w-4/5 mx-auto p-1 rounded-xl relative">
+          <button
+            onClick={() => setPlan(Plan.monthly)}
+            className={`w-full duration-100 text-sm rounded-lg p-1 ${
+              plan === Plan.monthly
+                ? "text-white bg-sky-700 dark:bg-sky-700"
+                : "hover:opacity-80"
+            }`}
+          >
+            <p>Monthly</p>
+          </button>
+
+          <button
+            onClick={() => setPlan(Plan.yearly)}
+            className={`w-full duration-100 text-sm rounded-lg p-1 ${
+              plan === Plan.yearly
+                ? "text-white bg-sky-700 dark:bg-sky-700"
+                : "hover:opacity-80"
+            }`}
+          >
+            <p>Yearly</p>
+          </button>
+          <div className="absolute -top-3 -right-4 px-1 bg-red-500 text-sm text-white rounded-md rotate-[22deg]">
+            25% Off
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2 justify-center items-center">
+          <p className="text-3xl">
+            ${plan === Plan.monthly ? "4" : "3"}
+            <span className="text-base text-neutral">/mo</span>
+          </p>
+          <p className="font-semibold">
+            Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
+          </p>
+          <fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-neutral-content">
+            <legend className="w-fit font-extralight px-2 border border-neutral-content rounded-md text-xl">
+              Total
+            </legend>
+
+            <p className="text-sm">
+              {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then $
+              {plan === Plan.monthly ? "4 per month" : "36 annually"}
+            </p>
+            <p className="text-sm">+ VAT if applicable</p>
+          </fieldset>
+        </div>
+
+        <AccentSubmitButton
+          type="button"
+          label="Complete Subscription!"
+          className="w-full"
+          onClick={submit}
+          loading={submitLoader}
+        />
+
+        <div
+          onClick={() => signOut()}
+          className="w-fit mx-auto cursor-pointer text-neutral font-semibold "
+        >
+          Sign Out
+        </div>
+      </div>
+    </CenteredForm>
+  );
+}
--- a/Securite/Linkwarden/pages/tags/[id].tsx
+++ b/Securite/Linkwarden/pages/tags/[id].tsx
@ -0,0 +1,348 @@
+import useLinkStore from "@/store/links";
+import { useRouter } from "next/router";
+import { FormEvent, use, useEffect, useState } from "react";
+import MainLayout from "@/layouts/MainLayout";
+import useTagStore from "@/store/tags";
+import SortDropdown from "@/components/SortDropdown";
+import { Sort, TagIncludingLinkCount, ViewMode } from "@/types/global";
+import useLinks from "@/hooks/useLinks";
+import { toast } from "react-hot-toast";
+import ViewDropdown from "@/components/ViewDropdown";
+import CardView from "@/components/LinkViews/Layouts/CardView";
+// import GridView from "@/components/LinkViews/Layouts/GridView";
+import ListView from "@/components/LinkViews/Layouts/ListView";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+
+export default function Index() {
+  const router = useRouter();
+
+  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
+    useLinkStore();
+  const { tags, updateTag, removeTag } = useTagStore();
+
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+
+  const [renameTag, setRenameTag] = useState(false);
+  const [newTagName, setNewTagName] = useState<string>();
+
+  const [activeTag, setActiveTag] = useState<TagIncludingLinkCount>();
+
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
+
+  const collectivePermissions = useCollectivePermissions(
+    selectedLinks.map((link) => link.collectionId as number)
+  );
+
+  useLinks({ tagId: Number(router.query.id), sort: sortBy });
+
+  useEffect(() => {
+    const tag = tags.find((e) => e.id === Number(router.query.id));
+
+    if (tags.length > 0 && !tag?.id) {
+      router.push("/dashboard");
+      return;
+    }
+
+    setActiveTag(tag);
+  }, [router, tags, Number(router.query.id), setActiveTag]);
+
+  useEffect(() => {
+    setNewTagName(activeTag?.name);
+  }, [activeTag]);
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const cancelUpdateTag = async () => {
+    setNewTagName(activeTag?.name);
+    setRenameTag(false);
+  };
+
+  const submit = async (e?: FormEvent) => {
+    e?.preventDefault();
+
+    if (activeTag?.name === newTagName) return setRenameTag(false);
+    else if (newTagName === "") {
+      return cancelUpdateTag();
+    }
+
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    let response;
+
+    if (activeTag && newTagName)
+      response = await updateTag({
+        ...activeTag,
+        name: newTagName,
+      });
+
+    toast.dismiss(load);
+
+    if (response?.ok) {
+      toast.success("Tag Renamed!");
+    } else toast.error(response?.data as string);
+    setSubmitLoader(false);
+    setRenameTag(false);
+  };
+
+  const remove = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    let response;
+
+    if (activeTag?.id) response = await removeTag(activeTag?.id);
+
+    toast.dismiss(load);
+
+    if (response?.ok) {
+      toast.success("Tag Removed.");
+      router.push("/links");
+    } else toast.error(response?.data as string);
+    setSubmitLoader(false);
+    setRenameTag(false);
+  };
+
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Card
+  );
+
+  const linkView = {
+    [ViewMode.Card]: CardView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
+  return (
+    <MainLayout>
+      <div className="p-5 flex flex-col gap-5 w-full">
+        <div className="flex gap-3 items-center justify-between">
+          <div className="flex gap-3 items-center">
+            <div className="flex gap-2 items-center font-thin">
+              <i className={"bi-hash text-primary text-3xl"} />
+
+              {renameTag ? (
+                <>
+                  <form onSubmit={submit} className="flex items-center gap-2">
+                    <input
+                      type="text"
+                      autoFocus
+                      className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content"
+                      value={newTagName}
+                      onChange={(e) => setNewTagName(e.target.value)}
+                    />
+                    <div
+                      onClick={() => submit()}
+                      id="expand-dropdown"
+                      className="btn btn-ghost btn-square btn-sm"
+                    >
+                      <i className={"bi-check text-neutral text-2xl"}></i>
+                    </div>
+                    <div
+                      onClick={() => cancelUpdateTag()}
+                      id="expand-dropdown"
+                      className="btn btn-ghost btn-square btn-sm"
+                    >
+                      <i className={"bi-x text-neutral text-2xl"}></i>
+                    </div>
+                  </form>
+                </>
+              ) : (
+                <>
+                  <p className="sm:text-4xl text-3xl capitalize">
+                    {activeTag?.name}
+                  </p>
+                  <div className="relative">
+                    <div
+                      className={`dropdown dropdown-bottom font-normal ${
+                        activeTag?.name.length && activeTag?.name.length > 8
+                          ? "dropdown-end"
+                          : ""
+                      }`}
+                    >
+                      <div
+                        tabIndex={0}
+                        role="button"
+                        onMouseDown={dropdownTriggerer}
+                        className="btn btn-ghost btn-sm btn-square text-neutral"
+                      >
+                        <i
+                          className={"bi-three-dots text-neutral text-2xl"}
+                        ></i>
+                      </div>
+                      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-36 mt-1">
+                        <li>
+                          <div
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => {
+                              (document?.activeElement as HTMLElement)?.blur();
+                              setRenameTag(true);
+                            }}
+                          >
+                            Rename Tag
+                          </div>
+                        </li>
+                        <li>
+                          <div
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => {
+                              (document?.activeElement as HTMLElement)?.blur();
+                              remove();
+                            }}
+                          >
+                            Remove Tag
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className="flex gap-2 items-center mt-2">
+            <div
+              role="button"
+              onClick={() => {
+                setEditMode(!editMode);
+                setSelectedLinks([]);
+              }}
+              className={`btn btn-square btn-sm btn-ghost ${
+                editMode
+                  ? "bg-primary/20 hover:bg-primary/20"
+                  : "hover:bg-neutral/20"
+              }`}
+            >
+              <i className="bi-pencil-fill text-neutral text-xl"></i>
+            </div>
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
+        </div>
+        {editMode && links.length > 0 && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canUpdate
+                  )
+                }
+              >
+                Edit
+              </button>
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canDelete
+                  )
+                }
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+        <LinkComponent
+          editMode={editMode}
+          links={links.filter((e) =>
+            e.tags.some((e) => e.id === Number(router.query.id))
+          )}
+        />
+      </div>
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+          }}
+        />
+      )}
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal
+          onClose={() => {
+            setBulkEditLinksModal(false);
+          }}
+        />
+      )}
+    </MainLayout>
+  );
+}