diff --git a/package-lock.json b/package-lock.json
index 3340060eb..574bbbd5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,6 +49,7 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "docusaurus2-dotenv": "^1.4.0",
+        "dotenv": "^17.2.3",
         "express": "^5.1.0",
         "fontawesome": "^5.6.3",
         "framer-motion": "^12.10.5",
@@ -12465,6 +12466,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.2.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.3.tgz",
+      "integrity": "sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dotenv-defaults": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz",
diff --git a/package.json b/package.json
index e0593069f..cfa2dcc99 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "docusaurus2-dotenv": "^1.4.0",
+    "dotenv": "^17.2.3",
     "express": "^5.1.0",
     "fontawesome": "^5.6.3",
     "framer-motion": "^12.10.5",
diff --git a/src/pages/testing-page.tsx b/src/pages/testing-page.tsx
index b2844a6b3..823f59fb1 100644
--- a/src/pages/testing-page.tsx
+++ b/src/pages/testing-page.tsx
@@ -2,186 +2,186 @@
 import Layout from "@theme/Layout";
 
 // =========For AccordionDemo========
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../components/ui/accordion";
+// import {
+//   Accordion,
+//   AccordionContent,
+//   AccordionItem,
+//   AccordionTrigger,
+// } from "../components/ui/accordion";
 // ==============================
 // ======For AlertDialogDemo==========
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "../components/ui/alert-dialog";
-import { Button } from "../components/ui/button";
+// import {
+//   AlertDialog,
+//   AlertDialogAction,
+//   AlertDialogCancel,
+//   AlertDialogContent,
+//   AlertDialogDescription,
+//   AlertDialogFooter,
+//   AlertDialogHeader,
+//   AlertDialogTitle,
+//   AlertDialogTrigger,
+// } from "../components/ui/alert-dialog";
+// import { Button } from "../components/ui/button";
 // =====================================
 // ================For AlertDemo==========
-import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
-import { Terminal, AlertCircle } from "lucide-react";
+// import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+// import { Terminal, AlertCircle } from "lucide-react";
 // ========================================
 // ======== AspectRatioDemo
 
 // import Image from '@theme/IdealImage'
-import { AspectRatio } from "../components/ui/aspect-ratio";
+// import { AspectRatio } from "../components/ui/aspect-ratio";
 
 // ========================================
 // ========UserProfile
