diff --git a/resources/js/Components/Carousel/Carousel.tsx b/resources/js/Components/Carousel/Carousel.tsx
index 7bccb17bc..60b1b4415 100644
--- a/resources/js/Components/Carousel/Carousel.tsx
+++ b/resources/js/Components/Carousel/Carousel.tsx
@@ -132,7 +132,7 @@ export const CarouselPreviousButton = ({
     disabled?: boolean;
 }): JSX.Element => (
     <IconButton
-        className={`carousel-button-previous-${carouselKey}`}
+        className={`carousel-button-previous-${carouselKey} dark:border-theme-dark-700 dark:disabled:bg-theme-dark-900 dark:disabled:text-theme-dark-400`}
         data-testid="CarouselNavigationButtons__previous"
         icon="ChevronLeftSmall"
         iconSize="xs"
@@ -151,7 +151,10 @@ export const CarouselNextButton = ({
 }): JSX.Element => (
     <IconButton
         data-testid="CarouselNavigationButtons__next"
-        className={cn(`carousel-button-next-${carouselKey}`, className)}
+        className={cn(
+            `carousel-button-next-${carouselKey} dark:border-theme-dark-700 dark:disabled:bg-theme-dark-900 dark:disabled:text-theme-dark-400`,
+            className,
+        )}
         icon="ChevronRightSmall"
         iconSize="xs"
         disabled={disabled}
diff --git a/resources/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx b/resources/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx
index ed2583506..b63933652 100644
--- a/resources/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx
+++ b/resources/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx
@@ -48,11 +48,11 @@ export const AddressLink = ({
             <Link
                 variant="link"
                 fontSize="text-sm sm:text-base"
-                textColor="text-theme-primary-600"
+                textColor="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500"
                 className="flex items-center"
                 href={addressUrl(address)}
                 external
-                iconClassName="ml-2 text-theme-secondary-500"
+                iconClassName="ml-2 text-theme-secondary-500 dark:text-theme-dark-300"
             >
                 <span className="whitespace-nowrap">
                     <TruncateMiddle
@@ -178,16 +178,21 @@ export const Type = ({
     if (isSmAndAbove) {
         return (
             <>
-                <div className="mr-3 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-theme-secondary-100">
+                <div className="mr-3 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-theme-secondary-100 dark:bg-theme-dark-800">
                     {showNameColumn && !isLgAndAbove && (
                         <Img
                             data-testid="ActivityTable__image"
-                            className="block aspect-square h-full w-full grow bg-theme-secondary-100 object-cover"
+                            className="block aspect-square h-full w-full grow bg-theme-secondary-100 object-cover dark:bg-theme-dark-800"
                             src={activity.nft.images.small ?? undefined}
                         />
                     )}
 
-                    {(!showNameColumn || isLgAndAbove) && <Icon name={activityIcon} />}
+                    {(!showNameColumn || isLgAndAbove) && (
+                        <Icon
+                            className="dark:text-theme-dark-300"
+                            name={activityIcon}
+                        />
+                    )}
                 </div>
                 <div className="flex flex-col">
                     <div className="flex items-center">
@@ -200,7 +205,7 @@ export const Type = ({
                         {showNameColumn && !isMdAndAbove && (
                             <>
                                 {!isLgAndAbove && (
-                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                 )}
                                 <Timestamp value={activity.timestamp} />
                             </>
@@ -219,16 +224,16 @@ export const Type = ({
                                 variant="link"
                                 className="flex items-center leading-6"
                                 fontSize="text-base"
-                                textColor="text-theme-primary-600"
+                                textColor="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500"
                                 href={transactionUrl(activity.id)}
                                 external
-                                iconClassName="ml-2 text-theme-secondary-500"
+                                iconClassName="ml-2 text-theme-secondary-500 dark:text-theme-dark-300"
                             >
                                 {activityTypeLabel}
                             </Link>
                             {!showNameColumn && !isMdAndAbove && (
                                 <>
-                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                     <Timestamp value={activity.timestamp} />
                                 </>
                             )}
@@ -237,7 +242,7 @@ export const Type = ({
                         {!isXlAndAbove && (
                             <>
                                 {showNameColumn && !isLgAndAbove && (
-                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                 )}
                                 {isMdAndAbove && <Timestamp value={activity.timestamp} />}
                                 {!isMdAndAbove && nativeToken != null && (
@@ -278,18 +283,18 @@ export const Type = ({
         <div className="flex items-center space-x-2">
             <Link
                 variant="link"
-                textColor="text-theme-primary-600"
+                textColor="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500"
                 href={transactionUrl(activity.id)}
                 className="flex items-center"
                 external
-                iconClassName="ml-2 text-theme-secondary-500"
+                iconClassName="ml-2 text-theme-secondary-500 dark:text-theme-dark-300"
             >
                 <span className="text-sm font-medium">{activityTypeLabel}</span>
             </Link>
 
             <Icon
                 name={activityIcon}
-                className="text-theme-primary-600"
+                className="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500"
                 size="lg"
             />
         </div>
@@ -312,7 +317,7 @@ export const Timestamp = ({ value }: { value: number }): JSX.Element => {
         <Tooltip content={toHuman(value * 1000, attributes)}>
             <span
                 data-testid="ActivityTable__timestamp"
-                className="whitespace-nowrap text-sm font-medium leading-5.5 text-theme-secondary-700 sm:text-base"
+                className="whitespace-nowrap text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-300 sm:text-base"
             >
                 <TimeAgo date={new Date(value * 1000).toISOString()} />
             </span>
@@ -321,7 +326,9 @@ export const Timestamp = ({ value }: { value: number }): JSX.Element => {
 };
 
 const Label = ({ children }: { children: React.ReactNode }): JSX.Element => (
-    <span className="text-sm font-medium leading-5.5 text-theme-secondary-700">{children}</span>
+    <span className="text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200">
+        {children}
+    </span>
 );
 
 export const SalePrice = ({
@@ -344,7 +351,7 @@ export const SalePrice = ({
             >
                 {isTruthy(nativePrice) && isTruthy(usdPrice) ? (
                     <>
-                        <span className="whitespace-nowrap leading-5.5 text-theme-secondary-900">
+                        <span className="whitespace-nowrap leading-5.5 text-theme-secondary-900 dark:text-theme-dark-50">
                             <FormatNumber value={nativePrice} />
                             <span className="ml-1">ETH</span>
                         </span>
@@ -355,7 +362,7 @@ export const SalePrice = ({
                         </span>
                     </>
                 ) : (
-                    <p className="text-sm font-medium leading-5.5 text-theme-secondary-500 sm:text-base xl:w-24">
+                    <p className="text-sm font-medium leading-5.5 text-theme-secondary-500 dark:text-theme-dark-300 sm:text-base xl:w-24">
                         {t("common.na")}
                     </p>
                 )}
@@ -384,7 +391,7 @@ export const CollectionActivityTableItemSkeleton = ({
 
     if (isCompact) {
         return (
-            <div className="flex flex-col space-y-3 border-b border-dashed border-theme-secondary-300 pb-3 last:border-none last:pb-0">
+            <div className="flex flex-col space-y-3 border-b border-dashed border-theme-secondary-300 pb-3 last:border-none last:pb-0 dark:border-theme-dark-700">
                 {showNameColumn && (
                     <div className="flex items-center justify-between">
                         <Skeleton
@@ -537,7 +544,7 @@ export const CollectionActivityTableItemSkeleton = ({
                                     />
                                     {!isMdAndAbove && (
                                         <div className="flex items-center">
-                                            <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                            <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                             <Skeleton
                                                 className="my-1"
                                                 height={16}
@@ -553,7 +560,7 @@ export const CollectionActivityTableItemSkeleton = ({
                                     height={16}
                                     width={80}
                                 />
-                                <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                 <Skeleton
                                     className="my-1"
                                     height={16}
@@ -654,7 +661,7 @@ export const CollectionActivityTableItem = ({
 
     if (isCompact) {
         return (
-            <div className="flex flex-col space-y-3 border-b border-dashed border-theme-secondary-300 pb-3 last:border-none last:pb-0">
+            <div className="mt-2 flex flex-col space-y-3 border-b border-dashed border-theme-secondary-300 pb-3 first:mt-0 last:border-none last:pb-0 dark:border-theme-dark-700 lg:mt-0">
                 {showNameColumn && (
                     <div className="flex items-center justify-between">
                         <Label>{t("common.name")}</Label>
@@ -744,7 +751,7 @@ export const CollectionActivityTableItem = ({
                     })}
                 >
                     <div className="flex items-center space-x-2">
-                        {!isXlAndAbove && <span>{t("common.from")}</span>}
+                        {!isXlAndAbove && <span className="dark:text-theme-dark-200">{t("common.from")}</span>}
                         <AddressLink
                             address={activity.sender}
                             chainId={collection.chainId}
@@ -754,7 +761,7 @@ export const CollectionActivityTableItem = ({
 
                     {!isXlAndAbove && (
                         <div className="mt-1 flex items-center space-x-2">
-                            <span>{t("common.to")}</span>
+                            <span className="dark:text-theme-dark-200">{t("common.to")}</span>
                             <AddressLink
                                 address={activity.recipient}
                                 chainId={collection.chainId}
diff --git a/resources/js/Components/Collections/CollectionCoverImages/CollectionCoverImages.tsx b/resources/js/Components/Collections/CollectionCoverImages/CollectionCoverImages.tsx
index 92f63cb88..d2dce7ba8 100644
--- a/resources/js/Components/Collections/CollectionCoverImages/CollectionCoverImages.tsx
+++ b/resources/js/Components/Collections/CollectionCoverImages/CollectionCoverImages.tsx
@@ -42,9 +42,11 @@ export const CollectionCoverImages = ({ nfts }: { nfts: App.Data.Collections.Sim
                             {rest.length > 0 && (
                                 <div
                                     data-testid="CollectionCoverImages__more"
-                                    className="absolute inset-0 flex items-center justify-center bg-white/75 backdrop-blur-md"
+                                    className="absolute inset-0 flex items-center justify-center bg-white/75 backdrop-blur-md dark:bg-theme-dark-900/75"
                                 >
-                                    <span className="text-base font-medium">+{rest.length + 1}</span>
+                                    <span className="text-base font-medium dark:text-theme-dark-50">
+                                        +{rest.length + 1}
+                                    </span>
                                 </div>
                             )}
                         </div>
diff --git a/resources/js/Components/Collections/CollectionHeader/CollectionHeaderBottom.tsx b/resources/js/Components/Collections/CollectionHeader/CollectionHeaderBottom.tsx
index 3c0edfe5c..d6271b1f8 100644
--- a/resources/js/Components/Collections/CollectionHeader/CollectionHeaderBottom.tsx
+++ b/resources/js/Components/Collections/CollectionHeader/CollectionHeaderBottom.tsx
@@ -25,11 +25,11 @@ export const CollectionHeaderBottom = ({ collection }: CollectionHeaderBottomPro
         <>
             <div
                 data-testid="CollectionHeaderBottom"
-                className="hide-scrollbar flex items-center justify-between space-x-2 overflow-x-auto px-6 md-lg:mx-auto lg:mx-0 lg:space-x-6 lg:bg-theme-secondary-100 lg:px-6 lg:py-4"
+                className="hide-scrollbar flex items-center justify-between space-x-2 overflow-x-auto px-6 dark:bg-theme-dark-900 md-lg:mx-auto lg:mx-0 lg:space-x-6 lg:bg-theme-secondary-100 lg:px-6 lg:py-4 dark:lg:bg-theme-dark-800"
             >
                 <GridHeader
                     data-testid="CollectionHeaderBottom__floor"
-                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6"
+                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6 dark:lg:border-theme-dark-700"
                     title={t("common.floor")}
                     value={
                         <FormatCrypto
@@ -41,7 +41,7 @@ export const CollectionHeaderBottom = ({ collection }: CollectionHeaderBottomPro
 
                 <GridHeader
                     data-testid="CollectionHeaderBottom__volume"
-                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6"
+                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6 dark:lg:border-theme-dark-700"
                     title={t("common.volume", { frequency: "" })}
                     value={
                         <FormatCrypto
@@ -53,14 +53,14 @@ export const CollectionHeaderBottom = ({ collection }: CollectionHeaderBottomPro
 
                 <GridHeader
                     data-testid="CollectionHeaderBottom__supply"
-                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6"
+                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6 dark:lg:border-theme-dark-700"
                     title={t("common.supply")}
                     value={isTruthy(collection.supply) ? <FormatNumber value={collection.supply} /> : null}
                 />
 
                 <GridHeader
                     data-testid="CollectionHeaderBottom__owners"
-                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6"
+                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6 dark:lg:border-theme-dark-700"
                     title={t("common.owners")}
                     value={isTruthy(collection.owners) ? <FormatNumber value={collection.owners} /> : null}
                 />
diff --git a/resources/js/Components/Collections/CollectionImages/CollectionImages.tsx b/resources/js/Components/Collections/CollectionImages/CollectionImages.tsx
index b49c2260c..cd9735dbd 100644
--- a/resources/js/Components/Collections/CollectionImages/CollectionImages.tsx
+++ b/resources/js/Components/Collections/CollectionImages/CollectionImages.tsx
@@ -29,8 +29,8 @@ export const CollectionImages = ({
         {nftsCount >= maxItems && (
             <div className="relative h-20 w-20 overflow-hidden rounded-lg backdrop-blur-0">
                 {nftsCount > maxItems && (
-                    <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/75 backdrop-blur-md">
-                        <span className="text-base font-medium">
+                    <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/75 backdrop-blur-md dark:bg-theme-dark-900/75">
+                        <span className="text-base font-medium dark:text-theme-dark-50">
                             {maxItems > 1 && "+"}
                             {nftsCount - maxItems + 1}
                         </span>
diff --git a/resources/js/Components/Collections/Nfts/NftBackButton/NftBackButton.tsx b/resources/js/Components/Collections/Nfts/NftBackButton/NftBackButton.tsx
index d78609cf7..368f5b251 100644
--- a/resources/js/Components/Collections/Nfts/NftBackButton/NftBackButton.tsx
+++ b/resources/js/Components/Collections/Nfts/NftBackButton/NftBackButton.tsx
@@ -46,7 +46,7 @@ export const NftBackButton = ({ nft, url, className }: Properties): JSX.Element
                 />
             </div>
 
-            <div className="truncate font-medium text-theme-secondary-700">
+            <div className="truncate font-medium text-theme-secondary-700 dark:text-theme-dark-200">
                 {t("common.back_to")}{" "}
                 <Link
                     href={url}
@@ -54,6 +54,7 @@ export const NftBackButton = ({ nft, url, className }: Properties): JSX.Element
                         "transition-default text-theme-primary-600 underline decoration-transparent underline-offset-2 outline-none",
                         "hover:text-theme-primary-700 hover:decoration-theme-primary-700",
                         "focus-visible:decoration-theme-primary-700",
+                        "dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
                     )}
                 >
                     {nft.collection.name}
diff --git a/resources/js/Components/Collections/Nfts/NftHeader/NftBasicInfo.tsx b/resources/js/Components/Collections/Nfts/NftHeader/NftBasicInfo.tsx
index 822d6c815..094ce431e 100644
--- a/resources/js/Components/Collections/Nfts/NftHeader/NftBasicInfo.tsx
+++ b/resources/js/Components/Collections/Nfts/NftHeader/NftBasicInfo.tsx
@@ -29,7 +29,7 @@ export const NftBasicInfo = ({ nft }: Properties): JSX.Element => {
                 <LinkButton
                     data-testid="NftHeader__collectionName"
                     variant="link"
-                    textColor="text-theme-primary-600"
+                    textColor="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500"
                     fontSize="text-sm"
                     onClick={() => {
                         router.visit(
diff --git a/resources/js/Components/Collections/Nfts/NftHeader/NftHeader.tsx b/resources/js/Components/Collections/Nfts/NftHeader/NftHeader.tsx
index 7ee983edd..89e874f97 100644
--- a/resources/js/Components/Collections/Nfts/NftHeader/NftHeader.tsx
+++ b/resources/js/Components/Collections/Nfts/NftHeader/NftHeader.tsx
@@ -39,7 +39,7 @@ export const NftHeader = ({
                     <div className="flex flex-col gap-2 xl:flex-row xl:items-center">
                         <NftOwner nft={nft} />
                         <div className="hidden xl:block">
-                            <Point />
+                            <Point className="dark:bg-theme-secondary-400" />
                         </div>
                         <div className="flex flex-row items-center gap-2">
                             <CollectionDescription
@@ -50,7 +50,7 @@ export const NftHeader = ({
 
                             {isTruthy(nft.collection.openSeaSlug) && (
                                 <div className="flex flex-row items-center gap-2">
-                                    <Point />
+                                    <Point className="dark:bg-theme-secondary-400" />
                                     <Marketplaces
                                         type="nft"
                                         nftId={nft.tokenNumber}
@@ -79,13 +79,13 @@ export const NftHeader = ({
     return (
         <>
             <div
-                className="flex w-full flex-col items-center justify-center gap-2 border-b border-solid border-theme-secondary-300 bg-theme-secondary-50 px-7 pb-4 pt-4 backdrop-blur xs:px-8 sm:flex-row sm:border-none sm:pb-4"
+                className="flex w-full flex-col items-center justify-center gap-2 border-b border-solid border-theme-secondary-300 bg-theme-secondary-50 px-7 pb-4 pt-4 backdrop-blur dark:border-theme-dark-700 dark:bg-theme-dark-950 xs:px-8 sm:flex-row sm:border-none sm:pb-4"
                 data-testid="NftHeader__mobile"
             >
                 <div className="flex flex-row items-center justify-center gap-2">
                     <NftOwner nft={nft} />
 
-                    <Point />
+                    <Point className="dark:bg-theme-secondary-400" />
 
                     <CollectionDescription
                         name={t("pages.nfts.about_nft")}
@@ -114,7 +114,7 @@ export const NftHeader = ({
                 </div>
             </div>
 
-            <div className="mb-6 flex w-full flex-col gap-4 border-b border-solid border-theme-secondary-300 bg-white pb-6 pt-4">
+            <div className="mb-6 flex w-full flex-col gap-4 border-b border-solid border-theme-secondary-300 bg-white pb-6 pt-4 dark:border-theme-dark-700 dark:bg-theme-dark-900">
                 <NftBasicInfo nft={nft} />
                 <NftActions
                     alreadyReported={alreadyReported}
diff --git a/resources/js/Components/Collections/Nfts/NftHeader/NftOwner.tsx b/resources/js/Components/Collections/Nfts/NftHeader/NftOwner.tsx
index bf690c8bf..5d7254731 100644
--- a/resources/js/Components/Collections/Nfts/NftHeader/NftOwner.tsx
+++ b/resources/js/Components/Collections/Nfts/NftHeader/NftOwner.tsx
@@ -25,7 +25,7 @@ export const NftOwner = ({ nft }: Properties): JSX.Element => {
     }, [nft, t]);
 
     return (
-        <div className="flex text-sm font-medium text-theme-secondary-700">
+        <div className="flex text-sm font-medium text-theme-secondary-700 dark:text-theme-dark-200">
             {t("pages.nfts.owned_by") + " "}
 
             {nft.wallet !== null && ownerUrl !== null && address !== null ? (
@@ -36,7 +36,7 @@ export const NftOwner = ({ nft }: Properties): JSX.Element => {
                     showExternalIcon={true}
                     className="ml-1 flex flex-row items-center"
                 >
-                    <span className="text-theme-primary-600">
+                    <span className="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500">
                         <TruncateMiddle
                             length={8}
                             text={address}
diff --git a/resources/js/Components/Galleries/NftGalleryCard.blocks.tsx b/resources/js/Components/Galleries/NftGalleryCard.blocks.tsx
index 18ca1824f..028fc260f 100644
--- a/resources/js/Components/Galleries/NftGalleryCard.blocks.tsx
+++ b/resources/js/Components/Galleries/NftGalleryCard.blocks.tsx
@@ -54,10 +54,7 @@ const NftImage = ({
         className="group"
     >
         <Img
-            className={cn(
-                "aspect-square w-full rounded-xl bg-theme-secondary-100 object-cover dark:bg-theme-primary-400",
-                className,
-            )}
+            className={cn("aspect-square w-full rounded-xl bg-theme-secondary-100 object-cover", className)}
             src={nft.images.small ?? undefined}
             data-testid={`NftImageGrid__image--${nft.tokenNumber}`}
         />
diff --git a/resources/js/Components/GridHeader.tsx b/resources/js/Components/GridHeader.tsx
index 79334a593..573961a14 100644
--- a/resources/js/Components/GridHeader.tsx
+++ b/resources/js/Components/GridHeader.tsx
@@ -24,7 +24,7 @@ export const GridHeader = ({
     return (
         <div
             className={cn(
-                "flex flex-col whitespace-nowrap rounded-lg bg-theme-secondary-50 px-4 py-3 font-medium lg:rounded-none lg:bg-transparent lg:py-0",
+                "flex flex-col whitespace-nowrap rounded-lg bg-theme-secondary-50 px-4 py-3 font-medium dark:bg-theme-dark-800 lg:rounded-none lg:bg-transparent lg:py-0",
                 className,
             )}
             {...properties}
@@ -32,7 +32,7 @@ export const GridHeader = ({
             <div className="mr-auto flex w-[100px] flex-col space-y-0.5 font-medium md:w-[110px] lg:w-auto">
                 <span
                     data-testid="GridHeader__title"
-                    className="text-sm leading-4.5 text-theme-secondary-500 md:leading-5.5"
+                    className="text-sm leading-4.5 text-theme-secondary-500 dark:text-theme-dark-300 md:leading-5.5"
                 >
                     {title}
                 </span>
@@ -41,9 +41,11 @@ export const GridHeader = ({
                     data-testid="GridHeader__value"
                     className="leading-6 md:leading-7"
                 >
-                    {isTruthy(value) && <span>{value}</span>}
+                    {isTruthy(value) && <span className="dark:text-theme-dark-50">{value}</span>}
 
-                    {!isTruthy(value) && <span className="text-theme-secondary-500">{emptyValue}</span>}
+                    {!isTruthy(value) && (
+                        <span className="text-theme-secondary-500 dark:text-theme-dark-300">{emptyValue}</span>
+                    )}
                 </span>
             </div>
         </div>
diff --git a/resources/js/Components/Point.tsx b/resources/js/Components/Point.tsx
index b2fea01c0..67f0dd340 100644
--- a/resources/js/Components/Point.tsx
+++ b/resources/js/Components/Point.tsx
@@ -2,8 +2,14 @@ interface Properties {
     width?: string;
     height?: string;
     color?: string;
+    className?: string;
 }
 
-export const Point = ({ width = "w-[5px]", height = "h-[5px]", color = "secondary-400" }: Properties): JSX.Element => (
-    <div className={`${width} ${height} rounded-full bg-theme-${color} dark:bg-theme-dark-700`} />
+export const Point = ({
+    width = "w-[5px]",
+    height = "h-[5px]",
+    color = "secondary-400",
+    className,
+}: Properties): JSX.Element => (
+    <div className={`${width} ${height} rounded-full bg-theme-${color} dark:bg-theme-dark-700 ${className}`} />
 );
diff --git a/resources/js/Pages/Collections/Components/CollectionFilterSlider/CollectionFilterSlider.tsx b/resources/js/Pages/Collections/Components/CollectionFilterSlider/CollectionFilterSlider.tsx
index 776449402..acc7383e9 100644
--- a/resources/js/Pages/Collections/Components/CollectionFilterSlider/CollectionFilterSlider.tsx
+++ b/resources/js/Pages/Collections/Components/CollectionFilterSlider/CollectionFilterSlider.tsx
@@ -91,7 +91,7 @@ export const CollectionFilterSlider = ({
 
                 <div className="mt-auto">
                     <Slider.Content includePadding={false}>
-                        <div className="flex justify-end space-x-3 border-t border-theme-secondary-300 px-8 py-3">
+                        <div className="flex justify-end space-x-3 border-t border-theme-secondary-300 px-8 py-3 dark:border-theme-dark-700">
                             <Button
                                 variant="secondary"
                                 className="w-full justify-center sm:w-auto"
diff --git a/resources/js/Pages/Collections/Components/CollectionHeading/CollectionHeading.tsx b/resources/js/Pages/Collections/Components/CollectionHeading/CollectionHeading.tsx
index 39221d00b..24cc14de8 100644
--- a/resources/js/Pages/Collections/Components/CollectionHeading/CollectionHeading.tsx
+++ b/resources/js/Pages/Collections/Components/CollectionHeading/CollectionHeading.tsx
@@ -15,7 +15,7 @@ export const CollectionHeading = ({
     reportReasons,
     showReportModal,
 }: Properties): JSX.Element => (
-    <div className="-mx-6 -mt-6 flex flex-col overflow-hidden border-theme-secondary-300 sm:-mx-8 sm:-mt-8 lg:mx-0 lg:mt-0 lg:rounded-xl lg:border">
+    <div className="-mx-6 -mt-6 flex flex-col overflow-hidden border-theme-secondary-300 dark:border-theme-dark-700 sm:-mx-8 sm:-mt-8 lg:mx-0 lg:mt-0 lg:rounded-xl lg:border">
         <div className="collection-banner flex h-21 items-center bg-theme-secondary-50 bg-cover bg-center sm:h-30 md:h-50">
             {collection.banner !== null && (
                 <img
diff --git a/resources/js/Pages/Collections/Components/CollectionNavigation/CollectionNavigation.tsx b/resources/js/Pages/Collections/Components/CollectionNavigation/CollectionNavigation.tsx
index 7329324b2..eeef9684f 100644
--- a/resources/js/Pages/Collections/Components/CollectionNavigation/CollectionNavigation.tsx
+++ b/resources/js/Pages/Collections/Components/CollectionNavigation/CollectionNavigation.tsx
@@ -86,10 +86,10 @@ export const CollectionNavigation = ({
             selectedIndex={selectedIndex}
             onChange={tabChangeHandler}
         >
-            <div className="backdrop-blur-7 -mx-6 mt-6 bg-theme-secondary-100 px-6 py-3 sm:-mx-8 sm:px-8 lg:mx-0 lg:rounded-xl lg:px-5">
+            <div className="backdrop-blur-7 -mx-6 mt-6 bg-theme-secondary-100 px-6 py-3 dark:bg-theme-dark-800 sm:-mx-8 sm:px-8 lg:mx-0 lg:rounded-xl lg:px-5">
                 <Tab.List className="flex justify-between">
                     <div className="w-full sm:w-auto">
-                        <Tabs className="space-x-1 bg-transparent">
+                        <Tabs className="space-x-1 bg-transparent dark:!bg-theme-dark-800">
                             <CollectionNavigationTab icon="DiamondOpacity">
                                 {t("pages.collections.menu.collection")}
                             </CollectionNavigationTab>
diff --git a/resources/js/Pages/Collections/Components/CollectionNftsGrid/NftsSorting.tsx b/resources/js/Pages/Collections/Components/CollectionNftsGrid/NftsSorting.tsx
index 2c17002be..a00b413c6 100644
--- a/resources/js/Pages/Collections/Components/CollectionNftsGrid/NftsSorting.tsx
+++ b/resources/js/Pages/Collections/Components/CollectionNftsGrid/NftsSorting.tsx
@@ -41,7 +41,7 @@ export const NftsSorting = ({ disabled = false, activeSort, onSort }: Properties
 
             <Dropdown.Content
                 className="left-0 right-0 z-10 w-full origin-top-right px-6 sm:left-auto sm:mt-2 sm:h-fit sm:w-48 sm:px-0"
-                contentClasses="shadow-3xl flex w-full select-none flex-col overflow-hidden rounded-xl bg-white py-3.5"
+                contentClasses="shadow-3xl flex w-full select-none flex-col overflow-hidden rounded-xl bg-white py-3.5 dark:bg-theme-dark-900 dark:border dark:border-theme-dark-700"
             >
                 <DropdownButton
                     isActive={activeSort === "id"}
@@ -78,8 +78,8 @@ const DropdownButton = ({
         className={cn(
             "transition-default cursor-pointer whitespace-nowrap px-6 py-2.5 text-left text-base font-medium",
             isActive
-                ? "bg-theme-primary-100 text-theme-primary-600"
-                : "text-theme-secondary-700 hover:bg-theme-secondary-100 hover:text-theme-secondary-900",
+                ? "bg-theme-primary-100 text-theme-primary-600 dark:bg-theme-primary-600 dark:text-theme-dark-50"
+                : "text-theme-secondary-700 hover:bg-theme-secondary-100 hover:text-theme-secondary-900 dark:hover:bg-theme-dark-700 dark:hover:text-theme-dark-50",
         )}
         onClick={onClick}
     >
diff --git a/resources/js/Pages/Collections/Components/CollectionOwnedToggle/CollectionOwnedToggle.tsx b/resources/js/Pages/Collections/Components/CollectionOwnedToggle/CollectionOwnedToggle.tsx
index e85afe7b3..b4690ed25 100644
--- a/resources/js/Pages/Collections/Components/CollectionOwnedToggle/CollectionOwnedToggle.tsx
+++ b/resources/js/Pages/Collections/Components/CollectionOwnedToggle/CollectionOwnedToggle.tsx
@@ -13,13 +13,13 @@ export const CollectionOwnedToggle = ({
     const { t } = useTranslation();
 
     return (
-        <div className="flex items-center justify-between rounded-xl border-theme-secondary-300 px-6 py-4 xs:border">
+        <div className="flex items-center justify-between rounded-xl border-theme-secondary-300 px-6 py-4 dark:border-theme-dark-700 xs:border">
             <div className="flex items-center space-x-2">
-                <span className="font-medium text-theme-secondary-900">
+                <span className="font-medium text-theme-secondary-900 dark:text-theme-dark-50">
                     {t("pages.collections.show_my_collection")}
                 </span>
 
-                <span className="flex h-6.5 items-center justify-center rounded-full bg-theme-secondary-100 px-2.5 py-0.5 font-medium text-theme-secondary-700">
+                <span className="flex h-6.5 items-center justify-center rounded-full bg-theme-secondary-100 px-2.5 py-0.5 font-medium text-theme-secondary-700 dark:bg-theme-dark-800 dark:text-theme-dark-200">
                     {ownedNftsCount >= 100 ? "99+" : ownedNftsCount}
                 </span>
             </div>
diff --git a/resources/js/Pages/Collections/Nfts/Components/NftHeading/NftHeading.tsx b/resources/js/Pages/Collections/Nfts/Components/NftHeading/NftHeading.tsx
index d7680b1f8..cede2aed3 100644
--- a/resources/js/Pages/Collections/Nfts/Components/NftHeading/NftHeading.tsx
+++ b/resources/js/Pages/Collections/Nfts/Components/NftHeading/NftHeading.tsx
@@ -117,11 +117,11 @@ export const NftHeading = ({
 
     return (
         <div className="mx-auto -mt-6 flex w-full max-w-content flex-1 flex-col sm:-mt-8 lg:-mt-0 lg:px-8 2xl:px-0">
-            <div className="flex min-w-0 items-start justify-center gap-6 border border-theme-secondary-300 bg-theme-primary-50 md:p-6 lg:mb-6 lg:rounded-xl">
+            <div className="flex min-w-0 items-start justify-center gap-6 border border-theme-secondary-300 bg-theme-primary-50 dark:border-theme-dark-700 dark:bg-theme-dark-800 md:p-6 lg:mb-6 lg:rounded-xl">
                 <NftImage nft={nft} />
 
                 <div className="hidden min-w-0 flex-1 lg:block">
-                    <div className="border-b border-dashed border-theme-secondary-400 pb-6 pt-5">
+                    <div className="border-b border-dashed border-theme-secondary-400 pb-6 pt-5 dark:border-theme-dark-700">
                         <NftHeader
                             nft={nft}
                             alreadyReported={alreadyReported}
diff --git a/resources/js/Pages/Collections/Nfts/Components/TraitsCarousel/TraitsCarousel.tsx b/resources/js/Pages/Collections/Nfts/Components/TraitsCarousel/TraitsCarousel.tsx
index 7870d1fb9..87e09014d 100644
--- a/resources/js/Pages/Collections/Nfts/Components/TraitsCarousel/TraitsCarousel.tsx
+++ b/resources/js/Pages/Collections/Nfts/Components/TraitsCarousel/TraitsCarousel.tsx
@@ -108,11 +108,11 @@ export const TraitsCarousel = ({
 
                         if (isSm) {
                             if (traits.length - index > (traits.length % 2 === 0 ? 2 : 1)) {
-                                return "border-b border-theme-secondary-300 border-dashed";
+                                return "border-b border-theme-secondary-300 border-dashed dark:border-theme-dark-700";
                             }
                         } else {
                             if (traits.length - index > 1) {
-                                return "border-b border-theme-secondary-300 border-dashed";
+                                return "border-b border-theme-secondary-300 border-dashed dark:border-theme-dark-700";
                             }
                         }
                     },
@@ -126,28 +126,28 @@ export const TraitsCarousel = ({
                     >
                         <div
                             className={cn(
-                                "flex w-full justify-between py-4 font-medium md:flex-col md:space-y-2 md:rounded-lg md:bg-theme-secondary-50 md:px-4 md:py-3 lg:bg-white",
+                                "flex w-full justify-between py-4 font-medium md:flex-col md:space-y-2 md:rounded-lg md:bg-theme-secondary-50 md:px-4 md:py-3 lg:bg-white dark:lg:bg-theme-dark-900",
                                 borderClassName(index),
                             )}
                         >
                             <div className="flex flex-1 flex-col space-y-0.5 truncate">
-                                <span className="text-xs leading-4.5 text-theme-secondary-500 md:text-sm md:leading-5.5">
+                                <span className="text-xs leading-4.5 text-theme-secondary-500 dark:text-theme-dark-300 md:text-sm md:leading-5.5">
                                     {trait.name}
                                 </span>
-                                <div className="flex items-center justify-between text-sm leading-5.5 md:text-base md:leading-6">
+                                <div className="flex items-center justify-between text-sm leading-5.5 dark:text-theme-dark-50 md:text-base  md:leading-6">
                                     <Tooltip
                                         content={trait.value}
                                         disabled={!isValueTruncated}
                                     >
                                         <span
                                             ref={valueReference}
-                                            className="truncate whitespace-nowrap"
+                                            className="truncate whitespace-nowrap dark:text-theme-dark-50"
                                         >
                                             {trait.value}
                                         </span>
                                     </Tooltip>
 
-                                    <span className="ml-2 hidden text-theme-secondary-700 md:inline">
+                                    <span className="ml-2 hidden text-theme-secondary-700 dark:text-theme-dark-200 md:inline">
                                         <FormatPercentage
                                             value={trait.nftsPercentage / 100}
                                             decimals={2}
@@ -157,7 +157,7 @@ export const TraitsCarousel = ({
                             </div>
 
                             <div className="flex flex-col items-end">
-                                <span className="mb-1.5 text-sm leading-5.5 text-theme-secondary-700 md:hidden">
+                                <span className="mb-1.5 text-sm leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200 md:hidden">
                                     <FormatPercentage
                                         value={trait.nftsPercentage / 100}
                                         decimals={2}
@@ -165,7 +165,7 @@ export const TraitsCarousel = ({
                                     {t("pages.collections.rarity")}
                                 </span>
 
-                                <div className="relative h-2 w-25 bg-theme-primary-200 md:w-full">
+                                <div className="relative h-2 w-25 bg-theme-primary-200 dark:bg-theme-dark-700 md:w-full">
                                     <div
                                         className="left-0 h-full bg-theme-primary-600 md:absolute"
                                         style={{ width: `${trait.nftsPercentage}%` }}
@@ -184,15 +184,15 @@ export const TraitsCarousel = ({
             <div className="mb-3 hidden items-end justify-between lg:flex">
                 <div className="flex flex-col space-y-0.5 font-medium">
                     <div className="flex items-center gap-2.5">
-                        <span className="leading-6">{t("pages.collections.properties")}</span>
-                        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-theme-secondary-200 backdrop-blur-md">
-                            <span className="text-sm font-medium leading-5.5 text-theme-secondary-700">
+                        <span className="leading-6 dark:text-theme-dark-50">{t("pages.collections.properties")}</span>
+                        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-theme-secondary-200 backdrop-blur-md dark:bg-theme-dark-900">
+                            <span className="text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200">
                                 {traits.length}
                             </span>
                         </div>
                     </div>
 
-                    <span className="text-sm leading-5.5 text-theme-secondary-700">
+                    <span className="text-sm leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200">
                         {t("pages.collections.traits.description")}
                     </span>
                 </div>
diff --git a/resources/js/Pages/Collections/Nfts/View.tsx b/resources/js/Pages/Collections/Nfts/View.tsx
index ce9ee9f46..5ca099728 100644
--- a/resources/js/Pages/Collections/Nfts/View.tsx
+++ b/resources/js/Pages/Collections/Nfts/View.tsx
@@ -39,7 +39,7 @@ const CollectionsNftsView = ({
                     url={route("collections.view", {
                         slug: nft.collection.slug,
                     })}
-                    className="-mt-6 mb-6 bg-theme-secondary-50 px-6 py-4 sm:-mt-8 sm:mb-8 lg:-mt-4 lg:mb-0 lg:bg-white lg:px-8 2xl:px-0"
+                    className="-mt-6 mb-6 bg-theme-secondary-50 px-6 py-4 dark:bg-theme-dark-950 sm:-mt-8 sm:mb-8 lg:-mt-4 lg:mb-0 lg:bg-white lg:px-8 dark:lg:bg-theme-dark-900 2xl:px-0"
                 />
 
                 <NftHeading