diff --git a/frontend/assets/Reports_bg.png b/frontend/src/assets/Reports_bg.png
similarity index 100%
rename from frontend/assets/Reports_bg.png
rename to frontend/src/assets/Reports_bg.png
diff --git a/frontend/src/assets/icons/upload-normal.svg b/frontend/src/assets/icons/upload-normal.svg
new file mode 100644
index 00000000..81c12d8a
--- /dev/null
+++ b/frontend/src/assets/icons/upload-normal.svg
@@ -0,0 +1,22 @@
+<svg width="72" height="73" viewBox="0 0 72 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_221_745)">
+<path d="M8.99023 29.8384C8.99023 14.9267 21.0785 2.83838 35.9902 2.83838C50.9019 2.83838 62.9902 14.9267 62.9902 29.8384C62.9902 44.7501 50.9019 56.8384 35.9902 56.8384C21.0785 56.8384 8.99023 44.7501 8.99023 29.8384Z" fill="url(#paint0_radial_221_745)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1417 18.1899C35.6103 17.7212 36.3701 17.7212 36.8388 18.1899L41.6388 22.9899C42.1074 23.4585 42.1074 24.2183 41.6388 24.6869C41.1701 25.1555 40.4103 25.1555 39.9417 24.6869L37.1903 21.9355V33.4383C37.1903 34.101 36.653 34.6383 35.9903 34.6383C35.3275 34.6383 34.7903 34.101 34.7903 33.4383V21.9354L32.0388 24.6869C31.5701 25.1555 30.8103 25.1555 30.3417 24.6869C29.8731 24.2183 29.8731 23.4585 30.3417 22.9899L35.1417 18.1899ZM28.7903 32.3717C28.7903 31.709 28.253 31.1717 27.5903 31.1717C26.9276 31.1717 26.3903 31.709 26.3903 32.3717V37.0384C26.3903 39.6893 28.5393 41.8384 31.1903 41.8384H40.7903C43.4413 41.8384 45.5903 39.6893 45.5903 37.0384V32.3717C45.5903 31.709 45.053 31.1717 44.3903 31.1717C43.7276 31.1717 43.1903 31.709 43.1903 32.3717V37.0384C43.1903 38.3639 42.1158 39.4384 40.7903 39.4384H31.1903C29.8648 39.4384 28.7903 38.3639 28.7903 37.0384V32.3717Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_221_745" x="-0.00976562" y="0.838379" width="72" height="72" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="7"/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.262745 0 0 0 0 0.372549 0 0 0 0 0.941176 0 0 0 0.27 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_221_745"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_221_745" result="shape"/>
+</filter>
+<radialGradient id="paint0_radial_221_745" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(35.9902 17.8384) rotate(90) scale(45)">
+<stop stop-color="#435FF0"/>
+<stop offset="0.6875" stop-color="#6171EA"/>
+<stop offset="1" stop-color="#F6CACC"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/frontend/src/assets/icons/upload-pressed.svg b/frontend/src/assets/icons/upload-pressed.svg
new file mode 100644
index 00000000..64cba665
--- /dev/null
+++ b/frontend/src/assets/icons/upload-pressed.svg
@@ -0,0 +1,12 @@
+<svg width="54" height="55" viewBox="0 0 54 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.9902 1.83838C41.3496 1.83838 52.9902 13.479 52.9902 27.8384C52.9902 42.1978 41.3496 53.8384 26.9902 53.8384C12.6308 53.8384 0.990234 42.1978 0.990234 27.8384C0.990234 13.479 12.6308 1.83838 26.9902 1.83838Z" fill="url(#paint0_radial_221_747)"/>
+<path d="M26.9902 1.83838C41.3496 1.83838 52.9902 13.479 52.9902 27.8384C52.9902 42.1978 41.3496 53.8384 26.9902 53.8384C12.6308 53.8384 0.990234 42.1978 0.990234 27.8384C0.990234 13.479 12.6308 1.83838 26.9902 1.83838Z" stroke="#313E4C" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.1417 16.1899C26.6103 15.7212 27.3701 15.7212 27.8388 16.1899L32.6388 20.9899C33.1074 21.4585 33.1074 22.2183 32.6388 22.6869C32.1701 23.1555 31.4103 23.1555 30.9417 22.6869L28.1903 19.9355V31.4383C28.1903 32.101 27.653 32.6383 26.9903 32.6383C26.3275 32.6383 25.7903 32.101 25.7903 31.4383V19.9354L23.0388 22.6869C22.5701 23.1555 21.8103 23.1555 21.3417 22.6869C20.8731 22.2183 20.8731 21.4585 21.3417 20.9899L26.1417 16.1899ZM19.7903 30.3717C19.7903 29.709 19.253 29.1717 18.5903 29.1717C17.9276 29.1717 17.3903 29.709 17.3903 30.3717V35.0384C17.3903 37.6893 19.5393 39.8384 22.1903 39.8384H31.7903C34.4413 39.8384 36.5903 37.6893 36.5903 35.0384V30.3717C36.5903 29.709 36.053 29.1717 35.3903 29.1717C34.7276 29.1717 34.1903 29.709 34.1903 30.3717V35.0384C34.1903 36.3639 33.1158 37.4384 31.7903 37.4384H22.1903C20.8648 37.4384 19.7903 36.3639 19.7903 35.0384V30.3717Z" fill="white"/>
+<defs>
+<radialGradient id="paint0_radial_221_747" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26.9902 15.8384) rotate(90) scale(45)">
+<stop stop-color="#435FF0"/>
+<stop offset="0.6875" stop-color="#6171EA"/>
+<stop offset="1" stop-color="#F6CACC"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/frontend/src/common/components/Router/TabNavigation.scss b/frontend/src/common/components/Router/TabNavigation.scss
index 36eee2b0..9a89c3a2 100644
--- a/frontend/src/common/components/Router/TabNavigation.scss
+++ b/frontend/src/common/components/Router/TabNavigation.scss
@@ -2,9 +2,10 @@
   &__bar {
     border-radius: 2rem;
     margin: 0 0.75rem 0.75rem;
-    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 10%);
     height: var(--tab-bar-height, 3.5rem);
