diff --git a/src/app/components/SpotDetails.tsx b/src/app/components/SpotDetails.tsx
index 8ff8a92..f583d5a 100644
--- a/src/app/components/SpotDetails.tsx
+++ b/src/app/components/SpotDetails.tsx
@@ -12,6 +12,8 @@ import { Database } from "../lib/database.types";
 import { WaveHeightIcon, WindIcon } from "./icons/icons";
 import { PintxoRange } from "./PintxoRange";
 import { getCurrentPintxoConditions } from "../utils/surfUtils";
+import { getPintxoColor } from "../utils/uiUtils";
+import PintxoConditionNameCard from "./atom/PintxoConditionNameCard";
 type PintxoConditions = Database["public"]["Tables"]["spot_conditions"]["Row"];
 type PintxoName =
     | "Empty Plate"
@@ -22,25 +24,6 @@ type PintxoName =
     | "Txuleta Feast";
 
 // Render pintxo color based on a name from condition
-function getPintxoColor(condition: string): string {
-    switch (condition) {
-        case "Empty Plate":
-            console.log("condition", condition);
-            return "bg-purple-400";
-        case "Bread Only":
-            return "bg-red-400";
-        case "Gilda":
-            return "bg-orange-400";
-        case "Txistorra":
-            return "bg-yellow-400";
-        case "Gambas":
-            return "bg-lime-400";
-        case "Txuleta Feast":
-            return "bg-green-400";
-        default:
-            return "bg-gray-400";
-    }
-}
 
 export default async function SpotDetails({
     spot,
@@ -76,15 +59,9 @@ export default async function SpotDetails({
                                 pintxoCondition={condition}
                             />
                         ))}
-                        <div
-                            className={`ml-4 flex w-full h-20 justify-center items-center mx-auto rounded-sm ${getPintxoColor(
-                                currentPintxoCondition[0].condition
-                            )} opacity-80 hover:opacity-100`}
-                        >
-                            <div className="font-display text-dark">
-                                {currentPintxoCondition[0].condition}
-                            </div>
-                        </div>
+                        <PintxoConditionNameCard
+                            currentPintxoCondition={currentPintxoCondition}
+                        />
                     </div>
                 </div>
 
diff --git a/src/app/components/atom/PintxoConditionNameCard.tsx b/src/app/components/atom/PintxoConditionNameCard.tsx
new file mode 100644
index 0000000..70081ad
--- /dev/null
+++ b/src/app/components/atom/PintxoConditionNameCard.tsx
@@ -0,0 +1,52 @@
+"use client";
+import React, { useState } from "react";
+import { getPintxoColor } from "../../utils/uiUtils";
+import pintxosData from "../../constants/pintxosData";
+
+interface PintxoNameCardProps {
+    currentPintxoCondition: {
+        time: string;
+        condition: string;
+    }[];
+}
+function PintxoConditionNameCard({
+    currentPintxoCondition,
+}: PintxoNameCardProps) {
+    const [pintxoOpen, setPintxoOpen] = useState<boolean>(false);
+
+    const switchPintxoCard = (
+        event: React.MouseEvent<HTMLDivElement>
+    ): void => {
+        event.preventDefault(); // Prevent the default behavior
+        setPintxoOpen(!pintxoOpen);
+    };
+
+    const pintxoExplain = pintxosData.find(
+        (pintxo) => pintxo.title === currentPintxoCondition[0].condition
+    );
+    return (
+        <div onClick={switchPintxoCard} className="w-full flex">
+            {pintxoOpen ? (
+                <div
+                    className={`ml-4 flex w-full h-20 justify-center items-center mx-auto rounded-sm ${pintxoExplain?.color} opacity-80 hover:opacity-100`}
+                >
+                    <div className="font-body text-xs text-dark">
+                        {pintxoExplain?.short}
+                    </div>
+                </div>
+            ) : (
+                <div
+                    className={`ml-4 flex w-full h-20 justify-center items-center mx-auto rounded-sm ${getPintxoColor(
+                        currentPintxoCondition[0].condition
+                    )} opacity-80 hover:opacity-100`}
+                >
+                    <div className="font-display text-dark">
+                        {currentPintxoCondition[0].condition}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default PintxoConditionNameCard;
diff --git a/src/app/constants/pintxosData.ts b/src/app/constants/pintxosData.ts
index fe7edda..7834a90 100644
--- a/src/app/constants/pintxosData.ts
+++ b/src/app/constants/pintxosData.ts
@@ -11,7 +11,7 @@ type PintxoItem = {
 
 const pintxosData: PintxoItem[] = [
     {
-        color: "bg-gray-400",
+        color: "bg-purple-400",
         title: "Empty Plate",
         short: "Unfavorable Conditions",
         description:
diff --git a/src/app/utils/uiUtils.ts b/src/app/utils/uiUtils.ts
new file mode 100644
index 0000000..278dd8b
--- /dev/null
+++ b/src/app/utils/uiUtils.ts
@@ -0,0 +1,19 @@
+export function getPintxoColor(condition: string): string {
+    switch (condition) {
+        case "Empty Plate":
+            console.log("condition", condition);
+            return "bg-purple-400";
+        case "Bread Only":
+            return "bg-red-400";
+        case "Gilda":
+            return "bg-orange-400";
+        case "Txistorra":
+            return "bg-yellow-400";
+        case "Gambas":
+            return "bg-lime-400";
+        case "Txuleta Feast":
+            return "bg-green-400";
+        default:
+            return "bg-gray-400";
+    }
+}