diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 62a6cfb..fc23253 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -26,7 +26,6 @@ import unescapeString from "@/lib/client/unescapeString";
 import { useRouter } from "next/router";
 import EditLinkModal from "./ModalContent/EditLinkModal";
 import DeleteLinkModal from "./ModalContent/DeleteLinkModal";
-import ExpandedLink from "./ModalContent/ExpandedLink";
 import PreservedFormatsModal from "./ModalContent/PreservedFormatsModal";
 
 type Props = {
@@ -112,11 +111,10 @@ export default function LinkCard({ link, count, className }: Props) {
   const [editLinkModal, setEditLinkModal] = useState(false);
   const [deleteLinkModal, setDeleteLinkModal] = useState(false);
   const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
-  const [expandedLink, setExpandedLink] = useState(false);
 
   return (
     <div
-      className={`h-fit border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative ${
+      className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${
         className || ""
       }`}
     >
@@ -200,12 +198,8 @@ export default function LinkCard({ link, count, className }: Props) {
         </div>
       ) : undefined}
 
-      <Link
-        href={"/links/" + link.id}
-        // onClick={
-        //   () => router.push("/links/" + link.id)
-        //   // setExpandedLink(true)
-        // }
+      <div
+        onClick={() => link.url && window.open(link.url || "", "_blank")}
         className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
       >
         {link.url && url ? (
@@ -241,13 +235,7 @@ export default function LinkCard({ link, count, className }: Props) {
         </div>
 
         {link.url ? (
-          <div
-            onClick={(e) => {
-              e.preventDefault();
-              window.open(link.url || "", "_blank");
-            }}
-            className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-60 duration-100"
-          >
+          <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
             <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
             <p className="truncate w-full">{shortendURL}</p>
           </div>
@@ -257,7 +245,7 @@ export default function LinkCard({ link, count, className }: Props) {
 
         <div
           onClick={(e) => {
-            e.preventDefault();
+            e.stopPropagation();
             router.push(`/collections/${link.collection.id}`);
           }}
           className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
@@ -295,7 +283,7 @@ export default function LinkCard({ link, count, className }: Props) {
             ) : (
               <p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
             )} */}
-      </Link>
+      </div>
       {editLinkModal ? (
         <EditLinkModal
           onClose={() => setEditLinkModal(false)}
@@ -314,9 +302,6 @@ export default function LinkCard({ link, count, className }: Props) {
           activeLink={link}
         />
       ) : undefined}
-      {/* {expandedLink ? (
-        <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
-      ) : undefined} */}
     </div>
   );
 }
diff --git a/components/Modal.tsx b/components/Modal.tsx
index c7f4da5..2ddf656 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -21,7 +21,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
         <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost"
+            className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
           >
             <FontAwesomeIcon icon={faClose} className="w-4 h-4 text-neutral" />
           </div>
diff --git a/components/ModalContent/ExpandedLink.tsx b/components/ModalContent/ExpandedLink.tsx
deleted file mode 100644
index 464d568..0000000
--- a/components/ModalContent/ExpandedLink.tsx
+++ /dev/null
@@ -1,254 +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,
-} 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/shared/isValidUrl";
-import unescapeString from "@/lib/client/unescapeString";
-import useLocalSettingsStore from "@/store/localSettings";
-import Modal from "../Modal";
-
-type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
-  onClose: Function;
-};
-
-export default function LinkDetails({ link, onClose }: Props) {
-  const {
-    settings: { theme },
-  } = useLocalSettingsStore();
-
-  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 = link.url && isValidUrl(link.url) ? new URL(link.url) : undefined;
-
-  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 (
-    <Modal toggleModal={onClose}>
-      <div className={`relative flex gap-5 items-start mr-10`}>
-        {!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 capitalize break-words hyphens-auto">
-            {unescapeString(link.name)}
-          </p>
-          <Link
-            href={link.url || ""}
-            target="_blank"
-            rel="noreferrer"
-            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-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 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="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 p-2 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-md">
-              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
-            </div>
-
-            <p>Screenshot</p>
-          </div>
-
-          <div className="flex gap-1">
-            <Link
-              href={`/api/v1/archives/${link.collectionId}/${link.id}.png`}
-              target="_blank"
-              rel="noreferrer"
-              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
-              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>
-          </div>
-        </div>
-
-        <div className="flex justify-between items-center p-2 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-md">
-              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
-            </div>
-
-            <p>PDF</p>
-          </div>
-
-          <div className="flex gap-1">
-            <Link
-              href={`/api/v1/archives/${link.collectionId}/${link.id}.pdf`}
-              target="_blank"
-              rel="noreferrer"
-              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
-              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>
-          </div>
-        </div>
-      </div>
-    </Modal>
-  );
-}
diff --git a/components/ModalContent/PreservedFormatsModal.tsx b/components/ModalContent/PreservedFormatsModal.tsx
index ff0556b..964dab5 100644
--- a/components/ModalContent/PreservedFormatsModal.tsx
+++ b/components/ModalContent/PreservedFormatsModal.tsx
@@ -15,11 +15,16 @@ import {
   faUpRightFromSquare,
 } from "@fortawesome/free-solid-svg-icons";
 import Modal from "../Modal";
-import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
+import {
+  faFileImage,
+  faFileLines,
+  faFilePdf,
+} from "@fortawesome/free-regular-svg-icons";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import {
   pdfAvailable,
+  readabilityAvailable,
   screenshotAvailable,
 } from "@/lib/shared/getArchiveValidity";
 
@@ -30,7 +35,7 @@ type Props = {
 
 export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
   const session = useSession();
-  const { links, getLink } = useLinkStore();
+  const { getLink } = useLinkStore();
 
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
@@ -110,9 +115,54 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Preserved Formats</p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <div className="divider mb-2 mt-1"></div>
+
+      {screenshotAvailable(link) ||
+      pdfAvailable(link) ||
+      readabilityAvailable(link) ? (
+        <p className="mb-3">
+          The following formats are available for this link:
+        </p>
+      ) : (
+        <p className="mb-3">No preserved formats available.</p>
+      )}
 
       <div className={`flex flex-col gap-3`}>
+        {readabilityAvailable(link) ? (
+          <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+            <div className="flex gap-2 items-center">
+              <div className="bg-primary text-primary-content p-2 rounded-l-md">
+                <FontAwesomeIcon icon={faFileLines} className="w-6 h-6" />
+              </div>
+
+              <p>Readable</p>
+            </div>
+
+            <div className="flex gap-1">
+              {/* <div
+                onClick={() => handleDownload(ArchivedFormat.pdf)}
+                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+              >
+                <FontAwesomeIcon
+                  icon={faCloudArrowDown}
+                  className="w-5 h-5 cursor-pointer text-neutral"
+                />
+              </div> */}
+
+              <Link
+                href={`/preserved/${link?.id}?format=${ArchivedFormat.readability}`}
+                target="_blank"
+                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+              >
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="w-5 h-5 text-neutral"
+                />
+              </Link>
+            </div>
+          </div>
+        ) : undefined}
+
         {screenshotAvailable(link) ? (
           <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
             <div className="flex gap-2 items-center">
@@ -152,7 +202,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
           </div>
         ) : undefined}
 
-        {link?.pdfPath && link.pdfPath !== "pending" ? (
+        {pdfAvailable(link) ? (
           <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
             <div className="flex gap-2 items-center">
               <div className="bg-primary text-primary-content p-2 rounded-l-md">
@@ -191,7 +241,11 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
           {link?.collection.ownerId === session.data?.user.id ? (
             <div
               className={`btn btn-accent w-1/2 dark:border-violet-400 text-white ${
-                screenshotAvailable(link) && pdfAvailable(link) ? "mt-3" : ""
+                screenshotAvailable(link) &&
+                pdfAvailable(link) &&
+                readabilityAvailable(link)
+                  ? "mt-3"
+                  : ""
               }`}
               onClick={() => updateArchive()}
             >
@@ -208,11 +262,15 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
             )}`}
             target="_blank"
             className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm ${
-              screenshotAvailable(link) && pdfAvailable(link) ? "sm:mt-3" : ""
+              screenshotAvailable(link) &&
+              pdfAvailable(link) &&
+              readabilityAvailable(link)
+                ? "sm:mt-3"
+                : ""
             }`}
           >
             <p className="whitespace-nowrap">
-              View Latest Snapshot on archive.org
+              View latest snapshot on archive.org
             </p>
             <FontAwesomeIcon
               icon={faArrowUpRightFromSquare}
diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx
index d0e5096..4364ac7 100644
--- a/components/NoLinksFound.tsx
+++ b/components/NoLinksFound.tsx
@@ -14,7 +14,7 @@ export default function NoLinksFound({ text }: Props) {
     <div className="w-full h-full flex flex-col justify-center p-3">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5"
+        className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5 text-primary drop-shadow"
         fill="currentColor"
         viewBox="0 0 16 16"
       >
diff --git a/lib/api/archiveHandler.ts b/lib/api/archiveHandler.ts
index 9ae230f..b34613f 100644
--- a/lib/api/archiveHandler.ts
+++ b/lib/api/archiveHandler.ts
@@ -7,11 +7,6 @@ import { JSDOM } from "jsdom";
 import DOMPurify from "dompurify";
 import { Collection, Link, User } from "@prisma/client";
 import validateUrlSize from "./validateUrlSize";
-import {
-  pdfAvailable,
-  readabilityAvailable,
-  screenshotAvailable,
-} from "../shared/getArchiveValidity";
 
 type LinksAndCollectionAndOwner = Link & {
   collection: Collection & {
@@ -174,23 +169,15 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
       await prisma.link.update({
         where: { id: link.id },
         data: {
-          readabilityPath:
-            !finalLink.textContent ||
-            finalLink.textContent === "" ||
-            !readabilityAvailable(finalLink) ||
-            finalLink.type !== "url"
-              ? "unavailable"
-              : undefined,
-          screenshotPath:
-            !screenshotAvailable(finalLink) ||
-            (finalLink.type !== "url" && finalLink.type !== "pdf")
-              ? "unavailable"
-              : undefined,
-          pdfPath:
-            !pdfAvailable(finalLink) ||
-            (finalLink.type !== "url" && finalLink.type !== "image")
-              ? "unavailable"
-              : undefined,
+          readabilityPath: !finalLink.readabilityPath?.startsWith("archives")
+            ? "unavailable"
+            : undefined,
+          screenshotPath: !finalLink.screenshotPath?.startsWith("archives")
+            ? "unavailable"
+            : undefined,
+          pdfPath: !finalLink.pdfPath?.startsWith("archives")
+            ? "unavailable"
+            : undefined,
         },
       });
 
diff --git a/lib/api/imageHandler.ts b/lib/api/imageHandler.ts
deleted file mode 100644
index bff89c3..0000000
--- a/lib/api/imageHandler.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { prisma } from "@/lib/api/db";
-import createFile from "@/lib/api/storage/createFile";
-import fs from "fs";
-import path from "path";
-
-export default async function imageHandler(
-  linkId: number,
-  url: string | null,
-  extension: string,
-  file?: string
-) {
-  const image = await fetch(url as string).then((res) => res.blob());
-
-  const buffer = Buffer.from(await image.arrayBuffer());
-
-  const linkExists = await prisma.link.findUnique({
-    where: { id: linkId },
-  });
-
-  linkExists
-    ? await createFile({
-        data: buffer,
-        filePath: `archives/${linkExists.collectionId}/${linkId}.${extension}`,
-      })
-    : undefined;
-
-  await prisma.link.update({
-    where: { id: linkId },
-    data: {
-      screenshotPath: linkExists
-        ? `archives/${linkExists.collectionId}/${linkId}.${extension}`
-        : null,
-      pdfPath: null,
-      readabilityPath: null,
-    },
-  });
-}
diff --git a/lib/api/pdfHandler.ts b/lib/api/pdfHandler.ts
deleted file mode 100644
index 37dbef7..0000000
--- a/lib/api/pdfHandler.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { prisma } from "@/lib/api/db";
-import createFile from "@/lib/api/storage/createFile";
-import fs from "fs";
-import path from "path";
-
-export default async function pdfHandler(
-  linkId: number,
-  url: string | null,
-  file?: string
-) {
-  const targetLink = await prisma.link.update({
-    where: { id: linkId },
-    data: {
-      pdfPath: "pending",
-      lastPreserved: new Date().toISOString(),
-    },
-  });
-
-  const pdf = await fetch(url as string).then((res) => res.blob());
-
-  const buffer = Buffer.from(await pdf.arrayBuffer());
-
-  const linkExists = await prisma.link.findUnique({
-    where: { id: linkId },
-  });
-
-  linkExists
-    ? await createFile({
-        data: buffer,
-        filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
-      })
-    : undefined;
-
-  await prisma.link.update({
-    where: { id: linkId },
-    data: {
-      pdfPath: linkExists
-        ? `archives/${linkExists.collectionId}/${linkId}.pdf`
-        : null,
-      readabilityPath: null,
-      screenshotPath: null,
-    },
-  });
-}
diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
deleted file mode 100644
index 694932b..0000000
--- a/pages/links/[id].tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-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 {
-  ArchivedFormat,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import Image from "next/image";
-import ColorThief, { RGBColor } from "colorthief";
-import unescapeString from "@/lib/client/unescapeString";
-import isValidUrl from "@/lib/shared/isValidUrl";
-import DOMPurify from "dompurify";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faBoxesStacked,
-  faFolder,
-  faLink,
-} from "@fortawesome/free-solid-svg-icons";
-import useModalStore from "@/store/modals";
-import { useSession } from "next-auth/react";
-import useLocalSettingsStore from "@/store/localSettings";
-import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
-
-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 { links, getLink } = useLinkStore();
-  const { setModal } = useModalStore();
-
-  const { settings } = useLocalSettingsStore();
-
-  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 && readabilityAvailable(link)) {
-        const response = await fetch(
-          `/api/v1/archives/${link?.id}?format=${ArchivedFormat.readability}`
-        );
-
-        const data = await response?.json();
-
-        setLinkContent(data);
-      }
-    };
-
-    fetchLinkContent();
-  }, [link]);
-
-  useEffect(() => {
-    let interval: any;
-    if (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 bottom, ${rgbToHex(
-          colorPalette[0][0],
-          colorPalette[0][1],
-          colorPalette[0][2]
-        )}20, ${rgbToHex(
-          colorPalette[1][0],
-          colorPalette[1][1],
-          colorPalette[1][2]
-        )}20)`;
-      }
-
-      if (colorPalette[2] && colorPalette[3]) {
-        bannerInner.style.background = `linear-gradient(to bottom, ${rgbToHex(
-          colorPalette[2][0],
-          colorPalette[2][1],
-          colorPalette[2][2]
-        )}30, ${rgbToHex(
-          colorPalette[3][0],
-          colorPalette[3][1],
-          colorPalette[3][2]
-        )})30`;
-      }
-    }
-  }, [colorPalette]);
-
-  return (
-    <LinkLayout>
-      <div className={`flex flex-col max-w-screen-md h-full`}>
-        <div
-          id="link-banner"
-          className="link-banner relative bg-opacity-10 border-neutral-content"
-        >
-          {/* <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-start">
-              {!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="bg-white shadow rounded-md p-1 select-none mt-1"
-                  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 flex-col">
-                <p className="text-xl">
-                  {unescapeString(
-                    link?.name || link?.description || link?.url || ""
-                  )}
-                </p>
-                {link?.url ? (
-                  <Link
-                    href={link?.url || ""}
-                    title={link?.url}
-                    target="_blank"
-                    className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
-                  >
-                    <FontAwesomeIcon icon={faLink} className="w-4 h-4" />
-
-                    {isValidUrl(link?.url || "")
-                      ? new URL(link?.url as string).host
-                      : undefined}
-                  </Link>
-                ) : undefined}
-              </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: link?.collection.color }}
-                />
-                <p
-                  title={link?.collection.name}
-                  className="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="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                  >
-                    #{e.name}
-                  </p>
-                </Link>
-              ))}
-            </div>
-
-            <p className="min-w-fit text-sm text-neutral">
-              {link?.createdAt
-                ? new Date(link?.createdAt).toLocaleString("en-US", {
-                    year: "numeric",
-                    month: "long",
-                    day: "numeric",
-                  })
-                : undefined}
-            </p>
-
-            {link?.name ? (
-              <p>{unescapeString(link?.description)}</p>
-            ) : undefined}
-          </div>
-        </div>
-
-        <div className="divider"></div>
-
-        <div className="flex flex-col gap-5 h-full">
-          {link?.readabilityPath?.startsWith("archives") ? (
-            <div
-              className="line-break px-1 reader-view"
-              dangerouslySetInnerHTML={{
-                __html: DOMPurify.sanitize(linkContent?.content || "") || "",
-              }}
-            ></div>
-          ) : (
-            <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-base-200">
-              {link?.readabilityPath === "pending" ? (
-                <p className="text-center">
-                  Generating readable format, please wait...
-                </p>
-              ) : (
-                <>
-                  <p className="text-center text-2xl">
-                    There is no reader view for this webpage
-                  </p>
-                  <p className="text-center text-sm">
-                    {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/preserved/[id].tsx b/pages/preserved/[id].tsx
new file mode 100644
index 0000000..6612950
--- /dev/null
+++ b/pages/preserved/[id].tsx
@@ -0,0 +1,298 @@
+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 {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import Image from "next/image";
+import ColorThief, { RGBColor } from "colorthief";
+import unescapeString from "@/lib/client/unescapeString";
+import isValidUrl from "@/lib/shared/isValidUrl";
+import DOMPurify from "dompurify";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
+import useModalStore from "@/store/modals";
+import { useSession } from "next-auth/react";
+import useLocalSettingsStore from "@/store/localSettings";
+import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
+
+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 { links, getLink } = useLinkStore();
+  const { setModal } = useModalStore();
+
+  const { settings } = useLocalSettingsStore();
+
+  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 && readabilityAvailable(link)) {
+        const response = await fetch(
+          `/api/v1/archives/${link?.id}?format=${ArchivedFormat.readability}`
+        );
+
+        const data = await response?.json();
+
+        setLinkContent(data);
+      }
+    };
+
+    fetchLinkContent();
+  }, [link]);
+
+  useEffect(() => {
+    if (link) getLink(link?.id as number);
+
+    let interval: any;
+    if (
+      link &&
+      (link?.screenshotPath === "pending" ||
+        link?.pdfPath === "pending" ||
+        link?.readabilityPath === "pending" ||
+        !link?.screenshotPath ||
+        !link?.pdfPath ||
+        !link?.readabilityPath)
+    ) {
+      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 bottom, ${rgbToHex(
+          colorPalette[0][0],
+          colorPalette[0][1],
+          colorPalette[0][2]
+        )}20, ${rgbToHex(
+          colorPalette[1][0],
+          colorPalette[1][1],
+          colorPalette[1][2]
+        )}20)`;
+      }
+
+      if (colorPalette[2] && colorPalette[3]) {
+        bannerInner.style.background = `linear-gradient(to bottom, ${rgbToHex(
+          colorPalette[2][0],
+          colorPalette[2][1],
+          colorPalette[2][2]
+        )}30, ${rgbToHex(
+          colorPalette[3][0],
+          colorPalette[3][1],
+          colorPalette[3][2]
+        )})30`;
+      }
+    }
+  }, [colorPalette]);
+
+  return (
+    <div className={`flex flex-col max-w-screen-md h-full mx-auto py-5`}>
+      <div
+        id="link-banner"
+        className="link-banner relative bg-opacity-10 border-neutral-content p-3 border mb-3"
+      >
+        <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-start">
+            {!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="bg-white shadow rounded-md p-1 select-none mt-1"
+                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 flex-col">
+              <p className="text-xl">
+                {unescapeString(
+                  link?.name || link?.description || link?.url || ""
+                )}
+              </p>
+              {link?.url ? (
+                <Link
+                  href={link?.url || ""}
+                  title={link?.url}
+                  target="_blank"
+                  className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
+                >
+                  <FontAwesomeIcon icon={faLink} className="w-4 h-4" />
+
+                  {isValidUrl(link?.url || "")
+                    ? new URL(link?.url as string).host
+                    : undefined}
+                </Link>
+              ) : undefined}
+            </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: link?.collection.color }}
+              />
+              <p
+                title={link?.collection.name}
+                className="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="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                >
+                  #{e.name}
+                </p>
+              </Link>
+            ))}
+          </div>
+
+          <p className="min-w-fit text-sm text-neutral">
+            {link?.createdAt
+              ? new Date(link?.createdAt).toLocaleString("en-US", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })
+              : undefined}
+          </p>
+
+          {link?.name ? <p>{unescapeString(link?.description)}</p> : undefined}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-5 h-full">
+        {link && link.type === "url"
+          ? DisplayReadable(link, linkContent)
+          : undefined}
+      </div>
+    </div>
+  );
+}
+
+const DisplayReadable = (
+  link: LinkIncludingShortenedCollectionAndTags,
+  linkContent?: LinkContent
+) => {
+  return link.readabilityPath?.startsWith("archives") ? (
+    <div
+      className="line-break px-1 reader-view"
+      dangerouslySetInnerHTML={{
+        __html: DOMPurify.sanitize(linkContent?.content || "") || "",
+      }}
+    ></div>
+  ) : (
+    <div
+      className={`w-full h-full flex flex-col justify-center p-10 ${
+        link?.readabilityPath === "pending" || !link?.readabilityPath
+          ? "skeleton"
+          : ""
+      }`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5"
+        viewBox="0 0 16 16"
+      >
+        <path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z" />
+        <path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z" />
+      </svg>
+      <p className="text-center text-2xl">
+        The Link preservation is currently in the queue
+      </p>
+      <p className="text-center text-lg mt-2">
+        Please check back later to see the result
+      </p>
+    </div>
+  );
+};
diff --git a/pages/public/links/[id].tsx b/pages/public/links/[id].tsx
deleted file mode 100644
index d9641cc..0000000
--- a/pages/public/links/[id].tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-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 {
-  ArchivedFormat,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import Image from "next/image";
-import ColorThief, { RGBColor } from "colorthief";
-import unescapeString from "@/lib/client/unescapeString";
-import isValidUrl from "@/lib/shared/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";
-import useLocalSettingsStore from "@/store/localSettings";
-import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
-
-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 { links, getLink } = useLinkStore();
-  const { setModal } = useModalStore();
-
-  const { settings } = useLocalSettingsStore();
-
-  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), true);
-      }
-    };
-
-    fetchLink();
-  }, []);
-
-  useEffect(() => {
-    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
-  }, [links]);
-
-  useEffect(() => {
-    const fetchLinkContent = async () => {
-      if (router.query.id && readabilityAvailable(link)) {
-        const response = await fetch(
-          `/api/v1/archives/${link?.id}?format=${ArchivedFormat.readability}`
-        );
-
-        const data = await response?.json();
-
-        setLinkContent(data);
-      }
-    };
-
-    fetchLinkContent();
-  }, [link]);
-
-  useEffect(() => {
-    let interval: any;
-    if (link?.readabilityPath === "pending") {
-      interval = setInterval(() => getLink(link.id as number, true), 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]);
-
-  return (
-    <LinkLayout>
-      <div
-        className={`flex flex-col max-w-screen-md h-full ${
-          settings.theme === "dark" ? "banner-dark-mode" : "banner-light-mode"
-        }`}
-      >
-        <div
-          id="link-banner"
-          className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-neutral-content 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-base-100 bg-base-100 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-neutral">
-                <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-lg truncate max-w-[12rem]"
-                  >
-                    {link?.collection?.name}
-                  </p>
-                </Link>
-                {link?.tags.map((e, i) => (
-                  <Link
-                    key={i}
-                    href={"/public/collections/20?q=" + e.name}
-                    title={e.name}
-                    className="z-10 btn btn-xs btn-ghost truncate max-w-[19rem]"
-                  >
-                    #{e.name}
-                  </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-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-base-200">
-              {link?.readabilityPath === "pending" ? (
-                <p className="text-center">
-                  Generating readable format, please wait...
-                </p>
-              ) : (
-                <>
-                  <p className="text-center text-2xl">
-                    There is no reader view for this webpage
-                  </p>
-                  <p className="text-center text-sm">
-                    {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>
-  );
-}