Merge remote-tracking branch 'upstream/dev' into tags-in-public-collection

2024-10-30 12:10:30 +01:00
parent abb73f80bd 8738dd45e9
commit 24d45f8e8e
266 changed files with 18575 additions and 6564 deletions
@@ -5,11 +5,24 @@ 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 toast from "react-hot-toast";
+import { Toaster, ToastBar } from "react-hot-toast";
 import { Session } from "next-auth";
 import { isPWA } from "@/lib/client/utils";
+// import useInitialData from "@/hooks/useInitialData";
+import { appWithTranslation } from "next-i18next";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

-export default function App({
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 30,
+    },
+  },
+});
+
+function App({
  Component,
  pageProps,
 }: AppProps<{
@@ -25,45 +38,73 @@ export default function App({
  }, []);

  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>
+    <QueryClientProvider client={queryClient}>
+      <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>
+          {/* <GetData> */}
+          <Toaster
+            position="top-center"
+            reverseOrder={false}
+            toastOptions={{
+              className:
+                "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
+            }}
+          >
+            {(t) => (
+              <ToastBar toast={t}>
+                {({ icon, message }) => (
+                  <div
+                    className="flex flex-row"
+                    data-testid="toast-message-container"
+                    data-type={t.type}
+                  >
+                    {icon}
+                    <span data-testid="toast-message">{message}</span>
+                    {t.type !== "loading" && (
+                      <div
+                        data-testid="close-toast-button"
+                        onClick={() => toast.dismiss(t.id)}
+                      ></div>
+                    )}
+                  </div>
+                )}
+              </ToastBar>
+            )}
+          </Toaster>
+          <Component {...pageProps} />
+          {/* </GetData> */}
+        </AuthRedirect>
+      </SessionProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
  );
 }
+
+export default appWithTranslation(App);
@@ -0,0 +1,108 @@
+import NewUserModal from "@/components/ModalContent/NewUserModal";
+import { User as U } from "@prisma/client";
+import Link from "next/link";
+import { useState } from "react";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import UserListing from "@/components/UserListing";
+import { useUsers } from "@/hooks/store/admin/users";
+
+interface User extends U {
+  subscriptions: {
+    active: boolean;
+  };
+}
+
+type UserModal = {
+  isOpen: boolean;
+  userId: number | null;
+};
+
+export default function Admin() {
+  const { t } = useTranslation();
+
+  const { data: users = [] } = useUsers();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredUsers, setFilteredUsers] = useState<User[]>();
+
+  const [deleteUserModal, setDeleteUserModal] = useState<UserModal>({
+    isOpen: false,
+    userId: null,
+  });
+
+  const [newUserModal, setNewUserModal] = useState(false);
+
+  return (
+    <div className="max-w-6xl mx-auto p-5">
+      <div className="flex sm:flex-row flex-col justify-between gap-2">
+        <div className="gap-2 inline-flex items-center">
+          <Link
+            href="/dashboard"
+            className="text-neutral btn btn-square btn-sm btn-ghost"
+          >
+            <i className="bi-chevron-left text-xl"></i>
+          </Link>
+          <p className="capitalize text-3xl font-thin inline">
+            {t("user_administration")}
+          </p>
+        </div>
+
+        <div className="flex items-center relative justify-between gap-2">
+          <div>
+            <label
+              htmlFor="search-box"
+              className="inline-flex items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
+            >
+              <i className="bi-search"></i>
+            </label>
+
+            <input
+              id="search-box"
+              type="text"
+              placeholder={t("search_users")}
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+
+                if (users) {
+                  setFilteredUsers(
+                    users.filter((user: any) =>
+                      JSON.stringify(user)
+                        .toLowerCase()
+                        .includes(e.target.value.toLowerCase())
+                    )
+                  );
+                }
+              }}
+              className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-full max-w-[15rem] md:w-[15rem] md:max-w-full duration-200 outline-none"
+            />
+          </div>
+
+          <div
+            onClick={() => setNewUserModal(true)}
+            className="flex items-center btn btn-accent dark:border-violet-400 text-white btn-sm px-2 aspect-square relative"
+          >
+            <i className="bi-plus text-3xl absolute"></i>
+          </div>
+        </div>
+      </div>
+
+      <div className="divider my-3"></div>
+
+      {filteredUsers && filteredUsers.length > 0 && searchQuery !== "" ? (
+        UserListing(filteredUsers, deleteUserModal, setDeleteUserModal, t)
+      ) : searchQuery !== "" ? (
+        <p>{t("no_user_found_in_search")}</p>
+      ) : users && users.length > 0 ? (
+        UserListing(users, deleteUserModal, setDeleteUserModal, t)
+      ) : (
+        <p>{t("no_users_found")}</p>
+      )}
+
+      {newUserModal && <NewUserModal onClose={() => setNewUserModal(false)} />}
+    </div>
+  );
+}
+
+export { getServerSideProps };
@@ -9,6 +9,9 @@ import formidable from "formidable";
 import createFile from "@/lib/api/storage/createFile";
 import fs from "fs";
 import verifyToken from "@/lib/api/verifyToken";
+import generatePreview from "@/lib/api/generatePreview";
+import createFolder from "@/lib/api/storage/createFolder";
+import { UploadFileSchema } from "@/lib/shared/schemaValidation";

 export const config = {
  api: {
@@ -27,6 +30,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
  else if (format === ArchivedFormat.jpeg) suffix = ".jpeg";
  else if (format === ArchivedFormat.pdf) suffix = ".pdf";
  else if (format === ArchivedFormat.readability) suffix = "_readability.json";
+  else if (format === ArchivedFormat.monolith) suffix = ".html";

  //@ts-ignore
  if (!linkId || !suffix)
@@ -73,83 +77,237 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {

      return res.send(file);
    }
+  } else if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
+    const user = await verifyUser({ req, res });
+    if (!user) return;
+
+    const collectionPermissions = await getPermission({
+      userId: user.id,
+      linkId,
+    });
+
+    if (!collectionPermissions)
+      return res.status(400).json({
+        response: "Collection is not accessible.",
+      });
+
+    const memberHasAccess = collectionPermissions.members.some(
+      (e: UsersAndCollections) => e.userId === user.id && e.canCreate
+    );
+
+    if (!(collectionPermissions.ownerId === user.id || memberHasAccess))
+      return res.status(400).json({
+        response: "Collection is not accessible.",
+      });
+
+    const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER || 30000);
+
+    const numberOfLinksTheUserHas = await prisma.link.count({
+      where: {
+        collection: {
+          ownerId: user.id,
+        },
+      },
+    });
+
+    if (numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
+      return res.status(400).json({
+        response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      });
+
+    const NEXT_PUBLIC_MAX_FILE_BUFFER = Number(
+      process.env.NEXT_PUBLIC_MAX_FILE_BUFFER || 10
+    );
+
+    const form = formidable({
+      maxFields: 1,
+      maxFiles: 1,
+      maxFileSize: NEXT_PUBLIC_MAX_FILE_BUFFER * 1024 * 1024,
+    });
+
+    form.parse(req, async (err, fields, files) => {
+      const allowedMIMETypes = [
+        "application/pdf",
+        "image/png",
+        "image/jpg",
+        "image/jpeg",
+      ];
+
+      const dataValidation = UploadFileSchema.safeParse({
+        id: Number(req.query.linkId),
+        format: Number(req.query.format),
+        file: files.file,
+      });
+
+      if (!dataValidation.success) {
+        return res.status(400).json({
+          response: `Error: ${
+            dataValidation.error.issues[0].message
+          } [${dataValidation.error.issues[0].path.join(", ")}]`,
+        });
+      }
+
+      if (
+        err ||
+        !files.file ||
+        !files.file[0] ||
+        !allowedMIMETypes.includes(files.file[0].mimetype || "")
+      ) {
+        // Handle parsing error
+        return res.status(400).json({
+          response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${NEXT_PUBLIC_MAX_FILE_BUFFER}MB.`,
+        });
+      } else {
+        const fileBuffer = fs.readFileSync(files.file[0].filepath);
+
+        if (
+          Buffer.byteLength(fileBuffer) >
+          1024 * 1024 * Number(NEXT_PUBLIC_MAX_FILE_BUFFER)
+        )
+          return res.status(400).json({
+            response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${NEXT_PUBLIC_MAX_FILE_BUFFER}MB.`,
+          });
+
+        const linkStillExists = await prisma.link.findUnique({
+          where: { id: linkId },
+        });
+
+        const { mimetype } = files.file[0];
+        const isPDF = mimetype?.includes("pdf");
+        const isImage = mimetype?.includes("image");
+
+        if (linkStillExists && isImage) {
+          const collectionId = collectionPermissions.id;
+          createFolder({
+            filePath: `archives/preview/${collectionId}`,
+          });
+
+          generatePreview(fileBuffer, collectionId, linkId);
+        }
+
+        if (linkStillExists) {
+          await createFile({
+            filePath: `archives/${collectionPermissions.id}/${linkId + suffix}`,
+            data: fileBuffer,
+          });
+
+          await prisma.link.update({
+            where: { id: linkId },
+            data: {
+              preview: isPDF ? "unavailable" : undefined,
+              image: isImage
+                ? `archives/${collectionPermissions.id}/${linkId + suffix}`
+                : null,
+              pdf: isPDF
+                ? `archives/${collectionPermissions.id}/${linkId + suffix}`
+                : null,
+              lastPreserved: new Date().toISOString(),
+            },
+          });
+        }
+
+        fs.unlinkSync(files.file[0].filepath);
+      }
+
+      return res.status(200).json({
+        response: files,
+      });
+    });
  }
-  // else if (req.method === "POST") {
-  //   const user = await verifyUser({ req, res });
-  //   if (!user) return;
+  // To update the link preview
+  else if (req.method === "PUT") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });

-  //   const collectionPermissions = await getPermission({
-  //     userId: user.id,
-  //     linkId,
-  //   });
+    const user = await verifyUser({ req, res });
+    if (!user) return;

-  //   const memberHasAccess = collectionPermissions?.members.some(
-  //     (e: UsersAndCollections) => e.userId === user.id && e.canCreate
-  //   );
+    const collectionPermissions = await getPermission({
+      userId: user.id,
+      linkId,
+    });

-  //   if (!(collectionPermissions?.ownerId === user.id || memberHasAccess))
-  //     return { response: "Collection is not accessible.", status: 401 };
+    if (!collectionPermissions)
+      return res.status(400).json({
+        response: "Collection is not accessible.",
+      });

-  //   // await uploadHandler(linkId, )
+    const memberHasAccess = collectionPermissions.members.some(
+      (e: UsersAndCollections) => e.userId === user.id && e.canCreate
+    );

-  //   const MAX_UPLOAD_SIZE = Number(process.env.NEXT_PUBLIC_MAX_FILE_SIZE);
+    if (!(collectionPermissions.ownerId === user.id || memberHasAccess))
+      return res.status(400).json({
+        response: "Collection is not accessible.",
+      });

-  //   const form = formidable({
-  //     maxFields: 1,
-  //     maxFiles: 1,
-  //     maxFileSize: MAX_UPLOAD_SIZE || 30 * 1048576,
-  //   });
+    const NEXT_PUBLIC_MAX_FILE_BUFFER = Number(
+      process.env.NEXT_PUBLIC_MAX_FILE_BUFFER || 10
+    );

-  //   form.parse(req, async (err, fields, files) => {
-  //     const allowedMIMETypes = [
-  //       "application/pdf",
-  //       "image/png",
-  //       "image/jpg",
-  //       "image/jpeg",
-  //     ];
+    const form = formidable({
+      maxFields: 1,
+      maxFiles: 1,
+      maxFileSize: NEXT_PUBLIC_MAX_FILE_BUFFER * 1024 * 1024,
+    });

-  //     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);
+    form.parse(req, async (err, fields, files) => {
+      const allowedMIMETypes = ["image/png", "image/jpg", "image/jpeg"];

-  //       const linkStillExists = await prisma.link.findUnique({
-  //         where: { id: linkId },
-  //       });
+      if (
+        err ||
+        !files.file ||
+        !files.file[0] ||
+        !allowedMIMETypes.includes(files.file[0].mimetype || "")
+      ) {
+        // Handle parsing error
+        return res.status(400).json({
+          response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${NEXT_PUBLIC_MAX_FILE_BUFFER}MB.`,
+        });
+      } else {
+        const fileBuffer = fs.readFileSync(files.file[0].filepath);

-  //       if (linkStillExists) {
-  //         await createFile({
-  //           filePath: `archives/${collectionPermissions?.id}/${
-  //             linkId + suffix
-  //           }`,
-  //           data: fileBuffer,
-  //         });
+        if (
+          Buffer.byteLength(fileBuffer) >
+          1024 * 1024 * Number(NEXT_PUBLIC_MAX_FILE_BUFFER)
+        )
+          return res.status(400).json({
+            response: `Sorry, we couldn't process your file. Please ensure it's a PNG, or JPG format and doesn't exceed ${NEXT_PUBLIC_MAX_FILE_BUFFER}MB.`,
+          });

-  //         await prisma.link.update({
-  //           where: { id: linkId },
-  //           data: {
-  //             image: `archives/${collectionPermissions?.id}/${
-  //               linkId + suffix
-  //             }`,
-  //             lastPreserved: new Date().toISOString(),
-  //           },
-  //         });
-  //       }
+        const linkStillExists = await prisma.link.update({
+          where: { id: linkId },
+          data: {
+            updatedAt: new Date(),
+          },
+        });

-  //       fs.unlinkSync(files.file[0].filepath);
-  //     }
+        if (linkStillExists) {
+          const collectionId = collectionPermissions.id;
+          createFolder({
+            filePath: `archives/preview/${collectionId}`,
+          });

-  //     return res.status(200).json({
-  //       response: files,
-  //     });
-  //   });
-  // }
+          await generatePreview(fileBuffer, collectionId, linkId);
+        }
+
+        fs.unlinkSync(files.file[0].filepath);
+
+        if (linkStillExists)
+          return res.status(200).json({
+            response: linkStillExists,
+          });
+        else return res.status(400).json({ response: "Link not found." });
+      }
+    });
+  }
 }
@@ -1,28 +1,31 @@
 import { prisma } from "@/lib/api/db";
-import NextAuth from "next-auth/next";
-import CredentialsProvider from "next-auth/providers/credentials";
-import { AuthOptions } from "next-auth";
-import bcrypt from "bcrypt";
-import EmailProvider from "next-auth/providers/email";
-import { PrismaAdapter } from "@auth/prisma-adapter";
-import { Adapter } from "next-auth/adapters";
 import sendVerificationRequest from "@/lib/api/sendVerificationRequest";
-import { Provider } from "next-auth/providers";
 import verifySubscription from "@/lib/api/verifySubscription";
+import { PrismaAdapter } from "@auth/prisma-adapter";
+import bcrypt from "bcrypt";
+import { randomBytes } from "crypto";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { Adapter } from "next-auth/adapters";
+import NextAuth from "next-auth/next";
+import { Provider } from "next-auth/providers";
 import FortyTwoProvider from "next-auth/providers/42-school";
 import AppleProvider from "next-auth/providers/apple";
 import AtlassianProvider from "next-auth/providers/atlassian";
 import Auth0Provider from "next-auth/providers/auth0";
 import AuthentikProvider from "next-auth/providers/authentik";
+import AzureAdProvider from "next-auth/providers/azure-ad";
+import AzureAdB2CProvider from "next-auth/providers/azure-ad-b2c";
 import BattleNetProvider, {
  BattleNetIssuer,
 } from "next-auth/providers/battlenet";
 import BoxProvider from "next-auth/providers/box";
 import CognitoProvider from "next-auth/providers/cognito";
 import CoinbaseProvider from "next-auth/providers/coinbase";
+import CredentialsProvider from "next-auth/providers/credentials";
 import DiscordProvider from "next-auth/providers/discord";
 import DropboxProvider from "next-auth/providers/dropbox";
 import DuendeIDS6Provider from "next-auth/providers/duende-identity-server6";
+import EmailProvider from "next-auth/providers/email";
 import EVEOnlineProvider from "next-auth/providers/eveonline";
 import FacebookProvider from "next-auth/providers/facebook";
 import FaceItProvider from "next-auth/providers/faceit";
@@ -65,7 +68,6 @@ import ZitadelProvider from "next-auth/providers/zitadel";
 import ZohoProvider from "next-auth/providers/zoho";
 import ZoomProvider from "next-auth/providers/zoom";
 import * as process from "process";
-import type { NextApiRequest, NextApiResponse } from "next";

 const emailEnabled =
  process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
@@ -77,10 +79,7 @@ const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;

 const providers: Provider[] = [];

-if (
-  process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" ||
-  process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
-) {
+if (process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED !== "false") {
  // undefined is for backwards compatibility
  providers.push(
    CredentialsProvider({
@@ -106,22 +105,26 @@ if (
                    email: username?.toLowerCase(),
                  },
                ],
-                emailVerified: { not: null },
              }
            : {
                username: username.toLowerCase(),
              },
        });

+        if (!user) throw Error("Invalid credentials.");
+        else if (!user?.emailVerified && emailEnabled) {
+          throw Error("Email not verified.");
+        }
+
        let passwordMatches: boolean = false;

        if (user?.password) {
          passwordMatches = bcrypt.compareSync(password, user.password);
        }

-        if (passwordMatches) {
+        if (passwordMatches && user?.password) {
          return { id: user?.id };
-        } else return null as any;
+        } else throw Error("Invalid credentials.");
      },
    })
  );
