diff --git a/app/api/newsletter/subscriber/route.ts b/app/api/newsletter/subscriber/route.ts
index 61bc8ee..ef865e3 100644
--- a/app/api/newsletter/subscriber/route.ts
+++ b/app/api/newsletter/subscriber/route.ts
@@ -1,11 +1,13 @@
 import { NextResponse } from "next/server";
-import clientPromise from "@/lib/db"; // Adjust the path to where your db.ts is located
+import clientPromise from "@/lib/db";
 
 interface Subscriber {
 	email: string;
 	subscribedAt: Date;
 }
 
+export const dynamic = "force-dynamic";
+
 export async function GET(req: Request) {
 	try {
 		const url = new URL(req.url);
@@ -17,7 +19,7 @@ export async function GET(req: Request) {
 		const db = client.db("newsletter");
 		const collection = db.collection("subscribers");
 
-		// pagination
+		// Pagination
 		const documents = await collection.find().skip(skip).limit(limit).toArray();
 
 		const subscribers: Subscriber[] = documents.map((doc) => ({
diff --git a/components/widgets/Banner.tsx b/components/widgets/Banner.tsx
index 02aa842..aa2eaf3 100644
--- a/components/widgets/Banner.tsx
+++ b/components/widgets/Banner.tsx
@@ -32,65 +32,69 @@ export default function Banner({
 		isBannerVisible && (
 			<div
 				className={cn(
-					"relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2 sm:px-3.5 sm:before:flex-1 border-b",
+					"relative isolate flex flex-col sm:flex-row items-start sm:items-center gap-y-4 sm:gap-y-0 sm:gap-x-6 overflow-hidden bg-gray-50 px-4 sm:px-6 py-3 sm:py-2 border-b",
 					className
 				)}
 			>
 				<div
 					aria-hidden="true"
-					className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+					className="absolute left-[calc(50%-20rem)] sm:left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
 				>
 					<div
 						style={{
 							clipPath:
 								"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
 						}}
-						className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-yellow-200 opacity-30"
+						className="aspect-[577/310] w-[20rem] sm:w-[36.0625rem] bg-gradient-to-r from-primary to-yellow-200 opacity-30"
 					/>
 				</div>
 				<div
 					aria-hidden="true"
-					className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+					className="absolute left-[calc(50%+16rem)] sm:left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
 				>
 					<div
 						style={{
 							clipPath:
 								"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
 						}}
-						className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-[#9089fc] opacity-30"
+						className="aspect-[577/310] w-[20rem] sm:w-[36.0625rem] bg-gradient-to-r from-primary to-[#9089fc] opacity-30"
 					/>
 				</div>
-				<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-					{icon && <div className="flex-none">{icon}</div>}
-					<p className="text-sm leading-6 text-gray-900">
-						{title && (
-							<>
-								<strong className="font-semibold">{title}</strong>
-								<svg
-									viewBox="0 0 2 2"
-									aria-hidden="true"
-									className="mx-2 inline h-0.5 w-0.5 fill-current"
-								>
-									<circle r={1} cx={1} cy={1} />
-								</svg>
-							</>
+				<div className="flex flex-col sm:flex-row sm:items-center flex-wrap gap-x-4 gap-y-2 w-full">
+					{icon && <span className="flex-none sm:block hidden">{icon}</span>}
+					<div className="flex items-start sm:items-center flex-col sm:flex-row gap-y-2 sm:gap-y-0 w-full">
+						<p className="text-sm sm:leading-6 leading-tight text-gray-900">
+							{title && (
+								<>
+									<strong className="font-semibold sm:leading-tight leading-normal block sm:inline">
+										{title}
+									</strong>
+									<svg
+										viewBox="0 0 2 2"
+										aria-hidden="true"
+										className="mx-2 hidden sm:inline h-0.5 w-0.5 fill-current"
+									>
+										<circle r={1} cx={1} cy={1} />
+									</svg>
+								</>
+							)}
+							{announcement}
+						</p>
+						{link && (
+							<a
+								href={link}
+								className="mt-2 sm:mt-0 flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 w-auto"
+							>
+								{buttonText} <span aria-hidden="true">&rarr;</span>
+							</a>
 						)}
-						{announcement}
-					</p>
-					{link && (
-						<a
-							href={link}
-							className="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
-						>
-							{buttonText} <span aria-hidden="true">&rarr;</span>
-						</a>
-					)}
+					</div>
 				</div>
 				{closeButton && (
-					<div className="flex flex-1 justify-end">
+					<div className="mt-2 sm:mt-0 flex self-start sm:self-auto sm:flex-1 justify-end">
 						<button
 							type="button"
-							className="-m-3 p-3 focus-visible:outline-offset-[-4px]"
+							className="-m-2 sm:-m-3 p-2 sm:p-3 focus-visible:outline-offset-[-4px]"
 							onClick={handleClose}
 						>
 							<span className="sr-only">Dismiss</span>
diff --git a/pages/docs/config/custom-error.mdx b/pages/docs/config/custom-error.md
similarity index 100%
rename from pages/docs/config/custom-error.mdx
rename to pages/docs/config/custom-error.md
diff --git a/pages/docs/config/redirects.mdx b/pages/docs/config/redirects.md
similarity index 100%
rename from pages/docs/config/redirects.mdx
rename to pages/docs/config/redirects.md