diff --git a/pdf/src/app/pages/(home).page.ts b/pdf/src/app/pages/(home).page.ts
index a91467d..b7fe48a 100644
--- a/pdf/src/app/pages/(home).page.ts
+++ b/pdf/src/app/pages/(home).page.ts
@@ -13,7 +13,7 @@ import { ToastModule } from 'primeng/toast'
 import { DisclaimerComponent } from '../shared/components/disclaimer/disclaimer.component'
 import { PdfHandlerBase } from '../shared/components/pdf-handler-base/pdf-handler-base.directive'
 import { ShoutOutComponent } from '../shared/components/shout-out/shout-out.component'
-import { ByteToKbPipe } from '../shared/pipes/bytes-to-kb.pipe'
+import { ByteSizeFormatter } from '../shared/pipes'
 import { getNextDays } from '../shared/utils'
 
 export const routeMeta: RouteMeta = {
@@ -57,7 +57,9 @@ export const routeMeta: RouteMeta = {
       <p class="mb-4">
         Congratulations! Your file is reduced by
         <strong
-          >{{ this.currentFileSize() - this.newFileSize() | byteToKb }}!</strong
+          >{{
+            this.currentFileSize() - this.newFileSize() | byteSizeFormatter
+          }}!</strong
         >
       </p>
       }
@@ -85,7 +87,7 @@ export const routeMeta: RouteMeta = {
     BuyMeACoffeeComponent,
     ShoutOutComponent,
     DisclaimerComponent,
-    ByteToKbPipe,
+    ByteSizeFormatter,
   ],
 })
 export default class HomeComponent extends PdfHandlerBase {
diff --git a/pdf/src/app/shared/components/header/header.component.ts b/pdf/src/app/shared/components/header/header.component.ts
index 317aa7c..01fe8aa 100644
--- a/pdf/src/app/shared/components/header/header.component.ts
+++ b/pdf/src/app/shared/components/header/header.component.ts
@@ -19,19 +19,6 @@ import { LoginComponent, ProfileComponent } from '@pdfun/ui/auth'
     RouterLinkWithHref,
     RouterLinkActive,
   ],
-  styles: `
-  .link {
-    color: #9ca3af;
-    text-decoration: none;
-    transition: color 0.3s;
-  }
-  .link:hover {
-    color: white;
-  }
-  .active-link {
-    color: #e5e7eb;
-  }
-  `,
   template: `
     <!-- REPLACE With PrimeNG Menubar -->
     <header class="bg-gray-800 py-4 px-6">
@@ -54,7 +41,7 @@ import { LoginComponent, ProfileComponent } from '@pdfun/ui/auth'
               <a
                 routerLink="/"
                 [routerLinkActiveOptions]="{ exact: true }"
-                routerLinkActive="active-link"
+                routerLinkActive="active"
                 class="link"
               >
                 Resize PDF
@@ -62,7 +49,7 @@ import { LoginComponent, ProfileComponent } from '@pdfun/ui/auth'
 
               <a
                 routerLink="/pdf-to-images"
-                routerLinkActive="active-link"
+                routerLinkActive="active"
                 class="link"
               >
                 PDF to Images
diff --git a/pdf/src/app/shared/pipes/byte-size-formatter.pipe.ts b/pdf/src/app/shared/pipes/byte-size-formatter.pipe.ts
new file mode 100644
index 0000000..babf0a9
--- /dev/null
+++ b/pdf/src/app/shared/pipes/byte-size-formatter.pipe.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+  name: 'byteSizeFormatter',
+  standalone: true,
+})
+export class ByteSizeFormatter implements PipeTransform {
+  transform(bytes: number, precision = 1): string {
+    if (isNaN(parseFloat(String(bytes))) || !isFinite(bytes))
+      return 'Invalid number'
+
+    const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB']
+    let unitIndex = 0
+
+    while (bytes >= 1024 && unitIndex < units.length - 1) {
+      bytes /= 1024
+      unitIndex++
+    }
+
+    return `${bytes.toFixed(precision)} ${units[unitIndex]}`
+  }
+}
diff --git a/pdf/src/app/shared/pipes/bytes-to-kb.pipe.ts b/pdf/src/app/shared/pipes/bytes-to-kb.pipe.ts
deleted file mode 100644
index 45c4f4b..0000000
--- a/pdf/src/app/shared/pipes/bytes-to-kb.pipe.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-
-@Pipe({
-  name: 'byteToKb',
-  standalone: true,
-})
-export class ByteToKbPipe implements PipeTransform {
-  transform(value: number): string {
-    if (isNaN(value)) {
-      return 'Invalid number'
-    }
-    return (value / 1024).toFixed(2) + ' KB'
-  }
-}
diff --git a/pdf/src/app/shared/pipes/index.ts b/pdf/src/app/shared/pipes/index.ts
new file mode 100644
index 0000000..07c0769
--- /dev/null
+++ b/pdf/src/app/shared/pipes/index.ts
@@ -0,0 +1 @@
+export * from './byte-size-formatter.pipe'
diff --git a/pdf/src/styles.scss b/pdf/src/styles.scss
index b6519ed..2a5144d 100644
--- a/pdf/src/styles.scss
+++ b/pdf/src/styles.scss
@@ -1,4 +1,4 @@
-@layer tailwind-base, tailwind-utilities, primeng;
+@layer tailwind-base, tailwind-utilities, tailwind-component, primeng;
 
 @layer tailwind-base {
   @tailwind base;
@@ -8,6 +8,19 @@
   @tailwind utilities;
 }
 
+@layer tailwind-components {
+  @tailwind components;
+}
+
+@layer tailwind-components {
+  .link {
+    @apply text-gray-400 no-underline hover:text-white transition-colors duration-300;
+  }
+  .active {
+    @apply text-gray-200;
+  }
+}
+
 @import 'primeng/resources/themes/tailwind-light/theme.css';
 @import 'primeng/resources/primeng.css';
 @import 'primeicons/primeicons.css';