diff --git a/.env.sample b/.env.sample
index 39e1e43..1277ade 100644
--- a/.env.sample
+++ b/.env.sample
@@ -9,6 +9,7 @@ STORAGE_FOLDER=
 AUTOSCROLL_TIMEOUT=
 NEXT_PUBLIC_DISABLE_REGISTRATION=
 IMPORT_SIZE_LIMIT=
+RE_ARCHIVE_LIMIT=
 
 # AWS S3 Settings
 SPACES_KEY=
diff --git a/README.md b/README.md
index a830530..cf74430 100644
--- a/README.md
+++ b/README.md
@@ -96,7 +96,6 @@ Here are the other ways to support/cheer this project:
 
 - Starring this repository.
 - Joining us on [Discord](https://discord.com/invite/CtuYV47nuJ).
-- Following @daniel31x13 on [Mastodon](https://mastodon.social/@daniel31x13), [Twitter](https://twitter.com/daniel31x13) and [GitHub](https://github.com/daniel31x13).
 - Referring Linkwarden to a friend.
 
 If you did any of the above, Thanksss! Otherwise thanks.
diff --git a/components/AnnouncementBar.tsx b/components/AnnouncementBar.tsx
new file mode 100644
index 0000000..6e46eea
--- /dev/null
+++ b/components/AnnouncementBar.tsx
@@ -0,0 +1,35 @@
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
+import React, { MouseEventHandler } from "react";
+
+type Props = {
+  toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
+};
+
+export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
+  return (
+    <div className="fixed w-full z-20 dark:bg-neutral-900 bg-white">
+      <div className="w-full h-10 rainbow flex items-center justify-center">
+        <div className="w-fit font-semibold">
+          🎉️{" "}
+          <Link
+            href="https://blog.linkwarden.app/releases/v2.0"
+            target="_blank"
+            className="underline hover:opacity-50 duration-100"
+          >
+            Linkwarden v2.0
+          </Link>{" "}
+          is now out! 🥳️
+        </div>
+
+        <button
+          className="fixed top-3 right-3 hover:opacity-50 duration-100"
+          onClick={toggleAnnouncementBar}
+        >
+          <FontAwesomeIcon icon={faClose} className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
index 6c661c5..d54c08b 100644
--- a/components/Checkbox.tsx
+++ b/components/Checkbox.tsx
@@ -11,7 +11,9 @@ type Props = {
 
 export default function Checkbox({ label, state, className, onClick }: Props) {
   return (
-    <label className={`cursor-pointer flex items-center gap-2 ${className}`}>
+    <label
+      className={`cursor-pointer flex items-center gap-2 ${className || ""}`}
+    >
       <input
         type="checkbox"
         checked={state}
diff --git a/components/ClickAwayHandler.tsx b/components/ClickAwayHandler.tsx
index 88ff23b..63378a1 100644
--- a/components/ClickAwayHandler.tsx
+++ b/components/ClickAwayHandler.tsx
@@ -4,6 +4,8 @@ type Props = {
   children: ReactNode;
   onClickOutside: Function;
   className?: string;
+  style?: React.CSSProperties;
+  onMount?: (rect: DOMRect) => void;
 };
 
 function useOutsideAlerter(
@@ -30,12 +32,22 @@ export default function ClickAwayHandler({
   children,
   onClickOutside,
   className,
+  style,
+  onMount,
 }: Props) {
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
   useOutsideAlerter(wrapperRef, onClickOutside);
 
+  useEffect(() => {
+    if (wrapperRef.current && onMount) {
+      const rect = wrapperRef.current.getBoundingClientRect();
+      onMount(rect); // Pass the bounding rectangle to the parent
+    }
+  }, []);
+
   return (
-    <div ref={wrapperRef} className={className}>
+    <div ref={wrapperRef} className={className} style={style}>
       {children}
     </div>
   );
diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 76a2706..c382f6e 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -15,6 +15,13 @@ type Props = {
   className?: string;
 };
 
+type DropdownTrigger =
+  | {
+      x: number;
+      y: number;
+    }
+  | false;
+
 export default function CollectionCard({ collection, className }: Props) {
   const { setModal } = useModalStore();
 
@@ -29,81 +36,86 @@ export default function CollectionCard({ collection, className }: Props) {
     }
   );
 
-  const [expandDropdown, setExpandDropdown] = useState(false);
+  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);
 
   const permissions = usePermissions(collection.id as number);
 
   return (
-    <div
-      style={{
-        backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
-          theme === "dark" ? "#262626" : "#f3f4f6"
-        } 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
-      }}
-      className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
-    >
+    <>
       <div
-        onClick={() => setExpandDropdown(!expandDropdown)}
-        id={"expand-dropdown" + collection.id}
-        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+        style={{
+          backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
+            theme === "dark" ? "#262626" : "#f3f4f6"
+          } 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
+        }}
+        className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
+          className || ""
+        }`}
       >
-        <FontAwesomeIcon
-          icon={faEllipsis}
+        <div
+          onClick={(e) => setExpandDropdown({ x: e.clientX, y: e.clientY })}
           id={"expand-dropdown" + collection.id}
-          className="w-5 h-5 text-gray-500 dark:text-gray-300"
-        />
-      </div>
-      <Link
-        href={`/collections/${collection.id}`}
-        className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
-      >
-        <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
-          {collection.name}
-        </p>
-        <div className="flex justify-between items-center">
-          <div className="flex items-center w-full">
-            {collection.members
-              .sort((a, b) => (a.userId as number) - (b.userId as number))
-              .map((e, i) => {
-                return (
-                  <ProfilePhoto
-                    key={i}
-                    src={`/api/v1/avatar/${e.userId}?${Date.now()}`}
-                    className="-mr-3 border-[3px]"
-                  />
-                );
-              })
-              .slice(0, 4)}
-            {collection.members.length - 4 > 0 ? (
-              <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
-                +{collection.members.length - 4}
-              </div>
-            ) : null}
-          </div>
-          <div className="text-right w-40">
-            <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
-              {collection.isPublic ? (
-                <FontAwesomeIcon
-                  icon={faGlobe}
-                  title="This collection is being shared publicly."
-                  className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
-                />
-              ) : undefined}
-              <FontAwesomeIcon
-                icon={faLink}
-                className="w-5 h-5 text-gray-500 dark:text-gray-300"
-              />
-              {collection._count && collection._count.links}
-            </div>
-            <div className="flex items-center justify-end gap-1 text-gray-500 dark:text-gray-300">
-              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              <p className="font-bold text-xs">{formattedDate}</p>
-            </div>
-          </div>
+          className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+        >
+          <FontAwesomeIcon
+            icon={faEllipsis}
+            id={"expand-dropdown" + collection.id}
+            className="w-5 h-5 text-gray-500 dark:text-gray-300"
+          />
         </div>
-      </Link>
+        <Link
+          href={`/collections/${collection.id}`}
+          className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
+        >
+          <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
+            {collection.name}
+          </p>
+          <div className="flex justify-between items-center">
+            <div className="flex items-center w-full">
+              {collection.members
+                .sort((a, b) => (a.userId as number) - (b.userId as number))
+                .map((e, i) => {
+                  return (
+                    <ProfilePhoto
+                      key={i}
+                      src={e.user.image ? e.user.image : undefined}
+                      className="-mr-3 border-[3px]"
+                    />
+                  );
+                })
+                .slice(0, 4)}
+              {collection.members.length - 4 > 0 ? (
+                <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
+                  +{collection.members.length - 4}
+                </div>
+              ) : null}
+            </div>
+            <div className="text-right w-40">
+              <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
+                {collection.isPublic ? (
+                  <FontAwesomeIcon
+                    icon={faGlobe}
+                    title="This collection is being shared publicly."
+                    className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
+                  />
+                ) : undefined}
+                <FontAwesomeIcon
+                  icon={faLink}
+                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                />
+                {collection._count && collection._count.links}
+              </div>
+              <div className="flex items-center justify-end gap-1 text-gray-500 dark:text-gray-300">
+                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+                <p className="font-bold text-xs">{formattedDate}</p>
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
       {expandDropdown ? (
         <Dropdown
+          points={{ x: expandDropdown.x, y: expandDropdown.y }}
           items={[
             permissions === true
               ? {
@@ -159,9 +171,9 @@ export default function CollectionCard({ collection, className }: Props) {
             if (target.id !== "expand-dropdown" + collection.id)
               setExpandDropdown(false);
           }}
-          className="absolute top-[3.2rem] right-5 z-10 w-fit"
+          className="w-fit"
         />
       ) : null}
-    </div>
+    </>
   );
 }
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index abc9e46..ac1ee59 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import React, { MouseEventHandler } from "react";
+import React, { MouseEventHandler, useEffect, useState } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 
 type MenuItem =
@@ -19,13 +19,66 @@ type Props = {
   onClickOutside: Function;
   className?: string;
   items: MenuItem[];
+  points?: { x: number; y: number };
+  style?: React.CSSProperties;
 };
 
-export default function Dropdown({ onClickOutside, className, items }: Props) {
-  return (
+export default function Dropdown({
+  points,
+  onClickOutside,
+  className,
+  items,
+}: Props) {
+  const [pos, setPos] = useState<{ x: number; y: number }>();
+  const [dropdownHeight, setDropdownHeight] = useState<number>();
+  const [dropdownWidth, setDropdownWidth] = useState<number>();
+
+  function convertRemToPixels(rem: number) {
+    return (
+      rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
+    );
+  }
+
+  useEffect(() => {
+    if (points) {
+      let finalX = points.x;
+      let finalY = points.y;
+
+      // Check for x-axis overflow (left side)
+      if (dropdownWidth && points.x + dropdownWidth > window.innerWidth) {
+        finalX = points.x - dropdownWidth;
+      }
+
+      // Check for y-axis overflow (bottom side)
+      if (dropdownHeight && points.y + dropdownHeight > window.innerHeight) {
+        finalY =
+          window.innerHeight -
+          (dropdownHeight + (window.innerHeight - points.y));
+      }
+
+      setPos({ x: finalX, y: finalY });
+    }
+  }, [points, dropdownHeight]);
+
+  return !points || pos ? (
     <ClickAwayHandler
+      onMount={(e) => {
+        setDropdownHeight(e.height);
+        setDropdownWidth(e.width);
+      }}
+      style={
+        points
+          ? {
+              position: "fixed",
+              top: `${pos?.y}px`,
+              left: `${pos?.x}px`,
+            }
+          : undefined
+      }
       onClickOutside={onClickOutside}
-      className={`${className} py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+      className={`${
+        className || ""
+      } py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         const inner = e && (
@@ -49,5 +102,5 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
         );
       })}
     </ClickAwayHandler>
-  );
+  ) : null;
 }
diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx
index 2c835ab..0b32bee 100644
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@@ -1,12 +1,17 @@
 import React, { SetStateAction } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 import Checkbox from "./Checkbox";
-import { LinkSearchFilter } from "@/types/global";
 
 type Props = {
   setFilterDropdown: (value: SetStateAction<boolean>) => void;
   setSearchFilter: Function;
-  searchFilter: LinkSearchFilter;
+  searchFilter: {
+    name: boolean;
+    url: boolean;
+    description: boolean;
+    textContent: boolean;
+    tags: boolean;
+  };
 };
 
 export default function FilterSearchDropdown({
@@ -50,6 +55,16 @@ export default function FilterSearchDropdown({
             })
           }
         />
+        <Checkbox
+          label="Text Content"
+          state={searchFilter.textContent}
+          onClick={() =>
+            setSearchFilter({
+              ...searchFilter,
+              textContent: !searchFilter.textContent,
+            })
+          }
+        />
         <Checkbox
           label="Tags"
           state={searchFilter.tags}
diff --git a/components/InputSelect/styles.ts b/components/InputSelect/styles.ts
index b86698a..2e2be2b 100644
--- a/components/InputSelect/styles.ts
+++ b/components/InputSelect/styles.ts
@@ -36,10 +36,6 @@ export const styles: StylesConfig = {
     ...styles,
     cursor: "pointer",
   }),
-  clearIndicator: (styles) => ({
-    ...styles,
-    visibility: "hidden",
-  }),
   placeholder: (styles) => ({
     ...styles,
     borderColor: "black",
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 04903fa..55b5d1b 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -21,6 +21,7 @@ import { toast } from "react-hot-toast";
 import isValidUrl from "@/lib/client/isValidUrl";
 import Link from "next/link";
 import unescapeString from "@/lib/client/unescapeString";
+import { useRouter } from "next/router";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -28,12 +29,21 @@ type Props = {
   className?: string;
 };
 
+type DropdownTrigger =
+  | {
+      x: number;
+      y: number;
+    }
+  | false;
+
 export default function LinkCard({ link, count, className }: Props) {
   const { setModal } = useModalStore();
 
+  const router = useRouter();
+
   const permissions = usePermissions(link.collection.id as number);
 
-  const [expandDropdown, setExpandDropdown] = useState(false);
+  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);
 
   const { collections } = useCollectionStore();
 
@@ -64,7 +74,7 @@ export default function LinkCard({ link, count, className }: Props) {
     );
   }, [collections, links]);
 
-  const { removeLink, updateLink } = useLinkStore();
+  const { removeLink, updateLink, getLink } = useLinkStore();
 
   const pinLink = async () => {
     const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
@@ -84,6 +94,25 @@ export default function LinkCard({ link, count, className }: Props) {
       toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
   };
 
+  const updateArchive = async () => {
+    const load = toast.loading("Sending request...");
+
+    setExpandDropdown(false);
+
+    const response = await fetch(`/api/v1/links/${link.id}/archive`, {
+      method: "PUT",
+    });
+
+    const data = await response.json();
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success(`Link is being archived...`);
+      getLink(link.id as number);
+    } else toast.error(data.response);
+  };
+
   const deleteLink = async () => {
     const load = toast.loading("Deleting...");
 
@@ -107,100 +136,98 @@ export default function LinkCard({ link, count, className }: Props) {
   );
 
   return (
-    <div
-      className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${className}`}
-    >
-      {(permissions === true ||
-        permissions?.canUpdate ||
-        permissions?.canDelete) && (
-        <div
-          onClick={() => setExpandDropdown(!expandDropdown)}
-          id={"expand-dropdown" + link.id}
-          className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
-        >
-          <FontAwesomeIcon
-            icon={faEllipsis}
-            title="More"
-            className="w-5 h-5"
-            id={"expand-dropdown" + link.id}
-          />
-        </div>
-      )}
-
+    <>
       <div
-        onClick={() => {
-          setModal({
-            modal: "LINK",
-            state: true,
-            method: "UPDATE",
-            isOwnerOrMod:
-              permissions === true || (permissions?.canUpdate as boolean),
-            active: link,
-          });
-        }}
-        className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
+        className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${
+          className || ""
+        }`}
       >
-        {url && (
-          <Image
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-            width={64}
-            height={64}
-            alt=""
-            className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none"
-            draggable="false"
-            onError={(e) => {
-              const target = e.target as HTMLElement;
-              target.style.display = "none";
+        {(permissions === true ||
+          permissions?.canUpdate ||
+          permissions?.canDelete) && (
+          <div
+            onClick={(e) => {
+              setExpandDropdown({ x: e.clientX, y: e.clientY });
             }}
-          />
+            id={"expand-dropdown" + link.id}
+            className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
+          >
+            <FontAwesomeIcon
+              icon={faEllipsis}
+              title="More"
+              className="w-5 h-5"
+              id={"expand-dropdown" + link.id}
+            />
+          </div>
         )}
 
-        <div className="flex justify-between gap-5 w-full h-full z-0">
-          <div className="flex flex-col justify-between w-full">
-            <div className="flex items-baseline gap-1">
-              <p className="text-sm text-gray-500 dark:text-gray-300">
-                {count + 1}
-              </p>
-              <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
-                {unescapeString(link.name || link.description)}
-              </p>
-            </div>
-            <Link
-              href={`/collections/${link.collection.id}`}
-              onClick={(e) => {
-                e.stopPropagation();
+        <div
+          onClick={() => router.push("/links/" + link.id)}
+          className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
+        >
+          {url && (
+            <Image
+              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+              width={64}
+              height={64}
+              alt=""
+              className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none"
+              draggable="false"
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
               }}
-              className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
-            >
-              <FontAwesomeIcon
-                icon={faFolder}
-                className="w-4 h-4 mt-1 drop-shadow"
-                style={{ color: collection?.color }}
-              />
-              <p className="text-black dark:text-white truncate capitalize w-full">
-                {collection?.name}
-              </p>
-            </Link>
-            <Link
-              href={link.url}
-              target="_blank"
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-              className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
-            >
-              <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
-              <p className="truncate w-full">{shortendURL}</p>
-            </Link>
-            <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
-              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              <p>{formattedDate}</p>
+            />
+          )}
+
+          <div className="flex justify-between gap-5 w-full h-full z-0">
+            <div className="flex flex-col justify-between w-full">
+              <div className="flex items-baseline gap-1">
+                <p className="text-sm text-gray-500 dark:text-gray-300">
+                  {count + 1}
+                </p>
+                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
+                  {unescapeString(link.name || link.description)}
+                </p>
+              </div>
+              <Link
+                href={`/collections/${link.collection.id}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
+              >
+                <FontAwesomeIcon
+                  icon={faFolder}
+                  className="w-4 h-4 mt-1 drop-shadow"
+                  style={{ color: collection?.color }}
+                />
+                <p className="text-black dark:text-white truncate capitalize w-full">
+                  {collection?.name}
+                </p>
+              </Link>
+              <Link
+                href={link.url}
+                target="_blank"
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
+              >
+                <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+                <p className="truncate w-full">{shortendURL}</p>
+              </Link>
+              <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
+                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+                <p>{formattedDate}</p>
+              </div>
             </div>
           </div>
         </div>
       </div>
       {expandDropdown ? (
         <Dropdown
+          points={{ x: expandDropdown.x, y: expandDropdown.y }}
           items={[
             permissions === true
               ? {
@@ -219,15 +246,18 @@ export default function LinkCard({ link, count, className }: Props) {
                       modal: "LINK",
                       state: true,
                       method: "UPDATE",
-                      isOwnerOrMod:
-                        permissions === true || permissions?.canUpdate,
                       active: link,
-                      defaultIndex: 1,
                     });
                     setExpandDropdown(false);
                   },
                 }
               : undefined,
+            permissions === true
+              ? {
+                  name: "Refresh Formats",
+                  onClick: updateArchive,
+                }
+              : undefined,
             permissions === true || permissions?.canDelete
               ? {
                   name: "Delete",
@@ -240,9 +270,9 @@ export default function LinkCard({ link, count, className }: Props) {
             if (target.id !== "expand-dropdown" + link.id)
               setExpandDropdown(false);
           }}
-          className="absolute top-12 right-5 w-40"
+          className="w-40"
         />
       ) : null}
-    </div>
+    </>
   );
 }
diff --git a/components/LinkSidebar.tsx b/components/LinkSidebar.tsx
new file mode 100644
index 0000000..6ffc2f5
--- /dev/null
+++ b/components/LinkSidebar.tsx
@@ -0,0 +1,138 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faPen,
+  faBoxesStacked,
+  faTrashCan,
+} from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import useModalStore from "@/store/modals";
+import useLinkStore from "@/store/links";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useSession } from "next-auth/react";
+import useCollectionStore from "@/store/collections";
+
+type Props = {
+  className?: string;
+  onClick?: Function;
+};
+
+export default function SettingsSidebar({ className, onClick }: Props) {
+  const session = useSession();
+  const userId = session.data?.user.id;
+
+  const { setModal } = useModalStore();
+
+  const { links, removeLink } = useLinkStore();
+  const { collections } = useCollectionStore();
+
+  const [linkCollection, setLinkCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  useEffect(() => {
+    if (link)
+      setLinkCollection(collections.find((e) => e.id === link?.collection.id));
+  }, [link]);
+
+  return (
+    <div
+      className={`dark:bg-neutral-900 bg-white h-full lg:w-10 w-62 overflow-y-auto lg:p-0 p-5 border-solid border-white border dark:border-neutral-900 dark:lg:border-r-neutral-900 lg:border-r-white border-r-sky-100 dark:border-r-neutral-700 z-20 flex flex-col gap-5 lg:justify-center justify-start ${
+        className || ""
+      }`}
+    >
+      <div className="flex flex-col gap-5">
+        {link?.collection.ownerId === userId ||
+        linkCollection?.members.some(
+          (e) => e.userId === userId && e.canUpdate
+        ) ? (
+          <div
+            title="Edit"
+            onClick={() => {
+              link
+                ? setModal({
+                    modal: "LINK",
+                    state: true,
+                    active: link,
+                    method: "UPDATE",
+                  })
+                : undefined;
+              onClick && onClick();
+            }}
+            className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faPen}
+              className="w-6 h-6 text-gray-500 dark:text-gray-300"
+            />
+
+            <p className="text-black dark:text-white truncate w-full lg:hidden">
+              Edit
+            </p>
+          </div>
+        ) : undefined}
+
+        <div
+          onClick={() => {
+            link
+              ? setModal({
+                  modal: "LINK",
+                  state: true,
+                  active: link,
+                  method: "FORMATS",
+                })
+              : undefined;
+            onClick && onClick();
+          }}
+          title="Preserved Formats"
+          className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+        >
+          <FontAwesomeIcon
+            icon={faBoxesStacked}
+            className="w-6 h-6 text-gray-500 dark:text-gray-300"
+          />
+
+          <p className="text-black dark:text-white truncate w-full lg:hidden">
+            Preserved Formats
+          </p>
+        </div>
+
+        {link?.collection.ownerId === userId ||
+        linkCollection?.members.some(
+          (e) => e.userId === userId && e.canDelete
+        ) ? (
+          <div
+            onClick={() => {
+              if (link?.id) {
+                removeLink(link.id);
+                router.back();
+                onClick && onClick();
+              }
+            }}
+            title="Delete"
+            className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faTrashCan}
+              className="w-6 h-6 text-gray-500 dark:text-gray-300"
+            />
+
+            <p className="text-black dark:text-white truncate w-full lg:hidden">
+              Delete
+            </p>
+          </div>
+        ) : undefined}
+      </div>
+    </div>
+  );
+}
diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index ff00919..f0e71b2 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@@ -6,7 +6,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import RequiredBadge from "../../RequiredBadge";
 import SubmitButton from "@/components/SubmitButton";
 import { HexColorPicker } from "react-colorful";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -61,10 +60,7 @@ export default function CollectionInfo({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
-          <p className="text-sm text-black dark:text-white mb-2">
-            Name
-            <RequiredBadge />
-          </p>
+          <p className="text-black dark:text-white mb-2">Name</p>
           <div className="flex flex-col gap-3">
             <TextInput
               value={collection.name}
@@ -75,9 +71,7 @@ export default function CollectionInfo({
             />
             <div className="color-picker flex justify-between">
               <div className="flex flex-col justify-between items-center w-32">
-                <p className="text-sm w-full text-black dark:text-white mb-2">
-                  Icon Color
-                </p>
+                <p className="w-full text-black dark:text-white mb-2">Color</p>
                 <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
@@ -102,7 +96,7 @@ export default function CollectionInfo({
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-black dark:text-white mb-2">Description</p>
+          <p className="text-black dark:text-white mb-2">Description</p>
           <textarea
             className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
             placeholder="The purpose of this Collection..."
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index b163681..b625570 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -9,7 +9,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
-import { useSession } from "next-auth/react";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import Checkbox from "../../Checkbox";
 import SubmitButton from "@/components/SubmitButton";
@@ -18,6 +17,7 @@ import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import TextInput from "@/components/TextInput";
+import useAccountStore from "@/store/account";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -34,26 +34,20 @@ export default function TeamManagement({
   collection,
   method,
 }: Props) {
+  const { account } = useAccountStore();
   const permissions = usePermissions(collection.id as number);
 
   const currentURL = new URL(document.URL);
 
   const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
 
-  const [member, setMember] = useState<Member>({
-    canCreate: false,
-    canUpdate: false,
-    canDelete: false,
-    user: {
-      name: "",
-      username: "",
-    },
-  });
+  const [memberUsername, setMemberUsername] = useState("");
 
   const [collectionOwner, setCollectionOwner] = useState({
     id: null,
     name: "",
     username: "",
+    image: "",
   });
 
   useEffect(() => {
@@ -67,8 +61,6 @@ export default function TeamManagement({
 
   const { addCollection, updateCollection } = useCollectionStore();
 
-  const session = useSession();
-
   const setMemberState = (newMember: Member) => {
     if (!collection) return null;
 
@@ -77,15 +69,7 @@ export default function TeamManagement({
       members: [...collection.members, newMember],
     });
 
-    setMember({
-      canCreate: false,
-      canUpdate: false,
-      canDelete: false,
-      user: {
-        name: "",
-        username: "",
-      },
-    });
+    setMemberUsername("");
   };
 
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -118,7 +102,7 @@ export default function TeamManagement({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {permissions === true && (
         <>
-          <p className="text-sm text-black dark:text-white">Make Public</p>
+          <p className="text-black dark:text-white">Make Public</p>
 
           <Checkbox
             label="Make this a public collection."
@@ -136,7 +120,7 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="text-sm text-black dark:text-white mb-2">
+          <p className="text-black dark:text-white mb-2">
             Public Link (Click to copy)
           </p>
           <div
@@ -162,25 +146,18 @@ export default function TeamManagement({
 
       {permissions === true && (
         <>
-          <p className="text-sm text-black dark:text-white">
-            Member Management
-          </p>
+          <p className="text-black dark:text-white">Member Management</p>
 
           <div className="flex items-center gap-2">
             <TextInput
-              value={member.user.username || ""}
+              value={memberUsername || ""}
               placeholder="Username (without the '@')"
-              onChange={(e) => {
-                setMember({
-                  ...member,
-                  user: { ...member.user, username: e.target.value },
-                });
-              }}
+              onChange={(e) => setMemberUsername(e.target.value)}
               onKeyDown={(e) =>
                 e.key === "Enter" &&
                 addMemberToCollection(
-                  session.data?.user.username as string,
-                  member.user.username || "",
+                  account.username as string,
+                  memberUsername || "",
                   collection,
                   setMemberState
                 )
@@ -190,8 +167,8 @@ export default function TeamManagement({
             <div
               onClick={() =>
                 addMemberToCollection(
-                  session.data?.user.username as string,
-                  member.user.username || "",
+                  account.username as string,
+                  memberUsername || "",
                   collection,
                   setMemberState
                 )
@@ -238,7 +215,7 @@ export default function TeamManagement({
                     )}
                     <div className="flex items-center gap-2">
                       <ProfilePhoto
-                        src={`/api/v1/avatar/${e.userId}?${Date.now()}`}
+                        src={e.user.image ? e.user.image : undefined}
                         className="border-[3px]"
                       />
                       <div>
@@ -425,7 +402,7 @@ export default function TeamManagement({
       >
         <div className="flex items-center gap-2">
           <ProfilePhoto
-            src={`/api/v1/avatar/${collection.ownerId}?${Date.now()}`}
+            src={collectionOwner.image ? collectionOwner.image : undefined}
             className="border-[3px]"
           />
           <div>
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index dcdf422..79f6979 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -4,8 +4,7 @@ import TagSelection from "@/components/InputSelect/TagSelection";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import RequiredBadge from "../../RequiredBadge";
+import { faLink, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { useSession } from "next-auth/react";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
@@ -14,6 +13,7 @@ import { toast } from "react-hot-toast";
 import Link from "next/link";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props =
   | {
@@ -46,6 +46,10 @@ export default function AddOrEditLink({
       url: "",
       description: "",
       tags: [],
+      screenshotPath: "",
+      pdfPath: "",
+      readabilityPath: "",
+      textContent: "",
       collection: {
         name: "",
         ownerId: data?.user.id as number,
@@ -133,24 +137,21 @@ export default function AddOrEditLink({
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {method === "UPDATE" ? (
-        <p
-          className="text-gray-500 dark:text-gray-300 text-center truncate w-full"
+        <div
+          className="text-gray-500 dark:text-gray-300 break-all w-full flex gap-2"
           title={link.url}
         >
-          Editing:{" "}
-          <Link href={link.url} target="_blank">
+          <FontAwesomeIcon icon={faLink} className="w-6 h-6" />
+          <Link href={link.url} target="_blank" className="w-full">
             {link.url}
           </Link>
-        </p>
+        </div>
       ) : null}
 
       {method === "CREATE" ? (
         <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
           <div className="sm:col-span-3 col-span-5">
-            <p className="text-sm text-black dark:text-white mb-2 font-bold">
-              Address (URL)
-              <RequiredBadge />
-            </p>
+            <p className="text-black dark:text-white mb-2">Address (URL)</p>
             <TextInput
               value={link.url}
               onChange={(e) => setLink({ ...link, url: e.target.value })}
@@ -158,9 +159,7 @@ export default function AddOrEditLink({
             />
           </div>
           <div className="sm:col-span-2 col-span-5">
-            <p className="text-sm text-black dark:text-white mb-2">
-              Collection
-            </p>
+            <p className="text-black dark:text-white mb-2">Collection</p>
             {link.collection.name ? (
               <CollectionSelection
                 onChange={setCollection}
@@ -187,10 +186,10 @@ export default function AddOrEditLink({
 
       {optionsExpanded ? (
         <div>
-          <hr className="mb-3 border border-sky-100 dark:border-neutral-700" />
+          {/* <hr className="mb-3 border border-sky-100 dark:border-neutral-700" /> */}
           <div className="grid sm:grid-cols-2 gap-3">
             <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
-              <p className="text-sm text-black dark:text-white mb-2">Name</p>
+              <p className="text-black dark:text-white mb-2">Name</p>
               <TextInput
                 value={link.name}
                 onChange={(e) => setLink({ ...link, name: e.target.value })}
@@ -200,9 +199,7 @@ export default function AddOrEditLink({
 
             {method === "UPDATE" ? (
               <div>
-                <p className="text-sm text-black dark:text-white mb-2">
-                  Collection
-                </p>
+                <p className="text-black dark:text-white mb-2">Collection</p>
                 {link.collection.name ? (
                   <CollectionSelection
                     onChange={setCollection}
@@ -223,7 +220,7 @@ export default function AddOrEditLink({
             ) : undefined}
 
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">Tags</p>
+              <p className="text-black dark:text-white mb-2">Tags</p>
               <TagSelection
                 onChange={setTags}
                 defaultValue={link.tags.map((e) => {
@@ -233,9 +230,7 @@ export default function AddOrEditLink({
             </div>
 
             <div className="sm:col-span-2">
-              <p className="text-sm text-black dark:text-white mb-2">
-                Description
-              </p>
+              <p className="text-black dark:text-white mb-2">Description</p>
               <textarea
                 value={unescapeString(link.description) as string}
                 onChange={(e) =>
@@ -253,14 +248,14 @@ export default function AddOrEditLink({
         </div>
       ) : undefined}
 
-      <div className="flex justify-between items-center mt-2">
+      <div className="flex justify-between items-stretch mt-2">
         <div
           onClick={() => setOptionsExpanded(!optionsExpanded)}
           className={`${
             method === "UPDATE" ? "hidden" : ""
-          } rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-1 px-2 w-fit text-sm`}
+          } rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 flex items-center px-2 w-fit text-sm`}
         >
-          {optionsExpanded ? "Hide" : "More"} Options
+          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
         </div>
 
         <SubmitButton
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
deleted file mode 100644
index e593e09..0000000
--- a/components/Modal/Link/LinkDetails.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import Image from "next/image";
-import ColorThief, { RGBColor } from "colorthief";
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowUpRightFromSquare,
-  faBoxArchive,
-  faCloudArrowDown,
-  faFolder,
-  faGlobe,
-} from "@fortawesome/free-solid-svg-icons";
-import useCollectionStore from "@/store/collections";
-import {
-  faCalendarDays,
-  faFileImage,
-  faFilePdf,
-} from "@fortawesome/free-regular-svg-icons";
-import isValidUrl from "@/lib/client/isValidUrl";
-import { useTheme } from "next-themes";
-import unescapeString from "@/lib/client/unescapeString";
-
-type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
-  isOwnerOrMod: boolean;
-};
-
-export default function LinkDetails({ link, isOwnerOrMod }: Props) {
-  const { theme } = useTheme();
-
-  const [imageError, setImageError] = useState<boolean>(false);
-  const formattedDate = new Date(link.createdAt as string).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }
-  );
-
-  const { collections } = useCollectionStore();
-
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(
-      collections.find(
-        (e) => e.id === link.collection.id
-      ) as CollectionIncludingMembersAndLinkCount
-    );
-
-  useEffect(() => {
-    setCollection(
-      collections.find(
-        (e) => e.id === link.collection.id
-      ) as CollectionIncludingMembersAndLinkCount
-    );
-  }, [collections]);
-
-  const [colorPalette, setColorPalette] = useState<RGBColor[]>();
-
-  const colorThief = new ColorThief();
-
-  const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
-
-  const rgbToHex = (r: number, g: number, b: number): string =>
-    "#" +
-    [r, g, b]
-      .map((x) => {
-        const hex = x.toString(16);
-        return hex.length === 1 ? "0" + hex : hex;
-      })
-      .join("");
-
-  useEffect(() => {
-    const banner = document.getElementById("link-banner");
-    const bannerInner = document.getElementById("link-banner-inner");
-
-    if (colorPalette && banner && bannerInner) {
-      if (colorPalette[0] && colorPalette[1]) {
-        banner.style.background = `linear-gradient(to right, ${rgbToHex(
-          colorPalette[0][0],
-          colorPalette[0][1],
-          colorPalette[0][2]
-        )}, ${rgbToHex(
-          colorPalette[1][0],
-          colorPalette[1][1],
-          colorPalette[1][2]
-        )})`;
-      }
-
-      if (colorPalette[2] && colorPalette[3]) {
-        bannerInner.style.background = `linear-gradient(to right, ${rgbToHex(
-          colorPalette[2][0],
-          colorPalette[2][1],
-          colorPalette[2][2]
-        )}, ${rgbToHex(
-          colorPalette[3][0],
-          colorPalette[3][1],
-          colorPalette[3][2]
-        )})`;
-      }
-    }
-  }, [colorPalette, theme]);
-
-  const handleDownload = (format: "png" | "pdf") => {
-    const path = `/api/v1/archives/${link.collection.id}/${link.id}.${format}`;
-    fetch(path)
-      .then((response) => {
-        if (response.ok) {
-          // Create a temporary link and click it to trigger the download
-          const link = document.createElement("a");
-          link.href = path;
-          link.download = format === "pdf" ? "PDF" : "Screenshot";
-          link.click();
-        } else {
-          console.error("Failed to download file");
-        }
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
-  };
-
-  return (
-    <div
-      className={`flex flex-col gap-3 sm:w-[35rem] w-80 ${
-        isOwnerOrMod ? "" : "mt-12"
-      } ${theme === "dark" ? "banner-dark-mode" : "banner-light-mode"}`}
-    >
-      {!imageError && (
-        <div id="link-banner" className="link-banner h-32 -mx-5 -mt-5 relative">
-          <div id="link-banner-inner" className="link-banner-inner"></div>
-        </div>
-      )}
-      <div
-        className={`relative flex gap-5 items-start ${!imageError && "-mt-24"}`}
-      >
-        {!imageError && url && (
-          <Image
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-            width={42}
-            height={42}
-            alt=""
-            id={"favicon-" + link.id}
-            className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
-            draggable="false"
-            onLoad={(e) => {
-              try {
-                const color = colorThief.getPalette(
-                  e.target as HTMLImageElement,
-                  4
-                );
-
-                setColorPalette(color);
-              } catch (err) {
-                console.log(err);
-              }
-            }}
-            onError={(e) => {
-              setImageError(true);
-            }}
-          />
-        )}
-        <div className="flex w-full flex-col min-h-[3rem] justify-center drop-shadow">
-          <p className="text-2xl text-black dark:text-white capitalize break-words hyphens-auto">
-            {unescapeString(link.name)}
-          </p>
-          <Link
-            href={link.url}
-            target="_blank"
-            className={`${
-              link.name ? "text-sm" : "text-xl"
-            } text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit`}
-          >
-            {url ? url.host : link.url}
-          </Link>
-        </div>
-      </div>
-      <div className="flex gap-1 items-center flex-wrap">
-        <Link
-          href={`/collections/${link.collection.id}`}
-          className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
-        >
-          <FontAwesomeIcon
-            icon={faFolder}
-            className="w-5 h-5 drop-shadow"
-            style={{ color: collection?.color }}
-          />
-          <p
-            title={collection?.name}
-            className="text-black dark:text-white text-lg truncate max-w-[12rem]"
-          >
-            {collection?.name}
-          </p>
-        </Link>
-        {link.tags.map((e, i) => (
-          <Link key={i} href={`/tags/${e.id}`} className="z-10">
-            <p
-              title={e.name}
-              className="px-2 py-1 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
-            >
-              {e.name}
-            </p>
-          </Link>
-        ))}
-      </div>
-      {link.description && (
-        <>
-          <div className="text-black dark:text-white max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
-            {unescapeString(link.description)}
-          </div>
-        </>
-      )}
-
-      <div className="flex justify-between items-center">
-        <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
-          <FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
-          <p>Archived Formats:</p>
-        </div>
-        <div
-          className="flex items-center gap-1 text-gray-500 dark:text-gray-300"
-          title={"Created at: " + formattedDate}
-        >
-          <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-          <p>{formattedDate}</p>
-        </div>
-      </div>
-      <div className="flex flex-col gap-2">
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
-              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
-            </div>
-
-            <p className="text-black dark:text-white">Screenshot</p>
-          </div>
-
-          <div className="flex text-black dark:text-white gap-1">
-            <div
-              onClick={() => handleDownload("png")}
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
-              />
-            </div>
-
-            <Link
-              href={`/api/v1/archives/${link.collectionId}/${link.id}.png`}
-              target="_blank"
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-sky-500 dark:text-sky-500"
-              />
-            </Link>
-          </div>
-        </div>
-
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
-              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
-            </div>
-
-            <p className="text-black dark:text-white">PDF</p>
-          </div>
-
-          <div className="flex text-black dark:text-white gap-1">
-            <div
-              onClick={() => handleDownload("pdf")}
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
-              />
-            </div>
-
-            <Link
-              href={`/api/v1/archives/${link.collectionId}/${link.id}.pdf`}
-              target="_blank"
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-sky-500 dark:text-sky-500"
-              />
-            </Link>
-          </div>
-        </div>
-
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
-              <FontAwesomeIcon icon={faGlobe} className="w-6 h-6" />
-            </div>
-
-            <p className="text-black dark:text-white">
-              Latest archive.org Snapshot
-            </p>
-          </div>
-
-          <Link
-            href={`https://web.archive.org/web/${link.url.replace(
-              /(^\w+:|^)\/\//,
-              ""
-            )}`}
-            target="_blank"
-            className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-          >
-            <FontAwesomeIcon
-              icon={faArrowUpRightFromSquare}
-              className="w-5 h-5 text-sky-500 dark:text-sky-500"
-            />
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/components/Modal/Link/PreservedFormats.tsx b/components/Modal/Link/PreservedFormats.tsx
new file mode 100644
index 0000000..1a6712b
--- /dev/null
+++ b/components/Modal/Link/PreservedFormats.tsx
@@ -0,0 +1,195 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faArrowUpRightFromSquare,
+  faCloudArrowDown,
+} from "@fortawesome/free-solid-svg-icons";
+import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
+import useLinkStore from "@/store/links";
+import { toast } from "react-hot-toast";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+
+export default function PreservedFormats() {
+  const session = useSession();
+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  useEffect(() => {
+    let interval: NodeJS.Timer | undefined;
+    if (link?.screenshotPath === "pending" || link?.pdfPath === "pending") {
+      interval = setInterval(() => getLink(link.id as number), 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
+
+  const updateArchive = async () => {
+    const load = toast.loading("Sending request...");
+
+    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
+      method: "PUT",
+    });
+
+    const data = await response.json();
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success(`Link is being archived...`);
+      getLink(link?.id as number);
+    } else toast.error(data.response);
+  };
+
+  const handleDownload = (format: "png" | "pdf") => {
+    const path = `/api/v1/archives/${link?.collection.id}/${link?.id}.${format}`;
+    fetch(path)
+      .then((response) => {
+        if (response.ok) {
+          // Create a temporary link and click it to trigger the download
+          const link = document.createElement("a");
+          link.href = path;
+          link.download = format === "pdf" ? "PDF" : "Screenshot";
+          link.click();
+        } else {
+          console.error("Failed to download file");
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  };
+
+  return (
+    <div className={`flex flex-col gap-3 sm:w-[35rem] w-80 pt-3`}>
+      {link?.screenshotPath && link?.screenshotPath !== "pending" ? (
+        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+          <div className="flex gap-2 items-center">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
+              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
+            </div>
+
+            <p className="text-black dark:text-white">Screenshot</p>
+          </div>
+
+          <div className="flex text-black dark:text-white gap-1">
+            <div
+              onClick={() => handleDownload("png")}
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faCloudArrowDown}
+                className="w-5 h-5 cursor-pointer text-gray-500 dark:text-gray-300"
+              />
+            </div>
+
+            <Link
+              href={`/api/v1/archives/${link.collectionId}/${link.id}.png`}
+              target="_blank"
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+              />
+            </Link>
+          </div>
+        </div>
+      ) : undefined}
+
+      {link?.pdfPath && link.pdfPath !== "pending" ? (
+        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+          <div className="flex gap-2 items-center">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
+              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
+            </div>
+
+            <p className="text-black dark:text-white">PDF</p>
+          </div>
+
+          <div className="flex text-black dark:text-white gap-1">
+            <div
+              onClick={() => handleDownload("pdf")}
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faCloudArrowDown}
+                className="w-5 h-5 cursor-pointer text-gray-500 dark:text-gray-300"
+              />
+            </div>
+
+            <Link
+              href={`/api/v1/archives/${link.collectionId}/${link.id}.pdf`}
+              target="_blank"
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+              />
+            </Link>
+          </div>
+        </div>
+      ) : undefined}
+
+      <div className="flex flex-col-reverse sm:flex-row gap-5 items-center justify-center">
+        {link?.collection.ownerId === session.data?.user.id ? (
+          <div
+            className={`w-full text-center bg-sky-700 p-1 rounded-md cursor-pointer select-none hover:bg-sky-600 duration-100 ${
+              link?.pdfPath &&
+              link?.screenshotPath &&
+              link?.pdfPath !== "pending" &&
+              link?.screenshotPath !== "pending"
+                ? "mt-3"
+                : ""
+            }`}
+            onClick={() => updateArchive()}
+          >
+            <p>Update Preserved Formats</p>
+            <p className="text-xs">(Refresh Formats)</p>
+          </div>
+        ) : undefined}
+        <Link
+          href={`https://web.archive.org/web/${link?.url.replace(
+            /(^\w+:|^)\/\//,
+            ""
+          )}`}
+          target="_blank"
+          className={`text-gray-500 dark:text-gray-300 duration-100 hover:opacity-60 flex gap-2 w-fit items-center text-sm ${
+            link?.pdfPath &&
+            link?.screenshotPath &&
+            link?.pdfPath !== "pending" &&
+            link?.screenshotPath !== "pending"
+              ? "sm:mt-3"
+              : ""
+          }`}
+        >
+          <FontAwesomeIcon
+            icon={faArrowUpRightFromSquare}
+            className="w-4 h-4"
+          />
+          <p className="whitespace-nowrap">
+            View Latest Snapshot on archive.org
+          </p>
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index 3f9f243..546a3ef 100644
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@@ -1,89 +1,63 @@
-import { Tab } from "@headlessui/react";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import AddOrEditLink from "./AddOrEditLink";
-import LinkDetails from "./LinkDetails";
+import PreservedFormats from "./PreservedFormats";
 
 type Props =
   | {
       toggleLinkModal: Function;
       method: "CREATE";
-      isOwnerOrMod?: boolean;
       activeLink?: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
       className?: string;
     }
   | {
       toggleLinkModal: Function;
       method: "UPDATE";
-      isOwnerOrMod: boolean;
       activeLink: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
+      className?: string;
+    }
+  | {
+      toggleLinkModal: Function;
+      method: "FORMATS";
+      activeLink: LinkIncludingShortenedCollectionAndTags;
       className?: string;
     };
 
 export default function LinkModal({
   className,
-  defaultIndex,
   toggleLinkModal,
-  isOwnerOrMod,
   activeLink,
   method,
 }: Props) {
   return (
     <div className={className}>
-      <Tab.Group defaultIndex={defaultIndex}>
-        {method === "CREATE" && (
-          <p className="text-xl text-black dark:text-white text-center">
-            New Link
+      {method === "CREATE" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
+            Create a New Link
           </p>
-        )}
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
-          {method === "UPDATE" && isOwnerOrMod && (
-            <>
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-                }
-              >
-                Link Details
-              </Tab>
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-                }
-              >
-                Edit Link
-              </Tab>
-            </>
-          )}
-        </Tab.List>
-        <Tab.Panels>
-          {activeLink && method === "UPDATE" && (
-            <Tab.Panel>
-              <LinkDetails link={activeLink} isOwnerOrMod={isOwnerOrMod} />
-            </Tab.Panel>
-          )}
+          <AddOrEditLink toggleLinkModal={toggleLinkModal} method="CREATE" />
+        </>
+      ) : undefined}
 
-          <Tab.Panel>
-            {activeLink && method === "UPDATE" ? (
-              <AddOrEditLink
-                toggleLinkModal={toggleLinkModal}
-                method="UPDATE"
-                activeLink={activeLink}
-              />
-            ) : (
-              <AddOrEditLink
-                toggleLinkModal={toggleLinkModal}
-                method="CREATE"
-              />
-            )}
-          </Tab.Panel>
-        </Tab.Panels>
-      </Tab.Group>
+      {activeLink && method === "UPDATE" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">Edit Link</p>
+          <AddOrEditLink
+            toggleLinkModal={toggleLinkModal}
+            method="UPDATE"
+            activeLink={activeLink}
+          />
+        </>
+      ) : undefined}
+
+      {method === "FORMATS" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
+            Preserved Formats
+          </p>
+          <PreservedFormats />
+        </>
+      ) : undefined}
     </div>
   );
 }
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index b52feff..cd4b04e 100644
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@@ -14,7 +14,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
     <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
       <ClickAwayHandler
         onClickOutside={toggleModal}
-        className={`m-auto ${className}`}
+        className={`m-auto ${className || ""}`}
       >
         <div className="slide-up relative border-sky-100 dark:border-neutral-700 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
           <div
diff --git a/components/ModalManagement.tsx b/components/ModalManagement.tsx
index aa7790d..0a3d6a8 100644
--- a/components/ModalManagement.tsx
+++ b/components/ModalManagement.tsx
@@ -27,8 +27,6 @@ export default function ModalManagement() {
         <LinkModal
           toggleLinkModal={toggleModal}
           method={modal.method}
-          isOwnerOrMod={modal.isOwnerOrMod as boolean}
-          defaultIndex={modal.defaultIndex}
           activeLink={modal.active as LinkIncludingShortenedCollectionAndTags}
         />
       </Modal>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 9f8984f..4a91fb5 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -83,7 +83,7 @@ export default function Navbar() {
             id="profile-dropdown"
           >
             <ProfilePhoto
-              src={account.profilePic}
+              src={account.image ? account.image : undefined}
               priority={true}
               className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
             />
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index e2f2b39..8575d6d 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -2,51 +2,45 @@ import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUser } from "@fortawesome/free-solid-svg-icons";
 import Image from "next/image";
-import avatarExists from "@/lib/client/avatarExists";
 
 type Props = {
-  src: string;
+  src?: string;
   className?: string;
   emptyImage?: boolean;
-  status?: Function;
   priority?: boolean;
 };
 
-export default function ProfilePhoto({
-  src,
-  className,
-  emptyImage,
-  status,
-  priority,
-}: Props) {
-  const [error, setError] = useState<boolean>(emptyImage || true);
-
-  const checkAvatarExistence = async () => {
-    const canPass = await avatarExists(src);
-
-    setError(!canPass);
-  };
+export default function ProfilePhoto({ src, className, priority }: Props) {
+  const [image, setImage] = useState("");
 
   useEffect(() => {
-    if (src) checkAvatarExistence();
+    if (src && !src?.includes("base64"))
+      setImage(`/api/v1/${src.replace("uploads/", "").replace(".jpg", "")}`);
+    else if (!src) setImage("");
+    else {
+      setImage(src);
+    }
+  }, [src]);
 
-    status && status(error || !src);
-  }, [src, error]);
-
-  return error || !src ? (
+  return !image ? (
     <div
-      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${className}`}
+      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${
+        className || ""
+      }`}
     >
       <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
     </div>
   ) : (
     <Image
       alt=""
-      src={src}
+      src={image}
       height={112}
       width={112}
       priority={priority}
-      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
+      draggable={false}
+      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${
+        className || ""
+      }`}
     />
   );
 }
diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx
index 128af2b..ac9a7b7 100644
--- a/components/SettingsSidebar.tsx
+++ b/components/SettingsSidebar.tsx
@@ -32,7 +32,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
+      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${
+        className || ""
+      }`}
     >
       <div className="flex flex-col gap-1">
         <Link href="/settings/account">
@@ -111,7 +113,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           </div>
         </Link>
 
-        {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
+        {process.env.NEXT_PUBLIC_STRIPE ? (
           <Link href="/settings/billing">
             <div
               className={`${
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index eb8cfad..7d2c614 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -51,7 +51,9 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${className}`}
+      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${
+        className || ""
+      }`}
     >
       <div className="flex justify-center gap-2 mt-2">
         <Link
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index 9e910e1..51d1b29 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -21,7 +21,7 @@ export default function SortDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "sort-dropdown") toggleSortDropdown();
       }}
-      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-48"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-52"
     >
       <p className="mb-2 text-black dark:text-white text-center font-semibold">
         Sort by
diff --git a/components/SubmitButton.tsx b/components/SubmitButton.tsx
index 6ee0a78..fbcd8b8 100644
--- a/components/SubmitButton.tsx
+++ b/components/SubmitButton.tsx
@@ -25,7 +25,7 @@ export default function SubmitButton({
         loading
           ? "bg-sky-600 cursor-auto"
           : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
-      } ${className}`}
+      } ${className || ""}`}
       onClick={() => {
         if (!loading && onClick) onClick();
       }}
diff --git a/components/TextInput.tsx b/components/TextInput.tsx
index a075757..44587e7 100644
--- a/components/TextInput.tsx
+++ b/components/TextInput.tsx
@@ -27,7 +27,9 @@ export default function TextInput({
       value={value}
       onChange={onChange}
       onKeyDown={onKeyDown}
-      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${className}`}
+      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${
+        className || ""
+      }`}
     />
   );
 }
diff --git a/hooks/useInitialData.tsx b/hooks/useInitialData.tsx
index c6b1ea3..b3d61a7 100644
--- a/hooks/useInitialData.tsx
+++ b/hooks/useInitialData.tsx
@@ -9,17 +9,21 @@ export default function useInitialData() {
   const { setCollections } = useCollectionStore();
   const { setTags } = useTagStore();
   // const { setLinks } = useLinkStore();
-  const { setAccount } = useAccountStore();
+  const { account, setAccount } = useAccountStore();
 
+  // Get account info
   useEffect(() => {
-    if (
-      status === "authenticated" &&
-      (!process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE || data.user.isSubscriber)
-    ) {
+    if (status === "authenticated") {
+      setAccount(data?.user.id as number);
+    }
+  }, [status, data]);
+
+  // Get the rest of the data
+  useEffect(() => {
+    if (account.id && (!process.env.NEXT_PUBLIC_STRIPE || account.username)) {
       setCollections();
       setTags();
       // setLinks();
-      setAccount(data.user.id);
     }
-  }, [status]);
+  }, [account]);
 }
diff --git a/hooks/useLinks.tsx b/hooks/useLinks.tsx
index 56024b0..60f43db 100644
--- a/hooks/useLinks.tsx
+++ b/hooks/useLinks.tsx
@@ -15,6 +15,7 @@ export default function useLinks(
     searchByUrl,
     searchByDescription,
     searchByTags,
+    searchByTextContent,
   }: LinkRequestQuery = { sort: 0 }
 ) {
   const { links, setLinks, resetLinks } = useLinkStore();
@@ -34,6 +35,7 @@ export default function useLinks(
       searchByUrl,
       searchByDescription,
       searchByTags,
+      searchByTextContent,
     };
 
     const buildQueryString = (params: LinkRequestQuery) => {
@@ -72,6 +74,7 @@ export default function useLinks(
     searchByName,
     searchByUrl,
     searchByDescription,
+    searchByTextContent,
     searchByTags,
   ]);
 
diff --git a/hooks/useRedirect.tsx b/hooks/useRedirect.tsx
deleted file mode 100644
index a6b9637..0000000
--- a/hooks/useRedirect.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useState } from "react";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-
-export default function useRedirect() {
-  const router = useRouter();
-  const { status } = useSession();
-  const [redirect, setRedirect] = useState(true);
-
-  useEffect(() => {
-    if (
-      status === "authenticated" &&
-      (router.pathname === "/login" || router.pathname === "/register")
-    ) {
-      router.push("/").then(() => {
-        setRedirect(false);
-      });
-    } else if (
-      status === "unauthenticated" &&
-      !(router.pathname === "/login" || router.pathname === "/register")
-    ) {
-      router.push("/login").then(() => {
-        setRedirect(false);
-      });
-    } else if (status === "loading") setRedirect(true);
-    else setRedirect(false);
-  }, [status]);
-
-  return redirect;
-}
diff --git a/layouts/AuthRedirect.tsx b/layouts/AuthRedirect.tsx
index a5fd1ad..da1f6fc 100644
--- a/layouts/AuthRedirect.tsx
+++ b/layouts/AuthRedirect.tsx
@@ -4,6 +4,7 @@ import Loader from "../components/Loader";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import useInitialData from "@/hooks/useInitialData";
+import useAccountStore from "@/store/account";
 
 interface Props {
   children: ReactNode;
@@ -13,40 +14,49 @@ export default function AuthRedirect({ children }: Props) {
   const router = useRouter();
   const { status, data } = useSession();
   const [redirect, setRedirect] = useState(true);
+  const { account } = useAccountStore();
 
-  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
+  const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
 
   useInitialData();
 
   useEffect(() => {
     if (!router.pathname.startsWith("/public")) {
       if (
+        status === "authenticated" &&
+        account.id &&
+        !account.subscription?.active &&
+        stripeEnabled
+      ) {
+        router.push("/subscribe").then(() => {
+          setRedirect(false);
+        });
+      }
+      // Redirect to "/choose-username" if user is authenticated and is either a subscriber OR subscription is undefiend, and doesn't have a username
+      else if (
         emailEnabled &&
         status === "authenticated" &&
-        (data.user.isSubscriber === true ||
-          data.user.isSubscriber === undefined) &&
-        !data.user.username
+        account.subscription?.active &&
+        stripeEnabled &&
+        account.id &&
+        !account.username
       ) {
         router.push("/choose-username").then(() => {
           setRedirect(false);
         });
       } else if (
         status === "authenticated" &&
-        data.user.isSubscriber === false
-      ) {
-        router.push("/subscribe").then(() => {
-          setRedirect(false);
-        });
-      } else if (
-        status === "authenticated" &&
+        account.id &&
         (router.pathname === "/login" ||
           router.pathname === "/register" ||
           router.pathname === "/confirmation" ||
           router.pathname === "/subscribe" ||
           router.pathname === "/choose-username" ||
-          router.pathname === "/forgot")
+          router.pathname === "/forgot" ||
+          router.pathname === "/")
       ) {
-        router.push("/").then(() => {
+        router.push("/dashboard").then(() => {
           setRedirect(false);
         });
       } else if (
@@ -66,7 +76,7 @@ export default function AuthRedirect({ children }: Props) {
     } else {
       setRedirect(false);
     }
-  }, [status]);
+  }, [status, account, router.pathname]);
 
   if (status !== "loading" && !redirect) return <>{children}</>;
   else return <></>;
diff --git a/layouts/CenteredForm.tsx b/layouts/CenteredForm.tsx
index 03052ec..83ac99a 100644
--- a/layouts/CenteredForm.tsx
+++ b/layouts/CenteredForm.tsx
@@ -10,10 +10,20 @@ interface Props {
 
 export default function CenteredForm({ text, children }: Props) {
   const { theme } = useTheme();
+
   return (
     <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5">
       <div className="m-auto flex flex-col gap-2 w-full">
-        {theme === "dark" ? (
+        {theme ? (
+          <Image
+            src={`/linkwarden_${theme === "dark" ? "dark" : "li"}.png`}
+            width={640}
+            height={136}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+        ) : undefined}
+        {/* {theme === "dark" ? (
           <Image
             src="/linkwarden_dark.png"
             width={640}
@@ -29,7 +39,7 @@ export default function CenteredForm({ text, children }: Props) {
             alt="Linkwarden"
             className="h-12 w-fit mx-auto"
           />
-        )}
+        )} */}
         {text ? (
           <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold text-black dark:text-white px-2 text-center">
             {text}
diff --git a/layouts/LinkLayout.tsx b/layouts/LinkLayout.tsx
new file mode 100644
index 0000000..b2c135e
--- /dev/null
+++ b/layouts/LinkLayout.tsx
@@ -0,0 +1,195 @@
+import LinkSidebar from "@/components/LinkSidebar";
+import { ReactNode, useEffect, useState } from "react";
+import ModalManagement from "@/components/ModalManagement";
+import useModalStore from "@/store/modals";
+import { useRouter } from "next/router";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import {
+  faPen,
+  faBoxesStacked,
+  faTrashCan,
+} from "@fortawesome/free-solid-svg-icons";
+import useLinkStore from "@/store/links";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useSession } from "next-auth/react";
+import useCollectionStore from "@/store/collections";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function LinkLayout({ children }: Props) {
+  const { modal } = useModalStore();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    modal
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "auto");
+  }, [modal]);
+
+  const [sidebar, setSidebar] = useState(false);
+
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [width]);
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [router]);
+
+  const toggleSidebar = () => {
+    setSidebar(!sidebar);
+  };
+
+  const session = useSession();
+  const userId = session.data?.user.id;
+
+  const { setModal } = useModalStore();
+
+  const { links, removeLink } = useLinkStore();
+  const { collections } = useCollectionStore();
+
+  const [linkCollection, setLinkCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  useEffect(() => {
+    if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  useEffect(() => {
+    if (link)
+      setLinkCollection(collections.find((e) => e.id === link?.collection.id));
+  }, [link]);
+
+  return (
+    <>
+      <ModalManagement />
+
+      <div className="flex mx-auto">
+        <div className="hidden lg:block fixed left-5 h-screen">
+          <LinkSidebar />
+        </div>
+
+        <div className="w-full flex flex-col min-h-screen max-w-screen-md mx-auto p-5">
+          <div className="flex gap-3 mb-5 duration-100 items-center justify-between">
+            {/* <div
+              onClick={toggleSidebar}
+              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+            >
+              <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+            </div> */}
+
+            <div
+              onClick={() => router.push(`/collections/${linkCollection?.id}`)}
+              className="inline-flex gap-1 hover:opacity-60 items-center select-none cursor-pointer p-2 lg:p-0 lg:px-1 lg:my-2 text-gray-500 dark:text-gray-300 rounded-md duration-100"
+            >
+              <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
+              Back{" "}
+              <span className="hidden sm:inline-block">
+                to <span className="capitalize">{linkCollection?.name}</span>
+              </span>
+            </div>
+
+            <div className="lg:hidden">
+              <div className="flex gap-5">
+                {link?.collection.ownerId === userId ||
+                linkCollection?.members.some(
+                  (e) => e.userId === userId && e.canUpdate
+                ) ? (
+                  <div
+                    title="Edit"
+                    onClick={() => {
+                      link
+                        ? setModal({
+                            modal: "LINK",
+                            state: true,
+                            active: link,
+                            method: "UPDATE",
+                          })
+                        : undefined;
+                    }}
+                    className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+                  >
+                    <FontAwesomeIcon
+                      icon={faPen}
+                      className="w-6 h-6 text-gray-500 dark:text-gray-300"
+                    />
+                  </div>
+                ) : undefined}
+
+                <div
+                  onClick={() => {
+                    link
+                      ? setModal({
+                          modal: "LINK",
+                          state: true,
+                          active: link,
+                          method: "FORMATS",
+                        })
+                      : undefined;
+                  }}
+                  title="Preserved Formats"
+                  className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+                >
+                  <FontAwesomeIcon
+                    icon={faBoxesStacked}
+                    className="w-6 h-6 text-gray-500 dark:text-gray-300"
+                  />
+                </div>
+
+                {link?.collection.ownerId === userId ||
+                linkCollection?.members.some(
+                  (e) => e.userId === userId && e.canDelete
+                ) ? (
+                  <div
+                    onClick={() => {
+                      if (link?.id) {
+                        removeLink(link.id);
+                        router.back();
+                      }
+                    }}
+                    title="Delete"
+                    className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+                  >
+                    <FontAwesomeIcon
+                      icon={faTrashCan}
+                      className="w-6 h-6 text-gray-500 dark:text-gray-300"
+                    />
+                  </div>
+                ) : undefined}
+              </div>
+            </div>
+          </div>
+
+          {children}
+
+          {sidebar ? (
+            <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+              <ClickAwayHandler
+                className="h-full"
+                onClickOutside={toggleSidebar}
+              >
+                <div className="slide-right h-full shadow-lg">
+                  <LinkSidebar onClick={() => setSidebar(false)} />
+                </div>
+              </ClickAwayHandler>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index f3f17cb..6b8ab83 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -1,8 +1,10 @@
 import Navbar from "@/components/Navbar";
+import AnnouncementBar from "@/components/AnnouncementBar";
 import Sidebar from "@/components/Sidebar";
-import { ReactNode, useEffect } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import ModalManagement from "@/components/ModalManagement";
 import useModalStore from "@/store/modals";
+import getLatestVersion from "@/lib/client/getLatestVersion";
 
 interface Props {
   children: ReactNode;
@@ -17,16 +19,49 @@ export default function MainLayout({ children }: Props) {
       : (document.body.style.overflow = "auto");
   }, [modal]);
 
+  const showAnnouncementBar = localStorage.getItem("showAnnouncementBar");
+  const [showAnnouncement, setShowAnnouncement] = useState(
+    showAnnouncementBar ? showAnnouncementBar === "true" : true
+  );
+
+  useEffect(() => {
+    getLatestVersion(setShowAnnouncement);
+  }, []);
+
+  useEffect(() => {
+    if (showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "true");
+      setShowAnnouncement(true);
+    } else if (!showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "false");
+      setShowAnnouncement(false);
+    }
+  }, [showAnnouncement]);
+
+  const toggleAnnouncementBar = () => {
+    setShowAnnouncement(!showAnnouncement);
+  };
+
   return (
     <>
       <ModalManagement />
 
+      {showAnnouncement ? (
+        <AnnouncementBar toggleAnnouncementBar={toggleAnnouncementBar} />
+      ) : undefined}
+
       <div className="flex">
         <div className="hidden lg:block">
-          <Sidebar className="fixed top-0" />
+          <Sidebar
+            className={`fixed ${showAnnouncement ? "top-10" : "top-0"}`}
+          />
         </div>
 
-        <div className="w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80">
+        <div
+          className={`w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80 ${
+            showAnnouncement ? "mt-10" : ""
+          }`}
+        >
           <Navbar />
           {children}
         </div>
diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index fce0454..e55d86d 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -2,18 +2,29 @@ import { chromium, devices } from "playwright";
 import { prisma } from "@/lib/api/db";
 import createFile from "@/lib/api/storage/createFile";
 import sendToWayback from "./sendToWayback";
+import { Readability } from "@mozilla/readability";
+import { JSDOM } from "jsdom";
+import DOMPurify from "dompurify";
 
 export default async function archive(
   linkId: number,
   url: string,
   userId: number
 ) {
-  const user = await prisma.user.findUnique({
-    where: {
-      id: userId,
+  const user = await prisma.user.findUnique({ where: { id: userId } });
+
+  const targetLink = await prisma.link.update({
+    where: { id: linkId },
+    data: {
+      screenshotPath: user?.archiveAsScreenshot ? "pending" : null,
+      pdfPath: user?.archiveAsPDF ? "pending" : null,
+      readabilityPath: "pending",
+      lastPreserved: new Date().toISOString(),
     },
   });
 
+  // Archive.org
+
   if (user?.archiveAsWaybackMachine) sendToWayback(url);
 
   if (user?.archiveAsPDF || user?.archiveAsScreenshot) {
@@ -24,24 +35,48 @@ export default async function archive(
     try {
       await page.goto(url, { waitUntil: "domcontentloaded" });
 
-      await page.evaluate(
-        autoScroll,
-        Number(process.env.AUTOSCROLL_TIMEOUT) || 30
-      );
+      const content = await page.content();
 
-      const linkExists = await prisma.link.findUnique({
-        where: {
-          id: linkId,
+      // Readability
+
+      const window = new JSDOM("").window;
+      const purify = DOMPurify(window);
+      const cleanedUpContent = purify.sanitize(content);
+      const dom = new JSDOM(cleanedUpContent, { url: url });
+      const article = new Readability(dom.window.document).parse();
+
+      const articleText = article?.textContent
+        .replace(/ +(?= )/g, "") // strip out multiple spaces
+        .replace(/(\r\n|\n|\r)/gm, " "); // strip out line breaks
+
+      await createFile({
+        data: JSON.stringify(article),
+        filePath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
+      });
+
+      await prisma.link.update({
+        where: { id: linkId },
+        data: {
+          readabilityPath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
+          textContent: articleText,
         },
       });
 
-      if (linkExists) {
-        if (user.archiveAsScreenshot) {
-          const screenshot = await page.screenshot({
-            fullPage: true,
-          });
+      // Screenshot/PDF
 
-          createFile({
+      let faulty = false;
+      await page
+        .evaluate(autoScroll, Number(process.env.AUTOSCROLL_TIMEOUT) || 30)
+        .catch((e) => (faulty = true));
+
+      const linkExists = await prisma.link.findUnique({
+        where: { id: linkId },
+      });
+
+      if (linkExists && !faulty) {
+        if (user.archiveAsScreenshot) {
+          const screenshot = await page.screenshot({ fullPage: true });
+          await createFile({
             data: screenshot,
             filePath: `archives/${linkExists.collectionId}/${linkId}.png`,
           });
@@ -55,16 +90,36 @@ export default async function archive(
             margin: { top: "15px", bottom: "15px" },
           });
 
-          createFile({
+          await createFile({
             data: pdf,
             filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
           });
         }
-      }
 
-      await browser.close();
+        await prisma.link.update({
+          where: { id: linkId },
+          data: {
+            screenshotPath: user.archiveAsScreenshot
+              ? `archives/${linkExists.collectionId}/${linkId}.png`
+              : null,
+            pdfPath: user.archiveAsPDF
+              ? `archives/${linkExists.collectionId}/${linkId}.pdf`
+              : null,
+          },
+        });
+      } else if (faulty) {
+        await prisma.link.update({
+          where: { id: linkId },
+          data: {
+            screenshotPath: null,
+            pdfPath: null,
+          },
+        });
+      }
     } catch (err) {
       console.log(err);
+      throw err;
+    } finally {
       await browser.close();
     }
   }
@@ -73,11 +128,7 @@ export default async function archive(
 const autoScroll = async (AUTOSCROLL_TIMEOUT: number) => {
   const timeoutPromise = new Promise<void>((_, reject) => {
     setTimeout(() => {
-      reject(
-        new Error(
-          `Auto scroll took too long (more than ${AUTOSCROLL_TIMEOUT} seconds).`
-        )
-      );
+      reject(new Error(`Webpage was too long to be archived.`));
     }, AUTOSCROLL_TIMEOUT * 1000);
   });
 
diff --git a/lib/api/checkSubscription.ts b/lib/api/checkSubscription.ts
deleted file mode 100644
index b459fb3..0000000
--- a/lib/api/checkSubscription.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import Stripe from "stripe";
-
-export default async function checkSubscription(
-  stripeSecretKey: string,
-  email: string
-) {
-  const stripe = new Stripe(stripeSecretKey, {
-    apiVersion: "2022-11-15",
-  });
-
-  const listByEmail = await stripe.customers.list({
-    email: email.toLowerCase(),
-    expand: ["data.subscriptions"],
-  });
-
-  let subscriptionCanceledAt: number | null | undefined;
-
-  const isSubscriber = listByEmail.data.some((customer, i) => {
-    const hasValidSubscription = customer.subscriptions?.data.some(
-      (subscription) => {
-        const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
-          process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
-        const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS
-          ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400
-          : 1209600;
-
-        subscriptionCanceledAt = subscription.canceled_at;
-
-        const isNotCanceledOrHasTime = !(
-          subscription.canceled_at &&
-          new Date() >
-            new Date((subscription.canceled_at + secondsInTwoWeeks) * 1000)
-        );
-
-        return subscription?.items?.data[0].plan && isNotCanceledOrHasTime;
-      }
-    );
-
-    return (
-      customer.email?.toLowerCase() === email.toLowerCase() &&
-      hasValidSubscription
-    );
-  });
-
-  return {
-    isSubscriber,
-    subscriptionCanceledAt,
-  };
-}
diff --git a/lib/api/checkSubscriptionByEmail.ts b/lib/api/checkSubscriptionByEmail.ts
new file mode 100644
index 0000000..460a168
--- /dev/null
+++ b/lib/api/checkSubscriptionByEmail.ts
@@ -0,0 +1,52 @@
+import Stripe from "stripe";
+
+const MONTHLY_PRICE_ID = process.env.MONTHLY_PRICE_ID;
+const YEARLY_PRICE_ID = process.env.YEARLY_PRICE_ID;
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
+export default async function checkSubscriptionByEmail(email: string) {
+  let active: boolean | undefined,
+    stripeSubscriptionId: string | undefined,
+    currentPeriodStart: number | undefined,
+    currentPeriodEnd: number | undefined;
+
+  if (!STRIPE_SECRET_KEY)
+    return {
+      active,
+      stripeSubscriptionId,
+      currentPeriodStart,
+      currentPeriodEnd,
+    };
+
+  const stripe = new Stripe(STRIPE_SECRET_KEY, {
+    apiVersion: "2022-11-15",
+  });
+
+  console.log("Request made to Stripe by:", email);
+  const listByEmail = await stripe.customers.list({
+    email: email.toLowerCase(),
+    expand: ["data.subscriptions"],
+  });
+
+  listByEmail.data.some((customer) => {
+    customer.subscriptions?.data.some((subscription) => {
+      subscription.current_period_end;
+
+      active = subscription.items.data.some(
+        (e) =>
+          (e.price.id === MONTHLY_PRICE_ID && e.price.active === true) ||
+          (e.price.id === YEARLY_PRICE_ID && e.price.active === true)
+      );
+      stripeSubscriptionId = subscription.id;
+      currentPeriodStart = subscription.current_period_start * 1000;
+      currentPeriodEnd = subscription.current_period_end * 1000;
+    });
+  });
+
+  return {
+    active,
+    stripeSubscriptionId,
+    currentPeriodStart,
+    currentPeriodEnd,
+  };
+}
diff --git a/lib/api/controllers/collections/collectionId/updateCollectionById.ts b/lib/api/controllers/collections/collectionId/updateCollectionById.ts
index 076bb08..30bb601 100644
--- a/lib/api/controllers/collections/collectionId/updateCollectionById.ts
+++ b/lib/api/controllers/collections/collectionId/updateCollectionById.ts
@@ -59,6 +59,7 @@ export default async function updateCollection(
           include: {
             user: {
               select: {
+                image: true,
                 username: true,
                 name: true,
                 id: true,
diff --git a/lib/api/controllers/collections/getCollections.ts b/lib/api/controllers/collections/getCollections.ts
index 0ac3d9c..3742163 100644
--- a/lib/api/controllers/collections/getCollections.ts
+++ b/lib/api/controllers/collections/getCollections.ts
@@ -18,6 +18,7 @@ export default async function getCollection(userId: number) {
             select: {
               username: true,
               name: true,
+              image: true,
             },
           },
         },
diff --git a/lib/api/controllers/links/getLinks.ts b/lib/api/controllers/links/getLinks.ts
index fd0f257..18edf91 100644
--- a/lib/api/controllers/links/getLinks.ts
+++ b/lib/api/controllers/links/getLinks.ts
@@ -42,6 +42,15 @@ export default async function getLink(userId: number, query: LinkRequestQuery) {
       });
     }
 
+    if (query.searchByTextContent) {
+      searchConditions.push({
+        textContent: {
+          contains: query.searchQueryString,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
     if (query.searchByTags) {
       searchConditions.push({
         tags: {
diff --git a/lib/api/controllers/links/linkId/deleteLinkById.ts b/lib/api/controllers/links/linkId/deleteLinkById.ts
index b66b850..8a56656 100644
--- a/lib/api/controllers/links/linkId/deleteLinkById.ts
+++ b/lib/api/controllers/links/linkId/deleteLinkById.ts
@@ -31,6 +31,9 @@ export default async function deleteLink(userId: number, linkId: number) {
   removeFile({
     filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
   });
+  removeFile({
+    filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+  });
 
   return { response: deleteLink, status: 200 };
 }
diff --git a/lib/api/controllers/links/linkId/getLinkById.ts b/lib/api/controllers/links/linkId/getLinkById.ts
new file mode 100644
index 0000000..83a3ceb
--- /dev/null
+++ b/lib/api/controllers/links/linkId/getLinkById.ts
@@ -0,0 +1,48 @@
+import { prisma } from "@/lib/api/db";
+import { Collection, Link, UsersAndCollections } from "@prisma/client";
+import getPermission from "@/lib/api/getPermission";
+
+export default async function getLinkById(userId: number, linkId: number) {
+  if (!linkId)
+    return {
+      response: "Please choose a valid link.",
+      status: 401,
+    };
+
+  const collectionIsAccessible = (await getPermission({ userId, linkId })) as
+    | (Collection & {
+        members: UsersAndCollections[];
+      })
+    | null;
+
+  const memberHasAccess = collectionIsAccessible?.members.some(
+    (e: UsersAndCollections) => e.userId === userId
+  );
+
+  const isCollectionOwner = collectionIsAccessible?.ownerId === userId;
+
+  if (collectionIsAccessible?.ownerId !== userId && !memberHasAccess)
+    return {
+      response: "Collection is not accessible.",
+      status: 401,
+    };
+  else {
+    const updatedLink = await prisma.link.findUnique({
+      where: {
+        id: linkId,
+      },
+      include: {
+        tags: true,
+        collection: true,
+        pinnedBy: isCollectionOwner
+          ? {
+              where: { id: userId },
+              select: { id: true },
+            }
+          : undefined,
+      },
+    });
+
+    return { response: updatedLink, status: 200 };
+  }
+}
diff --git a/lib/api/controllers/links/linkId/updateLinkById.ts b/lib/api/controllers/links/linkId/updateLinkById.ts
index 9ed6464..41fb54b 100644
--- a/lib/api/controllers/links/linkId/updateLinkById.ts
+++ b/lib/api/controllers/links/linkId/updateLinkById.ts
@@ -4,7 +4,7 @@ import { Collection, Link, UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import moveFile from "@/lib/api/storage/moveFile";
 
-export default async function updateLink(
+export default async function updateLinkById(
   userId: number,
   linkId: number,
   data: LinkIncludingShortenedCollectionAndTags
@@ -102,6 +102,11 @@ export default async function updateLink(
         `archives/${collectionIsAccessible?.id}/${linkId}.png`,
         `archives/${data.collection.id}/${linkId}.png`
       );
+
+      await moveFile(
+        `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+        `archives/${data.collection.id}/${linkId}_readability.json`
+      );
     }
 
     return { response: updatedLink, status: 200 };
diff --git a/lib/api/controllers/links/postLink.ts b/lib/api/controllers/links/postLink.ts
index 5830040..a147814 100644
--- a/lib/api/controllers/links/postLink.ts
+++ b/lib/api/controllers/links/postLink.ts
@@ -56,6 +56,7 @@ export default async function postLink(
       url: link.url,
       name: link.name,
       description,
+      readabilityPath: "pending",
       collection: {
         connectOrCreate: {
           where: {
diff --git a/lib/api/controllers/migration/exportData.ts b/lib/api/controllers/migration/exportData.ts
index 49a25b4..2776d85 100644
--- a/lib/api/controllers/migration/exportData.ts
+++ b/lib/api/controllers/migration/exportData.ts
@@ -18,7 +18,7 @@ export default async function exportData(userId: number) {
 
   if (!user) return { response: "User not found.", status: 404 };
 
-  const { password, id, image, ...userData } = user;
+  const { password, id, ...userData } = user;
 
   function redactIds(obj: any) {
     if (Array.isArray(obj)) {
diff --git a/lib/api/controllers/migration/importFromHTMLFile.ts b/lib/api/controllers/migration/importFromHTMLFile.ts
index 36c48c0..7791777 100644
--- a/lib/api/controllers/migration/importFromHTMLFile.ts
+++ b/lib/api/controllers/migration/importFromHTMLFile.ts
@@ -7,94 +7,97 @@ export default async function importFromHTMLFile(
   userId: number,
   rawData: string
 ) {
-  try {
-    const dom = new JSDOM(rawData);
-    const document = dom.window.document;
+  const dom = new JSDOM(rawData);
+  const document = dom.window.document;
 
-    const folders = document.querySelectorAll("H3");
+  const folders = document.querySelectorAll("H3");
 
-    // @ts-ignore
-    for (const folder of folders) {
-      const findCollection = await prisma.user.findUnique({
-        where: {
-          id: userId,
-        },
-        select: {
-          collections: {
+  await prisma
+    .$transaction(
+      async () => {
+        // @ts-ignore
+        for (const folder of folders) {
+          const findCollection = await prisma.user.findUnique({
             where: {
-              name: folder.textContent.trim(),
+              id: userId,
             },
-          },
-        },
-      });
+            select: {
+              collections: {
+                where: {
+                  name: folder.textContent.trim(),
+                },
+              },
+            },
+          });
 
-      const checkIfCollectionExists = findCollection?.collections[0];
+          const checkIfCollectionExists = findCollection?.collections[0];
 
-      let collectionId = findCollection?.collections[0]?.id;
+          let collectionId = findCollection?.collections[0]?.id;
 
-      if (!checkIfCollectionExists || !collectionId) {
-        const newCollection = await prisma.collection.create({
-          data: {
-            name: folder.textContent.trim(),
-            description: "",
-            color: "#0ea5e9",
-            isPublic: false,
-            ownerId: userId,
-          },
-        });
+          if (!checkIfCollectionExists || !collectionId) {
+            const newCollection = await prisma.collection.create({
+              data: {
+                name: folder.textContent.trim(),
+                description: "",
+                color: "#0ea5e9",
+                isPublic: false,
+                ownerId: userId,
+              },
+            });
 
-        createFolder({ filePath: `archives/${newCollection.id}` });
+            createFolder({ filePath: `archives/${newCollection.id}` });
 
-        collectionId = newCollection.id;
-      }
+            collectionId = newCollection.id;
+          }
 
-      createFolder({ filePath: `archives/${collectionId}` });
+          createFolder({ filePath: `archives/${collectionId}` });
 
-      const bookmarks = folder.nextElementSibling.querySelectorAll("A");
-      for (const bookmark of bookmarks) {
-        await prisma.link.create({
-          data: {
-            name: bookmark.textContent.trim(),
-            url: bookmark.getAttribute("HREF"),
-            tags: bookmark.getAttribute("TAGS")
-              ? {
-                  connectOrCreate: bookmark
-                    .getAttribute("TAGS")
-                    .split(",")
-                    .map((tag: string) =>
-                      tag
-                        ? {
-                            where: {
-                              name_ownerId: {
-                                name: tag.trim(),
-                                ownerId: userId,
-                              },
-                            },
-                            create: {
-                              name: tag.trim(),
-                              owner: {
-                                connect: {
-                                  id: userId,
+          const bookmarks = folder.nextElementSibling.querySelectorAll("A");
+          for (const bookmark of bookmarks) {
+            await prisma.link.create({
+              data: {
+                name: bookmark.textContent.trim(),
+                url: bookmark.getAttribute("HREF"),
+                tags: bookmark.getAttribute("TAGS")
+                  ? {
+                      connectOrCreate: bookmark
+                        .getAttribute("TAGS")
+                        .split(",")
+                        .map((tag: string) =>
+                          tag
+                            ? {
+                                where: {
+                                  name_ownerId: {
+                                    name: tag.trim(),
+                                    ownerId: userId,
+                                  },
                                 },
-                              },
-                            },
-                          }
-                        : undefined
-                    ),
-                }
-              : undefined,
-            description: bookmark.getAttribute("DESCRIPTION")
-              ? bookmark.getAttribute("DESCRIPTION")
-              : "",
-            collectionId: collectionId,
-            createdAt: new Date(),
-          },
-        });
-      }
-    }
-  } catch (err) {
-    console.log(err);
-  }
+                                create: {
+                                  name: tag.trim(),
+                                  owner: {
+                                    connect: {
+                                      id: userId,
+                                    },
+                                  },
+                                },
+                              }
+                            : undefined
+                        ),
+                    }
+                  : undefined,
+                description: bookmark.getAttribute("DESCRIPTION")
+                  ? bookmark.getAttribute("DESCRIPTION")
+                  : "",
+                collectionId: collectionId,
+                createdAt: new Date(),
+              },
+            });
+          }
+        }
+      },
+      { timeout: 30000 }
+    )
+    .catch((err) => console.log(err));
 
   return { response: "Success.", status: 200 };
 }
diff --git a/lib/api/controllers/migration/importFromLinkwarden.ts b/lib/api/controllers/migration/importFromLinkwarden.ts
index eb68e7e..78af4e3 100644
--- a/lib/api/controllers/migration/importFromLinkwarden.ts
+++ b/lib/api/controllers/migration/importFromLinkwarden.ts
@@ -5,87 +5,88 @@ import createFolder from "@/lib/api/storage/createFolder";
 export default async function getData(userId: number, rawData: string) {
   const data: Backup = JSON.parse(rawData);
 
-  console.log(typeof data);
+  await prisma
+    .$transaction(
+      async () => {
+        // Import collections
+        for (const e of data.collections) {
+          e.name = e.name.trim();
 
-  // Import collections
-  try {
-    for (const e of data.collections) {
-      e.name = e.name.trim();
-
-      const findCollection = await prisma.user.findUnique({
-        where: {
-          id: userId,
-        },
-        select: {
-          collections: {
+          const findCollection = await prisma.user.findUnique({
             where: {
-              name: e.name,
+              id: userId,
             },
-          },
-        },
-      });
-
-      const checkIfCollectionExists = findCollection?.collections[0];
-
-      let collectionId = findCollection?.collections[0]?.id;
-
-      if (!checkIfCollectionExists) {
-        const newCollection = await prisma.collection.create({
-          data: {
-            owner: {
-              connect: {
-                id: userId,
-              },
-            },
-            name: e.name,
-            description: e.description,
-            color: e.color,
-          },
-        });
-
-        createFolder({ filePath: `archives/${newCollection.id}` });
-
-        collectionId = newCollection.id;
-      }
-
-      // Import Links
-      for (const link of e.links) {
-        const newLink = await prisma.link.create({
-          data: {
-            url: link.url,
-            name: link.name,
-            description: link.description,
-            collection: {
-              connect: {
-                id: collectionId,
-              },
-            },
-            // Import Tags
-            tags: {
-              connectOrCreate: link.tags.map((tag) => ({
+            select: {
+              collections: {
                 where: {
-                  name_ownerId: {
-                    name: tag.name.trim(),
-                    ownerId: userId,
-                  },
+                  name: e.name,
                 },
-                create: {
-                  name: tag.name.trim(),
-                  owner: {
-                    connect: {
-                      id: userId,
-                    },
-                  },
-                },
-              })),
+              },
             },
-          },
-        });
-      }
-    }
-  } catch (err) {
-    console.log(err);
-  }
+          });
+
+          const checkIfCollectionExists = findCollection?.collections[0];
+
+          let collectionId = findCollection?.collections[0]?.id;
+
+          if (!checkIfCollectionExists) {
+            const newCollection = await prisma.collection.create({
+              data: {
+                owner: {
+                  connect: {
+                    id: userId,
+                  },
+                },
+                name: e.name,
+                description: e.description,
+                color: e.color,
+              },
+            });
+
+            createFolder({ filePath: `archives/${newCollection.id}` });
+
+            collectionId = newCollection.id;
+          }
+
+          // Import Links
+          for (const link of e.links) {
+            const newLink = await prisma.link.create({
+              data: {
+                url: link.url,
+                name: link.name,
+                description: link.description,
+                collection: {
+                  connect: {
+                    id: collectionId,
+                  },
+                },
+                // Import Tags
+                tags: {
+                  connectOrCreate: link.tags.map((tag) => ({
+                    where: {
+                      name_ownerId: {
+                        name: tag.name.trim(),
+                        ownerId: userId,
+                      },
+                    },
+                    create: {
+                      name: tag.name.trim(),
+                      owner: {
+                        connect: {
+                          id: userId,
+                        },
+                      },
+                    },
+                  })),
+                },
+              },
+            });
+          }
+        }
+      },
+      { timeout: 30000 }
+    )
+    .catch((err) => console.log(err));
 
   return { response: "Success.", status: 200 };
 }
diff --git a/lib/api/controllers/users/userId/getPublicUserById.ts b/lib/api/controllers/public/users/getPublicUserById.ts
similarity index 58%
rename from lib/api/controllers/users/userId/getPublicUserById.ts
rename to lib/api/controllers/public/users/getPublicUserById.ts
index d0c844e..8f7ea48 100644
--- a/lib/api/controllers/users/userId/getPublicUserById.ts
+++ b/lib/api/controllers/public/users/getPublicUserById.ts
@@ -3,7 +3,7 @@ import { prisma } from "@/lib/api/db";
 export default async function getPublicUserById(
   targetId: number | string,
   isId: boolean,
-  requestingUsername?: string
+  requestingId?: number
 ) {
   const user = await prisma.user.findUnique({
     where: isId
@@ -29,19 +29,32 @@ export default async function getPublicUserById(
     (usernames) => usernames.username
   );
 
-  if (
-    user?.isPrivate &&
-    (!requestingUsername ||
-      !whitelistedUsernames.includes(requestingUsername?.toLowerCase()))
-  ) {
-    return { response: "User not found or profile is private.", status: 404 };
+  if (user?.isPrivate) {
+    if (requestingId) {
+      const requestingUsername = (
+        await prisma.user.findUnique({ where: { id: requestingId } })
+      )?.username;
+
+      if (
+        !requestingUsername ||
+        !whitelistedUsernames.includes(requestingUsername?.toLowerCase())
+      ) {
+        return {
+          response: "User not found or profile is private.",
+          status: 404,
+        };
+      }
+    } else
+      return { response: "User not found or profile is private.", status: 404 };
   }
 
   const { password, ...lessSensitiveInfo } = user;
 
   const data = {
+    id: lessSensitiveInfo.id,
     name: lessSensitiveInfo.name,
     username: lessSensitiveInfo.username,
+    image: lessSensitiveInfo.image,
   };
 
   return { response: data, status: 200 };
diff --git a/lib/api/controllers/tags/tagId/deleteTagById.ts b/lib/api/controllers/tags/tagId/deleteTagById.ts
new file mode 100644
index 0000000..6115184
--- /dev/null
+++ b/lib/api/controllers/tags/tagId/deleteTagById.ts
@@ -0,0 +1,26 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function deleteTagById(userId: number, tagId: number) {
+  if (!tagId)
+    return { response: "Please choose a valid name for the tag.", status: 401 };
+
+  const targetTag = await prisma.tag.findUnique({
+    where: {
+      id: tagId,
+    },
+  });
+
+  if (targetTag?.ownerId !== userId)
+    return {
+      response: "Permission denied.",
+      status: 401,
+    };
+
+  const updatedTag = await prisma.tag.delete({
+    where: {
+      id: tagId,
+    },
+  });
+
+  return { response: updatedTag, status: 200 };
+}
diff --git a/lib/api/controllers/tags/tagId/updeteTagById.ts b/lib/api/controllers/tags/tagId/updeteTagById.ts
index c477475..f2d2608 100644
--- a/lib/api/controllers/tags/tagId/updeteTagById.ts
+++ b/lib/api/controllers/tags/tagId/updeteTagById.ts
@@ -1,7 +1,7 @@
 import { prisma } from "@/lib/api/db";
 import { Tag } from "@prisma/client";
 
-export default async function updateTag(
+export default async function updeteTagById(
   userId: number,
   tagId: number,
   data: Tag
diff --git a/lib/api/controllers/users/userId/deleteUserById.ts b/lib/api/controllers/users/userId/deleteUserById.ts
index 731e877..f072e65 100644
--- a/lib/api/controllers/users/userId/deleteUserById.ts
+++ b/lib/api/controllers/users/userId/deleteUserById.ts
@@ -32,50 +32,61 @@ export default async function deleteUserById(
   }
 
   // Delete the user and all related data within a transaction
-  await prisma.$transaction(async (prisma) => {
-    // Delete whitelisted users
-    await prisma.whitelistedUser.deleteMany({
-      where: { userId },
-    });
+  await prisma
+    .$transaction(
+      async (prisma) => {
+        // Delete whitelisted users
+        await prisma.whitelistedUser.deleteMany({
+          where: { userId },
+        });
 
-    // Delete links
-    await prisma.link.deleteMany({
-      where: { collection: { ownerId: userId } },
-    });
+        // Delete links
+        await prisma.link.deleteMany({
+          where: { collection: { ownerId: userId } },
+        });
 
-    // Delete tags
-    await prisma.tag.deleteMany({
-      where: { ownerId: userId },
-    });
+        // Delete tags
+        await prisma.tag.deleteMany({
+          where: { ownerId: userId },
+        });
 
-    // Find collections that the user owns
-    const collections = await prisma.collection.findMany({
-      where: { ownerId: userId },
-    });
+        // Find collections that the user owns
+        const collections = await prisma.collection.findMany({
+          where: { ownerId: userId },
+        });
 
-    for (const collection of collections) {
-      // Delete related users and collections relations
-      await prisma.usersAndCollections.deleteMany({
-        where: { collectionId: collection.id },
-      });
+        for (const collection of collections) {
+          // Delete related users and collections relations
+          await prisma.usersAndCollections.deleteMany({
+            where: { collectionId: collection.id },
+          });
 
-      // Delete archive folders associated with collections
-      removeFolder({ filePath: `archives/${collection.id}` });
-    }
+          // Delete archive folders
+          removeFolder({ filePath: `archives/${collection.id}` });
+        }
 
-    // Delete collections after cleaning up related data
-    await prisma.collection.deleteMany({
-      where: { ownerId: userId },
-    });
+        // Delete collections after cleaning up related data
+        await prisma.collection.deleteMany({
+          where: { ownerId: userId },
+        });
 
-    // Delete user's avatar
-    removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
+        // Delete subscription
+        if (process.env.STRIPE_SECRET_KEY)
+          await prisma.subscription.delete({
+            where: { userId },
+          });
 
-    // Finally, delete the user
-    await prisma.user.delete({
-      where: { id: userId },
-    });
-  });
+        // Delete user's avatar
+        await removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
+
+        // Finally, delete the user
+        await prisma.user.delete({
+          where: { id: userId },
+        });
+      },
+      { timeout: 20000 }
+    )
+    .catch((err) => console.log(err));
 
   if (process.env.STRIPE_SECRET_KEY) {
     const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
diff --git a/lib/api/controllers/users/userId/getUserById.ts b/lib/api/controllers/users/userId/getUserById.ts
index 32bc3a6..8c6faa8 100644
--- a/lib/api/controllers/users/userId/getUserById.ts
+++ b/lib/api/controllers/users/userId/getUserById.ts
@@ -11,6 +11,7 @@ export default async function getUserById(userId: number) {
           username: true,
         },
       },
+      subscriptions: true,
     },
   });
 
@@ -21,11 +22,14 @@ export default async function getUserById(userId: number) {
     (usernames) => usernames.username
   );
 
-  const { password, ...lessSensitiveInfo } = user;
+  const { password, subscriptions, ...lessSensitiveInfo } = user;
 
   const data = {
     ...lessSensitiveInfo,
     whitelistedUsers: whitelistedUsernames,
+    subscription: {
+      active: subscriptions?.active,
+    },
   };
 
   return { response: data, status: 200 };
diff --git a/lib/api/controllers/users/userId/updateUserById.ts b/lib/api/controllers/users/userId/updateUserById.ts
index 6ceb764..0043c8b 100644
--- a/lib/api/controllers/users/userId/updateUserById.ts
+++ b/lib/api/controllers/users/userId/updateUserById.ts
@@ -10,12 +10,7 @@ const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
 
 export default async function updateUserById(
-  sessionUser: {
-    id: number;
-    username: string;
-    email: string;
-    isSubscriber: boolean;
-  },
+  userId: number,
   data: AccountSettings
 ) {
   if (emailEnabled && !data.email)
@@ -49,7 +44,7 @@ export default async function updateUserById(
 
   const userIsTaken = await prisma.user.findFirst({
     where: {
-      id: { not: sessionUser.id },
+      id: { not: userId },
       OR: emailEnabled
         ? [
             {
@@ -89,17 +84,15 @@ export default async function updateUserById(
 
   // Avatar Settings
 
-  const profilePic = data.profilePic;
-
-  if (profilePic.startsWith("data:image/jpeg;base64")) {
-    if (data.profilePic.length < 1572864) {
+  if (data.image?.startsWith("data:image/jpeg;base64")) {
+    if (data.image.length < 1572864) {
       try {
-        const base64Data = profilePic.replace(/^data:image\/jpeg;base64,/, "");
+        const base64Data = data.image.replace(/^data:image\/jpeg;base64,/, "");
 
         createFolder({ filePath: `uploads/avatar` });
 
         await createFile({
-          filePath: `uploads/avatar/${sessionUser.id}.jpg`,
+          filePath: `uploads/avatar/${userId}.jpg`,
           data: base64Data,
           isBase64: true,
         });
@@ -113,10 +106,14 @@ export default async function updateUserById(
         status: 400,
       };
     }
-  } else if (profilePic == "") {
-    removeFile({ filePath: `uploads/avatar/${sessionUser.id}.jpg` });
+  } else if (data.image == "") {
+    removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
   }
 
+  const previousEmail = (
+    await prisma.user.findUnique({ where: { id: userId } })
+  )?.email;
+
   // Other settings
 
   const saltRounds = 10;
@@ -124,13 +121,14 @@ export default async function updateUserById(
 
   const updatedUser = await prisma.user.update({
     where: {
-      id: sessionUser.id,
+      id: userId,
     },
     data: {
       name: data.name,
       username: data.username.toLowerCase().trim(),
       email: data.email?.toLowerCase().trim(),
       isPrivate: data.isPrivate,
+      image: data.image ? `uploads/avatar/${userId}.jpg` : "",
       archiveAsScreenshot: data.archiveAsScreenshot,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,
@@ -141,10 +139,12 @@ export default async function updateUserById(
     },
     include: {
       whitelistedUsers: true,
+      subscriptions: true,
     },
   });
 
-  const { whitelistedUsers, password, ...userInfo } = updatedUser;
+  const { whitelistedUsers, password, subscriptions, ...userInfo } =
+    updatedUser;
 
   // If user.whitelistedUsers is not provided, we will assume the whitelistedUsers should be removed
   const newWhitelistedUsernames: string[] = data.whitelistedUsers || [];
@@ -168,7 +168,7 @@ export default async function updateUserById(
   // Delete whitelistedUsers that are not present in the new list
   await prisma.whitelistedUser.deleteMany({
     where: {
-      userId: sessionUser.id,
+      userId: userId,
       username: {
         in: usernamesToDelete,
       },
@@ -180,24 +180,25 @@ export default async function updateUserById(
     await prisma.whitelistedUser.create({
       data: {
         username,
-        userId: sessionUser.id,
+        userId: userId,
       },
     });
   }
 
   const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
 
-  if (STRIPE_SECRET_KEY && emailEnabled && sessionUser.email !== data.email)
+  if (STRIPE_SECRET_KEY && emailEnabled && previousEmail !== data.email)
     await updateCustomerEmail(
       STRIPE_SECRET_KEY,
-      sessionUser.email,
+      previousEmail as string,
       data.email as string
     );
 
   const response: Omit<AccountSettings, "password"> = {
     ...userInfo,
     whitelistedUsers: newWhitelistedUsernames,
-    profilePic: `/api/v1/avatar/${userInfo.id}?${Date.now()}`,
+    image: userInfo.image ? `${userInfo.image}?${Date.now()}` : "",
+    subscription: { active: subscriptions?.active },
   };
 
   return { response, status: 200 };
diff --git a/lib/api/migration/migrateToV2.js b/lib/api/migration/migrateToV2.js
new file mode 100644
index 0000000..0b34118
--- /dev/null
+++ b/lib/api/migration/migrateToV2.js
@@ -0,0 +1,122 @@
+const { S3 } = require("@aws-sdk/client-s3");
+const { PrismaClient } = require("@prisma/client");
+const { existsSync } = require("fs");
+const util = require("util");
+
+const prisma = new PrismaClient();
+
+const STORAGE_FOLDER = process.env.STORAGE_FOLDER || "data";
+
+const s3Client =
+  process.env.SPACES_ENDPOINT &&
+  process.env.SPACES_REGION &&
+  process.env.SPACES_KEY &&
+  process.env.SPACES_SECRET
+    ? new S3({
+        forcePathStyle: false,
+        endpoint: process.env.SPACES_ENDPOINT,
+        region: process.env.SPACES_REGION,
+        credentials: {
+          accessKeyId: process.env.SPACES_KEY,
+          secretAccessKey: process.env.SPACES_SECRET,
+        },
+      })
+    : undefined;
+
+async function checkFileExistence(path) {
+  if (s3Client) {
+    const bucketParams = {
+      Bucket: process.env.BUCKET_NAME,
+      Key: path,
+    };
+
+    try {
+      const headObjectAsync = util.promisify(
+        s3Client.headObject.bind(s3Client)
+      );
+
+      try {
+        await headObjectAsync(bucketParams);
+        return true;
+      } catch (err) {
+        return false;
+      }
+    } catch (err) {
+      console.log("Error:", err);
+
+      return false;
+    }
+  } else {
+    try {
+      if (existsSync(STORAGE_FOLDER + "/" + path)) {
+        return true;
+      } else return false;
+    } catch (err) {
+      console.log(err);
+    }
+  }
+}
+
+// Avatars
+async function migrateToV2() {
+  const users = await prisma.user.findMany();
+
+  for (let user of users) {
+    const path = `uploads/avatar/${user.id}.jpg`;
+
+    const res = await checkFileExistence(path);
+
+    if (res) {
+      await prisma.user.update({
+        where: { id: user.id },
+        data: { image: path },
+      });
+      console.log(`Updated avatar for avatar ${user.id}`);
+    } else {
+      console.log(`No avatar found for avatar ${user.id}`);
+    }
+  }
+
+  const links = await prisma.link.findMany();
+
+  // PDFs
+  for (let link of links) {
+    const path = `archives/${link.collectionId}/${link.id}.pdf`;
+
+    const res = await checkFileExistence(path);
+
+    if (res) {
+      await prisma.link.update({
+        where: { id: link.id },
+        data: { pdfPath: path },
+      });
+      console.log(`Updated capture for pdf ${link.id}`);
+    } else {
+      console.log(`No capture found for pdf ${link.id}`);
+    }
+  }
+
+  // Screenshots
+  for (let link of links) {
+    const path = `archives/${link.collectionId}/${link.id}.png`;
+
+    const res = await checkFileExistence(path);
+
+    if (res) {
+      await prisma.link.update({
+        where: { id: link.id },
+        data: { screenshotPath: path },
+      });
+      console.log(`Updated capture for screenshot ${link.id}`);
+    } else {
+      console.log(`No capture found for screenshot ${link.id}`);
+    }
+  }
+
+  await prisma.$disconnect();
+}
+
+migrateToV2().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
diff --git a/lib/api/paymentCheckout.ts b/lib/api/paymentCheckout.ts
index 49bf027..bae7f1d 100644
--- a/lib/api/paymentCheckout.ts
+++ b/lib/api/paymentCheckout.ts
@@ -14,12 +14,12 @@ export default async function paymentCheckout(
     expand: ["data.subscriptions"],
   });
 
-  const isExistingCostomer = listByEmail?.data[0]?.id || undefined;
+  const isExistingCustomer = listByEmail?.data[0]?.id || undefined;
 
   const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
     process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
   const session = await stripe.checkout.sessions.create({
-    customer: isExistingCostomer ? isExistingCostomer : undefined,
+    customer: isExistingCustomer ? isExistingCustomer : undefined,
     line_items: [
       {
         price: priceId,
@@ -27,7 +27,7 @@ export default async function paymentCheckout(
       },
     ],
     mode: "subscription",
-    customer_email: isExistingCostomer ? undefined : email.toLowerCase(),
+    customer_email: isExistingCustomer ? undefined : email.toLowerCase(),
     success_url: `${process.env.BASE_URL}?session_id={CHECKOUT_SESSION_ID}`,
     cancel_url: `${process.env.BASE_URL}/login`,
     automatic_tax: {
diff --git a/lib/api/storage/readFile.ts b/lib/api/storage/readFile.ts
index 0721d9d..01e6fda 100644
--- a/lib/api/storage/readFile.ts
+++ b/lib/api/storage/readFile.ts
@@ -9,14 +9,13 @@ import s3Client from "./s3Client";
 import util from "util";
 
 type ReturnContentTypes =
-  | "text/html"
+  | "text/plain"
   | "image/jpeg"
   | "image/png"
-  | "application/pdf";
+  | "application/pdf"
+  | "application/json";
 
 export default async function readFile(filePath: string) {
-  const isRequestingAvatar = filePath.startsWith("uploads/avatar");
-
   let contentType: ReturnContentTypes;
 
   if (s3Client) {
@@ -41,12 +40,12 @@ export default async function readFile(filePath: string) {
       try {
         await headObjectAsync(bucketParams);
       } catch (err) {
-        contentType = "text/html";
+        contentType = "text/plain";
 
         returnObject = {
-          file: isRequestingAvatar ? "File not found." : fileNotFoundTemplate,
+          file: "File not found.",
           contentType,
-          status: isRequestingAvatar ? 200 : 400,
+          status: 400,
         };
       }
 
@@ -60,6 +59,8 @@ export default async function readFile(filePath: string) {
           contentType = "application/pdf";
         } else if (filePath.endsWith(".png")) {
           contentType = "image/png";
+        } else if (filePath.endsWith("_readability.json")) {
+          contentType = "application/json";
         } else {
           // if (filePath.endsWith(".jpg"))
           contentType = "image/jpeg";
@@ -71,9 +72,9 @@ export default async function readFile(filePath: string) {
     } catch (err) {
       console.log("Error:", err);
 
-      contentType = "text/html";
+      contentType = "text/plain";
       return {
-        file: "An internal occurred, please contact support.",
+        file: "An internal occurred, please contact the support team.",
         contentType,
       };
     }
@@ -85,6 +86,8 @@ export default async function readFile(filePath: string) {
       contentType = "application/pdf";
     } else if (filePath.endsWith(".png")) {
       contentType = "image/png";
+    } else if (filePath.endsWith("_readability.json")) {
+      contentType = "application/json";
     } else {
       // if (filePath.endsWith(".jpg"))
       contentType = "image/jpeg";
@@ -92,9 +95,9 @@ export default async function readFile(filePath: string) {
 
     if (!fs.existsSync(creationPath))
       return {
-        file: isRequestingAvatar ? "File not found." : fileNotFoundTemplate,
-        contentType: "text/html",
-        status: isRequestingAvatar ? 200 : 400,
+        file: "File not found.",
+        contentType: "text/plain",
+        status: 400,
       };
     else {
       const file = fs.readFileSync(creationPath);
diff --git a/lib/api/verifySubscription.ts b/lib/api/verifySubscription.ts
new file mode 100644
index 0000000..fd32307
--- /dev/null
+++ b/lib/api/verifySubscription.ts
@@ -0,0 +1,75 @@
+import { prisma } from "./db";
+import { Subscription, User } from "@prisma/client";
+import checkSubscriptionByEmail from "./checkSubscriptionByEmail";
+
+interface UserIncludingSubscription extends User {
+  subscriptions: Subscription | null;
+}
+
+export default async function verifySubscription(
+  user?: UserIncludingSubscription
+) {
+  if (!user) {
+    return null;
+  }
+
+  const subscription = user.subscriptions;
+
+  const currentDate = new Date();
+
+  if (
+    subscription &&
+    currentDate > subscription.currentPeriodEnd &&
+    !subscription.active
+  ) {
+    return null;
+  }
+
+  if (!subscription || currentDate > subscription.currentPeriodEnd) {
+    const {
+      active,
+      stripeSubscriptionId,
+      currentPeriodStart,
+      currentPeriodEnd,
+    } = await checkSubscriptionByEmail(user.email as string);
+
+    if (
+      active &&
+      stripeSubscriptionId &&
+      currentPeriodStart &&
+      currentPeriodEnd
+    ) {
+      await prisma.subscription
+        .upsert({
+          where: {
+            userId: user.id,
+          },
+          create: {
+            active,
+            stripeSubscriptionId,
+            currentPeriodStart: new Date(currentPeriodStart),
+            currentPeriodEnd: new Date(currentPeriodEnd),
+            userId: user.id,
+          },
+          update: {
+            active,
+            stripeSubscriptionId,
+            currentPeriodStart: new Date(currentPeriodStart),
+            currentPeriodEnd: new Date(currentPeriodEnd),
+          },
+        })
+        .catch((err) => console.log(err));
+    }
+
+    if (!active) {
+      if (user.username)
+        // await prisma.user.update({
+        //   where: { id: user.id },
+        //   data: { username: null },
+        // });
+        return null;
+    }
+  }
+
+  return user;
+}
diff --git a/lib/api/verifyUser.ts b/lib/api/verifyUser.ts
new file mode 100644
index 0000000..943f68e
--- /dev/null
+++ b/lib/api/verifyUser.ts
@@ -0,0 +1,60 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "./db";
+import { User } from "@prisma/client";
+import verifySubscription from "./verifySubscription";
+
+type Props = {
+  req: NextApiRequest;
+  res: NextApiResponse;
+};
+
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
+export default async function verifyUser({
+  req,
+  res,
+}: Props): Promise<User | null> {
+  const token = await getToken({ req });
+  const userId = token?.id;
+
+  if (!userId) {
+    res.status(401).json({ response: "You must be logged in." });
+    return null;
+  }
+
+  const user = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+    include: {
+      subscriptions: true,
+    },
+  });
+
+  if (!user) {
+    res.status(404).json({ response: "User not found." });
+    return null;
+  }
+
+  if (!user.username) {
+    res.status(401).json({
+      response: "Username not found.",
+    });
+    return null;
+  }
+
+  if (STRIPE_SECRET_KEY) {
+    const subscribedUser = verifySubscription(user);
+
+    if (!subscribedUser) {
+      res.status(401).json({
+        response:
+          "You are not a subscriber, feel free to reach out to us at support@linkwarden.app if you think this is an issue.",
+      });
+      return null;
+    }
+  }
+
+  return user;
+}
diff --git a/lib/client/addMemberToCollection.ts b/lib/client/addMemberToCollection.ts
index af0db51..8d1e0b1 100644
--- a/lib/client/addMemberToCollection.ts
+++ b/lib/client/addMemberToCollection.ts
@@ -27,14 +27,15 @@ const addMemberToCollection = async (
     if (user.username) {
       setMember({
         collectionId: collection.id,
-        userId: user.id,
         canCreate: false,
         canUpdate: false,
         canDelete: false,
+        userId: user.id,
         user: {
           id: user.id,
           name: user.name,
           username: user.username,
+          image: user.image,
         },
       });
     }
diff --git a/lib/client/avatarExists.ts b/lib/client/avatarExists.ts
deleted file mode 100644
index f81f1e9..0000000
--- a/lib/client/avatarExists.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-const avatarCache = new Map();
-
-export default async function avatarExists(fileUrl: string): Promise<boolean> {
-  if (avatarCache.has(fileUrl)) {
-    return avatarCache.get(fileUrl);
-  }
-
-  const response = await fetch(fileUrl, { method: "HEAD" });
-  const exists = !(response.headers.get("content-type") === "text/html");
-
-  avatarCache.set(fileUrl, exists);
-  return exists;
-}
diff --git a/lib/client/getLatestVersion.ts b/lib/client/getLatestVersion.ts
new file mode 100644
index 0000000..414b53b
--- /dev/null
+++ b/lib/client/getLatestVersion.ts
@@ -0,0 +1,16 @@
+export default async function getLatestVersion(setShowAnnouncement: Function) {
+  const announcementId = localStorage.getItem("announcementId");
+
+  const response = await fetch(
+    `https://blog.linkwarden.app/latest-announcement.json`
+  );
+
+  const data = await response.json();
+
+  const latestAnnouncement = data.id;
+
+  if (announcementId !== latestAnnouncement) {
+    setShowAnnouncement(true);
+    localStorage.setItem("announcementId", latestAnnouncement);
+  }
+}
diff --git a/lib/client/getPublicUserData.ts b/lib/client/getPublicUserData.ts
index 20bd1e9..595ea7c 100644
--- a/lib/client/getPublicUserData.ts
+++ b/lib/client/getPublicUserData.ts
@@ -1,7 +1,7 @@
 import { toast } from "react-hot-toast";
 
 export default async function getPublicUserData(id: number | string) {
-  const response = await fetch(`/api/v1/users/${id}`);
+  const response = await fetch(`/api/v1/public/users/${id}`);
 
   const data = await response.json();
 
diff --git a/next.config.js b/next.config.js
index 1c05e95..71cfd8e 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   images: {
     domains: ["t2.gstatic.com"],
+    minimumCacheTTL: 10,
   },
 };
 
diff --git a/package.json b/package.json
index 93867e6..5f53bc2 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.15",
+    "@mozilla/readability": "^0.4.4",
     "@next/font": "13.4.9",
     "@prisma/client": "^4.16.2",
     "@stripe/stripe-js": "^1.54.1",
@@ -32,12 +33,14 @@
     "axios": "^1.5.1",
     "bcrypt": "^5.1.0",
     "colorthief": "^2.4.0",
-    "crypto-js": "^4.1.1",
+    "crypto-js": "^4.2.0",
     "csstype": "^3.1.2",
+    "dompurify": "^3.0.6",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.9",
     "framer-motion": "^10.16.4",
     "jsdom": "^22.1.0",
+    "micro": "^10.0.1",
     "next": "13.4.12",
     "next-auth": "^4.22.1",
     "next-themes": "^0.2.1",
@@ -57,6 +60,7 @@
   "devDependencies": {
     "@playwright/test": "^1.35.1",
     "@types/bcrypt": "^5.0.0",
+    "@types/dompurify": "^3.0.4",
     "@types/jsdom": "^21.1.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.26",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 69d8b6f..25217f9 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -22,7 +22,11 @@ export default function App({
   }, []);
 
   return (
-    <SessionProvider session={pageProps.session} basePath="/api/v1/auth">
+    <SessionProvider
+      session={pageProps.session}
+      refetchOnWindowFocus={false}
+      basePath="/api/v1/auth"
+    >
       <Head>
         <title>Linkwarden</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/pages/api/v1/archives/[...params].ts b/pages/api/v1/archives/[...params].ts
index 814e5ee..1436c04 100644
--- a/pages/api/v1/archives/[...params].ts
+++ b/pages/api/v1/archives/[...params].ts
@@ -1,28 +1,20 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getPermission from "@/lib/api/getPermission";
 import readFile from "@/lib/api/storage/readFile";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function Index(req: NextApiRequest, res: NextApiResponse) {
   if (!req.query.params)
     return res.status(401).json({ response: "Invalid parameters." });
 
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
   const collectionId = req.query.params[0];
   const linkId = req.query.params[1];
 
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.username)
-    return res.status(401).json({ response: "You must be logged in." });
-  else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
-
   const collectionIsAccessible = await getPermission({
-    userId: session.user.id,
+    userId: user.id,
     collectionId: Number(collectionId),
   });
 
diff --git a/pages/api/v1/auth/[...nextauth].ts b/pages/api/v1/auth/[...nextauth].ts
index 1bde92d..0b4ab7e 100644
--- a/pages/api/v1/auth/[...nextauth].ts
+++ b/pages/api/v1/auth/[...nextauth].ts
@@ -1,24 +1,26 @@
 import { prisma } from "@/lib/api/db";
 import NextAuth from "next-auth/next";
 import CredentialsProvider from "next-auth/providers/credentials";
-import { AuthOptions, Session } from "next-auth";
+import { AuthOptions } from "next-auth";
 import bcrypt from "bcrypt";
 import EmailProvider from "next-auth/providers/email";
-import { JWT } from "next-auth/jwt";
 import { PrismaAdapter } from "@auth/prisma-adapter";
 import { Adapter } from "next-auth/adapters";
 import sendVerificationRequest from "@/lib/api/sendVerificationRequest";
 import { Provider } from "next-auth/providers";
-import checkSubscription from "@/lib/api/checkSubscription";
+import verifySubscription from "@/lib/api/verifySubscription";
 
 const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
 
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
 const providers: Provider[] = [
   CredentialsProvider({
     type: "credentials",
     credentials: {},
     async authorize(credentials, req) {
+      console.log("User log in attempt...");
       if (!credentials) return null;
 
       const { username, password } = credentials as {
@@ -26,7 +28,7 @@ const providers: Provider[] = [
         password: string;
       };
 
-      const findUser = await prisma.user.findFirst({
+      const user = await prisma.user.findFirst({
         where: emailEnabled
           ? {
               OR: [
@@ -46,12 +48,12 @@ const providers: Provider[] = [
 
       let passwordMatches: boolean = false;
 
-      if (findUser?.password) {
-        passwordMatches = bcrypt.compareSync(password, findUser.password);
+      if (user?.password) {
+        passwordMatches = bcrypt.compareSync(password, user.password);
       }
 
       if (passwordMatches) {
-        return findUser;
+        return { id: user?.id };
       } else return null as any;
     },
   }),
@@ -81,64 +83,31 @@ export const authOptions: AuthOptions = {
     verifyRequest: "/confirmation",
   },
   callbacks: {
-    session: async ({ session, token }: { session: Session; token: JWT }) => {
-      session.user.id = parseInt(token.id as string);
-      session.user.username = token.username as string;
-      session.user.isSubscriber = token.isSubscriber as boolean;
-
-      return session;
-    },
     async jwt({ token, trigger, user }) {
-      const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+      token.sub = token.sub ? Number(token.sub) : undefined;
+      if (trigger === "signIn") token.id = user?.id as number;
 
-      const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
-        process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
-      const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS
-        ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400
-        : 1209600;
-      const subscriptionIsTimesUp =
-        token.subscriptionCanceledAt &&
-        new Date() >
-          new Date(
-            ((token.subscriptionCanceledAt as number) + secondsInTwoWeeks) *
-              1000
-          );
-
-      if (
-        STRIPE_SECRET_KEY &&
-        (trigger || subscriptionIsTimesUp || !token.isSubscriber)
-      ) {
-        const subscription = await checkSubscription(
-          STRIPE_SECRET_KEY,
-          token.email as string
-        );
-
-        if (subscription.subscriptionCanceledAt) {
-          token.subscriptionCanceledAt = subscription.subscriptionCanceledAt;
-        } else token.subscriptionCanceledAt = undefined;
-
-        token.isSubscriber = subscription.isSubscriber;
-      }
-
-      if (trigger === "signIn") {
-        token.id = user.id;
-        token.username = (user as any).username;
-      } else if (trigger === "update" && token.id) {
-        console.log(token);
+      return token;
+    },
+    async session({ session, token }) {
+      session.user.id = token.id;
 
+      if (STRIPE_SECRET_KEY) {
         const user = await prisma.user.findUnique({
           where: {
-            id: token.id as number,
+            id: token.id,
+          },
+          include: {
+            subscriptions: true,
           },
         });
 
         if (user) {
-          token.name = user.name;
-          token.username = user.username?.toLowerCase();
-          token.email = user.email?.toLowerCase();
+          const subscribedUser = await verifySubscription(user);
         }
       }
-      return token;
+
+      return session;
     },
   },
 };
diff --git a/pages/api/v1/avatar/[id].ts b/pages/api/v1/avatar/[id].ts
index c92b98b..f20b9b6 100644
--- a/pages/api/v1/avatar/[id].ts
+++ b/pages/api/v1/avatar/[id].ts
@@ -1,34 +1,21 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import { prisma } from "@/lib/api/db";
 import readFile from "@/lib/api/storage/readFile";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function Index(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  const userId = session?.user.id;
-  const username = session?.user.username?.toLowerCase();
   const queryId = Number(req.query.id);
 
-  if (!userId || !username)
-    return res
-      .setHeader("Content-Type", "text/html")
-      .status(401)
-      .send("You must be logged in.");
-  else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (!queryId)
     return res
-      .setHeader("Content-Type", "text/html")
+      .setHeader("Content-Type", "text/plain")
       .status(401)
       .send("Invalid parameters.");
 
-  if (userId !== queryId) {
+  if (user.id !== queryId) {
     const targetUser = await prisma.user.findUnique({
       where: {
         id: queryId,
@@ -42,10 +29,15 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
       (whitelistedUsername) => whitelistedUsername.username
     );
 
-    if (targetUser?.isPrivate && !whitelistedUsernames?.includes(username)) {
+    if (
+      targetUser?.isPrivate &&
+      user.username &&
+      !whitelistedUsernames?.includes(user.username)
+    ) {
       return res
-        .setHeader("Content-Type", "text/html")
-        .send("This profile is private.");
+        .setHeader("Content-Type", "text/plain")
+        .status(400)
+        .send("File not found.");
     }
   }
 
diff --git a/pages/api/v1/collections/[id].ts b/pages/api/v1/collections/[id].ts
index 3ac289c..4f8020c 100644
--- a/pages/api/v1/collections/[id].ts
+++ b/pages/api/v1/collections/[id].ts
@@ -1,33 +1,25 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import updateCollectionById from "@/lib/api/controllers/collections/collectionId/updateCollectionById";
 import deleteCollectionById from "@/lib/api/controllers/collections/collectionId/deleteCollectionById";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function collections(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "PUT") {
     const updated = await updateCollectionById(
-      session.user.id,
+      user.id,
       Number(req.query.id) as number,
       req.body
     );
     return res.status(updated.status).json({ response: updated.response });
   } else if (req.method === "DELETE") {
     const deleted = await deleteCollectionById(
-      session.user.id,
+      user.id,
       Number(req.query.id) as number
     );
     return res.status(deleted.status).json({ response: deleted.response });
diff --git a/pages/api/v1/collections/index.ts b/pages/api/v1/collections/index.ts
index 73cb45e..3b229dd 100644
--- a/pages/api/v1/collections/index.ts
+++ b/pages/api/v1/collections/index.ts
@@ -1,30 +1,22 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getCollections from "@/lib/api/controllers/collections/getCollections";
 import postCollection from "@/lib/api/controllers/collections/postCollection";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function collections(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
-    const collections = await getCollections(session.user.id);
+    const collections = await getCollections(user.id);
     return res
       .status(collections.status)
       .json({ response: collections.response });
   } else if (req.method === "POST") {
-    const newCollection = await postCollection(req.body, session.user.id);
+    const newCollection = await postCollection(req.body, user.id);
     return res
       .status(newCollection.status)
       .json({ response: newCollection.response });
diff --git a/pages/api/v1/dashboard/index.ts b/pages/api/v1/dashboard/index.ts
index 5c92e00..ea2a3da 100644
--- a/pages/api/v1/dashboard/index.ts
+++ b/pages/api/v1/dashboard/index.ts
@@ -1,19 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import { LinkRequestQuery } from "@/types/global";
 import getDashboardData from "@/lib/api/controllers/dashboard/getDashboardData";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
     const convertedData: LinkRequestQuery = {
@@ -21,7 +13,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
     };
 
-    const links = await getDashboardData(session.user.id, convertedData);
+    const links = await getDashboardData(user.id, convertedData);
     return res.status(links.status).json({ response: links.response });
   }
 }
diff --git a/pages/api/v1/getToken.ts b/pages/api/v1/getToken.ts
deleted file mode 100644
index c767075..0000000
--- a/pages/api/v1/getToken.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// For future...
-// import { getToken } from "next-auth/jwt";
-
-// export default async (req, res) => {
-//   // If you don't have NEXTAUTH_SECRET set, you will have to pass your secret as `secret` to `getToken`
-//   console.log({ req });
-//   const token = await getToken({ req, raw: true });
-//   if (token) {
-//     // Signed in
-//     console.log("JSON Web Token", JSON.stringify(token, null, 2));
-//   } else {
-//     // Not Signed in
-//     res.status(401);
-//   }
-//   res.end();
-// };
diff --git a/pages/api/v1/links/[id].ts b/pages/api/v1/links/[id].ts
deleted file mode 100644
index 9847f2a..0000000
--- a/pages/api/v1/links/[id].ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
-import deleteLinkById from "@/lib/api/controllers/links/linkId/deleteLinkById";
-import updateLinkById from "@/lib/api/controllers/links/linkId/updateLinkById";
-
-export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
-
-  if (req.method === "PUT") {
-    const updated = await updateLinkById(
-      session.user.id,
-      Number(req.query.id),
-      req.body
-    );
-    return res.status(updated.status).json({
-      response: updated.response,
-    });
-  } else if (req.method === "DELETE") {
-    const deleted = await deleteLinkById(session.user.id, Number(req.query.id));
-    return res.status(deleted.status).json({
-      response: deleted.response,
-    });
-  }
-}
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
new file mode 100644
index 0000000..65da756
--- /dev/null
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -0,0 +1,63 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import archive from "@/lib/api/archive";
+import { prisma } from "@/lib/api/db";
+import verifyUser from "@/lib/api/verifyUser";
+
+const RE_ARCHIVE_LIMIT = Number(process.env.RE_ARCHIVE_LIMIT) || 5;
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  const link = await prisma.link.findUnique({
+    where: {
+      id: Number(req.query.id),
+    },
+    include: { collection: true },
+  });
+
+  if (!link)
+    return res.status(404).json({
+      response: "Link not found.",
+    });
+
+  if (link.collection.ownerId !== user.id)
+    return res.status(401).json({
+      response: "Permission denied.",
+    });
+
+  if (req.method === "PUT") {
+    if (
+      link?.lastPreserved &&
+      getTimezoneDifferenceInMinutes(new Date(), link?.lastPreserved) <
+        RE_ARCHIVE_LIMIT
+    )
+      return res.status(400).json({
+        response: `This link is currently being saved or has already been preserved. Please retry in ${
+          RE_ARCHIVE_LIMIT -
+          Math.floor(
+            getTimezoneDifferenceInMinutes(new Date(), link?.lastPreserved)
+          )
+        } minutes or create a new one.`,
+      });
+
+    archive(link.id, link.url, user.id);
+    return res.status(200).json({
+      response: "Link is being archived.",
+    });
+  }
+
+  // TODO - Later?
+  // else if (req.method === "DELETE") {}
+}
+
+const getTimezoneDifferenceInMinutes = (future: Date, past: Date) => {
+  const date1 = new Date(future);
+  const date2 = new Date(past);
+
+  const diffInMilliseconds = Math.abs(date1.getTime() - date2.getTime());
+
+  const diffInMinutes = diffInMilliseconds / (1000 * 60);
+
+  return diffInMinutes;
+};
diff --git a/pages/api/v1/links/[id]/index.ts b/pages/api/v1/links/[id]/index.ts
new file mode 100644
index 0000000..146ecb2
--- /dev/null
+++ b/pages/api/v1/links/[id]/index.ts
@@ -0,0 +1,31 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import deleteLinkById from "@/lib/api/controllers/links/linkId/deleteLinkById";
+import updateLinkById from "@/lib/api/controllers/links/linkId/updateLinkById";
+import getLinkById from "@/lib/api/controllers/links/linkId/getLinkById";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const updated = await getLinkById(user.id, Number(req.query.id));
+    return res.status(updated.status).json({
+      response: updated.response,
+    });
+  } else if (req.method === "PUT") {
+    const updated = await updateLinkById(
+      user.id,
+      Number(req.query.id),
+      req.body
+    );
+    return res.status(updated.status).json({
+      response: updated.response,
+    });
+  } else if (req.method === "DELETE") {
+    const deleted = await deleteLinkById(user.id, Number(req.query.id));
+    return res.status(deleted.status).json({
+      response: deleted.response,
+    });
+  }
+}
diff --git a/pages/api/v1/links/index.ts b/pages/api/v1/links/index.ts
index c878083..58a352a 100644
--- a/pages/api/v1/links/index.ts
+++ b/pages/api/v1/links/index.ts
@@ -1,20 +1,12 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getLinks from "@/lib/api/controllers/links/getLinks";
 import postLink from "@/lib/api/controllers/links/postLink";
 import { LinkRequestQuery } from "@/types/global";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
     // Convert the type of the request query to "LinkRequestQuery"
@@ -35,13 +27,15 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       searchByUrl: req.query.searchByUrl === "true" ? true : undefined,
       searchByDescription:
         req.query.searchByDescription === "true" ? true : undefined,
+      searchByTextContent:
+        req.query.searchByTextContent === "true" ? true : undefined,
       searchByTags: req.query.searchByTags === "true" ? true : undefined,
     };
 
-    const links = await getLinks(session.user.id, convertedData);
+    const links = await getLinks(user.id, convertedData);
     return res.status(links.status).json({ response: links.response });
   } else if (req.method === "POST") {
-    const newlink = await postLink(req.body, session.user.id);
+    const newlink = await postLink(req.body, user.id);
     return res.status(newlink.status).json({
       response: newlink.response,
     });
diff --git a/pages/api/v1/migration/index.ts b/pages/api/v1/migration/index.ts
index 628a0d2..e950563 100644
--- a/pages/api/v1/migration/index.ts
+++ b/pages/api/v1/migration/index.ts
@@ -1,32 +1,24 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import exportData from "@/lib/api/controllers/migration/exportData";
 import importFromHTMLFile from "@/lib/api/controllers/migration/importFromHTMLFile";
 import importFromLinkwarden from "@/lib/api/controllers/migration/importFromLinkwarden";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
+import verifyUser from "@/lib/api/verifyUser";
 
 export const config = {
   api: {
     bodyParser: {
-      sizeLimit: process.env.IMPORT_SIZE_LIMIT || "2mb",
+      sizeLimit: `${process.env.IMPORT_SIZE_LIMIT || "5"}mb`,
     },
   },
 };
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
-    const data = await exportData(session.user.id);
+    const data = await exportData(user.id);
 
     if (data.status === 200)
       return res
@@ -39,10 +31,10 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
 
     let data;
     if (request.format === MigrationFormat.htmlFile)
-      data = await importFromHTMLFile(session.user.id, request.data);
+      data = await importFromHTMLFile(user.id, request.data);
 
     if (request.format === MigrationFormat.linkwarden)
-      data = await importFromLinkwarden(session.user.id, request.data);
+      data = await importFromLinkwarden(user.id, request.data);
 
     if (data) return res.status(data.status).json({ response: data.response });
   }
diff --git a/pages/api/v1/payment/index.ts b/pages/api/v1/payment/index.ts
index 23e0673..779d646 100644
--- a/pages/api/v1/payment/index.ts
+++ b/pages/api/v1/payment/index.ts
@@ -1,32 +1,39 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import paymentCheckout from "@/lib/api/paymentCheckout";
 import { Plan } from "@/types/global";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "@/lib/api/db";
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
   const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
   const MONTHLY_PRICE_ID = process.env.MONTHLY_PRICE_ID;
   const YEARLY_PRICE_ID = process.env.YEARLY_PRICE_ID;
-  const session = await getServerSession(req, res, authOptions);
 
-  if (!session?.user?.id)
-    return res.status(401).json({ response: "You must be logged in." });
-  else if (!STRIPE_SECRET_KEY || !MONTHLY_PRICE_ID || !YEARLY_PRICE_ID) {
+  const token = await getToken({ req });
+
+  if (!STRIPE_SECRET_KEY || !MONTHLY_PRICE_ID || !YEARLY_PRICE_ID)
     return res.status(400).json({ response: "Payment is disabled." });
-  }
+
+  console.log(token);
+
+  if (!token?.id) return res.status(404).json({ response: "Token invalid." });
+
+  const email = (await prisma.user.findUnique({ where: { id: token.id } }))
+    ?.email;
+
+  if (!email) return res.status(404).json({ response: "User not found." });
 
   let PRICE_ID = MONTHLY_PRICE_ID;
 
-  if ((Number(req.query.plan) as unknown as Plan) === Plan.monthly)
+  if ((Number(req.query.plan) as Plan) === Plan.monthly)
     PRICE_ID = MONTHLY_PRICE_ID;
-  else if ((Number(req.query.plan) as unknown as Plan) === Plan.yearly)
+  else if ((Number(req.query.plan) as Plan) === Plan.yearly)
     PRICE_ID = YEARLY_PRICE_ID;
 
   if (req.method === "GET") {
     const users = await paymentCheckout(
       STRIPE_SECRET_KEY,
-      session?.user.email,
+      email as string,
       PRICE_ID
     );
     return res.status(users.status).json({ response: users.response });
diff --git a/pages/api/v1/public/users/[id].ts b/pages/api/v1/public/users/[id].ts
new file mode 100644
index 0000000..5126740
--- /dev/null
+++ b/pages/api/v1/public/users/[id].ts
@@ -0,0 +1,18 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getPublicUserById from "@/lib/api/controllers/public/users/getPublicUserById";
+import { getToken } from "next-auth/jwt";
+
+export default async function users(req: NextApiRequest, res: NextApiResponse) {
+  const token = await getToken({ req });
+  const requestingId = token?.id;
+
+  const lookupId = req.query.id as string;
+
+  // Check if "lookupId" is the user "id" or their "username"
+  const isId = lookupId.split("").every((e) => Number.isInteger(parseInt(e)));
+
+  if (req.method === "GET") {
+    const users = await getPublicUserById(lookupId, isId, requestingId);
+    return res.status(users.status).json({ response: users.response });
+  }
+}
diff --git a/pages/api/v1/tags/[id].ts b/pages/api/v1/tags/[id].ts
index 22b355f..d82b1f7 100644
--- a/pages/api/v1/tags/[id].ts
+++ b/pages/api/v1/tags/[id].ts
@@ -1,23 +1,19 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
-import updateTag from "@/lib/api/controllers/tags/tagId/updeteTagById";
+import updeteTagById from "@/lib/api/controllers/tags/tagId/updeteTagById";
+import verifyUser from "@/lib/api/verifyUser";
+import deleteTagById from "@/lib/api/controllers/tags/tagId/deleteTagById";
 
 export default async function tags(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.username) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   const tagId = Number(req.query.id);
 
   if (req.method === "PUT") {
-    const tags = await updateTag(session.user.id, tagId, req.body);
+    const tags = await updeteTagById(user.id, tagId, req.body);
+    return res.status(tags.status).json({ response: tags.response });
+  } else if (req.method === "DELETE") {
+    const tags = await deleteTagById(user.id, tagId);
     return res.status(tags.status).json({ response: tags.response });
   }
 }
diff --git a/pages/api/v1/tags/index.ts b/pages/api/v1/tags/index.ts
index efaf7b2..2376ef9 100644
--- a/pages/api/v1/tags/index.ts
+++ b/pages/api/v1/tags/index.ts
@@ -1,21 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getTags from "@/lib/api/controllers/tags/getTags";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function tags(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.username) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
-    const tags = await getTags(session.user.id);
+    const tags = await getTags(user.id);
     return res.status(tags.status).json({ response: tags.response });
   }
 }
diff --git a/pages/api/v1/users/[id].ts b/pages/api/v1/users/[id].ts
index 20b3551..6063d53 100644
--- a/pages/api/v1/users/[id].ts
+++ b/pages/api/v1/users/[id].ts
@@ -1,48 +1,58 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getUserById from "@/lib/api/controllers/users/userId/getUserById";
-import getPublicUserById from "@/lib/api/controllers/users/userId/getPublicUserById";
 import updateUserById from "@/lib/api/controllers/users/userId/updateUserById";
 import deleteUserById from "@/lib/api/controllers/users/userId/deleteUserById";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "@/lib/api/db";
+import verifySubscription from "@/lib/api/verifySubscription";
+
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-  const userId = session?.user.id;
-  const username = session?.user.username;
-
-  const lookupId = req.query.id as string;
-  const isSelf =
-    userId === Number(lookupId) || username === lookupId ? true : false;
-
-  // Check if "lookupId" is the user "id" or their "username"
-  const isId = lookupId.split("").every((e) => Number.isInteger(parseInt(e)));
-
-  if (req.method === "GET" && !isSelf) {
-    const users = await getPublicUserById(lookupId, isId, username);
-    return res.status(users.status).json({ response: users.response });
-  }
+  const token = await getToken({ req });
+  const userId = token?.id;
 
   if (!userId) {
     return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  }
+
+  if (userId !== Number(req.query.id))
+    return res.status(401).json({ response: "Permission denied." });
 
   if (req.method === "GET") {
-    const users = await getUserById(session.user.id);
+    const users = await getUserById(userId);
     return res.status(users.status).json({ response: users.response });
-  } else if (req.method === "PUT") {
-    const updated = await updateUserById(session.user, req.body);
+  }
+
+  if (STRIPE_SECRET_KEY) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.id,
+      },
+      include: {
+        subscriptions: true,
+      },
+    });
+
+    if (user) {
+      const subscribedUser = await verifySubscription(user);
+      if (!subscribedUser) {
+        return res.status(401).json({
+          response:
+            "You are not a subscriber, feel free to reach out to us at support@linkwarden.app if you think this is an issue.",
+        });
+      }
+    } else {
+      return res.status(404).json({ response: "User not found." });
+    }
+  }
+
+  if (req.method === "PUT") {
+    const updated = await updateUserById(userId, req.body);
     return res.status(updated.status).json({ response: updated.response });
-  } else if (
-    req.method === "DELETE" &&
-    session.user.id === Number(req.query.id)
-  ) {
+  } else if (req.method === "DELETE") {
     console.log(req.body);
-    const updated = await deleteUserById(session.user.id, req.body);
+    const updated = await deleteUserById(userId, req.body);
     return res.status(updated.status).json({ response: updated.response });
   }
 }
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 59a7fc2..d4858e2 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -12,7 +12,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
-import { useSession } from "next-auth/react";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import SortDropdown from "@/components/SortDropdown";
 import useModalStore from "@/store/modals";
@@ -31,8 +30,6 @@ export default function Index() {
   const { links } = useLinkStore();
   const { collections } = useCollectionStore();
 
-  const { data } = useSession();
-
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -82,7 +79,7 @@ export default function Index() {
             {activeCollection ? (
               <div
                 className={`min-w-[15rem] ${
-                  activeCollection.members[0] && "mr-3"
+                  activeCollection.members[1] && "mr-3"
                 }`}
               >
                 <div
@@ -104,8 +101,10 @@ export default function Index() {
                       return (
                         <ProfilePhoto
                           key={i}
-                          src={`/api/v1/avatar/${e.userId}?${Date.now()}`}
-                          className="-mr-3 border-[3px]"
+                          src={e.user.image ? e.user.image : undefined}
+                          className={`${
+                            activeCollection.members[1] && "-mr-3"
+                          } border-[3px]`}
                         />
                       );
                     })
@@ -220,7 +219,7 @@ export default function Index() {
                       if (target.id !== "expand-dropdown")
                         setExpandDropdown(false);
                     }}
-                    className="absolute top-8 right-0 z-10 w-40"
+                    className="absolute top-8 right-0 z-10 w-44"
                   />
                 ) : null}
               </div>
@@ -229,9 +228,11 @@ export default function Index() {
         </div>
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-            {links.map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
+            {links
+              .filter((e) => e.collection.id === activeCollection?.id)
+              .map((e, i) => {
+                return <LinkCard key={i} link={e} count={i} />;
+              })}
           </div>
         ) : (
           <NoLinksFound />
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 0df0588..a06ad6c 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -15,11 +15,8 @@ import useModalStore from "@/store/modals";
 import SortDropdown from "@/components/SortDropdown";
 import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
-import { useTheme } from "next-themes";
 
 export default function Collections() {
-  const { theme } = useTheme();
-
   const { collections } = useCollectionStore();
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [sortDropdown, setSortDropdown] = useState(false);
@@ -154,7 +151,7 @@ export default function Collections() {
                 </p>
 
                 <p className="capitalize text-black dark:text-white">
-                  Shared collections you're a member of
+                  Shared collections you&apos;re a member of
                 </p>
               </div>
             </div>
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 8970883..d6d2001 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -261,7 +261,7 @@ export default function Dashboard() {
                           title="JSON File"
                           className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
                         >
-                          Linkwarden...
+                          Linkwarden File...
                           <input
                             type="file"
                             name="photo"
diff --git a/pages/index.tsx b/pages/index.tsx
index e4679ca..aa5897c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,10 +1,3 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-
 export default function Index() {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.push("/dashboard");
-  }, []);
+  return null;
 }
diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
new file mode 100644
index 0000000..b05d0fb
--- /dev/null
+++ b/pages/links/[id].tsx
@@ -0,0 +1,300 @@
+import LinkLayout from "@/layouts/LinkLayout";
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import useLinkStore from "@/store/links";
+import { useRouter } from "next/router";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import Image from "next/image";
+import ColorThief, { RGBColor } from "colorthief";
+import { useTheme } from "next-themes";
+import unescapeString from "@/lib/client/unescapeString";
+import isValidUrl from "@/lib/client/isValidUrl";
+import DOMPurify from "dompurify";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBoxesStacked, faFolder } from "@fortawesome/free-solid-svg-icons";
+import useModalStore from "@/store/modals";
+import { useSession } from "next-auth/react";
+
+type LinkContent = {
+  title: string;
+  content: string;
+  textContent: string;
+  length: number;
+  excerpt: string;
+  byline: string;
+  dir: string;
+  siteName: string;
+  lang: string;
+};
+
+export default function Index() {
+  const { theme } = useTheme();
+  const { links, getLink } = useLinkStore();
+  const { setModal } = useModalStore();
+
+  const session = useSession();
+  const userId = session.data?.user.id;
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+  const [linkContent, setLinkContent] = useState<LinkContent>();
+  const [imageError, setImageError] = useState<boolean>(false);
+  const [colorPalette, setColorPalette] = useState<RGBColor[]>();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    const fetchLink = async () => {
+      if (router.query.id) {
+        await getLink(Number(router.query.id));
+      }
+    };
+
+    fetchLink();
+  }, []);
+
+  useEffect(() => {
+    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  useEffect(() => {
+    const fetchLinkContent = async () => {
+      if (
+        router.query.id &&
+        link?.readabilityPath &&
+        link?.readabilityPath !== "pending"
+      ) {
+        const response = await fetch(`/api/v1/${link?.readabilityPath}`);
+
+        const data = await response?.json();
+
+        setLinkContent(data);
+      }
+    };
+
+    fetchLinkContent();
+  }, [link]);
+
+  useEffect(() => {
+    let interval: NodeJS.Timer | undefined;
+    if (
+      link?.screenshotPath === "pending" ||
+      link?.pdfPath === "pending" ||
+      link?.readabilityPath === "pending"
+    ) {
+      interval = setInterval(() => getLink(link.id as number), 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
+
+  const colorThief = new ColorThief();
+
+  const rgbToHex = (r: number, g: number, b: number): string =>
+    "#" +
+    [r, g, b]
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+      })
+      .join("");
+
+  useEffect(() => {
+    const banner = document.getElementById("link-banner");
+    const bannerInner = document.getElementById("link-banner-inner");
+
+    if (colorPalette && banner && bannerInner) {
+      if (colorPalette[0] && colorPalette[1]) {
+        banner.style.background = `linear-gradient(to right, ${rgbToHex(
+          colorPalette[0][0],
+          colorPalette[0][1],
+          colorPalette[0][2]
+        )}30, ${rgbToHex(
+          colorPalette[1][0],
+          colorPalette[1][1],
+          colorPalette[1][2]
+        )}30)`;
+      }
+
+      if (colorPalette[2] && colorPalette[3]) {
+        bannerInner.style.background = `linear-gradient(to left, ${rgbToHex(
+          colorPalette[2][0],
+          colorPalette[2][1],
+          colorPalette[2][2]
+        )}30, ${rgbToHex(
+          colorPalette[3][0],
+          colorPalette[3][1],
+          colorPalette[3][2]
+        )})30`;
+      }
+    }
+  }, [colorPalette, theme]);
+
+  return (
+    <LinkLayout>
+      <div
+        className={`flex flex-col max-w-screen-md h-full ${
+          theme === "dark" ? "banner-dark-mode" : "banner-light-mode"
+        }`}
+      >
+        <div
+          id="link-banner"
+          className="link-banner p-3 mb-6 relative bg-opacity-10 border border-solid border-sky-100 dark:border-neutral-700 shadow-md"
+        >
+          <div id="link-banner-inner" className="link-banner-inner"></div>
+
+          <div className={`relative flex flex-col gap-3 items-start`}>
+            <div className="flex gap-3 items-end">
+              {!imageError && link?.url && (
+                <Image
+                  src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+                  width={42}
+                  height={42}
+                  alt=""
+                  id={"favicon-" + link.id}
+                  className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
+                  draggable="false"
+                  onLoad={(e) => {
+                    try {
+                      const color = colorThief.getPalette(
+                        e.target as HTMLImageElement,
+                        4
+                      );
+
+                      setColorPalette(color);
+                    } catch (err) {
+                      console.log(err);
+                    }
+                  }}
+                  onError={(e) => {
+                    setImageError(true);
+                  }}
+                />
+              )}
+
+              <div className="flex gap-2 text-sm text-gray-500 dark:text-gray-300">
+                <p className=" min-w-fit">
+                  {link?.createdAt
+                    ? new Date(link?.createdAt).toLocaleString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : undefined}
+                </p>
+                {link?.url ? (
+                  <>
+                    <p>•</p>
+                    <Link
+                      href={link?.url || ""}
+                      title={link?.url}
+                      target="_blank"
+                      className="hover:opacity-60 duration-100 break-all"
+                    >
+                      {isValidUrl(link?.url || "")
+                        ? new URL(link?.url as string).host
+                        : undefined}
+                    </Link>
+                  </>
+                ) : undefined}
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <p className="capitalize text-2xl sm:text-3xl font-thin">
+                {unescapeString(link?.name || link?.description || "")}
+              </p>
+
+              <div className="flex gap-1 items-center flex-wrap">
+                <Link
+                  href={`/collections/${link?.collection.id}`}
+                  className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
+                >
+                  <FontAwesomeIcon
+                    icon={faFolder}
+                    className="w-5 h-5 drop-shadow"
+                    style={{ color: link?.collection.color }}
+                  />
+                  <p
+                    title={link?.collection.name}
+                    className="text-black dark:text-white text-lg truncate max-w-[12rem]"
+                  >
+                    {link?.collection.name}
+                  </p>
+                </Link>
+                {link?.tags.map((e, i) => (
+                  <Link key={i} href={`/tags/${e.id}`} className="z-10">
+                    <p
+                      title={e.name}
+                      className="px-2 py-1 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                    >
+                      {e.name}
+                    </p>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-5 h-full">
+          {link?.readabilityPath?.startsWith("archives") ? (
+            <div
+              className="line-break px-3 reader-view"
+              dangerouslySetInnerHTML={{
+                __html: DOMPurify.sanitize(linkContent?.content || "") || "",
+              }}
+            ></div>
+          ) : (
+            <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+              {link?.readabilityPath === "pending" ? (
+                <p className="text-center">
+                  Generating readable format, please wait...
+                </p>
+              ) : (
+                <>
+                  <p className="text-center text-2xl text-black dark:text-white">
+                    There is no reader view for this webpage
+                  </p>
+                  <p className="text-center text-sm text-black dark:text-white">
+                    {link?.collection.ownerId === userId
+                      ? "You can update (refetch) the preserved formats by managing them below"
+                      : "The collections owners can refetch the preserved formats"}
+                  </p>
+                  {link?.collection.ownerId === userId ? (
+                    <div
+                      onClick={() =>
+                        link
+                          ? setModal({
+                              modal: "LINK",
+                              state: true,
+                              active: link,
+                              method: "FORMATS",
+                            })
+                          : undefined
+                      }
+                      className="mt-4 flex gap-2 w-fit mx-auto relative items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-md dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100"
+                    >
+                      <FontAwesomeIcon
+                        icon={faBoxesStacked}
+                        className="w-5 h-5 duration-100"
+                      />
+                      <p>Manage preserved formats</p>
+                    </div>
+                  ) : undefined}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </LinkLayout>
+  );
+}
diff --git a/pages/links.tsx b/pages/links/index.tsx
similarity index 98%
rename from pages/links.tsx
rename to pages/links/index.tsx
index b0d5967..3fd46a1 100644
--- a/pages/links.tsx
+++ b/pages/links/index.tsx
@@ -32,7 +32,7 @@ export default function Links() {
               </p>
 
               <p className="capitalize text-black dark:text-white">
-                All Links from every Collections
+                Links from every Collections
               </p>
             </div>
           </div>
diff --git a/pages/register.tsx b/pages/register.tsx
index 62ce26d..f836843 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -96,7 +96,7 @@ export default function Register() {
   return (
     <CenteredForm
       text={
-        process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
+        process.env.NEXT_PUBLIC_STRIPE
           ? `Unlock ${
               process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
             } days of Premium Service at no cost!`
@@ -196,7 +196,7 @@ export default function Register() {
               />
             </div>
 
-            {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
+            {process.env.NEXT_PUBLIC_STRIPE ? (
               <div>
                 <p className="text-xs text-gray-500 dark:text-gray-400">
                   By signing up, you agree to our{" "}
diff --git a/pages/search/index.tsx b/pages/search/index.tsx
index 01ca6ef..35abdc7 100644
--- a/pages/search/index.tsx
+++ b/pages/search/index.tsx
@@ -19,6 +19,7 @@ export default function Search() {
     name: true,
     url: true,
     description: true,
+    textContent: true,
     tags: true,
   });
 
@@ -32,6 +33,7 @@ export default function Search() {
     searchByName: searchFilter.name,
     searchByUrl: searchFilter.url,
     searchByDescription: searchFilter.description,
+    searchByTextContent: searchFilter.textContent,
     searchByTags: searchFilter.tags,
   });
 
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index 20434ea..c9dbe65 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -21,13 +21,8 @@ export default function Account() {
 
   const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
-  const [profileStatus, setProfileStatus] = useState(true);
   const [submitLoader, setSubmitLoader] = useState(false);
 
-  const handleProfileStatus = (e: boolean) => {
-    setProfileStatus(!e);
-  };
-
   const { account, updateAccount } = useAccountStore();
 
   const [user, setUser] = useState<AccountSettings>(
@@ -40,12 +35,11 @@ export default function Account() {
           username: "",
           email: "",
           emailVerified: null,
-          image: null,
+          image: "",
           isPrivate: true,
           // @ts-ignore
           createdAt: null,
           whitelistedUsers: [],
-          profilePic: "",
         } as unknown as AccountSettings)
   );
 
@@ -68,7 +62,7 @@ export default function Account() {
       ) {
         const reader = new FileReader();
         reader.onload = () => {
-          setUser({ ...user, profilePic: reader.result as string });
+          setUser({ ...user, image: reader.result as string });
         };
         reader.readAsDataURL(resizedFile);
       } else {
@@ -92,20 +86,6 @@ export default function Account() {
 
     if (response.ok) {
       toast.success("Settings Applied!");
-
-      if (user.email !== account.email) {
-        update({
-          id: data?.user.id,
-        });
-
-        signOut();
-      } else if (
-        user.username !== account.username ||
-        user.name !== account.name
-      )
-        update({
-          id: data?.user.id,
-        });
     } else toast.error(response.data as string);
     setSubmitLoader(false);
   };
@@ -178,18 +158,14 @@ 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="text-sm text-black dark:text-white mb-2">
-                Display Name
-              </p>
+              <p className="text-black dark:text-white mb-2">Display Name</p>
               <TextInput
                 value={user.name || ""}
                 onChange={(e) => setUser({ ...user, name: e.target.value })}
               />
             </div>
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
-                Username
-              </p>
+              <p className="text-black dark:text-white mb-2">Username</p>
               <TextInput
                 value={user.username || ""}
                 onChange={(e) => setUser({ ...user, username: e.target.value })}
@@ -198,38 +174,37 @@ export default function Account() {
 
             {emailEnabled ? (
               <div>
-                <p className="text-sm text-black dark:text-white mb-2">Email</p>
+                <p className="text-black dark:text-white mb-2">Email</p>
+                {user.email !== account.email &&
+                process.env.NEXT_PUBLIC_STRIPE === "true" ? (
+                  <p className="text-gray-500 dark:text-gray-400 mb-2 text-sm">
+                    Updating this field will change your billing email as well
+                  </p>
+                ) : undefined}
                 <TextInput
                   value={user.email || ""}
                   onChange={(e) => setUser({ ...user, email: e.target.value })}
                 />
               </div>
             ) : undefined}
-
-            {user.email !== account.email ? (
-              <p className="text-gray-500 dark:text-gray-400">
-                You will need to log back in after you apply this Email.
-              </p>
-            ) : undefined}
           </div>
 
           <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
-            <p className="text-sm text-black dark:text-white mb-2 text-center">
+            <p className="text-black dark:text-white mb-2 text-center">
               Profile Photo
             </p>
             <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
               <ProfilePhoto
                 priority={true}
-                src={user.profilePic}
+                src={user.image ? user.image : undefined}
                 className="h-auto border-none w-28"
-                status={handleProfileStatus}
               />
-              {profileStatus && (
+              {user.image && (
                 <div
                   onClick={() =>
                     setUser({
                       ...user,
-                      profilePic: "",
+                      image: "",
                     })
                   }
                   className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 dark:border-neutral-700 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
@@ -265,7 +240,7 @@ export default function Account() {
 
           <div className="flex gap-3 flex-col">
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
+              <p className="text-black dark:text-white mb-2">
                 Import your data from other platforms.
               </p>
               <div
@@ -294,7 +269,7 @@ export default function Account() {
                         title="JSON File"
                         className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
                       >
-                        Linkwarden...
+                        Linkwarden File...
                         <input
                           type="file"
                           name="photo"
@@ -330,7 +305,7 @@ export default function Account() {
             </div>
 
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
+              <p className="text-black dark:text-white mb-2">
                 Download your data instantly.
               </p>
               <Link className="w-fit" href="/api/v1/migration">
@@ -354,7 +329,6 @@ export default function Account() {
           <Checkbox
             label="Make profile private"
             state={user.isPrivate}
-            className="text-sm sm:text-base"
             onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
           />
 
@@ -364,7 +338,7 @@ export default function Account() {
 
           {user.isPrivate && (
             <div>
-              <p className="text-sm text-black dark:text-white mt-2">
+              <p className="text-black dark:text-white mt-2">
                 Whitelisted Users
               </p>
               <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
@@ -400,7 +374,7 @@ export default function Account() {
           <p>
             This will permanently delete ALL the Links, Collections, Tags, and
             archived data you own.{" "}
-            {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
+            {process.env.NEXT_PUBLIC_STRIPE
               ? "It will also cancel your subscription. "
               : undefined}{" "}
             You will be prompted to enter your password before the deletion
diff --git a/pages/settings/appearance.tsx b/pages/settings/appearance.tsx
index 4f333bc..2ddde66 100644
--- a/pages/settings/appearance.tsx
+++ b/pages/settings/appearance.tsx
@@ -8,7 +8,7 @@ export default function Appearance() {
 
   return (
     <SettingsLayout>
-      <p className="mb-3 text-sm">Select Theme</p>
+      <p className="mb-3">Select Theme</p>
       <div className="flex gap-3 w-full">
         <div
           className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
diff --git a/pages/settings/billing.tsx b/pages/settings/billing.tsx
index 185f2a7..953d1ee 100644
--- a/pages/settings/billing.tsx
+++ b/pages/settings/billing.tsx
@@ -6,8 +6,7 @@ export default function Billing() {
   const router = useRouter();
 
   useEffect(() => {
-    if (!process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE)
-      router.push("/settings/profile");
+    if (!process.env.NEXT_PUBLIC_STRIPE) router.push("/settings/profile");
   }, []);
 
   return (
diff --git a/pages/settings/delete.tsx b/pages/settings/delete.tsx
index e072ab1..bd0c632 100644
--- a/pages/settings/delete.tsx
+++ b/pages/settings/delete.tsx
@@ -72,14 +72,14 @@ export default function Password() {
         <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_IS_ACTIVE
+          {process.env.NEXT_PUBLIC_STRIPE
             ? " and cancel your subscription"
             : undefined}
           . This action is irreversible!
         </p>
 
         <div>
-          <p className="text-sm mb-2 text-black dark:text-white">
+          <p className="mb-2 text-black dark:text-white">
             Confirm Your Password
           </p>
 
@@ -91,7 +91,7 @@ export default function Password() {
           />
         </div>
 
-        {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
+        {process.env.NEXT_PUBLIC_STRIPE ? (
           <fieldset className="border rounded-md p-2 border-sky-500">
             <legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-sky-500">
               <b>Optional</b>{" "}
@@ -119,7 +119,8 @@ export default function Password() {
             </label>
             <div>
               <p className="text-sm mb-2 text-black dark:text-white">
-                More information (the more details, the more helpful it'd be)
+                More information (the more details, the more helpful it&apos;d
+                be)
               </p>
 
               <textarea
diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx
index d54a9b0..fe3aa35 100644
--- a/pages/settings/password.tsx
+++ b/pages/settings/password.tsx
@@ -1,7 +1,6 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useState } from "react";
 import useAccountStore from "@/store/account";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
@@ -51,7 +50,7 @@ export default function Password() {
         should be at least 8 characters.
       </p>
       <div className="w-full flex flex-col gap-2 justify-between">
-        <p className="text-sm text-black dark:text-white">New Password</p>
+        <p className="text-black dark:text-white">New Password</p>
 
         <TextInput
           value={newPassword}
@@ -60,9 +59,7 @@ export default function Password() {
           type="password"
         />
 
-        <p className="text-sm text-black dark:text-white">
-          Confirm New Password
-        </p>
+        <p className="text-black dark:text-white">Confirm New Password</p>
 
         <TextInput
           value={newPassword2}
diff --git a/pages/subscribe.tsx b/pages/subscribe.tsx
index 7d44614..2edd4ba 100644
--- a/pages/subscribe.tsx
+++ b/pages/subscribe.tsx
@@ -1,18 +1,16 @@
-import SubmitButton from "@/components/SubmitButton";
-import { signOut } from "next-auth/react";
+import { signOut, useSession } from "next-auth/react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import { Plan } from "@/types/global";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
+  const session = useSession();
 
   const [plan, setPlan] = useState<Plan>(1);
 
-  const { data, status } = useSession();
   const router = useRouter();
 
   async function submit() {
@@ -86,7 +84,7 @@ export default function Subscribe() {
           <p className="font-semibold">
             Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
           </p>
-          <fieldset className="w-full px-4 pb-4 pt-1 rounded-md border border-sky-100 dark:border-neutral-700">
+          <fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-sky-100 dark:border-neutral-700">
             <legend className="w-fit font-extralight px-2 border border-sky-100 dark:border-neutral-700 rounded-md text-xl">
               Total
             </legend>
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index b8435f5..466c3bb 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -23,7 +23,7 @@ export default function Index() {
   const router = useRouter();
 
   const { links } = useLinkStore();
-  const { tags, updateTag } = useTagStore();
+  const { tags, updateTag, removeTag } = useTagStore();
 
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -81,6 +81,25 @@ export default function Index() {
     setRenameTag(false);
   };
 
+  const remove = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    let response;
+
+    if (activeTag?.id) response = await removeTag(activeTag?.id);
+
+    toast.dismiss(load);
+
+    if (response?.ok) {
+      toast.success("Tag Removed.");
+      router.push("/links");
+    } else toast.error(response?.data as string);
+    setSubmitLoader(false);
+    setRenameTag(false);
+  };
+
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
@@ -153,6 +172,13 @@ export default function Index() {
                               setExpandDropdown(false);
                             },
                           },
+                          {
+                            name: "Remove Tag",
+                            onClick: () => {
+                              remove();
+                              setExpandDropdown(false);
+                            },
+                          },
                         ]}
                         onClickOutside={(e: Event) => {
                           const target = e.target as HTMLInputElement;
@@ -191,9 +217,11 @@ export default function Index() {
           </div>
         </div>
         <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-          {links.map((e, i) => {
-            return <LinkCard key={i} link={e} count={i} />;
-          })}
+          {links
+            .filter((e) => e.tags.some((e) => e.id === Number(router.query.id)))
+            .map((e, i) => {
+              return <LinkCard key={i} link={e} count={i} />;
+            })}
         </div>
       </div>
     </MainLayout>
diff --git a/prisma/migrations/20231025123038_added_pathname_to_files/migration.sql b/prisma/migrations/20231025123038_added_pathname_to_files/migration.sql
new file mode 100644
index 0000000..65fa41a
--- /dev/null
+++ b/prisma/migrations/20231025123038_added_pathname_to_files/migration.sql
@@ -0,0 +1,13 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `image` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "pdfPath" TEXT,
+ADD COLUMN     "screenshotPath" TEXT;
+
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "image",
+ADD COLUMN     "imagePath" TEXT;
diff --git a/prisma/migrations/20231027194841_add_updated_at_fields_to_tables/migration.sql b/prisma/migrations/20231027194841_add_updated_at_fields_to_tables/migration.sql
new file mode 100644
index 0000000..80cc4b5
--- /dev/null
+++ b/prisma/migrations/20231027194841_add_updated_at_fields_to_tables/migration.sql
@@ -0,0 +1,24 @@
+-- AlterTable
+ALTER TABLE "Collection" ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "Tag" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "UsersAndCollections" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "VerificationToken" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "WhitelistedUser" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
diff --git a/prisma/migrations/20231027195438_remove_unnecessary_tables/migration.sql b/prisma/migrations/20231027195438_remove_unnecessary_tables/migration.sql
new file mode 100644
index 0000000..e4c46ac
--- /dev/null
+++ b/prisma/migrations/20231027195438_remove_unnecessary_tables/migration.sql
@@ -0,0 +1,18 @@
+/*
+  Warnings:
+
+  - You are about to drop the `Account` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `Session` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Account" DROP CONSTRAINT "Account_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Session" DROP CONSTRAINT "Session_userId_fkey";
+
+-- DropTable
+DROP TABLE "Account";
+
+-- DropTable
+DROP TABLE "Session";
diff --git a/prisma/migrations/20231028041930_rename_image_path_to_image/migration.sql b/prisma/migrations/20231028041930_rename_image_path_to_image/migration.sql
new file mode 100644
index 0000000..6833e7b
--- /dev/null
+++ b/prisma/migrations/20231028041930_rename_image_path_to_image/migration.sql
@@ -0,0 +1 @@
+ALTER TABLE "User" RENAME COLUMN "imagePath" TO "image";
\ No newline at end of file
diff --git a/prisma/migrations/20231029183108_added_readability_path_field_to_the_link_table/migration.sql b/prisma/migrations/20231029183108_added_readability_path_field_to_the_link_table/migration.sql
new file mode 100644
index 0000000..bbf2423
--- /dev/null
+++ b/prisma/migrations/20231029183108_added_readability_path_field_to_the_link_table/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "readabilityPath" TEXT;
diff --git a/prisma/migrations/20231031100017_add_last_preserved_field/migration.sql b/prisma/migrations/20231031100017_add_last_preserved_field/migration.sql
new file mode 100644
index 0000000..912cad0
--- /dev/null
+++ b/prisma/migrations/20231031100017_add_last_preserved_field/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "lastPreserved" TIMESTAMP(3);
diff --git a/prisma/migrations/20231101085207_add_text_content_field/migration.sql b/prisma/migrations/20231101085207_add_text_content_field/migration.sql
new file mode 100644
index 0000000..3d03e3c
--- /dev/null
+++ b/prisma/migrations/20231101085207_add_text_content_field/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "textContent" TEXT;
diff --git a/prisma/migrations/20231103051515_add_subscription_table/migration.sql b/prisma/migrations/20231103051515_add_subscription_table/migration.sql
new file mode 100644
index 0000000..07f28f2
--- /dev/null
+++ b/prisma/migrations/20231103051515_add_subscription_table/migration.sql
@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "Subscription" (
+    "id" SERIAL NOT NULL,
+    "active" BOOLEAN NOT NULL,
+    "stripeSubscriptionId" TEXT NOT NULL,
+    "currentPeriodStart" TIMESTAMP(3) NOT NULL,
+    "currentPeriodEnd" TIMESTAMP(3) NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Subscription_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_stripeSubscriptionId_key" ON "Subscription"("stripeSubscriptionId");
+
+-- AddForeignKey
+ALTER TABLE "Subscription" ADD CONSTRAINT "Subscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/prisma/migrations/20231104052926_changed_subscription_relation/migration.sql b/prisma/migrations/20231104052926_changed_subscription_relation/migration.sql
new file mode 100644
index 0000000..0dad558
--- /dev/null
+++ b/prisma/migrations/20231104052926_changed_subscription_relation/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[userId]` on the table `Subscription` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_userId_key" ON "Subscription"("userId");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index ab67eb6..13b755f 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -7,75 +7,54 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-model Account {
-  id                String  @id @default(cuid())
-  userId            Int
-  type              String
-  provider          String
-  providerAccountId String
-  refresh_token     String?
-  access_token      String?
-  expires_at        Int?
-  token_type        String?
-  scope             String?
-  id_token          String?
-  session_state     String?
-
-  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
-
-  @@unique([provider, providerAccountId])
-}
-
-model Session {
-  id           String   @id @default(cuid())
-  sessionToken String   @unique
-  userId       Int
-  expires      DateTime
-  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
-}
-
 model User {
-  id   Int    @id @default(autoincrement())
-  name String
+  id                      Int             @id @default(autoincrement())
+  name                    String
 
-  username String? @unique
+  username                String?         @unique
 
-  email         String?   @unique
-  emailVerified DateTime?
-  image         String?
+  email                   String?         @unique
+  emailVerified           DateTime?
+  image                   String?
 
-  accounts Account[]
-  sessions Session[]
+  password                String
 
-  password    String
-  collections Collection[]
+  collections             Collection[]
+  tags                    Tag[]
+  pinnedLinks             Link[]
+  collectionsJoined       UsersAndCollections[]
+  whitelistedUsers        WhitelistedUser[]
 
-  tags Tag[]
-
-  pinnedLinks Link[]
+  subscriptions           Subscription?
 
   archiveAsScreenshot     Boolean         @default(true)
   archiveAsPDF            Boolean         @default(true)
   archiveAsWaybackMachine Boolean         @default(false)
 
-  collectionsJoined UsersAndCollections[]
-  isPrivate         Boolean               @default(false)
-  whitelistedUsers  WhitelistedUser[]
-  createdAt         DateTime              @default(now())
+  isPrivate               Boolean         @default(false)
+
+  createdAt               DateTime        @default(now())
+  updatedAt               DateTime        @updatedAt @default(now())
 }
 
 model WhitelistedUser {
-  id Int @id @default(autoincrement())
+  id             Int        @id @default(autoincrement())
 
-  username String @default("")
-  User     User?  @relation(fields: [userId], references: [id])
-  userId   Int?
+  username       String     @default("")
+  User           User?      @relation(fields: [userId], references: [id])
+  userId         Int?
+
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
 }
 
 model VerificationToken {
-  identifier String
-  token      String   @unique
-  expires    DateTime
+  identifier     String
+  token          String     @unique
+  expires        DateTime
+
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
 
   @@unique([identifier, token])
 }
@@ -91,7 +70,8 @@ model Collection {
   ownerId   Int
   members   UsersAndCollections[]
   links     Link[]
-  createdAt DateTime              @default(now())
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
 
   @@unique([name, ownerId])
 }
@@ -107,22 +87,34 @@ model UsersAndCollections {
   canUpdate    Boolean
   canDelete    Boolean
 
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
+
   @@id([userId, collectionId])
 }
 
 model Link {
-  id             Int        @id @default(autoincrement())
-  name           String
-  url            String
-  description    String     @default("")
+  id                Int        @id @default(autoincrement())
+  name              String
+  url               String
+  description       String     @default("")
+    
+  pinnedBy          User[]
+    
+  collection        Collection @relation(fields: [collectionId], references: [id])
+  collectionId      Int
+  tags              Tag[]
+    
+  textContent       String?
 
-  pinnedBy       User[]
+  screenshotPath    String?
+  pdfPath           String?
+  readabilityPath   String?
 
-  collection     Collection @relation(fields: [collectionId], references: [id])
-  collectionId   Int
-  tags           Tag[]
-
-  createdAt      DateTime   @default(now())
+  lastPreserved     DateTime?
+    
+  createdAt         DateTime   @default(now())
+  updatedAt         DateTime   @updatedAt @default(now())
 }
 
 model Tag {
@@ -132,5 +124,22 @@ model Tag {
   owner   User   @relation(fields: [ownerId], references: [id])
   ownerId Int
 
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
+
   @@unique([name, ownerId])
 }
+
+model Subscription {
+  id                   Int        @id @default(autoincrement())
+  active               Boolean    
+  stripeSubscriptionId String     @unique
+  currentPeriodStart   DateTime
+  currentPeriodEnd     DateTime
+
+  user                 User       @relation(fields: [userId], references: [id])
+  userId               Int        @unique
+
+  createdAt            DateTime   @default(now())
+  updatedAt            DateTime   @updatedAt @default(now())
+}
diff --git a/store/account.ts b/store/account.ts
index c57d71e..c1da399 100644
--- a/store/account.ts
+++ b/store/account.ts
@@ -19,9 +19,7 @@ const useAccountStore = create<AccountStore>()((set) => ({
 
     const data = await response.json();
 
-    const profilePic = `/api/v1/avatar/${data.response.id}?${Date.now()}`;
-
-    if (response.ok) set({ account: { ...data.response, profilePic } });
+    if (response.ok) set({ account: { ...data.response } });
   },
   updateAccount: async (user) => {
     const response = await fetch(`/api/v1/users/${user.id}`, {
diff --git a/store/links.ts b/store/links.ts
index b106530..9362742 100644
--- a/store/links.ts
+++ b/store/links.ts
@@ -17,6 +17,7 @@ type LinkStore = {
   addLink: (
     body: LinkIncludingShortenedCollectionAndTags
   ) => Promise<ResponseObject>;
+  getLink: (linkId: number) => Promise<ResponseObject>;
   updateLink: (
     link: LinkIncludingShortenedCollectionAndTags
   ) => Promise<ResponseObject>;
@@ -65,6 +66,33 @@ const useLinkStore = create<LinkStore>()((set) => ({
 
     return { ok: response.ok, data: data.response };
   },
+  getLink: async (linkId) => {
+    const response = await fetch(`/api/v1/links/${linkId}`);
+
+    const data = await response.json();
+
+    if (response.ok) {
+      set((state) => {
+        const linkExists = state.links.some(
+          (link) => link.id === data.response.id
+        );
+
+        if (linkExists) {
+          return {
+            links: state.links.map((e) =>
+              e.id === data.response.id ? data.response : e
+            ),
+          };
+        } else {
+          return {
+            links: [...state.links, data.response],
+          };
+        }
+      });
+    }
+
+    return { ok: response.ok, data: data.response };
+  },
   updateLink: async (link) => {
     const response = await fetch(`/api/v1/links/${link.id}`, {
       body: JSON.stringify(link),
diff --git a/store/modals.ts b/store/modals.ts
index 71c336f..71ecef0 100644
--- a/store/modals.ts
+++ b/store/modals.ts
@@ -9,17 +9,19 @@ type Modal =
       modal: "LINK";
       state: boolean;
       method: "CREATE";
-      isOwnerOrMod?: boolean;
       active?: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
     }
   | {
       modal: "LINK";
       state: boolean;
       method: "UPDATE";
-      isOwnerOrMod: boolean;
       active: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
+    }
+  | {
+      modal: "LINK";
+      state: boolean;
+      method: "FORMATS";
+      active: LinkIncludingShortenedCollectionAndTags;
     }
   | {
       modal: "COLLECTION";
diff --git a/store/tags.ts b/store/tags.ts
index 26552bf..a27b859 100644
--- a/store/tags.ts
+++ b/store/tags.ts
@@ -10,6 +10,7 @@ type TagStore = {
   tags: Tag[];
   setTags: () => void;
   updateTag: (tag: Tag) => Promise<ResponseObject>;
+  removeTag: (tagId: number) => Promise<ResponseObject>;
 };
 
 const useTagStore = create<TagStore>()((set) => ({
@@ -42,6 +43,20 @@ const useTagStore = create<TagStore>()((set) => ({
 
     return { ok: response.ok, data: data.response };
   },
+  removeTag: async (tagId) => {
+    const response = await fetch(`/api/v1/tags/${tagId}`, {
+      method: "DELETE",
+    });
+
+    if (response.ok) {
+      set((state) => ({
+        tags: state.tags.filter((e) => e.id !== tagId),
+      }));
+    }
+
+    const data = await response.json();
+    return { ok: response.ok, data: data.response };
+  },
 }));
 
 export default useTagStore;
diff --git a/styles/globals.css b/styles/globals.css
index bf7e9a9..82b1178 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body {
+  scroll-behavior: smooth;
+}
+
 /* Hide scrollbar */
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
@@ -129,72 +134,9 @@
 
 /* For the Link banner */
 .link-banner {
-  /* box-shadow: inset 0px 10px 20px 20px #ffffff; */
-  opacity: 25%;
   z-index: 0;
-}
-.link-banner .link-banner-inner {
-  /* box-shadow: inset 0px 10px 20px 20px #ffffff; */
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-mask: linear-gradient(#fff, transparent);
-  mask: linear-gradient(#fff, transparent);
-}
-.link-banner::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  width: 100%;
-  height: 4rem;
-}
-.link-banner::before {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  width: 100%;
-  height: 4rem;
-}
-
-/* For light mode */
-.banner-light-mode .link-banner::after {
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 1) 90%
-  );
-}
-.banner-light-mode .link-banner::before {
-  background-image: linear-gradient(
-    to top,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 1) 90%
-  );
-}
-
-/* For dark mode */
-.banner-dark-mode .link-banner::after {
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0),
-    #171717 90%
-  );
-}
-.banner-dark-mode .link-banner::before {
-  background-image: linear-gradient(
-    to top,
-    rgba(255, 255, 255, 0),
-    #171717 90%
-  );
+  border-radius: 1rem;
+  height: fit-content;
 }
 
 /* Theme */
@@ -227,6 +169,12 @@
     @apply dark:text-white;
   }
 }
+.react-select__clear-indicator * {
+  display: none;
+  width: 0;
+  margin: 0;
+  padding: 0;
+}
 
 .sky-shadow {
   box-shadow: 0px 0px 3px #0ea5e9;
@@ -239,3 +187,95 @@
 .primary-btn-gradient:hover {
   box-shadow: inset 0px -15px 10px #059bf8;
 }
+
+.line-break * {
+  overflow-y: hidden;
+}
+
+/* Reader view custom stylings */
+.reader-view {
+  line-height: 3rem;
+}
+.reader-view h1 {
+  font-size: 2.2rem;
+}
+.reader-view h2 {
+  line-height: 4rem;
+  font-size: 1.9rem;
+}
+.reader-view h3 {
+  line-height: 3.5rem;
+  font-size: 1.6rem;
+}
+.reader-view h4 {
+  font-size: 1.3rem;
+}
+.reader-view h5 {
+  font-size: 1.1rem;
+}
+.reader-view li {
+  list-style: inside;
+  margin-left: 2rem;
+}
+.reader-view a {
+  text-decoration: underline;
+}
+.reader-view b {
+  font-weight: bolder;
+}
+.reader-view pre,
+.reader-view code {
+  font-family: "Courier New", Courier, monospace;
+}
+.reader-view blockquote {
+  opacity: 50%;
+  padding-left: 1.5rem;
+  border-left: solid 3px;
+}
+.reader-view img {
+  margin: auto;
+  border-radius: 10px;
+}
+.reader-view pre {
+  padding: 1rem;
+  line-height: normal;
+}
+.reader-view code {
+  padding: 0.15rem 0.4rem 0.15rem 0.4rem;
+}
+[class="dark"] .reader-view code,
+[class="dark"] .reader-view pre {
+  background-color: rgb(49, 49, 49);
+  border-radius: 8px;
+}
+[class="light"] .reader-view code,
+[class="light"] .reader-view pre {
+  background-color: rgb(230, 230, 230);
+  border-radius: 8px;
+}
+
+.rainbow {
+  background: linear-gradient(
+    45deg,
+    #ff00004b,
+    #ff99004b,
+    #33cc334b,
+    #0099cc4b,
+    #9900cc4b,
+    #ff33cc4b
+  );
+  background-size: 400% 400%;
+  animation: rainbow 30s linear infinite;
+}
+
+@keyframes rainbow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
diff --git a/types/enviornment.d.ts b/types/enviornment.d.ts
index 985958f..b8da6f2 100644
--- a/types/enviornment.d.ts
+++ b/types/enviornment.d.ts
@@ -9,6 +9,7 @@ declare global {
       STORAGE_FOLDER?: string;
       AUTOSCROLL_TIMEOUT?: string;
       IMPORT_SIZE_LIMIT?: string;
+      RE_ARCHIVE_LIMIT?: string;
 
       SPACES_KEY?: string;
       SPACES_SECRET?: string;
@@ -16,11 +17,11 @@ declare global {
       BUCKET_NAME?: string;
       SPACES_REGION?: string;
 
-      NEXT_PUBLIC_EMAIL_PROVIDER?: true;
+      NEXT_PUBLIC_EMAIL_PROVIDER?: string;
       EMAIL_FROM?: string;
       EMAIL_SERVER?: string;
 
-      NEXT_PUBLIC_STRIPE_IS_ACTIVE?: string;
+      NEXT_PUBLIC_STRIPE?: string;
       STRIPE_SECRET_KEY?: string;
       MONTHLY_PRICE_ID?: string;
       YEARLY_PRICE_ID?: string;
diff --git a/types/global.ts b/types/global.ts
index 09959c5..26058cf 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -5,7 +5,10 @@ type OptionalExcluding<T, TRequired extends keyof T> = Partial<T> &
   Pick<T, TRequired>;
 
 export interface LinkIncludingShortenedCollectionAndTags
-  extends Omit<Link, "id" | "createdAt" | "collectionId"> {
+  extends Omit<
+    Link,
+    "id" | "createdAt" | "collectionId" | "updatedAt" | "lastPreserved"
+  > {
   id?: number;
   createdAt?: string;
   collectionId?: number;
@@ -18,15 +21,15 @@ export interface LinkIncludingShortenedCollectionAndTags
 
 export interface Member {
   collectionId?: number;
-  userId?: number;
+  userId: number;
   canCreate: boolean;
   canUpdate: boolean;
   canDelete: boolean;
-  user: OptionalExcluding<User, "username" | "name">;
+  user: OptionalExcluding<User, "username" | "name" | "id">;
 }
 
 export interface CollectionIncludingMembersAndLinkCount
-  extends Omit<Collection, "id" | "createdAt" | "ownerId"> {
+  extends Omit<Collection, "id" | "createdAt" | "ownerId" | "updatedAt"> {
   id?: number;
   ownerId?: number;
   createdAt?: string;
@@ -35,9 +38,11 @@ export interface CollectionIncludingMembersAndLinkCount
 }
 
 export interface AccountSettings extends User {
-  profilePic: string;
   newPassword?: string;
   whitelistedUsers: string[];
+  subscription?: {
+    active?: boolean;
+  };
 }
 
 interface LinksIncludingTags extends Link {
@@ -67,6 +72,7 @@ export type LinkRequestQuery = {
   searchByName?: boolean;
   searchByUrl?: boolean;
   searchByDescription?: boolean;
+  searchByTextContent?: boolean;
   searchByTags?: boolean;
 };
 
@@ -79,7 +85,7 @@ interface CollectionIncludingLinks extends Collection {
   links: LinksIncludingTags[];
 }
 
-export interface Backup extends Omit<User, "password" | "id" | "image"> {
+export interface Backup extends Omit<User, "password" | "id"> {
   collections: CollectionIncludingLinks[];
 }
 
diff --git a/types/next-auth.d.ts b/types/next-auth.d.ts
index 6df7f6c..e129025 100644
--- a/types/next-auth.d.ts
+++ b/types/next-auth.d.ts
@@ -1,12 +1,24 @@
 import NextAuth from "next-auth";
+import { JWT } from "next-auth/jwt";
 
 declare module "next-auth" {
   interface Session {
     user: {
       id: number;
-      username: string;
-      email: string;
-      isSubscriber: boolean;
     };
   }
+
+  interface User {
+    id: number;
+  }
+}
+
+declare module "next-auth/jwt" {
+  interface JWT {
+    sub?: number;
+    id: number;
+    iat: number;
+    exp: number;
+    jti: string;
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index bb2f10a..024191a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -902,6 +902,11 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
+"@mozilla/readability@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@mozilla/readability/-/readability-0.4.4.tgz#5d258b3436eba1d5fe31c4386e50a848d5cb5811"
+  integrity sha512-MCgZyANpJ6msfvVMi6+A0UAsvZj//4OHREYUB9f2087uXHVoU+H+SWhuihvb1beKpM323bReQPRio0WNk2+V6g==
+
 "@next/env@13.4.12":
   version "13.4.12"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.12.tgz#0b88115ab817f178bf9dc0c5e7b367277595b58d"
@@ -1490,6 +1495,13 @@
   resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.1.1.tgz#602859584cecc91894eb23a4892f38cfa927890d"
   integrity sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==
 
+"@types/dompurify@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.0.4.tgz#8a6369dec2dd0c397d01751adf3364be035b40d8"
+  integrity sha512-1Jk8S/IRzNSbwQRbuGuLFHviwxQ8pX81ZEW3INY9432Cwb4VedkBYan8gSIXVLOLHBtimOmUTEYphjRVmo+30g==
+  dependencies:
+    "@types/trusted-types" "*"
+
 "@types/jsdom@^21.1.3":
   version "21.1.3"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-21.1.3.tgz#a88c5dc65703e1b10b2a7839c12db49662b43ff0"
@@ -1559,6 +1571,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90"
   integrity sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==
 
+"@types/trusted-types@*":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.5.tgz#5cac7e7df3275bb95f79594f192d97da3b4fd5fe"
+  integrity sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA==
+
 "@typescript-eslint/parser@^5.42.0":
   version "5.49.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.49.0.tgz#d699734b2f20e16351e117417d34a2bc9d7c4b90"
@@ -1685,6 +1702,11 @@ are-we-there-yet@^2.0.0:
     delegates "^1.0.0"
     readable-stream "^3.6.0"
 
+arg@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.0.tgz#583c518199419e0037abb74062c37f8519e575f0"
+  integrity sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==
+
 arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@@ -1912,6 +1934,11 @@ busboy@1.6.0:
   dependencies:
     streamsearch "^1.1.0"
 
+bytes@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -2062,6 +2089,11 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
   integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
 
+content-type@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
 convert-source-map@^1.5.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
@@ -2097,10 +2129,10 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-crypto-js@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
-  integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
+crypto-js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
+  integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
 
 cssesc@^3.0.0:
   version "3.0.0"
@@ -2239,6 +2271,11 @@ delegates@^1.0.0:
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
   integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
 
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
+
 detect-libc@^2.0.0, detect-libc@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd"
@@ -2290,6 +2327,11 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+dompurify@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.6.tgz#925ebd576d54a9531b5d76f0a5bef32548351dae"
+  integrity sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -3100,6 +3142,17 @@ html-encoding-sniffer@^3.0.0:
   dependencies:
     whatwg-encoding "^2.0.0"
 
+http-errors@1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
 http-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
@@ -3126,6 +3179,13 @@ https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
+iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
@@ -3164,7 +3224,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.3, inherits@^2.0.4:
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3591,6 +3651,15 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+micro@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/micro/-/micro-10.0.1.tgz#2601e02b0dacd2eaee77e9de18f12b2e595c5951"
+  integrity sha512-9uwZSsUrqf6+4FLLpiPj5TRWQv5w5uJrJwsx1LR/TjqvQmKC1XnGQ9OHrFwR3cbZ46YqPqxO/XJCOpWnqMPw2Q==
+  dependencies:
+    arg "4.1.0"
+    content-type "1.0.4"
+    raw-body "2.4.1"
+
 micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
@@ -4251,6 +4320,16 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+raw-body@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.1.tgz#30ac82f98bb5ae8c152e67149dac8d55153b168c"
+  integrity sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.3"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
 rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -4461,7 +4540,7 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
-"safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -4497,6 +4576,11 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+
 sharp@^0.32.1:
   version "0.32.1"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.1.tgz#41aa0d0b2048b2e0ee453d9fcb14ec1f408390fe"
@@ -4593,6 +4677,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+"statuses@>= 1.5.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
+
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
@@ -4855,6 +4944,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+
 tough-cookie@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
@@ -4975,6 +5069,11 @@ universalify@^0.2.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
   integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
 
+unpipe@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
 update-browserslist-db@^1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"