diff --git a/src/components/BreadDetail/BreadDetail.tsx b/src/components/BreadDetail/BreadDetail.tsx
index 2ea368d..bbb3297 100644
--- a/src/components/BreadDetail/BreadDetail.tsx
+++ b/src/components/BreadDetail/BreadDetail.tsx
@@ -4,54 +4,122 @@ import { fetchBreadsForCountry } from "../../apiCalls";
 import { BreadAttributes } from "../../apiTypes";
 
 const BreadDetail = () => {
-    const { id: countryName, breadId } = useParams<{ id: string; breadId: string; }>();
-    const [breadDetail, setBreadDetail] = useState<BreadAttributes | null>(null);
-    const navigate = useNavigate();
-
-    useEffect(() => {
-        if (countryName) {
-            fetchBreadsForCountry(countryName)
-                .then((data) => {
-                    const bread = data.breads.data.find(bread => bread.attributes.name === breadId);
-                    if (bread) {
-                        setBreadDetail(bread.attributes);
-                    } else {
-                        navigate('/error'); // Redirect to error page
-                    }
-                })
-                .catch((error) => {
-                    navigate('/error'); // Redirect to error page
-                });
-        }
-    }, [countryName, breadId, navigate]);
-
-    if (!breadDetail) return <div>Loading...</div>;
-
-    return (
-        <div className='recipeWrapper'>
-            <section className="BreadDetail font-abel text-center mt-6 mb-4 flex flex-col items-center sm:text-center sm:mt-16">
-                <h2 className="font-satisfy text-[2rem] mb-4">{breadDetail.name}</h2>
-                <h3 className="text-base mb-6 sm:text-xl sm:px-[10rem]">{breadDetail.description}</h3>
-                <img src={breadDetail.imageUrl} alt={breadDetail.name} className='breadImage w-[300px] h-full rounded-[65px] sm:w-[502px]'/>
-            </section>
-            <section className="recipeSection w-screen h-[calc(100vh_+_120px)] bg-[url('/public/shutterstock\_174816359.jpg')] bg-cover bg-no-repeat bg-center flex absolute items-center justify-center sm:h-auto min-h-0 py-[17.5%]">
-                <div className="recipeDetail font-abel bg-[rgba(231,171,134,0.7)] w-4/5 h-4/5 overflow-y-auto flex flex-col items-center text-base mx-auto my-0 pt-8 p-[1.7rem] rounded-[65px] sm:text-[1.2rem] sm:h-auto min-h-0 py-[10%]">
-                    <h4 className="text-[black] pt-3 pb-1 sm:pb-5 sm:text-[1.7rem]">Ingredients</h4>
-                    <ul className="sm:text-[1.3rem] sm:pb-5">
-                        {breadDetail.recipe.ingredients.map((ingredient, index) => (
-                            <li key={index}>{ingredient}</li>
-                        ))}
-                    </ul>
-                    <h4 className="text-[black] pt-3 pb-1 sm:pb-3 sm:text-[1.7rem]">Instructions</h4>
-                    <ol>
-                        {breadDetail.recipe.instructions.map((instruction, index) => (
-                            <li className="sm:text-[1.3rem] sm:pb-2" key={index}>{instruction}</li>
-                        ))}
-                    </ol>
-                </div>
-            </section>
-        </div>
-    );
+	const { id: countryName, breadId } = useParams<{
+		id: string;
+		breadId: string;
+	}>();
+	const [breadDetail, setBreadDetail] = useState<BreadAttributes | null>(null);
+	const navigate = useNavigate();
+	const [isFlipped, setFlip] = useState(false);
+
+	const handleFlip = (event: React.MouseEvent<HTMLElement>) => {
+		event.preventDefault();
+		setFlip(!isFlipped);
+	};
+
+	useEffect(() => {
+		if (countryName) {
+			fetchBreadsForCountry(countryName)
+				.then((data) => {
+					const bread = data.breads.data.find(
+						(bread) => bread.attributes.name === breadId
+					);
+					if (bread) {
+						setBreadDetail(bread.attributes);
+					} else {
+						navigate("/error"); // Redirect to error page
+					}
+				})
+				.catch((error) => {
+					navigate("/error"); // Redirect to error page
+				});
+		}
+	}, [countryName, breadId, navigate]);
+
+	if (!breadDetail) return <div>Loading...</div>;
+
+	return (
+		// <div className='recipeWrapper'>
+		//     <section className="BreadDetail font-abel text-center mt-6 mb-4 flex flex-col items-center sm:text-center sm:mt-16">
+		//         <h2 className="font-satisfy text-[2rem] mb-4">{breadDetail.name}</h2>
+		//         <h3 className="text-base mb-6 sm:text-xl sm:px-[10rem]">{breadDetail.description}</h3>
+		//         <img src={breadDetail.imageUrl} alt={breadDetail.name} className='breadImage w-[300px] h-full rounded-[65px] sm:w-[502px]'/>
+		//     </section>
+		//     <section className="recipeSection w-screen h-[calc(100vh_+_120px)] bg-[url('/public/shutterstock\_174816359.jpg')] bg-cover bg-no-repeat bg-center flex absolute items-center justify-center sm:h-auto min-h-0 py-[17.5%]">
+		//         <div className="recipeDetail font-abel bg-[rgba(231,171,134,0.7)] w-4/5 h-4/5 overflow-y-auto flex flex-col items-center text-base mx-auto my-0 pt-8 p-[1.7rem] rounded-[65px] sm:text-[1.2rem] sm:h-auto min-h-0 py-[10%]">
+		//             <h4 className="text-[black] pt-3 pb-1 sm:pb-5 sm:text-[1.7rem]">Ingredients</h4>
+		//             <ul className="sm:text-[1.3rem] sm:pb-5">
+		//                 {breadDetail.recipe.ingredients.map((ingredient, index) => (
+		//                     <li key={index}>{ingredient}</li>
+		//                 ))}
+		//             </ul>
+		//             <h4 className="text-[black] pt-3 pb-1 sm:pb-3 sm:text-[1.7rem]">Instructions</h4>
+		//             <ol>
+		//                 {breadDetail.recipe.instructions.map((instruction, index) => (
+		//                     <li className="sm:text-[1.3rem] sm:pb-2" key={index}>{instruction}</li>
+		//                 ))}
+		//             </ol>
+		//         </div>
+		//     </section>
+		// </div>
+        
+		//BROKEN ANIMATION ATTEMPT: NO ERRORS / NO RENDERING
+		<div className="recipeWrapper">
+			<section className="BreadDetail font-abel text-center mt-6 mb-4 flex flex-col items-center sm:text-center sm:mt-16">
+				<h2 className="font-satisfy text-[2rem] mb-4">{breadDetail.name}</h2>
+				<h3 className="text-base mb-6 sm:text-xl sm:px-[10rem]">
+					{breadDetail.description}
+				</h3>
+			</section>
+
+			<section className="recipeSection w-screen h-[calc(100vh_+_120px)] bg-[url('/public/shutterstock\_174816359.jpg')] bg-cover bg-no-repeat bg-center flex absolute items-center justify-center sm:h-auto min-h-0 py-[17.5%]">
+				<div
+					className="animation-wrapper bg-[rgba(231,171,134,0.7)] w-4/5 h-[100vh] overflow-y-auto flex flex-col items-center text-base mx-auto my-0 pt-8 p-[1.7rem] rounded-[65px]"
+					onClick={handleFlip}
+				>
+					<div className="group [perspective:1000px]">
+						<div className="relative h-full w-full rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
+							<div className="absolute inset-0">
+								<img
+									src={breadDetail.imageUrl}
+									alt={breadDetail.name}
+									className="breadImage w-full h-full rounded-xl object-cover sm:w-[502px]"
+								/>
+							</div>
+
+							<div className="absolute inset-0 h-full w-full rounded-xl [transform:rotateY(180deg)] [backface-visibility:hidden]">
+								<div
+									className="recipeDetail font-abel bg-[rgba(231,171,134,0.7)] w-4/5 h-4/5 overflow-y-auto flex flex-col items-center text-base mx-auto my-0 pt-8 p-[1.7rem] rounded-[65px] sm:text-[1.2rem] sm:h-auto min-h-0 py-[10%]"
+									onClick={handleFlip}
+								>
+									<h4 className="text-[black] pt-3 pb-1 sm:pb-5 sm:text-[1.7rem]">
+										Ingredients
+									</h4>
+									<ul className="sm:text-[1.3rem] sm:pb-5">
+										{breadDetail.recipe.ingredients.map((ingredient, index) => (
+											<li key={index}>{ingredient}</li>
+										))}
+									</ul>
+									<h4 className="text-[black] pt-3 pb-1 sm:pb-3 sm:text-[1.7rem]">
+										Instructions
+									</h4>
+									<ol>
+										{breadDetail.recipe.instructions.map(
+											(instruction, index) => (
+												<li className="sm:text-[1.3rem] sm:pb-2" key={index}>
+													{instruction}
+												</li>
+											)
+										)}
+									</ol>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+		</div>
+	);
 };
 
 export default BreadDetail;
