diff --git a/components/Quotes/Quotes.js b/components/Quotes/Quotes.js
new file mode 100644
index 00000000..ab151035
--- /dev/null
+++ b/components/Quotes/Quotes.js
@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import styles from 'styles/Home.module.css'; // Import your styles
+
+
+const Quotes = () => {
+  const [quotes, setQuotes] = useState([]);
+
+  useEffect(() => {
+    const fetchQuotes = async () => {
+      try {
+        const response = await axios.get('https://api.quotable.io/quotes?limit=10');
+        setQuotes(response.data.results);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    fetchQuotes();
+  }, []);
+
+  if (quotes.length === 0) {
+    return <p>Loading quotes...</p>;
+  }
+
+  return (
+    <div data-aos="fade-up">
+      <h2 className={styles.grabh2}>Quotes</h2>
+      <div className={styles['quotes-container']}>
+        <Swiper
+          spaceBetween={30}
+          loop={true}
+          pagination={{ clickable: true }}
+          effect={'slide'} // Add the effect prop to enable auto transition
+          autoplay={{ delay: 3000 }} // Set the delay (in ms) for auto transition
+        >
+          {quotes.map((quote, index) => (
+            <SwiperSlide key={quote._id}>
+              <div className={styles['quote-wrapper']}>
+                <p className={styles['quote-text']}><b>"{quote.content}"</b></p>
+                <p>- {quote.author}</p>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+};
+
+export default Quotes;
diff --git a/pages/index.js b/pages/index.js
index 69f27daf..d3ef0a10 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -17,6 +17,9 @@ import 'aos/dist/aos.css';
 import TestimonialCard from 'components/Testimonial/Testimonial';
 import GoToTop from 'components/GoToTop';
 
+import Quotes from 'components/Quotes/Quotes';
+
+
 export default function Home() {
   const { dispatch } = useContext(Store);
 
@@ -295,6 +298,7 @@ export default function Home() {
           </form>
         </section>
       </main>
+      <Quotes />
       <TestimonialCard />
       <Footer />
     </>
diff --git a/styles/Home.module.css b/styles/Home.module.css
index f36c467e..82ae2fb9 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -287,3 +287,41 @@ input:focus {
 #sub:hover > div > div {
   background: rgb(159, 154, 255) !important;
 }
+
+
+
+
+
+/* Styles for the container wrapping the Quotes component */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50vh; /* Adjust this value based on your layout */
+}
+
+/* Styles for the quotes container */
+.quotes-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30vh;
+  overflow: hidden;
+  justify-content: center;
+}
+
+/* Styles for the quote wrapper */
+.quote-wrapper {
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 10px;
+  padding: 30px;
+  /* max-width: 500px; */
+  text-align: center;
+}
+
+/* Styles for the quote text */
+.quote-text {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+}
+