diff --git a/frontend/src/assets/icons/bookmark.svg b/frontend/src/assets/icons/bookmark.svg
index 29800cd..d6db74e 100644
--- a/frontend/src/assets/icons/bookmark.svg
+++ b/frontend/src/assets/icons/bookmark.svg
@@ -1,3 +1,4 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.8473 21.2331L12.0001 16.3422L5.15283 21.2331V5.58233C5.15283 5.06347 5.35895 4.56586 5.72583 4.19898C6.09272 3.83209 6.59033 3.62598 7.10918 3.62598H16.8909C17.4098 3.62598 17.9074 3.83209 18.2743 4.19898C18.6412 4.56586 18.8473 5.06347 18.8473 5.58233V21.2331Z" stroke="#435FF0" stroke-width="1.70754" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.209961" y="-0.00341797" width="34" height="34" rx="17" fill="white"/>
+<path d="M21.7751 22.866L17.2103 19.6054L12.6455 22.866V12.4322C12.6455 12.0863 12.7829 11.7545 13.0275 11.5099C13.2721 11.2653 13.6038 11.1279 13.9497 11.1279H20.4709C20.8168 11.1279 21.1485 11.2653 21.3931 11.5099C21.6377 11.7545 21.7751 12.0863 21.7751 12.4322V22.866Z" stroke="#ABBCCD" stroke-width="1.13836" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/frontend/src/pages/Home/components/ReportItem/ReportItem.scss b/frontend/src/pages/Home/components/ReportItem/ReportItem.scss
index 2d3d29d..17f9621 100644
--- a/frontend/src/pages/Home/components/ReportItem/ReportItem.scss
+++ b/frontend/src/pages/Home/components/ReportItem/ReportItem.scss
@@ -51,21 +51,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: #FFFFFF;
+    border-radius: 50%;
+    transition: background-color 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+    &--active {
+      background-color: #435FF0;
+      height: 34px;
+
+    }
 
     &-icon {
-      width: 15px;
       transition: all 0.2s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      padding: 11px 7px;
-
-      &--active {
-        color: white;
-        background-color: #4765ff;
-        box-shadow: none;
-      }
     }
   }
 
diff --git a/frontend/src/pages/Home/components/ReportItem/ReportItem.tsx b/frontend/src/pages/Home/components/ReportItem/ReportItem.tsx
index d81b759..6c19276 100644
--- a/frontend/src/pages/Home/components/ReportItem/ReportItem.tsx
+++ b/frontend/src/pages/Home/components/ReportItem/ReportItem.tsx
@@ -1,14 +1,14 @@
-import { IonIcon } from '@ionic/react';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { MedicalReport, ReportCategory } from 'common/models/medicalReport';
-import { bookmarkOutline } from 'ionicons/icons';
 import './ReportItem.scss';
 
 // Import SVG icons
 import healthIcon from 'assets/icons/health.svg';
 import brainIcon from 'assets/icons/brain.svg';
 import heartIcon from 'assets/icons/heart.svg';
+import bookmarkIcon from 'assets/icons/bookmark.svg';
+import bookmarkFilledIcon from 'assets/icons/bookmark-filled.svg';
 
 interface ReportItemProps {
   report: MedicalReport;
@@ -100,12 +100,14 @@ const ReportItem: React.FC<ReportItemProps> = ({
       </div>
 
       {showBookmarkButton && (
-        <div className="report-item__bookmark" onClick={handleBookmarkClick}>
-          <IonIcon
-            icon={bookmarkOutline}
-            className={`report-item__bookmark-icon ${
-              bookmarked ? 'report-item__bookmark-icon--active' : ''
-            }`}
+        <div
+          className={`report-item__bookmark ${bookmarked ? 'report-item__bookmark--active' : ''}`}
+          onClick={handleBookmarkClick}
+        >
+          <img
+            src={bookmarked ? bookmarkFilledIcon : bookmarkIcon}
+            alt={t('actions.bookmark', { ns: 'common', defaultValue: 'Bookmark' })}
+            className="report-item__bookmark-icon"
           />
         </div>
       )}
diff --git a/frontend/src/pages/Reports/ReportsListPage.scss b/frontend/src/pages/Reports/ReportsListPage.scss
index e6c49e0..9a4c75f 100644
--- a/frontend/src/pages/Reports/ReportsListPage.scss
+++ b/frontend/src/pages/Reports/ReportsListPage.scss
@@ -17,10 +17,15 @@
     align-items: center;
   }
 
-  &__title-icon {
-    font-size: 1.5rem;
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #EBECFD;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
     margin-right: 0.5rem;
-    color: var(--ion-color-primary);
   }
 
   &__title {
diff --git a/frontend/src/pages/Reports/ReportsListPage.tsx b/frontend/src/pages/Reports/ReportsListPage.tsx
index a6c0bec..995482c 100644
--- a/frontend/src/pages/Reports/ReportsListPage.tsx
+++ b/frontend/src/pages/Reports/ReportsListPage.tsx
@@ -9,7 +9,6 @@ import {
   IonLabel,
   IonSegment,
   IonSegmentButton,
-  IonIcon,
   IonButton,
   IonToast,
   IonModal,
@@ -23,9 +22,10 @@ import ReportItem from 'pages/Home/components/ReportItem/ReportItem';
 import NoReportsMessage from 'pages/Home/components/NoReportsMessage/NoReportsMessage';
 import { useState, useMemo, useEffect, useRef } from 'react';
 import { MedicalReport } from 'common/models/medicalReport';
-import { documentTextOutline } from 'ionicons/icons';
 import sortSvg from 'assets/icons/sort.svg';
 import filterOutlineIcon from 'assets/icons/filter-outline.svg';
+import reportsIcon from 'assets/icons/reports.svg';
+import SvgIcon from 'common/components/Icon/SvgIcon';
 import FilterPanel, { CategoryOption } from './components/FilterPanel/FilterPanel';
 import CategoryTag from './components/CategoryTag/CategoryTag';
 import ReportsFilterEmpty from './components/ReportsFilterEmpty/ReportsFilterEmpty';
@@ -262,7 +262,16 @@ const ReportsListPage: React.FC = () => {
             }}
           >
             <div className="reports-list-page__title-container">
-              <IonIcon icon={documentTextOutline} className="reports-list-page__title-icon" />
+              <div className="reports-list-page__icon-wrapper">
+                <SvgIcon
+                  src={reportsIcon}
+                  alt={t('list.icon', { ns: 'report' })}
+                  className="reports-list-page__title-icon"
+                  color="#313E4C"
+                  width={20}
+                  height={20}
+                />
+              </div>
               <h1 className="reports-list-page__title">{t('list.title', { ns: 'report' })}</h1>
             </div>
             <div className="reports-list-page__actions">