-    --background: #ffffff;
+
+    --background: #fff;
 
     /* Override default iOS padding */
     padding-bottom: 0;
@@ -45,7 +46,10 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          background-color: #4765ff;
+
+          /* Replace solid background with gradient */
+          background-color: transparent;
+          background-image: linear-gradient(135deg, #4765ff 0%, #6357fa 50%, #a557fa 100%);
           color: white;
           width: 3rem;
           height: 3rem;
@@ -54,9 +58,28 @@
           bottom: calc(50% - 0.5rem);
           left: 50%;
           transform: translateX(-50%);
-          box-shadow: 0 0.25rem 0.5rem rgba(71, 101, 255, 0.3);
+
+          /* Enhanced shadow effect */
+          box-shadow:
+            0 0.5rem 1rem rgb(100 87 250 / 40%),
+            0 0.125rem 0.25rem rgb(65 101 255 / 30%);
           z-index: 10;
 
+          /* Add slight transition for hover effects */
+          transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease,
+            background-image 0.2s ease,
+            border 0.2s ease;
+
+          /* Active state styling to match the image */
+          &:active {
+            transform: translateX(-50%) scale(0.95);
+            background-image: linear-gradient(135deg, #3a52d0 0%, #4f47c7 50%, #7e44c2 100%);
+            box-shadow: 0 0.25rem 0.5rem rgb(100 87 250 / 30%);
+            border: 2px solid white;
+          }
+
           .ls-tab-navigation__bar-button-icon {
             color: white;
             margin: 0;
diff --git a/frontend/src/common/components/Upload/UploadModal.scss b/frontend/src/common/components/Upload/UploadModal.scss
index 839a3ca9..f34c7d6e 100644
--- a/frontend/src/common/components/Upload/UploadModal.scss
+++ b/frontend/src/common/components/Upload/UploadModal.scss
@@ -15,7 +15,9 @@
   &__error-message {
     border: 1px solid var(--ion-color-danger);
     border-radius: 0.5rem;
+
     --background: rgba(var(--ion-color-danger-rgb), 0.2);
+
     color: white;
     width: 100%;
 
@@ -28,7 +30,7 @@
     color: var(--ion-color-danger);
   }
 
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     --width: 28.125rem; // 450px
     --height: 65vh; // Use viewport height instead of fixed pixels
     --border-radius: 1rem; // Matching the image example
@@ -38,8 +40,10 @@
     display: flex;
     flex-direction: column;
     padding: 1.25rem;
+
     --background: var(--ion-color-primary);
     --color: white;
+
     border-radius: 1rem;
   }
 
@@ -58,7 +62,9 @@
 
     .upload-modal__close-button {
       --color: white;
+
       margin: 0;
+
       --padding-start: 0.5rem;
       --padding-end: 0.5rem;
     }
@@ -81,9 +87,9 @@
     justify-content: center;
     width: 100%;
     padding: 2rem 1rem;
-    border: 0.0625rem dashed rgba(255, 255, 255, 0.5);
+    border: 0.0625rem dashed rgb(255 255 255 / 50%);
     border-radius: 0.75rem;
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgb(255 255 255 / 10%);
     margin: 0.75rem 0;
 
     h2 {
@@ -97,7 +103,7 @@
     p {
       margin-top: 0;
       margin-bottom: 0.5rem;
-      color: rgba(255, 255, 255, 0.7);
+      color: rgb(255 255 255 / 70%);
       font-size: 0.875rem;
     }
   }
@@ -123,7 +129,7 @@
     p {
       margin-bottom: 0.25rem;
       font-size: 0.75rem;
-      color: rgba(255, 255, 255, 0.7);
+      color: rgb(255 255 255 / 70%);
     }
   }
 
@@ -136,28 +142,33 @@
     width: 100%;
     max-width: 12rem;
     font-weight: 500;
+
     --background: white;
     --color: var(--ion-color-primary);
     --border-radius: 0.5rem;
+
     height: 2.5rem;
+
+    // Override Ionic button internals with a more direct approach
+    --background-activated: inherit !important;
+
+    &.ion-activated::part(native) {
+      background-color: white !important;
+      box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
+      border: 1px solid #abbccd;
+    }
   }
 
   &__selected-file {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgb(255 255 255 / 10%);
     border-radius: 0.5rem;
     padding: 1rem;
     margin-bottom: 1rem;
   }
 