@@ -133,8 +136,26 @@ if (emailEnabled) {
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM,
      maxAge: 1200,
-      sendVerificationRequest(params) {
-        sendVerificationRequest(params);
+      async sendVerificationRequest({ identifier, url, provider, token }) {
+        const recentVerificationRequestsCount =
+          await prisma.verificationToken.count({
+            where: {
+              identifier,
+              createdAt: {
+                gt: new Date(new Date().getTime() - 1000 * 60 * 5), // 5 minutes
+              },
+            },
+          });
+
+        if (recentVerificationRequestsCount >= 4)
+          throw Error("Too many requests. Please try again later.");
+
+        sendVerificationRequest({
+          identifier,
+          url,
+          from: provider.from as string,
+          token,
+        });
      },
    })
  );
@@ -240,6 +261,35 @@ if (process.env.NEXT_PUBLIC_AUTH0_ENABLED === "true") {
  };
 }

+// Authelia
+if (process.env.NEXT_PUBLIC_AUTHELIA_ENABLED === "true") {
+  providers.push({
+    id: "authelia",
+    name: "Authelia",
+    type: "oauth",
+    clientId: process.env.AUTHELIA_CLIENT_ID!,
+    clientSecret: process.env.AUTHELIA_CLIENT_SECRET!,
+    wellKnown: process.env.AUTHELIA_WELLKNOWN_URL!,
+    authorization: { params: { scope: "openid email profile" } },
+    idToken: true,
+    checks: ["pkce", "state"],
+    profile(profile) {
+      return {
+        id: profile.sub,
+        name: profile.name,
+        email: profile.email,
+        username: profile.preferred_username,
+      };
+    },
+  });
+
+  const _linkAccount = adapter.linkAccount;
+  adapter.linkAccount = (account) => {
+    const { "not-before-policy": _, refresh_expires_in, ...data } = account;
+    return _linkAccount ? _linkAccount(data) : undefined;
+  };
+}
+
 // Authentik
 if (process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true") {
  providers.push(
@@ -266,13 +316,65 @@ if (process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true") {
  };
 }

+// Azure AD B2C
+if (process.env.NEXT_PUBLIC_AZURE_AD_ENABLED === "true") {
+  providers.push(
+    AzureAdB2CProvider({
+      tenantId: process.env.AZURE_AD_B2C_TENANT_NAME,
+      clientId: process.env.AZURE_AD_B2C_CLIENT_ID!,
+      clientSecret: process.env.AZURE_AD_B2C_CLIENT_SECRET!,
+      primaryUserFlow: process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW,
+      authorization: { params: { scope: "offline_access openid" } },
+    })
+  );
+
+  const _linkAccount = adapter.linkAccount;
+  adapter.linkAccount = (account) => {
+    const {
+      "not-before-policy": _,
+      refresh_expires_in,
+      refresh_token_expires_in,
+      not_before,
+      id_token_expires_in,
+      profile_info,
+      ...data
+    } = account;
+    return _linkAccount ? _linkAccount(data) : undefined;
+  };
+}
+
+// Azure AD
+if (process.env.NEXT_PUBLIC_AZURE_AD_ENABLED === "true") {
+  providers.push(
+    AzureAdProvider({
+      clientId: process.env.AZURE_AD_CLIENT_ID!,
+      clientSecret: process.env.AZURE_AD_CLIENT_SECRET!,
+      tenantId: process.env.AZURE_AD_TENANT_ID,
+    })
+  );
+
+  const _linkAccount = adapter.linkAccount;
+  adapter.linkAccount = (account) => {
+    const {
+      "not-before-policy": _,
+      refresh_expires_in,
+      token_type,
+      expires_in,
+      ext_expires_in,
+      access_token,
+      ...data
+    } = account;
+    return _linkAccount ? _linkAccount(data) : undefined;
+  };
+}
+
 // Battle.net
 if (process.env.NEXT_PUBLIC_BATTLENET_ENABLED === "true") {
  providers.push(
    BattleNetProvider({
      clientId: process.env.BATTLENET_CLIENT_ID!,
      clientSecret: process.env.BATTLENET_CLIENT_SECRET!,
-      issuer: process.env.BATLLENET_ISSUER as BattleNetIssuer,
+      issuer: process.env.BATTLENET_ISSUER as BattleNetIssuer,
    })
  );

@@ -520,6 +622,9 @@ if (process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true") {
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+      httpOptions: {
+        timeout: 10000,
+      },
    })
  );

@@ -1081,10 +1186,42 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
              providerAccountId: account?.providerAccountId,
            },
          });
-          if (existingUser && newSsoUsersDisabled) {
+
+          if (!existingUser && newSsoUsersDisabled) {
            return false;
          }
+
+          // If user is already registered, link the provider
+          if (user.email && account) {
+            const findUser = await prisma.user.findFirst({
+              where: {
+                email: user.email,
+              },
+              include: {
+                accounts: true,
+              },
+            });
+
+            if (findUser && findUser.accounts.length === 0) {
+              await prisma.account.create({
+                data: {
+                  userId: findUser.id,
+                  type: account.type,
+                  provider: account.provider,
+                  providerAccountId: account.providerAccountId,
+                  id_token: account.id_token,
+                  access_token: account.access_token,
+                  refresh_token: account.refresh_token,
+                  expires_at: account.expires_at,
+                  token_type: account.token_type,
+                  scope: account.scope,
+                  session_state: account.session_state,
+                },
+              });
+            }
+          }
        }
+
        return true;
      },
      async jwt({ token, trigger, user }) {
@@ -1092,11 +1229,66 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
        if (trigger === "signIn" || trigger === "signUp")
          token.id = user?.id as number;

+        if (trigger === "signUp") {
+          const userExists = await prisma.user.findUnique({
+            where: {
+              id: token.id,
+            },
+            include: {
+              accounts: true,
+            },
+          });
+
+          // Verify SSO user email
+          if (userExists && userExists.accounts.length > 0) {
+            await prisma.user.update({
+              where: {
+                id: userExists.id,
+              },
+              data: {
+                emailVerified: new Date(),
+              },
+            });
+          }
+
+          if (userExists && !userExists.username) {
+            const autoGeneratedUsername =
+              "user" + Math.round(Math.random() * 1000000000);
+
+            await prisma.user.update({
+              where: {
+                id: token.id,
+              },
+              data: {
+                username: autoGeneratedUsername,
+              },
+            });
+          }
+        } else if (trigger === "signIn") {
+          const user = await prisma.user.findUnique({
+            where: {
+              id: token.id,
+            },
+          });
+
+          if (user && !user.username) {
+            const autoGeneratedUsername =
+              "user" + Math.round(Math.random() * 1000000000);
+
+            await prisma.user.update({
+              where: { id: user.id },
+              data: { username: autoGeneratedUsername },
+            });
+          }
+        }
+
        return token;
      },
      async session({ session, token }) {
        session.user.id = token.id;

+        console.log("session", session);
+
        if (STRIPE_SECRET_KEY) {
          const user = await prisma.user.findUnique({
            where: {
@@ -1108,6 +1300,7 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
          });

          if (user) {
+            //
            const subscribedUser = await verifySubscription(user);
          }
        }
@@ -0,0 +1,63 @@
+import { prisma } from "@/lib/api/db";
+import sendPasswordResetRequest from "@/lib/api/sendPasswordResetRequest";
+import { ForgotPasswordSchema } from "@/lib/shared/schemaValidation";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function forgotPassword(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
+    const dataValidation = ForgotPasswordSchema.safeParse(req.body);
+
+    if (!dataValidation.success) {
+      return res.status(400).json({
+        response: `Error: ${
+          dataValidation.error.issues[0].message
+        } [${dataValidation.error.issues[0].path.join(", ")}]`,
+      });
+    }
+
+    const { email } = dataValidation.data;
+
+    const recentPasswordRequestsCount = await prisma.passwordResetToken.count({
+      where: {
+        identifier: email,
+        createdAt: {
+          gt: new Date(new Date().getTime() - 1000 * 60 * 5), // 5 minutes
+        },
+      },
+    });
+
+    // Rate limit password reset requests
+    if (recentPasswordRequestsCount >= 3) {
+      return res.status(400).json({
+        response: "Too many requests. Please try again later.",
+      });
+    }
+
+    const user = await prisma.user.findFirst({
+      where: {
+        email,
+      },
+    });
+
+    if (!user || !user.email) {
+      return res.status(400).json({
+        response: "No user found with that email.",
+      });
+    }
+
+    sendPasswordResetRequest(user.email, user.name);
+
+    return res.status(200).json({
+      response: "Password reset email sent.",
+    });
+  }
+}
@@ -0,0 +1,84 @@
+import { prisma } from "@/lib/api/db";
+import type { NextApiRequest, NextApiResponse } from "next";
+import bcrypt from "bcrypt";
+import { ResetPasswordSchema } from "@/lib/shared/schemaValidation";
+
+export default async function resetPassword(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
+    const dataValidation = ResetPasswordSchema.safeParse(req.body);
+
+    if (!dataValidation.success) {
+      return res.status(400).json({
+        response: `Error: ${
+          dataValidation.error.issues[0].message
+        } [${dataValidation.error.issues[0].path.join(", ")}]`,
+      });
+    }
+
+    const { token, password } = dataValidation.data;
+
+    // Hashed password
+    const saltRounds = 10;
+    const hashedPassword = await bcrypt.hash(password, saltRounds);
+
+    // Check token in db
+    const verifyToken = await prisma.passwordResetToken.findFirst({
+      where: {
+        token,
+        expires: {
+          gt: new Date(),
+        },
+      },
+    });
+
+    if (!verifyToken) {
+      return res.status(400).json({
+        response: "Invalid token.",
+      });
+    }
+
+    const email = verifyToken.identifier;
+
+    // Update password
+    await prisma.user.update({
+      where: {
+        email,
+      },
+      data: {
+        password: hashedPassword,
+      },
+    });
+
+    await prisma.passwordResetToken.update({
+      where: {
+        token,
+      },
+      data: {
+        expires: new Date(),
+      },
+    });
+
+    // Delete tokens older than 5 minutes
+    await prisma.passwordResetToken.deleteMany({
+      where: {
+        identifier: email,
+        createdAt: {
+          lt: new Date(new Date().getTime() - 1000 * 60 * 5), // 5 minutes
+        },
+      },
+    });
+
+    return res.status(200).json({
+      response: "Password has been reset successfully.",
+    });
+  }
+}
@@ -0,0 +1,125 @@
+import { prisma } from "@/lib/api/db";
+import updateCustomerEmail from "@/lib/api/updateCustomerEmail";
+import { VerifyEmailSchema } from "@/lib/shared/schemaValidation";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function verifyEmail(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
+    const dataValidation = VerifyEmailSchema.safeParse(req.query);
+
+    if (!dataValidation.success) {
+      return res.status(400).json({
+        response: `Error: ${
+          dataValidation.error.issues[0].message
+        } [${dataValidation.error.issues[0].path.join(", ")}]`,
+      });
+    }
+
+    const { token } = dataValidation.data;
+
+    // Check token in db
+    const verifyToken = await prisma.verificationToken.findFirst({
+      where: {
+        token,
+        expires: {
+          gt: new Date(),
+        },
+      },
+    });
+
+    const oldEmail = verifyToken?.identifier;
+
+    if (!oldEmail) {
+      return res.status(400).json({
+        response: "Invalid token.",
+      });
+    }
+
+    // Ensure email isn't in use
+    const findNewEmail = await prisma.user.findFirst({
+      where: {
+        email: oldEmail,
+      },
+      select: {
+        unverifiedNewEmail: true,
+      },
+    });
+
+    const newEmail = findNewEmail?.unverifiedNewEmail;
+
+    if (!newEmail) {
+      return res.status(400).json({
+        response: "No unverified emails found.",
+      });
+    }
+
+    const emailInUse = await prisma.user.findFirst({
+      where: {
+        email: newEmail,
+      },
+      select: {
+        email: true,
+      },
+    });
+
+    console.log(emailInUse);
+
+    if (emailInUse) {
+      return res.status(400).json({
+        response: "Email is already in use.",
+      });
+    }
+
+    // Remove SSO provider
+    await prisma.account.deleteMany({
+      where: {
+        user: {
+          email: oldEmail,
+        },
+      },
+    });
+
+    // Update email in db
+    await prisma.user.update({
+      where: {
+        email: oldEmail,
+      },
+      data: {
+        email: newEmail.toLowerCase().trim(),
+        unverifiedNewEmail: null,
+      },
+    });
+
+    // Apply to Stripe
+    const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
+    if (STRIPE_SECRET_KEY)
+      await updateCustomerEmail(STRIPE_SECRET_KEY, oldEmail, newEmail);
+
+    // Clean up existing tokens
+    await prisma.verificationToken.delete({
+      where: {
+        token,
+      },
+    });
+
+    await prisma.verificationToken.deleteMany({
+      where: {
+        identifier: oldEmail,
+      },
+    });
+
+    return res.status(200).json({
+      response: token,
+    });
+  }
+}
@@ -19,9 +19,21 @@ export default async function collections(
      .status(collections.status)
      .json({ response: collections.response });
  } else if (req.method === "PUT") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const updated = await updateCollectionById(user.id, collectionId, req.body);
    return res.status(updated.status).json({ response: updated.response });
  } else if (req.method === "DELETE") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const deleted = await deleteCollectionById(user.id, collectionId);
    return res.status(deleted.status).json({ response: deleted.response });
  }
@@ -16,6 +16,12 @@ export default async function collections(
      .status(collections.status)
      .json({ response: collections.response });
  } else if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const newCollection = await postCollection(req.body, user.id);
    return res
      .status(newCollection.status)
@@ -3,7 +3,10 @@ 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) {
+export default async function dashboard(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
  const user = await verifyUser({ req, res });
  if (!user) return;

@@ -2,8 +2,10 @@ 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";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { UsersAndCollections } from "@prisma/client";
+import getPermission from "@/lib/api/getPermission";
+import { moveFiles, removeFiles } from "@/lib/api/manageLinkFiles";

 const RE_ARCHIVE_LIMIT = Number(process.env.RE_ARCHIVE_LIMIT) || 5;

@@ -23,12 +25,27 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
      response: "Link not found.",
    });

-  if (link.collection.ownerId !== user.id)
+  const collectionIsAccessible = await getPermission({
+    userId: user.id,
+    collectionId: link.collectionId,
+  });
+
+  const memberHasAccess = collectionIsAccessible?.members.some(
+    (e: UsersAndCollections) => e.userId === user.id && e.canUpdate
+  );
+
+  if (!(collectionIsAccessible?.ownerId === user.id || memberHasAccess))
    return res.status(401).json({
      response: "Permission denied.",
    });

  if (req.method === "PUT") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    if (
      link?.lastPreserved &&
      getTimezoneDifferenceInMinutes(new Date(), link?.lastPreserved) <
@@ -48,7 +65,20 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
        response: "Invalid URL.",
      });

