diff --git a/docs/intro.md b/docs/intro.md
deleted file mode 100644
index 4025e02c8..000000000
--- a/docs/intro.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-sidebar_position: 1
-description: Get started with Docusaurus in less than 50 minutes.
-sidebar_label: Quick Start
-title: Quick Start
----
-
-# Tutorial Intro
-
-Hello Shubhadip **Docusaurus in less than 5 minutes**.
-
-## Getting Started
-
-Get started by **creating a new site**.
-
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
-
-### What you'll need
-
-- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**.
-
-The classic template will automatically be added to your project after you run the command:
-
-```bash
-npm init docusaurus@latest my-website classic
-```
-
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
-
-The command also installs all necessary dependencies you need to run Docusaurus.
-
-## Start your site
-
-Run the development server:
-
-```bash
-cd my-website
-npm run start
-```
-
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
-
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
-
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
diff --git a/docs/intro.mdx b/docs/intro.mdx
new file mode 100644
index 000000000..1d6f7ff0a
--- /dev/null
+++ b/docs/intro.mdx
@@ -0,0 +1,20 @@
+---
+sidebar_position: 1
+description: Get started with Docusaurus in less than 50 minutes.
+sidebar_label: Introduction
+title: Introduction
+---
+
+import CustomTag from "@site/src/components/TagsComponents/CustomTag";
+import Callout from "@site/src/components/Callout/Callout";
+import { useState } from "react";
+import ToastMessage from "@site/src/components/Toast/Toast";
+import React, { useState } from "react";
+
+# Toast Message
+
+# Example MDX File
+
+Some content before the toast message.
+
+<ToastMessage />
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 92fc5a354..d8c40805e 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -53,9 +53,9 @@ const config = {
     ({
       // Replace with your project's social card
       algolia: {
-        apiKey: "f60c2ae59dd332b43d4efef67ad46e87",
-        indexName: "30-days-of-cpp",
-        appId: "OU047TL2DP",
+        apiKey: "4eadbd9906c2db99f8c4d53bb7202144",
+        indexName: "subhadipbhowmik",
+        appId: "SKRAQTXG41",
         contextualSearch: true,
         placeholder: "Search Tutorial",
       },
diff --git a/src/components/Callout/Callout.js b/src/components/Callout/Callout.js
new file mode 100644
index 000000000..6324e29ee
--- /dev/null
+++ b/src/components/Callout/Callout.js
@@ -0,0 +1,18 @@
+// Callout.js
+import React from "react";
+
+const Callout = ({ type, children }) => {
+  const styles = {
+    border: "2px solid",
+    padding: "10px",
+    borderRadius: "5px",
+    backgroundColor:
+      type === "info" ? "#e2f0ff" : type === "warning" ? "#ffe5b3" : "#d9f7be",
+    borderColor:
+      type === "info" ? "#1890ff" : type === "warning" ? "#faad14" : "#52c41a",
+  };
+
+  return <div style={styles}>{children}</div>;
+};
+
+export default Callout;
diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
new file mode 100644
index 000000000..1b129a889
--- /dev/null
+++ b/src/components/Toast/Toast.js
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import "./toastStyles.css"; // Import CSS file for styling
+
+const ToastMessage = () => {
+  const [showToast, setShowToast] = useState(false);
+
+  const toggleToast = () => {
+    setShowToast(!showToast);
+    // Automatically hide the toast after 3 seconds (3000 milliseconds)
+    setTimeout(() => {
+      setShowToast(false);
+    }, 3000);
+  };
+
+  return (
+    <div>
+      <button onClick={toggleToast}>Show Toast</button>
+
+      {showToast && (
+        <div className="toast">
+          <span className="toast-text">This is a toast message!</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ToastMessage;
diff --git a/src/components/Toast/toastStyles.css b/src/components/Toast/toastStyles.css
new file mode 100644
index 000000000..710e6cd30
--- /dev/null
+++ b/src/components/Toast/toastStyles.css
@@ -0,0 +1,17 @@
+/* toastStyles.css */
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 5px;
+  z-index: 9999;
+}
+
+.toast-text {
+  font-size: 16px;
+}