-  &__filename {
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-    word-break: break-all;
-    color: white;
-  }
-
   &__start-upload {
     margin-top: 0.5rem;
+
     --background: white;
     --color: var(--ion-color-primary);
   }
@@ -171,14 +182,8 @@
     width: 100%;
   }
 
-  &__file-info {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-
   &__filesize {
-    color: rgba(255, 255, 255, 0.7);
+    color: rgb(255 255 255 / 70%);
     font-size: 0.875rem;
     margin-top: 0;
   }
@@ -190,7 +195,8 @@
       height: 0.5rem;
       border-radius: 0.25rem;
       overflow: hidden;
-      --background: rgba(255, 255, 255, 0.2);
+
+      --background: rgb(255 255 255 / 20%);
       --progress-background: white;
     }
   }
@@ -204,12 +210,13 @@
     ion-spinner {
       width: 1rem;
       height: 1rem;
+
       --color: white;
     }
 
     span {
       font-size: 0.875rem;
-      color: rgba(255, 255, 255, 0.7);
+      color: rgb(255 255 255 / 70%);
     }
   }
 
@@ -231,7 +238,7 @@
     }
 
     p {
-      color: rgba(255, 255, 255, 0.7);
+      color: rgb(255 255 255 / 70%);
       margin-bottom: 2rem;
     }
   }
@@ -265,6 +272,7 @@
     margin-top: 1rem;
     width: 100%;
     max-width: 15rem;
+
     --background: white;
     --color: var(--ion-color-primary);
   }
@@ -282,12 +290,14 @@
     margin-top: 1rem;
     width: 100%;
     max-width: 12rem; // Match the upload button's max-width
+
     --color: white;
-    --border-color: rgba(255, 255, 255, 0.6);
-    --background: rgba(255, 255, 255, 0.1);
+    --border-color: rgb(255 255 255 / 60%);
+    --background: rgb(255 255 255 / 10%);
     --border-radius: 0.5rem;
     --border-width: 1px;
     --border-style: solid;
+
     height: 2.5rem; // Exactly match the upload button's height (40px)
     font-weight: 500;
     text-transform: none;
@@ -314,7 +324,7 @@
     padding: 0.75rem;
     margin: 1.5rem 0;
     width: 100%;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
     max-width: 100%;
     box-sizing: border-box;
   }
@@ -365,8 +375,10 @@
     height: 0.25rem;
     border-radius: 0.125rem;
     margin-top: 0.25rem;
-    --background: rgba(0, 0, 0, 0.1);
+
+    --background: rgb(0 0 0 / 10%);
     --progress-background: var(--ion-color-primary);
+
     width: 100%;
   }
 
@@ -375,7 +387,7 @@
     display: flex;
     align-items: center;
     border-radius: 4px;
-    background: rgba(41, 69, 196, 0.5); // Darker blue background matching design
+    background: rgb(41 69 196 / 50%); // Darker blue background matching design
     padding: 12px 16px;
     margin: 5px 0;
     width: 100%;
