diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
new file mode 100644
index 0000000..090d64b
--- /dev/null
+++ b/components/CopyButton.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+type Props = {
+  text: string;
+};
+
+const CopyButton = ({ text }: Props) => {
+  return (
+    <div
+      className="bi-copy text-xl text-neutral btn btn-sm btn-square btn-ghost"
+      onClick={() => {
+        try {
+          navigator.clipboard.writeText(text).then(() => {
+            const copyIcon = document.querySelector(".bi-copy");
+            if (copyIcon) {
+              copyIcon.classList.remove("bi-copy");
+              copyIcon.classList.add("bi-check2");
+              copyIcon.classList.add("text-success");
+            }
+            setTimeout(() => {
+              if (copyIcon) {
+                copyIcon.classList.remove("bi-check2");
+                copyIcon.classList.remove("text-success");
+                copyIcon.classList.add("bi-copy");
+              }
+            }, 1000);
+          });
+        } catch (err) {
+          console.log(err);
+        }
+      }}
+    ></div>
+  );
+};
+
+export default CopyButton;
diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx
index 337fc36..d255c4b 100644
--- a/components/DashboardItem.tsx
+++ b/components/DashboardItem.tsx
@@ -14,7 +14,12 @@ export default function dashboardItem({
       </div>
       <div className="ml-4 flex flex-col justify-center">
         <p className="text-neutral text-xs tracking-wider">{name}</p>
-        <p className="font-thin text-5xl text-primary mt-0.5">{value}</p>
+        <p className="font-thin text-5xl text-primary mt-0.5 hidden sm:block md:hidden">
+          {value < 1000 ? value : (value / 1000).toFixed(1) + "k"}
+        </p>
+        <p className="font-thin text-5xl text-primary mt-0.5 sm:hidden md:block">
+          {value}
+        </p>
       </div>
     </div>
   );
diff --git a/components/Drawer.tsx b/components/Drawer.tsx
new file mode 100644
index 0000000..12f931e
--- /dev/null
+++ b/components/Drawer.tsx
@@ -0,0 +1,88 @@
+import React, { ReactNode, useEffect } from "react";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { Drawer as D } from "vaul";
+
+type Props = {
+  toggleDrawer: Function;
+  children: ReactNode;
+  className?: string;
+  dismissible?: boolean;
+};
+
+export default function Drawer({
+  toggleDrawer,
+  className,
+  children,
+  dismissible = true,
+}: Props) {
+  const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
+
+  useEffect(() => {
+    if (window.innerWidth >= 640) {
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "relative";
+      return () => {
+        document.body.style.overflow = "auto";
+        document.body.style.position = "";
+      };
+    }
+  }, []);
+
+  if (window.innerWidth < 640) {
+    return (
+      <D.Root
+        open={drawerIsOpen}
+        onClose={() => dismissible && setTimeout(() => toggleDrawer(), 350)}
+        dismissible={dismissible}
+      >
+        <D.Portal>
+          <D.Overlay className="fixed inset-0 bg-black/40" />
+          <ClickAwayHandler
+            onClickOutside={() => dismissible && setDrawerIsOpen(false)}
+          >
+            <D.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
+              <div
+                className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
+                data-testid="mobile-modal-container"
+              >
+                <div
+                  className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5"
+                  data-testid="mobile-modal-slider"
+                />
+                {children}
+              </div>
+            </D.Content>
+          </ClickAwayHandler>
+        </D.Portal>
+      </D.Root>
+    );
+  } else {
+    return (
+      <D.Root
+        open={drawerIsOpen}
+        onClose={() => dismissible && setTimeout(() => toggleDrawer(), 350)}
+        dismissible={dismissible}
+        direction="right"
+      >
+        <D.Portal>
+          <D.Overlay className="fixed inset-0 bg-black/10 z-20" />
+          <ClickAwayHandler
+            onClickOutside={() => dismissible && setDrawerIsOpen(false)}
+            className="z-30"
+          >
+            <D.Content className="bg-white flex flex-col h-full w-2/5 min-w-[30rem] mt-24 fixed bottom-0 right-0 z-40 !select-auto">
+              <div
+                className={
+                  "p-4 bg-base-100 flex-1 border-neutral-content border-l overflow-y-auto " +
+                  className
+                }
+              >
+                {children}
+              </div>
+            </D.Content>
+          </ClickAwayHandler>
+        </D.Portal>
+      </D.Root>
+    );
+  }
+}
diff --git a/components/LinkDetails.tsx b/components/LinkDetails.tsx
new file mode 100644
index 0000000..e489078
--- /dev/null
+++ b/components/LinkDetails.tsx
@@ -0,0 +1,302 @@
+import React, { useEffect, useState } from "react";
+import {
+  LinkIncludingShortenedCollectionAndTags,
+  ArchivedFormat,
+} from "@/types/global";
+import Link from "next/link";
+import { useSession } from "next-auth/react";
+import {
+  pdfAvailable,
+  readabilityAvailable,
+  monolithAvailable,
+  screenshotAvailable,
+} from "@/lib/shared/getArchiveValidity";
+import PreservedFormatRow from "@/components/PreserverdFormatRow";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import { useTranslation } from "next-i18next";
+import { BeatLoader } from "react-spinners";
+import { useUser } from "@/hooks/store/user";
+import { useGetLink } from "@/hooks/store/links";
+import LinkIcon from "./LinkViews/LinkComponents/LinkIcon";
+import CopyButton from "./CopyButton";
+import { useRouter } from "next/router";
+
+type Props = {
+  className?: string;
+  link: LinkIncludingShortenedCollectionAndTags;
+};
+
+export default function LinkDetails({ className, link }: Props) {
+  const { t } = useTranslation();
+  const session = useSession();
+  const getLink = useGetLink();
+  const { data: user = {} } = useUser();
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsMonolith: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (link.collection.ownerId !== user.id) {
+        const owner = await getPublicUserData(
+          link.collection.ownerId as number
+        );
+        setCollectionOwner(owner);
+      } else if (link.collection.ownerId === user.id) {
+        setCollectionOwner({
+          id: user.id as number,
+          name: user.name,
+          username: user.username as string,
+          image: user.image as string,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [link.collection.ownerId]);
+
+  const isReady = () => {
+    return (
+      link &&
+      (collectionOwner.archiveAsScreenshot === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsMonolith === true
+        ? link.monolith && link.monolith !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsPDF === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      link.readable &&
+      link.readable !== "pending"
+    );
+  };
+
+  const atLeastOneFormatAvailable = () => {
+    return (
+      screenshotAvailable(link) ||
+      pdfAvailable(link) ||
+      readabilityAvailable(link) ||
+      monolithAvailable(link)
+    );
+  };
+
+  useEffect(() => {
+    (async () => {
+      await getLink.mutateAsync({
+        id: link.id as number,
+      });
+    })();
+
+    let interval: any;
+
+    if (!isReady()) {
+      interval = setInterval(async () => {
+        await getLink.mutateAsync({
+          id: link.id as number,
+        });
+      }, 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.monolith]);
+
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
+  return (
+    <div className={className} data-vaul-no-drag>
+      <LinkIcon link={link} className="mx-auto" />
+
+      {link.name && <p className="text-xl text-center mt-2">{link.name}</p>}
+
+      {link.url && (
+        <>
+          <br />
+
+          <p className="text-sm mb-2 text-neutral">{t("link")}</p>
+
+          <div className="rounded-lg p-2 bg-base-200 flex justify-between items-center gap-2">
+            <Link
+              href={link.url}
+              title={link.url}
+              target="_blank"
+              className="truncate"
+            >
+              {link.url}
+            </Link>
+            <CopyButton text={link.url} />
+          </div>
+        </>
+      )}
+
+      <br />
+
+      <p className="text-sm mb-2 text-neutral">{t("collection")}</p>
+
+      <Link
+        href={
+          isPublicRoute
+            ? `/public/collections/${link.collection.id}`
+            : `/collections/${link.collection.id}`
+        }
+        className="rounded-lg p-2 bg-base-200 flex justify-between items-center gap-2"
+      >
+        <p className="truncate">{link.collection.name}</p>
+        <i
+          className="bi-folder-fill text-xl"
+          style={{ color: link.collection.color }}
+        ></i>
+      </Link>
+
+      {link.tags[0] && (
+        <>
+          <br />
+
+          <div>
+            <p className="text-sm mb-2 text-neutral">{t("tags")}</p>
+          </div>
+
+          <div className="flex gap-2">
+            {link.tags.map((tag) =>
+              isPublicRoute ? (
+                <div key={tag.id} className="rounded-lg px-3 py-1 bg-base-200">
+                  {tag.name}
+                </div>
+              ) : (
+                <Link
+                  href={"/tags/" + tag.id}
+                  key={tag.id}
+                  className="rounded-lg px-3 py-1 bg-base-200"
+                >
+                  {tag.name}
+                </Link>
+              )
+            )}
+          </div>
+        </>
+      )}
+
+      {link.description && (
+        <>
+          <br />
+
+          <div>
+            <p className="text-sm mb-2 text-neutral">{t("notes")}</p>
+
+            <div className="rounded-lg p-2 bg-base-200 hyphens-auto">
+              <p>{link.description}</p>
+            </div>
+          </div>
+        </>
+      )}
+
+      <br />
+
+      <p className="text-sm mb-2 text-neutral" title={t("available_formats")}>
+        {link.url ? t("preserved_formats") : t("file")}
+      </p>
+
+      <div className={`flex flex-col gap-3`}>
+        {monolithAvailable(link) ? (
+          <PreservedFormatRow
+            name={t("webpage")}
+            icon={"bi-filetype-html"}
+            format={ArchivedFormat.monolith}
+            link={link}
+            downloadable={true}
+          />
+        ) : undefined}
+
+        {screenshotAvailable(link) ? (
+          <PreservedFormatRow
+            name={t("screenshot")}
+            icon={"bi-file-earmark-image"}
+            format={
+              link?.image?.endsWith("png")
+                ? ArchivedFormat.png
+                : ArchivedFormat.jpeg
+            }
+            link={link}
+            downloadable={true}
+          />
+        ) : undefined}
+
+        {pdfAvailable(link) ? (
+          <PreservedFormatRow
+            name={t("pdf")}
+            icon={"bi-file-earmark-pdf"}
+            format={ArchivedFormat.pdf}
+            link={link}
+            downloadable={true}
+          />
+        ) : undefined}
+
+        {readabilityAvailable(link) ? (
+          <PreservedFormatRow
+            name={t("readable")}
+            icon={"bi-file-earmark-text"}
+            format={ArchivedFormat.readability}
+            link={link}
+          />
+        ) : undefined}
+
+        {!isReady() && !atLeastOneFormatAvailable() ? (
+          <div className={`w-full h-full flex flex-col justify-center p-10`}>
+            <BeatLoader
+              color="oklch(var(--p))"
+              className="mx-auto mb-3"
+              size={30}
+            />
+
+            <p className="text-center text-2xl">{t("preservation_in_queue")}</p>
+            <p className="text-center text-lg">{t("check_back_later")}</p>
+          </div>
+        ) : link.url && !isReady() && atLeastOneFormatAvailable() ? (
+          <div className={`w-full h-full flex flex-col justify-center p-5`}>
+            <BeatLoader
+              color="oklch(var(--p))"
+              className="mx-auto mb-3"
+              size={20}
+            />
+            <p className="text-center">{t("there_are_more_formats")}</p>
+            <p className="text-center text-sm">{t("check_back_later")}</p>
+          </div>
+        ) : undefined}
+
+        {link.url && (
+          <Link
+            href={`https://web.archive.org/web/${link?.url?.replace(
+              /(^\w+:|^)\/\//,
+              ""
+            )}`}
+            target="_blank"
+            className="text-neutral mx-auto duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm"
+          >
+            <p className="whitespace-nowrap">{t("view_latest_snapshot")}</p>
+            <i className="bi-box-arrow-up-right" />
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx
index 3abc06d..837cd6f 100644
--- a/components/LinkViews/LinkComponents/LinkActions.tsx
+++ b/components/LinkViews/LinkComponents/LinkActions.tsx
@@ -12,22 +12,20 @@ import { useTranslation } from "next-i18next";
 import { useUser } from "@/hooks/store/user";
 import { useDeleteLink, useUpdateLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
+import LinkDetailModal from "@/components/ModalContent/LinkDetailModal";
+import { useRouter } from "next/router";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
   position?: string;
-  toggleShowInfo?: () => void;
-  linkInfo?: boolean;
   alignToTop?: boolean;
   flipDropdown?: boolean;
 };
 
 export default function LinkActions({
   link,
-  toggleShowInfo,
   position,
-  linkInfo,
   alignToTop,
   flipDropdown,
 }: Props) {
@@ -36,6 +34,7 @@ export default function LinkActions({
   const permissions = usePermissions(link.collection.id as number);
 
   const [editLinkModal, setEditLinkModal] = useState(false);
+  const [linkDetailModal, setLinkDetailModal] = useState(false);
   const [deleteLinkModal, setDeleteLinkModal] = useState(false);
   const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
 
@@ -70,119 +69,137 @@ export default function LinkActions({
     );
   };
 
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
   return (
     <>
-      <div
-        className={`dropdown dropdown-left absolute ${
-          position || "top-3 right-3"
-        } ${alignToTop ? "" : "dropdown-end"} z-20`}
-      >
+      {isPublicRoute ? (
         <div
-          tabIndex={0}
-          role="button"
-          onMouseDown={dropdownTriggerer}
-          className="btn btn-ghost btn-sm btn-square text-neutral"
+          className={`absolute ${position || "top-3 right-3"} ${
+            alignToTop ? "" : "dropdown-end"
+          } z-20`}
+          onClick={() => setLinkDetailModal(true)}
         >
-          <i title="More" className="bi-three-dots text-xl" />
+          <div className="btn btn-ghost btn-sm btn-square text-neutral">
+            <i title="More" className="bi-three-dots text-xl" />
+          </div>
         </div>
-        <ul
-          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
-            alignToTop ? "" : "translate-y-10"
-          }`}
+      ) : (
+        <div
+          className={`dropdown dropdown-left absolute ${
+            position || "top-3 right-3"
+          } ${alignToTop ? "" : "dropdown-end"} z-20`}
         >
-          <li>
-            <div
-              role="button"
-              tabIndex={0}
-              onClick={() => {
-                (document?.activeElement as HTMLElement)?.blur();
-                pinLink();
-              }}
-              className="whitespace-nowrap"
-            >
-              {link?.pinnedBy && link.pinnedBy[0]
-                ? t("unpin")
-                : t("pin_to_dashboard")}
-            </div>
-          </li>
-          {linkInfo !== undefined && toggleShowInfo ? (
+          <div
+            tabIndex={0}
+            role="button"
+            onMouseDown={dropdownTriggerer}
+            className="btn btn-ghost btn-sm btn-square text-neutral"
+          >
+            <i title="More" className="bi-three-dots text-xl" />
+          </div>
+          <ul
+            className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
+              alignToTop ? "" : "translate-y-10"
+            }`}
+          >
+            {permissions === true ||
+              (permissions?.canUpdate && (
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      pinLink();
+                    }}
+                    className="whitespace-nowrap"
+                  >
+                    {link?.pinnedBy && link.pinnedBy[0]
+                      ? t("unpin")
+                      : t("pin_to_dashboard")}
+                  </div>
+                </li>
+              ))}
             <li>
               <div
                 role="button"
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  toggleShowInfo();
+                  setLinkDetailModal(true);
                 }}
                 className="whitespace-nowrap"
               >
-                {!linkInfo ? t("show_link_details") : t("hide_link_details")}
+                {t("show_link_details")}
               </div>
             </li>
-          ) : undefined}
-          {permissions === true || permissions?.canUpdate ? (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  setEditLinkModal(true);
-                }}
-                className="whitespace-nowrap"
-              >
-                {t("edit_link")}
-              </div>
-            </li>
-          ) : undefined}
-          {link.type === "url" && (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  setPreservedFormatsModal(true);
-                }}
-                className="whitespace-nowrap"
-              >
-                {t("preserved_formats")}
-              </div>
-            </li>
-          )}
-          {permissions === true || permissions?.canDelete ? (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={async (e) => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey
-                    ? async () => {
-                        const load = toast.loading(t("deleting"));
+            {permissions === true || permissions?.canUpdate ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setEditLinkModal(true);
+                  }}
+                  className="whitespace-nowrap"
+                >
+                  {t("edit_link")}
+                </div>
+              </li>
+            ) : undefined}
+            {link.type === "url" && (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setPreservedFormatsModal(true);
+                  }}
+                  className="whitespace-nowrap"
+                >
+                  {t("preserved_formats")}
+                </div>
+              </li>
+            )}
+            {permissions === true || permissions?.canDelete ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={async (e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey
+                      ? async () => {
+                          const load = toast.loading(t("deleting"));
 
-                        await deleteLink.mutateAsync(link.id as number, {
-                          onSettled: (data, error) => {
-                            toast.dismiss(load);
+                          await deleteLink.mutateAsync(link.id as number, {
+                            onSettled: (data, error) => {
+                              toast.dismiss(load);
 
-                            if (error) {
-                              toast.error(error.message);
-                            } else {
-                              toast.success(t("deleted"));
-                            }
-                          },
-                        });
-                      }
-                    : setDeleteLinkModal(true);
-                }}
-                className="whitespace-nowrap"
-              >
-                {t("delete")}
-              </div>
-            </li>
-          ) : undefined}
-        </ul>
-      </div>
+                              if (error) {
+                                toast.error(error.message);
+                              } else {
+                                toast.success(t("deleted"));
+                              }
+                            },
+                          });
+                        }
+                      : setDeleteLinkModal(true);
+                  }}
+                  className="whitespace-nowrap"
+                >
+                  {t("delete")}
+                </div>
+              </li>
+            ) : undefined}
+          </ul>
+        </div>
+      )}
 
       {editLinkModal ? (
         <EditLinkModal
@@ -202,9 +219,13 @@ export default function LinkActions({
           link={link}
         />
       ) : undefined}
-      {/* {expandedLink ? (
-                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
-              ) : undefined} */}
+      {linkDetailModal ? (
+        <LinkDetailModal
+          onClose={() => setLinkDetailModal(false)}
+          onEdit={() => setEditLinkModal(true)}
+          link={link}
+        />
+      ) : undefined}
     </>
   );
 }