diff --git a/src/components/Main/Main.css b/src/components/Main/Main.css
index 3b93546..dc9b32d 100644
--- a/src/components/Main/Main.css
+++ b/src/components/Main/Main.css
@@ -12,4 +12,27 @@ body, html {
 .error-container {
     display: flex;
     justify-content: center;
-}
\ No newline at end of file
+}
+
+@layer utilities {
+    @keyframes wiggle {
+      25% {
+        transform: translateX(-5px);
+      }
+      50% {
+        transform: translateX(5px);
+      }
+      75% {
+        transform: translateX(-5px);
+      }
+      100% {
+        transform: translateX(5px);
+      }
+    }
+  }
+  
+  @layer components {
+    .animate-wiggle {
+      animation: wiggle 0.5s ease-in-out infinite;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 909b007..7ce82ff 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -7,7 +7,7 @@ const Main = () => {
   return (
     <div className="main h-screen w-screen flex justify-center items-center">
       <div className='map-wrapper flex flex-col h-[90%] w-[90%] items-center'>
-        <h2 className='text-xl md:text-2xl lg:text-3xl pt-4 md:pt-14 lg:pt-15'>Select a country from our world bakery!</h2>
+        <h2 className='hover:animate-wiggle focus:animate-wiggle text-xl md:text-2xl lg:text-3xl pt-4 md:pt-14 lg:pt-15'>Select a country from our world bakery!</h2>
       <div className="map-background bg-[#E9CC61] shadow-[0_0.5rem_1.5rem_rgba(0,0,0,0.15)] w-[95%] flex justify-center mt-16 p-6 rounded-3xl lg:w-[60vw] xl:w-[50vw]">
         <div className="map-container w-full h-[60vh] overflow-hidden rounded-3xl">
           <MapComponent />
diff --git a/tailwind.config.js b/tailwind.config.js
index d242c38..8848bb4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,16 @@ module.exports = {
   ],
   theme: {
     extend: {
+      keyframes: {
+        flip: {
+          '0%, 100%': { transform: 'rotateY(0)' },
+          '50%': { transform: 'rotateY(180deg)' },
+        },
+      },
+      animation: {
+        flip: 'flip 1s ease-in-out',
+      },
+
       fontFamily:{
         'abel': ['Abel', 'sans-serif'],
         satisfy:["Satisfy", "cursive"]