-import { 
-  Avatar, 
-  AvatarFallback, 
-  AvatarImage 
-} from "../components/ui/avatar";
+// import { 
+//   Avatar, 
+//   AvatarFallback, 
+//   AvatarImage 
+// } from "../components/ui/avatar";
 
 
-function AccordionDemo() {
-  return (
-    <div className="max-w-md mx-auto mt-10">
-      <h2 className="text-xl font-bold mb-4">Frequently Asked Questions</h2>
+// function AccordionDemo() {
+//   return (
+//     <div className="max-w-md mx-auto mt-10">
+//       <h2 className="text-xl font-bold mb-4">Frequently Asked Questions</h2>
       
-      {/* type="single" allows only one item to be open at a time */}
-      <Accordion type="single" collapsible className="w-full">
+//       {/* type="single" allows only one item to be open at a time */}
+//       <Accordion type="single" collapsible className="w-full">
         
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Is it accessible?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="item-2">
-          <AccordionTrigger>Is it styled?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It comes with default styles that matches the other
-            components&apos; aesthetic.
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="item-3">
-          <AccordionTrigger>Is it animated?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It's animated by default, but you can disable it if you prefer.
-          </AccordionContent>
-        </AccordionItem>
-
-      </Accordion>
-    </div>
-  );
-}
-
-function AlertDialogDemo() {
-  const handleDelete = () => {
-    // Your logic for deletion goes here
-    console.log("Item deleted successfully.");
-  };
-
-  return (
-    <AlertDialog>
-      {/* 1. The Trigger: Usually a button that opens the dialog */}
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive">Delete Account</Button>
-      </AlertDialogTrigger>
-
-      {/* 2. The Content: The actual modal window */}
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-
-        {/* 3. The Footer: Contains the Action and Cancel buttons */}
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={handleDelete}>
-            Continue
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
-
-function AlertDemo() {
-  return (
-    <div className="flex flex-col gap-4 max-w-xl mx-auto mt-10">
+//         <AccordionItem value="item-1">
+//           <AccordionTrigger>Is it accessible?</AccordionTrigger>
+//           <AccordionContent>
+//             Yes. It adheres to the WAI-ARIA design pattern.
+//           </AccordionContent>
+//         </AccordionItem>
+
+//         <AccordionItem value="item-2">
+//           <AccordionTrigger>Is it styled?</AccordionTrigger>
+//           <AccordionContent>
+//             Yes. It comes with default styles that matches the other
+//             components&apos; aesthetic.
+//           </AccordionContent>
+//         </AccordionItem>
+
+//         <AccordionItem value="item-3">
+//           <AccordionTrigger>Is it animated?</AccordionTrigger>
+//           <AccordionContent>
+//             Yes. It's animated by default, but you can disable it if you prefer.
+//           </AccordionContent>
+//         </AccordionItem>
+
+//       </Accordion>
+//     </div>
+//   );
+// }
+
+// function AlertDialogDemo() {
+//   const handleDelete = () => {
+//     // Your logic for deletion goes here
+//     console.log("Item deleted successfully.");
+//   };
+
+//   return (
+//     <AlertDialog>
+//       {/* 1. The Trigger: Usually a button that opens the dialog */}
+//       <AlertDialogTrigger asChild>
+//         <Button variant="destructive">Delete Account</Button>
+//       </AlertDialogTrigger>
+
+//       {/* 2. The Content: The actual modal window */}
+//       <AlertDialogContent>
+//         <AlertDialogHeader>
+//           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+//           <AlertDialogDescription>
+//             This action cannot be undone. This will permanently delete your
+//             account and remove your data from our servers.
+//           </AlertDialogDescription>
+//         </AlertDialogHeader>
+
+//         {/* 3. The Footer: Contains the Action and Cancel buttons */}
+//         <AlertDialogFooter>
+//           <AlertDialogCancel>Cancel</AlertDialogCancel>
+//           <AlertDialogAction onClick={handleDelete}>
+//             Continue
+//           </AlertDialogAction>
+//         </AlertDialogFooter>
+//       </AlertDialogContent>
+//     </AlertDialog>
+//   );
+// }
+
+// function AlertDemo() {
+//   return (
+//     <div className="flex flex-col gap-4 max-w-xl mx-auto mt-10">
       
-      {/* Default Alert */}
-      <Alert className="bg-green-700 text-white">
-        <Terminal className="h-4 w-4" />
-        <AlertTitle>Heads up!</AlertTitle>
-        <AlertDescription>
-          You can add components to your app using the cli.
-        </AlertDescription>
-      </Alert>
-
-      {/* Destructive Alert */}
-      <Alert variant="destructive" className="bg-red-700text-white">
-        <AlertCircle className="h-4 w-4" />
-        <AlertTitle>Error</AlertTitle>
-        <AlertDescription>
-          Your session has expired. Please log in again to continue.
-        </AlertDescription>
-      </Alert>
-
-    </div>
-  );
-}
-
-function AspectRatioDemo() {
-  return (
-    <div className="w-[450px] overflow-hidden rounded-md border shadow-sm">
-      <AspectRatio ratio={16 / 9}>
-        <img
-          src="https://github.com/ajay-dhangar.png"
-          alt="Photo by Drew Beamer"
-          className="h-full w-full object-cover"
-        />
-      </AspectRatio>
-      <div className="p-4">
-        <h4 className="text-sm font-medium">Landscape View</h4>
-        <p className="text-xs text-muted-foreground">16:9 Aspect Ratio</p>
-      </div>
-    </div>
-  );
-}
-
-function UserProfile() {
-  return (
-    <div className="flex items-center gap-4 p-4">
+//       {/* Default Alert */}
+//       <Alert className="bg-green-700 text-white">
+//         <Terminal className="h-4 w-4" />
+//         <AlertTitle>Heads up!</AlertTitle>
+//         <AlertDescription>
+//           You can add components to your app using the cli.
+//         </AlertDescription>
+//       </Alert>
+
+//       {/* Destructive Alert */}
+//       <Alert variant="destructive" className="bg-red-700text-white">
+//         <AlertCircle className="h-4 w-4" />
+//         <AlertTitle>Error</AlertTitle>
+//         <AlertDescription>
+//           Your session has expired. Please log in again to continue.
+//         </AlertDescription>
+//       </Alert>
+
+//     </div>
+//   );
+// }
+
+// function AspectRatioDemo() {
+//   return (
+//     <div className="w-[450px] overflow-hidden rounded-md border shadow-sm">
+//       <AspectRatio ratio={16 / 9}>
+//         <img
+//           src="https://github.com/ajay-dhangar.png"
+//           alt="Photo by Drew Beamer"
+//           className="h-full w-full object-cover"
+//         />
+//       </AspectRatio>
+//       <div className="p-4">
+//         <h4 className="text-sm font-medium">Landscape View</h4>
+//         <p className="text-xs text-muted-foreground">16:9 Aspect Ratio</p>
+//       </div>
+//     </div>
+//   );
+// }
+
+// function UserProfile() {
+//   return (
+//     <div className="flex items-center gap-4 p-4">
       
-      {/* 1. Standard usage with an image */}
-      <Avatar>
-        <AvatarImage src="https://github.com/ajay-dhangar.png" alt="@ajay-dhangar" />
-        <AvatarFallback>Aj</AvatarFallback>
-      </Avatar>
-
-      {/* 2. Fallback usage (e.g., if the image URL is broken or null) */}
-      <Avatar>
-        <AvatarImage src="" alt="Broken Link" />
-        <AvatarFallback className="bg-blue-500 text-white">
-          AJ
-        </AvatarFallback>
-      </Avatar>
-
-      {/* 3. Custom Sizes (using Tailwind classes) */}
-      <Avatar className="h-16 w-16">
-        <AvatarImage src="https://github.com/docusaurus.png" />
-        <AvatarFallback>Docusaurus</AvatarFallback>
-      </Avatar>
-
-    </div>
-  );
-}
+//       {/* 1. Standard usage with an image */}
+//       <Avatar>
+//         <AvatarImage src="https://github.com/ajay-dhangar.png" alt="@ajay-dhangar" />
+//         <AvatarFallback>Aj</AvatarFallback>
+//       </Avatar>
+
+//       {/* 2. Fallback usage (e.g., if the image URL is broken or null) */}
+//       <Avatar>
+//         <AvatarImage src="" alt="Broken Link" />
+//         <AvatarFallback className="bg-blue-500 text-white">
+//           AJ
+//         </AvatarFallback>
+//       </Avatar>
+
+//       {/* 3. Custom Sizes (using Tailwind classes) */}
+//       <Avatar className="h-16 w-16">
+//         <AvatarImage src="https://github.com/docusaurus.png" />
+//         <AvatarFallback>Docusaurus</AvatarFallback>
+//       </Avatar>
+
+//     </div>
+//   );
+// }
 
 export default function TestingPage() {
 
@@ -192,7 +192,7 @@ export default function TestingPage() {
         {/* <AlertDialogDemo /> */}
         {/* <AlertDemo /> */}
         {/* <AspectRatioDemo /> */}
-        <UserProfile />
+        {/* <UserProfile /> */}
 
       </main>
     </Layout>