diff --git a/components/LinkViews/LinkComponents/LinkCard.tsx b/components/LinkViews/LinkComponents/LinkCard.tsx
index e228fb1..c6b60c5 100644
--- a/components/LinkViews/LinkComponents/LinkCard.tsx
+++ b/components/LinkViews/LinkComponents/LinkCard.tsx
@@ -22,6 +22,7 @@ import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
+import { useRouter } from "next/router";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -90,6 +91,10 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
   const isVisible = useOnScreen(ref);
   const permissions = usePermissions(collection?.id as number);
 
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
+
   useEffect(() => {
     let interval: any;
 
@@ -99,7 +104,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink.mutateAsync(link.id as number);
+        getLink.mutateAsync({ id: link.id as number, isPublicRoute: isPublic });
       }, 5000);
     }
 
@@ -110,8 +115,6 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
     };
   }, [isVisible, link.preview]);
 
-  const [showInfo, setShowInfo] = useState(false);
-
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -196,63 +199,10 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
         </div>
       </div>
 
-      {showInfo && (
-        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-[0.9rem] fade-in overflow-y-auto">
-          <div
-            onClick={() => setShowInfo(!showInfo)}
-            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
-          >
-            <i className="bi-x text-neutral text-2xl"></i>
-          </div>
-          <p className="text-neutral text-lg font-semibold">
-            {t("description")}
-          </p>
-
-          <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
-          <p>
-            {link.description ? (
-              unescapeString(link.description)
-            ) : (
-              <span className="text-neutral text-sm">
-                {t("no_description")}
-              </span>
-            )}
-          </p>
-          {link.tags && link.tags[0] && (
-            <>
-              <p className="text-neutral text-lg mt-3 font-semibold">
-                {t("tags")}
-              </p>
-
-              <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
-
-              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                <div className="flex gap-1 items-center flex-wrap">
-                  {link.tags.map((e, i) => (
-                    <Link
-                      href={"/tags/" + e.id}
-                      key={i}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                    >
-                      #{e.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
       <LinkActions
         link={link}
         collection={collection}
         position="top-[10.75rem] right-3"
-        toggleShowInfo={() => setShowInfo(!showInfo)}
-        linkInfo={showInfo}
         flipDropdown={flipDropdown}
       />
     </div>
diff --git a/components/LinkViews/LinkComponents/LinkList.tsx b/components/LinkViews/LinkComponents/LinkList.tsx
index d3c8d40..59e6e2d 100644
--- a/components/LinkViews/LinkComponents/LinkList.tsx
+++ b/components/LinkViews/LinkComponents/LinkList.tsx
@@ -80,8 +80,6 @@ export default function LinkCardCompact({
 
   const permissions = usePermissions(collection?.id as number);
 
-  const [showInfo, setShowInfo] = useState(false);
-
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -96,7 +94,7 @@ export default function LinkCardCompact({
     <>
       <div
         className={`${selectedStyle} border relative items-center flex ${
-          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+          !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
         } duration-200 rounded-lg w-full`}
         onClick={() =>
           selectable
@@ -106,20 +104,6 @@ export default function LinkCardCompact({
               : undefined
         }
       >
-        {/* {showCheckbox &&
-          editMode &&
-          (permissions === true ||
-            permissions?.canCreate ||
-            permissions?.canDelete) && (
-            <input
-              type="checkbox"
-              className="checkbox checkbox-primary my-auto mr-2"
-              checked={selectedLinks.some(
-                (selectedLink) => selectedLink.id === link.id
-              )}
-              onChange={() => handleCheckboxClick(link)}
-            />
-          )} */}
         <div
           className="flex items-center cursor-pointer w-full"
           onClick={() =>
@@ -157,8 +141,6 @@ export default function LinkCardCompact({
           collection={collection}
           position="top-3 right-3"
           flipDropdown={flipDropdown}
-          // toggleShowInfo={() => setShowInfo(!showInfo)}
-          // linkInfo={showInfo}
         />
       </div>
       <div
diff --git a/components/LinkViews/LinkComponents/LinkMasonry.tsx b/components/LinkViews/LinkComponents/LinkMasonry.tsx
index 3d327a1..ee63244 100644
--- a/components/LinkViews/LinkComponents/LinkMasonry.tsx
+++ b/components/LinkViews/LinkComponents/LinkMasonry.tsx
@@ -96,7 +96,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink.mutateAsync(link.id as number);
+        getLink.mutateAsync({ id: link.id as number });
       }, 5000);
     }
 
@@ -107,8 +107,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
     };
   }, [isVisible, link.preview]);
 
-  const [showInfo, setShowInfo] = useState(false);
-
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -207,57 +205,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
         </div>
       </div>
 
-      {showInfo && (
-        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
-          <div
-            onClick={() => setShowInfo(!showInfo)}
-            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
-          >
-            <i className="bi-x text-neutral text-2xl"></i>
-          </div>
-          <p className="text-neutral text-lg font-semibold">
-            {t("description")}
-          </p>
-
-          <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-          <p>
-            {link.description ? (
-              unescapeString(link.description)
-            ) : (
-              <span className="text-neutral text-sm">
-                {t("no_description")}
-              </span>
-            )}
-          </p>
-          {link.tags && link.tags[0] && (
-            <>
-              <p className="text-neutral text-lg mt-3 font-semibold">
-                {t("tags")}
-              </p>
-
-              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-
-              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                <div className="flex gap-1 items-center flex-wrap">
-                  {link.tags.map((e, i) => (
-                    <Link
-                      href={"/tags/" + e.id}
-                      key={i}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                    >
-                      #{e.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
       <LinkActions
         link={link}
         collection={collection}
@@ -266,8 +213,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
             ? "top-[10.75rem] right-3"
             : "top-[.75rem] right-3"
         }
-        toggleShowInfo={() => setShowInfo(!showInfo)}
-        linkInfo={showInfo}
         flipDropdown={flipDropdown}
       />
     </div>
diff --git a/components/Modal.tsx b/components/Modal.tsx
index 4691df7..2eb97e4 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -32,7 +32,7 @@ export default function Modal({
     return (
       <Drawer.Root
         open={drawerIsOpen}
-        onClose={() => dismissible && setTimeout(() => toggleModal(), 100)}
+        onClose={() => dismissible && setTimeout(() => toggleModal(), 350)}
         dismissible={dismissible}
       >
         <Drawer.Portal>
diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx
index f004af4..321e672 100644
--- a/components/ModalContent/EditCollectionSharingModal.tsx
+++ b/components/ModalContent/EditCollectionSharingModal.tsx
@@ -11,6 +11,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUpdateCollection } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
+import CopyButton from "../CopyButton";
 
 type Props = {
   onClose: Function;
@@ -133,21 +134,11 @@ export default function EditCollectionSharingModal({
         )}
 
         {collection.isPublic ? (
-          <div className={permissions === true ? "pl-5" : ""}>
+          <div>
             <p className="mb-2">{t("sharable_link_guide")}</p>
-            <div
-              onClick={() => {
-                try {
-                  navigator.clipboard
-                    .writeText(publicCollectionURL)
-                    .then(() => toast.success(t("copied")));
-                } catch (err) {
-                  console.log(err);
-                }
-              }}
-              className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border outline-none hover:border-primary dark:hover:border-primary duration-100 cursor-text"
-            >
+            <div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between">
               {publicCollectionURL}
+              <CopyButton text={publicCollectionURL} />
             </div>
           </div>
         ) : null}
diff --git a/components/ModalContent/LinkDetailModal.tsx b/components/ModalContent/LinkDetailModal.tsx
new file mode 100644
index 0000000..2e6308a
--- /dev/null
+++ b/components/ModalContent/LinkDetailModal.tsx
@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from "react";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import { useTranslation } from "next-i18next";
+import { useUser } from "@/hooks/store/user";
+import { useGetLink } from "@/hooks/store/links";
+import Drawer from "../Drawer";
+import LinkDetails from "../LinkDetails";
+import Link from "next/link";
+import usePermissions from "@/hooks/usePermissions";
+import { useRouter } from "next/router";
+
+type Props = {
+  onClose: Function;
+  onEdit: Function;
+  link: LinkIncludingShortenedCollectionAndTags;
+};
+
+export default function LinkDetailModal({ onClose, onEdit, link }: Props) {
+  const { t } = useTranslation();
+  const getLink = useGetLink();
+  const { data: user = {} } = useUser();
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsMonolith: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (link.collection.ownerId !== user.id) {
+        const owner = await getPublicUserData(
+          link.collection.ownerId as number
+        );
+        setCollectionOwner(owner);
+      } else if (link.collection.ownerId === user.id) {
+        setCollectionOwner({
+          id: user.id as number,
+          name: user.name,
+          username: user.username as string,
+          image: user.image as string,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [link.collection.ownerId]);
+
+  const isReady = () => {
+    return (
+      link &&
+      (collectionOwner.archiveAsScreenshot === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsMonolith === true
+        ? link.monolith && link.monolith !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsPDF === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      link.readable &&
+      link.readable !== "pending"
+    );
+  };
+
+  useEffect(() => {
+    (async () => {
+      await getLink.mutateAsync({
+        id: link.id as number,
+      });
+    })();
+
+    let interval: any;
+
+    if (!isReady()) {
+      interval = setInterval(async () => {
+        await getLink.mutateAsync({
+          id: link.id as number,
+        });
+      }, 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.monolith]);
+
+  const permissions = usePermissions(link.collection.id as number);
+
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
+  return (
+    <Drawer toggleDrawer={onClose} className="sm:h-screen sm:flex relative">
+      <div
+        className="bi-x text-xl text-neutral btn btn-sm btn-square btn-ghost hidden sm:block absolute top-3 left-3"
+        onClick={() => onClose()}
+      ></div>
+      <Link
+        href={isPublicRoute ? `/public/links/${link.id}` : `/links/${link.id}`}
+        target="_blank"
+        className="bi-box-arrow-up-right text-xl text-neutral btn btn-sm btn-square btn-ghost absolute top-3 right-3 select-none"
+      ></Link>
+
+      <div className="sm:m-auto sm:w-5/6">
+        <LinkDetails link={link} />
+
+        {permissions === true ||
+          (permissions?.canUpdate && (
+            <>
+              <br />
+              <br />
+
+              <div className="mx-auto text-center">
+                <div
+                  className="btn btn-sm btn-ghost"
+                  onClick={() => {
+                    onEdit();
+                    onClose();
+                  }}
+                >
+                  {t("edit_link")}
+                </div>
+              </div>
+            </>
+          ))}
+      </div>
+    </Drawer>
+  );
+}
diff --git a/components/ModalContent/NewLinkModal.tsx b/components/ModalContent/NewLinkModal.tsx
index 660c1e4..ff628bf 100644
--- a/components/ModalContent/NewLinkModal.tsx
+++ b/components/ModalContent/NewLinkModal.tsx
@@ -61,7 +61,7 @@ export default function NewLinkModal({ onClose }: Props) {
   };
 
   useEffect(() => {
-    if (router.query.id) {
+    if (router.pathname.startsWith("/collections/") && router.query.id) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
diff --git a/components/ModalContent/PreservedFormatsModal.tsx b/components/ModalContent/PreservedFormatsModal.tsx
index 7cd1df0..309170a 100644
--- a/components/ModalContent/PreservedFormatsModal.tsx
+++ b/components/ModalContent/PreservedFormatsModal.tsx
@@ -96,14 +96,14 @@ export default function PreservedFormatsModal({ onClose, link }: Props) {
 
   useEffect(() => {
     (async () => {
-      await getLink.mutateAsync(link.id as number);
+      await getLink.mutateAsync({ id: link.id as number });
     })();
 
     let interval: any;
 
     if (!isReady()) {
       interval = setInterval(async () => {
-        await getLink.mutateAsync(link.id as number);
+        await getLink.mutateAsync({ id: link.id as number });
       }, 5000);
     } else {
       if (interval) {
@@ -129,7 +129,7 @@ export default function PreservedFormatsModal({ onClose, link }: Props) {
     toast.dismiss(load);
 
     if (response.ok) {
-      await getLink.mutateAsync(link?.id as number);
+      await getLink.mutateAsync({ id: link.id as number });
 
       toast.success(t("link_being_archived"));
     } else toast.error(data.response);
diff --git a/components/ModalContent/UploadFileModal.tsx b/components/ModalContent/UploadFileModal.tsx
index bbb1577..85ecaff 100644
--- a/components/ModalContent/UploadFileModal.tsx
+++ b/components/ModalContent/UploadFileModal.tsx
@@ -70,7 +70,7 @@ export default function UploadFileModal({ onClose }: Props) {
 
   useEffect(() => {
     setOptionsExpanded(false);
-    if (router.query.id) {
+    if (router.pathname.startsWith("/collections/") && router.query.id) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
diff --git a/components/PreserverdFormatRow.tsx b/components/PreserverdFormatRow.tsx
index e8ddbd1..45b156f 100644
--- a/components/PreserverdFormatRow.tsx
+++ b/components/PreserverdFormatRow.tsx
@@ -52,11 +52,9 @@ export default function PreservedFormatRow({
   };
 
   return (
-    <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+    <div className="flex justify-between items-center rounded-lg p-2 bg-base-200">
       <div className="flex gap-2 items-center">
-        <div className="bg-primary text-primary-content p-2 rounded-l-md">
-          <i className={`${icon} text-2xl`} />
-        </div>
+        <i className={`${icon} text-2xl text-primary`} />
         <p>{name}</p>
       </div>
 
@@ -64,7 +62,7 @@ export default function PreservedFormatRow({
         {downloadable || false ? (
           <div
             onClick={() => handleDownload()}
-            className="btn btn-sm btn-square"
+            className="btn btn-sm btn-square btn-ghost"
           >
             <i className="bi-cloud-arrow-down text-xl text-neutral" />
           </div>
@@ -75,9 +73,9 @@ export default function PreservedFormatRow({
             isPublic ? "/public" : ""
           }/preserved/${link?.id}?format=${format}`}
           target="_blank"
-          className="btn btn-sm btn-square"
+          className="btn btn-sm btn-square btn-ghost"
         >
-          <i className="bi-box-arrow-up-right text-xl text-neutral" />
+          <i className="bi-box-arrow-up-right text-lg text-neutral" />
         </Link>
       </div>
     </div>
diff --git a/components/ReadableView.tsx b/components/ReadableView.tsx
index 801e9c1..def3185 100644
--- a/components/ReadableView.tsx
+++ b/components/ReadableView.tsx
@@ -46,13 +46,6 @@ export default function ReadableView({ link }: Props) {
   const router = useRouter();
 
   const getLink = useGetLink();
-  const { data: collections = [] } = useCollections();
-
-  const collection = useMemo(() => {
-    return collections.find(
-      (e) => e.id === link.collection.id
-    ) as CollectionIncludingMembersAndLinkCount;
-  }, [collections, link]);
 
   useEffect(() => {
     const fetchLinkContent = async () => {
@@ -73,7 +66,7 @@ export default function ReadableView({ link }: Props) {
   }, [link]);
 
   useEffect(() => {
-    if (link) getLink.mutateAsync(link?.id as number);
+    if (link) getLink.mutateAsync({ id: link.id as number });
 
     let interval: any;
     if (
@@ -88,7 +81,10 @@ export default function ReadableView({ link }: Props) {
         !link?.monolith)
     ) {
       interval = setInterval(
-        () => getLink.mutateAsync(link.id as number),
+        () =>
+          getLink.mutateAsync({
+            id: link.id as number,
+          }),
         5000
       );
     } else {
@@ -243,13 +239,6 @@ export default function ReadableView({ link }: Props) {
 
           {link?.name ? <p>{unescapeString(link?.description)}</p> : undefined}
         </div>
-
-        <LinkActions
-          link={link}
-          collection={collection}
-          position="top-3 right-3"
-          alignToTop
-        />
       </div>
 
       <div className="flex flex-col gap-5 h-full">
diff --git a/hooks/store/links.tsx b/hooks/store/links.tsx
index abd5624..6d2177f 100644
--- a/hooks/store/links.tsx
+++ b/hooks/store/links.tsx
@@ -225,9 +225,21 @@ const useDeleteLink = () => {
 const useGetLink = () => {
   const queryClient = useQueryClient();
 
+  const router = useRouter();
+
   return useMutation({
-    mutationFn: async (id: number) => {
-      const response = await fetch(`/api/v1/links/${id}`);
+    mutationFn: async ({
+      id,
+      isPublicRoute = router.pathname.startsWith("/public") ? true : undefined,
+    }: {
+      id: number;
+      isPublicRoute?: boolean;
+    }) => {
+      const path = isPublicRoute
+        ? `/api/v1/public/links/${id}`
+        : `/api/v1/links/${id}`;
+
+      const response = await fetch(path);
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -250,7 +262,20 @@ const useGetLink = () => {
         };
       });
 
-      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+      queryClient.setQueriesData(
+        { queryKey: ["publicLinks"] },
+        (oldData: any) => {
+          if (!oldData) return undefined;
+          return {
+            pages: oldData.pages.map((page: any) =>
+              page.map((item: any) => (item.id === data.id ? data : item))
+            ),
+            pageParams: oldData.pageParams,
+          };
+        }
+      );
+
+      // queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
     },
   });
 };
diff --git a/package.json b/package.json
index 7f090d9..0e72474 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "socks-proxy-agent": "^8.0.2",
     "stripe": "^12.13.0",
     "tailwind-merge": "^2.3.0",
-    "vaul": "^0.8.8",
+    "vaul": "^0.9.1",
     "zustand": "^4.3.8"
   },
   "devDependencies": {
@@ -95,7 +95,7 @@
     "postcss": "^8.4.26",
     "prettier": "3.1.1",
     "prisma": "^4.16.2",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.10",
     "ts-node": "^10.9.2",
     "typescript": "4.9.4"
   }
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 5ee0f2d..7f59a3b 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -111,14 +111,14 @@ export default function Dashboard() {
         </div>
 
         <div>
-          <div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
+          <div className="flex justify-evenly flex-col items-start sm:flex-row sm:items-center gap-5 xl:w-full h-full rounded-2xl p-5 bg-base-200">
             <DashboardItem
               name={numberOfLinks === 1 ? t("link") : t("links")}
               value={numberOfLinks}
               icon={"bi-link-45deg"}
             />
 
-            <div className="divider xl:divider-horizontal"></div>
+            <div className="divider m-0"></div>
 
             <DashboardItem
               name={
@@ -128,11 +128,11 @@ export default function Dashboard() {
               icon={"bi-folder"}
             />
 
-            <div className="divider xl:divider-horizontal"></div>
+            <div className="divider m-0"></div>
 
             <DashboardItem
               name={tags.length === 1 ? t("tag") : t("tags")}
-              value={tags.length}
+              value={tags.length * numberOfLinks}
               icon={"bi-hash"}
             />
           </div>
diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
new file mode 100644
index 0000000..cfa8785
--- /dev/null
+++ b/pages/links/[id].tsx
@@ -0,0 +1,41 @@
+import LinkDetails from "@/components/LinkDetails";
+import { useGetLink } from "@/hooks/store/links";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+
+const Index = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  useState;
+
+  const getLink = useGetLink();
+
+  useEffect(() => {
+    getLink.mutate({ id: Number(id) });
+  }, []);
+
+  return (
+    <div className="flex h-screen">
+      {getLink.data ? (
+        <LinkDetails
+          link={getLink.data}
+          className="mx-auto max-w-2xl p-5 m-auto w-full"
+        />
+      ) : (
+        <div className="mx-auto max-w-2xl p-5 m-auto w-full flex flex-col items-center gap-5">
+          <div className="w-20 h-20 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Index;
+
+export { getServerSideProps };
diff --git a/pages/preserved/[id].tsx b/pages/preserved/[id].tsx
index c5806ff..de21605 100644
--- a/pages/preserved/[id].tsx
+++ b/pages/preserved/[id].tsx
@@ -20,7 +20,7 @@ export default function Index() {
   useEffect(() => {
     const fetchLink = async () => {
       if (router.query.id) {
-        await getLink.mutateAsync(Number(router.query.id));
+        await getLink.mutateAsync({ id: Number(router.query.id) });
       }
     };
 
diff --git a/pages/public/links/[id].tsx b/pages/public/links/[id].tsx
new file mode 100644
index 0000000..cfa8785
--- /dev/null
+++ b/pages/public/links/[id].tsx
@@ -0,0 +1,41 @@
+import LinkDetails from "@/components/LinkDetails";
+import { useGetLink } from "@/hooks/store/links";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+
+const Index = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  useState;
+
+  const getLink = useGetLink();
+
+  useEffect(() => {
+    getLink.mutate({ id: Number(id) });
+  }, []);
+
+  return (
+    <div className="flex h-screen">
+      {getLink.data ? (
+        <LinkDetails
+          link={getLink.data}
+          className="mx-auto max-w-2xl p-5 m-auto w-full"
+        />
+      ) : (
+        <div className="mx-auto max-w-2xl p-5 m-auto w-full flex flex-col items-center gap-5">
+          <div className="w-20 h-20 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+          <div className="w-full h-10 skeleton rounded-xl"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Index;
+
+export { getServerSideProps };
diff --git a/pages/public/preserved/[id].tsx b/pages/public/preserved/[id].tsx
index 2f415ae..31544b0 100644
--- a/pages/public/preserved/[id].tsx
+++ b/pages/public/preserved/[id].tsx
@@ -6,10 +6,9 @@ import {
 } from "@/types/global";
 import ReadableView from "@/components/ReadableView";
 import getServerSideProps from "@/lib/client/getServerSideProps";
-import { useGetLink, useLinks } from "@/hooks/store/links";
+import { useGetLink } from "@/hooks/store/links";
 
 export default function Index() {
-  const { links } = useLinks();
   const getLink = useGetLink();
 
   const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
@@ -19,18 +18,14 @@ export default function Index() {
   useEffect(() => {
     const fetchLink = async () => {
       if (router.query.id) {
-        await getLink.mutateAsync(Number(router.query.id));
+        const get = await getLink.mutateAsync({ id: Number(router.query.id) });
+        setLink(get);
       }
     };
 
     fetchLink();
   }, []);
 
-  useEffect(() => {
-    if (links && links[0])
-      setLink(links.find((e) => e.id === Number(router.query.id)));
-  }, [links]);
-
   return (
     <div className="relative">
       {/* <div className="fixed left-1/2 transform -translate-x-1/2 w-fit py-1 px-3 bg-base-200 border border-neutral-content rounded-md">
@@ -39,6 +34,12 @@ export default function Index() {
       {link && Number(router.query.format) === ArchivedFormat.readability && (
         <ReadableView link={link} />
       )}
+      {link && Number(router.query.format) === ArchivedFormat.monolith && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.monolith}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
       {link && Number(router.query.format) === ArchivedFormat.pdf && (
         <iframe
           src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 734340d..0d17a56 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -361,7 +361,6 @@
   "unpin": "Unpin",
   "pin_to_dashboard": "Pin to Dashboard",
   "show_link_details": "Show Link Details",
-  "hide_link_details": "Hide Link Details",
   "link_pinned": "Link Pinned!",
   "link_unpinned": "Link Unpinned!",
   "webpage": "Webpage",
@@ -371,5 +370,6 @@
   "demo_title": "Demo Only",
   "demo_desc": "This is only a demo instance of Linkwarden and uploads are disabled.",
   "demo_desc_2": "If you want to try out the full version, you can sign up for a free trial at:",
-  "demo_button": "Login as demo user"
+  "demo_button": "Login as demo user",
+  "notes": "Notes"
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 85783ea..55d157e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3379,7 +3379,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@@ -3390,6 +3390,17 @@ fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -4268,10 +4279,10 @@ jimp@^0.22.10:
     "@jimp/types" "^0.22.10"
     regenerator-runtime "^0.13.3"
 
-jiti@^1.18.2:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
-  integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
+jiti@^1.21.0:
+  version "1.21.6"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
+  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
 
 jose@^4.11.1, jose@^4.11.4, jose@^4.14.1:
   version "4.14.4"
@@ -5876,20 +5887,20 @@ tailwind-merge@^2.3.0:
   dependencies:
     "@babel/runtime" "^7.24.1"
 
-tailwindcss@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
-  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
+tailwindcss@^3.4.10:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.10.tgz#70442d9aeb78758d1f911af29af8255ecdb8ffef"
+  integrity sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.12"
+    fast-glob "^3.3.0"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.18.2"
+    jiti "^1.21.0"
     lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
@@ -6254,10 +6265,10 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
-vaul@^0.8.8:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.8.8.tgz#c5edc041825fdeaddf0a89e326abcc7ac7449a2d"
-  integrity sha512-Z9K2b90M/LtY/sRyM1yfA8Y4mHC/5WIqhO2u7Byr49r5LQXkLGdVXiehsnjtws9CL+DyknwTuRMJXlCOHTqg/g==
+vaul@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.9.1.tgz#3640198e04636b209b1f907fcf3079bec6ecc66b"
+  integrity sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==
   dependencies:
     "@radix-ui/react-dialog" "^1.0.4"