diff --git a/frontend/src/components/shared/Tooltip.module.css b/frontend/src/components/shared/Tooltip.module.css
index 18b825c77..31cfd453b 100644
--- a/frontend/src/components/shared/Tooltip.module.css
+++ b/frontend/src/components/shared/Tooltip.module.css
@@ -24,6 +24,13 @@
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(59, 130, 246, 0.1);
 }
 
+/* Pinned tooltip header */
+.tooltip-container.pinned .tooltip-header {
+  background-color: var(--primary-color, #3b82f6);
+  color: white;
+  border-color: var(--primary-color, #3b82f6);
+}
+
 /* Close button */
 .tooltip-pin-button {
   position: absolute;
diff --git a/frontend/src/components/tips/COMPRESS_TIPS.ts b/frontend/src/components/tips/COMPRESS_TIPS.ts
index ac6b16d37..2813ee75a 100644
--- a/frontend/src/components/tips/COMPRESS_TIPS.ts
+++ b/frontend/src/components/tips/COMPRESS_TIPS.ts
@@ -1,25 +1,30 @@
+import { useTranslation } from 'react-i18next';
 import { TooltipContent } from './types';
 
-export const compressTips: TooltipContent = {
-  header: {
-    title: "Settings Overview"
-  },
-  tips: [
-    {
-      title: "Compression Method",
-      description: "Compression is an easy way to reduce your file size. Pick <strong>File Size</strong> to enter a target size and have us adjust quality for you. Pick <strong>Quality</strong> to set compression strength manually."
+export const useCompressTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("compress.tooltip.header.title", "Compress Settings Overview")
     },
-    {
-      title: "Quality Adjustment",
-      description: "Drag the slider to adjust the compression strength. <strong>Lower values (1-3)</strong> preserve quality but result in larger files. <strong>Higher values (7-9)</strong> shrink the file more but reduce image clarity.",
-      bullets: [
-        "Lower values preserve quality",
-        "Higher values reduce file size"
-      ]
-    },
-    {
-      title: "Grayscale",
-      description: "Select this option to convert all images to black and white, which can significantly reduce file size especially for scanned PDFs or image-heavy documents."
-    }
-  ]
+    tips: [
+      {
+        title: t("compress.tooltip.description.title", "Description"),
+        description: t("compress.tooltip.description.text", "Compression is an easy way to reduce your file size. Pick <strong>File Size</strong> to enter a target size and have us adjust quality for you. Pick <strong>Quality</strong> to set compression strength manually.")
+      },
+      {
+        title: t("compress.tooltip.qualityAdjustment.title", "Quality Adjustment"),
+        description: t("compress.tooltip.qualityAdjustment.text", "Drag the slider to adjust the compression strength. <strong>Lower values (1-3)</strong> preserve quality but result in larger files. <strong>Higher values (7-9)</strong> shrink the file more but reduce image clarity."),
+        bullets: [
+          t("compress.tooltip.qualityAdjustment.bullet1", "Lower values preserve quality"),
+          t("compress.tooltip.qualityAdjustment.bullet2", "Higher values reduce file size")
+        ]
+      },
+      {
+        title: t("compress.tooltip.grayscale.title", "Grayscale"),
+        description: t("compress.tooltip.grayscale.text", "Select this option to convert all images to black and white, which can significantly reduce file size especially for scanned PDFs or image-heavy documents.")
+      }
+    ]
+  };
 }; 
\ No newline at end of file
diff --git a/frontend/src/components/tips/OCR_TIPS.ts b/frontend/src/components/tips/OCR_TIPS.ts
index 3b9666d14..885224b85 100644
--- a/frontend/src/components/tips/OCR_TIPS.ts
+++ b/frontend/src/components/tips/OCR_TIPS.ts
@@ -1,31 +1,36 @@
+import { useTranslation } from 'react-i18next';
 import { TooltipContent } from './types';
 
-export const ocrTips: TooltipContent = {
-  header: {
-    title: "Basic Settings Overview",
-  },
-  tips: [
-    {
-      title: "OCR Mode",
-      description: "Optical Character Recognition (OCR) helps you turn scanned or screenshotted pages into text you can search, copy, or highlight.",
-      bullets: [
-        "<strong>Auto</strong> skips pages that already contain text layers.",
-        "<strong>Force</strong> re-OCRs every page and replaces all the text.",
-        "<strong>Strict</strong> halts if any selectable text is found."
-      ]
+export const useOcrTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("ocr.tooltip.header.title", "OCR Settings Overview"),
     },
-    {
-      title: "Languages",
-      description: "Improve OCR accuracy by specifying the expected languages. Choose one or more languages to guide detection."
-    },
-    {
-      title: "Output",
-      description: "Decide how you want the text output formatted:",
-      bullets: [
-        "<strong>Searchable PDF</strong> embeds text behind the original image.",
-        "<strong>HOCR XML</strong> returns a structured machine-readable file.",
-        "<strong>Plain-text sidecar</strong> creates a separate .txt file with raw content."
-      ]
-    }
-  ]
+    tips: [
+      {
+        title: t("ocr.tooltip.mode.title", "OCR Mode"),
+        description: t("ocr.tooltip.mode.text", "Optical Character Recognition (OCR) helps you turn scanned or screenshotted pages into text you can search, copy, or highlight."),
+        bullets: [
+          t("ocr.tooltip.mode.bullet1", "<strong>Auto</strong> skips pages that already contain text layers."),
+          t("ocr.tooltip.mode.bullet2", "<strong>Force</strong> re-OCRs every page and replaces all the text."),
+          t("ocr.tooltip.mode.bullet3", "<strong>Strict</strong> halts if any selectable text is found.")
+        ]
+      },
+      {
+        title: t("ocr.tooltip.languages.title", "Languages"),
+        description: t("ocr.tooltip.languages.text", "Improve OCR accuracy by specifying the expected languages. Choose one or more languages to guide detection.")
+      },
+      {
+        title: t("ocr.tooltip.output.title", "Output"),
+        description: t("ocr.tooltip.output.text", "Decide how you want the text output formatted:"),
+        bullets: [
+          t("ocr.tooltip.output.bullet1", "<strong>Searchable PDF</strong> embeds text behind the original image."),
+          t("ocr.tooltip.output.bullet2", "<strong>HOCR XML</strong> returns a structured machine-readable file."),
+          t("ocr.tooltip.output.bullet3", "<strong>Plain-text sidecar</strong> creates a separate .txt file with raw content.")
+        ]
+      }
+    ]
+  };
 }; 
\ No newline at end of file