Merge branch 'dev' of https://github.com/linkwarden/linkwarden into feat/single-file

2024-06-18 12:19:52 -04:00
parent 2b8f7d4be2 c216a92474
commit 359d22e61b
161 changed files with 7449 additions and 2996 deletions
@@ -5,11 +5,15 @@ 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 nextI18nextConfig from "../next-i18next.config";

-export default function App({
+function App({
  Component,
  pageProps,
 }: AppProps<{
@@ -54,6 +58,7 @@ export default function App({
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <AuthRedirect>
+        {/* <GetData> */}
        <Toaster
          position="top-center"
          reverseOrder={false}
@@ -61,9 +66,45 @@ export default function App({
            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" && (
+                    <button
+                      className="btn btn-xs outline-none btn-circle btn-ghost"
+                      data-testid="close-toast-button"
+                      onClick={() => toast.dismiss(t.id)}
+                    >
+                      <i className="bi bi-x"></i>
+                    </button>
+                  )}
+                </div>
+              )}
+            </ToastBar>
+          )}
+        </Toaster>
        <Component {...pageProps} />
+        {/* </GetData> */}
      </AuthRedirect>
    </SessionProvider>
  );
 }
+
+export default appWithTranslation(App);
+
+// function GetData({ children }: { children: React.ReactNode }) {
+//   const status = useInitialData();
+//   return typeof window !== "undefined" && status !== "loading" ? (
+//     children
+//   ) : (
+//     <></>
+//   );
+// }
@@ -0,0 +1,115 @@
+import DeleteUserModal from "@/components/ModalContent/DeleteUserModal";
+import NewUserModal from "@/components/ModalContent/NewUserModal";
+import useUserStore from "@/store/admin/users";
+import { User as U } from "@prisma/client";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import UserListing from "@/components/UserListing";
+
+interface User extends U {
+  subscriptions: {
+    active: boolean;
+  };
+}
+
+type UserModal = {
+  isOpen: boolean;
+  userId: number | null;
+};
+
+export default function Admin() {
+  const { t } = useTranslation();
+
+  const { users, setUsers } = useUserStore();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredUsers, setFilteredUsers] = useState<User[]>();
+
+  const [deleteUserModal, setDeleteUserModal] = useState<UserModal>({
+    isOpen: false,
+    userId: null,
+  });
+
+  const [newUserModal, setNewUserModal] = useState(false);
+
+  useEffect(() => {
+    setUsers();
+  }, []);
+
+  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) =>
+                      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)} />
+      ) : null}
+    </div>
+  );
+}
+
+export { getServerSideProps };
@@ -9,6 +9,8 @@ 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";

 export const config = {
  api: {
@@ -74,83 +76,97 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {

      return res.send(file);
    }
+  } else if (req.method === "POST") {
+    const user = await verifyUser({ req, res });
+    if (!user) return;
+
+    const collectionPermissions = await getPermission({
+      userId: user.id,
+      linkId,
+    });
+
+    const memberHasAccess = collectionPermissions?.members.some(
+      (e: UsersAndCollections) => e.userId === user.id && e.canCreate
+    );
+
+    if (!(collectionPermissions?.ownerId === user.id || memberHasAccess))
+      return { response: "Collection is not accessible.", status: 401 };
+
+    // await uploadHandler(linkId, )
+
+    const MAX_UPLOAD_SIZE = Number(process.env.NEXT_PUBLIC_MAX_FILE_SIZE);
+
+    const form = formidable({
+      maxFields: 1,
+      maxFiles: 1,
+      maxFileSize: MAX_UPLOAD_SIZE || 30 * 1048576,
+    });
+
+    form.parse(req, async (err, fields, files) => {
+      const allowedMIMETypes = [
+        "application/pdf",
+        "image/png",
+        "image/jpg",
+        "image/jpeg",
+      ];
+
+      if (
+        err ||
+        !files.file ||
+        !files.file[0] ||
+        !allowedMIMETypes.includes(files.file[0].mimetype || "")
+      ) {
+        // Handle parsing error
+        return res.status(500).json({
+          response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${MAX_UPLOAD_SIZE}MB.`,
+        });
+      } else {
+        const fileBuffer = fs.readFileSync(files.file[0].filepath);
+
+        const linkStillExists = await prisma.link.findUnique({
+          where: { id: linkId },
+        });
+
+        if (linkStillExists && files.file[0].mimetype?.includes("image")) {
+          const collectionId = collectionPermissions?.id as number;
+          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: files.file[0].mimetype?.includes("pdf")
+                ? "unavailable"
+                : undefined,
+              image: files.file[0].mimetype?.includes("image")
+                ? `archives/${collectionPermissions?.id}/${linkId + suffix}`
+                : null,
+              pdf: files.file[0].mimetype?.includes("pdf")
+                ? `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;
-
-  //   const collectionPermissions = await getPermission({
-  //     userId: user.id,
-  //     linkId,
-  //   });
-
-  //   const memberHasAccess = collectionPermissions?.members.some(
-  //     (e: UsersAndCollections) => e.userId === user.id && e.canCreate
-  //   );
-
-  //   if (!(collectionPermissions?.ownerId === user.id || memberHasAccess))
-  //     return { response: "Collection is not accessible.", status: 401 };
-
-  //   // await uploadHandler(linkId, )
-
-  //   const MAX_UPLOAD_SIZE = Number(process.env.NEXT_PUBLIC_MAX_FILE_SIZE);
-
-  //   const form = formidable({
-  //     maxFields: 1,
-  //     maxFiles: 1,
-  //     maxFileSize: MAX_UPLOAD_SIZE || 30 * 1048576,
-  //   });
-
-  //   form.parse(req, async (err, fields, files) => {
-  //     const allowedMIMETypes = [
-  //       "application/pdf",
-  //       "image/png",
-  //       "image/jpg",
-  //       "image/jpeg",
-  //     ];
-
-  //     if (
-  //       err ||
-  //       !files.file ||
-  //       !files.file[0] ||
-  //       !allowedMIMETypes.includes(files.file[0].mimetype || "")
-  //     ) {
-  //       // Handle parsing error
-  //       return res.status(500).json({
-  //         response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${MAX_UPLOAD_SIZE}MB.`,
-  //       });
-  //     } else {
-  //       const fileBuffer = fs.readFileSync(files.file[0].filepath);
-
-  //       const linkStillExists = await prisma.link.findUnique({
-  //         where: { id: linkId },
-  //       });
-
-  //       if (linkStillExists) {
-  //         await createFile({
-  //           filePath: `archives/${collectionPermissions?.id}/${
-  //             linkId + suffix
-  //           }`,
-  //           data: fileBuffer,
-  //         });
-
-  //         await prisma.link.update({
-  //           where: { id: linkId },
-  //           data: {
-  //             image: `archives/${collectionPermissions?.id}/${
-  //               linkId + suffix
-  //             }`,
-  //             lastPreserved: new Date().toISOString(),
-  //           },
-  //         });
-  //       }
-
-  //       fs.unlinkSync(files.file[0].filepath);
-  //     }
-
-  //     return res.status(200).json({
-  //       response: files,
-  //     });
-  //   });
-  // }
 }
@@ -1,7 +1,6 @@
 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";
@@ -66,6 +65,7 @@ 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";
+import { randomBytes } from "crypto";

 const emailEnabled =
  process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
@@ -106,22 +106,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 +137,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 +262,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(
@@ -520,6 +571,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,
+      },
    })
  );

@@ -0,0 +1,52 @@
+import { prisma } from "@/lib/api/db";
+import sendPasswordResetRequest from "@/lib/api/sendPasswordResetRequest";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function forgotPassword(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "POST") {
+    const email = req.body.email;
+
+    if (!email) {
+      return res.status(400).json({
+        response: "Invalid email.",
+      });
+    }
+
+    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: "Invalid email.",
+      });
+    }
+
+    sendPasswordResetRequest(user.email, user.name);
+
+    return res.status(200).json({
+      response: "Password reset email sent.",
+    });
+  }
+}
@@ -0,0 +1,80 @@
+import { prisma } from "@/lib/api/db";
+import type { NextApiRequest, NextApiResponse } from "next";
+import bcrypt from "bcrypt";
+
+export default async function resetPassword(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "POST") {
+    const token = req.body.token;
+    const password = req.body.password;
+
+    if (!password || password.length < 8) {
+      return res.status(400).json({
+        response: "Password must be at least 8 characters.",
+      });
+    }
+
+    if (!token || typeof token !== "string") {
+      return res.status(400).json({
+        response: "Invalid token.",
+      });
+    }
+
+    // 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,114 @@
+import { prisma } from "@/lib/api/db";
+import updateCustomerEmail from "@/lib/api/updateCustomerEmail";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function verifyEmail(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "POST") {
+    const token = req.query.token;
+
+    if (!token || typeof token !== "string") {
+      return res.status(400).json({
+        response: "Invalid token.",
+      });
+    }
+
+    // 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,
+    });
+  }
+}
@@ -2,8 +2,8 @@ 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 { removeFiles } from "@/lib/api/manageLinkFiles";

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

