diff --git a/client/package-lock.json b/client/package-lock.json
index d22fae3..d237f24 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.4.0",
         "classnames": "^2.3.2",
+        "framer-motion": "^10.12.18",
         "immer": "^9.0.21",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2130,6 +2131,21 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "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/@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/@eslint/eslintrc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
@@ -8248,6 +8264,29 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.12.18",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.18.tgz",
+      "integrity": "sha512-cfhiUpPbj+0eEWKjuD+5cz5cMqH71xOtMxGiS/cSGfHn2OlHIEAqFnFyzEMENw5PxWR9bMVhatzzpD6lexmHZQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -18522,6 +18561,21 @@
       "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==",
       "requires": {}
     },
+    "@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,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@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
+    },
     "@eslint/eslintrc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
@@ -23033,6 +23087,15 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
     },
+    "framer-motion": {
+      "version": "10.12.18",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.18.tgz",
+      "integrity": "sha512-cfhiUpPbj+0eEWKjuD+5cz5cMqH71xOtMxGiS/cSGfHn2OlHIEAqFnFyzEMENw5PxWR9bMVhatzzpD6lexmHZQ==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
diff --git a/client/package.json b/client/package.json
index 24e57ea..fa3a6a0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
     "classnames": "^2.3.2",
+    "framer-motion": "^10.12.18",
     "immer": "^9.0.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/client/src/components/Footer.js b/client/src/components/Footer.js
index ffe0311..f8a3eeb 100644
--- a/client/src/components/Footer.js
+++ b/client/src/components/Footer.js
@@ -7,9 +7,9 @@ export const Footer = () => {
                     in touch</h1>
             </div>
             <div className="flex mt-8 flex-col md:flex-row md:justify-between">
-                <p className="w-full md:w-2/3 text-gray-200">To ensure that all Wikipedia content is verifiable, anyone may question an uncited claim. If your work has been tagged</p>
+                <p className="w-full md:w-2/3 text-gray-200">The website may stop working if Flipkart changes its website. To report the problem, open an issue by clicking on the button.</p>
                 <div className="w-44 pt-6 md:pt-0">
-                    <a href="" className="bg-red-500 justify-center text-center rounded-lg shadow px-10 py-3 flex items-center">Contact US</a>
+                    <a href="/ayush-raj13/WebScrapideo/issues" className="bg-red-500 justify-center text-center rounded-lg shadow px-10 py-3 flex items-center">Create issue.</a>
                 </div>
             </div>
         </div>
diff --git a/client/src/components/Hero.js b/client/src/components/Hero.js
index e479586..8660ec1 100644
--- a/client/src/components/Hero.js
+++ b/client/src/components/Hero.js
@@ -1,13 +1,15 @@
 function Hero({title, desc}) {
   return (
-    <div className="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% py-12">
-      <div className="max-w-7xl mx-auto">
-        <div className="text-center">
-          <h1 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl 2xl:text-5xl font-bold text-white mb-6">{title}</h1>
-          <p className="text-base md:text-lg text-white">{desc}</p>
+    <header className="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% py-6">
+        <div className="container mx-auto px-4">
+          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white">
+            {title}
+          </h1>
+          <p className="text-lg text-slate-200 mt-2">
+            {desc}
+          </p>
         </div>
-      </div>
-    </div>
+      </header>
   )
 }
 
diff --git a/client/src/pages/homePage.js b/client/src/pages/homePage.js
index cb8b8a7..10c4b1c 100644
--- a/client/src/pages/homePage.js
+++ b/client/src/pages/homePage.js
@@ -1,9 +1,177 @@
-function HomePage() {
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import Hero from '../components/Hero';
+
+const HomePage = () => {
+  const [showAllWebsites, setShowAllWebsites] = useState(false);
+
+  const handleReadMore = () => {
+    setShowAllWebsites((prev) => !prev);
+  };
   return (
-    <div className="flex justify-center items-center min-h-screen">
-      <h1>Home Page</h1>
+    <>
+    <div className="bg-gray-100">
+      <Hero title="WebScrapideo" desc="Data extraction from HTML made easy"/>
+
+      <section className="py-20">
+        <div className="container mx-auto px-4">
+          <div className="flex flex-wrap items-center justify-center">
+          <motion.div
+            className="w-full md:w-1/2 lg:w-1/3 px-4 mb-8"
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <div className="bg-white rounded-lg shadow-lg p-6">
+              <div className="flex items-center justify-center mb-4">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-12 w-12 text-indigo-500"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M9 4a1 1 0 0 0-1 1v6H5a1 1 0 1 0 0 2h3v2a1 1 0 1 0 2 0v-2h3a1 1 0 1 0 0-2h-3V5a1 1 0 0 0-1-1z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </div>
+              <h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800">
+                Text Summarizer
+              </h2>
+              <p className="text-gray-600">
+                Summarize text and HTML pages with ease using our Text Summarizer feature. It leverages the power of the Sumy library, which supports various summarization methods including:
+              </p>
+              <ul className="list-disc pl-6 mt-4">
+                <li className="text-gray-600">LSA (Latent Semantic Analysis)</li>
+                <li className="text-gray-600">TextRank</li>
+                <li className="text-gray-600">LexRank</li>
+                <li className="text-gray-600">Edmundson's method</li>
+                <li className="text-gray-600">Luhn's algorithm</li>
+                <li className="text-gray-600">KL-Sum</li>
+                <li className="text-gray-600">Reduction</li>
+              </ul>
+              <p className="text-gray-600 mt-4">
+                Each method offers unique approaches to extract important information and create concise summaries. With WebScrapideo, you can access these summarization methods in one place, making text summarization a breeze.
+              </p>
+            </div>
+          </motion.div>
+
+            <motion.div
+              className="w-full md:w-1/2 lg:w-1/3 px-4 mb-8"
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <div className="bg-white rounded-lg shadow-lg p-6">
+                <div className="flex items-center justify-center mb-4">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-12 w-12 text-indigo-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M4 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2H4V5zm0 6h6v2H4v-2zm0 4h6v2H4v-2zm10-6h2v8h-2v-8zm2-4a1 1 0 0 0-1-1h-2v2h2V5zm0 4h-2v2h2V9zm0 4h-2v2h2v-2zm2-6a1 1 0 0 0-1-1h-2v2h2V7z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800">
+                  Flipkart Web Scraping
+                </h2>
+                <p className="text-gray-600">
+                  Extract data from Flipkart effortlessly with our Flipkart Web Scraping feature. Powered by the BeautifulSoup library, it allows you to select the specific data you want to scrape and preview the result before downloading it in CSV format. Use cases for the scraped data from Flipkart include:
+                </p>
+                <ul className="list-disc pl-6 mt-4">
+                  <li className="text-gray-600">Market research and analysis</li>
+                  <li className="text-gray-600">Competitor price tracking</li>
+                  <li className="text-gray-600">Product comparison and reviews analysis</li>
+                  <li className="text-gray-600">Inventory management</li>
+                  <li className="text-gray-600">Data-driven decision making</li>
+                  <li className="text-gray-600">Brand Monitoring</li>
+                </ul>
+                <p className="text-gray-600 mt-4">
+                  With WebScrapideo, you can easily scrape and leverage data from Flipkart for various business and analytical purposes, empowering you to make informed decisions.
+                </p>
+              </div>
+            </motion.div>
+
+            <motion.div
+              className="w-full md:w-1/2 lg:w-1/3 px-4 mb-8"
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <div className="bg-white rounded-lg shadow-lg p-6">
+                <div className="flex items-center justify-center mb-4">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-12 w-12 text-indigo-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M7 4a1 1 0 0 1 2 0v1h2V4a1 1 0 0 1 2 0v3h-1v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7H1V4a1 1 0 0 1 2 0v1h2V4zm11 3v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h4V4a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1h4a2 2 0 0 1 2 2zm-2 0H4v9h12V7zm-2-3h-2V4h2v1z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800">
+                  Online Video Downloader
+                </h2>
+                <p className="text-gray-600">
+                  Download online videos hassle-free with our Online Video Downloader feature. Utilizing the yt-dlp library, you can retrieve download links for videos from various websites, including:
+                </p>
+                {!showAllWebsites ? (
+                  <ul className="list-disc pl-6 mt-4">
+                    <li className="text-gray-600">YouTube</li>
+                    <li className="text-gray-600">Vimeo</li>
+                    <li className="text-gray-600">Twitter</li>
+                    <li className="text-gray-600">Twitch</li>
+                    <li className="text-gray-600">Udemy</li>
+                    <li className="text-gray-600">Flipkart</li>
+                    <li className="text-gray-600">WWE</li>
+                  </ul>
+                ) : (
+                  <>
+                    <ul className="list-disc pl-6 mt-4">
+                      <li className="text-gray-600">FiveTV</li>
+                      <li className="text-gray-600">PopcornTV</li>
+                      <li className="text-gray-600">PornCom</li>
+                      <li className="text-gray-600">PornerBros</li>
+                      <li className="text-gray-600">Pornez</li>
+                      <li className="text-gray-600">WrestleUniversePPV</li>
+                      <li className="text-gray-600">WrestleUniverseVOD</li>
+                      <li className="text-gray-600">XFileShare</li>
+                      <li className="text-gray-600">YourUpload</li>
+                      <li className="text-gray-600">Zoom</li>
+                    </ul>
+                    <p className="text-gray-600 mt-4">
+                      Note: This is not an exhaustive list. WebScrapideo supports many more websites for video downloading.
+                    </p>
+                  </>
+                )}
+                <button
+                  className="text-indigo-500 font-semibold mt-4 hover:underline focus:outline-none"
+                  onClick={handleReadMore}
+                >
+                  {showAllWebsites ? 'Read Less' : 'Read More'}
+                </button>
+                <p className="text-gray-600 mt-4">
+                  WebScrapideo provides a unique service by offering an extensive range of supported websites for video downloading, setting it apart from other platforms in the market. Enjoy the freedom to download videos hassle-free.
+                </p>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
     </div>
-  )
-}
+    </>    
+  );
+};
 
-export default HomePage
\ No newline at end of file
+export default HomePage;