diff --git a/assets/bookmarks.html b/assets/bookmarks.html
new file mode 100644
index 0000000..9780c6e
--- /dev/null
+++ b/assets/bookmarks.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/bookmarks.css">
+    <title>JobsPlace - Bookmarks</title>
+</head>
+<body class="full-background">
+    <div class="back">
+        <button onclick="goBack()"><i class="fas fa-arrow-left"></i>   Back To Home</button>
+        </div>
+    
+        <script>
+        function goBack() {
+        window.history.back();
+        }
+        </script>
+    <div class="full">
+        <div class="header">
+            <h1>Here are Your Bookmarked Jobs</h1>
+        </div>
+
+        <div class="wrapper">
+            <!--google-->
+            <div class="card">
+                <div class="card-left blue-bg">
+                    <img src="../images/google.png">
+                </div>
+                <div class="card-center">
+                    <h3>Google</h3>
+                    <p class="card-detail">Data Science, Data Engineer(Onsite)</p>
+                    <p class="card-loc"><ion-icon name="location-outline"></ion-icon>Bengaluru,Karnataka</p>
+                    <div class="card-sub">
+                        <p><ion-icon name="today-outline"></ion-icon>1 mins ago</p>
+                        <p><ion-icon name="hourglass-outline"></ion-icon>Full-time</p>
+                        <p><ion-icon name="people-outline"></ion-icon>200 Applications</p>
+                    </div>
+                </div>
+                <div class="card-right">
+                    <div class="card-tag">
+                        <h5>Division</h5>
+                        <a href="#">Data Engineer</a>
+                    </div>
+                    <div class="card-salary">
+                        <p><b>$350k</b><span>/Year</span></p>
+                    </div>
+                </div>
+            </div>
+        <!--tiktok-->
+            <div class="card">
+                <div class="card-left yellow-bg">
+                    <img src="../images/tik-tok.png">
+                </div>
+                <div class="card-center">
+                    <h3>Tiktok</h3>
+                    <p class="card-detail">Data Analyst , Product Analyst</p>
+                    <p class="card-loc"><ion-icon name="location-outline"></ion-icon>Los Angeles,California</p>
+                    <div class="card-sub">
+                        <p><ion-icon name="today-outline"></ion-icon>10 mins ago</p>
+                        <p><ion-icon name="hourglass-outline"></ion-icon>Full-time</p>
+                        <p><ion-icon name="people-outline"></ion-icon>130 Applications</p>
+                    </div>
+                </div>
+                <div class="card-right">
+                    <div class="card-tag">
+                        <h5>Division</h5>
+                        <a href="#">Data Science</a>
+                    </div>
+                    <div class="card-salary">
+                        <p><b>$200k</b><span>/Year</span></p>
+                    </div>
+                </div>
+            </div>
+
+            <!--facebook-->
+        </div>
+
+    </div>
+
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/assets/css/bookmarks.css b/assets/css/bookmarks.css
new file mode 100644
index 0000000..568c4c9
--- /dev/null
+++ b/assets/css/bookmarks.css
@@ -0,0 +1,153 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Young+Serif&display=swap');
+:root{
+    --primaryColor: #4c50d3;
+    --secondaryColor:#50c2d8;;
+    --fontColor: #1e1e1e;
+    --whiteColor: #fff;
+    --greyColor: #e7e7e7;
+    --darkgreyColor: #5f5f5f;
+    --sofPurple: #e7e8ff;
+    --softBlue: #c3e1ff;
+    --softyellow: #fff5cc;
+    --softRed: #ffcbc8;
+}
+
+/* BACK BUTTON */
+button{
+    margin-left: 10px;
+    font-size: 15px;
+    color: white;
+    border-radius: 6px;
+    background-color: #4C50D3;
+    padding: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+button:hover{
+    background-color: #5029bc;
+}
+
+.full-background{
+    background-color: #c3e1ff;
+}
+.header h1{
+    font-family: 'Young Serif', serif;
+    text-align: center;
+}
+html{
+    overflow-x: hidden;
+}
+body {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+}
+.wrapper{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 0;
+    gap: 1rem;
+}
+
+.full{
+    margin: auto;
+}
+
+.card{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 3%;
+    margin: 0 1%;
+    background-color: var(--whiteColor);
+    line-height: 1.5;
+    gap: 1.5rem;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.card:hover{
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 8px;
+}
+
+.card-left{
+    width: 10%;
+    min-width: 50px;
+    display: flex;
+    justify-content: center;
+    border-radius: 20%;
+}
+
+.card-left img{
+    width: 100%;
+    height: auto;
+    min-width: 60px;
+    padding: 1rem;
+}
+
+.card-center {
+    width: 50%;
+}
+
+.card-loc, .card-sub{
+    font-size: 13px;
+    color: var(--darkGreyColor); 
+}
+
+.card-sub{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.card-sub p{
+    display: flex;
+    padding: 0 0.5rem 0 0;
+    align-items: center;
+}
+
+.card-right{
+    width: 15%;
+}
+
+.card-tag a{
+    color: var(--fontColor);
+    font-size: 13px;
+}
+
+.card-salary{
+    padding: 0.5rem 0;
+    color: var(--primaryColor);
+}
+
+.card-salary span{
+    color: var(--fontColor);
+    font-size: 13px;
+}
+
+/* SCROLLBAR */
+/* width */
+::-webkit-scrollbar {
+    width: 10px;
+    background-color: rgba(85, 84, 84, 0.364);
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #161616fb;
+    box-shadow: inset 0 0 5px grey;
+    border-radius: 10px;
+  }
+  
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #4c50d3;
+    border-radius: 10px;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #1b0093
+  }
\ No newline at end of file
diff --git a/assets/images/profile.png b/assets/images/profile.png
deleted file mode 100644
index 53c5a9a..0000000
Binary files a/assets/images/profile.png and /dev/null differ
diff --git a/assets/progress.html b/assets/progress.html
index 3d136c7..c85ca90 100644
--- a/assets/progress.html
+++ b/assets/progress.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Portfilio Website</title>
+        <title>JobPlace - Performance</title>
         <link rel="stylesheet" href="./css/progress.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     </head>
@@ -26,7 +26,7 @@ <h1 class="section-title-02">Performance</h1>
         <div class="content">
             <div class="skills-description">
                 <h3>Personal Details : </h3>
-                <img class="profile-img" src="./images/profile.png">
+                <img class="profile-img" src="../images/profile.png">
                 <p>Name: User</p>
                 <p>Currently working as: Data Scientist</p>
                 <p>Looking for: Job with better pay</p>
diff --git a/images/profile.png b/images/profile.png
index 6d15e9e..53c5a9a 100644
Binary files a/images/profile.png and b/images/profile.png differ
diff --git a/index.html b/index.html
index 820797c..53090ef 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@ <h1 class="logo">JobsPlace</h1>
             <a href="#"><ion-icon name="home-outline"></ion-icon>Home</a>
             <a href="#"><ion-icon name="newspaper-outline"></ion-icon>Find Jobs</a>
             <a href="./assets/progress.html"><ion-icon name="stats-chart-outline"></ion-icon>Performance</a>
-            <a href="#"><ion-icon name="bookmarks-outline"></ion-icon>Bookmarks</a>
+            <a href="./assets/bookmarks.html"><ion-icon name="bookmarks-outline"></ion-icon>Bookmarks</a>
             <a href="#"><ion-icon name="mail-unread-outline"></ion-icon>Message</a>
             <a href="./assets/contact.html"><ion-icon name="call-outline"></ion-icon>Contact Us</a>
         </div>