-    await deleteArchivedFiles(link);
+    await prisma.link.update({
+      where: {
+        id: link.id,
+      },
+      data: {
+        image: null,
+        pdf: null,
+        readable: null,
+        monolith: null,
+        preview: null,
+      },
+    });
+
+    await removeFiles(link.id, link.collection.id);

    return res.status(200).json({
      response: "Link is being archived.",
@@ -66,30 +96,3 @@ const getTimezoneDifferenceInMinutes = (future: Date, past: Date) => {

  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`,
-  });
-};
@@ -14,6 +14,12 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
      response: updated.response,
    });
  } else if (req.method === "PUT") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const updated = await updateLinkById(
      user.id,
      Number(req.query.id),
@@ -23,6 +29,12 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
      response: updated.response,
    });
  } else if (req.method === "DELETE") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const deleted = await deleteLinkById(user.id, Number(req.query.id));
    return res.status(deleted.status).json({
      response: deleted.response,
@@ -37,21 +37,40 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
    const links = await getLinks(user.id, convertedData);
    return res.status(links.status).json({ response: links.response });
  } else if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const newlink = await postLink(req.body, user.id);
    return res.status(newlink.status).json({
      response: newlink.response,
    });
  } else if (req.method === "PUT") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    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") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const deleted = await deleteLinksById(user.id, req.body.linkIds);
    return res.status(deleted.status).json({
      response: deleted.response,
@@ -55,6 +55,20 @@ export function getLogins() {
      name: process.env.AUTHENTIK_CUSTOM_NAME ?? "Authentik",
    });
  }
+  // Azure AD B2C
+  if (process.env.NEXT_PUBLIC_AZURE_AD_B2C_ENABLED === "true") {
+    buttonAuths.push({
+      method: "azure-ad-b2c",
+      name: process.env.AZURE_AD_B2C_CUSTOM_NAME ?? "Azure AD B2C",
+    });
+  }
+  // Azure AD
+  if (process.env.NEXT_PUBLIC_AZURE_AD_ENABLED === "true") {
+    buttonAuths.push({
+      method: "azure-ad",
+      name: process.env.AZURE_AD_CUSTOM_NAME ?? "Azure AD",
+    });
+  }
  // Battle.net
  if (process.env.NEXT_PUBLIC_BATTLENET_ENABLED === "true") {
    buttonAuths.push({
@@ -391,10 +405,16 @@ export function getLogins() {
      name: process.env.ZOOM_CUSTOM_NAME ?? "Zoom",
    });
  }
+  // Authelia
+  if (process.env.NEXT_PUBLIC_AUTHELIA_ENABLED === "true") {
+    buttonAuths.push({
+      method: "authelia",
+      name: process.env.AUTHELIA_CUSTOM_NAME ?? "Authelia",
+    });
+  }
  return {
    credentialsEnabled:
-      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" ||
-      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
+      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED !== "false"
        ? "true"
        : "false",
    emailEnabled:
@@ -4,11 +4,14 @@ import importFromHTMLFile from "@/lib/api/controllers/migration/importFromHTMLFi
 import importFromLinkwarden from "@/lib/api/controllers/migration/importFromLinkwarden";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import verifyUser from "@/lib/api/verifyUser";
+import importFromWallabag from "@/lib/api/controllers/migration/importFromWallabag";

 export const config = {
  api: {
    bodyParser: {
-      sizeLimit: "10mb",
+      sizeLimit: process.env.IMPORT_LIMIT
+        ? process.env.IMPORT_LIMIT + "mb"
+        : "10mb",
    },
  },
 };
@@ -27,14 +30,21 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
        .status(data.status)
        .json(data.response);
  } else if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    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)
+    else if (request.format === MigrationFormat.linkwarden)
      data = await importFromLinkwarden(user.id, request.data);
+    else if (request.format === MigrationFormat.wallabag)
+      data = await importFromWallabag(user.id, request.data);

    if (data) return res.status(data.status).json({ response: data.response });
  }
@@ -0,0 +1,34 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import verifyByCredentials from "@/lib/api/verifyByCredentials";
+import createSession from "@/lib/api/controllers/session/createSession";
+import { PostSessionSchema } from "@/lib/shared/schemaValidation";
+
+export default async function session(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const dataValidation = PostSessionSchema.safeParse(req.body);
+
+  if (!dataValidation.success) {
+    return res.status(400).json({
+      response: `Error: ${
+        dataValidation.error.issues[0].message
+      } [${dataValidation.error.issues[0].path.join(", ")}]`,
+    });
+  }
+
+  const { username, password, sessionName } = dataValidation.data;
+
+  const user = await verifyByCredentials({ username, password });
+
+  if (!user)
+    return res.status(400).json({
+      response:
+        "Invalid credentials. You might need to reset your password if you're sure you already signed up with the current username/email.",
+    });
+
+  if (req.method === "POST") {
+    const token = await createSession(user.id, sessionName);
+    return res.status(token.status).json({ response: token.response });
+  }
+}
@@ -9,10 +9,27 @@ export default async function tags(req: NextApiRequest, res: NextApiResponse) {

  const tagId = Number(req.query.id);

+  if (!tagId)
+    return res.status(400).json({
+      response: "Please choose a valid name for the tag.",
+    });
+
  if (req.method === "PUT") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const tags = await updeteTagById(user.id, tagId, req.body);
    return res.status(tags.status).json({ response: tags.response });
  } else if (req.method === "DELETE") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const tags = await deleteTagById(user.id, tagId);
    return res.status(tags.status).json({ response: tags.response });
  }
@@ -7,6 +7,12 @@ export default async function token(req: NextApiRequest, res: NextApiResponse) {
  if (!user) return;

  if (req.method === "DELETE") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const deleted = await deleteToken(user.id, Number(req.query.id) as number);
    return res.status(deleted.status).json({ response: deleted.response });
  }
@@ -11,7 +11,13 @@ export default async function tokens(
  if (!user) return;

  if (req.method === "POST") {
-    const token = await postToken(JSON.parse(req.body), user.id);
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
+    const token = await postToken(req.body, user.id);
    return res.status(token.status).json({ response: token.response });
  } else if (req.method === "GET") {
    const token = await getTokens(user.id);
@@ -16,9 +16,17 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
    return null;
  }

-  const userId = token?.id;
+  const user = await prisma.user.findUnique({
+    where: {
+      id: token?.id,
+    },
+  });

-  if (userId !== Number(req.query.id))
+  const isServerAdmin = user?.id === Number(process.env.NEXT_PUBLIC_ADMIN || 1);
+
+  const userId = isServerAdmin ? Number(req.query.id) : token.id;
+
+  if (userId !== Number(req.query.id) && !isServerAdmin)
    return res.status(401).json({ response: "Permission denied." });

  if (req.method === "GET") {
@@ -50,10 +58,22 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
  }

  if (req.method === "PUT") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    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);
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
+    const updated = await deleteUserById(userId, req.body, isServerAdmin);
    return res.status(updated.status).json({ response: updated.response });
  }
 }
@@ -1,9 +1,25 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import postUser from "@/lib/api/controllers/users/postUser";
+import getUsers from "@/lib/api/controllers/users/getUsers";
+import verifyUser from "@/lib/api/verifyUser";

 export default async function users(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
    const response = await postUser(req, res);
-    return response;
+    return res.status(response.status).json({ response: response.response });
+  } else if (req.method === "GET") {
+    const user = await verifyUser({ req, res });
+
+    if (!user || user.id !== Number(process.env.NEXT_PUBLIC_ADMIN || 1))
+      return res.status(401).json({ response: "Unauthorized..." });
+
+    const response = await getUsers();
+    return res.status(response.status).json({ response: response.response });
  }
 }
@@ -0,0 +1,28 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { LinkRequestQuery } from "@/types/global";
+import getDashboardDataV2 from "@/lib/api/controllers/dashboard/getDashboardDataV2";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function dashboard(
+  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 data = await getDashboardDataV2(user.id, convertedData);
+    return res.status(data.status).json({
+      data: {
+        links: data.data.links,
+        numberOfPinnedLinks: data.data.numberOfPinnedLinks,
+      },
+      message: data.message,
+    });
+  }
+}
@@ -0,0 +1,119 @@
+import Button from "@/components/ui/Button";
+import TextInput from "@/components/TextInput";
+import CenteredForm from "@/layouts/CenteredForm";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { FormEvent, useState } from "react";
+import { toast } from "react-hot-toast";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
+
+interface FormData {
+  password: string;
+  token: string;
+}
+
+export default function ResetPassword() {
+  const { t } = useTranslation();
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const router = useRouter();
+
+  const [form, setForm] = useState<FormData>({
+    password: "",
+    token: router.query.token as string,
+  });
+
+  const [requestSent, setRequestSent] = useState(false);
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (
+      form.password !== "" &&
+      form.token !== "" &&
+      !requestSent &&
+      !submitLoader
+    ) {
+      setSubmitLoader(true);
+
+      const load = toast.loading(t("sending_password_recovery_link"));
+
+      const response = await fetch("/api/v1/auth/reset-password", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(form),
+      });
+
+      const data = await response.json();
+
+      toast.dismiss(load);
+      if (response.ok) {
+        toast.success(data.response);
+        setRequestSent(true);
+      } else {
+        toast.error(data.response);
+      }
+
+      setSubmitLoader(false);
+    } else {
+      toast.error(t("please_fill_all_fields"));
+    }
+  }
+
+  return (
+    <CenteredForm>
+      <form onSubmit={submit}>
+        <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">
+            {requestSent ? t("password_updated") : t("reset_password")}
+          </p>
+
+          <div className="divider my-0"></div>
+
+          {!requestSent ? (
+            <>
+              <p>{t("enter_email_for_new_password")}</p>
+              <div>
+                <p className="text-sm w-fit font-semibold mb-1">
+                  {t("new_password")}
+                </p>
+                <TextInput
+                  autoFocus
+                  type="password"
+                  placeholder="••••••••••••••"
+                  value={form.password}
+                  className="bg-base-100"
+                  onChange={(e) =>
+                    setForm({ ...form, password: e.target.value })
+                  }
+                />
+              </div>
+              <Button
+                type="submit"
+                intent="accent"
+                className="mt-2"
+                size="full"
+                loading={submitLoader}
+              >
+                {t("update_password")}
+              </Button>
+            </>
+          ) : (
+            <>
+              <p>{t("password_successfully_updated")}</p>
+              <div className="mx-auto w-fit mt-3">
+                <Link className="font-semibold" href="/login">
+                  {t("back_to_login")}
+                </Link>
+              </div>
+            </>
+          )}
+        </div>
+      </form>
+    </CenteredForm>
+  );
+}
+
+export { getServerSideProps };
@@ -0,0 +1,42 @@
+import { signOut } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import toast from "react-hot-toast";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
+
+const VerifyEmail = () => {
+  const router = useRouter();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const token = router.query.token;
+
+    if (!token || typeof token !== "string") {
+      router.push("/login");
+    }
+
+    // Verify token
+
+    fetch(`/api/v1/auth/verify-email?token=${token}`, {
+      method: "POST",
+    }).then((res) => {
+      if (res.ok) {
+        toast.success(t("email_verified_signing_out"));
+        setTimeout(() => {
+          signOut();
+        }, 3000);
+      } else {
+        toast.error(t("invalid_token"));
+      }
+    });
+
+    console.log(token);
+  }, []);
+
+  return <></>;
+};
+
+export default VerifyEmail;
+
+export { getServerSideProps };
@@ -1,93 +0,0 @@
-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>
-  );
-}
@@ -1,6 +1,5 @@
-import useCollectionStore from "@/store/collections";
-import useLinkStore from "@/store/links";
 import {
+  AccountSettings,
  CollectionIncludingMembersAndLinkCount,
  Sort,
  ViewMode,
@@ -9,84 +8,80 @@ 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";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
+import LinkListOptions from "@/components/LinkListOptions";
+import { useCollections } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/user";
+import { useLinks } from "@/hooks/store/links";
+import Links from "@/components/LinkViews/Links";
+import Icon from "@/components/Icon";
+import { IconWeight } from "@phosphor-icons/react";

 export default function Index() {
+  const { t } = useTranslation();
  const { settings } = useLocalSettingsStore();

  const router = useRouter();

-  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
-    useLinkStore();
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();

-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
+
+  const { links, data } = useLinks({
+    sort: sortBy,
+    collectionId: Number(router.query.id),
+  });

  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 { data: user = {} } = useUser();

-  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 [collectionOwner, setCollectionOwner] = useState<
+    Partial<AccountSettings>
+  >({});

  useEffect(() => {
    const fetchOwner = async () => {
-      if (activeCollection && activeCollection.ownerId !== account.id) {
+      if (activeCollection && activeCollection.ownerId !== user.id) {
        const owner = await getPublicUserData(
          activeCollection.ownerId as number
        );
        setCollectionOwner(owner);
-      } else if (activeCollection && activeCollection.ownerId === account.id) {
+      } else if (activeCollection && activeCollection.ownerId === user.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,
+          id: user.id as number,
+          name: user.name,
+          username: user.username as string,
+          image: user.image as string,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
        });
      }
    };

    fetchOwner();
-
-    // When the collection changes, reset the selected links
-    setSelectedLinks([]);
  }, [activeCollection]);

  const [editCollectionModal, setEditCollectionModal] = useState(false);
@@ -94,56 +89,16 @@ export default function Index() {
  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 [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as 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
@@ -157,12 +112,23 @@ export default function Index() {
        {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>
+              {activeCollection.icon ? (
+                <Icon
+                  icon={activeCollection.icon}
+                  size={45}
+                  weight={
+                    (activeCollection.iconWeight || "regular") as IconWeight
+                  }
+                  color={activeCollection.color}
+                />
+              ) : (
+                <i
+                  className="bi-folder-fill text-3xl"
+                  style={{ color: activeCollection.color }}
+                ></i>
+              )}

-              <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
+              <p className="sm:text-3xl text-2xl capitalize w-full py-1 break-words hyphens-auto font-thin">
                {activeCollection?.name}
              </p>
            </div>
@@ -176,7 +142,7 @@ export default function Index() {
              >
                <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">
+              <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
                {permissions === true && (
                  <li>
                    <div
@@ -186,8 +152,9 @@ export default function Index() {
                        (document?.activeElement as HTMLElement)?.blur();
                        setEditCollectionModal(true);
                      }}
+                      className="whitespace-nowrap"
                    >
-                      Edit Collection Info
+                      {t("edit_collection_info")}
                    </div>
                  </li>
                )}
@@ -199,10 +166,11 @@ export default function Index() {
                      (document?.activeElement as HTMLElement)?.blur();
                      setEditCollectionSharingModal(true);
                    }}
+                    className="whitespace-nowrap"
                  >
                    {permissions === true
-                      ? "Share and Collaborate"
-                      : "View Team"}
+                      ? t("share_and_collaborate")
+                      : t("view_team")}
                  </div>
                </li>
                {permissions === true && (
@@ -214,8 +182,9 @@ export default function Index() {
                        (document?.activeElement as HTMLElement)?.blur();
                        setNewCollectionModal(true);
                      }}
+                      className="whitespace-nowrap"
                    >
-                      Create Sub-Collection
+                      {t("create_subcollection")}
                    </div>
                  </li>
                )}
@@ -227,10 +196,11 @@ export default function Index() {
                      (document?.activeElement as HTMLElement)?.blur();
                      setDeleteCollectionModal(true);
                    }}
+                    className="whitespace-nowrap"
                  >
                    {permissions === true
-                      ? "Delete Collection"
-                      : "Leave Collection"}
+                      ? t("delete_collection")
+                      : t("leave_collection")}
                  </div>
                </li>
              </ul>
@@ -245,14 +215,14 @@ export default function Index() {
                className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
                onClick={() => setEditCollectionSharingModal(true)}
              >
-                {collectionOwner.id ? (
+                {collectionOwner.id && (
                  <ProfilePhoto
                    src={collectionOwner.image || undefined}
                    name={collectionOwner.name}
                  />
-                ) : undefined}
+                )}
                {activeCollection.members
-                  .sort((a, b) => (a.userId as number) - (b.userId as number))
+                  .sort((a, b) => a.userId - b.userId)
                  .map((e, i) => {
                    return (
                      <ProfilePhoto
@@ -264,19 +234,31 @@ export default function Index() {
                    );
                  })
                  .slice(0, 3)}
-                {activeCollection.members.length - 3 > 0 ? (
+                {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}
+
+              <p className="text-neutral text-sm">
                {activeCollection.members.length > 0 &&
-                  ` and ${activeCollection.members.length} others`}
-                .
+                activeCollection.members.length === 1
+                  ? t("by_author_and_other", {
+                      author: collectionOwner.name,
+                      count: activeCollection.members.length,
+                    })
+                  : activeCollection.members.length > 0 &&
+                      activeCollection.members.length !== 1
+                    ? t("by_author_and_others", {
+                        author: collectionOwner.name,
+                        count: activeCollection.members.length,
+                      })
+                    : t("by_author", {
+                        author: collectionOwner.name,
+                      })}
              </p>
            </div>
          </div>
@@ -313,95 +295,46 @@ export default function Index() {

        <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>
+        <LinkListOptions
+          t={t}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+          editMode={
+            permissions === true ||
+            permissions?.canUpdate ||
+            permissions?.canDelete
+              ? editMode
+              : undefined
+          }
+          setEditMode={
+            permissions === true ||
+            permissions?.canUpdate ||
+            permissions?.canDelete
+              ? setEditMode
+              : undefined
+          }
+        >
+          <p>
+            {activeCollection?._count?.links === 1
+              ? t("showing_count_result", {
+                  count: activeCollection?._count?.links,
+                })
+              : t("showing_count_results", {
+                  count: activeCollection?._count?.links,
+                })}
+          </p>
+        </LinkListOptions>

-        {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 />
-        )}
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
+        {!data.isLoading && links && !links[0] && <NoLinksFound />}
      </div>
      {activeCollection && (
        <>
@@ -429,22 +362,10 @@ export default function Index() {
              activeCollection={activeCollection}
            />
          )}
-          {bulkDeleteLinksModal && (
-            <BulkDeleteLinksModal
-              onClose={() => {
-                setBulkDeleteLinksModal(false);
-              }}
-            />
-          )}
-          {bulkEditLinksModal && (
-            <BulkEditLinksModal
-              onClose={() => {
-                setBulkEditLinksModal(false);
-              }}
-            />
-          )}
        </>
      )}
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,4 +1,3 @@
-import useCollectionStore from "@/store/collections";
 import CollectionCard from "@/components/CollectionCard";
 import { useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
@@ -8,10 +7,17 @@ import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 import PageHeader from "@/components/PageHeader";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { dropdownTriggerer } from "@/lib/client/utils";

 export default function Collections() {
-  const { collections } = useCollectionStore();
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const { t } = useTranslation();
+  const { data: collections = [] } = useCollections();
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
  const [sortedCollections, setSortedCollections] = useState(collections);

  const { data } = useSession();
@@ -24,15 +30,40 @@ export default function Collections() {
    <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 items-center gap-3">
+            <PageHeader
+              icon={"bi-folder"}
+              title={t("collections")}
+              description={t("collections_you_own")}
+            />
+            <div className="relative">
+              <div className={"dropdown dropdown-bottom font-normal"}>
+                <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 mt-1">
+                  <li>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => setNewCollectionModal(true)}
+                      className="whitespace-nowrap"
+                    >
+                      {t("new_collection")}
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
          <div className="flex gap-3 justify-end">
            <div className="relative mt-2">
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />
            </div>
          </div>
        </div>
@@ -48,17 +79,19 @@ export default function Collections() {
            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>
+            <p className="group-hover:opacity-0 duration-100">
+              {t("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] ? (
+        {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] && (
          <>
            <PageHeader
              icon={"bi-folder"}
-              title={"Other Collections"}
-              description={"Shared collections you're a member of"}
+              title={t("other_collections")}
+              description={t("other_collections_desc")}
            />

            <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -69,11 +102,13 @@ export default function Collections() {
                })}
            </div>
          </>
-        ) : undefined}
+        )}
      </div>
-      {newCollectionModal ? (
+      {newCollectionModal && (
        <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
-      ) : undefined}
+      )}
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,27 +1,64 @@
 import CenteredForm from "@/layouts/CenteredForm";
-import Link from "next/link";
-import React from "react";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";

 export default function EmailConfirmaion() {
+  const router = useRouter();
+
+  const { t } = useTranslation();
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const resend = async () => {
+    if (submitLoader) return;
+    else if (!router.query.email) return;
+
+    setSubmitLoader(true);
+
+    const load = toast.loading(t("authenticating"));
+
+    const res = await signIn("email", {
+      email: decodeURIComponent(router.query.email as string),
+      callbackUrl: "/",
+      redirect: false,
+    });
+
+    toast.dismiss(load);
+
+    setSubmitLoader(false);
+
+    toast.success(t("verification_email_sent"));
+  };
+
  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
+          {t("check_your_email")}
        </p>

        <div className="divider my-3"></div>

-        <p>A sign in link has been sent to your email address.</p>
+        {router.query.email && typeof router.query.email === "string" && (
+          <p className="text-center font-bold mb-3 break-all">
+            {decodeURIComponent(router.query.email)}
+          </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>
+        <p>{t("verification_email_sent_desc")}</p>
+
+        <div className="mx-auto w-fit mt-3">
+          <div className="btn btn-ghost btn-sm" onClick={resend}>
+            {t("resend_email")}
+          </div>
+        </div>
      </div>
    </CenteredForm>
  );
 }
+
+export { getServerSideProps };
@@ -1,33 +1,34 @@
-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 { useEffect, useMemo, useState } from "react";
 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";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useTags } from "@/hooks/store/tags";
+import { useDashboardData } from "@/hooks/store/dashboardData";
+import Links from "@/components/LinkViews/Links";
+import useLocalSettingsStore from "@/store/localSettings";

 export default function Dashboard() {
-  const { collections } = useCollectionStore();
-  const { links } = useLinkStore();
-  const { tags } = useTagStore();
+  const { t } = useTranslation();
+  const { data: collections = [] } = useCollections();
+  const {
+    data: { links = [], numberOfPinnedLinks } = { links: [] },
+    ...dashboardData
+  } = useDashboardData();
+  const { data: tags = [] } = useTags();

  const [numberOfLinks, setNumberOfLinks] = useState(0);

-  const [showLinks, setShowLinks] = useState(3);
-
-  useLinks({ pinnedOnly: true, sort: 0 });
+  const { settings } = useLocalSettingsStore();

  useEffect(() => {
    setNumberOfLinks(
@@ -39,27 +40,28 @@ export default function Dashboard() {
    );
  }, [collections]);

-  const handleNumberOfLinksToShow = () => {
+  const numberOfLinksToShow = useMemo(() => {
    if (window.innerWidth > 1900) {
-      setShowLinks(8);
-    } else if (window.innerWidth > 1280) {
-      setShowLinks(6);
-    } else if (window.innerWidth > 650) {
-      setShowLinks(4);
-    } else setShowLinks(3);
-  };
+      return 10;
+    } else if (window.innerWidth > 1500) {
+      return 8;
+    } else if (window.innerWidth > 880) {
+      return 6;
+    } else if (window.innerWidth > 550) {
+      return 4;
+    } else {
+      return 2;
+    }
+  }, []);

-  const { width } = useWindowDimensions();
-
-  useEffect(() => {
-    handleNumberOfLinksToShow();
-  }, [width]);
-
-  const importBookmarks = async (e: any, format: MigrationFormat) => {
-    const file: File = e.target.files[0];
+  const importBookmarks = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+    format: MigrationFormat
+  ) => {
+    const file: File | null = e.target.files && e.target.files[0];

    if (file) {
-      var reader = new FileReader();
+      const reader = new FileReader();
      reader.readAsText(file, "UTF-8");
      reader.onload = async function (e) {
        const load = toast.loading("Importing...");
@@ -76,7 +78,7 @@ export default function Dashboard() {
          body: JSON.stringify(body),
        });

-        const data = await response.json();
+        await response.json();

        toast.dismiss(load);

@@ -94,19 +96,10 @@ export default function Dashboard() {

  const [newLinkModal, setNewLinkModal] = useState(false);

-  const [viewMode, setViewMode] = useState<string>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as 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">
@@ -114,73 +107,85 @@ export default function Dashboard() {
          <PageHeader
            icon={"bi-house "}
            title={"Dashboard"}
-            description={"A brief overview of your data"}
+            description={t("dashboard_desc")}
          />
          <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="xl:flex flex flex-col sm:grid grid-cols-2 gap-5 xl:flex-row xl:justify-evenly xl:w-full h-full rounded-2xl p-5 bg-base-200 border border-neutral-content">
+          <DashboardItem
+            name={numberOfLinks === 1 ? t("link") : t("links")}
+            value={numberOfLinks}
+            icon={"bi-link-45deg"}
+          />

-            <div className="divider xl:divider-horizontal"></div>
+          <DashboardItem
+            name={collections.length === 1 ? t("collection") : t("collections")}
+            value={collections.length}
+            icon={"bi-folder"}
+          />

-            <DashboardItem
-              name={collections.length === 1 ? "Collection" : "Collections"}
-              value={collections.length}
-              icon={"bi-folder"}
-            />
+          <DashboardItem
+            name={tags.length === 1 ? t("tag") : t("tags")}
+            value={tags.length}
+            icon={"bi-hash"}
+          />

-            <div className="divider xl:divider-horizontal"></div>
-
-            <DashboardItem
-              name={tags.length === 1 ? "Tag" : "Tags"}
-              value={tags.length}
-              icon={"bi-hash"}
-            />
-          </div>
+          <DashboardItem
+            name={t("pinned")}
+            value={numberOfPinnedLinks}
+            icon={"bi-pin-angle"}
+          />
        </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"}
+              title={t("recent")}
+              description={t("recent_links_desc")}
            />
          </div>
          <Link
            href="/links"
            className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
          >
-            View All
+            {t("view_all")}
            <i className="bi-chevron-right text-sm"></i>
          </Link>
        </div>

        <div
-          style={{ flex: "0 1 auto" }}
+          style={{
+            flex: links || dashboardData.isLoading ? "0 1 auto" : "1 1 auto",
+          }}
          className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
        >
-          {links[0] ? (
+          {dashboardData.isLoading ? (
            <div className="w-full">
-              <LinkComponent links={links.slice(0, showLinks)} />
+              <Links
+                layout={viewMode}
+                placeholderCount={settings.columns || 1}
+                useData={dashboardData}
+              />
+            </div>
+          ) : links && links[0] && !dashboardData.isLoading ? (
+            <div className="w-full">
+              <Links
+                links={links.slice(
+                  0,
+                  settings.columns ? settings.columns * 2 : numberOfLinksToShow
+                )}
+                layout={viewMode}
+              />
            </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"
-            >
+            <div 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!
+                {t("view_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.
+                {t("view_added_links_here_desc")}
              </p>

              <div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
@@ -190,9 +195,9 @@ export default function Dashboard() {
                  }}
                  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
+                  <i className="bi-plus-lg text-xl"></i>
+                  <span className="group-hover:opacity-0 text-right">
+                    {t("add_link")}
                  </span>
                </div>

@@ -201,21 +206,22 @@ export default function Dashboard() {
                    tabIndex={0}
                    role="button"
                    onMouseDown={dropdownTriggerer}
-                    className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
+                    className="inline-flex items-center gap-2 text-sm btn bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 hover:border hover:border-neutral/30"
                    id="import-dropdown"
                  >
                    <i className="bi-cloud-upload text-xl duration-100"></i>
-                    <p>Import From</p>
+                    <p>{t("import_links")}</p>
                  </div>
-                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
                    <li>
                      <label
                        tabIndex={0}
                        role="button"
                        htmlFor="import-linkwarden-file"
-                        title="JSON File"
+                        title={t("from_linkwarden")}
+                        className="whitespace-nowrap"
                      >
-                        From Linkwarden
+                        {t("from_linkwarden")}
                        <input
                          type="file"
                          name="photo"
@@ -233,9 +239,10 @@ export default function Dashboard() {
                        tabIndex={0}
                        role="button"
                        htmlFor="import-html-file"
-                        title="HTML File"
+                        title={t("from_html")}
+                        className="whitespace-nowrap"
                      >
-                        From Bookmarks HTML file
+                        {t("from_html")}
                        <input
                          type="file"
                          name="photo"
@@ -248,6 +255,27 @@ export default function Dashboard() {
                        />
                      </label>
                    </li>
+                    <li>
+                      <label
+                        tabIndex={0}
+                        role="button"
+                        htmlFor="import-wallabag-file"
+                        title={t("from_wallabag")}
+                        className="whitespace-nowrap"
+                      >
+                        {t("from_wallabag")}
+                        <input
+                          type="file"
+                          name="photo"
+                          id="import-wallabag-file"
+                          accept=".json"
+                          className="hidden"
+                          onChange={(e) =>
+                            importBookmarks(e, MigrationFormat.wallabag)
+                          }
+                        />
+                      </label>
+                    </li>
                  </ul>
                </div>
              </div>
@@ -259,15 +287,15 @@ export default function Dashboard() {
          <div className="flex gap-2 items-center">
            <PageHeader
              icon={"bi-pin-angle"}
-              title={"Pinned"}
-              description={"Your pinned Links"}
+              title={t("pinned")}
+              description={t("pinned_links_desc")}
            />
          </div>
          <Link
            href="/links/pinned"
            className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
          >
-            View All
+            {t("view_all")}
            <i className="bi-chevron-right text-sm "></i>
          </Link>
        </div>
@@ -276,34 +304,47 @@ export default function Dashboard() {
          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]) ? (
+          {dashboardData.isLoading ? (
            <div className="w-full">
-              <LinkComponent
+              <Links
+                layout={viewMode}
+                placeholderCount={settings.columns || 1}
+                useData={dashboardData}
+              />
+            </div>
+          ) : links?.some((e: any) => e.pinnedBy && e.pinnedBy[0]) ? (
+            <div className="w-full">
+              <Links
                links={links
-                  .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .slice(0, showLinks)}
+                  .filter((e: any) => e.pinnedBy && e.pinnedBy[0])
+                  .slice(
+                    0,
+                    settings.columns
+                      ? settings.columns * 2
+                      : numberOfLinksToShow
+                  )}
+                layout={viewMode}
              />
            </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"
+              className="flex flex-col gap-2 justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
            >
+              <i className="bi-pin mx-auto text-6xl text-primary"></i>
              <p className="text-center text-2xl">
-                Pin Your Favorite Links Here!
+                {t("pin_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 className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
+                {t("pin_favorite_links_here_desc")}
              </p>
            </div>
          )}
        </div>
      </div>
-      {newLinkModal ? (
-        <NewLinkModal onClose={() => setNewLinkModal(false)} />
-      ) : undefined}
+      {newLinkModal && <NewLinkModal onClose={() => setNewLinkModal(false)} />}
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,42 +1,60 @@
-import AccentSubmitButton from "@/components/AccentSubmitButton";
+import Button from "@/components/ui/Button";
 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";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";

 interface FormData {
  email: string;
 }

 export default function Forgot() {
+  const { t } = useTranslation();
  const [submitLoader, setSubmitLoader] = useState(false);

  const [form, setForm] = useState<FormData>({
    email: "",
  });

+  const [isEmailSent, setIsEmailSent] = useState(false);
+
+  async function submitRequest() {
+    const response = await fetch("/api/v1/auth/forgot-password", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(form),
+    });
+
+    const data = await response.json();
+
+    if (response.ok) {
+      toast.success(data.response);
+      setIsEmailSent(true);
+    } else {
+      toast.error(data.response);
+    }
+  }
+
  async function sendConfirmation(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (form.email !== "") {
      setSubmitLoader(true);

-      const load = toast.loading("Sending login link...");
+      const load = toast.loading(t("sending_password_link"));

-      await signIn("email", {
-        email: form.email,
-        callbackUrl: "/",
-      });
+      await submitRequest();

      toast.dismiss(load);

      setSubmitLoader(false);
-
-      toast.success("Login link sent.");
    } else {
-      toast.error("Please fill out all the fields.");
+      toast.error(t("fill_all_fields"));
    }
  }

@@ -45,43 +63,46 @@ export default function Forgot() {
      <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
+            {isEmailSent ? t("email_sent") : t("forgot_password")}
          </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>
+          {!isEmailSent ? (
+            <>
+              <div>
+                <p>{t("password_email_prompt")}</p>
+              </div>
+              <div>
+                <p className="text-sm w-fit font-semibold mb-1">{t("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>
+                <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
+              <Button
+                type="submit"
+                intent="accent"
+                className="mt-2"
+                size="full"
+                loading={submitLoader}
+              >
+                {t("send_reset_link")}
+              </Button>
+            </>
+          ) : (
+            <p>{t("reset_email_sent_desc")}</p>
+          )}
+
+          <div className="mx-auto w-fit mt-2">
+            <Link className="font-semibold" href="/login">
+              {t("back_to_login")}
            </Link>
          </div>
        </div>
@@ -89,3 +110,5 @@ export default function Forgot() {
    </CenteredForm>
  );
 }
+
+export { getServerSideProps };
@@ -1,3 +1,10 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
 export default function Index() {
-  return null;
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push("/login");
+  }, []);
 }
@@ -0,0 +1,42 @@
+import LinkDetails from "@/components/LinkDetails";
+import { useGetLink } from "@/hooks/store/links";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+
+const Index = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  useState;
+
+  const getLink = useGetLink();
+
+  useEffect(() => {
+    getLink.mutate({ id: Number(id) });
+  }, []);
+
+  return (
+    <div className="flex h-screen">
+      {getLink.data ? (
+        <LinkDetails
+          activeLink={getLink.data}
+          className="sm:max-w-xl sm:m-auto sm:p-5 w-full"
+          standalone
+        />
+      ) : (
+        <div className="max-w-xl p-5 m-auto w-full flex flex-col items-center gap-5">
+          <div className="w-20 h-20 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Index;
+
+export { getServerSideProps };
@@ -1,194 +1,69 @@
 import NoLinksFound from "@/components/NoLinksFound";
-import SortDropdown from "@/components/SortDropdown";
-import useLinks from "@/hooks/useLinks";
+import { useLinks } from "@/hooks/store/links";
 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 { Sort, ViewMode } from "@/types/global";
 import { useRouter } from "next/router";
+import LinkListOptions from "@/components/LinkListOptions";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
+import Links from "@/components/LinkViews/Links";

-export default function Links() {
-  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
-    useLinkStore();
+export default function Index() {
+  const { t } = useTranslation();

-  const [viewMode, setViewMode] = useState<string>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
  );
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
+
+  const { links, data } = useLinks({
+    sort: sortBy,
+  });

  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">
+        <LinkListOptions
+          t={t}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+          editMode={editMode}
+          setEditMode={setEditMode}
+        >
          <PageHeader
            icon={"bi-link-45deg"}
-            title={"All Links"}
-            description={"Links from every Collections"}
+            title={t("all_links")}
+            description={t("all_links_desc")}
          />
+        </LinkListOptions>

-          <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" />
+        {!data.isLoading && links && !links[0] && (
+          <NoLinksFound text={t("you_have_not_added_any_links")} />
        )}
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
      </div>
-      {bulkDeleteLinksModal && (
-        <BulkDeleteLinksModal
-          onClose={() => {
-            setBulkDeleteLinksModal(false);
-          }}
-        />
-      )}
-      {bulkEditLinksModal && (
-        <BulkEditLinksModal
-          onClose={() => {
-            setBulkEditLinksModal(false);
-          }}
-        />
-      )}
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,203 +1,82 @@
-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";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import LinkListOptions from "@/components/LinkListOptions";
+import { useLinks } from "@/hooks/store/links";
+import Links from "@/components/LinkViews/Links";

 export default function PinnedLinks() {
-  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
-    useLinkStore();
+  const { t } = useTranslation();

-  const [viewMode, setViewMode] = useState<string>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
+  );
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
  );
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

-  useLinks({ sort: sortBy, pinnedOnly: true });
+  const { links, data } = 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">
+        <LinkListOptions
+          t={t}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+          editMode={editMode}
+          setEditMode={setEditMode}
+        >
          <PageHeader
            icon={"bi-pin-angle"}
-            title={"Pinned Links"}
-            description={"Pinned Links from your Collections"}
+            title={t("pinned")}
+            description={t("pinned_links_desc")}
          />
-          <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>
+        </LinkListOptions>

-        {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} />
-        ) : (
+        {!data.isLoading && links && !links[0] && (
          <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"
+            className="flex flex-col gap-2 justify-center h-full w-full mx-auto p-10"
          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5 text-primary drop-shadow"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+            >
+              <path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354m1.58 1.408-.002-.001zm-.002-.001.002.001A.5.5 0 0 1 6 2v5a.5.5 0 0 1-.276.447h-.002l-.012.007-.054.03a5 5 0 0 0-.827.58c-.318.278-.585.596-.725.936h7.792c-.14-.34-.407-.658-.725-.936a5 5 0 0 0-.881-.61l-.012-.006h-.002A.5.5 0 0 1 10 7V2a.5.5 0 0 1 .295-.458 1.8 1.8 0 0 0 .351-.271c.08-.08.155-.17.214-.271H5.14q.091.15.214.271a1.8 1.8 0 0 0 .37.282" />
+            </svg>
            <p className="text-center text-2xl">
-              Pin Your Favorite Links Here!
+              {t("pin_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 className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
+              {t("pin_favorite_links_here_desc")}
            </p>
          </div>
        )}
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
      </div>
-      {bulkDeleteLinksModal && (
-        <BulkDeleteLinksModal
-          onClose={() => {
-            setBulkDeleteLinksModal(false);
-          }}
-        />
-      )}
-      {bulkEditLinksModal && (
-        <BulkEditLinksModal
-          onClose={() => {
-            setBulkEditLinksModal(false);
-          }}
-        />
-      )}
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,4 +1,4 @@
-import AccentSubmitButton from "@/components/AccentSubmitButton";
+import Button from "@/components/ui/Button";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
@@ -6,21 +6,27 @@ 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";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import InstallApp from "@/components/InstallApp";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { i18n } from "next-i18next.config";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "@/lib/api/db";
+import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";

 interface FormData {
  username: string;
  password: string;
 }

-export const getServerSideProps = () => {
-  const availableLogins = getLogins();
-  return { props: { availableLogins } };
-};
-
 export default function Login({
  availableLogins,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const { t } = useTranslation();
+
+  const router = useRouter();
+
  const [submitLoader, setSubmitLoader] = useState(false);

  const [form, setForm] = useState<FormData>({
@@ -34,7 +40,7 @@ export default function Login({
    if (form.username !== "" && form.password !== "") {
      setSubmitLoader(true);

-      const load = toast.loading("Authenticating...");
+      const load = toast.loading(t("authenticating"));

      const res = await signIn("credentials", {
        username: form.username,
@@ -47,17 +53,29 @@ export default function Login({
      setSubmitLoader(false);

      if (!res?.ok) {
-        toast.error("Invalid login.");
+        toast.error(res?.error || t("invalid_credentials"));
+
+        if (res?.error === "Email not verified.") {
+          await signIn("email", {
+            email: form.username,
+            callbackUrl: "/",
+            redirect: false,
+          });
+
+          router.push(
+            `/confirmation?email=${encodeURIComponent(form.username)}`
+          );
+        }
      }
    } else {
-      toast.error("Please fill out all the fields.");
+      toast.error(t("fill_all_fields"));
    }
  }

  async function loginUserButton(method: string) {
    setSubmitLoader(true);

-    const load = toast.loading("Authenticating...");
+    const load = toast.loading(t("authenticating"));

    const res = await signIn(method, {});

@@ -71,15 +89,74 @@ export default function Login({
      return (
        <>
          <p className="text-3xl text-black dark:text-white text-center font-extralight">
-            Enter your credentials
+            {t("enter_credentials")}
          </p>
          <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+
+          {process.env.NEXT_PUBLIC_DEMO === "true" &&
+            process.env.NEXT_PUBLIC_DEMO_USERNAME &&
+            process.env.NEXT_PUBLIC_DEMO_PASSWORD && (
+              <div className="p-3 shadow-lg border border-primary rounded-xl">
+                <div className="flex flex-col gap-2 items-center text-center w-full">
+                  <div className="flex items-center gap-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      className="stroke-info h-6 w-6 shrink-0"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      ></path>
+                    </svg>
+                    <p className="font-bold">{t("demo_title")}</p>
+                  </div>
+                  <div className="text-xs">{t("demo_desc")}</div>
+
+                  <div className="text-xs">
+                    {t("demo_desc_2")}{" "}
+                    <a
+                      href="https://cloud.linkwarden.app"
+                      target="_blank"
+                      className="font-bold"
+                    >
+                      cloud.linkwarden.app
+                    </a>
+                  </div>
+                  <div
+                    className="btn btn-sm btn-primary w-full"
+                    onClick={async () => {
+                      const load = toast.loading(t("authenticating"));
+
+                      setForm({
+                        username: process.env
+                          .NEXT_PUBLIC_DEMO_USERNAME as string,
+                        password: process.env
+                          .NEXT_PUBLIC_DEMO_PASSWORD as string,
+                      });
+                      await signIn("credentials", {
+                        username: process.env.NEXT_PUBLIC_DEMO_USERNAME,
+                        password: process.env.NEXT_PUBLIC_DEMO_PASSWORD,
+                        redirect: false,
+                      });
+
+                      toast.dismiss(load);
+                    }}
+                  >
+                    {t("demo_button")}
+                  </div>
+                </div>
+              </div>
+            )}
+
          <div>
            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-              Username
              {availableLogins.emailEnabled === "true"
-                ? " or Email"
-                : undefined}
+                ? t("username_or_email")
+                : t("username")}
            </p>

            <TextInput
@@ -87,12 +164,13 @@ export default function Login({
              placeholder="johnny"
              value={form.username}
              className="bg-base-100"
+              data-testid="username-input"
              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
+              {t("password")}
            </p>

            <TextInput
@@ -100,47 +178,57 @@ export default function Login({
              placeholder="••••••••••••••"
              value={form.password}
              className="bg-base-100"
+              data-testid="password-input"
              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"
+                  className="text-neutral font-semibold"
+                  data-testid="forgot-password-link"
                >
-                  Forgot Password?
+                  {t("forgot_password")}
                </Link>
              </div>
            )}
          </div>
-          <AccentSubmitButton
+          <Button
            type="submit"
-            label="Login"
-            className=" w-full text-center"
+            size="full"
+            intent="accent"
+            data-testid="submit-login-button"
            loading={submitLoader}
-          />
+          >
+            {t("login")}
+          </Button>

-          {availableLogins.buttonAuths.length > 0 ? (
-            <div className="divider my-1">OR</div>
-          ) : undefined}
+          {availableLogins.buttonAuths.length > 0 && (
+            <div className="divider my-1">{t("or_continue_with")}</div>
+          )}
        </>
      );
    }
  }
+
  function displayLoginExternalButton() {
    const Buttons: any = [];
-    availableLogins.buttonAuths.forEach((value, index) => {
+    availableLogins.buttonAuths.forEach((value: any, index: any) => {
      Buttons.push(
        <React.Fragment key={index}>
-          {index !== 0 ? <div className="divider my-1">OR</div> : undefined}
-
-          <AccentSubmitButton
+          <Button
            type="button"
            onClick={() => loginUserButton(value.method)}
-            label={`Sign in with ${value.name}`}
-            className=" w-full text-center"
+            size="full"
+            intent="secondary"
            loading={submitLoader}
-          />
+          >
+            {value.name.toLowerCase() === "google" ||
+              (value.name.toLowerCase() === "apple" && (
+                <i className={"bi-" + value.name.toLowerCase()}></i>
+              ))}
+            {value.name}
+          </Button>
        </React.Fragment>
      );
    });
@@ -151,12 +239,15 @@ export default function Login({
    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>
+          <p className="w-fit text-gray-500 dark:text-gray-400">
+            {t("new_here")}
+          </p>
          <Link
            href={"/register"}
-            className="block text-black dark:text-white font-semibold"
+            className="font-semibold"
+            data-testid="register-link"
          >
-            Sign Up
+            {t("sign_up")}
          </Link>
        </div>
      );
@@ -164,21 +255,74 @@ export default function Login({
  }

  return (
-    <CenteredForm text="Sign in to your account">
+    <CenteredForm text={t("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">
+        <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"
+          data-testid="login-form"
+        >
          {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>
+      <InstallApp />
    </CenteredForm>
  );
 }
+
+const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const availableLogins = getLogins();
+
+  const acceptLanguageHeader = ctx.req.headers["accept-language"];
+  const availableLanguages = i18n.locales;
+
+  const token = await getToken({ req: ctx.req });
+
+  if (token) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.id,
+      },
+    });
+
+    if (user) {
+      return {
+        props: {
+          availableLogins,
+          ...(await serverSideTranslations(user.locale ?? "en", ["common"])),
+        },
+      };
+    }
+  }
+
+  const acceptedLanguages = acceptLanguageHeader
+    ?.split(",")
+    .map((lang) => lang.split(";")[0]);
+
+  let bestMatch = acceptedLanguages?.find((lang) =>
+    availableLanguages.includes(lang)
+  );
+
+  if (!bestMatch) {
+    acceptedLanguages?.some((acceptedLang) => {
+      const partialMatch = availableLanguages.find((lang) =>
+        lang.startsWith(acceptedLang)
+      );
+      if (partialMatch) {
+        bestMatch = partialMatch;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  return {
+    props: {
+      availableLogins,
+      ...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
+    },
+  };
+};
+
+export { getServerSideProps };
@@ -1,14 +1,17 @@
 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";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useGetLink, useLinks } from "@/hooks/store/links";

 export default function Index() {
-  const { links, getLink } = useLinkStore();
+  const { links } = useLinks();
+
+  const getLink = useGetLink();

  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();

@@ -17,7 +20,7 @@ export default function Index() {
  useEffect(() => {
    const fetchLink = async () => {
      if (router.query.id) {
-        await getLink(Number(router.query.id));
+        await getLink.mutateAsync({ id: Number(router.query.id) });
      }
    };

@@ -25,7 +28,8 @@ export default function Index() {
  }, []);

  useEffect(() => {
-    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+    if (links && links[0])
+      setLink(links.find((e) => e.id === Number(router.query.id)));
  }, [links]);

  return (
@@ -36,6 +40,12 @@ export default function Index() {
      {link && Number(router.query.format) === ArchivedFormat.readability && (
        <ReadableView link={link} />
      )}
+      {link && Number(router.query.format) === ArchivedFormat.monolith && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.monolith}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
      {link && Number(router.query.format) === ArchivedFormat.pdf && (
        <iframe
          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
@@ -59,3 +69,5 @@ export default function Index() {
    </div>
  );
 }
+
+export { getServerSideProps };
@@ -1,6 +1,7 @@
 "use client";
 import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
 import {
+  AccountSettings,
  CollectionIncludingMembersAndLinkCount,
  Sort,
  TagIncludingLinkCount,
@@ -8,55 +9,33 @@ import {
 } 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 { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import LinkListOptions from "@/components/LinkListOptions";
+import { usePublicLinks } from "@/hooks/store/publicLinks";
+import Links from "@/components/LinkViews/Links";
 import useTagStore from "@/store/tags";
 import { Disclosure, Transition } from "@headlessui/react";
-// 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 { t } = useTranslation();
+
+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 [collectionOwner, setCollectionOwner] = useState<
+    Partial<AccountSettings>
+  >({});

  const { tags, setTags } = useTagStore();
  const handleTagSelection = (tag: TagIncludingLinkCount  | undefined) => {
@@ -84,9 +63,11 @@ export default function PublicCollections() {
    textContent: false,
  });

-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );

-  useLinks({
+  const { links, data } = usePublicLinks({
    sort: sortBy,
    searchQueryString: router.query.q
      ? decodeURIComponent(router.query.q as string)
@@ -102,247 +83,272 @@ export default function PublicCollections() {
    useState<CollectionIncludingMembersAndLinkCount>();
  useEffect(() => {
    if (router.query.id) {
-      getPublicCollectionData(Number(router.query.id), setCollection);
-      setTags(Number(router.query.id))
+      getPublicCollectionData(Number(router.query.id)).then((res) => {
+        if (res.status === 400) {
+          router.push("/dashboard");
+        } else {
+          setCollection(res.response);
+          setTags(Number(router.query.id))
+        }
+      });
    }
  }, []);

  useEffect(() => {
-    const fetchOwner = async () => {
-      if (collection) {
-        const owner = await getPublicUserData(collection.ownerId as number);
-        setCollectionOwner(owner);
-      }
-    };
-
-    fetchOwner();
+    if (collection) {
+      getPublicUserData(collection.ownerId as number).then((owner) =>
+        setCollectionOwner(owner)
+      );
+    }
  }, [collection]);

  const [editCollectionSharingModal, setEditCollectionSharingModal] =
    useState(false);

-  const [viewMode, setViewMode] = useState<string>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
  );

-  const linkView = {
-    [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
-    [ViewMode.List]: ListView,
-  };
+const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
+  const storedValue = localStorage.getItem(
+    "tagDisclosureForPublicCollection" + collection?.id
+  );
+  return storedValue ? storedValue === "true" : true;
+});
+useEffect(() => {
+  localStorage.setItem(
+    "tagDisclosureForPublicCollection" + collection?.id,
+    tagDisclosure ? "true" : "false"
+  );
+}, [tagDisclosure]);

-  const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
-    const storedValue = localStorage.getItem("tagDisclosureForPublicCollection" + collection?.id);
-    return storedValue ? storedValue === "true" : true;
-  });
-    useEffect(() => {
-    localStorage.setItem("tagDisclosureForPublicCollection" + collection?.id, tagDisclosure ? "true" : "false");
-  }, [tagDisclosure]);
-
-  // @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`}
+  if (!collection) return <></>;
+  else
+    return (
+      <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>
+        )}
+        <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 />

-            <div className="flex gap-2 items-center w-fit">
-              <FilterSearchDropdown
-                searchFilter={searchFilter}
-                setSearchFilter={setSearchFilter}
-              />
-
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-
-              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+              <Link href="https://linkwarden.app/" target="_blank">
+                <Image
+                  src={`/icon.png`}
+                  width={551}
+                  height={551}
+                  alt="Linkwarden"
+                  title={t("list_created_with_linkwarden")}
+                  className="h-8 w-fit mx-auto rounded"
+                />
+              </Link>
            </div>
          </div>
-{collection.tagsArePublic && tags[0] && (
-<Disclosure defaultOpen={tagDisclosure}>
-        <Disclosure.Button
-          onClick={() => {
-            setTagDisclosure(!tagDisclosure);
-          }}
-          className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
-        >
-          <p className="text-sm">Browse by topic</p>
-          <i
-            className={`bi-chevron-down ${
-              tagDisclosure ? "rotate-reverse" : "rotate"
-            }`}
-          ></i>
-        </Disclosure.Button>
-        <Transition
-          enter="transition duration-100 ease-out"
-          enterFrom="transform opacity-0 -translate-y-3"
-          enterTo="transform opacity-100 translate-y-0"
-          leave="transition duration-100 ease-out"
-          leaveFrom="transform opacity-100 translate-y-0"
-          leaveTo="transform opacity-0 -translate-y-3"
-        >
-          <Disclosure.Panel>
-                          <div className="flex gap-2 mt-2 mb-6 flex-wrap">
-                <button className="max-w-full" onClick={() => handleTagSelection(undefined)}>
-                  <div
-                    className="
-                      bg-neutral-content/20 hover:bg-neutral/20 duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 rounded-md h-8"
-                    >
-                      <i className="text-primary bi-hash text-2xl text-primary drop-shadow"></i>
-                      <p className="truncate pr-7">All</p>
-                      <div className="text-neutral drop-shadow text-neutral text-xs">
-                        {collection._count?.links}
+
+          <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}
+                    />
+                  )}
+                  {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>
-                </button>
-                {tags
-                  .sort((a, b) => a.name.localeCompare(b.name))
-                  .map((e, i) => {
-                    const active = router.query.q === e.name;
-                    return (
-                      <button className="max-w-full" key={i} onClick={() => handleTagSelection(e)}>
+                    </div>
+                  )}
+                </div>
+
+                <p className="text-neutral text-sm">
+                  {collection.members.length > 0 &&
+                  collection.members.length === 1
+                    ? t("by_author_and_other", {
+                        author: collectionOwner.name,
+                        count: collection.members.length,
+                      })
+                    : collection.members.length > 0 &&
+                        collection.members.length !== 1
+                      ? t("by_author_and_others", {
+                          author: collectionOwner.name,
+                          count: collection.members.length,
+                        })
+                      : t("by_author", {
+                          author: collectionOwner.name,
+                        })}
+                </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">
+            <LinkListOptions
+              t={t}
+              viewMode={viewMode}
+              setViewMode={setViewMode}
+              sortBy={sortBy}
+              setSortBy={setSortBy}
+              searchFilter={searchFilter}
+              setSearchFilter={setSearchFilter}
+            >
+              <SearchBar
+                placeholder={
+                  collection._count?.links === 1
+                    ? t("search_count_link", {
+                        count: collection._count?.links,
+                      })
+                    : t("search_count_links", {
+                        count: collection._count?.links,
+                      })
+                }
+              />
+            </LinkListOptions>
+            {collection.tagsArePublic && tags[0] && (
+              <Disclosure defaultOpen={tagDisclosure}>
+                <Disclosure.Button
+                  onClick={() => {
+                    setTagDisclosure(!tagDisclosure);
+                  }}
+                  className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
+                >
+                  <p className="text-sm">Browse by topic</p>
+                  <i
+                    className={`bi-chevron-down ${
+                      tagDisclosure ? "rotate-reverse" : "rotate"
+                    }`}
+                  ></i>
+                </Disclosure.Button>
+                <Transition
+                  enter="transition duration-100 ease-out"
+                  enterFrom="transform opacity-0 -translate-y-3"
+                  enterTo="transform opacity-100 translate-y-0"
+                  leave="transition duration-100 ease-out"
+                  leaveFrom="transform opacity-100 translate-y-0"
+                  leaveTo="transform opacity-0 -translate-y-3"
+                >
+                  <Disclosure.Panel>
+                    <div className="flex gap-2 mt-2 mb-6 flex-wrap">
+                      <button
+                        className="max-w-full"
+                        onClick={() => handleTagSelection(undefined)}
+                      >
                        <div
-                          className={`
-                            ${
-                            active
-                              ? "bg-primary/20"
-                              : "bg-neutral-content/20 hover:bg-neutral/20"
-                          } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 rounded-md h-8`}
+                          className="
+                      bg-neutral-content/20 hover:bg-neutral/20 duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 rounded-md h-8"
                        >
-                          <i className="bi-hash text-2xl text-primary drop-shadow"></i>
-                          <p className="truncate pr-7">{e.name}</p>
-                          <div className="drop-shadow text-neutral text-xs">
-                            {e._count?.links}
+                          <i className="text-primary bi-hash text-2xl text-primary drop-shadow"></i>
+                          <p className="truncate pr-7">All</p>
+                          <div className="text-neutral drop-shadow text-neutral text-xs">
+                            {collection._count?.links}
                          </div>
                        </div>
                      </button>
-                    );
-                  })
-              }
-              </div>
-          </Disclosure.Panel>
-        </Transition>
-      </Disclosure>)}
-          {links[0] ? (
-            <LinkComponent
-              links={links
-                .filter((e) => e.collectionId === Number(router.query.id))
-                .map((e, i) => {
+                      {tags
+                        .sort((a, b) => a.name.localeCompare(b.name))
+                        .map((e, i) => {
+                          const active = router.query.q === e.name;
+                          return (
+                            <button
+                              className="max-w-full"
+                              key={i}
+                              onClick={() => handleTagSelection(e)}
+                            >
+                              <div
+                                className={`
+                            ${
+                              active
+                                ? "bg-primary/20"
+                                : "bg-neutral-content/20 hover:bg-neutral/20"
+                            } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 rounded-md h-8`}
+                              >
+                                <i className="bi-hash text-2xl text-primary drop-shadow"></i>
+                                <p className="truncate pr-7">{e.name}</p>
+                                <div className="drop-shadow text-neutral text-xs">
+                                  {e._count?.links}
+                                </div>
+                              </div>
+                            </button>
+                          );
+                        })}
+                    </div>
+                  </Disclosure.Panel>
+                </Transition>
+              </Disclosure>
+            )}
+            <Links
+              links={
+                links?.map((e, i) => {
                  const linkWithCollectionData = {
                    ...e,
                    collection: collection, // Append collection data
                  };
                  return linkWithCollectionData;
-                })}
+                }) as any
+              }
+              layout={viewMode}
+              placeholderCount={1}
+              useData={data}
            />
