diff --git a/components/IconPopover.tsx b/components/IconPopover.tsx
index cdbe8f6..878cc32 100644
--- a/components/IconPopover.tsx
+++ b/components/IconPopover.tsx
@@ -127,11 +127,14 @@ const IconPopover = ({
               </label>
             </div>
           </div>
-          <div
-            className="btn btn-ghost btn-sm mt-2 w-fit mx-auto"
-            onClick={reset as React.MouseEventHandler<HTMLDivElement>}
-          >
-            {t("reset_defaults")}
+          <div className="flex flex-col-reverse gap-2 justify-between items-center mt-2">
+            <p className="text-neutral text-sm">{t("close_to_apply")}</p>
+            <div
+              className="btn btn-ghost btn-sm w-fit"
+              onClick={reset as React.MouseEventHandler<HTMLDivElement>}
+            >
+              {t("reset_defaults")}
+            </div>
           </div>
         </div>
       </div>
diff --git a/lib/api/preservationScheme/handleMonolith.ts b/lib/api/preservationScheme/handleMonolith.ts
index f7c08f5..d00850c 100644
--- a/lib/api/preservationScheme/handleMonolith.ts
+++ b/lib/api/preservationScheme/handleMonolith.ts
@@ -39,7 +39,7 @@ const handleMonolith = async (link: Link, content: string) => {
       });
     });
   } catch (err) {
-    console.log("Error running MONOLITH:", err);
+    console.log("Uncaught Monolith error...");
   }
 };
 
