diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index af13803..60609a4 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -32,7 +32,7 @@ export default function CollectionCard({ collection, className }: Props) {
 
   return (
     <div
-      className={`bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
+      className={`border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
     >
       <div
         onClick={() => setExpandDropdown(!expandDropdown)}
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 8f186f9..1e26b78 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -19,6 +19,7 @@ import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import isValidUrl from "@/lib/client/isValidUrl";
+import Link from "next/link";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -106,7 +107,7 @@ export default function LinkCard({ link, count, className }: Props) {
 
   return (
     <div
-      className={`h-fit bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
+      className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${className}`}
     >
       {(permissions === true ||
         permissions?.canUpdate ||
@@ -136,7 +137,7 @@ export default function LinkCard({ link, count, className }: Props) {
             active: link,
           });
         }}
-        className="flex items-start gap-5 sm:gap-10 h-full w-full p-5"
+        className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
       >
         {url && (
           <Image
@@ -163,22 +164,33 @@ export default function LinkCard({ link, count, className }: Props) {
                 {link.name || link.description}
               </p>
             </div>
-            <div className="flex gap-3 items-center my-3">
-              <div className="flex items-center gap-1 w-full pr-20">
-                <FontAwesomeIcon
-                  icon={faFolder}
-                  className="w-4 h-4 mt-1 drop-shadow"
-                  style={{ color: collection?.color }}
-                />
-                <p className="text-black dark:text-white truncate capitalize">
-                  {collection?.name}
-                </p>
-              </div>
-            </div>
-            <div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-gray-300">
+            <Link
+              href={`/collections/${link.collection.id}`}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
+            >
+              <FontAwesomeIcon
+                icon={faFolder}
+                className="w-4 h-4 mt-1 drop-shadow"
+                style={{ color: collection?.color }}
+              />
+              <p className="text-black dark:text-white truncate capitalize w-full">
+                {collection?.name}
+              </p>
+            </Link>
+            <Link
+              href={link.url}
+              target="_blank"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
+            >
               <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
               <p className="truncate w-full">{shortendURL}</p>
-            </div>
+            </Link>
             <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
               <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
               <p>{formattedDate}</p>
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 7ab3d52..8281939 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -166,7 +166,6 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
           <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`}
diff --git a/components/PublicPage/LinkCard.tsx b/components/PublicPage/LinkCard.tsx
index 5a20b34..2349f98 100644
--- a/components/PublicPage/LinkCard.tsx
+++ b/components/PublicPage/LinkCard.tsx
@@ -26,7 +26,7 @@ export default function LinkCard({ link, count }: Props) {
 
   return (
     <a href={link.url} target="_blank" rel="noreferrer" className="rounded-3xl">
-      <div className="bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-md sm:hover:shadow-none duration-100 rounded-3xl cursor-pointer p-5 flex items-start relative gap-5 sm:gap-10 group/item">
+      <div className="border border-solid border-sky-100 bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-md sm:hover:shadow-none duration-100 rounded-3xl cursor-pointer p-5 flex items-start relative gap-5 sm:gap-10 group/item">
         {url && (
           <>
             <Image
diff --git a/package.json b/package.json
index 9256da6..6113639 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "csstype": "^3.1.2",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.9",
+    "framer-motion": "^10.16.4",
     "jsdom": "^22.1.0",
     "next": "13.4.12",
     "next-auth": "^4.22.1",
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 2dd31cb..4fccd00 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -50,7 +50,7 @@ export default function Index() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
+        <div className="border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
           <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
             {activeCollection && (
               <div className="flex gap-3 items-center">
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index 25b6683..78eb2a1 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -4,10 +4,25 @@ import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
 import { PublicCollectionIncludingLinks } from "@/types/global";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
+import { motion, Variants } from "framer-motion";
+
+const cardVariants: Variants = {
+  offscreen: {
+    y: 50,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
 
 export default function PublicCollections() {
   const router = useRouter();
-  const hasReachedBottom = useDetectPageBottom();
+  const { reachedBottom, setReachedBottom } = useDetectPageBottom();
 
   const [data, setData] = useState<PublicCollectionIncludingLinks>();
 
@@ -33,19 +48,21 @@ export default function PublicCollections() {
   }, []);
 
   useEffect(() => {
-    if (hasReachedBottom && router.query.id) {
+    if (reachedBottom && router.query.id) {
       getPublicCollectionData(
         Number(router.query.id),
         data as PublicCollectionIncludingLinks,
         setData
       );
     }
-  }, [hasReachedBottom]);
+
+    setReachedBottom(false);
+  }, [reachedBottom]);
 
   return data ? (
     <div className="max-w-4xl mx-auto p-5 bg">
       <div
-        className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
+        className={`border border-solid border-sky-100 text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
       >
         <p className="text-5xl text-black mb-5 capitalize">{data.name}</p>
 
@@ -59,7 +76,18 @@ export default function PublicCollections() {
 
       <div className="flex flex-col gap-5 my-8">
         {data?.links?.map((e, i) => {
-          return <LinkCard key={i} link={e} count={i} />;
+          return (
+            <motion.div
+              key={i}
+              initial="offscreen"
+              whileInView="onscreen"
+              viewport={{ once: true, amount: 0.8 }}
+            >
+              <motion.div variants={cardVariants}>
+                <LinkCard link={e} count={i} />
+              </motion.div>
+            </motion.div>
+          );
         })}
       </div>
 
diff --git a/styles/globals.css b/styles/globals.css
index 41dcd6e..c85afa2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -12,7 +12,7 @@
 }
 
 ::selection {
-  background-color: #0ea5e9;
+  background-color: #0ea4e93c;
   color: white;
 }
 
diff --git a/yarn.lock b/yarn.lock
index 71a70f1..78896a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -663,6 +663,18 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
   integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
@@ -2738,6 +2750,15 @@ fraction.js@^4.2.0:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
+framer-motion@^10.16.4:
+  version "10.16.4"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8"
+  integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"