-          ) : (
-            <p>This collection is empty...</p>
-          )}
+            {!data.isLoading && links && !links[0] && (
+              <p>{t("nothing_found")}</p>
+            )}

-          {/* <p className="text-center text-neutral">
+            {/* <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}
+          />
+        )}
      </div>
-      {editCollectionSharingModal ? (
-        <EditCollectionSharingModal
-          onClose={() => setEditCollectionSharingModal(false)}
-          activeCollection={collection}
-        />
-      ) : undefined}
-    </div>
-  ) : (
-    <></>
-  );
+    );
 }
+
+export { getServerSideProps };
@@ -0,0 +1,40 @@
+import LinkDetails from "@/components/LinkDetails";
+import { useGetLink } from "@/hooks/store/links";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+
+const Index = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const getLink = useGetLink();
+
+  useEffect(() => {
+    getLink.mutate({ id: Number(id) });
+  }, []);
+
+  return (
+    <div className="flex h-screen">
+      {getLink.data ? (
+        <LinkDetails
+          activeLink={getLink.data}
+          className="sm:max-w-xl sm:m-auto sm:p-5 w-full"
+          standalone
+        />
+      ) : (
+        <div className="max-w-xl p-5 m-auto w-full flex flex-col items-center gap-5">
+          <div className="w-20 h-20 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Index;
+
+export { getServerSideProps };
@@ -1,35 +1,31 @@
 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";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useGetLink } from "@/hooks/store/links";

 export default function Index() {
-  const { links, getLink } = useLinkStore();
+  const getLink = useGetLink();

  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);
+        const get = await getLink.mutateAsync({ id: Number(router.query.id) });
+        setLink(get);
      }
    };

    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">
@@ -38,6 +34,12 @@ export default function Index() {
      {link && Number(router.query.format) === ArchivedFormat.readability && (
        <ReadableView link={link} />
      )}
+      {link && Number(router.query.format) === ArchivedFormat.monolith && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.monolith}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
      {link && Number(router.query.format) === ArchivedFormat.pdf && (
        <iframe
          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
@@ -61,3 +63,5 @@ export default function Index() {
    </div>
  );
 }
+
+export { getServerSideProps };
@@ -1,11 +1,18 @@
 import Link from "next/link";
-import { useState, FormEvent } from "react";
+import React, { 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";
+import Button from "@/components/ui/Button";
+import { getLogins } from "./api/v1/logins";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "@/lib/api/db";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { i18n } from "next-i18next.config";
+import { Trans, useTranslation } from "next-i18next";

 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";

@@ -17,7 +24,10 @@ type FormData = {
  passwordConfirmation: string;
 };

-export default function Register() {
+export default function Register({
+  availableLogins,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const { t } = useTranslation();
  const [submitLoader, setSubmitLoader] = useState(false);
  const router = useRouter();

@@ -53,14 +63,14 @@ export default function Register() {

      if (checkFields()) {
        if (form.password !== form.passwordConfirmation)
-          return toast.error("Passwords do not match.");
+          return toast.error(t("passwords_mismatch"));
        else if (form.password.length < 8)
-          return toast.error("Passwords must be at least 8 characters.");
+          return toast.error(t("password_too_short"));
        const { passwordConfirmation, ...request } = form;

        setSubmitLoader(true);

-        const load = toast.loading("Creating Account...");
+        const load = toast.loading(t("creating_account"));

        const response = await fetch("/api/v1/users", {
          body: JSON.stringify(request),
@@ -76,69 +86,114 @@ export default function Register() {
        setSubmitLoader(false);

        if (response.ok) {
-          if (form.email && emailEnabled)
+          if (form.email && emailEnabled) {
            await signIn("email", {
              email: form.email,
              callbackUrl: "/",
+              redirect: false,
            });
-          else if (!emailEnabled) router.push("/login");

-          toast.success("User Created!");
+            router.push(
+              "/confirmation?email=" + encodeURIComponent(form.email)
+            );
+          } else if (!emailEnabled) router.push("/login");
+
+          toast.success(t("account_created"));
        } else {
          toast.error(data.response);
        }
      } else {
-        toast.error("Please fill out all the fields.");
+        toast.error(t("fill_all_fields"));
      }
    }
  }

+  async function loginUserButton(method: string) {
+    setSubmitLoader(true);
+
+    const load = toast.loading(t("authenticating"));
+
+    const res = await signIn(method, {});
+
+    toast.dismiss(load);
+
+    setSubmitLoader(false);
+  }
+
+  function displayLoginExternalButton() {
+    const Buttons: any = [];
+    availableLogins.buttonAuths.forEach((value: any, index: any) => {
+      Buttons.push(
+        <React.Fragment key={index}>
+          <Button
+            type="button"
+            onClick={() => loginUserButton(value.method)}
+            size="full"
+            intent="secondary"
+            loading={submitLoader}
+          >
+            {value.name.toLowerCase() === "google" ||
+              (value.name.toLowerCase() === "apple" && (
+                <i className={"bi-" + value.name.toLowerCase()}></i>
+              ))}
+            {value.name}
+          </Button>
+        </React.Fragment>
+      );
+    });
+    return Buttons;
+  }
+
  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"
+          ? t("trial_offer_desc", {
+              count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14),
+            })
+          : t("register_desc")
      }
+      data-testid="registration-form"
    >
      {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>
+          <p>{t("registration_disabled")}</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
+              {t("enter_details")}
            </p>

            <div className="divider my-0"></div>

            <div>
-              <p className="text-sm w-fit font-semibold mb-1">Display Name</p>
+              <p className="text-sm w-fit font-semibold mb-1">
+                {t("display_name")}
+              </p>

              <TextInput
                autoFocus={true}
                placeholder="Johnny"
                value={form.name}
                className="bg-base-100"
+                data-testid="display-name-input"
                onChange={(e) => setForm({ ...form, name: e.target.value })}
              />
            </div>

            {emailEnabled ? undefined : (
              <div>
-                <p className="text-sm w-fit font-semibold mb-1">Username</p>
+                <p className="text-sm w-fit font-semibold mb-1">
+                  {t("username")}
+                </p>

                <TextInput
                  placeholder="john"
                  value={form.username}
                  className="bg-base-100"
+                  data-testid="username-input"
                  onChange={(e) =>
                    setForm({ ...form, username: e.target.value })
                  }
@@ -146,35 +201,39 @@ export default function Register() {
              </div>
            )}

-            {emailEnabled ? (
+            {emailEnabled && (
              <div>
-                <p className="text-sm w-fit font-semibold mb-1">Email</p>
+                <p className="text-sm w-fit font-semibold mb-1">{t("email")}</p>

                <TextInput
                  type="email"
                  placeholder="johnny@example.com"
                  value={form.email}
                  className="bg-base-100"
+                  data-testid="email-input"
                  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>
+              <p className="text-sm w-fit font-semibold  mb-1">
+                {t("password")}
+              </p>

              <TextInput
                type="password"
                placeholder="••••••••••••••"
                value={form.password}
                className="bg-base-100"
+                data-testid="password-input"
                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
+                {t("confirm_password")}
              </p>

              <TextInput
@@ -182,55 +241,75 @@ export default function Register() {
                placeholder="••••••••••••••"
                value={form.passwordConfirmation}
                className="bg-base-100"
+                data-testid="password-confirm-input"
                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>
-                  .
+            {process.env.NEXT_PUBLIC_STRIPE && (
+              <div className="text-xs text-neutral mb-3">
+                <p>
+                  <Trans
+                    i18nKey="sign_up_agreement"
+                    components={[
+                      <Link
+                        href="https://linkwarden.app/tos"
+                        className="font-semibold"
+                        data-testid="terms-of-service-link"
+                        key={0}
+                      />,
+                      <Link
+                        href="https://linkwarden.app/privacy-policy"
+                        className="font-semibold"
+                        data-testid="privacy-policy-link"
+                        key={1}
+                      />,
+                    ]}
+                  />
                </p>
              </div>
-            ) : undefined}
+            )}

-            <AccentSubmitButton
+            <Button
              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>
+              intent="accent"
+              size="full"
+              data-testid="register-button"
+            >
+              {t("sign_up")}
+            </Button>
+
+            {availableLogins.buttonAuths.length > 0 && (
+              <div className="divider my-1">{t("or_continue_with")}</div>
+            )}
+
+            {displayLoginExternalButton()}
+            <div>
+              <div className="text-neutral text-center flex items-baseline gap-1 justify-center">
+                <p className="w-fit text-neutral">{t("already_registered")}</p>
+                <Link
+                  href={"/login"}
+                  className="font-bold text-base-content"
+                  data-testid="login-link"
+                >
+                  {t("login")}
+                </Link>
+              </div>
+              {process.env.NEXT_PUBLIC_STRIPE && (
+                <div className="text-neutral text-center flex items-baseline gap-1 justify-center">
+                  <p>{t("need_help")}</p>
+                  <Link
+                    href="mailto:support@linkwarden.app"
+                    className="font-bold text-base-content"
+                    data-testid="support-link"
+                  >
+                    {t("get_in_touch")}
+                  </Link>
+                </div>
+              )}
            </div>
          </div>
        </form>
@@ -238,3 +317,59 @@ export default function Register() {
    </CenteredForm>
  );
 }
+
+const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const availableLogins = getLogins();
+
+  const acceptLanguageHeader = ctx.req.headers["accept-language"];
+  const availableLanguages = i18n.locales;
+
+  const token = await getToken({ req: ctx.req });
+
+  if (token) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.id,
+      },
+    });
+
+    if (user) {
+      return {
+        props: {
+          availableLogins,
+          ...(await serverSideTranslations(user.locale ?? "en", ["common"])),
+        },
+      };
+    }
+  }
+
+  const acceptedLanguages = acceptLanguageHeader
+    ?.split(",")
+    .map((lang) => lang.split(";")[0]);
+
+  let bestMatch = acceptedLanguages?.find((lang) =>
+    availableLanguages.includes(lang)
+  );
+
+  if (!bestMatch) {
+    acceptedLanguages?.some((acceptedLang) => {
+      const partialMatch = availableLanguages.find((lang) =>
+        lang.startsWith(acceptedLang)
+      );
+      if (partialMatch) {
+        bestMatch = partialMatch;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  return {
+    props: {
+      availableLogins,
+      ...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
+    },
+  };
+};
+
+export { getServerSideProps };
@@ -1,20 +1,16 @@
-import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import SortDropdown from "@/components/SortDropdown";
-import useLinks from "@/hooks/useLinks";
+import { useLinks } from "@/hooks/store/links";
 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";
+import LinkListOptions from "@/components/LinkListOptions";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
+import Links from "@/components/LinkViews/Links";

 export default function Search() {
-  const { links } = useLinkStore();
+  const { t } = useTranslation();

  const router = useRouter();

@@ -26,12 +22,31 @@ export default function Search() {
    textContent: false,
  });

-  const [viewMode, setViewMode] = useState<string>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
  );
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

-  const { isLoading } = useLinks({
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
+
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
+
+  // const { isLoading } = useLink({
+  //   sort: sortBy,
+  //   searchQueryString: decodeURIComponent(router.query.q as string),
+  //   searchByName: searchFilter.name,
+  //   searchByUrl: searchFilter.url,
+  //   searchByDescription: searchFilter.description,
+  //   searchByTextContent: searchFilter.textContent,
+  //   searchByTags: searchFilter.tags,
+  // });
+
+  const { links, data } = useLinks({
    sort: sortBy,
    searchQueryString: decodeURIComponent(router.query.q as string),
    searchByName: searchFilter.name,
@@ -41,57 +56,34 @@ export default function Search() {
    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">
+        <LinkListOptions
+          t={t}
+          searchFilter={searchFilter}
+          setSearchFilter={setSearchFilter}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+          editMode={editMode}
+          setEditMode={setEditMode}
+        >
          <PageHeader icon={"bi-search"} title={"Search Results"} />
+        </LinkListOptions>

-          <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"
-            />
-          )
-        )}
+        {!data.isLoading && links && !links[0] && <p>{t("nothing_found")}</p>}
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
      </div>
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,41 +1,35 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import React, { useEffect, useState } from "react";
+import React, { 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";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTokens } from "@/hooks/store/tokens";

 export default function AccessTokens() {
  const [newTokenModal, setNewTokenModal] = useState(false);
  const [revokeTokenModal, setRevokeTokenModal] = useState(false);
  const [selectedToken, setSelectedToken] = useState<AccessToken | null>(null);
+  const { t } = useTranslation();

  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[]);
-      });
-  }, []);
+  const { data: tokens = [] } = useTokens();

  return (
    <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Access Tokens</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("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>
+        <p>{t("access_tokens_description")}</p>

        <button
          className={`btn ml-auto btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2`}
@@ -43,56 +37,60 @@ export default function AccessTokens() {
            setNewTokenModal(true);
          }}
        >
-          New Access Token
+          {t("new_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)}
+        {tokens.length > 0 && (
+          <table className="table mt-2 overflow-x-auto">
+            <thead>
+              <tr>
+                <th>{t("name")}</th>
+                <th>{t("created")}</th>
+                <th>{t("expires")}</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {tokens.map((token, i) => (
+                <React.Fragment key={i}>
+                  <tr>
+                    <td className={token.isSession ? "text-primary" : ""}>
+                      {token.isSession ? (
+                        <div
+                          className="tooltip tooltip-right text-left"
+                          data-tip="This is a permanent session"
                        >
-                          <i className="bi-x text-lg"></i>
-                        </button>
-                      </td>
-                    </tr>
-                  </React.Fragment>
-                ))}
-              </tbody>
-            </table>
-          </>
-        ) : undefined}
+                          {token.name}
+                        </div>
+                      ) : (
+                        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>
+        )}
      </div>

-      {newTokenModal ? (
+      {newTokenModal && (
        <NewTokenModal onClose={() => setNewTokenModal(false)} />
-      ) : undefined}
+      )}
      {revokeTokenModal && selectedToken && (
        <RevokeTokenModal
          onClose={() => {
@@ -105,3 +103,5 @@ export default function AccessTokens() {
    </SettingsLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,5 +1,4 @@
-import { useState, useEffect } from "react";
-import useAccountStore from "@/store/account";
+import { useState, useEffect, ChangeEvent } from "react";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
 import SettingsLayout from "@/layouts/SettingsLayout";
@@ -12,14 +11,22 @@ import { MigrationFormat, MigrationRequest } from "@/types/global";
 import Link from "next/link";
 import Checkbox from "@/components/Checkbox";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import EmailChangeVerificationModal from "@/components/ModalContent/EmailChangeVerificationModal";
+import Button from "@/components/ui/Button";
+import { i18n } from "next-i18next.config";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useUpdateUser, useUser } from "@/hooks/store/user";
+import { z } from "zod";
+
+const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;

 export default function Account() {
-  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
-
+  const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
+    useState(false);
  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const { account, updateAccount } = useAccountStore();
-
+  const { data: account } = useUser();
+  const updateUser = useUpdateUser();
  const [user, setUser] = useState<AccountSettings>(
    !objectIsEmpty(account)
      ? account
@@ -30,6 +37,7 @@ export default function Account() {
          username: "",
          email: "",
          emailVerified: null,
+          password: undefined,
          image: "",
          isPrivate: true,
          // @ts-ignore
@@ -38,6 +46,8 @@ export default function Account() {
        } as unknown as AccountSettings)
  );

+  const { t } = useTranslation();
+
  function objectIsEmpty(obj: object) {
    return Object.keys(obj).length === 0;
  }
@@ -46,8 +56,10 @@ export default function Account() {
    if (!objectIsEmpty(account)) setUser({ ...account });
  }, [account]);

-  const handleImageUpload = async (e: any) => {
-    const file: File = e.target.files[0];
+  const handleImageUpload = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return toast.error(t("image_upload_no_file_error"));
+
    const fileExtension = file.name.split(".").pop()?.toLowerCase();
    const allowedExtensions = ["png", "jpeg", "jpg"];
    if (allowedExtensions.includes(fileExtension as string)) {
@@ -61,69 +73,99 @@ export default function Account() {
        };
        reader.readAsDataURL(resizedFile);
      } else {
-        toast.error("Please select a PNG or JPEG file thats less than 1MB.");
+        toast.error(t("image_upload_size_error"));
      }
    } else {
-      toast.error("Invalid file format.");
+      toast.error(t("image_upload_format_error"));
    }
  };

-  const submit = async () => {
+  const submit = async (password?: string) => {
+    if (!/^[a-z0-9_-]{3,50}$/.test(user.username || "")) {
+      return toast.error(t("username_invalid_guide"));
+    }
+
+    const emailSchema = z.string().trim().email().toLowerCase();
+    const emailValidation = emailSchema.safeParse(user.email || "");
+    if (!emailValidation.success) {
+      return toast.error(t("email_invalid"));
+    }
+
    setSubmitLoader(true);

-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_settings"));

-    const response = await updateAccount({
-      ...user,
-    });
+    await updateUser.mutateAsync(
+      {
+        ...user,
+        password: password ? password : undefined,
+      },
+      {
+        onSuccess: (data) => {
+          if (data.response.email !== user.email) {
+            toast.success(t("email_change_request"));
+            setEmailChangeVerificationModal(false);
+          }
+        },
+        onSettled: (data, error) => {
+          toast.dismiss(load);

-    toast.dismiss(load);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            if (data.response.email !== user.email) {
+              toast.success(t("email_change_request"));
+              setEmailChangeVerificationModal(false);
+            }
+
+            toast.success(t("settings_applied"));
+          }
+        },
+      }
+    );
+
+    if (user.locale !== account.locale) {
+      setTimeout(() => {
+        location.reload();
+      }, 1000);
+    }

-    if (response.ok) {
-      toast.success("Settings Applied!");
-    } else toast.error(response.data as string);
    setSubmitLoader(false);
  };

-  const importBookmarks = async (e: any, format: MigrationFormat) => {
+  const importBookmarks = async (
+    e: ChangeEvent<HTMLInputElement>,
+    format: MigrationFormat
+  ) => {
    setSubmitLoader(true);
-
-    const file: File = e.target.files[0];
+    const 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 load = toast.loading(t("importing_bookmarks"));
        const request: string = e.target?.result as string;
-
-        const body: MigrationRequest = {
-          format,
-          data: request,
-        };
-
+        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...");
+          toast.success(t("import_success"));
          setTimeout(() => {
            location.reload();
          }, 2000);
-        } else toast.error(data.response as string);
+        } else {
+          toast.error(data.response as string);
+        }
      };
      reader.onerror = function (e) {
        console.log("Error:", e);
      };
    }
-
    setSubmitLoader(false);
  };

@@ -141,16 +183,14 @@ export default function Account() {
  }, [whitelistedUsersTextbox]);

  const stringToArray = (str: string) => {
-    const stringWithoutSpaces = str?.replace(/\s+/g, "");
-
-    const wordsArray = stringWithoutSpaces?.split(",");
-
-    return wordsArray;
+    return str?.replace(/\s+/g, "").split(",");
  };

  return (
    <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Account Settings</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("accountSettings")}
+      </p>

      <div className="divider my-3"></div>

@@ -158,7 +198,7 @@ export default function Account() {
        <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>
+              <p className="mb-2">{t("display_name")}</p>
              <TextInput
                value={user.name || ""}
                className="bg-base-200"
@@ -166,74 +206,149 @@ export default function Account() {
              />
            </div>
            <div>
-              <p className="mb-2">Username</p>
+              <p className="mb-2">{t("username")}</p>
              <TextInput
                value={user.username || ""}
                className="bg-base-200"
                onChange={(e) => setUser({ ...user, username: e.target.value })}
              />
            </div>
-
-            {emailEnabled ? (
+            {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}
+                <p className="mb-2">{t("email")}</p>
                <TextInput
                  value={user.email || ""}
+                  type="email"
                  className="bg-base-200"
                  onChange={(e) => setUser({ ...user, email: e.target.value })}
                />
              </div>
-            ) : undefined}
+            )}
+            <div>
+              <p className="mb-2">{t("language")}</p>
+              <select
+                value={user.locale || ""}
+                onChange={(e) => {
+                  setUser({ ...user, locale: e.target.value });
+                }}
+                className="select border border-neutral-content focus:outline-none focus:border-primary duration-100 w-full bg-base-200 rounded-[0.375rem] min-h-0 h-[2.625rem] leading-4 p-2"
+              >
+                {i18n.locales.map((locale) => (
+                  <option key={locale} value={locale} className="capitalize">
+                    {new Intl.DisplayNames(locale, { type: "language" }).of(
+                      locale
+                    ) || ""}
+                  </option>
+                ))}
+                <option disabled>{t("more_coming_soon")}</option>
+              </select>
+            </div>
          </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">
+            <p className="mb-2 sm:text-center">{t("profile_photo")}</p>
+            <div className="w-28 h-28 flex gap-3 sm:flex-col items-center">
              <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"
+
+              <div className="dropdown dropdown-bottom">
+                <Button
+                  tabIndex={0}
+                  role="button"
+                  size="small"
+                  intent="secondary"
+                  onMouseDown={dropdownTriggerer}
+                  className="text-sm"
                >
-                  <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>
+                  <i className="bi-pencil-square text-md duration-100"></i>
+                  {t("edit")}
+                </Button>
+                <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
+                  <li>
+                    <label
+                      tabIndex={0}
+                      role="button"
+                      className="whitespace-nowrap"
+                    >
+                      {t("upload_new_photo")}
+                      <input
+                        type="file"
+                        name="photo"
+                        id="upload-photo"
+                        accept=".png, .jpeg, .jpg"
+                        className="hidden"
+                        onChange={handleImageUpload}
+                      />
+                    </label>
+                  </li>
+                  {user.image && (
+                    <li>
+                      <div
+                        tabIndex={0}
+                        role="button"
+                        onClick={() =>
+                          setUser({
+                            ...user,
+                            image: "",
+                          })
+                        }
+                        className="whitespace-nowrap"
+                      >
+                        {t("remove_photo")}
+                      </div>
+                    </li>
+                  )}
+                </ul>
              </div>
            </div>
          </div>
        </div>

+        <div className="sm:-mt-3">
+          <Checkbox
+            label={t("make_profile_private")}
+            state={user.isPrivate}
+            onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
+          />
+
+          <p className="text-neutral text-sm">{t("profile_privacy_info")}</p>
+
+          {user.isPrivate && (
+            <div className="pl-5">
+              <p className="mt-2">{t("whitelisted_users")}</p>
+              <p className="text-neutral text-sm mb-3">
+                {t("whitelisted_users_info")}
+              </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={t("whitelisted_users_placeholder")}
+                value={whitelistedUsersTextbox}
+                onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
+              />
+            </div>
+          )}
+        </div>
+
+        <SubmitButton
+          onClick={() => {
+            if (account.email !== user.email) {
+              setEmailChangeVerificationModal(true);
+            } else {
+              submit();
+            }
+          }}
+          loading={submitLoader}
+          label={t("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="truncate w-full pr-7 text-3xl font-thin">
-              Import & Export
+              {t("import_export")}
            </p>
          </div>

@@ -241,27 +356,30 @@ export default function Account() {

          <div className="flex gap-3 flex-col">
            <div>
-              <p className="mb-2">Import your data from other platforms.</p>
+              <p className="mb-2">{t("import_data")}</p>
              <div className="dropdown dropdown-bottom">
-                <div
+                <Button
                  tabIndex={0}
                  role="button"
+                  intent="secondary"
                  onMouseDown={dropdownTriggerer}
-                  className="flex gap-2 text-sm btn btn-outline btn-neutral group"
+                  className="text-sm"
                  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">
+                  {t("import_links")}
+                </Button>
+
+                <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
                  <li>
                    <label
                      tabIndex={0}
                      role="button"
                      htmlFor="import-linkwarden-file"
-                      title="JSON File"
+                      title={t("from_linkwarden")}
+                      className="whitespace-nowrap"
                    >
-                      From Linkwarden
+                      {t("from_linkwarden")}
                      <input
                        type="file"
                        name="photo"
@@ -279,9 +397,10 @@ export default function Account() {
                      tabIndex={0}
                      role="button"
                      htmlFor="import-html-file"
-                      title="HTML File"
+                      title={t("from_html")}
+                      className="whitespace-nowrap"
                    >
-                      From Bookmarks HTML file
+                      {t("from_html")}
                      <input
                        type="file"
                        name="photo"
@@ -294,92 +413,74 @@ export default function Account() {
                      />
                    </label>
                  </li>
+                  <li>
+                    <label
+                      tabIndex={0}
+                      role="button"
+                      htmlFor="import-wallabag-file"
+                      title={t("from_wallabag")}
+                      className="whitespace-nowrap"
+                    >
+                      {t("from_wallabag")}
+                      <input
+                        type="file"
+                        name="photo"
+                        id="import-wallabag-file"
+                        accept=".json"
+                        className="hidden"
+                        onChange={(e) =>
+                          importBookmarks(e, MigrationFormat.wallabag)
+                        }
+                      />
+                    </label>
+                  </li>
                </ul>
              </div>
            </div>

            <div>
-              <p className="mb-2">Download your data instantly.</p>
+              <p className="mb-2">{t("download_data")}</p>
              <Link className="w-fit" href="/api/v1/migration">
-                <div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
+                <div className="select-none relative duration-200 rounded-lg text-sm text-center w-fit flex justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-50 bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 h-10 px-4 py-2">
                  <i className="bi-cloud-download text-xl duration-100"></i>
-                  <p>Export Data</p>
+                  <p>{t("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
+              {t("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.
+            {t("delete_account_warning")}
+            {process.env.NEXT_PUBLIC_STRIPE &&
+              " " + t("cancel_subscription_notice")}
          </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 href="/settings/delete" className="underline">
+          {t("account_deletion_page")}
        </Link>
      </div>
+
+      {emailChangeVerificationModal && (
+        <EmailChangeVerificationModal
+          onClose={() => setEmailChangeVerificationModal(false)}
+          onSubmit={submit}
+          oldEmail={account.email || ""}
+          newEmail={user.email || ""}
+        />
+      )}
    </SettingsLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,9 +1,12 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";

 export default function Billing() {
  const router = useRouter();
+  const { t } = useTranslation();

  useEffect(() => {
    if (!process.env.NEXT_PUBLIC_STRIPE) router.push("/settings/profile");
@@ -11,29 +14,28 @@ export default function Billing() {

  return (
    <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Billing Settings</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("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{" "}
+          {t("manage_subscription_intro")}{" "}
          <a
            href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
            className="underline"
+            target="_blank"
          >
-            Billing Portal
+            {t("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"
-          >
+          {t("help_contact_intro")}{" "}
+          <a className="font-semibold" href="mailto:support@linkwarden.app">
            support@linkwarden.app
          </a>
        </p>
@@ -41,3 +43,5 @@ export default function Billing() {
    </SettingsLayout>
  );
 }
+
+export { getServerSideProps };
@@ -4,18 +4,17 @@ 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";
+import Button from "@/components/ui/Button";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";

 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 { t } = useTranslation();

  const submit = async () => {
    const body = {
@@ -26,13 +25,12 @@ export default function Delete() {
      },
    };

-    if (!keycloakEnabled && !authentikEnabled && password == "") {
-      return toast.error("Please fill the required fields.");
+    if (password === "") {
+      return toast.error(t("fill_required_fields"));
    }

    setSubmitLoader(true);
-
-    const load = toast.loading("Deleting everything, please wait...");
+    const load = toast.loading(t("deleting_message"));

    const response = await fetch(`/api/v1/users/${data?.user.id}`, {
      method: "DELETE",
@@ -48,7 +46,9 @@ export default function Delete() {

    if (response.ok) {
      signOut();
-    } else toast.error(message);
+    } else {
+      toast.error(message);
+    }

    setSubmitLoader(false);
  };
@@ -60,96 +60,82 @@ export default function Delete() {
          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>
+          <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
+            {t("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>
+        <p>{t("delete_warning")}</p>

-        {process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED !== "true" ? (
-          <div>
-            <p className="mb-2">Confirm Your Password</p>
+        <div>
+          <p className="mb-2">{t("confirm_password")}</p>
+          <TextInput
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="••••••••••••••"
+            className="bg-base-100"
+            type="password"
+          />
+        </div>

-            <TextInput
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="••••••••••••••"
-              className="bg-base-100"
-              type="password"
-            />
-          </div>
-        ) : undefined}
-
-        {process.env.NEXT_PUBLIC_STRIPE ? (
+        {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>
+              <b>{t("optional")}</b> <i>{t("feedback_help")}</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>
+              <p className="text-sm">{t("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>
+                <option value={undefined}>{t("please_specify")}</option>
+                <option value="customer_service">
+                  {t("customer_service")}
+                </option>
+                <option value="low_quality">{t("low_quality")}</option>
+                <option value="missing_features">
+                  {t("missing_features")}
+                </option>
+                <option value="switched_service">
+                  {t("switched_service")}
+                </option>
+                <option value="too_complex">{t("too_complex")}</option>
+                <option value="too_expensive">{t("too_expensive")}</option>
+                <option value="unused">{t("unused")}</option>
+                <option value="other">{t("other")}</option>
              </select>
            </label>
            <div>
-              <p className="text-sm mb-2">
-                More information (the more details, the more helpful it&apos;d
-                be)
-              </p>
+              <p className="text-sm mb-2">{t("more_information")}</p>

              <textarea
                value={comment}
                onChange={(e) => setComment(e.target.value)}
-                placeholder="e.g. I needed a feature that..."
+                placeholder={t("feedback_placeholder")}
                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();
-            }
-          }}
+        <Button
+          className="mx-auto"
+          intent="destructive"
+          loading={submitLoader}
+          onClick={submit}
        >
-          <p className="text-center w-full">Delete Your Account</p>
-        </button>
+          <p className="text-center w-full">{t("delete_your_account")}</p>
+        </Button>
      </div>
    </CenteredForm>
  );
 }
+
+export { getServerSideProps };
@@ -1,75 +1,82 @@
 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";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useUpdateUser, useUser } from "@/hooks/store/user";

 export default function Password() {
-  const [newPassword, setNewPassword1] = useState("");
-  const [newPassword2, setNewPassword2] = useState("");
+  const { t } = useTranslation();

+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const { account, updateAccount } = useAccountStore();
+  const { data: account } = useUser();
+  const updateUser = useUpdateUser();

  const submit = async () => {
-    if (newPassword == "" || newPassword2 == "") {
-      return toast.error("Please fill all the fields.");
+    if (newPassword === "" || oldPassword === "") {
+      return toast.error(t("fill_all_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.");
+    if (newPassword.length < 8) return toast.error(t("password_length_error"));

    setSubmitLoader(true);

-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_settings"));

-    const response = await updateAccount({
-      ...account,
-      newPassword,
-    });
+    await updateUser.mutateAsync(
+      {
+        ...account,
+        newPassword,
+        oldPassword,
+      },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);

-    toast.dismiss(load);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            setNewPassword("");
+            setOldPassword("");

-    if (response.ok) {
-      toast.success("Settings Applied!");
-      setNewPassword1("");
-      setNewPassword2("");
-    } else toast.error(response.data as string);
+            toast.success(t("settings_applied"));
+          }
+        },
+      }
+    );

    setSubmitLoader(false);
  };

  return (
    <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Change Password</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("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>
+      <p className="mb-3">{t("password_change_instructions")}</p>
      <div className="w-full flex flex-col gap-2 justify-between">
-        <p>New Password</p>
+        <p>{t("old_password")}</p>

        <TextInput
-          value={newPassword}
+          value={oldPassword}
          className="bg-base-200"
-          onChange={(e) => setNewPassword1(e.target.value)}
+          onChange={(e) => setOldPassword(e.target.value)}
          placeholder="••••••••••••••"
          type="password"
        />

-        <p>Confirm New Password</p>
+        <p className="mt-3">{t("new_password")}</p>

        <TextInput
-          value={newPassword2}
+          value={newPassword}
          className="bg-base-200"
-          onChange={(e) => setNewPassword2(e.target.value)}
+          onChange={(e) => setNewPassword(e.target.value)}
          placeholder="••••••••••••••"
          type="password"
        />
@@ -77,10 +84,12 @@ export default function Password() {
        <SubmitButton
          onClick={submit}
          loading={submitLoader}
-          label="Save Changes"
-          className="mt-2 w-full sm:w-fit"
+          label={t("save_changes")}
+          className="mt-3 w-full sm:w-fit"
        />
      </div>
    </SettingsLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,36 +1,46 @@
 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 { toast } from "react-hot-toast";
+import Checkbox from "@/components/Checkbox";
+import useLocalSettingsStore from "@/store/localSettings";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps"; // Import getServerSideProps for server-side data fetching
 import { LinksRouteTo } from "@prisma/client";
+import { useUpdateUser, useUser } from "@/hooks/store/user";

 export default function Appearance() {
+  const { t } = useTranslation();
  const { updateSettings } = useLocalSettingsStore();
-
  const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
-  const [user, setUser] = useState<AccountSettings>(account);
+  const { data: account } = useUser();
+  const updateUser = useUpdateUser();
+  const [user, setUser] = useState(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
+  const [preventDuplicateLinks, setPreventDuplicateLinks] = useState<boolean>(
+    account.preventDuplicateLinks
  );
+  const [archiveAsScreenshot, setArchiveAsScreenshot] = useState<boolean>(
+    account.archiveAsScreenshot
+  );
+  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(
+    account.archiveAsPDF
+  );
+
+  const [archiveAsMonolith, setArchiveAsMonolith] = useState<boolean>(
+    account.archiveAsMonolith
+  );
+
+  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
+    useState<boolean>(account.archiveAsWaybackMachine);
+
+  const [linksRouteTo, setLinksRouteTo] = useState(account.linksRouteTo);

  useEffect(() => {
    setUser({
      ...account,
      archiveAsScreenshot,
+      archiveAsMonolith,
      archiveAsPDF,
      archiveAsWaybackMachine,
      linksRouteTo,
@@ -39,6 +49,7 @@ export default function Appearance() {
  }, [
    account,
    archiveAsScreenshot,
+    archiveAsMonolith,
    archiveAsPDF,
    archiveAsWaybackMachine,
    linksRouteTo,
@@ -52,6 +63,7 @@ export default function Appearance() {
  useEffect(() => {
    if (!objectIsEmpty(account)) {
      setArchiveAsScreenshot(account.archiveAsScreenshot);
+      setArchiveAsMonolith(account.archiveAsMonolith);
      setArchiveAsPDF(account.archiveAsPDF);
      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
      setLinksRouteTo(account.linksRouteTo);
@@ -62,29 +74,35 @@ export default function Appearance() {
  const submit = async () => {
    setSubmitLoader(true);

-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_settings"));

-    const response = await updateAccount({
-      ...user,
-    });
+    await updateUser.mutateAsync(
+      { ...user },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);

-    toast.dismiss(load);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            toast.success(t("settings_applied"));
+          }
+        },
+      }
+    );

-    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>
+      <p className="capitalize text-3xl font-thin inline">{t("preference")}</p>

      <div className="divider my-3"></div>

      <div className="flex flex-col gap-5">
        <div>
-          <p className="mb-3">Select Theme</p>
+          <p className="mb-3">{t("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 ${
@@ -95,9 +113,7 @@ export default function Appearance() {
              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" /> */}
