diff --git a/components/LinkViews/Layouts/MasonryView.tsx b/components/LinkViews/Layouts/MasonryView.tsx
new file mode 100644
index 0000000..743dcd4
--- /dev/null
+++ b/components/LinkViews/Layouts/MasonryView.tsx
@@ -0,0 +1,43 @@
+import LinkCard from "@/components/LinkViews/LinkCard";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { GridLoader } from "react-spinners";
+import Masonry from "react-masonry-css";
+
+export default function MasonryView({
+  links,
+  editMode,
+  isLoading,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+}) {
+  return (
+    <Masonry
+      breakpointCols={4}
+      columnClassName="!w-full flex flex-col gap-5"
+      className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5"
+    >
+      {links.map((e, i) => {
+        return (
+          <LinkCard
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
+      })}
+
+      {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )}
+    </Masonry>
+  );
+}
diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx
index 9299442..0ab4eee 100644
--- a/components/LinkViews/LinkCard.tsx
+++ b/components/LinkViews/LinkCard.tsx
@@ -30,6 +30,7 @@ type Props = {
 };
 
 export default function LinkCard({ link, flipDropdown, editMode }: Props) {
+  const viewMode = localStorage.getItem("viewMode") || "card";
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
 
@@ -132,32 +133,36 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
           !editMode && window.open(generateLinkHref(link, account), "_blank")
         }
       >
-        <div className="relative rounded-t-2xl h-40 overflow-hidden">
-          {previewAvailable(link) ? (
-            <Image
-              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-              width={1280}
-              height={720}
-              alt=""
-              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-              style={{ filter: "blur(2px)" }}
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          ) : link.preview === "unavailable" ? (
-            <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
-          ) : (
-            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-          )}
-          <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
-            <LinkIcon link={link} />
-          </div>
-        </div>
+        {viewMode === "masonry" && !previewAvailable(link) ? null : (
+          <>
+            <div className="relative rounded-t-2xl h-40 overflow-hidden">
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+                  style={{ filter: "blur(2px)" }}
+                  draggable="false"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? (
+                <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+              ) : (
+                <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+              )}
+              <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
+                <LinkIcon link={link} />
+              </div>
+            </div>
 
-        <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+            <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+          </>
+        )}
 
         <div className="p-3 mt-1">
           <p className="truncate w-full pr-8 text-primary">
@@ -229,7 +234,11 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       <LinkActions
         link={link}
         collection={collection}
-        position="top-[10.75rem] right-3"
+        position={
+          !previewAvailable(link) && viewMode === "masonry"
+            ? "top-[.75rem] right-3"
+            : "top-[10.75rem] right-3"
+        }
         toggleShowInfo={() => setShowInfo(!showInfo)}
         linkInfo={showInfo}
         flipDropdown={flipDropdown}
diff --git a/components/ViewDropdown.tsx b/components/ViewDropdown.tsx
index 5ab821e..ec4fb8c 100644
--- a/components/ViewDropdown.tsx
+++ b/components/ViewDropdown.tsx
@@ -35,6 +35,17 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
         <i className="bi-grid w-4 h-4 text-neutral"></i>
       </button>
 
