diff --git a/src/App.js b/src/App.js
index 46c6af6f..1ce03b75 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,10 +8,14 @@ import BlogPage from "./Components/footer_section/BlogPage/BlogPage"
 import FAQPage from "./Components/footer_section/FAQPage/FAQPage";
 import Services from "./Components/footer_section/services/Services";
 import ContactUs from "./Components/footer_section/ContactUs/contact_us";
+
+import Readmore from "./Components/Readmore";
+
 import Pricing from "./Components/footer_section/Pricing/pricing";
 import MyProjects from "./Components/menu_section/my_projects/MyProjects";
 import NewProject from "./Components/menu_section/new_project/NewProject";
 import Error from "./Components/404_page/Error";
+
 function App() {
   return (
     <Router>
@@ -26,9 +30,13 @@ function App() {
           <Route path="/faq" element={<FAQPage />} /> 
           <Route path="/services" element={<Services />} />
           <Route path="/contacts" element={<ContactUs />} />
+
+          <Route path="/readmore/:id" element={<Readmore/>}/>
+
           <Route path="/pricing" element={<Pricing />} />
           <Route path="/projects" element={<MyProjects />} />
           <Route path="/new/project" element={<NewProject />} />
+
         </Routes>
         <Footer />
       </div>
diff --git a/src/Components/CardMain.js b/src/Components/CardMain.js
index 755bb42f..8691c812 100644
--- a/src/Components/CardMain.js
+++ b/src/Components/CardMain.js
@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { BsFillHeartFill } from "react-icons/bs";
+import { Link } from "react-router-dom";
+import { features } from "./projects";
 
 function CardMain({ imgSrc, title, hearts }) {
-  const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(new Array(features.length).fill(false));
+
   let hideTimeout;
 
   useEffect(() => {
@@ -11,25 +14,33 @@ function CardMain({ imgSrc, title, hearts }) {
     };
   }, []);
 
-  const handleMouseOver = () => {
+  const handleMouseOver = (index) => {
     clearTimeout(hideTimeout);
-    setIsVisible(true);
+    setIsVisible((prevIsVisible) => {
+      prevIsVisible[index] = true;
+      return [...prevIsVisible];
+    });
   };
-
-  const handleMouseOut = () => {
+  
+  const handleMouseOut = (index) => {
     hideTimeout = setTimeout(() => {
-      setIsVisible(false);
+      setIsVisible((prevIsVisible) => {
+        prevIsVisible[index] = false;
+        return [...prevIsVisible];
+      });
     }, 200);
   };
 
   return (
-    <div className="card_main">
-      <img src={imgSrc} alt="" className="card_main_img" title={title} />
+    <div className="card">
+    { features.map((project,index)=>
+    <div className="card_main" key={index}>
+      <img src={project.img} alt="" className="card_main_img" title={project.title} />
       <div className="card_main_name">
-        <h2>{title}</h2>
+        <h2>{project.title}</h2>
         <div className="card_main_icon">
           <i>
-            <BsFillHeartFill /> <span>{hearts}</span>
+            <BsFillHeartFill /> <span>{project.hearts}</span>
           </i>
         </div>
       </div>
@@ -50,27 +61,27 @@ function CardMain({ imgSrc, title, hearts }) {
         <div className="nameAuthor">
           <p>By : &nbsp; </p>
           <p
-            id="author_name"
-            onMouseOver={handleMouseOver}
-            onMouseOut={handleMouseOut}
-          >
+        id="author_name"
+        onMouseOver={() => handleMouseOver(index)}
+        onMouseOut={() => handleMouseOut(index)}
+      >
             Abc
           </p>
         </div>
       </div>
       <div className="card_main_button">
-        <a href="#" className="button btn">
+        <Link to={`/readmore/${project.id}`} className="button btn">
           Read More
-        </a>
-        <a href="#" className="button2 btn">
+        </Link>
+        <a href="#" className="button2 btn">  
           Source Code
         </a>
       </div>
       <div
-        className={`contBox ${isVisible ? "visible" : "hidden"}`}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-      >
+      className={`contBox ${isVisible[index]? "visible" : "hidden"}`}
+      onMouseOver={() => handleMouseOver(index)}
+      onMouseOut={() => handleMouseOut(index)}
+    >
         <div className="heading">
           <div className="dp"></div>
           <div className="details1">
@@ -90,7 +101,9 @@ function CardMain({ imgSrc, title, hearts }) {
           <button>View Profile</button>
         </div>
       </div>
-    </div>
+      </div>
+  )}
+  </div>
   );
 }
 
diff --git a/src/Components/MainContainer.css b/src/Components/MainContainer.css
index d0a09bc5..210bf9b4 100644
--- a/src/Components/MainContainer.css
+++ b/src/Components/MainContainer.css
@@ -106,6 +106,10 @@
   align-items: center;
   flex-wrap: wrap;
 }
+.card{  
+  display: flex;
+  flex-wrap: wrap;
+}
 .card_main {
   height: 365px;
 }
diff --git a/src/Components/MainContainer.js b/src/Components/MainContainer.js
index 142c3908..7fc99fd7 100644
--- a/src/Components/MainContainer.js
+++ b/src/Components/MainContainer.js
@@ -1,11 +1,11 @@
 import React, { useRef, useState } from "react";
 import DefaultBanner from "../img/1.jpg";
-import Card1 from "../img/card1.jpg";
+/* import Card1 from "../img/card1.jpg";
 import Card2 from "../img/card2.jpg";
 import Card3 from "../img/card3.jpg";
 import Card4 from "../img/card4.jpg";
 import Card5 from "../img/card5.jpg";
-import Card6 from "../img/card6.jpg";
+import Card6 from "../img/card6.jpg"; */
 import CardMain from "./CardMain";
 import "./MainContainer.css";
 import MainRightBottomCard from "./MainRightBottomCard";
@@ -83,12 +83,13 @@ function MainContainer() {
           </div>
 
           <main className="fromBottom">
-            <CardMain imgSrc={Card1} title={"StockIT"} hearts={"83"} />
+            <CardMain/>
+            {/* <CardMain imgSrc={Card1} title={"StockIT"} hearts={"83"} />
             <CardMain imgSrc={Card2} title={"TakeNote"} hearts={"65"} />
             <CardMain imgSrc={Card3} title={"TaRct"} hearts={"32"} />
             <CardMain imgSrc={Card4} title={"To Do"} hearts={"51"} />
             <CardMain imgSrc={Card5} title={"ArchiTect"} hearts={"47"} />
-            <CardMain imgSrc={Card6} title={"WeatherLy"} hearts={"77"} />
+            <CardMain imgSrc={Card6} title={"WeatherLy"} hearts={"77"} /> */}
           </main>
         </div>
       </div>
diff --git a/src/Components/Readmore.css b/src/Components/Readmore.css
new file mode 100644
index 00000000..13811dfa
--- /dev/null
+++ b/src/Components/Readmore.css
@@ -0,0 +1,94 @@
+.readmore{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 30px 100px;
+    font-family: sans-serif;
+}
+.readmore .arrow{
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    width: 90px;
+}
+.readmore .image{
+    display: flex;
+    justify-content: center;
+}
+.readmore img{
+    width: 100%;
+    border-radius: 8px;
+}
+.head{
+    padding-top: 40px;
+    color: #0db5cb;
+    font-weight: bold;
+    font-size: large;
+    line-height: 30px;
+}
+.upload{
+    color: #e9e9ec;
+    text-transform: uppercase;
+}
+.title{  
+    color: #e9e9ec;
+    text-align: center;
+    font-weight: bolder;
+    font-size: 2rem;
+    padding: 10px;
+    text-transform: uppercase;
+}
+.description{
+    font-size: large;
+    font-weight: bold;
+    color: #e9e9ec;
+    text-transform: uppercase;
+}
+.text{
+    padding-top: 40px;
+}
+.dtex{
+    padding-top: 15px;
+    color: #e9e9ec;
+    text-transform: none;
+    line-height: 27px;
+    font-size: large;
+    word-spacing: 2px;
+    font-weight: normal;
+}
+.developer{
+    color: #0db5cb;
+    padding-top: 30px;
+    font-weight: bold;
+    font-size: large;
+}
+.abc{
+    padding-top: 10px;
+    font-size: large;
+    display: flex;
+}
+.abc .dp{
+    align-items: center;
+    justify-content: center;
+}
+.readmore .btn button{
+    background-color: #0db5cb;
+    margin-right: 20px;
+    margin-top: 20px;
+}
+.readmore .occupation{
+    color: #e9e9ec;
+}
+
+@media (max-width:786px) {
+    .readmore{
+        padding: 30px 50px;
+    }
+}
+@media (max-width:425px) {
+    .readmore{
+        padding: 30px;
+    }
+}
\ No newline at end of file
diff --git a/src/Components/Readmore.js b/src/Components/Readmore.js
new file mode 100644
index 00000000..d178d5a2
--- /dev/null
+++ b/src/Components/Readmore.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import { features } from './projects'
+import './Readmore.css'
+import { Link } from 'react-router-dom'
+import Arrow from '../Components/projects/arrow.png'
+
+const Readmore = () => {
+    const { id } = useParams();
+    const feature = features.find((item) => item.id === parseInt(id));
+  return (
+    <div className='readmore'>
+      <Link className='arrow' to="/"><img src={Arrow} alt="" /></Link>
+      <div className="title">{feature.title}</div>
+      <div className="image">
+      <img src={feature.img} height={480} alt={feature.title} />
+      </div>
+
+      <div className="head">
+        <span className='upload'>Uploaded On:</span><br />
+        dd:mm:yy
+      </div>
+      <div className="head">
+        <span className='upload'>By:</span><br />
+        <div className='abc'>
+          <div className="dp"></div>
+          <div className="details1">
+            <p className="name">@Abc</p>
+            <p className="occupation">Web Designer, Video Editor</p>
+          </div>
+        </div>
+          <div className="dtex">
+            I'm a versatile professional skilled in web development and video
+            editing, creating seamless online experiences and high-quality
+            multimedia content.
+          </div>
+      </div>
+      <div className="text">
+        <span className='description'>Description:</span><br />
+        <div className='dtex'>{feature.text}</div>
+      </div>
+      <div className="developer">
+        Developer-X
+      </div>
+
+    </div>
+  )
+}
+
+export default Readmore
\ No newline at end of file
diff --git a/src/Components/projects/arrow.png b/src/Components/projects/arrow.png
new file mode 100644
index 00000000..4134b74a
Binary files /dev/null and b/src/Components/projects/arrow.png differ
diff --git a/src/Components/projects/card1.jpg b/src/Components/projects/card1.jpg
new file mode 100644
index 00000000..3d5a7624
Binary files /dev/null and b/src/Components/projects/card1.jpg differ
diff --git a/src/Components/projects/card2.jpg b/src/Components/projects/card2.jpg
new file mode 100644
index 00000000..ca6bdec1
Binary files /dev/null and b/src/Components/projects/card2.jpg differ
diff --git a/src/Components/projects/card3.jpg b/src/Components/projects/card3.jpg
new file mode 100644
index 00000000..46a32df0
Binary files /dev/null and b/src/Components/projects/card3.jpg differ
diff --git a/src/Components/projects/card4.jpg b/src/Components/projects/card4.jpg
new file mode 100644
index 00000000..e9b16d84
Binary files /dev/null and b/src/Components/projects/card4.jpg differ
diff --git a/src/Components/projects/card5.jpg b/src/Components/projects/card5.jpg
new file mode 100644
index 00000000..e736d7d9
Binary files /dev/null and b/src/Components/projects/card5.jpg differ
diff --git a/src/Components/projects/card6.jpg b/src/Components/projects/card6.jpg
new file mode 100644
index 00000000..76ca386e
Binary files /dev/null and b/src/Components/projects/card6.jpg differ
diff --git a/src/Components/projects/index.js b/src/Components/projects/index.js
new file mode 100644
index 00000000..0c76c9d5
--- /dev/null
+++ b/src/Components/projects/index.js
@@ -0,0 +1,51 @@
+import Card1 from "./card1.jpg";
+import Card2 from "./card2.jpg";
+import Card3 from "./card3.jpg";
+import Card4 from "./card4.jpg";
+import Card5 from "./card5.jpg";
+import Card6 from "./card6.jpg";
+
+export const features = [
+  {
+    id: 1,
+    img: Card1,
+    hearts: 83,
+    title: "StockIT",
+    text: "StockIT is a comprehensive platform designed to streamline inventory management and enhance supply chain efficiency for businesses of all sizes. It offers a user-friendly interface with robust features that cater to the diverse needs of retail, manufacturing, and e-commerce sectors. Key functionalities include real-time inventory tracking, automated restocking alerts, and detailed analytics for informed decision-making. StockIT integrates seamlessly with existing ERP and accounting systems, ensuring smooth data flow across various business operations. With advanced reporting tools, businesses can monitor stock levels, forecast demand, and minimize the risks of overstocking or stockouts. StockIT's cloud-based solution provides secure access from any device, enabling teams to manage inventory on the go. Dedicated customer support and regular software updates ensure that users have the latest tools to maintain optimal inventory levels and maximize profitability.",
+  },
+  {
+    id: 2,
+    img: Card2,
+    hearts: 65,
+    title: "TakeNote",
+    text: "TakeNote is a powerful and intuitive note-taking app specifically designed for developers. It combines the simplicity of traditional note-taking with advanced features tailored to the unique needs of coding professionals. With TakeNote, developers can effortlessly organize their thoughts, code snippets, project documentation, and technical diagrams in one centralized location. The app supports syntax highlighting for multiple programming languages, making it easy to write and review code within notes. Markdown support allows for seamless formatting, while integrated version control ensures that all changes are tracked and recoverable. TakeNote also offers robust search functionality, enabling users to quickly find specific notes or code snippets. Collaboration features allow team members to share and edit notes in real-time, fostering better communication and project coordination. Whether used for brainstorming sessions, meeting notes, or personal code repositories, TakeNote is the ideal companion for developers seeking to enhance productivity and organization in their workflow.",
+  },
+  {
+    id: 3,
+    img: Card3,
+    hearts: 32,
+    title: "TaRct",
+    text: "TaRct is a cutting-edge web development platform that combines the power of Tailwind CSS and React to deliver a seamless and efficient development experience. Tailored for modern developers, TaRct simplifies the process of building responsive and highly customizable user interfaces. With Tailwind CSS, users can leverage utility-first CSS classes to create visually stunning and consistent designs without writing extensive custom CSS. React's component-based Architecture complements this by allowing developers to build dynamic and interactive user interfaces with ease.TaRct offers an intuitive and user-friendly interface that streamlines the development workflow. Developers can quickly prototype and iterate on designs, thanks to the live-reloading and modular structure provided by React. The platform supports a wide range of pre-built components and templates, enabling users to kickstart their projects and maintain a high level of productivity. Whether you are building a single-page application, a complex web app, or a sleek corporate website, TaRct equips you with the tools and flexibility to bring your vision to life. Its robust documentation and active community support ensure that developers of all skill levels can harness the full potential of Tailwind CSS and React, making TaRct the ultimate solution for modern web development.",
+  },
+  {
+    id: 4,
+    img: Card4,
+    hearts: 51,
+    title: "To Do",
+    text: "Todo is a sleek and intuitive web-based to-do app designed to help you streamline your tasks, manage your time efficiently, and enhance your productivity. With a clean and user-friendly interface, Todo allows you to easily create, edit, and prioritize your tasks. You can organize tasks into different projects, set due dates, and add detailed descriptions to keep all your information centralized and accessible. Todo features smart notifications and reminders to keep you on track, ensuring you never miss an important deadline. The app supports recurring tasks, enabling you to automate repetitive activities and focus on more critical tasks. With real-time synchronization across all your devices, Todo ensures your task lists are always up-to-date, whether you're at your desk or on the move. Advanced search and filter options in Todo make it simple to find specific tasks or view tasks by project, priority, or due date. Collaboration tools allow you to share tasks and lists with colleagues, friends, or family, facilitating teamwork and collective productivity. Todo's elegant design and robust capabilities make it the perfect web-based solution for staying organized, managing your workload, and achieving your goals.",
+  },
+  {
+    id: 5,
+    img: Card5,
+    hearts: 47,
+    title: "ArchiTect",
+    text: "ArchiTect is a sophisticated web platform designed for comprehensive business management and analytics. It features a robust dashboard that provides real-time insights into key business metrics, making it an essential tool for decision-makers and managers. The ArchiTect dashboard showcases critical data points including the number of followers, products sold, total orders, and dynamic tables, all in one convenient interface. With ArchiTect, you can monitor the growth of your customer base through the followers' section, track sales performance with up-to-date figures on products sold, and oversee order fulfillment with the total orders' metric. The dynamic tables allow for interactive data analysis, enabling you to sort, filter, and examine your data from various angles, providing deep insights into your business operations. ArchiTect's user-friendly design ensures that all these features are accessible and easy to navigate, offering a seamless experience whether you're on a desktop or mobile device. The platform's powerful analytics and real-time data presentation help you make informed decisions, optimize operations, and drive business growth. ArchiTect is the ultimate tool for businesses looking to harness the power of data to enhance performance and achieve their strategic goals.",
+  },
+  {
+    id: 6,
+    img: Card6,
+    hearts: 77,
+    title: "WeatherLy",
+    text: "WeatherLy is your ultimate destination for accurate and up-to-date weather information. This sleek and user-friendly website offers comprehensive weather forecasts and real-time data to help you plan your day with confidence. With WeatherLy, you can quickly access current conditions, including temperature, humidity, wind speed, and visibility. Detailed hourly, daily, and weekly forecasts keep you prepared for any weather changes. The platform also provides timely severe weather alerts, ensuring your safety during extreme conditions. Interactive maps let you explore weather patterns with dynamic radar visuals showing precipitation, cloud cover, and temperature variations. Additionally, WeatherLy allows you to save custom locations, making it easy to check the weather for your favorite places. Whether on a desktop or mobile device, WeatherLy delivers reliable and precise weather data, helping you make informed decisions and stay prepared for whatever the weather brings.",
+  },
+];