diff --git a/pages/preserved/[id].tsx b/pages/preserved/[id].tsx
index de21605..0259cb3 100644
--- a/pages/preserved/[id].tsx
+++ b/pages/preserved/[id].tsx
@@ -1,70 +1,70 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useRouter } from "next/router";
-import {
-  ArchivedFormat,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
+import { ArchivedFormat } 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";
+import clsx from "clsx";
 
 export default function Index() {
-  const { links } = useLinks();
-
   const getLink = useGetLink();
 
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
-
   const router = useRouter();
 
   useEffect(() => {
-    const fetchLink = async () => {
-      if (router.query.id) {
-        await getLink.mutateAsync({ id: Number(router.query.id) });
-      }
-    };
-
-    fetchLink();
+    if (router.query.id) {
+      getLink.mutateAsync({ id: Number(router.query.id) });
+    }
   }, []);
 
-  useEffect(() => {
-    if (links && links[0])
-      setLink(links.find((e) => e.id === Number(router.query.id)));
-  }, [links]);
-
   return (
-    <div className="relative">
+    <div className={clsx(getLink.isPending ? "flex h-screen" : "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">
         Readable
       </div> */}
-      {link && Number(router.query.format) === ArchivedFormat.readability && (
-        <ReadableView link={link} />
-      )}
-      {link && Number(router.query.format) === ArchivedFormat.monolith && (
+      {getLink.data?.id &&
+      Number(router.query.format) === ArchivedFormat.readability ? (
+        <ReadableView link={getLink.data} />
+      ) : getLink.data?.id &&
+        Number(router.query.format) === ArchivedFormat.monolith ? (
         <iframe
-          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.monolith}`}
+          src={`/api/v1/archives/${getLink.data.id}?format=${ArchivedFormat.monolith}`}
           className="w-full h-screen border-none"
         ></iframe>
-      )}
-      {link && Number(router.query.format) === ArchivedFormat.pdf && (
+      ) : getLink.data?.id &&
+        Number(router.query.format) === ArchivedFormat.pdf ? (
         <iframe
-          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
+          src={`/api/v1/archives/${getLink.data.id}?format=${ArchivedFormat.pdf}`}
           className="w-full h-screen border-none"
         ></iframe>
-      )}
-      {link && Number(router.query.format) === ArchivedFormat.png && (
+      ) : getLink.data?.id &&
+        Number(router.query.format) === ArchivedFormat.png ? (
         <img
           alt=""
-          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
+          src={`/api/v1/archives/${getLink.data.id}?format=${ArchivedFormat.png}`}
           className="w-fit mx-auto"
         />
-      )}
-      {link && Number(router.query.format) === ArchivedFormat.jpeg && (
+      ) : getLink.data?.id &&
+        Number(router.query.format) === ArchivedFormat.jpeg ? (
         <img
           alt=""
-          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}`}
+          src={`/api/v1/archives/${getLink.data.id}?format=${ArchivedFormat.jpeg}`}
           className="w-fit mx-auto"
         />
+      ) : getLink.error ? (
+        <p>404 - Not found</p>
+      ) : (
+        <div className="max-w-3xl p-5 m-auto w-full flex flex-col items-center gap-5">
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-3/4 mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-5/6 mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-3/4 mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-5/6 mr-auto h-4 skeleton rounded-md"></div>
+        </div>
       )}
     </div>
   );
diff --git a/pages/public/preserved/[id].tsx b/pages/public/preserved/[id].tsx
index 31544b0..5d02df6 100644
--- a/pages/public/preserved/[id].tsx
+++ b/pages/public/preserved/[id].tsx
@@ -1,64 +1,70 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useRouter } from "next/router";
-import {
-  ArchivedFormat,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
+import { ArchivedFormat } from "@/types/global";
 import ReadableView from "@/components/ReadableView";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useGetLink } from "@/hooks/store/links";
+import clsx from "clsx";
 
 export default function Index() {
   const getLink = useGetLink();
 
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
-
   const router = useRouter();
 
   useEffect(() => {
-    const fetchLink = async () => {
-      if (router.query.id) {
-        const get = await getLink.mutateAsync({ id: Number(router.query.id) });
-        setLink(get);
-      }
-    };
-
-    fetchLink();
+    if (router.query.id) {
+      getLink.mutateAsync({ id: Number(router.query.id), isPublicRoute: true });
+    }
   }, []);
 
   return (
-    <div className="relative">
+    <div className={clsx(getLink.isPending ? "flex h-screen" : "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">
         Readable
       </div> */}
-      {link && Number(router.query.format) === ArchivedFormat.readability && (
-        <ReadableView link={link} />
-      )}
-      {link && Number(router.query.format) === ArchivedFormat.monolith && (
+      {getLink.data?.id &&
+      Number(router.query.format) === ArchivedFormat.readability ? (
+        <ReadableView link={getLink.data} />
+      ) : getLink.data?.id &&
+        Number(router.query.format) === ArchivedFormat.monolith ? (
         <iframe
-          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.monolith}`}
+          src={`/api/v1/archives/${getLink.data.id}?format=${ArchivedFormat.monolith}`}
           className="w-full h-screen border-none"
         ></iframe>
-      )}
-      {link && Number(router.query.format) === ArchivedFormat.pdf && (
+      ) : getLink.data?.id &&
+        Number(router.query.format) === ArchivedFormat.pdf ? (
         <iframe
-          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
+          src={`/api/v1/archives/${getLink.data.id}?format=${ArchivedFormat.pdf}`}
           className="w-full h-screen border-none"
         ></iframe>
-      )}
-      {link && Number(router.query.format) === ArchivedFormat.png && (
+      ) : getLink.data?.id &&
+        Number(router.query.format) === ArchivedFormat.png ? (
         <img
           alt=""
-          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
+          src={`/api/v1/archives/${getLink.data.id}?format=${ArchivedFormat.png}`}
           className="w-fit mx-auto"
         />
-      )}
-      {link && Number(router.query.format) === ArchivedFormat.jpeg && (
+      ) : getLink.data?.id &&
+        Number(router.query.format) === ArchivedFormat.jpeg ? (
         <img
           alt=""
-          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}`}
+          src={`/api/v1/archives/${getLink.data.id}?format=${ArchivedFormat.jpeg}`}
           className="w-fit mx-auto"
         />
+      ) : getLink.error ? (
+        <p>404 - Not found</p>
+      ) : (
+        <div className="max-w-3xl p-5 m-auto w-full flex flex-col items-center gap-5">
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-3/4 mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-5/6 mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-3/4 mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-full mr-auto h-4 skeleton rounded-md"></div>
+          <div className="w-5/6 mr-auto h-4 skeleton rounded-md"></div>
+        </div>
       )}
     </div>
   );
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 16f4d12..3334acc 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -416,5 +416,6 @@
   "resend_invite_success": "Invitation Resent!",
   "remove_user": "Remove User",
   "continue_to_dashboard": "Continue to Dashboard",
-  "confirm_user_removal_desc": "They will need to have a subscription to access Linkwarden again."
+  "confirm_user_removal_desc": "They will need to have a subscription to access Linkwarden again.",
+  "close_to_apply": "Close to apply"
 }
\ No newline at end of file