diff --git a/apps/web/components/ConfirmationModal.tsx b/apps/web/components/ConfirmationModal.tsx
index 20bc1f81..72737d19 100644
--- a/apps/web/components/ConfirmationModal.tsx
+++ b/apps/web/components/ConfirmationModal.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
 import { Button } from "@/components/ui/button";
 import { useTranslation } from "next-i18next";
 import Modal from "./Modal";
+import { Separator } from "./ui/separator";
 
 type Props = {
   toggleModal: Function;
@@ -24,7 +25,7 @@ export default function ConfirmationModal({
   return (
     <Modal toggleModal={toggleModal} className={className}>
       <p className="text-xl font-thin">{title}</p>
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="mb-3 mt-1" />
       {children}
       <div className="w-full flex items-center justify-end gap-2 mt-3">
         <Button
diff --git a/apps/web/components/DashboardLinks.tsx b/apps/web/components/DashboardLinks.tsx
index 675e45bd..cbd1033f 100644
--- a/apps/web/components/DashboardLinks.tsx
+++ b/apps/web/components/DashboardLinks.tsx
@@ -24,6 +24,7 @@ import LinkIcon from "./LinkViews/LinkComponents/LinkIcon";
 import LinkFormats from "./LinkViews/LinkComponents/LinkFormats";
 import LinkTypeBadge from "./LinkViews/LinkComponents/LinkTypeBadge";
 import LinkPin from "./LinkViews/LinkComponents/LinkPin";
+import { Separator } from "./ui/separator";
 
 export function DashboardLinks({
   links,
@@ -174,7 +175,7 @@ export function Card({ link, editMode }: Props) {
                   </div>
                 )}
             </div>
-            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
+            <Separator />
           </div>
         )}
 
@@ -191,7 +192,7 @@ export function Card({ link, editMode }: Props) {
 
           {(show.collection || show.date) && (
             <div>
-              <hr className="divider mt-0 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+              <Separator className="mb-1" />
 
               <div className="flex justify-between items-center text-xs text-neutral px-3 pb-1 gap-2">
                 {show.collection && !isPublicRoute && (
diff --git a/apps/web/components/HighlightDrawer.tsx b/apps/web/components/HighlightDrawer.tsx
index adf4b7f3..924196e3 100644
--- a/apps/web/components/HighlightDrawer.tsx
+++ b/apps/web/components/HighlightDrawer.tsx
@@ -9,6 +9,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import { Button } from "./ui/button";
+import { Separator } from "./ui/separator";
 
 type Props = {
   onClose: Function;
@@ -28,7 +29,8 @@ const HighlightDrawer = ({ onClose }: Props) => {
       direction="left"
     >
       <div>
-        <h2 className="text-lg font-semibold mb-5">{t("notes_highlights")}</h2>
+        <h2 className="text-lg font-semibold">{t("notes_highlights")}</h2>
+        <Separator className="my-5" />
         {data && data.length > 0 ? (
           data.map((highlight) => {
             const formattedDate = new Date(highlight.createdAt).toLocaleString(
diff --git a/apps/web/components/LinkDetails.tsx b/apps/web/components/LinkDetails.tsx
index c3a15715..f737ea4e 100644
--- a/apps/web/components/LinkDetails.tsx
+++ b/apps/web/components/LinkDetails.tsx
@@ -36,6 +36,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { Separator } from "./ui/separator";
 
 type Props = {
   className?: string;
@@ -521,7 +522,7 @@ export default function LinkDetails({
                       link={link}
                       downloadable={true}
                     />
-                    <hr className="m-3 border-t border-neutral-content" />
+                    <Separator className="my-3" />
                   </>
                 ) : undefined}
 
@@ -538,7 +539,7 @@ export default function LinkDetails({
                       link={link}
                       downloadable={true}
                     />
-                    <hr className="m-3 border-t border-neutral-content" />
+                    <Separator className="my-3" />
                   </>
                 ) : undefined}
 
@@ -551,7 +552,7 @@ export default function LinkDetails({
                       link={link}
                       downloadable={true}
                     />
-                    <hr className="m-3 border-t border-neutral-content" />
+                    <Separator className="my-3" />
                   </>
                 ) : undefined}
 
@@ -563,7 +564,7 @@ export default function LinkDetails({
                       format={ArchivedFormat.readability}
                       link={link}
                     />
-                    <hr className="m-3 border-t border-neutral-content" />
+                    <Separator className="my-3" />
                   </>
                 ) : undefined}
 
diff --git a/apps/web/components/LinkViews/LinkComponents/LinkCard.tsx b/apps/web/components/LinkViews/LinkComponents/LinkCard.tsx
index 355af99d..03c563e1 100644
--- a/apps/web/components/LinkViews/LinkComponents/LinkCard.tsx
+++ b/apps/web/components/LinkViews/LinkComponents/LinkCard.tsx
@@ -28,6 +28,7 @@ import useLocalSettingsStore from "@/store/localSettings";
 import LinkPin from "./LinkPin";
 import LinkFormats from "./LinkFormats";
 import openLink from "@/lib/client/openLink";
+import { Separator } from "@/components/ui/separator";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -211,7 +212,7 @@ export default function LinkCard({ link, columns, editMode }: Props) {
                   </div>
                 )}
             </div>
-            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
+            <Separator />
           </div>
         )}
 
@@ -228,7 +229,7 @@ export default function LinkCard({ link, columns, editMode }: Props) {
 
           {(show.collection || show.date) && (
             <div>
-              <hr className="divider mt-0 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+              <Separator className="mb-1" />
 
               <div className="flex justify-between items-center text-xs text-neutral px-3 pb-1 gap-2">
                 {show.collection && !isPublicRoute && (
diff --git a/apps/web/components/LinkViews/LinkComponents/LinkMasonry.tsx b/apps/web/components/LinkViews/LinkComponents/LinkMasonry.tsx
index f52a6977..0944c1d3 100644
--- a/apps/web/components/LinkViews/LinkComponents/LinkMasonry.tsx
+++ b/apps/web/components/LinkViews/LinkComponents/LinkMasonry.tsx
@@ -31,6 +31,7 @@ import { useRouter } from "next/router";
 import LinkFormats from "./LinkFormats";
 import openLink from "@/lib/client/openLink";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -200,7 +201,7 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
               )}
             </div>
 
-            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
+            <Separator />
           </div>
         )}
 
@@ -247,7 +248,7 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
 
         {(show.collection || show.date) && (
           <div>
-            <hr className="divider mt-0 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+            <Separator className="mb-1" />
 
             <div className="flex flex-wrap justify-between items-center text-xs text-neutral px-3 pb-1 w-full gap-x-2">
               {!isPublicRoute && show.collection && (
diff --git a/apps/web/components/ModalContent/BulkDeleteLinksModal.tsx b/apps/web/components/ModalContent/BulkDeleteLinksModal.tsx
index 9c8dd8a8..29e834c3 100644
--- a/apps/web/components/ModalContent/BulkDeleteLinksModal.tsx
+++ b/apps/web/components/ModalContent/BulkDeleteLinksModal.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { useTranslation } from "next-i18next";
 import { useBulkDeleteLinks } from "@linkwarden/router/links";
 import toast from "react-hot-toast";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -45,7 +46,7 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
           : t("delete_links", { count: selectedLinks.length })}
       </p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         <p>
diff --git a/apps/web/components/ModalContent/BulkEditLinksModal.tsx b/apps/web/components/ModalContent/BulkEditLinksModal.tsx
index ac4fb670..984646b3 100644
--- a/apps/web/components/ModalContent/BulkEditLinksModal.tsx
+++ b/apps/web/components/ModalContent/BulkEditLinksModal.tsx
@@ -8,6 +8,7 @@ import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { useBulkEditLinks } from "@linkwarden/router/links";
 import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -70,7 +71,8 @@ export default function BulkEditLinksModal({ onClose }: Props) {
           ? t("edit_link")
           : t("edit_links", { count: selectedLinks.length })}
       </p>
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
+
       <div className="mt-5">
         <div className="grid sm:grid-cols-2 gap-3">
           <div>
diff --git a/apps/web/components/ModalContent/DeleteCollectionModal.tsx b/apps/web/components/ModalContent/DeleteCollectionModal.tsx
index 88fffd75..489b74d7 100644
--- a/apps/web/components/ModalContent/DeleteCollectionModal.tsx
+++ b/apps/web/components/ModalContent/DeleteCollectionModal.tsx
@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { useTranslation } from "next-i18next";
 import { useDeleteCollection } from "@linkwarden/router/collections";
 import toast from "react-hot-toast";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -63,7 +64,7 @@ export default function DeleteCollectionModal({
         {permissions === true ? t("delete_collection") : t("leave_collection")}
       </p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         {permissions === true ? (
diff --git a/apps/web/components/ModalContent/DeleteLinkModal.tsx b/apps/web/components/ModalContent/DeleteLinkModal.tsx
index 62187d62..5ba8977e 100644
--- a/apps/web/components/ModalContent/DeleteLinkModal.tsx
+++ b/apps/web/components/ModalContent/DeleteLinkModal.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { useTranslation } from "next-i18next";
 import { useDeleteLink } from "@linkwarden/router/links";
 import toast from "react-hot-toast";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -51,7 +52,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">{t("delete_link")}</p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         <p>{t("link_deletion_confirmation_message")}</p>
diff --git a/apps/web/components/ModalContent/DeleteRssSubscriptionModal.tsx b/apps/web/components/ModalContent/DeleteRssSubscriptionModal.tsx
index 42323aca..5d1985e5 100644
--- a/apps/web/components/ModalContent/DeleteRssSubscriptionModal.tsx
+++ b/apps/web/components/ModalContent/DeleteRssSubscriptionModal.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from "next-i18next";
 import toast from "react-hot-toast";
 import { RssSubscription } from "@linkwarden/prisma/client";
 import { useDeleteRssSubscription } from "@linkwarden/router/rss";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -45,7 +46,7 @@ export default function DeleteRssSubscriptionModal({
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">{t("delete_link")}</p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         <p>{t("rss_deletion_confirmation")}</p>
diff --git a/apps/web/components/ModalContent/DeleteUserModal.tsx b/apps/web/components/ModalContent/DeleteUserModal.tsx
index 1128be7e..1a0de921 100644
--- a/apps/web/components/ModalContent/DeleteUserModal.tsx
+++ b/apps/web/components/ModalContent/DeleteUserModal.tsx
@@ -5,6 +5,7 @@ import { useDeleteUser } from "@linkwarden/router/users";
 import { useState } from "react";
 import { useSession } from "next-auth/react";
 import { useConfig } from "@linkwarden/router/config";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -44,7 +45,7 @@ export default function DeleteUserModal({ onClose, userId }: Props) {
         {isAdmin ? t("delete_user") : t("remove_user")}
       </p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         <p>{t("confirm_user_deletion")}</p>
diff --git a/apps/web/components/ModalContent/EditCollectionModal.tsx b/apps/web/components/ModalContent/EditCollectionModal.tsx
index 45b5a7be..e011e7b2 100644
--- a/apps/web/components/ModalContent/EditCollectionModal.tsx
+++ b/apps/web/components/ModalContent/EditCollectionModal.tsx
@@ -9,6 +9,7 @@ import IconPicker from "../IconPicker";
 import { IconWeight } from "@phosphor-icons/react";
 import oklchVariableToHex from "@/lib/client/oklchVariableToHex";
 import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -55,7 +56,7 @@ export default function EditCollectionModal({
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">{t("edit_collection_info")}</p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         <div className="flex flex-col gap-3">
diff --git a/apps/web/components/ModalContent/EditCollectionSharingModal.tsx b/apps/web/components/ModalContent/EditCollectionSharingModal.tsx
index 55b2caee..bb7131f4 100644
--- a/apps/web/components/ModalContent/EditCollectionSharingModal.tsx
+++ b/apps/web/components/ModalContent/EditCollectionSharingModal.tsx
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { User } from "@linkwarden/prisma/client";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -113,7 +114,7 @@ export default function EditCollectionSharingModal({
           : t("team")}
       </p>
 
-      <div className="divider mb-3 mt-1" />
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         {permissions === true && !isPublicRoute && (
@@ -154,7 +155,7 @@ export default function EditCollectionSharingModal({
         )}
 
         {permissions === true && !isPublicRoute && (
-          <div className="divider my-3" />
+          <Separator className="my-3" />
         )}
 
         {permissions === true && !isPublicRoute && (
@@ -233,7 +234,7 @@ export default function EditCollectionSharingModal({
                 </div>
               </div>
 
-              <div className="divider my-0 last:hidden h-[1px]"></div>
+              <Separator />
 
               {collection.members
                 .sort((a, b) => (a.userId as number) - (b.userId as number))
@@ -261,98 +262,103 @@ export default function EditCollectionSharingModal({
                   };
 
                   return (
-                    <div
-                      key={e.userId}
-                      className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between border-none"
-                    >
-                      <div className="flex items-center">
-                        <ProfilePhoto
-                          src={e.user.image ? e.user.image : undefined}
-                          name={e.user.name}
-                        />
-                        <div className="ml-2">
-                          <p className="text-sm font-semibold">{e.user.name}</p>
-                          <p className="text-xs text-neutral">
-                            @{e.user.username}
-                          </p>
+                    <>
+                      <div
+                        key={e.userId}
+                        className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between border-none"
+                      >
+                        <div className="flex items-center">
+                          <ProfilePhoto
+                            src={e.user.image ? e.user.image : undefined}
+                            name={e.user.name}
+                          />
+                          <div className="ml-2">
+                            <p className="text-sm font-semibold">
+                              {e.user.name}
+                            </p>
+                            <p className="text-xs text-neutral">
+                              @{e.user.username}
+                            </p>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                          {permissions === true && !isPublicRoute ? (
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" className="h-8">
+                                  {t(roleKey)} <i className="bi-chevron-down" />
+                                </Button>
+                              </DropdownMenuTrigger>
+
+                              <DropdownMenuContent sideOffset={4} align="end">
+                                <DropdownMenuRadioGroup
+                                  value={roleKey}
+                                  onValueChange={handleRoleChange}
+                                >
+                                  <DropdownMenuRadioItem value="viewer">
+                                    <div>
+                                      <p className="font-bold whitespace-nowrap">
+                                        {t("viewer")}
+                                      </p>
+                                      <p className="whitespace-nowrap">
+                                        {t("viewer_desc")}
+                                      </p>
+                                    </div>
+                                  </DropdownMenuRadioItem>
+
+                                  <DropdownMenuRadioItem value="contributor">
+                                    <div>
+                                      <p className="font-bold whitespace-nowrap">
+                                        {t("contributor")}
+                                      </p>
+                                      <p className="whitespace-nowrap">
+                                        {t("contributor_desc")}
+                                      </p>
+                                    </div>
+                                  </DropdownMenuRadioItem>
+
+                                  <DropdownMenuRadioItem value="admin">
+                                    <div>
+                                      <p className="font-bold whitespace-nowrap">
+                                        {t("admin")}
+                                      </p>
+                                      <p className="whitespace-nowrap">
+                                        {t("admin_desc")}
+                                      </p>
+                                    </div>
+                                  </DropdownMenuRadioItem>
+                                </DropdownMenuRadioGroup>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          ) : (
+                            <p className="text-sm text-neutral">{t(roleKey)}</p>
+                          )}
+
+                          {permissions === true && !isPublicRoute && (
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="text-neutral hover:text-red-500"
+                              onClick={() => {
+                                setCollection({
+                                  ...collection,
+                                  members: collection.members.filter(
+                                    (member) => member.userId !== e.userId
+                                  ),
+                                });
+                              }}
+                            >
+                              <i
+                                className="bi-x text-xl"
+                                title={t("remove_member")}
+                              />
+                            </Button>
+                          )}
                         </div>
                       </div>
-
-                      <div className="flex items-center gap-2">
-                        {permissions === true && !isPublicRoute ? (
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button variant="ghost" className="h-8">
-                                {t(roleKey)} <i className="bi-chevron-down" />
-                              </Button>
-                            </DropdownMenuTrigger>
-
-                            <DropdownMenuContent sideOffset={4} align="end">
-                              <DropdownMenuRadioGroup
-                                value={roleKey}
-                                onValueChange={handleRoleChange}
-                              >
-                                <DropdownMenuRadioItem value="viewer">
-                                  <div>
-                                    <p className="font-bold whitespace-nowrap">
-                                      {t("viewer")}
-                                    </p>
-                                    <p className="whitespace-nowrap">
-                                      {t("viewer_desc")}
-                                    </p>
-                                  </div>
-                                </DropdownMenuRadioItem>
-
-                                <DropdownMenuRadioItem value="contributor">
-                                  <div>
-                                    <p className="font-bold whitespace-nowrap">
-                                      {t("contributor")}
-                                    </p>
-                                    <p className="whitespace-nowrap">
-                                      {t("contributor_desc")}
-                                    </p>
-                                  </div>
-                                </DropdownMenuRadioItem>
-
-                                <DropdownMenuRadioItem value="admin">
-                                  <div>
-                                    <p className="font-bold whitespace-nowrap">
-                                      {t("admin")}
-                                    </p>
-                                    <p className="whitespace-nowrap">
-                                      {t("admin_desc")}
-                                    </p>
-                                  </div>
-                                </DropdownMenuRadioItem>
-                              </DropdownMenuRadioGroup>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        ) : (
-                          <p className="text-sm text-neutral">{t(roleKey)}</p>
-                        )}
-
-                        {permissions === true && !isPublicRoute && (
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="text-neutral hover:text-red-500"
-                            onClick={() => {
-                              setCollection({
-                                ...collection,
-                                members: collection.members.filter(
-                                  (member) => member.userId !== e.userId
-                                ),
-                              });
-                            }}
-                          >
-                            <i
-                              className="bi-x text-xl"
-                              title={t("remove_member")}
-                            />
-                          </Button>
-                        )}
-                      </div>
-                    </div>
+                      <Separator className="last:hidden" />
+                    </>
                   );
                 })}
             </div>
diff --git a/apps/web/components/ModalContent/EmailChangeVerificationModal.tsx b/apps/web/components/ModalContent/EmailChangeVerificationModal.tsx
index c712cacf..6e181138 100644
--- a/apps/web/components/ModalContent/EmailChangeVerificationModal.tsx
+++ b/apps/web/components/ModalContent/EmailChangeVerificationModal.tsx
@@ -3,6 +3,7 @@ import TextInput from "@/components/TextInput";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -24,7 +25,7 @@ export default function EmailChangeVerificationModal({
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">{t("confirm_password")}</p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-5">
         <p>
diff --git a/apps/web/components/ModalContent/InviteModal.tsx b/apps/web/components/ModalContent/InviteModal.tsx
index ec5d262f..05ed3551 100644
--- a/apps/web/components/ModalContent/InviteModal.tsx
+++ b/apps/web/components/ModalContent/InviteModal.tsx
@@ -7,6 +7,7 @@ import { useAddUser } from "@linkwarden/router/users";
 import Link from "next/link";
 import { signIn } from "next-auth/react";
 import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -69,7 +70,9 @@ export default function InviteModal({ onClose }: Props) {
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">{t("invite_user")}</p>
-      <div className="divider mb-3 mt-1"></div>
+
+      <Separator className="my-3" />
+
       <p className="mb-3">{t("invite_user_desc")}</p>
       <form onSubmit={submit}>
         {emailEnabled ? (
diff --git a/apps/web/components/ModalContent/NewCollectionModal.tsx b/apps/web/components/ModalContent/NewCollectionModal.tsx
index c5802a1f..e2941875 100644
--- a/apps/web/components/ModalContent/NewCollectionModal.tsx
+++ b/apps/web/components/ModalContent/NewCollectionModal.tsx
@@ -10,6 +10,7 @@ import IconPicker from "../IconPicker";
 import { IconWeight } from "@phosphor-icons/react";
 import oklchVariableToHex from "@/lib/client/oklchVariableToHex";
 import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -72,7 +73,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
         <p className="text-xl font-thin">{t("create_new_collection")}</p>
       )}
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         <div className="flex flex-col gap-3">
diff --git a/apps/web/components/ModalContent/NewLinkModal.tsx b/apps/web/components/ModalContent/NewLinkModal.tsx
index 48c11ccf..62c50826 100644
--- a/apps/web/components/ModalContent/NewLinkModal.tsx
+++ b/apps/web/components/ModalContent/NewLinkModal.tsx
@@ -11,6 +11,7 @@ import { useAddLink } from "@linkwarden/router/links";
 import toast from "react-hot-toast";
 import { PostLinkSchemaType } from "@linkwarden/lib/schemaValidation";
 import { Button } from "@/components/ui/button";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -95,7 +96,9 @@ export default function NewLinkModal({ onClose }: Props) {
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">{t("create_new_link")}</p>
-      <div className="divider mb-3 mt-1" />
+
+      <Separator className="my-3" />
+
       <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
         <div className="sm:col-span-3 col-span-5">
           <p className="mb-2">{t("link")}</p>
diff --git a/apps/web/components/ModalContent/NewRssSubscriptionModal.tsx b/apps/web/components/ModalContent/NewRssSubscriptionModal.tsx
index 05992c11..c0267e98 100644
--- a/apps/web/components/ModalContent/NewRssSubscriptionModal.tsx
+++ b/apps/web/components/ModalContent/NewRssSubscriptionModal.tsx
@@ -6,6 +6,7 @@ import toast from "react-hot-toast";
 import TextInput from "../TextInput";
 import CollectionSelection from "../InputSelect/CollectionSelection";
 import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -57,7 +58,9 @@ export default function NewRssSubscriptionModal({ onClose }: Props) {
     <Modal toggleModal={onClose}>
       <>
         <p className="text-xl font-thin">{t("create_rss_subscription")}</p>
-        <div className="divider mb-3 mt-1"></div>
+
+        <Separator className="my-3" />
+
         <div className="flex sm:flex-row flex-col gap-3 items-center">
           <div className="w-full">
             <label>{t("name")}</label>
diff --git a/apps/web/components/ModalContent/NewTokenModal.tsx b/apps/web/components/ModalContent/NewTokenModal.tsx
index bf1c072a..3e0ff69a 100644
--- a/apps/web/components/ModalContent/NewTokenModal.tsx
+++ b/apps/web/components/ModalContent/NewTokenModal.tsx
@@ -14,6 +14,7 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
 } from "@/components/ui/dropdown-menu";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -87,7 +88,7 @@ export default function NewTokenModal({ onClose }: Props) {
         <>
           <p className="text-xl font-thin">{t("create_access_token")}</p>
 
-          <div className="divider mb-3 mt-1"></div>
+          <Separator className="my-3" />
 
           <div className="flex sm:flex-row flex-col gap-2 items-center">
             <div className="w-full">
diff --git a/apps/web/components/ModalContent/NewUserModal.tsx b/apps/web/components/ModalContent/NewUserModal.tsx
index 8e3d27c4..024d8336 100644
--- a/apps/web/components/ModalContent/NewUserModal.tsx
+++ b/apps/web/components/ModalContent/NewUserModal.tsx
@@ -5,6 +5,7 @@ import { FormEvent, useState } from "react";
 import { useTranslation, Trans } from "next-i18next";
 import { useAddUser } from "@linkwarden/router/users";
 import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -70,7 +71,7 @@ export default function NewUserModal({ onClose }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">{t("create_new_user")}</p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <form onSubmit={submit}>
         <div className="grid sm:grid-cols-2 gap-3">
diff --git a/apps/web/components/ModalContent/RevokeTokenModal.tsx b/apps/web/components/ModalContent/RevokeTokenModal.tsx
index 2722b72f..74b4ad23 100644
--- a/apps/web/components/ModalContent/RevokeTokenModal.tsx
+++ b/apps/web/components/ModalContent/RevokeTokenModal.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from "next-i18next";
 import { AccessToken } from "@linkwarden/prisma/client";
 import { useRevokeToken } from "@linkwarden/router/tokens";
 import toast from "react-hot-toast";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -42,7 +43,7 @@ export default function DeleteTokenModal({ onClose, activeToken }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">{t("revoke_token")}</p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         <p>{t("revoke_confirmation")}</p>
diff --git a/apps/web/components/ModalContent/SurveyModal.tsx b/apps/web/components/ModalContent/SurveyModal.tsx
index a1bca1b5..3ad2ee15 100644
--- a/apps/web/components/ModalContent/SurveyModal.tsx
+++ b/apps/web/components/ModalContent/SurveyModal.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Modal from "../Modal";
 import { Button } from "@/components/ui/button";
 import { useTranslation } from "next-i18next";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -17,7 +18,7 @@ export default function SurveyModal({ onClose, submit }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">{t("quick_survey")}</p>
 
-      <div className="divider mb-3 mt-1"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-4">
         <p>{t("how_did_you_discover_linkwarden")}</p>
diff --git a/apps/web/components/ModalContent/UploadFileModal.tsx b/apps/web/components/ModalContent/UploadFileModal.tsx
index 7f66fa76..53bff8af 100644
--- a/apps/web/components/ModalContent/UploadFileModal.tsx
+++ b/apps/web/components/ModalContent/UploadFileModal.tsx
@@ -12,6 +12,7 @@ import { useUploadFile } from "@linkwarden/router/links";
 import { PostLinkSchemaType } from "@linkwarden/lib/schemaValidation";
 import { useConfig } from "@linkwarden/router/config";
 import { Button } from "@/components/ui/button";
+import { Separator } from "../ui/separator";
 
 type Props = {
   onClose: Function;
@@ -99,7 +100,8 @@ export default function UploadFileModal({ onClose }: Props) {
       <div className="flex gap-2 items-start">
         <p className="text-xl font-thin">{t("upload_file")}</p>
       </div>
-      <div className="divider mb-3 mt-1" />
+
+      <Separator className="my-3" />
 
       <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
         <div className="sm:col-span-3 col-span-5">
diff --git a/apps/web/components/ui/Divider.tsx b/apps/web/components/ui/Divider.tsx
deleted file mode 100644
index b3b2f624..00000000
--- a/apps/web/components/ui/Divider.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-
-type Props = {
-  className?: string;
-  vertical?: boolean;
-};
-
-function Divider({ className, vertical = false }: Props) {
-  return vertical ? (
-    <hr className={clsx("border-neutral-content border-l h-full", className)} />
-  ) : (
-    <hr className={clsx("border-neutral-content border-t", className)} />
-  );
-}
-
-export default Divider;
diff --git a/apps/web/pages/admin.tsx b/apps/web/pages/admin.tsx
index c82a9e9c..6a63d61a 100644
--- a/apps/web/pages/admin.tsx
+++ b/apps/web/pages/admin.tsx
@@ -6,8 +6,8 @@ import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import UserListing from "@/components/UserListing";
 import { useUsers } from "@linkwarden/router/users";
-import Divider from "@/components/ui/Divider";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 
 interface User extends U {
   subscriptions: {
@@ -92,7 +92,7 @@ export default function Admin() {
         </div>
       </div>
 
-      <Divider className="my-3" />
+      <Separator className="my-3" />
 
       {searchQuery && filteredUsers && filteredUsers.length > 0 ? (
         <UserListing
diff --git a/apps/web/pages/auth/reset-password.tsx b/apps/web/pages/auth/reset-password.tsx
index 0b28e13e..cd7173c9 100644
--- a/apps/web/pages/auth/reset-password.tsx
+++ b/apps/web/pages/auth/reset-password.tsx
@@ -7,6 +7,7 @@ import { FormEvent, useState } from "react";
 import { toast } from "react-hot-toast";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
+import { Separator } from "@/components/ui/separator";
 
 interface FormData {
   password: string;
@@ -70,7 +71,7 @@ export default function ResetPassword() {
             {requestSent ? t("password_updated") : t("reset_password")}
           </p>
 
-          <div className="divider my-0"></div>
+          <Separator />
 
           {!requestSent ? (
             <>
diff --git a/apps/web/pages/collections/[id].tsx b/apps/web/pages/collections/[id].tsx
index 2447305a..4f2c1b9b 100644
--- a/apps/web/pages/collections/[id].tsx
+++ b/apps/web/pages/collections/[id].tsx
@@ -34,6 +34,7 @@ import {
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 
 export default function Index() {
   const { t } = useTranslation();
@@ -273,7 +274,7 @@ export default function Index() {
 
         {activeCollection?.description && <p>{activeCollection.description}</p>}
 
-        <div className="divider my-0" />
+        <Separator />
 
         {collections.some((e) => e.parentId === activeCollection?.id) && (
           <>
diff --git a/apps/web/pages/confirmation.tsx b/apps/web/pages/confirmation.tsx
index 08c4e614..a9b1a443 100644
--- a/apps/web/pages/confirmation.tsx
+++ b/apps/web/pages/confirmation.tsx
@@ -6,6 +6,7 @@ import toast from "react-hot-toast";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 
 export default function EmailConfirmaion() {
   const router = useRouter();
@@ -42,7 +43,7 @@ export default function EmailConfirmaion() {
           {t("check_your_email")}
         </p>
 
-        <div className="divider my-3"></div>
+        <Separator className="my-3" />
 
         {router.query.email && typeof router.query.email === "string" && (
           <p className="text-center font-bold mb-3 break-all">
diff --git a/apps/web/pages/forgot.tsx b/apps/web/pages/forgot.tsx
index 16c51fa8..459a2088 100644
--- a/apps/web/pages/forgot.tsx
+++ b/apps/web/pages/forgot.tsx
@@ -6,6 +6,7 @@ import { FormEvent, useState } from "react";
 import { toast } from "react-hot-toast";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
+import { Separator } from "@/components/ui/separator";
 
 interface FormData {
   email: string;
@@ -66,7 +67,7 @@ export default function Forgot() {
             {isEmailSent ? t("email_sent") : t("forgot_password")}
           </p>
 
-          <div className="divider my-0"></div>
+          <Separator />
 
           {!isEmailSent ? (
             <>
diff --git a/apps/web/pages/login.tsx b/apps/web/pages/login.tsx
index e2704cac..8cbdbf13 100644
--- a/apps/web/pages/login.tsx
+++ b/apps/web/pages/login.tsx
@@ -14,6 +14,7 @@ import { getToken } from "next-auth/jwt";
 import { prisma } from "@linkwarden/prisma";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
+import { Separator } from "@/components/ui/separator";
 
 interface FormData {
   username: string;
@@ -91,7 +92,8 @@ export default function Login({
           <p className="text-3xl text-black dark:text-white text-center font-extralight">
             {t("enter_credentials")}
           </p>
-          <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+
+          <Separator />
 
           {process.env.NEXT_PUBLIC_DEMO === "true" &&
             process.env.NEXT_PUBLIC_DEMO_USERNAME &&
@@ -205,7 +207,11 @@ export default function Login({
           </Button>
 
           {availableLogins.buttonAuths.length > 0 && (
-            <div className="divider my-1">{t("or_continue_with")}</div>
+            <div className="flex items-center gap-2">
+              <Separator className="my-1 flex-1 w-auto" />
+              <p className="whitespace-nowrap">{t("or_continue_with")}</p>
+              <Separator className="my-1 flex-1 w-auto" />
+            </div>
           )}
         </>
       );
diff --git a/apps/web/pages/member-onboarding.tsx b/apps/web/pages/member-onboarding.tsx
index 10e07a0a..45a64456 100644
--- a/apps/web/pages/member-onboarding.tsx
+++ b/apps/web/pages/member-onboarding.tsx
@@ -8,6 +8,7 @@ import { toast } from "react-hot-toast";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { Trans, useTranslation } from "next-i18next";
 import { useUpdateUser, useUser } from "@linkwarden/router/user";
+import { Separator } from "@/components/ui/separator";
 
 interface FormData {
   password: string;
@@ -70,7 +71,7 @@ export default function MemberOnboarding() {
             {t("invitation_accepted")}
           </p>
 
-          <div className="divider my-0"></div>
+          <Separator />
 
           <p
             style={{
diff --git a/apps/web/pages/public/collections/[id]/index.tsx b/apps/web/pages/public/collections/[id]/index.tsx
index 54115f27..72d6de71 100644
--- a/apps/web/pages/public/collections/[id]/index.tsx
+++ b/apps/web/pages/public/collections/[id]/index.tsx
@@ -30,6 +30,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useUser } from "@linkwarden/router/user";
+import { Separator } from "@/components/ui/separator";
 
 export default function PublicCollections() {
   const { t } = useTranslation();
@@ -228,7 +229,7 @@ export default function PublicCollections() {
             </div>
           </div>
 
-          <div className="divider mt-5 mb-0"></div>
+          <Separator className="mt-5" />
 
           <div className="flex mb-5 mt-10 flex-col gap-5">
             <LinkListOptions
diff --git a/apps/web/pages/register.tsx b/apps/web/pages/register.tsx
index 5dd4ef49..89e888ef 100644
--- a/apps/web/pages/register.tsx
+++ b/apps/web/pages/register.tsx
@@ -14,6 +14,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { i18n } from "next-i18next.config";
 import { Trans, useTranslation } from "next-i18next";
 import { useConfig } from "@linkwarden/router/config";
+import { Separator } from "@/components/ui/separator";
 
 type FormData = {
   name: string;
@@ -167,7 +168,7 @@ export default function Register({
               {t("enter_details")}
             </p>
 
-            <div className="divider my-0"></div>
+            <Separator />
 
             <div>
               <p className="text-sm w-fit font-semibold mb-1">
@@ -284,7 +285,11 @@ export default function Register({
             </Button>
 
             {availableLogins.buttonAuths.length > 0 && (
-              <div className="divider my-1">{t("or_continue_with")}</div>
+              <div className="flex items-center gap-2">
+                <Separator className="my-1 flex-1 w-auto" />
+                <p className="whitespace-nowrap">{t("or_continue_with")}</p>
+                <Separator className="my-1 flex-1 w-auto" />
+              </div>
             )}
 
             {displayLoginExternalButton()}
diff --git a/apps/web/pages/settings/access-tokens.tsx b/apps/web/pages/settings/access-tokens.tsx
index 9a0e9b14..bce08bc2 100644
--- a/apps/web/pages/settings/access-tokens.tsx
+++ b/apps/web/pages/settings/access-tokens.tsx
@@ -13,6 +13,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { Separator } from "@/components/ui/separator";
 
 export default function AccessTokens() {
   const [newTokenModal, setNewTokenModal] = useState(false);
@@ -33,7 +34,7 @@ export default function AccessTokens() {
         {t("access_tokens")}
       </p>
 
-      <div className="divider my-3"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-3">
         <p>{t("access_tokens_description")}</p>
diff --git a/apps/web/pages/settings/account.tsx b/apps/web/pages/settings/account.tsx
index 1bb4ad83..dad6036f 100644
--- a/apps/web/pages/settings/account.tsx
+++ b/apps/web/pages/settings/account.tsx
@@ -24,6 +24,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
 
 export default function Account() {
   const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
@@ -149,7 +150,7 @@ export default function Account() {
         {t("accountSettings")}
       </p>
 
-      <div className="divider my-3"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-5">
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
@@ -308,7 +309,7 @@ export default function Account() {
             </p>
           </div>
 
-          <div className="divider my-3"></div>
+          <Separator className="my-3" />
 
           <div className="flex gap-3 flex-col">
             <div>
@@ -335,7 +336,7 @@ export default function Account() {
             </p>
           </div>
 
-          <div className="divider my-3"></div>
+          <Separator className="my-3" />
 
           <p>
             {t("delete_account_warning")}
diff --git a/apps/web/pages/settings/billing.tsx b/apps/web/pages/settings/billing.tsx
index 28358a47..58f14909 100644
--- a/apps/web/pages/settings/billing.tsx
+++ b/apps/web/pages/settings/billing.tsx
@@ -19,6 +19,7 @@ import {
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 
 interface User extends U {
   subscriptions: {
@@ -65,7 +66,7 @@ export default function Billing() {
         {t("billing_settings")}
       </p>
 
-      <div className="divider my-3"></div>
+      <Separator className="my-3" />
 
       <div className="w-full mx-auto flex flex-col gap-3 justify-between">
         <p className="text-md">
@@ -94,7 +95,7 @@ export default function Billing() {
         </p>
       </div>
 
-      <div className="divider my-3"></div>
+      <Separator className="my-3" />
 
       <div className="flex items-center justify-between gap-2 mb-3 relative">
         <div>
diff --git a/apps/web/pages/settings/delete.tsx b/apps/web/pages/settings/delete.tsx
index 44c56fee..09ef0d7c 100644
--- a/apps/web/pages/settings/delete.tsx
+++ b/apps/web/pages/settings/delete.tsx
@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useUser } from "@linkwarden/router/user";
+import { Separator } from "@/components/ui/separator";
 
 export default function Delete() {
   const [password, setPassword] = useState("");
@@ -74,7 +75,7 @@ export default function Delete() {
           </p>
         </div>
 
-        <div className="divider my-0"></div>
+        <Separator />
 
         <p>{t("delete_warning")}</p>
 
diff --git a/apps/web/pages/settings/password.tsx b/apps/web/pages/settings/password.tsx
index 0cf68fa3..19f4940c 100644
--- a/apps/web/pages/settings/password.tsx
+++ b/apps/web/pages/settings/password.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useUpdateUser, useUser } from "@linkwarden/router/user";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 
 export default function Password() {
   const { t } = useTranslation();
@@ -56,7 +57,7 @@ export default function Password() {
         {t("change_password")}
       </p>
 
-      <div className="divider my-3"></div>
+      <Separator className="my-3" />
 
       <p className="mb-3">{t("password_change_instructions")}</p>
       <div className="w-full flex flex-col gap-2 justify-between">
diff --git a/apps/web/pages/settings/preference.tsx b/apps/web/pages/settings/preference.tsx
index af1d2fe9..eabf9ff1 100644
--- a/apps/web/pages/settings/preference.tsx
+++ b/apps/web/pages/settings/preference.tsx
@@ -23,6 +23,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { Separator } from "@/components/ui/separator";
 
 export default function Preference() {
   const { t } = useTranslation();
@@ -190,7 +191,7 @@ export default function Preference() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">{t("preference")}</p>
 
-      <div className="divider my-3"></div>
+      <Separator className="my-3" />
 
       <div className="flex flex-col gap-5">
         <div>
@@ -214,13 +215,14 @@ export default function Preference() {
               <div
                 key={theme}
                 className={`w-full text-center outline-solid outline-neutral-content outline h-20 duration-100 rounded-xl flex items-center justify-center cursor-pointer select-none ${bgColor} ${
-                  localStorage.getItem("theme") === theme
+                  account.theme === theme
                     ? `outline-primary ${activeColor}`
                     : textColor
                 }`}
-                onClick={() =>
-                  updateUserPreference.mutate({ theme: theme as any })
-                }
+                onClick={() => {
+                  updateUserPreference.mutate({ theme: theme as any });
+                  document.documentElement.setAttribute("data-theme", theme);
+                }}
               >
                 <i className={`${icon} text-3xl`}></i>
                 <p className="ml-2 text-xl">{t(theme)}</p>
@@ -260,7 +262,7 @@ export default function Preference() {
               {t("ai_settings")}
             </p>
 
-            <div className="divider my-3"></div>
+            <Separator className="my-3" />
 
             <p>{t("ai_tagging_method")}</p>
 
@@ -381,7 +383,9 @@ export default function Preference() {
           <p className="capitalize text-3xl font-thin inline">
             {t("archive_settings")}
           </p>
-          <div className="divider my-3"></div>
+
+          <Separator className="my-3" />
+
           <p>{t("formats_to_archive")}</p>
           <div className="p-3">
             <Checkbox
@@ -485,7 +489,9 @@ export default function Preference() {
           <p className="capitalize text-3xl font-thin inline">
             {t("link_settings")}
           </p>
-          <div className="divider my-3"></div>
+
+          <Separator className="my-3" />
+
           <div className="mb-3">
             <Checkbox
               label={t("prevent_duplicate_links")}
diff --git a/apps/web/pages/settings/rss-subscriptions.tsx b/apps/web/pages/settings/rss-subscriptions.tsx
index 902eeb98..b1b5dc85 100644
--- a/apps/web/pages/settings/rss-subscriptions.tsx
+++ b/apps/web/pages/settings/rss-subscriptions.tsx
@@ -8,6 +8,7 @@ import { RssSubscription } from "@linkwarden/prisma/client";
 import NewRssSubscriptionModal from "@/components/ModalContent/NewRssSubscriptionModal";
 import { useConfig } from "@linkwarden/router/config";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 
 export default function RssSubscriptions() {
   const { t } = useTranslation();
@@ -31,7 +32,8 @@ export default function RssSubscriptions() {
         {t("rss_subscriptions")}
       </p>
 
-      <div className="divider my-3"></div>
+      <Separator className="my-3" />
+
       <div className="flex flex-col gap-3">
         <p>
           {t("rss_subscriptions_desc", {
diff --git a/apps/web/pages/settings/worker.tsx b/apps/web/pages/settings/worker.tsx
index 005dfaff..caad5d5e 100644
--- a/apps/web/pages/settings/worker.tsx
+++ b/apps/web/pages/settings/worker.tsx
@@ -7,6 +7,7 @@ import { LinkArchiveActionSchemaType } from "@linkwarden/lib/schemaValidation";
 import toast from "react-hot-toast";
 import { useArchiveAction } from "@linkwarden/router/links";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 
 export default function Worker() {
   const { t } = useTranslation();
@@ -54,7 +55,7 @@ export default function Worker() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">{t("worker")}</p>
 
-      <div className="divider my-3"></div>
+      <Separator className="my-3" />
 
       <div className="w-full flex flex-col gap-6 justify-between">
         <div className="flex flex-col sm:flex-row sm:items-center gap-3">
diff --git a/apps/web/pages/subscribe.tsx b/apps/web/pages/subscribe.tsx
index dc91058f..64552cf0 100644
--- a/apps/web/pages/subscribe.tsx
+++ b/apps/web/pages/subscribe.tsx
@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { Trans, useTranslation } from "next-i18next";
 import { useUser } from "@linkwarden/router/user";
+import { Separator } from "@/components/ui/separator";
 
 export default function Subscribe() {
   const { t } = useTranslation();
@@ -53,7 +54,7 @@ export default function Subscribe() {
           {t("subscribe_title")}
         </p>
 
-        <div className="divider my-0"></div>
+        <Separator />
 
         <div>
           <p>