+              <p className="ml-2 text-2xl">{t("dark")}</p>
            </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 ${
@@ -108,35 +124,37 @@ export default function Appearance() {
              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" /> */}
+              <p className="ml-2 text-2xl">{t("light")}</p>
            </div>
          </div>
        </div>

        <div>
          <p className="capitalize text-3xl font-thin inline">
-            Archive Settings
+            {t("archive_settings")}
          </p>
-
          <div className="divider my-3"></div>
-
-          <p>Formats to Archive/Preserve webpages:</p>
+          <p>{t("formats_to_archive")}</p>
          <div className="p-3">
            <Checkbox
-              label="Screenshot"
+              label={t("screenshot")}
              state={archiveAsScreenshot}
              onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
            />

            <Checkbox
-              label="PDF"
-              state={archiveAsPDF}
-              onClick={() => setArchiveAsPDF(!archiveAsPDF)}
+              label={t("webpage")}
+              state={archiveAsMonolith}
+              onClick={() => setArchiveAsMonolith(!archiveAsMonolith)}
            />

            <Checkbox
-              label="Archive.org Snapshot"
+              label={t("pdf")}
+              state={archiveAsPDF}
+              onClick={() => setArchiveAsPDF(!archiveAsPDF)}
+            />
+            <Checkbox
+              label={t("archive_org_snapshot")}
              state={archiveAsWaybackMachine}
              onClick={() =>
                setArchiveAsWaybackMachine(!archiveAsWaybackMachine)
@@ -146,18 +164,18 @@ export default function Appearance() {
        </div>

        <div>
-          <p className="capitalize text-3xl font-thin inline">Link Settings</p>
-
+          <p className="capitalize text-3xl font-thin inline">
+            {t("link_settings")}
+          </p>
          <div className="divider my-3"></div>
          <div className="mb-3">
            <Checkbox
-              label="Prevent duplicate links"
+              label={t("prevent_duplicate_links")}
              state={preventDuplicateLinks}
              onClick={() => setPreventDuplicateLinks(!preventDuplicateLinks)}
            />
          </div>
-
-          <p>Clicking on Links should:</p>
+          <p>{t("clicking_on_links_should")}</p>
          <div className="p-3">
            <label
              className="label cursor-pointer flex gap-2 justify-start w-fit"
@@ -172,7 +190,7 @@ export default function Appearance() {
                checked={linksRouteTo === LinksRouteTo.ORIGINAL}
                onChange={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
              />
-              <span className="label-text">Open the original content</span>
+              <span className="label-text">{t("open_original_content")}</span>
            </label>

            <label
@@ -188,7 +206,7 @@ export default function Appearance() {
                checked={linksRouteTo === LinksRouteTo.PDF}
                onChange={() => setLinksRouteTo(LinksRouteTo.PDF)}
              />
-              <span className="label-text">Open PDF, if available</span>
+              <span className="label-text">{t("open_pdf_if_available")}</span>
            </label>

            <label
@@ -204,7 +222,27 @@ export default function Appearance() {
                checked={linksRouteTo === LinksRouteTo.READABLE}
                onChange={() => setLinksRouteTo(LinksRouteTo.READABLE)}
              />
-              <span className="label-text">Open Readable, if available</span>
+              <span className="label-text">
+                {t("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="Monolith"
+                checked={linksRouteTo === LinksRouteTo.MONOLITH}
+                onChange={() => setLinksRouteTo(LinksRouteTo.MONOLITH)}
+              />
+              <span className="label-text">
+                {t("open_webpage_if_available")}
+              </span>
            </label>

            <label
@@ -220,7 +258,9 @@ export default function Appearance() {
                checked={linksRouteTo === LinksRouteTo.SCREENSHOT}
                onChange={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
              />
-              <span className="label-text">Open Screenshot, if available</span>
+              <span className="label-text">
+                {t("open_screenshot_if_available")}
+              </span>
            </label>
          </div>
        </div>
@@ -228,10 +268,12 @@ export default function Appearance() {
        <SubmitButton
          onClick={submit}
          loading={submitLoader}
-          label="Save Changes"
+          label={t("save_changes")}
          className="mt-2 w-full sm:w-fit"
        />
      </div>
    </SettingsLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,12 +1,18 @@
 import { signOut, useSession } from "next-auth/react";
-import { useState } from "react";
+import { useEffect, 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";
+import Button from "@/components/ui/Button";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { Trans, useTranslation } from "next-i18next";
+import { useUser } from "@/hooks/store/user";
+
+const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";

 export default function Subscribe() {
+  const { t } = useTranslation();
  const [submitLoader, setSubmitLoader] = useState(false);
  const session = useSession();

@@ -14,10 +20,21 @@ export default function Subscribe() {

  const router = useRouter();

+  const { data: user = {} } = useUser();
+
+  useEffect(() => {
+    const hasInactiveSubscription =
+      user.id && !user.subscription?.active && stripeEnabled;
+
+    if (session.status === "authenticated" && !hasInactiveSubscription) {
+      router.push("/dashboard");
+    }
+  }, [session.status]);
+
  async function submit() {
    setSubmitLoader(true);

-    const redirectionToast = toast.loading("Redirecting to Stripe...");
+    const redirectionToast = toast.loading(t("redirecting_to_stripe"));

    const res = await fetch("/api/v1/payment?plan=" + plan);
    const data = await res.json();
@@ -33,18 +50,23 @@ export default function Subscribe() {
    >
      <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!
+          {t("subscribe_title")}
        </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.
+            <Trans
+              i18nKey="subscribe_desc"
+              components={[
+                <a
+                  className="font-semibold"
+                  href="mailto:support@linkwarden.app"
+                  key={0}
+                />,
+              ]}
+            />
          </p>
        </div>

@@ -57,7 +79,7 @@ export default function Subscribe() {
                : "hover:opacity-80"
            }`}
          >
-            <p>Monthly</p>
+            <p>{t("monthly")}</p>
          </button>

          <button
@@ -68,10 +90,12 @@ export default function Subscribe() {
                : "hover:opacity-80"
            }`}
          >
-            <p>Yearly</p>
+            <p>{t("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 className="absolute -top-3 -right-4 px-1 bg-red-600 text-sm text-white rounded-md rotate-[22deg]">
+            {t("discount_percent", {
+              percent: 25,
+            })}
          </div>
        </div>

@@ -81,36 +105,47 @@ export default function Subscribe() {
            <span className="text-base text-neutral">/mo</span>
          </p>
          <p className="font-semibold">
-            Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
+            {plan === Plan.monthly ? t("billed_monthly") : t("billed_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
+              {t("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"}
+              {plan === Plan.monthly
+                ? t("total_monthly_desc", {
+                    count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS),
+                    monthlyPrice: "4",
+                  })
+                : t("total_annual_desc", {
+                    count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS),
+                    annualPrice: "36",
+                  })}
            </p>
-            <p className="text-sm">+ VAT if applicable</p>
+            <p className="text-sm">{t("plus_tax")}</p>
          </fieldset>
        </div>

-        <AccentSubmitButton
+        <Button
          type="button"
-          label="Complete Subscription!"
-          className="w-full"
+          intent="accent"
+          size="full"
          onClick={submit}
          loading={submitLoader}
-        />
+        >
+          {t("complete_subscription")}
+        </Button>

        <div
          onClick={() => signOut()}
          className="w-fit mx-auto cursor-pointer text-neutral font-semibold "
        >
-          Sign Out
+          {t("sign_out")}
        </div>
      </div>
    </CenteredForm>
  );
 }
+
+export { getServerSideProps };
@@ -1,29 +1,29 @@
-import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
-import { FormEvent, use, useEffect, useState } from "react";
+import { FormEvent, 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 { useLinks } from "@/hooks/store/links";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
-import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import LinkListOptions from "@/components/LinkListOptions";
+import { useRemoveTag, useTags, useUpdateTag } from "@/hooks/store/tags";
+import Links from "@/components/LinkViews/Links";
+import toast from "react-hot-toast";

 export default function Index() {
+  const { t } = useTranslation();
  const router = useRouter();

-  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
-    useLinkStore();
-  const { tags, updateTag, removeTag } = useTagStore();
+  const { data: tags = [] } = useTags();
+  const updateTag = useUpdateTag();
+  const removeTag = useRemoveTag();

-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );

  const [renameTag, setRenameTag] = useState(false);
  const [newTagName, setNewTagName] = useState<string>();
@@ -38,14 +38,13 @@ export default function Index() {
    if (editMode) return setEditMode(false);
  }, [router]);

-  const collectivePermissions = useCollectivePermissions(
-    selectedLinks.map((link) => link.collectionId as number)
-  );
-
-  useLinks({ tagId: Number(router.query.id), sort: sortBy });
+  const { links, data } = useLinks({
+    sort: sortBy,
+    tagId: Number(router.query.id),
+  });

  useEffect(() => {
-    const tag = tags.find((e) => e.id === Number(router.query.id));
+    const tag = tags.find((e: any) => e.id === Number(router.query.id));

    if (tags.length > 0 && !tag?.id) {
      router.push("/dashboard");
@@ -76,21 +75,28 @@ export default function Index() {

    setSubmitLoader(true);

-    const load = toast.loading("Applying...");
+    if (activeTag && newTagName) {
+      const load = toast.loading(t("applying_changes"));

-    let response;
+      await updateTag.mutateAsync(
+        {
+          ...activeTag,
+          name: newTagName,
+        },
+        {
+          onSettled: (data, error) => {
+            toast.dismiss(load);

-    if (activeTag && newTagName)
-      response = await updateTag({
-        ...activeTag,
-        name: newTagName,
-      });
+            if (error) {
+              toast.error(error.message);
+            } else {
+              toast.success(t("tag_renamed"));
+            }
+          },
+        }
+      );
+    }

-    toast.dismiss(load);
-
-    if (response?.ok) {
-      toast.success("Tag Renamed!");
-    } else toast.error(response?.data as string);
    setSubmitLoader(false);
    setRenameTag(false);
  };
@@ -98,101 +104,74 @@ export default function Index() {
  const remove = async () => {
    setSubmitLoader(true);

-    const load = toast.loading("Applying...");
+    if (activeTag?.id) {
+      const load = toast.loading(t("applying_changes"));

-    let response;
+      await removeTag.mutateAsync(activeTag?.id, {
+        onSettled: (data, error) => {
+          toast.dismiss(load);

-    if (activeTag?.id) response = await removeTag(activeTag?.id);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            toast.success(t("tag_deleted"));
+            router.push("/links");
+          }
+        },
+      });
+    }

-    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 [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as 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">
+        <LinkListOptions
+          t={t}
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+          editMode={editMode}
+          setEditMode={setEditMode}
+        >
          <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>
-                </>
+                <form onSubmit={submit} className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    autoFocus
+                    className="sm:text-3xl text-2xl 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-check2 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">
+                  <p className="sm:text-3xl text-2xl capitalize">
                    {activeTag?.name}
                  </p>
                  <div className="relative">
@@ -213,7 +192,7 @@ export default function Index() {
                          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">
+                      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
                        <li>
                          <div
                            role="button"
@@ -222,8 +201,9 @@ export default function Index() {
                              (document?.activeElement as HTMLElement)?.blur();
                              setRenameTag(true);
                            }}
+                            className="whitespace-nowrap"
                          >
-                            Rename Tag
+                            {t("rename_tag")}
                          </div>
                        </li>
                        <li>
@@ -234,8 +214,9 @@ export default function Index() {
                              (document?.activeElement as HTMLElement)?.blur();
                              remove();
                            }}
+                            className="whitespace-nowrap"
                          >
-                            Remove Tag
+                            {t("delete_tag")}
                          </div>
                        </li>
                      </ul>
@@ -245,88 +226,14 @@ export default function Index() {
              )}
            </div>
          </div>
+        </LinkListOptions>

-          <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
+        <Links
          editMode={editMode}
-          links={links.filter((e) =>
-            e.tags.some((e) => e.id === Number(router.query.id))
-          )}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
        />
      </div>
      {bulkDeleteLinksModal && (
@@ -346,3 +253,5 @@ export default function Index() {
    </MainLayout>
  );
 }
+
+export { getServerSideProps };