diff --git a/frontend/src/pages/Home/HomePage.scss b/frontend/src/pages/Home/HomePage.scss
index 7e62544c..16070de3 100644
--- a/frontend/src/pages/Home/HomePage.scss
+++ b/frontend/src/pages/Home/HomePage.scss
@@ -1,6 +1,4 @@
 .home-page {
-  background: url('../../../assets/Reports_bg.png') no-repeat center center;
-  background-color: var(--ion-color-light);
   min-height: 100%;
 
   &__greeting {
@@ -19,7 +17,7 @@
     }
 
     &-title {
-      font-family: 'Merriweather', serif;
+      font-family: Merriweather, serif;
       font-size: 1rem;
       color: var(--ion-color-medium);
       margin: 0 0 0.25rem;
@@ -41,19 +39,21 @@
       width: 4rem;
       height: 4rem;
       border: 3px solid white;
-      box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
+      box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 10%);
     }
   }
 
   &__ai-card {
     margin-bottom: 1.5rem;
     border-radius: 1rem;
-    box-shadow: 0 0.25rem 1rem rgba(71, 101, 255, 0.1);
+    box-shadow: 0 0.25rem 1rem rgb(71 101 255 / 10%);
     background-color: #4765ff;
     overflow: visible;
     position: relative;
+
     --ion-card-margin-start: 0;
     --ion-card-margin-end: 0;
+
     margin-inline: 0;
     height: 7.5rem;
 
@@ -187,7 +187,6 @@
       max-width: 100%;
       height: auto;
       display: block;
-      vertical-align: bottom;
       margin-bottom: 0;
     }
   }
@@ -217,12 +216,15 @@
     &-list {
       margin-bottom: 1rem;
       background: transparent;
+      box-shadow: none;
 
       ion-item {
         --background: white;
-        --border-color: rgba(0, 0, 0, 0.05);
+        --border-color: rgb(0 0 0 / 5%);
+
         margin-bottom: 0.5rem;
         border-radius: 0.75rem;
+
         --padding-start: 1rem;
         --padding-end: 1rem;
 
@@ -233,12 +235,6 @@
     }
   }
 
-  &__reports-list {
-    margin-bottom: 2rem;
-    box-shadow: none;
-    background: transparent;
-  }
-
   &__empty-state {
     display: flex;
     justify-content: center;
diff --git a/frontend/src/pages/Reports/ReportDetailPage.scss b/frontend/src/pages/Reports/ReportDetailPage.scss
index 422fa3ab..59ecd0d4 100644
--- a/frontend/src/pages/Reports/ReportDetailPage.scss
+++ b/frontend/src/pages/Reports/ReportDetailPage.scss
@@ -1,13 +1,8 @@
 .report-detail-page {
   --padding-horizontal: 16px;
-  --page-background: radial-gradient(
-    circle,
-    rgb(250 250 255 / 83%) 0%,
-    rgb(249 252 255 / 100%) 100%
-  );
 
   ion-content {
-    --background: var(--page-background);
+    /* Removing custom background to use global background */
   }
 
   &__header {
diff --git a/frontend/src/pages/Reports/components/FilterPanel/FilterPanel.scss b/frontend/src/pages/Reports/components/FilterPanel/FilterPanel.scss
index 84002356..d011ca0a 100644
--- a/frontend/src/pages/Reports/components/FilterPanel/FilterPanel.scss
+++ b/frontend/src/pages/Reports/components/FilterPanel/FilterPanel.scss
@@ -36,8 +36,8 @@
     background-color: white;
     border: 1px solid #838b94;
     border-radius: 8px;
-    padding: 0.75rem 0.5rem;
-    font-size: 14px;
+    padding: 12px 8px;
+    font-size: 13px;
     font-weight: 500;
     color: var(--ion-color-medium);
     transition: all 0.2s ease;
@@ -66,7 +66,7 @@
     font-family: var(--font-family-base);
     --background: #435ff0;
     --color: white;
-    height: 48px;
+    height: 60px;
     font-weight: 600;
     margin: 0;
     --border-radius: 12px;
diff --git a/frontend/src/theme/theme-overrides.css b/frontend/src/theme/theme-overrides.css
index b7e0b51f..dd476a9a 100644
--- a/frontend/src/theme/theme-overrides.css
+++ b/frontend/src/theme/theme-overrides.css
@@ -59,13 +59,31 @@
 /* Global safe area padding for all pages */
 ion-content {
   --padding-top: var(--ion-safe-area-top, 1rem);
+  --background: transparent !important;
 }
 
 /* Background for the entire app */
 body,
 ion-app,
 ion-content {
-  background: url('../../assets/Reports_bg.png') no-repeat center center !important;
+  background: url('../assets/Reports_bg.png') no-repeat center center fixed !important;
+  background-size: cover !important;
+}
+
+/* Ensure background is applied to specific pages */
+.home-page,
+.report-detail-page,
+.reports-list-page {
+  background: transparent !important;
+}
+
+.report-detail-page ion-content {
+  --background: transparent !important;
+}
+
+/* Override any other page-specific backgrounds */
+ion-content::part(background) {
+  background: transparent !important;
 }
 
 /* Remove left padding from router outlet to avoid double padding */