diff --git a/package-lock.json b/package-lock.json
index 75c10c2..5cbc6bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@tailwindcss/forms": "^0.5.0",
         "autoprefixer": "^10.4.4",
         "postcss": "^8.4.12",
         "tailwindcss": "^3.0.23"
@@ -3204,6 +3205,18 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.0.tgz",
+      "integrity": "sha512-KzWugryEBFkmoaYcBE18rs6gthWCFHHO7cAZm2/hv3hwD67AzwP7udSCa22E7R1+CEJL/FfhYsJWrc0b1aeSzw==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.12.0.tgz",
@@ -11162,6 +11175,15 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -18374,6 +18396,15 @@
         "loader-utils": "^2.0.0"
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.0.tgz",
+      "integrity": "sha512-KzWugryEBFkmoaYcBE18rs6gthWCFHHO7cAZm2/hv3hwD67AzwP7udSCa22E7R1+CEJL/FfhYsJWrc0b1aeSzw==",
+      "dev": true,
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "@testing-library/dom": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.12.0.tgz",
@@ -24206,6 +24237,12 @@
         }
       }
     },
+    "mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
diff --git a/package.json b/package.json
index d9ef06c..f86017b 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     ]
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.0",
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
     "tailwindcss": "^3.0.23"
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 92d1766..7768770 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -1,6 +1,8 @@
+import React, { useState } from "react"
 import Navbar from "../components/Navbar";
 
 const UserDashboard = () => {
+  const [showModal, setShowModal] = useState(false);
   return (
     <div className="wrapper">
       <header>
@@ -44,6 +46,7 @@ const UserDashboard = () => {
                 <a
                   href="#"
                   class=" text-primary rounded-lg pt-4   text-md font-semibold  hover:text-secondary "
+                  onClick={() => setShowModal(true)}
                 >
                   <i class="fa-solid fa-plus pr-2 text-primary  text-sm w- text-center mx-auto "></i>
                   Create Feed
@@ -84,6 +87,7 @@ const UserDashboard = () => {
 
                     <a href="">
                       <i class="fa-solid fa-thumbs-down text-white text-sm w- text-center mx-auto py-2 px-3"></i>
+                      <span className="text-xs ">4</span>
                     </a>
                   </div>
                 </div>
@@ -119,6 +123,7 @@ const UserDashboard = () => {
 
                     <a href="">
                       <i class="fa-solid fa-thumbs-down text-white text-sm w- text-center mx-auto py-2 px-3"></i>
+                      <span className="text-xs ">4</span>
                     </a>
                   </div>
                 </div>
@@ -162,6 +167,95 @@ const UserDashboard = () => {
           </div>
         </div>
       </header>
+
+
+    {/* feed creation modal section starts */}
+
+      <>
+      {showModal ? (
+        <>
+          <div className="flex justify-center items-center overflow-x-hidden overflow-y-auto fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full">
+            <div className="relative p-3 w-full max-w-2xl h-full md:h-auto">
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                <div className="flex items-start justify-between p-3 border-b border-solid border-gray-300 rounded-t ">
+                  <h6 className="text-xl font=semibold">Create new feed</h6>
+                  <button
+                    className="bg-transparent border-0 text-black float-right"
+                    onClick={() => setShowModal(false)}
+                  >
+                    <span className="text-black opacity-7 h-6 w-6 text-xl block py-0 rounded-full">
+                    <i class="fa-solid fa-circle-xmark" style={{color: '#034B5A'}}></i>
+                    </span>
+                  </button>
+                </div>
+                <div className="relative p-6 flex-auto">
+                  <form action="">
+
+                    {/* feed title and Thematic areas */}
+                    <div className="flex">
+                        <div className="flex-auto w-80">
+                            <label for="small-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Feed Title</label>
+                            <input type="text" id="small-input" class="block p-2 w-fit text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Title" name="feed_title" />
+                        </div>
+
+                        <div className="flex-auto w-80">
+                            <label for="small-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Feed Theme</label>
+                            <select class="form-select appearance-none block w-full p-2 font-light text-sm text-gray-900 bg-gray-50 bg-clip-padding bg-no-repeat border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" aria-label="feed thematic area" name="tag">
+                            <option selected disabled>Select feed thematic area</option>
+                            <option value="Gender equality">Gender equality</option>
+                            <option value="Fiscal transparency">Fiscal transparency</option>
+                            <option value="Citizens engagement">Citizens engagement</option>
+                            <option value="Extractive transparency">Extractive transparency</option>
+                            <option value="Peace and Security">Peace and Security</option>
+                           </select>
+                        </div>
+                    </div>
+
+                    {/* feed Description */}
+                    <div className="mt-6">
+                          <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Feed Description</label>
+                          <textarea id="feed_description" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Description..." name="feed_description"></textarea>
+                    </div>
+
+                    {/* feed medias */}
+                    <div className="flex items-end justify-between my-7">
+                        <div>
+                          <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="user_avatar">Feed Media</label>
+                          <input class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" aria-describedby="feed_media_help" id="feed_media" type="file" name="feed_media" />
+                        </div>
+
+
+                        <div>
+                          <a href="#" class=" text-primary rounded-lg pt-4 text-md font-semibold">
+                            <i class="fa-solid fa-plus pr-2 text-primary  text-sm w- text-center "></i>add file
+                          </a>
+                        </div>
+                    </div>
+                  </form>
+                </div>
+                <div className="flex items-center justify-end p-4 border-t border-solid border-blueGray-200 rounded-b">
+                  <button
+                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
+                    type="button"
+                    onClick={() => setShowModal(false)}
+                  >
+                    Close
+                  </button>
+                  <button
+                    className="text-white bg-primary active:bg-yellow-700 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
+                    type="button"
+                  >
+                    Create
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </>
+
+    {/* feed creation modal section ends */}
     </div>
   );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index a8f2938..7f938c0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,5 +14,7 @@ module.exports = {
       }
     },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
 }