diff --git a/backend/controllers/Shows.js b/backend/controllers/Shows.js
new file mode 100644
index 0000000..38cf0fd
--- /dev/null
+++ b/backend/controllers/Shows.js
@@ -0,0 +1,48 @@
+const ShowsModal = require("../models/Shows");
+
+const express = require("express");
+const router = express.Router();
+
+router.post("/Addshows", async function AddShow(req, resp) {
+  try {
+    const { title, description, venue, startDate, endDate, email, website } =
+      req.body;
+    if (
+      !title ||
+      !description ||
+      !venue ||
+      !startDate ||
+      !endDate ||
+      !email ||
+      !website
+    ) {
+      return resp.status(400).send({
+        message: "All fields are required",
+      });
+    }
+
+    const newShow = new ShowsModal({
+      title,
+      description,
+      venue,
+      startDate,
+      endDate,
+      email,
+      website,
+    });
+
+    const savedShow = await newShow.save();
+
+    resp.status(201).send({
+      message: "Show added successfully",
+      data: savedShow,
+    });
+  } catch (error) {
+    resp.status(500).send({
+      message: "An error occurred while adding the show",
+      error: error.message,
+    });
+  }
+});
+
+module.exports = router;
diff --git a/backend/index.js b/backend/index.js
index 876ab7f..0c0b7dc 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -4,6 +4,7 @@
 const express = require("express");
 const app = express();
 const userController = require("./controllers/auth");
+const AddShow = require("./controllers/Shows");
 const database = require("./config/database");
 const cookieParser = require("cookie-parser");
 const cors = require("cors");
@@ -22,26 +23,28 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(cookieParser());
 app.use(
-	cors({
-		origin: "*",
-		credentials: true,
-	})
+  cors({
+    origin: "*",
+    credentials: true,
+  })
 );
 
 // Setting up routes
 app.use("/api/v1/auth", userController);
 
+app.use("/api/v1/shows", AddShow);
+
 // Testing the server
 app.get("/", (req, res) => {
-	return res.json({
-		success: true,
-		message: "Your server is up and running ...",
-	});
+  return res.json({
+    success: true,
+    message: "Your server is up and running ...",
+  });
 });
 
 // Listening to the server
 app.listen(PORT, () => {
-	console.log(`App is listening at ${PORT}`);
+  console.log(`App is listening at ${PORT}`);
 });
 
 // End of code.
