diff --git a/src/Components/Footer.css b/src/Components/Footer.css
index 5acc56be..0e47de79 100644
--- a/src/Components/Footer.css
+++ b/src/Components/Footer.css
@@ -158,7 +158,6 @@
   font-size: 18px;
   border-radius: 25px;
   transition: ease-in-out 500ms;
-  margin-right: 1rem;
   text-decoration: none !important;
   width: 220px;
   text-align: center;
diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
index 84acbe00..c7dccb1e 100644
--- a/src/Components/TopContainer.css
+++ b/src/Components/TopContainer.css
@@ -50,7 +50,7 @@
 
 /* Individual nav items */
 .largeview .nav-item {
-  margin-right: 10px;
+  margin-right: 20px;
 }
 
 /* Nav item links */
@@ -59,8 +59,8 @@
   text-decoration: none;
   transition: color 0.3s ease, font-size 0.3s ease;
   display: flex;
-  align-items: center;
-}
+  gap: 5px;
+  align-items: center; /* Center items vertically */
 
 /* Hover effect for nav item links */
 .largeview .nav-item a:hover {
diff --git a/src/Components/TopContainer.js b/src/Components/TopContainer.js
index e5528e6e..13ff64cd 100644
--- a/src/Components/TopContainer.js
+++ b/src/Components/TopContainer.js
@@ -168,7 +168,7 @@ function TopContainer() {
           </div>
         </div>
 
-        <div className="inputBox o2">
+        <div className="inputBox o2" style={{width:"252px "}}>
           <div className="input-div">
             <i
               style={{
@@ -218,7 +218,7 @@ function TopContainer() {
 
         <div className="profileContainer o3">
           <a href="/pricing">
-            <button className="go-pro-btn">Go Pro</button>
+            <button className="go-pro-btn" style={{marginRight:"0px"}}>Go Pro</button>
           </a>
 
           <div className="notification-container" style={{ gap: "5px" }} ref={dropdownRef}>
diff --git a/src/Components/menu_section/my_projects/MyProjects.css b/src/Components/menu_section/my_projects/MyProjects.css
index f753a680..bd85823d 100644
--- a/src/Components/menu_section/my_projects/MyProjects.css
+++ b/src/Components/menu_section/my_projects/MyProjects.css
@@ -20,10 +20,11 @@ button {
    gap: 20px;
    margin: 20px 0;
 }
-.top h1 {
-    margin-left: 70px;
+.top a {
+    font-size: 30px;
+    margin-left: 20px;
+    margin-right: 40px;
 }
-
 .project-card {
     /* background-color: rgb(23, 23, 83); */
     color: white;
@@ -86,4 +87,37 @@ color: gray;
 .light .project-card h2 , .light .project-card p{
     background:  lightblue  !important;
     color: #000000 !important;
+}
+.home-icon{
+    margin-left: 5%;
+    cursor: pointer;  
+}
+.nav{
+    display: flex;
+    justify-content: space-around;
+}
+.top a:hover{
+    background-color: rgb(1, 1, 147);
+    border-radius: 10px;
+}
+.main-title{
+    text-decoration: underline;
+}
+
+@media screen and (max-width:560px) {
+    .nav{
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;       
+    }
+    .top{
+        flex-direction: column;
+    }
+    .home-icon{
+        margin-left: 15%;
+    }
+    .top a{
+        font-size: 20px;
+    }
 }
\ No newline at end of file
diff --git a/src/Components/menu_section/my_projects/MyProjects.js b/src/Components/menu_section/my_projects/MyProjects.js
index 7fad50c3..69acd95f 100644
--- a/src/Components/menu_section/my_projects/MyProjects.js
+++ b/src/Components/menu_section/my_projects/MyProjects.js
@@ -2,94 +2,45 @@ import {FaPlus} from 'react-icons/fa';
 import Menu from '../../Menu';
 import './MyProjects.css'
 import {Link} from 'react-router-dom';
-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 {BsHeartFill} from 'react-icons/bs';
+import {features} from '../../projects/index.js';
+import { BsHeartFill } from 'react-icons/bs';
 import homeIcon from '../../../img/homeicon.png';
 import {useContext} from "react";
 import {ThemeContext} from "../../../App";
 
-
-const SampleData = [
-    {
-        id: 1,
-        name: "ToDo app",
-        noOfHearts: "10",
-        github: "/",
-        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
-        skills: ['HTML', 'CSS', 'JavaScript'],
-        uploadedDate: '2023-10-15',
-        image: Card1
-    },
-    {
-        id: 2,
-        name: "Weather app",
-        noOfHearts: "10",
-        github: "/",
-        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
-        skills: ['HTML', 'CSS', 'JavaScript'],
-        uploadedDate: '2023-10-15',
-        image: Card2
-    },
-    {
-        id: 3,
-        name: "Expense tracker",
-        noOfHearts: "10",
-        github: "/",
-        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
-        skills: ['HTML', 'CSS', 'JavaScript'],
-        uploadedDate: '2023-10-15',
-        image: Card3
-    },
-    {
-        id: 4,
-        name: "E commerce website",
-        noOfHearts: "10",
-        github: "/",
-        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
-        skills: ['HTML', 'CSS', 'JavaScript'],
-        uploadedDate: '2023-10-15',
-        image: Card4
+const truncateText = (text) =>{
+    if (text.length <= 70) {
+        return text;
     }
-]
+    return text.slice(0, 70) + '...';
+} 
 
 function MyProjects({showMenu = true}) {
-
     const {theme} = useContext(ThemeContext)
-
     return (
         <div className={`container my-projects-wrapper ${theme}`}>
             {showMenu && <Menu/>}
             <div className="content">
+                <div className='nav'>
                 <div className='top fromTop'>
-                    <h1>My Projects</h1>
-                    <Link to='/new/project'>
-                        <button><FaPlus size={15}/> New Project</button>
-                    </Link>
+                    <h2 className='main-title'><a href='#'>Projects</a></h2>
+                    <h2><a href='#'>My Projects</a></h2> {/*In future, Based on User Login, data can be added here in "href"*/}
                 </div>
                 <Link to="/">
-                    <img src={homeIcon} alt="Home" className="home-icon" style={{marginLeft: '300px'}}/>
+                    <img src={homeIcon} alt="Home" className="home-icon"/>
                 </Link>
-
+                <Link to='/new/project'>
+                        <button className='button-np'><FaPlus size={15}/> New Project</button>
+                </Link>
+                </div>
                 <div className='projects-wrapper zoomIn'>
-
                     {
-                        SampleData.map(project => {
-                            return (
+                        features.map(project => {
+                            return(
                                 <MyProjectCard project={project}/>
-                            )
+                            );
                         })
                     }
-                    {
-                        SampleData.map(project => {
-                            return (
-                                <MyProjectCard project={project}/>
-                            )
-                        })
-                    }
-
                 </div>
             </div>
         </div>
@@ -101,26 +52,22 @@ export default MyProjects;
 
 function MyProjectCard({project}) {
 
-    const {theme} = useContext(ThemeContext)
+    const {theme} = useContext(ThemeContext);
 
     return (
         <div className={`project-card ${theme}`}>
-            <img src={project.image} alt={project.name}/>
+            <img src={project.img} alt={project.title}/>
             <div className='details'>
                 <div className="top">
-                    <h2>{project.name}</h2>
+                    <h2>{project.title}</h2>
                     <div className="likes">
                         <i>
-                            <BsHeartFill/> <span>{project.noOfHearts}</span>
+                            <BsHeartFill/> <span>{project.hearts}</span>
                         </i>
                     </div>
                 </div>
-                <p>{project.description.substring(0, 75)}...</p>
-                <small>{project.uploadedDate}</small>
+                <p>{truncateText(project.text)}</p>
                 <div className="btn-wrapper">
-                    <Link to="/">
-                        <button className='edit-btn'>Edit</button>
-                    </Link>
                     <Link to={project.github}>
                         <button className='github-btn'>GitHub</button>
                     </Link>
@@ -128,5 +75,5 @@ function MyProjectCard({project}) {
             </div>
 
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/src/Components/menu_section/new_project/NewProject.css b/src/Components/menu_section/new_project/NewProject.css
index 482f1db5..a845bd03 100644
--- a/src/Components/menu_section/new_project/NewProject.css
+++ b/src/Components/menu_section/new_project/NewProject.css
@@ -118,4 +118,7 @@ span {
         transform: scale(1);
         opacity: 1;
     }
+}
+.top{
+    margin-left: 60px;
 }
\ No newline at end of file