diff --git a/app/blog-single/page.tsx b/app/blog-single/page.tsx
index 2287774..ec29ab0 100644
--- a/app/blog-single/page.tsx
+++ b/app/blog-single/page.tsx
@@ -1,13 +1,18 @@
 'use client'
 import { useState } from 'react'
+import { useSearchParams } from 'next/navigation'
 import ModalVideo from 'react-modal-video'
 import "@/node_modules/react-modal-video/css/modal-video.css"
 import Countdown from '@/components/elements/Countdown'
 import Layout from "@/components/layout/Layout"
+import { recipesList } from "@/utility/constant.utils";
 import Link from "next/link"
 export default function BlogSingle() {
 
 	const [isOpen, setOpen] = useState(false)
+
+	const searchParams = useSearchParams();
+	const currentSlug = searchParams.get('slug');
 	return (
 		<>
 
@@ -199,78 +204,37 @@ export default function BlogSingle() {
 								</div>
 							</div>
 							<div className="row">
-								<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
-									<div className="blog4-boxarea">
-										<div className="img1">
-											<img src="/assets/img/all-images/memory/memory-img7.png" alt="" />
-										</div>
-										<div className="content-area">
-											<ul>
-												<li>
-													<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
-												</li>
-												<li>
-													<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link>
-												</li>
-											</ul>
-											<div className="space20" />
-											<Link href="/blog-single">Eventify 2024: Unlock the Future of Business</Link>
-											<div className="space24" />
-											<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
-											<div className="arrow">
-												<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
+								{recipesList
+									.filter(post => post.slug !== currentSlug)
+									.slice(0, 3)
+									.map((post) => (
+
+										<div key={post.id} className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
+											<div className="blog4-boxarea">
+												<div className="img1">
+													<img src={post.image} alt={post.title} />
+												</div>
+												<div className="content-area">
+													<ul>
+														<li>
+															<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{post.date}<span> | </span></Link>
+														</li>
+														<li>
+															<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{post.user}</Link>
+														</li>
+													</ul>
+													<div className="space20" />
+													<Link href={`/community/single-recipes?slug=${post?.slug}`}> {post.title.length > 40 ? `${post.title.slice(0, 40)}...` : post?.title}</Link>
+													<div className="space24" />
+													<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
+													<div className="arrow">
+														<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
+													</div>
+												</div>
 											</div>
 										</div>
-									</div>
-								</div>
-								<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
-									<div className="blog4-boxarea">
-										<div className="img1">
-											<img src="/assets/img/all-images/memory/memory-img8.png" alt="" />
-										</div>
-										<div className="content-area">
-											<ul>
-												<li>
-													<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
-												</li>
-												<li>
-													<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Gisselle</Link>
-												</li>
-											</ul>
-											<div className="space20" />
-											<Link href="/blog-single">Where Vision Meetup Connect: Eventify 2024</Link>
-											<div className="space24" />
-											<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
-											<div className="arrow">
-												<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
-											</div>
-										</div>
-									</div>
-								</div>
-								<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1200}>
-									<div className="blog4-boxarea">
-										<div className="img1">
-											<img src="/assets/img/all-images/memory/memory-img9.png" alt="" />
-										</div>
-										<div className="content-area">
-											<ul>
-												<li>
-													<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
-												</li>
-												<li>
-													<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Mertie</Link>
-												</li>
-											</ul>
-											<div className="space20" />
-											<Link href="/blog-single">Fuel Your Business Growth at Eventify</Link>
-											<div className="space24" />
-											<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
-											<div className="arrow">
-												<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
-											</div>
-										</div>
-									</div>
-								</div>
+									))
+								}
 							</div>
 						</div>
 					</div>
@@ -282,7 +246,7 @@ export default function BlogSingle() {
 								<div className="col-lg-10 m-auto">
 									<div className="cta1-main-boxarea">
 										<div className="timer-btn-area">
-										<Countdown />
+											<Countdown />
 											<div className="btn-area1">
 												<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
 											</div>
@@ -308,7 +272,7 @@ export default function BlogSingle() {
 								<div className="col-lg-10 m-auto">
 									<div className="cta1-main-boxarea">
 										<div className="timer-btn-area">
-										<Countdown />
+											<Countdown />
 											<div className="btn-area1">
 												<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
 											</div>
diff --git a/app/community/single-recipes/page.tsx b/app/community/single-recipes/page.tsx
index 5f387f3..96e538a 100644
--- a/app/community/single-recipes/page.tsx
+++ b/app/community/single-recipes/page.tsx
@@ -9,8 +9,8 @@ import { Suspense } from "react";
 
 const Page = () => {
 	// const { slug } = params;
-	 const searchParams = useSearchParams();
-	 const slug = searchParams.get('slug');
+	const searchParams = useSearchParams();
+	const slug = searchParams.get('slug');
 	console.log("slug", slug)
 	const post = recipesList.find((post) => post.slug === slug);
 	const [mounted, setMounted] = useState(false);
@@ -87,31 +87,36 @@ const Page = () => {
 								</div>
 							</div>
 							<div className="row">
-								<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
-									<div className="blog4-boxarea">
-										<div className="img1">
-											<img src="/assets/img/all-images/memory/memory-img7.png" alt="" />
-										</div>
-										<div className="content-area">
-											<ul>
-												<li>
-													<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
-												</li>
-												<li>
-													<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link>
-												</li>
-											</ul>
-											<div className="space20" />
-											<Link href="/blog-single">Eventify 2024: Unlock the Future of Business</Link>
-											<div className="space24" />
-											<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
-											<div className="arrow">
-												<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
+								{recipesList
+									.filter(p => p.slug !== slug)
+									.slice(0, 3)
+									.map((relatedPost) => (
+										<div key={relatedPost.id} className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
+											<div className="blog4-boxarea">
+												<div className="img1">
+													<img src={relatedPost.image} alt={relatedPost.title} />
+												</div>
+												<div className="content-area">
+													<ul>
+														<li>
+															<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{relatedPost.date}<span> | </span></Link>
+														</li>
+														<li>
+															<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{relatedPost.user}</Link>
+														</li>
+													</ul>
+													<div className="space20" />
+													<Link href={`/community/single-recipes?slug=${relatedPost?.slug}`}> {relatedPost.title.length > 40 ? `${relatedPost.title.slice(0, 40)}...` : relatedPost?.title}</Link>
+													<div className="space24" />
+													<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
+													<div className="arrow">
+														<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
+													</div>
+												</div>
 											</div>
 										</div>
-									</div>
-								</div>
-								<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
+									))}
+								{/* <div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
 									<div className="blog4-boxarea">
 										<div className="img1">
 											<img src="/assets/img/all-images/memory/memory-img8.png" alt="" />
@@ -158,7 +163,7 @@ const Page = () => {
 											</div>
 										</div>
 									</div>
-								</div>
+								</div> */}
 							</div>
 						</div>
 					</div>
@@ -171,14 +176,14 @@ const Page = () => {
 }
 
 const RecipePage = (() => {
-    return (
-       <Layout headerStyle={1} footerStyle={1}>
-            
-            <Suspense fallback={<PageLoader />}>
-                <Page />
-            </Suspense>
-        </Layout>
-    )
+	return (
+		<Layout headerStyle={1} footerStyle={1}>
+
+			<Suspense fallback={<PageLoader />}>
+				<Page />
+			</Suspense>
+		</Layout>
+	)
 })
 
 export default RecipePage;
\ No newline at end of file
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index efe5936..6e2abe5 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -6659,7 +6659,7 @@ Location:
 }
 
 .blog-details-section .blog-deatils-content .tags-social-area .tags ul li a:hover {
-	background: var(--ztc-bg-bg-3);
+	background: var(--ztc-bg-bg-15);
 	transition: all 0.4s;
 }
 
@@ -6700,7 +6700,7 @@ Location:
 }
 
 .blog-details-section .blog-deatils-content .tags-social-area .social ul li a:hover {
-	background: var(--ztc-bg-bg-3);
+	background: var(--ztc-bg-bg-15);
 	transition: all 0.4s;
 }
 
@@ -6837,7 +6837,7 @@ Location:
 }
 
 .blog-details-section .blog-auhtor-details .tags-area ul li a:hover {
-	background: var(--ztc-bg-bg-3);
+	background: var(--ztc-bg-bg-15);
 	transition: all 0.4s;
 }
 
@@ -20047,7 +20047,7 @@ html {
 }
 
 .cta1-section-area .cta1-main-boxarea {
-	background: var(--ztc-bg-bg-3);
+	background: var(--ztc-bg-bg-15);
 	border-radius: 8px;
 	padding: 44px;
 }