@@ -81,19 +81,5 @@ const deleteArchivedFiles = async (link: Link & { collection: Collection }) => {
    },
  });

-  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/${link.collection.id}/${link.id}.html`,
-  });
-  await removeFile({
-    filePath: `archives/preview/${link.collection.id}/${link.id}.png`,
-  });
+  await removeFiles(link.id, link.collection.id);
 };
@@ -391,6 +391,13 @@ 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" ||
@@ -4,6 +4,7 @@ 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: {
@@ -32,9 +33,10 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
    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 });
  }
@@ -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 = process.env.ADMINISTRATOR === user?.username;
+
+  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") {
@@ -53,7 +61,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
    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);
+    const updated = await deleteUserById(userId, req.body, isServerAdmin);
    return res.status(updated.status).json({ response: updated.response });
  }
 }
@@ -1,9 +1,18 @@
 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") {
    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 || process.env.ADMINISTRATOR !== user.username)
+      return res.status(401).json({ response: "Unauthorized..." });
+
+    const response = await getUsers();
+    return res.status(response.status).json({ response: response.response });
  }
 }
@@ -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>
-  );
-}
@@ -9,7 +9,6 @@ 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";
@@ -19,23 +18,22 @@ 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 MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
+import LinkListOptions from "@/components/LinkListOptions";

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

  const router = useRouter();

-  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
-    useLinkStore();
+  const { links } = useLinkStore();
  const { collections } = useCollectionStore();

  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -86,9 +84,6 @@ export default function Index() {
    };

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

  const [editCollectionModal, setEditCollectionModal] = useState(false);
@@ -96,8 +91,6 @@ 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(() => {
@@ -110,42 +103,13 @@ export default function Index() {

  const linkView = {
    [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
    [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
  };

  // @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
@@ -189,7 +153,7 @@ export default function Index() {
                        setEditCollectionModal(true);
                      }}
                    >
-                      Edit Collection Info
+                      {t("edit_collection_info")}
                    </div>
                  </li>
                )}
@@ -203,8 +167,8 @@ export default function Index() {
                    }}
                  >
                    {permissions === true
-                      ? "Share and Collaborate"
-                      : "View Team"}
+                      ? t("share_and_collaborate")
+                      : t("view_team")}
                  </div>
                </li>
                {permissions === true && (
@@ -217,7 +181,7 @@ export default function Index() {
                        setNewCollectionModal(true);
                      }}
                    >
-                      Create Sub-Collection
+                      {t("create_subcollection")}
                    </div>
                  </li>
                )}
@@ -231,8 +195,8 @@ export default function Index() {
                    }}
                  >
                    {permissions === true
-                      ? "Delete Collection"
-                      : "Leave Collection"}
+                      ? t("delete_collection")
+                      : t("leave_collection")}
                  </div>
                </li>
              </ul>
@@ -274,11 +238,23 @@ export default function Index() {
                  </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>
@@ -315,84 +291,37 @@ 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>
-
-        {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>
-        )}
+        <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>

        {links.some((e) => e.collectionId === Number(router.query.id)) ? (
          <LinkComponent
@@ -431,22 +360,10 @@ export default function Index() {
              activeCollection={activeCollection}
            />
          )}
-          {bulkDeleteLinksModal && (
-            <BulkDeleteLinksModal
-              onClose={() => {
-                setBulkDeleteLinksModal(false);
-              }}
-            />
-          )}
-          {bulkEditLinksModal && (
-            <BulkEditLinksModal
-              onClose={() => {
-                setBulkEditLinksModal(false);
-              }}
-            />
-          )}
        </>
      )}
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -8,8 +8,11 @@ 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";

 export default function Collections() {
+  const { t } = useTranslation();
  const { collections } = useCollectionStore();
  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
  const [sortedCollections, setSortedCollections] = useState(collections);
@@ -26,13 +29,13 @@ export default function Collections() {
        <div className="flex justify-between">
          <PageHeader
            icon={"bi-folder"}
-            title={"Collections"}
-            description={"Collections you own"}
+            title={t("collections")}
+            description={t("collections_you_own")}
          />

          <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,7 +51,9 @@ 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>
@@ -57,8 +62,8 @@ export default function Collections() {
          <>
            <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">
@@ -77,3 +82,5 @@ export default function Collections() {
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,27 +1,58 @@
 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 React, { 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>
+        <p>{t("verification_email_sent_desc")}</p>

-        <p className="mt-3">
-          Didn&apos;t see the email? Check your spam folder or visit the{" "}
-          <Link href="/forgot" className="font-bold underline">
-            Password Recovery
-          </Link>{" "}
-          page to resend the link.
-        </p>
+        <div 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 };
@@ -16,9 +16,12 @@ 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 MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";

 export default function Dashboard() {
+  const { t } = useTranslation();
  const { collections } = useCollectionStore();
  const { links } = useLinkStore();
  const { tags } = useTagStore();
@@ -41,12 +44,14 @@ export default function Dashboard() {

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

  const { width } = useWindowDimensions();
@@ -100,8 +105,9 @@ export default function Dashboard() {

  const linkView = {
    [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
+    // [ViewMode.Grid]: ,
    [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
  };

  // @ts-ignore
@@ -114,7 +120,7 @@ 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>
@@ -122,7 +128,7 @@ export default function Dashboard() {
        <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"}
+              name={numberOfLinks === 1 ? t("link") : t("links")}
              value={numberOfLinks}
              icon={"bi-link-45deg"}
            />
@@ -130,7 +136,9 @@ export default function Dashboard() {
            <div className="divider xl:divider-horizontal"></div>

            <DashboardItem
-              name={collections.length === 1 ? "Collection" : "Collections"}
+              name={
+                collections.length === 1 ? t("collection") : t("collections")
+              }
              value={collections.length}
              icon={"bi-folder"}
            />
@@ -138,7 +146,7 @@ export default function Dashboard() {
            <div className="divider xl:divider-horizontal"></div>

            <DashboardItem
-              name={tags.length === 1 ? "Tag" : "Tags"}
+              name={tags.length === 1 ? t("tag") : t("tags")}
              value={tags.length}
              icon={"bi-hash"}
            />
@@ -149,21 +157,21 @@ export default function Dashboard() {
          <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[0] ? "0 1 auto" : "1 1 auto" }}
          className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
        >
          {links[0] ? (
@@ -171,16 +179,12 @@ export default function Dashboard() {
              <LinkComponent links={links.slice(0, showLinks)} />
            </div>
          ) : (
-            <div
-              style={{ flex: "1 1 auto" }}
-              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
-            >
+            <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 +194,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,11 +205,11 @@ 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">
                    <li>
@@ -213,9 +217,9 @@ export default function Dashboard() {
                        tabIndex={0}
                        role="button"
                        htmlFor="import-linkwarden-file"
-                        title="JSON File"
+                        title={t("from_linkwarden")}
                      >
-                        From Linkwarden
+                        {t("from_linkwarden")}
                        <input
                          type="file"
                          name="photo"
@@ -233,9 +237,9 @@ export default function Dashboard() {
                        tabIndex={0}
                        role="button"
                        htmlFor="import-html-file"
-                        title="HTML File"
+                        title={t("from_html")}
                      >
-                        From Bookmarks HTML file
+                        {t("from_html")}
                        <input
                          type="file"
                          name="photo"
@@ -248,6 +252,26 @@ export default function Dashboard() {
                        />
                      </label>
                    </li>
+                    <li>
+                      <label
+                        tabIndex={0}
+                        role="button"
+                        htmlFor="import-wallabag-file"
+                        title={t("from_wallabag")}
+                      >
+                        {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 +283,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>
@@ -287,15 +311,14 @@ export default function Dashboard() {
          ) : (
            <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>
          )}
@@ -307,3 +330,5 @@ export default function Dashboard() {
    </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");
+  }, []);
 }
@@ -1,24 +1,21 @@
 import NoLinksFound from "@/components/NoLinksFound";
-import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import React, { useEffect, useState } from "react";
 import PageHeader from "@/components/PageHeader";
-import { Member, Sort, ViewMode } from "@/types/global";
-import ViewDropdown from "@/components/ViewDropdown";
+import { Sort, ViewMode } from "@/types/global";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
-import useCollectivePermissions from "@/hooks/useCollectivePermissions";
-import toast from "react-hot-toast";
-import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
-import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
 import { useRouter } from "next/router";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import LinkListOptions from "@/components/LinkListOptions";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";

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

  const [viewMode, setViewMode] = useState<string>(
    localStorage.getItem("viewMode") || ViewMode.Card
@@ -27,53 +24,18 @@ export default function Links() {

  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,
+    [ViewMode.Masonry]: MasonryView,
  };

  // @ts-ignore
@@ -82,113 +44,30 @@ export default function Links() {
  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")}
          />
-
-          <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>
-        )}
+        </LinkListOptions>

        {links[0] ? (
          <LinkComponent editMode={editMode} links={links} />
        ) : (
-          <NoLinksFound text="You Haven't Created Any Links Yet" />
+          <NoLinksFound text={t("you_have_not_added_any_links")} />
        )}
      </div>
-      {bulkDeleteLinksModal && (
-        <BulkDeleteLinksModal
-          onClose={() => {
-            setBulkDeleteLinksModal(false);
-          }}
-        />
-      )}
-      {bulkEditLinksModal && (
-        <BulkEditLinksModal
-          onClose={() => {
-            setBulkEditLinksModal(false);
-          }}
-        />
-      )}
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -1,23 +1,21 @@
-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 MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import LinkListOptions from "@/components/LinkListOptions";

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

  const [viewMode, setViewMode] = useState<string>(
    localStorage.getItem("viewMode") || ViewMode.Card
@@ -27,51 +25,16 @@ export default function PinnedLinks() {
  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,
+    [ViewMode.Masonry]: MasonryView,
  };

  // @ts-ignore
@@ -80,124 +43,48 @@ export default function PinnedLinks() {
  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>
-
-        {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>
-        )}
+        </LinkListOptions>

        {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
          <LinkComponent editMode={editMode} links={links} />
        ) : (
          <div
            style={{ flex: "1 1 auto" }}
-            className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
+            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>
        )}
      </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,14 @@ 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" />
          <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 +104,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 +118,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>
+            <div className="divider my-1">{t("or_continue_with")}</div>
          ) : undefined}
        </>
      );
    }
  }
+
  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>
+            ) : undefined}
+            {value.name}
+          </Button>
        </React.Fragment>
      );
    });
@@ -151,12 +179,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 +195,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 };
@@ -7,7 +7,6 @@ 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";
@@ -16,35 +15,25 @@ import ToggleDarkMode from "@/components/ToggleDarkMode";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import Image from "next/image";
 import Link from "next/link";
-import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import SortDropdown from "@/components/SortDropdown";
 import useLocalSettingsStore from "@/store/localSettings";
 import SearchBar from "@/components/SearchBar";
 import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
-import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
-
-const cardVariants: Variants = {
-  offscreen: {
-    y: 50,
-    opacity: 0,
-  },
-  onscreen: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      duration: 0.4,
-    },
-  },
-};
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import useCollectionStore from "@/store/collections";
+import LinkListOptions from "@/components/LinkListOptions";

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

  const { settings } = useLocalSettingsStore();

+  const { collections } = useCollectionStore();
+
  const router = useRouter();

  const [collectionOwner, setCollectionOwner] = useState({
@@ -86,7 +75,7 @@ export default function PublicCollections() {
    if (router.query.id) {
      getPublicCollectionData(Number(router.query.id), setCollection);
    }
-  }, []);
+  }, [collections]);

  useEffect(() => {
    const fetchOwner = async () => {
@@ -108,8 +97,8 @@ export default function PublicCollections() {

  const linkView = {
    [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
    [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
  };

  // @ts-ignore
@@ -148,7 +137,7 @@ export default function PublicCollections() {
                width={551}
                height={551}
                alt="Linkwarden"
-                title="Created with Linkwarden"
+                title={t("list_created_with_linkwarden")}
                className="h-8 w-fit mx-auto rounded"
              />
            </Link>
@@ -190,12 +179,22 @@ export default function PublicCollections() {
                ) : null}
              </div>

-              <p className="text-neutral text-sm font-semibold">
-                By {collectionOwner.name}
-                {collection.members.length > 0
-                  ? ` and ${collection.members.length} others`
-                  : undefined}
-                .
+              <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>
@@ -206,22 +205,27 @@ export default function PublicCollections() {
        <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">
+          <LinkListOptions
+            t={t}
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+            sortBy={sortBy}
+            setSortBy={setSortBy}
+            searchFilter={searchFilter}
+            setSearchFilter={setSearchFilter}
+          >
            <SearchBar
-              placeholder={`Search ${collection._count?.links} Links`}
+              placeholder={
+                collection._count?.links === 1
+                  ? t("search_count_link", {
+                      count: collection._count?.links,
+                    })
+                  : t("search_count_links", {
+                      count: collection._count?.links,
+                    })
+              }
            />
-
-            <div className="flex gap-2 items-center w-fit">
-              <FilterSearchDropdown
-                searchFilter={searchFilter}
-                setSearchFilter={setSearchFilter}
-              />
-
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-
-              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-            </div>
-          </div>
+          </LinkListOptions>

          {links[0] ? (
            <LinkComponent
@@ -236,7 +240,7 @@ export default function PublicCollections() {
                })}
            />
          ) : (
-            <p>This collection is empty...</p>
+            <p>{t("collection_is_empty")}</p>
          )}

          {/* <p className="text-center text-neutral">
@@ -255,3 +259,5 @@ export default function PublicCollections() {
    <></>
  );
 }
+
+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>
+            ) : undefined}
+            {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 })
                  }
@@ -148,33 +203,37 @@ export default function Register() {

            {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,6 +241,7 @@ 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 })
                }
@@ -189,48 +249,67 @@ export default function Register() {
            </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>
-                  .
+              <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>
+            ) : undefined}
+
+            {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>
+              ) : undefined}
            </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,19 +1,21 @@
-import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
-import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import PageHeader from "@/components/PageHeader";
-import { GridLoader, PropagateLoader } from "react-spinners";
+import { GridLoader } from "react-spinners";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import LinkListOptions from "@/components/LinkListOptions";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";

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

  const router = useRouter();
@@ -29,8 +31,15 @@ export default function Search() {
  const [viewMode, setViewMode] = useState<string>(
    localStorage.getItem("viewMode") || ViewMode.Card
  );
+
  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
+
  const { isLoading } = useLinks({
    sort: sortBy,
    searchQueryString: decodeURIComponent(router.query.q as string),
@@ -41,14 +50,10 @@ export default function Search() {
    searchByTags: searchFilter.tags,
  });

-  useEffect(() => {
-    console.log("isLoading", isLoading);
-  }, [isLoading]);
-
  const linkView = {
    [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
    [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
  };

  // @ts-ignore
@@ -57,30 +62,28 @@ export default function Search() {
  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"} />
-
-          <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>
+        </LinkListOptions>

        {!isLoading && !links[0] ? (
-          <p>
-            Nothing found.{" "}
-            <span className="font-bold text-xl" title="Shruggie">
-              ¯\_(ツ)_/¯
-            </span>
-          </p>
+          <p>{t("nothing_found")}</p>
        ) : links[0] ? (
-          <LinkComponent links={links} isLoading={isLoading} />
+          <LinkComponent
+            editMode={editMode}
+            links={links}
+            isLoading={isLoading}
+          />
        ) : (
          isLoading && (
            <GridLoader
@@ -95,3 +98,5 @@ export default function Search() {
    </MainLayout>
  );
 }
+
+export { getServerSideProps };
@@ -4,11 +4,14 @@ 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";

 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);
@@ -27,15 +30,14 @@ export default function AccessTokens() {

  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,7 +45,7 @@ export default function AccessTokens() {
            setNewTokenModal(true);
          }}
        >
-          New Access Token
+          {t("new_token")}
        </button>

        {tokens.length > 0 ? (
@@ -51,13 +53,12 @@ export default function AccessTokens() {
            <div className="divider my-0"></div>

            <table className="table">
-              {/* head */}
              <thead>
                <tr>
                  <th></th>
-                  <th>Name</th>
-                  <th>Created</th>
-                  <th>Expires</th>
+                  <th>{t("name")}</th>
+                  <th>{t("created")}</th>
+                  <th>{t("expires")}</th>
                  <th></th>
                </tr>
              </thead>
@@ -105,3 +106,5 @@ export default function AccessTokens() {
    </SettingsLayout>
  );
 }
+
+export { getServerSideProps };
@@ -12,14 +12,19 @@ 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";
+
+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 [user, setUser] = useState<AccountSettings>(
    !objectIsEmpty(account)
      ? account
@@ -30,6 +35,7 @@ export default function Account() {
          username: "",
          email: "",
          emailVerified: null,
+          password: undefined,
          image: "",
          isPrivate: true,
          // @ts-ignore
@@ -38,6 +44,8 @@ export default function Account() {
        } as unknown as AccountSettings)
  );

+  const { t } = useTranslation();
+
  function objectIsEmpty(obj: object) {
    return Object.keys(obj).length === 0;
  }
@@ -61,69 +69,66 @@ 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) => {
    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_settings"));

    const response = await updateAccount({
      ...user,
+      // @ts-ignore
+      password: password ? password : undefined,
    });

    toast.dismiss(load);

    if (response.ok) {
-      toast.success("Settings Applied!");
+      const emailChanged = account.email !== user.email;
+
+      toast.success(t("settings_applied"));
+      if (emailChanged) {
+        toast.success(t("email_change_request"));
+        setEmailChangeVerificationModal(false);
+      }
    } else toast.error(response.data as string);
    setSubmitLoader(false);
  };

  const importBookmarks = async (e: any, format: MigrationFormat) => {
    setSubmitLoader(true);
-
    const file: File = e.target.files[0];
-
    if (file) {
      var reader = new FileReader();
      reader.readAsText(file, "UTF-8");
      reader.onload = async function (e) {
-        const load = toast.loading("Importing...");
-
+        const 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 +146,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 +161,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,23 +169,16 @@ 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 ? (
              <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 || ""}
                  className="bg-base-200"
@@ -190,50 +186,129 @@ export default function Account() {
                />
              </div>
            ) : undefined}
+            <div>
+              <p className="mb-2">{t("language")}</p>
+              <select
+                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}
+                    selected={user.locale === locale}
+                  >
+                    {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 w-60">
+                  <li>
+                    <label tabIndex={0} role="button">
+                      {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: "",
+                          })
+                        }
+                      >
+                        {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 +316,29 @@ 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>
+                  {t("import_links")}
+                </Button>
+
                <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
                  <li>
                    <label
                      tabIndex={0}
                      role="button"
                      htmlFor="import-linkwarden-file"
-                      title="JSON File"
+                      title={t("from_linkwarden")}
                    >
-                      From Linkwarden
+                      {t("from_linkwarden")}
                      <input
                        type="file"
                        name="photo"
@@ -279,9 +356,9 @@ export default function Account() {
                      tabIndex={0}
                      role="button"
                      htmlFor="import-html-file"
-                      title="HTML File"
+                      title={t("from_html")}
                    >
-                      From Bookmarks HTML file
+                      {t("from_html")}
                      <input
                        type="file"
                        name="photo"
@@ -294,92 +371,74 @@ export default function Account() {
                      />
                    </label>
                  </li>
+                  <li>
+                    <label
+                      tabIndex={0}
+                      role="button"
+                      htmlFor="import-wallabag-file"
+                      title={t("from_wallabag")}
+                    >
+                      {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.{" "}
+            {t("delete_account_warning")}
            {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("cancel_subscription_notice")
+              : undefined}
          </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 || ""}
+        />
+      ) : undefined}
    </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>
-
-            <TextInput
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="••••••••••••••"
-              className="bg-base-100"
-              type="password"
-            />
-          </div>
-        ) : undefined}
+        <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>

        {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 };
@@ -4,72 +4,72 @@ 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";

 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 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_changes"));

    const response = await updateAccount({
      ...account,
      newPassword,
+      oldPassword,
    });

    toast.dismiss(load);

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

    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 +77,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,33 +1,39 @@
 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";

 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 [user, setUser] = useState(account);

-  const [preventDuplicateLinks, setPreventDuplicateLinks] =
-    useState<boolean>(false);
-  const [archiveAsScreenshot, setArchiveAsScreenshot] =
-    useState<boolean>(false);
-  const [archiveAsSinglefile, setArchiveAsSinglefile] =
-    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 [archiveAsSinglefile, setArchiveAsSinglefile] = useState<boolean>(
+    account.archiveAsSinglefile
+  );
+
+  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
+    useState<boolean>(account.archiveAsWaybackMachine);
+
+  const [linksRouteTo, setLinksRouteTo] = useState(account.linksRouteTo);

  useEffect(() => {
    setUser({
@@ -67,29 +73,29 @@ export default function Appearance() {
  const submit = async () => {
    setSubmitLoader(true);

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

-    const response = await updateAccount({
-      ...user,
-    });
+    const response = await updateAccount({ ...user });

    toast.dismiss(load);

    if (response.ok) {
-      toast.success("Settings Applied!");
-    } else toast.error(response.data as string);
+      toast.success(t("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 ${
@@ -100,9 +106,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 ${
@@ -113,23 +117,20 @@ 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)}
            />
@@ -141,13 +142,12 @@ export default function Appearance() {
            />

            <Checkbox
-              label="PDF"
+              label={t("pdf")}
              state={archiveAsPDF}
              onClick={() => setArchiveAsPDF(!archiveAsPDF)}
            />
-
            <Checkbox
-              label="Archive.org Snapshot"
+              label={t("archive_org_snapshot")}
              state={archiveAsWaybackMachine}
              onClick={() =>
                setArchiveAsWaybackMachine(!archiveAsWaybackMachine)
@@ -157,18 +157,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"
@@ -183,7 +183,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
@@ -199,7 +199,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
@@ -215,7 +215,25 @@ 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="Singlefile"
+                checked={linksRouteTo === LinksRouteTo.SINGLEFILE}
+                onChange={() => setLinksRouteTo(LinksRouteTo.SINGLEFILE)}
+              />
+              <span className="label-text">Open Singlefile, if available</span>
            </label>

            <label
@@ -247,7 +265,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>
@@ -255,10 +275,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 useAccountStore from "@/store/account";
+
+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 { account } = useAccountStore();
+
+  useEffect(() => {
+    const hasInactiveSubscription =
+      account.id && !account.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,26 +1,26 @@
 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 { dropdownTriggerer } from "@/lib/client/utils";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
-import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import LinkListOptions from "@/components/LinkListOptions";

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

-  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
-    useLinkStore();
+  const { links } = useLinkStore();
  const { tags, updateTag, removeTag } = useTagStore();

  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -38,10 +38,6 @@ 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 });

  useEffect(() => {
@@ -76,7 +72,7 @@ export default function Index() {

    setSubmitLoader(true);

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

    let response;

@@ -89,7 +85,7 @@ export default function Index() {
    toast.dismiss(load);

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

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

    let response;

@@ -107,50 +103,21 @@ export default function Index() {
    toast.dismiss(load);

    if (response?.ok) {
-      toast.success("Tag Removed.");
+      toast.success(t("tag_deleted"));
      router.push("/links");
    } else toast.error(response?.data as string);
    setSubmitLoader(false);
    setRenameTag(false);
  };

-  const handleSelectAll = () => {
-    if (selectedLinks.length === links.length) {
-      setSelectedLinks([]);
-    } else {
-      setSelectedLinks(links.map((link) => link));
-    }
-  };
-
-  const bulkDeleteLinks = async () => {
-    const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
-      }...`
-    );
-
-    const response = await deleteLinksById(
-      selectedLinks.map((link) => link.id as number)
-    );
-
-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
-        }!`
-      );
-  };
-
  const [viewMode, setViewMode] = useState<string>(
    localStorage.getItem("viewMode") || ViewMode.Card
  );

  const linkView = {
    [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
    [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
  };

  // @ts-ignore
@@ -159,7 +126,15 @@ export default function Index() {
  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"} />
@@ -223,7 +198,7 @@ export default function Index() {
                              setRenameTag(true);
                            }}
                          >
-                            Rename Tag
+                            {t("rename_tag")}
                          </div>
                        </li>
                        <li>
@@ -235,7 +210,7 @@ export default function Index() {
                              remove();
                            }}
                          >
-                            Remove Tag
+                            {t("delete_tag")}
                          </div>
                        </li>
                      </ul>
@@ -245,83 +220,8 @@ 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
          editMode={editMode}
          links={links.filter((e) =>
@@ -346,3 +246,5 @@ export default function Index() {
    </MainLayout>
  );
 }
+
+export { getServerSideProps };