diff --git a/package-lock.json b/package-lock.json
index 39df48c..13f7c1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
+        "@material-tailwind/react": "^2.1.9",
         "@mui/icons-material": "^5.15.17",
         "@mui/material": "^5.15.17",
         "@react-google-maps/api": "^2.19.3",
@@ -22,6 +23,7 @@
         "openai": "^4.47.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-feather": "^2.0.10",
         "react-icons": "^5.2.1",
         "react-markdown": "^9.0.1",
         "react-router-dom": "^6.23.1",
@@ -2618,6 +2620,20 @@
         "@floating-ui/utils": "^0.2.0"
       }
     },
+    "node_modules/@floating-ui/react": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.0.tgz",
+      "integrity": "sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^1.2.2",
+        "aria-hidden": "^1.1.3",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@floating-ui/react-dom": {
       "version": "2.0.9",
       "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
@@ -2630,6 +2646,18 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@floating-ui/react/node_modules/@floating-ui/react-dom": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz",
+      "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@floating-ui/utils": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
@@ -2910,6 +2938,115 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
+    "node_modules/@material-tailwind/react": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.9.tgz",
+      "integrity": "sha512-3uPlJE9yK4JF9DEQO4I1QbjR8o05+4fysLqoZ0v38TDOLE2tvDRhTBVhn6Mp9vSsq5CoJOKgemG7kbkOFAji4A==",
+      "dependencies": {
+        "@floating-ui/react": "0.19.0",
+        "classnames": "2.3.2",
+        "deepmerge": "4.2.2",
+        "framer-motion": "6.5.1",
+        "material-ripple-effects": "2.0.1",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "tailwind-merge": "1.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/@motionone/animation": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz",
+      "integrity": "sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==",
+      "dependencies": {
+        "@motionone/easing": "^10.17.0",
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.17.0.tgz",
+      "integrity": "sha512-Bxe2wSuLu/qxqW4rBFS5m9tMLOw+QBh8v5A7Z5k4Ul4sTj5jAOfZG5R0bn5ywmk+Fs92Ij1feZ5pmC4TeXA8Tg==",
+      "dependencies": {
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.17.0.tgz",
+      "integrity": "sha512-T6Uo5bDHrZWhIfxG/2Aut7qyWQyJIWehk6OB4qNvr/jwA/SRmixwbd7SOrxZi1z5rH3LIeFFBKK1xHnSbGPZSQ==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.0.tgz",
+      "integrity": "sha512-EgeeqOZVdRUTEHq95Z3t8Rsirc7chN5xFAPMYFobx8TPubkEfRSm5xihmMUkbaR2ErKJTUw3347QDPTHIW12IA=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.17.0.tgz",
+      "integrity": "sha512-bGwrki4896apMWIj9yp5rAS2m0xyhxblg6gTB/leWDPt+pb410W8lYWsxyurX+DH+gO1zsQsfx2su/c1/LtTpg==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.40",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
@@ -4783,6 +4920,17 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -5748,6 +5896,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz",
       "integrity": "sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -8413,6 +8566,49 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -8850,6 +9046,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -10857,6 +11058,11 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/material-ripple-effects": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/material-ripple-effects/-/material-ripple-effects-2.0.1.tgz",
+      "integrity": "sha512-hHlUkZAuXbP94lu02VgrPidbZ3hBtgXBtjlwR8APNqOIgDZMV8MCIcsclL8FmGJQHvnORyvoQgC965vPsiyXLQ=="
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz",
@@ -12388,6 +12594,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -13991,6 +14208,17 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-feather": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.10.tgz",
+      "integrity": "sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
@@ -16464,6 +16692,15 @@
         "inline-style-parser": "0.2.3"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16752,6 +16989,16 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
+    "node_modules/tailwind-merge": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.8.1.tgz",
+      "integrity": "sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
diff --git a/package.json b/package.json
index 1eb0aea..67a6243 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@material-tailwind/react": "^2.1.9",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
     "@react-google-maps/api": "^2.19.3",
@@ -26,6 +27,7 @@
     "openai": "^4.47.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-feather": "^2.0.10",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.23.1",
diff --git a/src/App.css b/src/App.css
index 67c4b31..74723e3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,7 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Reem Kufi", sans-serif !important;
+  font-family: "Reem Kufi", sans-serif ;
 }
 
 img {
diff --git a/src/Assets/SliderImages/gif1.gif b/src/Assets/SliderImages/gif1.gif
new file mode 100644
index 0000000..53c47e5
Binary files /dev/null and b/src/Assets/SliderImages/gif1.gif differ
diff --git a/src/Assets/SliderImages/gif2.gif b/src/Assets/SliderImages/gif2.gif
new file mode 100644
index 0000000..4caae04
Binary files /dev/null and b/src/Assets/SliderImages/gif2.gif differ
diff --git a/src/Assets/SliderImages/img1.jpg b/src/Assets/SliderImages/img1.jpg
new file mode 100644
index 0000000..b6035ef
Binary files /dev/null and b/src/Assets/SliderImages/img1.jpg differ
diff --git a/src/Assets/SliderImages/img2.png b/src/Assets/SliderImages/img2.png
new file mode 100644
index 0000000..e77ddce
Binary files /dev/null and b/src/Assets/SliderImages/img2.png differ
diff --git a/src/Assets/smiling.mp4 b/src/Assets/smiling.mp4
new file mode 100644
index 0000000..cc7b955
Binary files /dev/null and b/src/Assets/smiling.mp4 differ
diff --git a/src/Components/About.js b/src/Components/About.js
index eece38d..fdcd0f3 100644
--- a/src/Components/About.js
+++ b/src/Components/About.js
@@ -5,7 +5,7 @@ import { BsFillPlayCircleFill } from "react-icons/bs";
 
 const About = () => {
   return (
-    <div className="about-section-container" id="about">
+    <div className="about-section-container mt-96 " id="about">
       <div className="about-background-image-container">
         <img src={AboutBackground} alt="" />
       </div>
diff --git a/src/Components/Corousel.js b/src/Components/Corousel.js
new file mode 100644
index 0000000..c758396
--- /dev/null
+++ b/src/Components/Corousel.js
@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from "react-feather";
+
+const Carousel = ({ children: slides, autoSlide = false, autoSlideInterval = 3000 }) => {
+    const [curr, setCurr] = useState(0);
+
+    const prev = () => setCurr((curr) => (curr === 0 ? slides.length - 1 : curr - 1));
+
+    const next = () => setCurr((curr) => (curr === slides.length - 1 ? 0 : curr + 1));
+
+    useEffect(() => {
+        if (!autoSlide) return;
+        const slideInterval = setInterval(next, autoSlideInterval);
+        return () => clearInterval(slideInterval);
+    }, []);
+
+    return (
+        <div className='overflow-hidden relative h-screen w-full'>
+            <div className='flex transition-transform ease-out duration-500' style={{ transform: `translateX(-${curr * 100}%)`, width: `${slides.length * 100}%` }}>
+                {slides.map((slide, index) => (
+                    <div key={index} className="w-full flex-shrink-0">
+                        {slide}
+                    </div>
+                ))}
+            </div>
+            <div className="absolute inset-0 flex items-center justify-between p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12">
+                <button onClick={prev} className='p-1 rounded-full shadow bg-white/80 text-gray-800 hover:bg-white'>
+                    <ChevronLeft />
+                </button>
+                <button onClick={next} className='p-1 rounded-full shadow bg-white/80 text-gray-800 hover:bg-white'>
+                    <ChevronRight />
+                </button>
+            </div>
+            <div className='absolute bottom-4 right-0 left-0'>
+                <div className='flex items-center justify-center gap-2'>
+                    {slides.map((_, i) => (
+                        <div key={i} className={`transition-all w-1.5 h-1.5 bg-white rounded-full ${curr === i ? "p-0.5" : "bg-opacity-50"}`} />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Carousel;
diff --git a/src/Components/Home.js b/src/Components/Home.js
index a1650ba..8677dc5 100644
--- a/src/Components/Home.js
+++ b/src/Components/Home.js
@@ -6,37 +6,34 @@ import About from "./About";
 import Contact from "./Contact";
 import Testimonial from "./Testimonial";
 import { Link } from "react-router-dom";
+import Carousel from "./Corousel.js"; // Ensure this path is correct
+import img1 from "../Assets/SliderImages/img1.jpg";
+import img2 from "../Assets/SliderImages/img2.png";
+import gif1 from "../Assets/SliderImages/gif1.gif";
+import gif2 from "../Assets/SliderImages/gif2.gif";
+import vid from "../Assets/smiling.mp4";
+const slides = [
+  <img key="gif1" className="h-screen w-screen" src={gif1} alt="Slide 1" />,
+  <img key="gif2" className="h-screen w-screen" src={gif2} alt="Slide 2" />,
+  <img key="img1" className="h-screen w-screen" src={img1} alt="Slide 3" />,
+  <img key="img2" className="h-screen w-screen" src={img2} alt="Slide 4" />,
+];
 
 const Home = () => {
   return (
     <>
-      <div className="home-container mx-16 my-6">
-        <div className="home-banner-container">
-          <div className="home-bannerImage-container pt-4">
-            <img src={BannerBackground} alt="" className="rotate-180 " />
-          </div>
-          <div className="home-text-section">
-            <h1 className="primary-heading">EVENTS</h1>
-            <p className="primary-text text-bold">
-              Discover exciting events happening near you! <br />
-              Whether you're a culture enthusiast, a music lover, a foodie, or
-              an outdoor adventurer, there's something for everyone to discover
-              and enjoy.
-            </p>
-            <Link to="/events">
-            <button className="secondary-button">
-              {"Go to Events"}
-              <FiArrowRight />
-            </button>
-            </Link>
-          </div>
-          <div className="home-image-section">
-            <img src={BannerImage} alt="" />
+      <div className=" home-container">
+        <div className="flex absolute h-screen  bg-black">
+          <Carousel autoSlide autoSlideInterval={5000}>
+            {slides}
+          </Carousel>
+          <div className="absolute z-100 sm:text-6xl justify-center mt-80 ml-8 text-white font-pacifico">
+            Plan Smarter, Celebrate Bigger with EventPlannerAI!
           </div>
         </div>
+      </div>
+      <div className=" bg-[#F6E2C0] sm:mt-24 mt-80">
         <About />
-        <Contact />
-        <Testimonial />
       </div>
     </>
   );
diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js
index 7c9b167..150a9dc 100644
--- a/src/Components/Navbar.js
+++ b/src/Components/Navbar.js
@@ -41,14 +41,15 @@ const Navbar = () => {
     },
   ];
   return (
-    <nav className="w-full  border border-gray-200 bg-[#F6E2C0] py-4 z-50 mb-4">
+    <nav className="w-full  border border-gray-200 bg-[#F6E2C0] py-4 z-50">
       <div className="nav-logo-container w-16 mx-8 text-8xl">
         <img src={logo} alt="" />
       </div>
       <div className="navbar-links-container">
-        <ul className="flex flex-wrap  items-center">
+        <ul className="flex flex-wrap  items-center ">
           <li>
-            <Link to="/">Home</Link>
+            <Link 
+            to="/" >Home</Link>
           </li>
           <li>
           <a href="#about">About</a>
diff --git a/src/index.css b/src/index.css
index bd6213e..afe0204 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index c0958ec..0fdee9a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        pacifico: ["Pacifico", "cursive"],
+      },
+    },
   },
   plugins: [],
-}
-
+};