diff --git a/backend/models/Shows.js b/backend/models/Shows.js
new file mode 100644
index 0000000..3c5ae46
--- /dev/null
+++ b/backend/models/Shows.js
@@ -0,0 +1,36 @@
+const mongoose = require("mongoose");
+
+const ShowsSchema = mongoose.Schema(
+  {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    venue: {
+      type: String,
+      required: true,
+    },
+    startDate: {
+      type: Date,
+      required: true,
+    },
+    endDate: {
+      type: Date,
+      required: true,
+    },
+    email: {
+      type: String,
+      required: true,
+    },
+    website: {
+      type: String,
+    },
+  },
+  { timestamps: true }
+);
+
+module.exports = mongoose.model("shows", ShowsSchema);
diff --git a/src/components/ListShows.js b/src/components/ListShows.js
index 21869d5..e2a5286 100644
--- a/src/components/ListShows.js
+++ b/src/components/ListShows.js
@@ -1,17 +1,18 @@
-import React, { useState } from 'react';
-import Header from './Header';
-import Navbar from './NavBar';
-import Footer from './Footer';
+import React, { useState } from "react";
+import Header from "./Header";
+import Navbar from "./NavBar";
+import Footer from "./Footer";
+import toast, { Toaster } from "react-hot-toast";
 
 function ListShows() {
   const [formData, setFormData] = useState({
-    showTitle: '',
-    description: '',
-    venue: '',
-    startDate: '',
-    endDate: '',
-    contactEmail: '',
-    website: '',
+    showTitle: "",
+    description: "",
+    venue: "",
+    startDate: "",
+    endDate: "",
+    contactEmail: "",
+    website: "",
   });
 
   const handleChange = (e) => {
@@ -21,147 +22,216 @@ function ListShows() {
     });
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    // Handle form submission, e.g., send data to API
-    console.log('Show Submitted:', formData);
+
+    const {
+      showTitle,
+      description,
+      venue,
+      startDate,
+      endDate,
+      contactEmail,
+      website,
+    } = formData;
+
+    if (
+      !showTitle ||
+      !description ||
+      !venue ||
+      !startDate ||
+      !endDate ||
+      !contactEmail
+    ) {
+      toast.error("all fields are required");
+      return;
+    }
+
+    try {
+      const data = {
+        title: showTitle,
+        description,
+        venue,
+        startDate,
+        endDate,
+        email: contactEmail,
+        website,
+      };
+
+      const response = await fetch(
+        "http://localhost:4000/api/v1/shows/Addshows",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(data),
+        }
+      );
+
+      if (response.ok) {
+        const result = await response.json();
+
+        setFormData({
+          showTitle: "",
+          description: "",
+          venue: "",
+          startDate: "",
+          endDate: "",
+          contactEmail: "",
+          website: "",
+        });
+
+        toast.success("Show added successfully");
+      } else {
+        // Handle errors returned by the API
+        const errorData = await response.json();
+        console.error("Error submitting show:", errorData);
+        alert("Failed to submit the show");
+      }
+    } catch (error) {
+      console.error("Error submitting show:", error);
+      alert("Failed to submit the show");
+    }
   };
 
   return (
     <>
-    <Header/>
-    <Navbar/>
-    <div className="min-h-screen bg-gray-100 py-10 mt-5">
-      <div className="container mx-auto px-4">
-        <div className="text-center mb-12">
-          <h1 className="text-5xl font-bold text-red-600 mb-4">
-            List Your Show
-          </h1>
-          <p className="text-xl text-gray-700">
-            Submit your show details to feature it on our platform and reach a larger audience.
-          </p>
-        </div>
-        <form
-          onSubmit={handleSubmit}
-          className="bg-white shadow-2xl rounded-lg p-10 space-y-8 max-w-4xl mx-auto border border-red-200"
-        >
-          <div>
-            <label className="block text-lg font-medium text-gray-700 mb-2">
-              Show Title
-            </label>
-            <input
-              type="text"
-              name="showTitle"
-              value={formData.showTitle}
-              onChange={handleChange}
-              className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
-              placeholder="Enter the show title"
-              required
-            />
-          </div>
-
-          <div>
-            <label className="block text-lg font-medium text-gray-700 mb-2">
-              Description
-            </label>
-            <textarea
-              name="description"
-              value={formData.description}
-              onChange={handleChange}
-              className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
-              placeholder="Provide a brief description of the show"
-              rows="5"
-              required
-            ></textarea>
+      <Header />
+      <Toaster></Toaster>
+      <Navbar />
+      <div className="min-h-screen bg-gray-100 py-10 mt-5">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-12">
+            <h1 className="text-5xl font-bold text-red-600 mb-4">
+              List Your Show
+            </h1>
+            <p className="text-xl text-gray-700">
+              Submit your show details to feature it on our platform and reach a
+              larger audience.
+            </p>
           </div>
+          <form
+            onSubmit={handleSubmit}
+            className="bg-white shadow-2xl rounded-lg p-10 space-y-8 max-w-4xl mx-auto border border-red-200"
+          >
+            <div>
+              <label className="block text-lg font-medium text-gray-700 mb-2">
+                Show Title
+              </label>
+              <input
+                type="text"
+                name="showTitle"
+                value={formData.showTitle}
+                onChange={handleChange}
+                className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
+                placeholder="Enter the show title"
+                required
+              />
+            </div>
 
-          <div>
-            <label className="block text-lg font-medium text-gray-700 mb-2">
-              Venue
-            </label>
-            <input
-              type="text"
-              name="venue"
-              value={formData.venue}
-              onChange={handleChange}
-              className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
-              placeholder="Enter the venue"
-              required
-            />
-          </div>
+            <div>
+              <label className="block text-lg font-medium text-gray-700 mb-2">
+                Description
+              </label>
+              <textarea
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
+                placeholder="Provide a brief description of the show"
+                rows="5"
+                required
+              ></textarea>
+            </div>
 
-          <div className="grid md:grid-cols-2 gap-8">
             <div>
               <label className="block text-lg font-medium text-gray-700 mb-2">
-                Start Date
+                Venue
               </label>
               <input
-                type="date"
-                name="startDate"
-                value={formData.startDate}
+                type="text"
+                name="venue"
+                value={formData.venue}
                 onChange={handleChange}
                 className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
+                placeholder="Enter the venue"
                 required
               />
             </div>
+
+            <div className="grid md:grid-cols-2 gap-8">
+              <div>
+                <label className="block text-lg font-medium text-gray-700 mb-2">
+                  Start Date
+                </label>
+                <input
+                  type="date"
+                  name="startDate"
+                  value={formData.startDate}
+                  onChange={handleChange}
+                  className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-lg font-medium text-gray-700 mb-2">
+                  End Date
+                </label>
+                <input
+                  type="date"
+                  name="endDate"
+                  value={formData.endDate}
+                  onChange={handleChange}
+                  className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
+                  required
+                />
+              </div>
+            </div>
+
             <div>
               <label className="block text-lg font-medium text-gray-700 mb-2">
-                End Date
+                Contact Email
               </label>
               <input
-                type="date"
-                name="endDate"
-                value={formData.endDate}
+                type="email"
+                name="contactEmail"
+                value={formData.contactEmail}
                 onChange={handleChange}
                 className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
+                placeholder="Enter contact email"
                 required
               />
             </div>
-          </div>
 
-          <div>
-            <label className="block text-lg font-medium text-gray-700 mb-2">
-              Contact Email
-            </label>
-            <input
-              type="email"
-              name="contactEmail"
-              value={formData.contactEmail}
-              onChange={handleChange}
-              className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
-              placeholder="Enter contact email"
-              required
-            />
-          </div>
-
-          <div>
-            <label className="block text-lg font-medium text-gray-700 mb-2">
-              Website (optional)
-            </label>
-            <input
-              type="url"
-              name="website"
-              value={formData.website}
-              onChange={handleChange}
-              className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
-              placeholder="Enter show website"
-            />
-          </div>
+            <div>
+              <label className="block text-lg font-medium text-gray-700 mb-2">
+                Website (optional)
+              </label>
+              <input
+                type="url"
+                name="website"
+                value={formData.website}
+                onChange={handleChange}
+                className="w-full p-4 border border-gray-300 rounded-lg focus:ring-4 focus:ring-red-400 transition duration-300 focus:outline-none"
+                placeholder="Enter show website"
+              />
+            </div>
 
-          <div className="text-center">
-            <button
-              type="submit"
-              className="py-3 px-8 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition-transform transform hover:scale-105 duration-300"
-            >
-              Submit Show
-            </button>
-          </div>
-        </form>
+            <div className="text-center">
+              <button
+                type="submit"
+                className="py-3 px-8 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition-transform transform hover:scale-105 duration-300"
+              >
+                Submit Show
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
-    </div>
-    <Footer/>
+      <Footer />
     </>
   );
 }
 
-export default ListShows;
\ No newline at end of file
+export default ListShows;