+      <button
+        onClick={(e) => onChangeViewMode(e, ViewMode.Masonry)}
+        className={`btn btn-square btn-sm btn-ghost ${
+          viewMode == ViewMode.Masonry
+            ? "bg-primary/20 hover:bg-primary/20"
+            : "hover:bg-neutral/20"
+        }`}
+      >
+        <i className="bi bi-columns-gap w-4 h-4 text-neutral"></i>
+      </button>
+
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.List)}
         className={`btn btn-square btn-sm btn-ghost ${
diff --git a/package.json b/package.json
index a08ae19..cd6c826 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-image-file-resizer": "^0.4.8",
+    "react-masonry-css": "^1.0.16",
     "react-select": "^5.7.4",
     "react-spinners": "^0.13.8",
     "socks-proxy-agent": "^8.0.2",
diff --git a/pages/api/v1/auth/[...nextauth].ts b/pages/api/v1/auth/[...nextauth].ts
index 5935d83..c8ca51f 100644
--- a/pages/api/v1/auth/[...nextauth].ts
+++ b/pages/api/v1/auth/[...nextauth].ts
@@ -98,19 +98,19 @@ if (
         const user = await prisma.user.findFirst({
           where: emailEnabled
             ? {
-              OR: [
-                {
-                  username: username.toLowerCase(),
-                },
-                {
-                  email: username?.toLowerCase(),
-                },
-              ],
-              emailVerified: { not: null },
-            }
+                OR: [
+                  {
+                    username: username.toLowerCase(),
+                  },
+                  {
+                    email: username?.toLowerCase(),
+                  },
+                ],
+                emailVerified: { not: null },
+              }
             : {
-              username: username.toLowerCase(),
-            },
+                username: username.toLowerCase(),
+              },
         });
 
         let passwordMatches: boolean = false;
@@ -242,27 +242,25 @@ if (process.env.NEXT_PUBLIC_AUTH0_ENABLED === "true") {
 
 // Authelia
 if (process.env.NEXT_PUBLIC_AUTHELIA_ENABLED === "true") {
-  providers.push(
-    {
-      id: "authelia",
-      name: "Authelia",
-      type: "oauth",
-      clientId: process.env.AUTHELIA_CLIENT_ID!,
-      clientSecret: process.env.AUTHELIA_CLIENT_SECRET!,
-      wellKnown: process.env.AUTHELIA_WELLKNOWN_URL!,
-      authorization: { params: { scope: "openid email profile" } },
-      idToken: true,
-      checks: ["pkce", "state"],
-      profile(profile) {
-        return {
-          id: profile.sub,
-          name: profile.name,
-          email: profile.email,
-          username: profile.preferred_username,
-        }
-      },
-    }
-  );
+  providers.push({
+    id: "authelia",
+    name: "Authelia",
+    type: "oauth",
+    clientId: process.env.AUTHELIA_CLIENT_ID!,
+    clientSecret: process.env.AUTHELIA_CLIENT_SECRET!,
+    wellKnown: process.env.AUTHELIA_WELLKNOWN_URL!,
+    authorization: { params: { scope: "openid email profile" } },
+    idToken: true,
+    checks: ["pkce", "state"],
+    profile(profile) {
+      return {
+        id: profile.sub,
+        name: profile.name,
+        email: profile.email,
+        username: profile.preferred_username,
+      };
+    },
+  });
 
   const _linkAccount = adapter.linkAccount;
   adapter.linkAccount = (account) => {
diff --git a/pages/api/v1/logins/index.ts b/pages/api/v1/logins/index.ts
index bdf6588..d2ac875 100644
--- a/pages/api/v1/logins/index.ts
+++ b/pages/api/v1/logins/index.ts
@@ -401,7 +401,7 @@ export function getLogins() {
   return {
     credentialsEnabled:
       process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" ||
-        process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
+      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
         ? "true"
         : "false",
     emailEnabled:
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 92456a7..e1ba2b8 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -28,6 +28,7 @@ import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import toast from "react-hot-toast";
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 
 export default function Index() {
   const { settings } = useLocalSettingsStore();
@@ -110,6 +111,7 @@ export default function Index() {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
   };
 
   // @ts-ignore
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 6fabf33..04882f1 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -16,6 +16,7 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import ViewDropdown from "@/components/ViewDropdown";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 
 export default function Dashboard() {
@@ -102,6 +103,7 @@ export default function Dashboard() {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
   };
 
   // @ts-ignore
diff --git a/pages/links/index.tsx b/pages/links/index.tsx
index b6b67c3..2b1e67b 100644
--- a/pages/links/index.tsx
+++ b/pages/links/index.tsx
@@ -15,6 +15,7 @@ import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import { useRouter } from "next/router";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 
 export default function Links() {
   const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@@ -74,6 +75,7 @@ export default function Links() {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
   };
 
   // @ts-ignore
diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx
index ecdec4e..f201844 100644
--- a/pages/links/pinned.tsx
+++ b/pages/links/pinned.tsx
@@ -14,6 +14,7 @@ import useCollectivePermissions from "@/hooks/useCollectivePermissions";
 import toast from "react-hot-toast";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import { useRouter } from "next/router";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 
 export default function PinnedLinks() {
   const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@@ -72,6 +73,7 @@ export default function PinnedLinks() {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
   };
 
   // @ts-ignore
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index d918086..c72f0a5 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -24,6 +24,7 @@ import EditCollectionSharingModal from "@/components/ModalContent/EditCollection
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 
 const cardVariants: Variants = {
@@ -109,6 +110,7 @@ export default function PublicCollections() {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
   };
 
   // @ts-ignore
@@ -118,9 +120,8 @@ export default function PublicCollections() {
     <div
       className="h-96"
       style={{
-        backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
-          settings.theme === "dark" ? "#262626" : "#f3f4f6"
-        } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+        backgroundImage: `linear-gradient(${collection?.color}30 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
+          } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
       }}
     >
       {collection ? (
diff --git a/pages/search.tsx b/pages/search.tsx
index 1f540c4..9114f41 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -16,6 +16,7 @@ import useCollectivePermissions from "@/hooks/useCollectivePermissions";
 import toast from "react-hot-toast";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 
 export default function Search() {
   const { links, selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
@@ -93,6 +94,7 @@ export default function Search() {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
   };
 
   // @ts-ignore
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 34d172f..3c8b7c4 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -15,6 +15,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 
 export default function Index() {
   const router = useRouter();
@@ -151,6 +152,7 @@ export default function Index() {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
+    [ViewMode.Masonry]: MasonryView,
   };
 
   // @ts-ignore
diff --git a/types/enviornment.d.ts b/types/enviornment.d.ts
index e8c5a7c..3dccc63 100644
--- a/types/enviornment.d.ts
+++ b/types/enviornment.d.ts
@@ -418,4 +418,4 @@ declare global {
   }
 }
 
-export { };
+export {};
diff --git a/types/global.ts b/types/global.ts
index b347659..cc171f2 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -68,6 +68,7 @@ export enum ViewMode {
   Card = "card",
   Grid = "grid",
   List = "list",
+  Masonry = "masonry",
 }
 
 export enum Sort {
diff --git a/yarn.lock b/yarn.lock
index d016ae9..14c49ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5165,6 +5165,11 @@ react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-masonry-css@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
+  integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
+
 react-redux@^7.0.3:
   version "7.2.9"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"