diff --git a/frontend/src/app/(routes)/artists/[slug]/page.tsx b/frontend/src/app/(routes)/artists/[slug]/page.tsx
index 33fc1d4..c21746b 100644
--- a/frontend/src/app/(routes)/artists/[slug]/page.tsx
+++ b/frontend/src/app/(routes)/artists/[slug]/page.tsx
@@ -4,7 +4,7 @@ import { Button, Chip } from "@nextui-org/react";
 
 import { DEFAULT_IMAGE } from "@/config/constants";
 import { getArtist, getTattoosByArtist } from "@/lib/api";
-import { Instagram, EmptyList, WhatsApp, ArtistGallery } from "@/components";
+import { Instagram, EmptyList, WhatsApp, TattooList } from "@/components";
 import { IStyle } from "@/interfaces";
 import Link from "next/link";
 
@@ -107,7 +107,7 @@ export default async function ArtistDetailPage({ params }: Props) {
       </section>
       <section className="w-full p-4">
         {hasTattoos ? (
-          <ArtistGallery tattoos={tattoos} />
+          <TattooList tattoos={tattoos} className="md:grid-cols-3" />
         ) : (
           <EmptyList content="Tattoos" />
         )}
diff --git a/frontend/src/components/artists/artist-card/ArtistCard.tsx b/frontend/src/components/artists/artist-card/ArtistCard.tsx
deleted file mode 100644
index 237dfe4..0000000
--- a/frontend/src/components/artists/artist-card/ArtistCard.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const ArtistCard = () => {
-  return <div>ArtistCard</div>;
-};
diff --git a/frontend/src/components/artists/artist-gallery/ArtistGallery.tsx b/frontend/src/components/artists/artist-gallery/ArtistGallery.tsx
deleted file mode 100644
index 72f74e5..0000000
--- a/frontend/src/components/artists/artist-gallery/ArtistGallery.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import Image from "next/image";
-import { useInView } from "react-intersection-observer";
-import { motion, useAnimation } from "framer-motion";
-import { Chip } from "@nextui-org/react";
-import { ITattoo } from "@/interfaces";
-
-interface Props {
-  tattoos: ITattoo[];
-}
-
-export const ArtistGallery = ({ tattoos }: Props) => {
-  const controls = useAnimation();
-  const { ref, inView } = useInView({
-    triggerOnce: true,
-    threshold: 0.1,
-  });
-
-  useEffect(() => {
-    if (inView) {
-      controls.start("visible");
-    }
-  }, [inView, controls]);
-
-  const itemVariants = {
-    hidden: { opacity: 0, x: 0 },
-    visible: { opacity: 1, x: 0 },
-  };
-  return (
-    <section className="grid grid-cols-2 lg:grid-cols-3 gap-4" ref={ref}>
-      {tattoos.map((tattoo, index) => (
-        <motion.figure
-          key={tattoo.id}
-          className="relative border border-neutral-darkgrey rounded-xl overflow-hidden group"
-          variants={itemVariants}
-          initial="hidden"
-          animate={controls}
-          transition={{
-            duration: 0.3,
-            delay: index * 0.1,
-            ease: "easeOut",
-          }}
-        >
-          <Image
-            src={tattoo.image}
-            alt={tattoo.name}
-            width={400}
-            height={400}
-            className="z-10 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-          />
-          <Chip
-            variant="flat"
-            size="sm"
-            className="invisible group-hover:visible transition-all duration-100 text-xs rounded-sm absolute z-30 bottom-2 left-2 shadow-xl"
-          >
-            {tattoo.name}
-          </Chip>
-        </motion.figure>
-      ))}
-    </section>
-  );
-};
diff --git a/frontend/src/components/company/tattoo-section/TattooList.tsx b/frontend/src/components/company/tattoo-section/TattooList.tsx
new file mode 100644
index 0000000..25012b0
--- /dev/null
+++ b/frontend/src/components/company/tattoo-section/TattooList.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { useAnimateOnView } from "@/hooks";
+import { ITattoo } from "@/interfaces";
+import { Chip } from "@nextui-org/react";
+
+interface Props {
+  tattoos: ITattoo[];
+  className?: string;
+}
+
+export const TattooList = ({ tattoos, className }: Props) => {
+  const { ref, controls, itemVariants } = useAnimateOnView(0.1, false);
+
+  return (
+    <section
+      className={`${className}
+        grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4`}
+      ref={ref}
+    >
+      {tattoos.map((tattoo, idx) => (
+        <motion.figure
+          key={tattoo.id}
+          className="relative border border-neutral-darkgrey rounded-xl overflow-hidden group"
+          variants={itemVariants}
+          initial="hidden"
+          animate={controls}
+          transition={{
+            duration: 0.3,
+            delay: idx * 0.1,
+            ease: "easeOut",
+          }}
+        >
+          <figure className="relative w-full h-0 pb-[100%]">
+            <Image
+              src={tattoo.image}
+              alt={tattoo.name}
+              fill
+              className="z-10 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
+            />
+          </figure>
+          <Chip
+            variant="flat"
+            size="sm"
+            className="invisible group-hover:visible transition-all duration-100 text-xs rounded-sm absolute z-30 bottom-2 left-2 shadow-xl"
+          >
+            {tattoo.name}
+          </Chip>
+        </motion.figure>
+      ))}
+    </section>
+  );
+};
diff --git a/frontend/src/components/company/tattoo-section/TattooSection.tsx b/frontend/src/components/company/tattoo-section/TattooSection.tsx
index c9c440a..96a96f4 100644
--- a/frontend/src/components/company/tattoo-section/TattooSection.tsx
+++ b/frontend/src/components/company/tattoo-section/TattooSection.tsx
@@ -1,5 +1,4 @@
-import { TATTOO_EXAMPLE_OBJ } from "@/config/constants";
-import { HeaderSection, ParallaxScrollMain } from "@/components";
+import { HeaderSection, TattooList } from "@/components";
 import { ITattoo } from "@/interfaces";
 
 interface Props {
@@ -8,9 +7,9 @@ interface Props {
 
 export const TattooSection = ({ tattoos }: Props) => {
   return (
-    <section className="py-16">
+    <section className="py-16 px-4">
       <HeaderSection title="Tattoos" />
-      <ParallaxScrollMain tattoos={tattoos} />
+      <TattooList tattoos={tattoos} />
     </section>
   );
 };
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index aac9924..b1a903b 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -2,10 +2,8 @@
 export * from "./applicants/applicant-form/ApplicantForm";
 
 // Artists
-export * from "./artists/artist-card/ArtistCard";
 export * from "./artists/artist-list/ArtistList";
 export * from "./artists/artist-section/ArtistSection";
-export * from "./artists/artist-gallery/ArtistGallery";
 
 // Bookings
 export * from "./bookings/booking-card/BookingCard";
@@ -22,6 +20,7 @@ export * from "./company/price-section/PriceSection";
 export * from "./company/promotion-section/PromotionSection";
 export * from "./company/service-section/ServiceSection";
 export * from "./company/tattoo-section/TattooSection";
+export * from "./company/tattoo-section/TattooList";
 
 // Products
 export * from "./products/product-counter/ProductCounter";
@@ -45,8 +44,6 @@ export * from "./ui/instagram/Instagram";
 export * from "./ui/logo/Logo";
 export * from "./ui/menubar/MenuBar";
 export * from "./ui/pagination/PaginationItem";
-export * from "./ui/parallax-scroll/ParallaxScroll";
-export * from "./ui/parallax-scroll/ParallaxScrollMain";
 export * from "./ui/twitch/Twitch";
 export * from "./ui/whatsapp/WhatsApp";
 export * from "./ui/whatsapp/WhatsAppButton";
diff --git a/frontend/src/components/ui/parallax-scroll/ParallaxScroll.tsx b/frontend/src/components/ui/parallax-scroll/ParallaxScroll.tsx
deleted file mode 100644
index 4ae33d8..0000000
--- a/frontend/src/components/ui/parallax-scroll/ParallaxScroll.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import { useRef } from "react";
-import Image from "next/image";
-import { motion, useScroll, useTransform } from "framer-motion";
-import { ITattoo } from "@/interfaces";
-
-interface Props {
-  tattoos: ITattoo[];
-}
-
-export const ParallaxScroll = ({ tattoos }: Props) => {
-  const gridRef = useRef<any>(null);
-  const { scrollYProgress } = useScroll({
-    container: gridRef,
-    offset: ["start start", "end start"],
-  });
-
-  const translateFirst = useTransform(scrollYProgress, [0, 1], [0, -200]);
-  const translateSecond = useTransform(scrollYProgress, [0, 1], [0, 200]);
-  const translateThird = useTransform(scrollYProgress, [0, 1], [0, -200]);
-  const translateFourth = useTransform(scrollYProgress, [0, 1], [0, 200]);
-
-  const quarter = Math.ceil(tattoos.length / 4);
-
-  const firstPart = tattoos.slice(0, quarter);
-  const secondPart = tattoos.slice(quarter, 2 * quarter);
-  const thirdPart = tattoos.slice(2 * quarter, 3 * quarter);
-  const fourthPart = tattoos.slice(3 * quarter);
-
-  return (
-    <div className="h-[40rem] items-start overflow-y-auto w-full" ref={gridRef}>
-      <div
-        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 items-start max-w-5xl mx-auto gap-4"
-        ref={gridRef}
-      >
-        <div className="grid gap-4">
-          {firstPart.map((firstPart, idx) => (
-            <motion.div
-              key={"grid-1" + idx}
-              style={{ y: translateFirst }}
-              className="group overflow-hidden rounded-xl border border-neutral-darkgrey"
-            >
-              <Image
-                src={firstPart.image}
-                className="h-80 w-full object-cover object-left-top gap-4 !m-0 !p-0 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-                height="400"
-                width="400"
-                alt={`${firstPart.name} by ${firstPart.artist}`}
-              />
-            </motion.div>
-          ))}
-        </div>
-        <div className="grid gap-4">
-          {secondPart.map((secondPart, idx) => (
-            <motion.div
-              key={"grid-2" + idx}
-              style={{ y: translateSecond }}
-              className="group overflow-hidden rounded-xl border border-neutral-darkgrey"
-            >
-              <Image
-                src={secondPart.image}
-                className="h-80 w-full object-cover object-left-top gap-4 !m-0 !p-0 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-                height="400"
-                width="400"
-                alt={`${secondPart.name} by ${secondPart.artist}`}
-              />
-            </motion.div>
-          ))}
-        </div>
-        <div className="grid gap-4">
-          {thirdPart.map((thirdPart, idx) => (
-            <motion.div
-              key={"grid-3" + idx}
-              style={{ y: translateThird }}
-              className="group overflow-hidden rounded-xl border border-neutral-darkgrey"
-            >
-              <Image
-                src={thirdPart.image}
-                className="h-80 w-full object-cover object-left-top gap-4 !m-0 !p-0 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-                height="400"
-                width="400"
-                alt={`${thirdPart.name} by ${thirdPart.artist}`}
-              />
-            </motion.div>
-          ))}
-        </div>
-        <div className="grid gap-4">
-          {fourthPart.map((fourthPart, idx) => (
-            <motion.div
-              key={"grid-3" + idx}
-              style={{ y: translateThird }}
-              className="group overflow-hidden rounded-xl border border-neutral-darkgrey"
-            >
-              <Image
-                src={fourthPart.image}
-                className="h-80 w-full object-cover object-left-top gap-4 !m-0 !p-0 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-                height="400"
-                width="400"
-                alt={`${fourthPart.name} by ${fourthPart.artist}`}
-              />
-            </motion.div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/components/ui/parallax-scroll/ParallaxScrollMain.tsx b/frontend/src/components/ui/parallax-scroll/ParallaxScrollMain.tsx
deleted file mode 100644
index e2ee197..0000000
--- a/frontend/src/components/ui/parallax-scroll/ParallaxScrollMain.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-"use client";
-
-import { useRef } from "react";
-import Image from "next/image";
-import { motion, useScroll, useTransform } from "framer-motion";
-import { cn } from "@/lib/utils";
-import { ITattoo } from "@/interfaces";
-
-interface Props {
-  tattoos: ITattoo[];
-}
-
-export const ParallaxScrollMain = ({ tattoos }: Props) => {
-  const gridRef = useRef<any>(null);
-  const { scrollYProgress } = useScroll({
-    container: gridRef, // remove this if your container is not fixed height
-    offset: ["start start", "end start"], // remove this if your container is not fixed height
-  });
-
-  // Define transformations for each of the five sections
-  const translateFirst = useTransform(scrollYProgress, [0, 1], [0, -200]);
-  const translateSecond = useTransform(scrollYProgress, [0, 1], [0, 200]);
-  const translateThird = useTransform(scrollYProgress, [0, 1], [0, -200]);
-  const translateFourth = useTransform(scrollYProgress, [0, 1], [0, 200]);
-  const translateFifth = useTransform(scrollYProgress, [0, 1], [0, -200]);
-
-  // Divide images into 5 equal parts
-  const partSize = Math.ceil(tattoos.length / 5);
-
-  const firstPart = tattoos.slice(0, partSize);
-  const secondPart = tattoos.slice(partSize, 2 * partSize);
-  const thirdPart = tattoos.slice(2 * partSize, 3 * partSize);
-  const fourthPart = tattoos.slice(3 * partSize, 4 * partSize);
-  const fifthPart = tattoos.slice(4 * partSize);
-
-  return (
-    <div
-      className="h-[40rem] items-start overflow-y-auto w-full px-4"
-      ref={gridRef}
-    >
-      <div
-        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 items-start mx-auto gap-4"
-        ref={gridRef}
-      >
-        <div className="grid gap-4">
-          {firstPart.map((firstPart, idx) => (
-            <motion.div
-              key={"grid-1" + idx}
-              style={{ y: translateFirst }}
-              className="group overflow-hidden rounded-xl"
-            >
-              <Image
-                src={firstPart.image}
-                className="h-80 w-full object-cover object-left-top gap-10 !m-0 !p-0 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-                height="400"
-                width="400"
-                alt={`${firstPart.name} by ${firstPart.artist}`}
-              />
-            </motion.div>
-          ))}
-        </div>
-        <div className="grid gap-4">
-          {secondPart.map((secondPart, idx) => (
-            <motion.div
-              key={"grid-2" + idx}
-              style={{ y: translateSecond }}
-              className="group overflow-hidden rounded-xl"
-            >
-              <Image
-                src={secondPart.image}
-                className="h-80 w-full object-cover object-left-top gap-10 !m-0 !p-0 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-                height="400"
-                width="400"
-                alt={`${secondPart.name} by ${secondPart.artist}`}
-              />
-            </motion.div>
-          ))}
-        </div>
-        <div className="grid gap-4">
-          {thirdPart.map((thirdPart, idx) => (
-            <motion.div
-              key={"grid-3" + idx}
-              style={{ y: translateThird }}
-              className="group overflow-hidden rounded-xl"
-            >
-              <Image
-                src={thirdPart.image}
-                className="h-80 w-full object-cover object-left-top gap-10 !m-0 !p-0 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-                height="400"
-                width="400"
-                alt={`${thirdPart.name} by ${thirdPart.artist}`}
-              />
-            </motion.div>
-          ))}
-        </div>
-        <div className="grid gap-4">
-          {fourthPart.map((fourthPart, idx) => (
-            <motion.div
-              key={"grid-4" + idx}
-              style={{ y: translateFourth }}
-              className="group overflow-hidden rounded-xl"
-            >
-              <Image
-                src={fourthPart.image}
-                className="h-80 w-full object-cover object-left-top gap-10 !m-0 !p-0 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-                height="400"
-                width="400"
-                alt={`${fourthPart.name} by ${fourthPart.artist}`}
-              />
-            </motion.div>
-          ))}
-        </div>
-        <div className="grid gap-4">
-          {fifthPart.map((fifthPart, idx) => (
-            <motion.div
-              key={"grid-5" + idx}
-              style={{ y: translateFifth }}
-              className="group overflow-hidden rounded-xl"
-            >
-              <Image
-                src={fifthPart.image}
-                className="h-80 w-full object-cover object-left-top gap-10 !m-0 !p-0 transform transition-transform duration-300 group-hover:scale-110 grayscale group-hover:grayscale-0"
-                height="400"
-                width="400"
-                alt={`${fifthPart.name} by ${fifthPart.artist}`}
-              />
-            </motion.div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/config/constants.ts b/frontend/src/config/constants.ts
index 1122874..5c3efb5 100644
--- a/frontend/src/config/constants.ts
+++ b/frontend/src/config/constants.ts
@@ -51,146 +51,3 @@ export const MENU_ITEMS = [
   { id: 4, label: "Products", href: "/products" },
   { id: 5, label: "Bookings", href: "/bookings" },
 ];
-
-export const TATTOO_EXAMPLE_OBJ = [
-  {
-    id: 1,
-    name: "Tattoo Design 1",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 2,
-    name: "Tattoo Design 2",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-  {
-    id: 3,
-    name: "Tattoo Design 3",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 4,
-    name: "Tattoo Design 4",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-  {
-    id: 5,
-    name: "Tattoo Design 5",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 6,
-    name: "Tattoo Design 6",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-  {
-    id: 7,
-    name: "Tattoo Design 7",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 8,
-    name: "Tattoo Design 8",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-  {
-    id: 9,
-    name: "Tattoo Design 9",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 10,
-    name: "Tattoo Design 10",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-  {
-    id: 11,
-    name: "Tattoo Design 11",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 12,
-    name: "Tattoo Design 12",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-  {
-    id: 13,
-    name: "Tattoo Design 13",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 14,
-    name: "Tattoo Design 14",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-  {
-    id: 15,
-    name: "Tattoo Design 15",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 16,
-    name: "Tattoo Design 16",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-  {
-    id: 17,
-    name: "Tattoo Design 17",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 18,
-    name: "Tattoo Design 18",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-  {
-    id: 19,
-    name: "Tattoo Design 19",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560785/gwojsaglfb78ubmqgqzc.webp",
-    artist: "Artist Name 1",
-  },
-  {
-    id: 20,
-    name: "Tattoo Design 20",
-    image:
-      "https://res.cloudinary.com/dwyvfa5dj/image/upload/v1725560726/qfmmxblvlctpjtkrg0km.jpg",
-    artist: "Artist Name 2",
-  },
-];