diff --git a/TODO.md b/TODO.md
index cdb64e5..80aca9f 100644
--- a/TODO.md
+++ b/TODO.md
@@ -15,6 +15,7 @@
 - [x] Updated the Browser Plugin Manifest to V3.
 - [x] Webbrowser Plugin enable/disable
 - [x] Webbrowser Plugin icon
+- [x] Webbrowser Plugin theme support
 - [ ] Webbrowser Plugin show more data e.g. pubDate, author, category, etc.
 - [ ] Webbrowser Plugin add tabs or sections
 - [ ] Publish the Browser Plugin to Chrome Store
diff --git a/browser-plugin/jest.config.js b/browser-plugin/jest.config.js
index c8ac277..1aa0535 100644
--- a/browser-plugin/jest.config.js
+++ b/browser-plugin/jest.config.js
@@ -2,7 +2,8 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   roots: ['<rootDir>/src'],
-  testMatch: ['**/*.test.ts'],
+  testMatch: ['**/*.test.ts', '**/*.test.tsx'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },
diff --git a/browser-plugin/jest.setup.js b/browser-plugin/jest.setup.js
new file mode 100644
index 0000000..0932648
--- /dev/null
+++ b/browser-plugin/jest.setup.js
@@ -0,0 +1 @@
+require('@testing-library/jest-dom');
diff --git a/browser-plugin/package-lock.json b/browser-plugin/package-lock.json
index d7362c1..9f747c2 100644
--- a/browser-plugin/package-lock.json
+++ b/browser-plugin/package-lock.json
@@ -15,6 +15,8 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.39.2",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
         "@types/chrome": "^0.1.34",
         "@types/jest": "^30.0.0",
         "@types/loglevel": "^1.6.3",
@@ -40,6 +42,13 @@
         "webpack-cli": "^6.0.1"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
@@ -523,6 +532,16 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -1578,6 +1597,126 @@
         "@sinonjs/commons": "^3.0.1"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -1589,6 +1728,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1800,6 +1946,7 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2762,6 +2909,16 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -3580,6 +3737,13 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3775,6 +3939,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -3798,6 +3972,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -5269,6 +5450,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -6799,6 +6990,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/make-dir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
@@ -6896,6 +7097,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -7756,6 +7967,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -7804,6 +8016,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -8674,6 +8900,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
diff --git a/browser-plugin/package.json b/browser-plugin/package.json
index 15a63df..0fcd75c 100644
--- a/browser-plugin/package.json
+++ b/browser-plugin/package.json
@@ -15,6 +15,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/chrome": "^0.1.34",
     "@types/jest": "^30.0.0",
     "@types/loglevel": "^1.6.3",
diff --git a/browser-plugin/promo_assets/README.md b/browser-plugin/promo_assets/README.md
new file mode 100644
index 0000000..3770813
--- /dev/null
+++ b/browser-plugin/promo_assets/README.md
@@ -0,0 +1,31 @@
+# Chrome Web Store Promotional Assets
+
+This directory contains the promotional images required for submitting the extension to the Chrome Web Store. The images currently here are placeholders with the correct dimensions.
+
+Dashboard: <https://chrome.google.com/webstore/developer/dashboard>
+
+## Image Specifications
+
+### Store Icon
+- **Filename:** `store_icon_128x128.png`
+- **Dimensions:** 128 x 128 pixels
+- **Format:** PNG
+- **Description:** This is the main icon for your extension in the Chrome Web Store.
+
+### Screenshots
+- **Filenames:** `screenshot_1_1280x800.png`, `screenshot_2_1280x800.png`
+- **Dimensions:** 1280 x 800 pixels (or 640 x 400)
+- **Format:** JPEG or 24-bit PNG (no alpha transparency)
+- **Description:** You can have up to five screenshots to showcase your extension's functionality. At least one is required.
+
+### Small Promotional Tile
+- **Filename:** `small_promo_tile_440x280.png`
+- **Dimensions:** 440 x 280 pixels
+- **Format:** JPEG or 24-bit PNG (no alpha transparency)
+- **Description:** This tile is used for promotional purposes in various locations within the Chrome Web Store.
+
+### Marquee Promotional Tile
+- **Filename:** `marquee_promo_tile_1400x560.png`
+- **Dimensions:** 1400 x 560 pixels
+- **Format:** JPEG or 24-bit PNG (no alpha transparency)
+- **Description:** This is a larger promotional tile used for featuring in the Chrome Web Store's marquee carousel.
diff --git a/browser-plugin/promo_assets/marquee_promo_tile_1400x560.png b/browser-plugin/promo_assets/marquee_promo_tile_1400x560.png
new file mode 100644
index 0000000..8ed6ee6
Binary files /dev/null and b/browser-plugin/promo_assets/marquee_promo_tile_1400x560.png differ
diff --git a/browser-plugin/promo_assets/screenshot_1_1280x800.png b/browser-plugin/promo_assets/screenshot_1_1280x800.png
new file mode 100644
index 0000000..ca6ab91
Binary files /dev/null and b/browser-plugin/promo_assets/screenshot_1_1280x800.png differ
diff --git a/browser-plugin/promo_assets/screenshot_2_1280x800.png b/browser-plugin/promo_assets/screenshot_2_1280x800.png
new file mode 100644
index 0000000..9325a09
Binary files /dev/null and b/browser-plugin/promo_assets/screenshot_2_1280x800.png differ
diff --git a/browser-plugin/promo_assets/small_promo_tile_440x280.png b/browser-plugin/promo_assets/small_promo_tile_440x280.png
new file mode 100644
index 0000000..7479372
Binary files /dev/null and b/browser-plugin/promo_assets/small_promo_tile_440x280.png differ
diff --git a/browser-plugin/promo_assets/store_icon_128x128.png b/browser-plugin/promo_assets/store_icon_128x128.png
new file mode 100644
index 0000000..4ddf9e8
Binary files /dev/null and b/browser-plugin/promo_assets/store_icon_128x128.png differ
diff --git a/browser-plugin/src/host/ui/Footer.tsx b/browser-plugin/src/host/ui/Footer.tsx
new file mode 100644
index 0000000..5ab2321
--- /dev/null
+++ b/browser-plugin/src/host/ui/Footer.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const footerCss = `
+  .page-footer-text {
+    text-align: center;
+    padding: 1.5em;
+    color: var(--secondary-text);
+    font-size: 0.9em;
+    line-height: 1.5;
+  }
+  .page-footer-text a {
+    color: var(--secondary-text);
+    text-decoration: underline;
+  }
+  .page-footer-text a:hover {
+    color: var(--text-color);
+  }
+`;
+
+export const Footer = () => {
+  return (
+    <>
+      <style>{footerCss}</style>
+      <footer className="page-footer-text">
+        <a
+          href="https://github.com/egandro/news-deframer"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          News Deframer on GitHub
+        </a>
+      </footer>
+    </>
+  );
+};
diff --git a/browser-plugin/src/host/ui/ToggleSwitch.tsx b/browser-plugin/src/host/ui/ToggleSwitch.tsx
new file mode 100644
index 0000000..e8958f6
--- /dev/null
+++ b/browser-plugin/src/host/ui/ToggleSwitch.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+interface ToggleSwitchProps {
+  id: string;
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+  id,
+  label,
+  checked,
+  onChange,
+  disabled = false,
+}) => {
+  const handleToggle = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        opacity: disabled ? 0.6 : 1,
+        cursor: disabled ? 'not-allowed' : 'default',
+      }}
+    >
+      <label htmlFor={id} style={{
+        fontSize: '14px',
+        fontWeight: 500,
+        color: 'var(--text-color)',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+      }}>
+        {label}
+      </label>
+      <button
+        id={id}
+        role="switch"
+        aria-checked={checked}
+        onClick={handleToggle}
+        disabled={disabled}
+        style={{
+          position: 'relative',
+          display: 'inline-block',
+          width: '44px',
+          height: '24px',
+          backgroundColor: checked ? 'var(--accent-color)' : 'var(--rating-bg)',
+          borderRadius: '34px',
+          border: '1px solid var(--btn-border)',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          transition: 'background-color 0.2s',
+        }}
+      >
+        <span
+          style={{
+            position: 'absolute',
+            top: '2px',
+            left: checked ? '22px' : '2px',
+            width: '20px',
+            height: '20px',
+            borderRadius: '50%',
+            backgroundColor: 'white',
+            boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+            transition: 'left 0.2s',
+          }}
+        />
+      </button>
+    </div>
+  );
+};
diff --git a/browser-plugin/src/host/ui/index.html b/browser-plugin/src/host/ui/index.html
index 8b428cd..37ca2d4 100644
--- a/browser-plugin/src/host/ui/index.html
+++ b/browser-plugin/src/host/ui/index.html
@@ -3,17 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <title>News Deframer Settings</title>
-    <style>
-      body { width: 300px; padding: 10px; font-family: sans-serif; }
-    </style>
   </head>
   <body>
     <div id="root"></div>
-    <hr>
-    <footer>
-      <p style="text-align: center; font-size: 0.8em; color: #6c757d;">
-        <a href="https://github.com/egandro/news-deframer" target="_blank" rel="noopener noreferrer">News Deframer on GitHub</a>
-      </p>
-    </footer>
   </body>
 </html>
diff --git a/browser-plugin/src/host/ui/index.tsx b/browser-plugin/src/host/ui/index.tsx
new file mode 100644
index 0000000..5893336
--- /dev/null
+++ b/browser-plugin/src/host/ui/index.tsx
@@ -0,0 +1,17 @@
+import { createRoot } from 'react-dom/client';
+
+import { globalStyles } from '../../shared/theme';
+import { Options } from './options';
+
+const init = async () => {
+  // Inject global styles
+  const style = document.createElement('style');
+  style.textContent = globalStyles;
+  document.head.appendChild(style);
+
+  // Render the app
+  const root = createRoot(document.getElementById('root')!);
+  root.render(<Options />);
+};
+
+init();
diff --git a/browser-plugin/src/host/ui/options.tsx b/browser-plugin/src/host/ui/options.tsx
index 4c87d2c..4b5c3e4 100644
--- a/browser-plugin/src/host/ui/options.tsx
+++ b/browser-plugin/src/host/ui/options.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { createRoot } from 'react-dom/client';
 
 import { invalidateDomainCache } from '../../shared/domain-cache';
 import {
@@ -7,43 +6,89 @@ import {
   getSettings,
   Settings,
 } from '../../shared/settings';
+import { getThemeCss } from '../../shared/theme';
 import { ProxyResponse } from '../../shared/types';
+import { Footer } from './Footer';
+import { ToggleSwitch } from './ToggleSwitch';
 
 type Status = 'idle' | 'loading' | 'success' | 'error';
 
+// This file is the component, index.tsx is the entry point
 
-const Options = () => {
+export const Options = () => {
+  console.log('Options component rendering');
   const [settings, setSettings] = useState<Settings>({
     backendUrl: DEFAULT_BACKEND_URL,
     username: '',
     password: '',
     enabled: true,
+    theme: 'system',
   });
   const [status, setStatus] = useState<Status>('idle');
   const [loaded, setLoaded] = useState(false);
+  const [isDark, setIsDark] = useState(false);
 
   // Load settings on mount
   useEffect(() => {
+    console.log('Options: Loading settings...');
     getSettings().then((loadedSettings) => {
+      console.log('Options: Settings loaded:', loadedSettings);
       setSettings(loadedSettings);
       setLoaded(true);
       if (loadedSettings.enabled) {
         testConnection(loadedSettings);
       }
+    }).catch((error) => {
+      console.error('Options: Failed to load settings:', error);
     });
   }, []);
 
-  // Autosave when settings change (skip initial load)
+  // Autosave when settings change (skip initial load) - NO REFRESH for regular changes
   useEffect(() => {
     if (!loaded) return;
 
-    const handler = setTimeout(() => {
-      chrome.storage.local.set(settings);
+    const handler = setTimeout(async () => {
+      await chrome.storage.local.set(settings);
     }, 500);
 
     return () => clearTimeout(handler);
   }, [settings, loaded]);
 
+  // Save immediately and refresh tab when specific user interactions require it
+  const saveAndRefresh = async (newSettings: Settings) => {
+    await chrome.storage.local.set(newSettings);
+    const [tab] = await chrome.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
+    if (tab?.id && tab.url?.match(/^https?:\/\//)) {
+      chrome.tabs.reload(tab.id);
+    }
+  };
+
+  // Update theme on change
+  useEffect(() => {
+    let dark: boolean;
+    if (settings.theme === 'system') {
+      dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    } else {
+      dark = settings.theme === 'dark';
+    }
+    setIsDark(dark);
+
+    // Inject theme styles
+    const styleId = 'theme-styles';
+    let style = document.getElementById(styleId);
+    if (!style) {
+      style = document.createElement('style');
+      style.id = styleId;
+      document.head.appendChild(style);
+    }
+    style.textContent = getThemeCss(settings.theme);
+  }, [settings.theme]);
+
+
+
   const testConnection = async (currentSettings: Settings) => {
     setStatus('loading');
     try {
@@ -89,6 +134,33 @@ const Options = () => {
       return; // Ignore click if test is already in progress
     }
     testConnection(settings);
+    saveAndRefresh(settings);
+  };
+
+  const handleEnableToggle = async (enabled: boolean) => {
+    const newSettings = { ...settings, enabled };
+    setSettings(newSettings);
+
+    // Persist immediately so the reloaded tab sees the new state
+    await chrome.storage.local.set(newSettings);
+
+    if (enabled) {
+      // On successful enable, just test the connection and refresh
+      await testConnection(newSettings);
+      await saveAndRefresh(newSettings);
+    } else {
+      // On disable, invalidate cache, reload tab, and close popup
+      setStatus('idle');
+      await invalidateDomainCache();
+      const [tab] = await chrome.tabs.query({
+        active: true,
+        currentWindow: true,
+      });
+      if (tab?.id && tab.url?.match(/^https?:\/\//)) {
+        chrome.tabs.reload(tab.id);
+      }
+      window.close();
+    }
   };
 
   if (!loaded) return <div style={{ padding: '20px' }}>Loading...</div>;
@@ -101,10 +173,9 @@ const Options = () => {
     <div
       style={{
         padding: '24px',
-        maxWidth: '400px',
-        fontFamily:
-          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-        color: '#333',
+        width: '780px', // Force width to be wide
+        margin: '0 auto',
+        color: 'var(--text-color)', // Font is now inherited from body
       }}
     >
       <div
@@ -113,7 +184,7 @@ const Options = () => {
           justifyContent: 'space-between',
           alignItems: 'center',
           marginBottom: '24px',
-          borderBottom: '1px solid #eee',
+          borderBottom: '1px solid var(--border-color)',
           paddingBottom: '16px',
         }}
       >
@@ -127,17 +198,23 @@ const Options = () => {
               fontSize: '12px',
               fontWeight: 600,
               color: isConnected
-                ? '#10B981'
+                ? 'var(--success-color)'
                 : isError
-                ? '#EF4444'
-                : '#6B7280',
-              backgroundColor: isConnected
-                ? '#D1FAE5'
-                : isError
-                ? '#FEE2E2'
-                : '#F3F4F6',
+                ? 'var(--danger-color)'
+                : 'var(--secondary-text)',
+              backgroundColor: 'var(--bg-color)', // Simple bg for now
+              border: `1px solid ${
+                isConnected
+                  ? 'var(--success-color)'
+                  : isError
+                  ? 'var(--danger-color)'
+                  : 'var(--border-color)'
+              }`,
               padding: '4px 8px',
               borderRadius: '12px',
+              boxShadow: isDark && (isConnected || isError) ? `0 0 8px ${
+                isConnected ? 'var(--success-color)' : 'var(--danger-color)'
+              }` : 'none',
             }}
           >
             <span
@@ -155,30 +232,31 @@ const Options = () => {
         )}
       </div>
 
-      <div
-        style={{
-          backgroundColor: '#f9fafb',
-          border: '1px solid #e5e7eb',
-          borderRadius: '8px',
-          padding: '16px',
-          marginBottom: '24px',
-          opacity: settings.enabled ? 1 : 0.6,
-          transition: 'opacity 0.2s',
-          pointerEvents: settings.enabled ? 'auto' : 'none',
-        }}
-      >
-        <h3
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', alignItems: 'start', marginBottom: '24px' }}>
+        <div
           style={{
-            marginTop: 0,
-            marginBottom: '16px',
-            fontSize: '14px',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            color: '#6b7280',
+            backgroundColor: 'var(--card-bg)',
+            border: '1px solid var(--border-color)',
+            borderRadius: '8px',
+            padding: '16px',
+            boxShadow: 'var(--card-shadow)',
+            opacity: settings.enabled ? 1 : 0.6,
+            transition: 'opacity 0.2s',
+            pointerEvents: settings.enabled ? 'auto' : 'none',
           }}
         >
-          Connection Settings
-        </h3>
+          <h3
+            style={{
+              marginTop: 0,
+              marginBottom: '16px',
+              fontSize: '14px',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+              color: 'var(--secondary-text)',
+            }}
+          >
+            Connection
+          </h3>
 
         <div style={{ marginBottom: '16px' }}>
           <label
@@ -200,18 +278,18 @@ const Options = () => {
             disabled={!settings.enabled}
             style={{
               width: '100%',
-              padding: '8px 12px',
+              padding: '10px',
               borderRadius: '6px',
-              border: '1px solid #d1d5db',
-              boxSizing: 'border-box',
+              border: '1px solid var(--btn-border)',
               fontSize: '14px',
-              backgroundColor: settings.enabled ? '#fff' : '#f3f4f6',
+              backgroundColor: settings.enabled ? 'var(--bg-color)' : 'var(--rating-bg)',
+              color: 'var(--text-color)',
             }}
             placeholder="http://localhost:8080"
           />
         </div>
 
-        <div style={{ marginBottom: '16px' }}>
+          <div style={{ marginBottom: '16px' }}>
           <label
             style={{
               display: 'block',
@@ -221,7 +299,7 @@ const Options = () => {
             }}
           >
             Username{' '}
-            <span style={{ fontWeight: 400, color: '#9ca3af' }}>
+            <span style={{ fontWeight: 400, color: 'var(--secondary-text)' }}>
               (Optional)
             </span>
           </label>
@@ -234,12 +312,12 @@ const Options = () => {
             disabled={!settings.enabled}
             style={{
               width: '100%',
-              padding: '8px 12px',
+              padding: '10px',
               borderRadius: '6px',
-              border: '1px solid #d1d5db',
-              boxSizing: 'border-box',
+              border: '1px solid var(--btn-border)',
               fontSize: '14px',
-              backgroundColor: settings.enabled ? '#fff' : '#f3f4f6',
+              backgroundColor: settings.enabled ? 'var(--bg-color)' : 'var(--rating-bg)',
+              color: 'var(--text-color)',
             }}
           />
         </div>
@@ -254,7 +332,7 @@ const Options = () => {
             }}
           >
             Password{' '}
-            <span style={{ fontWeight: 400, color: '#9ca3af' }}>
+            <span style={{ fontWeight: 400, color: 'var(--secondary-text)' }}>
               (Optional)
             </span>
           </label>
@@ -267,94 +345,129 @@ const Options = () => {
             disabled={!settings.enabled}
             style={{
               width: '100%',
-              padding: '8px 12px',
+              padding: '10px',
               borderRadius: '6px',
-              border: '1px solid #d1d5db',
-              boxSizing: 'border-box',
+              border: '1px solid var(--btn-border)',
               fontSize: '14px',
-              backgroundColor: settings.enabled ? '#fff' : '#f3f4f6',
+              backgroundColor: settings.enabled ? 'var(--bg-color)' : 'var(--rating-bg)',
+              color: 'var(--text-color)',
             }}
           />
         </div>
 
-        <button
-          onClick={handleTestClick}
-          disabled={!settings.enabled || isLoading}
-          style={{
-            width: '100%',
-            padding: '10px',
-            backgroundColor: settings.enabled ? '#fff' : '#f3f4f6',
-            border: '1px solid #d1d5db',
-            borderRadius: '6px',
-            cursor: !settings.enabled || isLoading ? 'not-allowed' : 'pointer',
-            fontSize: '14px',
-            fontWeight: 500,
-            color: settings.enabled ? '#374151' : '#9ca3af',
-            transition: 'background-color 0.2s, color 0.2s',
-          }}
-        >
-          {isLoading ? 'Testing...' : 'Test Connection'}
-        </button>
-      </div>
-
-      {/* Main Enable Toggle */}
-      <div style={{ marginBottom: '24px' }}>
-        <label
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            cursor: 'pointer',
-            fontSize: '16px',
-            fontWeight: 500,
-          }}
-        >
-          <input
-            type="checkbox"
-            checked={settings.enabled}
-            onChange={async (e) => {
-              const enabled = e.target.checked;
-              const newSettings = { ...settings, enabled };
-              setSettings(newSettings);
-
-              // Persist immediately so the reloaded tab sees the new state
-              await chrome.storage.local.set(newSettings);
+          <button
+            onClick={handleTestClick}
+            disabled={!settings.enabled || isLoading}
+            style={{
+              width: '100%',
+              padding: '10px',
+              backgroundColor: settings.enabled ? 'var(--btn-bg)' : 'var(--rating-bg)',
+              border: '1px solid var(--btn-border)',
+              borderRadius: '6px',
+              cursor: !settings.enabled || isLoading ? 'not-allowed' : 'pointer',
+              fontSize: '14px',
+              fontWeight: 500,
+              color: settings.enabled ? 'var(--btn-text)' : 'var(--secondary-text)',
+              transition: 'background-color 0.2s, color 0.2s',
+            }}
+          >
+            {isLoading ? 'Testing...' : 'Test Connection'}
+          </button>
+        </div>
 
-              if (enabled) {
-                const success = await testConnection(newSettings);
-                if (success) {
-                  // On successful enable, reload tab and close popup
-                  const [tab] = await chrome.tabs.query({
-                    active: true,
-                    currentWindow: true,
-                  });
-                  if (tab?.id && tab.url?.match(/^https?:\/\//)) {
-                    chrome.tabs.reload(tab.id);
-                  }
-                  window.close();
-                }
-                // If not successful, do nothing (window stays open, no reload)
-              } else {
-                // On disable, invalidate cache, reload tab, and close popup
-                setStatus('idle');
-                await invalidateDomainCache();
-                const [tab] = await chrome.tabs.query({
-                  active: true,
-                  currentWindow: true,
-                });
-                if (tab?.id && tab.url?.match(/^https?:\/\//)) {
-                  chrome.tabs.reload(tab.id);
-                }
-                window.close();
-              }
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+          {/* Theme Selection */}
+          <div
+            style={{
+              backgroundColor: 'var(--card-bg)',
+              border: '1px solid var(--border-color)',
+              borderRadius: '8px',
+              padding: '16px',
+              boxShadow: 'var(--card-shadow)',
             }}
-            style={{ marginRight: '10px', width: '18px', height: '18px' }}
-          />
-          Enable Extension
-        </label>
+          >
+            <h3
+              style={{
+                marginTop: 0,
+                marginBottom: '16px',
+                fontSize: '14px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                color: 'var(--secondary-text)',
+              }}
+            >
+              Theme
+            </h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+               {(['light', 'dark', 'system'] as const).map((theme) => (
+                 <button
+                   key={theme}
+                   onClick={() => {
+                     const newSettings = { ...settings, theme };
+                     setSettings(newSettings);
+                     saveAndRefresh(newSettings);
+                   }}
+                   style={{
+                    padding: '10px',
+                    border: `1px solid ${
+                      settings.theme === theme
+                        ? 'var(--accent-color)'
+                        : 'var(--btn-border)'
+                    }`,
+                    borderRadius: '6px',
+                    backgroundColor:
+                      settings.theme === theme ? 'var(--accent-color)' : 'var(--btn-bg)',
+                    color:
+                      settings.theme === theme
+                        ? 'var(--accent-text)'
+                        : 'var(--btn-text)',
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '8px',
+                  }}
+                >
+                  {theme === 'light' && '☀️ Light Mode'}
+                  {theme === 'dark' && '🌙 Dark Mode'}
+                  {theme === 'system' && '💻 System Default'}
+                </button>
+              ))}
+            </div>
+          </div>
+          {/* General Settings */}
+          <div
+            style={{
+              backgroundColor: 'var(--card-bg)',
+              border: '1px solid var(--border-color)',
+              borderRadius: '8px',
+              padding: '16px',
+              boxShadow: 'var(--card-shadow)',
+            }}
+          >
+             <h3
+              style={{
+                marginTop: 0,
+                marginBottom: '16px',
+                fontSize: '14px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                color: 'var(--secondary-text)',
+              }}
+            >
+              General
+            </h3>
+            <ToggleSwitch
+              id="enable-extension"
+              label="Enable Extension"
+              checked={settings.enabled}
+              onChange={handleEnableToggle}
+            />
+          </div>
+        </div>
       </div>
+      <Footer />
     </div>
   );
 };
-
-const root = createRoot(document.getElementById('root')!);
-root.render(<Options />);
diff --git a/browser-plugin/src/ndf/components/ArticleTile.test.tsx b/browser-plugin/src/ndf/components/ArticleTile.test.tsx
new file mode 100644
index 0000000..6d4eb4a
--- /dev/null
+++ b/browser-plugin/src/ndf/components/ArticleTile.test.tsx
@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { AnalyzedItem } from '../client';
+import { ArticleTile } from './ArticleTile';
+
+describe('ArticleTile', () => {
+  const mockItem: AnalyzedItem = {
+    url: 'http://example.com/article1',
+    title_original: 'Original Title',
+    description_original: 'Original Description',
+    rating: 0.85,
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(<ArticleTile item={mockItem} />);
+    expect(container).not.toBeNull();
+  });
+});
diff --git a/browser-plugin/src/ndf/components/ArticleTile.tsx b/browser-plugin/src/ndf/components/ArticleTile.tsx
new file mode 100644
index 0000000..777af12
--- /dev/null
+++ b/browser-plugin/src/ndf/components/ArticleTile.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { AnalyzedItem } from '../client';
+import { RatingBarOverlay } from './RatingBarOverlay';
+
+const tileCss = `
+  .tile-link { text-decoration: none; color: inherit; display: block; height: 100%; }
+  .tile { background-color: var(--card-bg); border-radius: 8px; box-shadow: var(--card-shadow); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; height: 100%; position: relative; }
+  .tile:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); }
+  .image-container { position: relative; }
+  .image-container img { width: 100%; height: auto; display: block; }
+  .content { padding: 15px; }
+  h3 { margin: 0 0 10px; font-size: 1.1em; color: var(--text-color); }
+  p { font-size: 0.9em; color: var(--secondary-text); margin: 0; }
+`;
+
+interface ArticleTileProps {
+  item: AnalyzedItem;
+}
+
+export const ArticleTile = ({ item }: ArticleTileProps) => {
+  const title = item.title_corrected || item.title_original || 'No title';
+  const description = item.description_corrected || item.description_original || 'No description';
+  const imageUrl = item.media?.medium === 'image' ? item.media.url : '';
+
+  return (
+    <a href={item.url} className="tile-link">
+        <style>{tileCss}</style>
+      <div className="tile">
+        <RatingBarOverlay value={item.rating} reason={item.overall_reason} />
+        {imageUrl ? (
+          <div className="image-container">
+            <img src={imageUrl} alt={item.media?.description || ''} />
+          </div>
+        ) : null}
+        <div className="content">
+          <h3>{title}</h3>
+          <p>{description}</p>
+        </div>
+      </div>
+    </a>
+  );
+};
diff --git a/browser-plugin/src/ndf/components/Footer.test.tsx b/browser-plugin/src/ndf/components/Footer.test.tsx
new file mode 100644
index 0000000..20465a3
--- /dev/null
+++ b/browser-plugin/src/ndf/components/Footer.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { Footer } from './Footer';
+
+describe('Footer', () => {
+  it('renders the link with the correct href and text', () => {
+    render(<Footer />);
+    const linkElement = screen.getByText('News Deframer');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute(
+      'href',
+      'https://github.com/egandro/news-deframer',
+    );
+  });
+});
diff --git a/browser-plugin/src/ndf/components/Footer.tsx b/browser-plugin/src/ndf/components/Footer.tsx
new file mode 100644
index 0000000..52b99c0
--- /dev/null
+++ b/browser-plugin/src/ndf/components/Footer.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+const footerCss = `
+  .page-footer-text {
+    text-align: center;
+    padding: 1.5em;
+    color: var(--secondary-text);
+    font-size: 0.9em;
+    line-height: 1.5;
+  }
+  .page-footer-text a {
+    color: var(--secondary-text);
+    text-decoration: underline;
+  }
+  .page-footer-text a:hover {
+    color: var(--text-color);
+  }
+`;
+
+export const Footer = () => {
+  return (
+    <>
+      <style>{footerCss}</style>
+      <footer className="page-footer-text">
+        This content was replaced by the{' '}
+        <a
+          href="https://github.com/egandro/news-deframer"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          News Deframer
+        </a>{' '}
+        browser plugin.
+      </footer>
+    </>
+  );
+};
diff --git a/browser-plugin/src/ndf/components/RatingBar.test.tsx b/browser-plugin/src/ndf/components/RatingBar.test.tsx
new file mode 100644
index 0000000..332f0e4
--- /dev/null
+++ b/browser-plugin/src/ndf/components/RatingBar.test.tsx
@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { RatingBar } from './RatingBar';
+
+describe('RatingBar', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<RatingBar value={0.75} label="Test Label" />);
+    expect(container).not.toBeNull();
+  });
+});
diff --git a/browser-plugin/src/ndf/components/RatingBar.tsx b/browser-plugin/src/ndf/components/RatingBar.tsx
new file mode 100644
index 0000000..9668a08
--- /dev/null
+++ b/browser-plugin/src/ndf/components/RatingBar.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+
+const getRatingColors = (percentage: number): { bg: string; text: string } => {
+  if (percentage < 34) return { bg: 'var(--success-color)', text: '#ffffff' }; // Accessible Green
+  if (percentage < 67) return { bg: 'var(--warning-color)', text: '#000000' }; // Accessible Yellow
+  return { bg: 'var(--danger-color)', text: '#ffffff' }; // Accessible Red
+};
+
+const formatRatingPercent = (rating: number | undefined): number =>
+  Math.round((rating || 0.0) * 100);
+
+const ratingBarCss = `
+  .bar-container {
+    background-color: var(--rating-bg);
+    border-radius: 5px;
+    height: 30px;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  .bar {
+    height: 100%;
+    border-radius: 5px;
+    transition: width 0.3s ease;
+  }
+  .bar-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    font-weight: bold;
+    font-size: 0.95em;
+    pointer-events: none;
+  }
+`;
+
+interface RatingBarProps {
+  value: number | undefined;
+  label?: string;
+  id?: string;
+  reason?: string;
+}
+
+export const RatingBar = ({ value, label, id, reason }: RatingBarProps) => {
+  const percentage = formatRatingPercent(value);
+  const colors = getRatingColors(percentage);
+  const textShadow =
+    colors.text === '#ffffff' ? '0 0 3px rgba(0,0,0,0.7)' : '';
+
+  return (
+    <>
+      <style>{ratingBarCss}</style>
+      {label && <div className="metric-label">{label}</div>}
+      <div className="metric-details">
+        <div
+          className="bar-container"
+          role="meter"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={percentage}
+          aria-label={`${label || 'Rating'}: ${percentage}%`}
+          aria-describedby={id ? `${id}-reason` : undefined}
+        >
+          <div
+            className="bar"
+            style={{ width: `${percentage}%`, backgroundColor: colors.bg }}
+          />
+          {value !== undefined && (
+            <div className="bar-overlay" style={{ color: colors.text, textShadow }}>
+              <span>{percentage}%</span>
+            </div>
+          )}
+        </div>
+        {reason && (
+          <p id={id ? `${id}-reason` : undefined} className="reason">
+            {reason}
+          </p>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/browser-plugin/src/ndf/components/RatingBarOverlay.test.tsx b/browser-plugin/src/ndf/components/RatingBarOverlay.test.tsx
new file mode 100644
index 0000000..bf39ce1
--- /dev/null
+++ b/browser-plugin/src/ndf/components/RatingBarOverlay.test.tsx
@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { RatingBarOverlay } from './RatingBarOverlay';
+
+describe('RatingBarOverlay', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <RatingBarOverlay value={0.75} reason="Test Reason" />,
+    );
+    expect(container).not.toBeNull();
+  });
+});
diff --git a/browser-plugin/src/ndf/components/RatingBarOverlay.tsx b/browser-plugin/src/ndf/components/RatingBarOverlay.tsx
new file mode 100644
index 0000000..97d6425
--- /dev/null
+++ b/browser-plugin/src/ndf/components/RatingBarOverlay.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+
+const getRatingColors = (percentage: number): { bg: string; text: string } => {
+  if (percentage < 34) return { bg: 'var(--success-color)', text: '#ffffff' }; // Accessible Green
+  if (percentage < 67) return { bg: 'var(--warning-color)', text: '#000000' }; // Accessible Yellow
+  return { bg: 'var(--danger-color)', text: '#ffffff' }; // Accessible Red
+};
+
+const formatRatingPercent = (rating: number | undefined): number =>
+  Math.round((rating || 0.0) * 100);
+
+const overlayCss = `
+  .bar-container {
+    background-color: var(--rating-bg);
+    height: 30px;
+    width: 100%;
+    position: relative; /* For overlay and tooltip */
+  }
+  .bar {
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+  .bar-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    font-weight: bold;
+    font-size: 0.9em;
+    pointer-events: none;
+  }
+  .bar-container .tooltip-text {
+    visibility: hidden;
+    opacity: 0;
+    width: 250px;
+    background-color: var(--tooltip-bg);
+    color: var(--tooltip-text);
+    text-align: left;
+    border-radius: 6px;
+    padding: 10px;
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: opacity 0.2s;
+    font-size: 0.9em;
+    line-height: 1.4;
+    pointer-events: none;
+  }
+  .bar-container:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+  }
+`;
+
+interface RatingBarOverlayProps {
+  value: number | undefined;
+  reason?: string;
+  className?: string;
+}
+
+export const RatingBarOverlay = ({
+  value,
+  reason,
+  className,
+}: RatingBarOverlayProps) => {
+  const percentage = formatRatingPercent(value);
+  const colors = getRatingColors(percentage);
+  const textShadow =
+    colors.text === '#ffffff' ? '0 0 3px rgba(0,0,0,0.7)' : '';
+
+  return (
+    <div className={className}>
+      <style>{overlayCss}</style>
+      <div
+        className="bar-container"
+        role="meter"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={percentage}
+        aria-label={`Overall rating: ${percentage}%. Reason: ${reason || 'No reason provided.'}`}
+      >
+        <div
+          className="bar"
+          style={{ width: `${percentage}%`, backgroundColor: colors.bg }}
+        />
+        <div
+          className="bar-overlay"
+          style={{ color: colors.text, textShadow }}
+        >
+          <span>{percentage}%</span>
+        </div>
+        <div className="tooltip-text">{reason || 'No reason provided.'}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/browser-plugin/src/ndf/components/Spinner.tsx b/browser-plugin/src/ndf/components/Spinner.tsx
new file mode 100644
index 0000000..ec80f96
--- /dev/null
+++ b/browser-plugin/src/ndf/components/Spinner.tsx
@@ -0,0 +1,45 @@
+export const Spinner = () => {
+  const spinnerSvgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="42" fill="#FFFFFF"/>
+  <circle cx="50" cy="50" r="40" fill="#1F2937"/>
+  <path d="M50,50 L50,15 L75,25 Z" fill="#4B5563"/>
+  <path d="M50,50 L75,25 L85,50 Z" fill="#6B7280"/>
+  <path d="M50,50 L85,50 L75,75 Z" fill="#9CA3AF"/>
+  <path d="M50,50 L75,75 L50,85 Z" fill="#D1D5DB"/>
+  <path d="M50,50 L50,85 L25,75 Z" fill="#9CA3AF"/>
+  <path d="M50,50 L25,75 L15,50 Z" fill="#6B7280"/>
+  <path d="M50,50 L15,50 L25,25 Z" fill="#4B5563"/>
+  <path d="M50,50 L25,25 L50,15 Z" fill="#374151"/>
+  <circle cx="50" cy="50" r="10" fill="#fff"/>
+</svg>`;
+  const encodedSvg = `data:image/svg+xml;base64,${btoa(spinnerSvgContent)}`;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+      }}
+    >
+      <style>
+        {`
+          @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+      <img
+        src={encodedSvg}
+        alt="Loading..."
+        style={{
+          width: '64px',
+          height: '64px',
+          animation: 'spin 1.5s linear infinite',
+        }}
+      />
+    </div>
+  );
+};
diff --git a/browser-plugin/src/ndf/footer.ts b/browser-plugin/src/ndf/footer.ts
deleted file mode 100644
index ba3ea6e..0000000
--- a/browser-plugin/src/ndf/footer.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export const createFooterHtml = (): string => {
-  return `
-    <footer class="page-footer-text">
-      This content was replaced by the <a href="https://github.com/egandro/news-deframer" target="_blank" rel="noopener noreferrer">News Deframer</a> browser plugin.
-    </footer>
-  `;
-};
-
-export const getFooterCss = (): string => {
-  return `
-    .page-footer-text {
-      text-align: center;
-      padding: 1.5em;
-      color: #6c757d;
-      font-size: 0.9em;
-      line-height: 1.5;
-    }
-    .page-footer-text a {
-      color: #495057;
-      text-decoration: underline;
-    }
-    .page-footer-text a:hover {
-      color: #212529;
-    }
-  `;
-};
\ No newline at end of file
diff --git a/browser-plugin/src/ndf/handler-article.test.ts b/browser-plugin/src/ndf/handler-article.test.ts
deleted file mode 100644
index 147e18d..0000000
--- a/browser-plugin/src/ndf/handler-article.test.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * @jest-environment-options { "url": "http://test.com/" }
- */
-
-import log from '../shared/logger';
-import { NewsDeframerClient } from './client';
-import { handleArticle } from './handler-article';
-
-describe('Article Handler', () => {
-  const mockClient = {
-    getItem: jest.fn(),
-  } as unknown as NewsDeframerClient;
-
-  const mockStop = jest.fn();
-
-  beforeEach(() => {
-    // Reset the document body for each test
-    document.body.innerHTML = '';
-    document.body.style.border = '';
-    jest.clearAllMocks();
-    jest.restoreAllMocks();
-
-    // Mock window.stop and window.location
-    window.stop = mockStop;
-    // In JSDOM, window.location.reload is read-only and cannot be mocked.
-    // Tests that trigger a reload will instead assert that the call throws the
-    // expected "Not implemented" error from the JSDOM environment.
-
-    sessionStorage.clear();
-  });
-
-  test('should fetch item for current URL', async () => {
-    mockClient.getItem = jest.fn().mockResolvedValue({ hash: '123', url: 'http://test.com/', rating: 5 });
-    await handleArticle(mockClient);
-
-    expect(mockClient.getItem).toHaveBeenCalledWith('http://test.com/');
-    expect(mockStop).toHaveBeenCalled();
-  });
-
-  test('should log a message to the console', async () => {
-    const logSpy = jest.spyOn(log, 'info').mockImplementation(() => {});
-    mockClient.getItem = jest.fn().mockResolvedValue({ hash: '123', url: 'http://test.com/', rating: 5 });
-    await handleArticle(mockClient);
-    expect(logSpy).toHaveBeenCalledWith('Article page detected. Stopping window immediately.');
-    logSpy.mockRestore();
-  });
-
-  test('should log info and set bypass if no item is found', async () => {
-    mockClient.getItem = jest.fn().mockResolvedValue(null);
-    const logSpy = jest.spyOn(log, 'info').mockImplementation(() => {});
-
-    // This will call reload() and JSDOM will complain, but the test will continue.
-    await handleArticle(mockClient);
-
-    expect(logSpy).toHaveBeenCalledWith('No item found for this URL. Reloading with bypass.');
-    expect(sessionStorage.getItem('__ndf-bypass')).toBe('true');
-    logSpy.mockRestore();
-  });
-});
diff --git a/browser-plugin/src/ndf/handler-article.ts b/browser-plugin/src/ndf/handler-article.ts
deleted file mode 100644
index 27f1eab..0000000
--- a/browser-plugin/src/ndf/handler-article.ts
+++ /dev/null
@@ -1,409 +0,0 @@
-import { getDomain } from 'tldts';
-
-import log from '../shared/logger';
-import { AnalyzedItem, NewsDeframerClient } from './client';
-import { createFooterHtml, getFooterCss } from './footer';
-import { formatRatingPercent, getRatingColors } from './ratings';
-
-const createArticleHtml = (item: AnalyzedItem, rootDomain: string): string => {
-  const title = item.title_corrected || item.title_original || 'No title';
-  const description = item.description_corrected || item.description_original || 'No description';
-  const imageUrl = item.media && item.media.medium === 'image' && item.media.url ? item.media.url : '';
-
-  const metrics = [
-    { id: 'framing', label: 'Framing', raw: item.framing, value: formatRatingPercent(item.framing), reason: item.framing_reason || 'No reason provided.' },
-    { id: 'clickbait', label: 'Clickbait', raw: item.clickbait, value: formatRatingPercent(item.clickbait), reason: item.clickbait_reason || 'No reason provided.' },
-    { id: 'persuasive', label: 'Persuasive', raw: item.persuasive, value: formatRatingPercent(item.persuasive), reason: item.persuasive_reason || 'No reason provided.' },
-    { id: 'hyper_stimulus', label: 'Hyper Stimulus', raw: item.hyper_stimulus, value: formatRatingPercent(item.hyper_stimulus), reason: item.hyper_stimulus_reason || 'No reason provided.' },
-    { id: 'speculative', label: 'Speculative', raw: item.speculative, value: formatRatingPercent(item.speculative), reason: item.speculative_reason || 'No reason provided.' },
-  ];
-
-  const overallRaw = item.rating;
-  const overallValue = formatRatingPercent(item.rating);
-  const overallReason = item.overall_reason || 'No overall reason provided.';
-  const overallColors = getRatingColors(overallValue);
-
-  return `
-    <html>
-      <head>
-        <title>News Deframer: ${title}</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <style>
-          ${getFooterCss()}
-          .page-header {
-            background-color: #fff;
-            padding: 8px 1.5em;
-            text-align: left;
-            border-bottom: 1px solid #eee;
-            z-index: 1001;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          }
-
-          .btn-back {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            padding: 8px 12px;
-            border: 1px solid #007bff;
-            border-radius: 8px;
-            background-color: #007bff;
-            color: #fff;
-            font-size: 0.9em;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background-color 0.2s;
-            text-decoration: none;
-          }
-
-          .btn-back:hover { background-color: #0069d9; }
-
-          .btn-hide {
-            padding: 8px 12px;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            background-color: #fff;
-            color: #333;
-            font-size: 0.9em;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background-color 0.2s;
-          }
-          .btn-hide:hover {
-            background-color: #f8f9fa;
-          }
-
-          body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: #f0f2f5; color: #333; }
-
-          /* MOBILE FIRST (Full Bleed) */
-          .container {
-            max-width: 800px;
-            margin: 0;
-            background-color: #fff;
-            border-radius: 0;
-            box-shadow: none;
-            padding-bottom: 20px;
-          }
-          .image-container img {
-            width: 100%;
-            height: auto;
-            border-radius: 0;
-            display: block;
-          }
-
-          .main-content { padding: 1.5em; }
-          h1 { margin: 0 0 10px; font-size: 2em; }
-          .description { font-size: 1.1em; color: #555; margin-bottom: 2em; }
-
-          .analysis-section { border-top: 2px solid #eee; padding-top: 1.5em; margin-top: 1.5em; }
-
-          .metric-item {
-            display: block;
-            margin-bottom: 1.5em;
-          }
-
-          .metric-label {
-            font-weight: bold;
-            font-size: 1.1em;
-            margin-bottom: 5px;
-            display: block;
-          }
-
-          .metric-details {
-            display: block;
-            width: 100%;
-          }
-
-          .bar-container {
-            background-color: #e9ecef;
-            border-radius: 5px;
-            height: 30px;
-            width: 100%;
-            margin-bottom: 5px;
-            position: relative;
-            overflow: hidden;
-          }
-
-          .bar {
-            height: 100%;
-            border-radius: 5px;
-            transition: width 0.3s ease;
-          }
-
-          .bar-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            padding-left: 8px;
-            font-weight: bold;
-            font-size: 0.95em;
-            pointer-events: none;
-          }
-
-          .reason {
-            margin: 0;
-            font-size: 0.95em;
-            color: #666;
-            line-height: 1.4;
-          }
-
-          .original-content { margin-top: 2em; padding-top: 1em; border-top: 1px solid #ddd; }
-
-          /* BUTTONS STYLES */
-          .action-buttons {
-            display: flex;
-            justify-content: space-around;
-            gap: 10px;
-            padding: 1.5em;
-            background-color: #fff;
-            border-top: 1px solid #eee;
-          }
-
-          .btn {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            background-color: #fff;
-            color: #333;
-            font-size: 0.95em;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background-color 0.2s;
-            text-decoration: none;
-          }
-
-          .btn:hover { background-color: #f8f9fa; }
-          .btn-primary { background-color: #007bff; color: #fff; border-color: #007bff; }
-          .btn-primary:hover { background-color: #0069d9; }
-
-          /* DESKTOP LAYOUT (> 800px) */
-          @media (min-width: 800px) {
-            .page-header {
-              border-radius: 12px 12px 0 0;
-            }
-            .container {
-              margin: 2em auto;
-              border-radius: 12px;
-              box-shadow: 0 6px 12px rgba(0,0,0,0.1);
-            }
-            .image-container img {
-              border-radius: 0;
-            }
-
-            .metric-item {
-              display: grid;
-              grid-template-columns: 140px 1fr;
-              gap: 0 20px;
-              align-items: start;
-            }
-
-            .metric-label {
-              margin-bottom: 0;
-              padding-top: 4px;
-            }
-
-            .action-buttons {
-              border-radius: 0 0 12px 12px;
-              justify-content: center;
-            }
-            .action-buttons .btn {
-              flex: 0 0 180px;
-            }
-          }
-
-          /* MOBILE STICKY BUTTONS (< 800px) */
-          @media (max-width: 799px) {
-            body {
-              padding-top: 48px; /* Space for sticky header */
-              padding-bottom: 80px; /* Prevent content from being hidden by sticky bar */
-            }
-            .page-header {
-              position: fixed;
-              top: 0;
-              left: 0;
-              width: 100%;
-              box-sizing: border-box;
-              box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            }
-            .action-buttons {
-              position: fixed;
-              bottom: 0;
-              left: 0;
-              width: 100%;
-              z-index: 1000;
-              box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
-              margin-top: 0;
-              box-sizing: border-box; /* Ensure padding doesn't overflow width */
-            }
-          }
-        </style>
-      </head>
-      <body>
-        <div class="container">
-          <header class="page-header">
-            <a href="/" class="btn-back" title="Go back to ${rootDomain} portal">Back</a>
-            <button id="btn-hide" class="btn-hide">Hide</button>
-          </header>
-          ${imageUrl ? `<div class="image-container"><img src="${imageUrl}" alt="${title}"></div>` : ''}
-          <div class="main-content">
-            <h1>${title}</h1>
-            <p class="description">${description}</p>
-            <div class="analysis-section">
-              <div id="overall-rating-container" class="metric-item">
-                <div class="metric-label">Overall Rating</div>
-                <div class="metric-details">
-                  <div class="bar-container" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${overallValue}" aria-label="Overall rating: ${overallValue}%" aria-describedby="overall-reason">
-                    <div class="bar" style="width: ${overallValue}%; background-color: ${overallColors.bg};"></div>
-                    ${overallRaw !== undefined ? `
-                      <div class="bar-overlay" style="color: ${overallColors.text}; ${overallColors.text === '#ffffff' ? 'text-shadow: 0 0 3px rgba(0,0,0,0.7);' : ''}">
-                        <span>${overallValue}%</span>
-                      </div>
-                    ` : ''}
-                  </div>
-                  <p id="overall-reason" class="reason">${overallReason}</p>
-                </div>
-              </div>
-
-              <div id="metrics-content" style="display: none;">
-                ${metrics.map(m => {
-                  const colors = getRatingColors(m.value);
-                  return `
-                  <div class="metric-item">
-                    <div class="metric-label">${m.label}</div>
-                    <div class="metric-details">
-                      <div class="bar-container" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${m.value}" aria-label="${m.label} rating: ${m.value}%" aria-describedby="${m.id}-reason">
-                        <div class="bar" style="width: ${m.value}%; background-color: ${colors.bg};"></div>
-                        ${m.raw !== undefined ? `
-                          <div class="bar-overlay" style="color: ${colors.text}; ${colors.text === '#ffffff' ? 'text-shadow: 0 0 3px rgba(0,0,0,0.7);' : ''}">
-                            <span>${m.value}%</span>
-                          </div>
-                        ` : ''}
-                      </div>
-                      <p id="${m.id}-reason" class="reason">${m.reason}</p>
-                    </div>
-                  </div>
-                `}).join('')}
-              </div>
-            </div>
-            <div id="original-content" class="original-content" style="display: none;">
-              <h3>Original</h3>
-              <h4>${item.title_original || ''}</h4>
-              <p>${item.description_original || ''}</p>
-            </div>
-          </div>
-
-          ${createFooterHtml()}
-          <div class="action-buttons">
-            <button id="btn-original" class="btn btn-primary">Original Title</button>
-            <button id="btn-details" class="btn">Details</button>
-            <button id="btn-view-original" class="btn">View Original</button>
-          </div>
-        </div>
-      </body>
-    </html>
-  `;
-};
-
-export const handleArticle = async (client: NewsDeframerClient) => {
-  const rootDomain = getDomain(window.location.hostname);
-
-  log.info('Article page detected. Stopping window immediately.');
-  window.stop();
-
-  try {
-    const item = await client.getItem(window.location.href);
-    if (item) {
-      log.info('Successfully fetched item.');
-      document.documentElement.innerHTML = createArticleHtml(item, rootDomain || window.location.hostname);
-
-      // Attach event listeners programmatically after HTML is injected
-      const btnDetails = document.getElementById('btn-details');
-      if (btnDetails) {
-        btnDetails.addEventListener('click', () => {
-          const metrics = document.getElementById('metrics-content');
-          const original = document.getElementById('original-content');
-          const overallRating = document.getElementById('overall-rating-container');
-
-          if (metrics && original) {
-            metrics.style.display = 'block';
-            original.style.display = 'block';
-
-            if (overallRating) {
-              const rect = overallRating.getBoundingClientRect();
-              const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-              const offset = 20; // Graceful offset
-              window.scrollTo({ top: rect.top + scrollTop - offset, behavior: 'smooth' });
-            }
-          }
-        });
-      }
-
-      const btnOriginal = document.getElementById('btn-original');
-      if (btnOriginal) {
-        btnOriginal.addEventListener('click', () => {
-          const metrics = document.getElementById('metrics-content');
-          const original = document.getElementById('original-content');
-          const overallRating = document.getElementById('overall-rating-container');
-
-          if (metrics && original) {
-            // If already visible, do nothing
-            if (original.style.display === 'block') {
-              return;
-            }
-
-            // Just show the original content, don't hide metrics
-            original.style.display = 'block';
-
-            if (overallRating) {
-              const rect = overallRating.getBoundingClientRect();
-              const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-              const offset = 20; // Graceful offset
-              window.scrollTo({ top: rect.top + scrollTop - offset, behavior: 'smooth' });
-            }
-          }
-        });
-      }
-
-      const btnHide = document.getElementById('btn-hide');
-      if (btnHide) {
-        btnHide.addEventListener('click', (e) => {
-          e.preventDefault();
-          window.scrollTo(0, 0);
-          log.info('User clicked "Hide". Bypassing for this session and reloading.');
-          sessionStorage.setItem('__ndf-bypass', 'true');
-          window.location.reload();
-        });
-      }
-
-      const btnViewOriginal = document.getElementById('btn-view-original');
-      if (btnViewOriginal) {
-        btnViewOriginal.addEventListener('click', (e) => {
-          e.preventDefault();
-          window.scrollTo(0, 0);
-          log.info('User clicked "View Original". Bypassing for this session and reloading.');
-          sessionStorage.setItem('__ndf-bypass', 'true');
-          window.location.reload();
-        });
-      }
-
-    } else {
-      log.info('No item found for this URL. Reloading with bypass.');
-      sessionStorage.setItem('__ndf-bypass', 'true');
-      window.location.reload();
-    }
-  } catch (error) {
-    log.error('Failed to fetch item:', error);
-    sessionStorage.setItem('__ndf-bypass', 'true');
-    window.location.reload();
-  }
-};
diff --git a/browser-plugin/src/ndf/handler-portal.test.ts b/browser-plugin/src/ndf/handler-portal.test.ts
deleted file mode 100644
index 38a4ed7..0000000
--- a/browser-plugin/src/ndf/handler-portal.test.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * @jest-environment-options { "url": "http://example.com/" }
- */
-
-import { getDomain } from 'tldts';
-
-import log from '../shared/logger';
-import { NewsDeframerClient } from './client';
-import { handlePortal } from './handler-portal';
-
-jest.mock('tldts', () => ({
-  getDomain: jest.fn(),
-}));
-
-describe('Portal Handler', () => {
-  const mockClient = {
-    getSite: jest.fn(),
-  } as unknown as NewsDeframerClient;
-
-  const mockStop = jest.fn();
-
-  beforeEach(() => {
-    // Reset the document body for each test
-    document.body.innerHTML = '';
-    document.body.style.border = '';
-    jest.clearAllMocks();
-    jest.restoreAllMocks();
-
-    // Mock window.stop and window.location
-    window.stop = mockStop;
-    // In JSDOM, window.location.reload is read-only and cannot be mocked.
-    // Tests that trigger a reload will instead assert that the call throws the
-    // expected "Not implemented" error from the JSDOM environment.
-  });
-
-  test('should fetch items for the root domain', async () => {
-    (getDomain as jest.Mock).mockReturnValue('example.com');
-    mockClient.getSite = jest.fn().mockResolvedValue([{ hash: '123', url: 'http://test.com', rating: 5 }]);
-    await handlePortal(mockClient);
-
-    expect(mockClient.getSite).toHaveBeenCalledWith('example.com');
-    expect(mockStop).toHaveBeenCalled();
-  });
-
-  test('should log an error and set bypass if root domain cannot be determined', async () => {
-    (getDomain as jest.Mock).mockReturnValue(null);
-    const logSpy = jest.spyOn(log, 'error').mockImplementation(() => {});
-
-    await handlePortal(mockClient);
-
-    expect(logSpy).toHaveBeenCalledWith('Could not determine root domain. Reloading with bypass.');
-    expect(sessionStorage.getItem('__ndf-bypass')).toBe('true');
-    logSpy.mockRestore();
-  });
-
-  test('should log info and set bypass if no items are found', async () => {
-    (getDomain as jest.Mock).mockReturnValue('example.com');
-    mockClient.getSite = jest.fn().mockResolvedValue([]);
-    const logSpy = jest.spyOn(log, 'info').mockImplementation(() => {});
-
-    await handlePortal(mockClient);
-
-    expect(logSpy).toHaveBeenCalledWith('No items found for example.com. Reloading with bypass.');
-    expect(sessionStorage.getItem('__ndf-bypass')).toBe('true');
-    logSpy.mockRestore();
-  });
-
-  test('should log an error and set bypass if fetching fails', async () => {
-    (getDomain as jest.Mock).mockReturnValue('example.com');
-    mockClient.getSite = jest.fn().mockRejectedValue(new Error('API Error'));
-    const logSpy = jest.spyOn(log, 'error').mockImplementation(() => {});
-
-    await handlePortal(mockClient);
-
-    expect(logSpy).toHaveBeenCalledWith('Failed to fetch items for example.com:', expect.any(Error));
-    expect(sessionStorage.getItem('__ndf-bypass')).toBe('true');
-    logSpy.mockRestore();
-  });
-});
diff --git a/browser-plugin/src/ndf/handler-portal.ts b/browser-plugin/src/ndf/handler-portal.ts
deleted file mode 100644
index 666b0d7..0000000
--- a/browser-plugin/src/ndf/handler-portal.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-import { getDomain } from 'tldts';
-
-import log from '../shared/logger';
-import { AnalyzedItem,NewsDeframerClient } from './client';
-import { createFooterHtml, getFooterCss } from './footer';
-import { formatRatingPercent, getRatingColors } from './ratings';
-const createTilesHtml = (items: AnalyzedItem[], rootDomain: string): string => {
-  const tiles = items
-    .map((item) => {
-      const title = item.title_corrected || item.title_original || 'No title';
-      const description = item.description_corrected || item.description_original || 'No description';
-      const ratingValue = formatRatingPercent(item.rating);
-      const ratingColors = getRatingColors(ratingValue);
-      const overallReason = item.overall_reason || 'No reason provided.';
-
-      const barHtml = `
-        <div class="bar-container" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${ratingValue}" aria-label="Overall rating: ${ratingValue}%. Reason: ${overallReason}">
-          <div class="bar" style="width: ${ratingValue}%; background-color: ${ratingColors.bg};"></div>
-          <div class="bar-overlay" style="color: ${ratingColors.text}; ${ratingColors.text === '#ffffff' ? 'text-shadow: 0 0 3px rgba(0,0,0,0.7);' : ''}">
-            <span>${ratingValue}%</span>
-          </div>
-          <div class="tooltip-text">${overallReason}</div>
-        </div>
-      `;
-
-      const imageHtml =
-        item.media && item.media.medium === 'image' && item.media.url
-          ? `<div class="image-container">
-               <img src="${item.media.url}" alt="${item.media.description || ''}" style="width: 100%; height: auto; display: block;">
-               ${barHtml}
-             </div>`
-          : barHtml;
-
-      return `
-        <a href="${item.url}" class="tile-link">
-          <div class="tile">
-            ${imageHtml}
-            <div class="content">
-              <h3>${title}</h3>
-              <p>${description}</p>
-            </div>
-          </div>
-        </a>
-      `;
-    })
-    .join('');
-
-  return `
-    <html>
-      <head>
-        <title>News Deframer: ${rootDomain}</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <style>
-          ${getFooterCss()}
-          body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            margin: 0;
-            background-color: #f0f2f5;
-            padding-top: 60px; /* Space for sticky header */
-          }
-          .container { padding: 2em; }
-          .header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            background-color: #fff;
-            padding: 1em;
-            z-index: 1000;
-            text-align: center;
-            margin-bottom: 0;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-            box-sizing: border-box;
-          }
-          .header h1 {
-            margin: 0;
-            font-size: 1.5em;
-            /* Ensure title doesn't overlap with the button */
-            padding: 0 80px;
-            display: inline-block;
-            max-width: 100%;
-            box-sizing: border-box;
-          }
-          .btn {
-            padding: 10px 16px;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            background-color: #fff;
-            color: #333;
-            font-size: 0.95em;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background-color 0.2s;
-            text-decoration: none;
-            flex-shrink: 0;
-          }
-          .btn:hover { background-color: #f8f9fa; }
-
-          #btn-hide {
-            position: absolute;
-            right: 1em;
-            top: 50%;
-            transform: translateY(-50%);
-          }
-
-          .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
-          .tile-link { text-decoration: none; color: inherit; }
-          .tile { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; height: 100%; position: relative; }
-          .tile:hover { transform: translateY(-5px); box-shadow: 0 8px 12px rgba(0,0,0,0.15); }
-          .image-container { position: relative; }
-          .content { padding: 15px; }
-          h3 { margin: 0 0 10px; font-size: 1.1em; }
-          p { font-size: 0.9em; color: #666; }
-          .bar-container {
-            background-color: #e9ecef;
-            height: 30px;
-            width: 100%;
-            position: relative; /* For overlay and tooltip */
-          }
-          .image-container .bar-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-          }
-          .bar { height: 100%; }
-          .bar-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            padding-left: 10px;
-            font-weight: bold;
-            font-size: 0.9em;
-            pointer-events: none;
-          }
-          .bar-container .tooltip-text {
-            visibility: hidden;
-            opacity: 0;
-            width: 250px;
-            background-color: rgba(0,0,0,0.85);
-            color: #fff;
-            text-align: left;
-            border-radius: 6px;
-            padding: 10px;
-            position: absolute;
-            z-index: 1;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            transition: opacity 0.2s;
-            font-size: 0.9em;
-            line-height: 1.4;
-            pointer-events: none;
-          }
-          .bar-container:hover .tooltip-text {
-            visibility: visible;
-            opacity: 1;
-          }
-        </style>
-      </head>
-      <body>
-        <div class="container">
-          <div class="header">
-            <h1>News Deframer: ${rootDomain}</h1>
-            <button id="btn-hide" class="btn">Hide</button>
-          </div>
-          <div class="grid">
-            ${tiles}
-          </div>
-          ${createFooterHtml()}
-        </div>
-      </body>
-    </html>
-  `;
-};
-
-export const handlePortal = async (client: NewsDeframerClient) => {
-  const rootDomain = getDomain(window.location.hostname);
-
-  if (!rootDomain) {
-    log.error('Could not determine root domain. Reloading with bypass.');
-    sessionStorage.setItem('__ndf-bypass', 'true');
-    window.location.reload();
-    return;
-  }
-
-  log.info('Portal page detected. Stopping window immediately.');
-  window.stop();
-
-  try {
-    const items = await client.getSite(rootDomain);
-    if (items.length > 0) {
-      log.info(`Successfully fetched ${items.length} items for ${rootDomain}.`);
-      document.documentElement.innerHTML = createTilesHtml(items, rootDomain);
-
-      const btnHide = document.getElementById('btn-hide');
-      if (btnHide) {
-        btnHide.addEventListener('click', (e) => {
-          e.preventDefault();
-          window.scrollTo(0, 0);
-          log.info('User clicked "Hide". Bypassing for this session and reloading.');
-          sessionStorage.setItem('__ndf-bypass', 'true');
-          window.location.reload();
-        });
-      }
-    } else {
-      log.info(`No items found for ${rootDomain}. Reloading with bypass.`);
-      sessionStorage.setItem('__ndf-bypass', 'true');
-      window.location.reload();
-    }
-  } catch (error) {
-    log.error(`Failed to fetch items for ${rootDomain}:`, error);
-    sessionStorage.setItem('__ndf-bypass', 'true');
-    window.location.reload();
-  }
-};
diff --git a/browser-plugin/src/ndf/index.test.ts b/browser-plugin/src/ndf/index.test.ts
deleted file mode 100644
index 89f95e9..0000000
--- a/browser-plugin/src/ndf/index.test.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-describe('News Deframer Library', () => {
-  test('Placeholder test', () => {
-    expect(true).toBe(true);
-  });
-});
diff --git a/browser-plugin/src/ndf/index.ts b/browser-plugin/src/ndf/index.ts
deleted file mode 100644
index 71ad07a..0000000
--- a/browser-plugin/src/ndf/index.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { getCachedDomains } from '../shared/domain-cache';
-import log from '../shared/logger';
-import { Settings } from '../shared/settings';
-import { NewsDeframerClient } from './client';
-import { handleArticle } from './handler-article';
-import { handlePortal } from './handler-portal';
-import { classifyUrl, PageType } from './url-classifier';
-
-export default {
-  start: async (config: Settings) => {
-    try {
-      // Check for bypass flag (set if we stopped a page that turned out to be invalid)
-      if (sessionStorage.getItem('__ndf-bypass')) {
-        log.info('NDF Bypass flag detected. Skipping Deframer for this load.');
-        sessionStorage.removeItem('__ndf-bypass');
-        return;
-      }
-
-      const client = new NewsDeframerClient(config);
-
-      // Phase 1: Check Local Cache (Fast Path)
-      let domains = await getCachedDomains();
-      const currentUrl = new URL(window.location.href);
-
-      if (!domains) {
-         // Phase 2: Cache Miss (Slow Path)
-         // We do not stop loading here to avoid blocking random pages.
-         // We fetch domains in the background.
-         domains = await client.getDomains();
-
-         if (domains.length === 0) {
-           log.error('Could not get domains from backend, aborting.');
-           return;
-         }
-
-         const isMonitored = domains.some((d) => currentUrl.hostname === d || currentUrl.hostname.endsWith('.' + d));
-
-         if (isMonitored) {
-           // We are on a monitored domain, but we missed the start.
-           // Reload to trigger the Fast Path (Phase 1).
-           log.info('Monitored domain detected after load. Reloading to apply Deframer...');
-           window.location.reload();
-         }
-         return;
-      }
-
-      // Phase 1 Continue: Cache Hit
-      const isMonitored = domains.some((d) => currentUrl.hostname === d || currentUrl.hostname.endsWith('.' + d));
-
-      if (!isMonitored) {
-        return; // Not a monitored domain, do nothing.
-      }
-
-      // Determine if it's a portal or an article page.
-      const pageType = classifyUrl(currentUrl);
-
-      if (pageType === PageType.PORTAL) {
-        handlePortal(client);
-      } else {
-        handleArticle(client);
-      }
-    } catch (e) {
-      log.error('NDF Error:', e);
-    }
-  },
-};
diff --git a/browser-plugin/src/ndf/index.tsx b/browser-plugin/src/ndf/index.tsx
new file mode 100644
index 0000000..fc7eda4
--- /dev/null
+++ b/browser-plugin/src/ndf/index.tsx
@@ -0,0 +1,173 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { getDomain } from 'tldts';
+
+import log from '../shared/logger';
+import { getSettings } from '../shared/settings';
+import { getThemeCss, globalStyles, Theme } from '../shared/theme';
+import { AnalyzedItem, NewsDeframerClient } from './client';
+import { Spinner } from './components/Spinner';
+import { ArticlePage } from './pages/ArticlePage';
+import { PortalPage } from './pages/PortalPage';
+import { classifyUrl, PageType } from './utils/url-classifier';
+
+const App = ({ theme }: { theme: Theme }) => {
+  const [pageType, setPageType] = React.useState<PageType | null>(null);
+  const [data, setData] = React.useState<
+    AnalyzedItem | AnalyzedItem[] | null
+  >(null);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    // Inject global styles into the Light DOM to fix body margin and background "frame"
+    const styleId = 'ndf-global-styles';
+    let style = document.getElementById(styleId);
+    if (!style) {
+      style = document.createElement('style');
+      style.id = styleId;
+      document.head.appendChild(style);
+    }
+
+    const themeCss = getThemeCss(theme);
+    style.textContent = themeCss + globalStyles;
+  }, [theme]);
+
+  React.useEffect(() => {
+    const init = async () => {
+      // For debugging the spinner, uncomment the following line
+      // await new Promise(resolve => setTimeout(resolve, 2000));
+      try {
+        // We don't need to check settings here, start() already did.
+        const settings = await getSettings();
+        const client = new NewsDeframerClient(settings);
+        const type = classifyUrl(new URL(window.location.href));
+        setPageType(type);
+
+        if (type === PageType.PORTAL) {
+          const allDomains = await client.getDomains();
+          const siteHost = window.location.host;
+          const rootDomain = getDomain(window.location.hostname.replace(/:\d+$/, ''));
+
+          // Check if the site's full host or root domain is registered in the backend.
+          log.info(`Checking domain authorization for siteHost="${siteHost}", rootDomain="${rootDomain}", allDomains=[${allDomains.join(', ')}]`);
+          let authorizedDomain: string | null = null;
+
+          if (allDomains.includes(siteHost)) {
+            authorizedDomain = siteHost;
+          } else if (rootDomain && allDomains.includes(rootDomain)) {
+            authorizedDomain = rootDomain;
+          }
+
+          if (authorizedDomain) {
+            // Fetch the content using the authorized domain from the list.
+            const items = await client.getSite(authorizedDomain);
+            if (items.length > 0) {
+              setData(items);
+            } else {
+              // This can happen if the authorized domain has no items.
+              log.error(`Attempted to get site data for authorized domain "${authorizedDomain}", but received no items.`);
+              throw new Error(`No items found for this portal (${authorizedDomain}).`);
+            }
+          } else {
+            // If neither the full host nor root domain is in the list, the site is not supported.
+            const checkedDomains = [siteHost];
+            if (rootDomain) checkedDomains.push(rootDomain);
+            log.error(`Domain authorization failed: checked [${checkedDomains.join(', ')}] but none found in allDomains=[${allDomains.join(', ')}]`);
+            throw new Error(`Domain "${checkedDomains.join('" or "')}" is not configured in the Deframer backend.`);
+          }
+        } else if (type === PageType.ARTICLE) {
+          const articleUrl = window.location.href;
+          log.info(`Attempting to fetch article data for URL: "${articleUrl}"`);
+          const item = await client.getItem(articleUrl);
+          if (item) {
+            log.info(`Successfully retrieved article data for URL: "${articleUrl}"`);
+            setData(item);
+          } else {
+            log.error(`No article data found for URL: "${articleUrl}" - this URL may not be in the backend database`);
+            throw new Error(`No item found for this URL: ${articleUrl}`);
+          }
+        }
+      } catch (err: unknown) {
+        log.error('Failed to initialize NDF:', err);
+        const message =
+          err instanceof Error ? err.message : 'An unknown error occurred.';
+        setError(message);
+      }
+    };
+    init();
+  }, []);
+
+  if (error) {
+    // If there was an error, bypass and reload to see the original page.
+    sessionStorage.setItem('__ndf-bypass', 'true');
+    window.location.reload();
+    return null; // Render nothing while we reload
+  }
+
+  if (!pageType || !data) {
+    // Render a loading state, as the page is currently blank.
+    return <Spinner />;
+  }
+
+  switch (pageType) {
+    case PageType.ARTICLE:
+      // data is AnalyzedItem
+      return (
+        <>
+          <style>{getThemeCss(theme)}</style>
+          <ArticlePage item={data as AnalyzedItem} />
+        </>
+      );
+    case PageType.PORTAL:
+      // data is AnalyzedItem[]
+      return (
+        <>
+          <style>{getThemeCss(theme)}</style>
+          <PortalPage items={data as AnalyzedItem[]} />
+        </>
+      );
+    default:
+      return null;
+  }
+};
+
+const start = async () => {
+  if (sessionStorage.getItem('__ndf-bypass')) {
+    sessionStorage.removeItem('__ndf-bypass');
+    log.info('Bypass detected. Not starting NDF.');
+    return;
+  }
+
+  try {
+    const settings = await getSettings();
+    if (!settings.enabled) {
+      log.info('NDF is disabled.');
+      return;
+    }
+
+    const type = classifyUrl(new URL(window.location.href));
+    if (type === PageType.PORTAL || type === PageType.ARTICLE) {
+      log.info(`Page detected as ${type}. Stopping window immediately.`);
+      window.stop();
+
+      // Create a clean slate
+      document.documentElement.innerHTML =
+        '<head><title>News Deframer</title></head><body></body>';
+
+      const rootEl = document.createElement('div');
+      rootEl.id = 'ndf-root';
+      document.body.appendChild(rootEl);
+
+      const shadowRoot = rootEl.attachShadow({ mode: 'open' });
+      const appContainer = document.createElement('div');
+      shadowRoot.appendChild(appContainer);
+
+      const root = createRoot(appContainer);
+      root.render(<App theme={settings.theme} />);
+    }
+  } catch (e) {
+    log.error('Could not start NDF', e);
+  }
+};
+
+start();
diff --git a/browser-plugin/src/ndf/pages/ArticlePage.test.tsx b/browser-plugin/src/ndf/pages/ArticlePage.test.tsx
new file mode 100644
index 0000000..2a55c7f
--- /dev/null
+++ b/browser-plugin/src/ndf/pages/ArticlePage.test.tsx
@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { AnalyzedItem } from '../client';
+import { ArticlePage } from '../pages/ArticlePage';
+
+jest.mock('../../shared/logger', () => ({
+  info: jest.fn(),
+  error: jest.fn(),
+}));
+
+describe('ArticlePage', () => {
+  const mockItem: AnalyzedItem = {
+    url: 'http://example.com/article1',
+    title_original: 'Original Title',
+    description_original: 'Original Description',
+    rating: 0.85,
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(<ArticlePage item={mockItem} />);
+    expect(container).not.toBeNull();
+  });
+});
diff --git a/browser-plugin/src/ndf/pages/ArticlePage.tsx b/browser-plugin/src/ndf/pages/ArticlePage.tsx
new file mode 100644
index 0000000..44c54ea
--- /dev/null
+++ b/browser-plugin/src/ndf/pages/ArticlePage.tsx
@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import { getDomain } from 'tldts';
+
+import log from '../../shared/logger';
+import { AnalyzedItem } from '../client';
+import { Footer } from '../components/Footer';
+import { RatingBar } from '../components/RatingBar';
+
+// All styles are encapsulated here. A Shadow DOM will prevent them from leaking.
+const articlePageCss = `
+  :host {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    display: block;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    min-height: 100vh;
+  }
+
+  /* All styles from createArticleHtml are moved here */
+  .page-header { background-color: var(--header-bg); color: var(--text-color); padding: 8px 1.5em; text-align: left; border-bottom: 1px solid var(--border-color); z-index: 1001; display: flex; align-items: center; justify-content: space-between; }
+  .btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--accent-color); border-radius: 8px; background-color: var(--accent-color); color: var(--accent-text); font-size: 0.9em; font-weight: 500; cursor: pointer; transition: background-color 0.2s; text-decoration: none; }
+  .btn-back:hover { background-color: var(--accent-hover); }
+  .btn-hide { padding: 8px 12px; border: 1px solid var(--btn-border); border-radius: 8px; background-color: var(--btn-bg); color: var(--btn-text); font-size: 0.9em; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
+  .btn-hide:hover { background-color: var(--btn-hover-bg); }
+  .container { max-width: 800px; margin: 0; background-color: var(--card-bg); border-radius: 0; box-shadow: none; padding-bottom: 20px; color: var(--text-color); }
+  .image-container img { width: 100%; height: auto; border-radius: 0; display: block; }
+  .main-content { padding: 1.5em; }
+  h1 { margin: 0 0 10px; font-size: 2em; color: var(--text-color); }
+  .description { font-size: 1.1em; color: var(--secondary-text); margin-bottom: 2em; }
+  .analysis-section { border-top: 2px solid var(--border-color); padding-top: 1.5em; margin-top: 1.5em; }
+  .metric-item { display: block; margin-bottom: 1.5em; }
+  .metric-label { font-weight: bold; font-size: 1.1em; margin-bottom: 5px; display: block; color: var(--text-color); }
+  .metric-details { display: block; width: 100%; }
+  .reason { margin: 5px 0 0; font-size: 0.95em; color: var(--secondary-text); line-height: 1.4; }
+  .original-content { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--border-color); }
+  .action-buttons { display: flex; justify-content: space-around; gap: 10px; padding: 1.5em; background-color: var(--card-bg); border-top: 1px solid var(--border-color); }
+  .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: 1px solid var(--btn-border); border-radius: 8px; background-color: var(--btn-bg); color: var(--btn-text); font-size: 0.95em; font-weight: 500; cursor: pointer; transition: background-color 0.2s; text-decoration: none; }
+  .btn:hover { background-color: var(--btn-hover-bg); }
+  .btn-primary { background-color: var(--accent-color); color: var(--accent-text); border-color: var(--accent-color); }
+  .btn-primary:hover { background-color: var(--accent-hover); }
+
+  @media (min-width: 800px) {
+    :host { padding: 2em 0; }
+    .page-header { border-radius: 12px 12px 0 0; }
+    .container { margin: 0 auto; border-radius: 12px; box-shadow: var(--card-shadow); }
+  }
+
+  @media (max-width: 799px) {
+    :host { padding-top: 55px; padding-bottom: 80px; }
+    .page-header { position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    .action-buttons { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); margin-top: 0; box-sizing: border-box; }
+  }
+
+
+`;
+
+interface ArticlePageProps {
+  item: AnalyzedItem;
+}
+
+export const ArticlePage = ({ item }: ArticlePageProps) => {
+  const [showDetails, setShowDetails] = useState(false);
+  const [showOriginal, setShowOriginal] = useState(false);
+
+  const rootDomain = getDomain(window.location.hostname) || window.location.hostname;
+  const title = item.title_corrected || item.title_original || 'No title';
+  const description = item.description_corrected || item.description_original || 'No description';
+  const imageUrl = item.media?.medium === 'image' ? item.media.url : '';
+
+  const metrics = [
+    { id: 'framing', label: 'Framing', value: item.framing, reason: item.framing_reason },
+    { id: 'clickbait', label: 'Clickbait', value: item.clickbait, reason: item.clickbait_reason },
+    { id: 'persuasive', label: 'Persuasive', value: item.persuasive, reason: item.persuasive_reason },
+    { id: 'hyper_stimulus', label: 'Hyper Stimulus', value: item.hyper_stimulus, reason: item.hyper_stimulus_reason },
+    { id: 'speculative', label: 'Speculative', value: item.speculative, reason: item.speculative_reason },
+  ];
+  
+  const bypassAndReload = () => {
+    window.scrollTo(0, 0);
+    log.info('Bypassing for this session and reloading.');
+    sessionStorage.setItem('__ndf-bypass', 'true');
+    window.location.reload();
+  };
+
+  return (
+    <>
+      <style>{articlePageCss}</style>
+      <div className="container">
+        <header className="page-header">
+          <a href="/" className="btn-back" title={`Go back to ${rootDomain} portal`}>Back</a>
+          <button onClick={bypassAndReload} className="btn-hide">Hide</button>
+        </header>
+
+        {imageUrl && (
+          <div className="image-container">
+            <img src={imageUrl} alt={title} />
+          </div>
+        )}
+
+        <div className="main-content">
+          <h1>{title}</h1>
+          <p className="description">{description}</p>
+          
+          <div className="analysis-section">
+            <div className="metric-item">
+                <RatingBar value={item.rating} label="Overall Rating" reason={item.overall_reason} />
+            </div>
+
+            {showDetails && (
+              <div id="metrics-content">
+                {metrics.map(m => (
+                  <div className="metric-item" key={m.id}>
+                    <RatingBar value={m.value} label={m.label} reason={m.reason} id={m.id} />
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {showOriginal && (
+               <div id="original-content" className="original-content">
+                 <h3>Original</h3>
+                 <h4>{item.title_original || ''}</h4>
+                 <p>{item.description_original || ''}</p>
+               </div>
+            )}
+          </div>
+
+        </div>
+
+        <div className="action-buttons">
+          <button onClick={() => setShowOriginal(true)} className="btn btn-primary">Original Title</button>
+          <button onClick={() => { setShowDetails(true); setShowOriginal(true); }} className="btn">Details</button>
+          <button onClick={bypassAndReload} className="btn">View Original</button>
+        </div>
+        
+        <Footer />
+      </div>
+    </>
+  );
+};
diff --git a/browser-plugin/src/ndf/pages/PortalPage.test.tsx b/browser-plugin/src/ndf/pages/PortalPage.test.tsx
new file mode 100644
index 0000000..b1e378f
--- /dev/null
+++ b/browser-plugin/src/ndf/pages/PortalPage.test.tsx
@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { AnalyzedItem } from '../client';
+import { PortalPage } from '../pages/PortalPage';
+
+jest.mock('../../shared/logger', () => ({
+  info: jest.fn(),
+  error: jest.fn(),
+}));
+
+describe('PortalPage', () => {
+  const mockItems: AnalyzedItem[] = [
+    {
+      url: 'http://example.com/article1',
+      title_original: 'Original Title 1',
+      description_original: 'Original Description 1',
+      rating: 0.85,
+    },
+    {
+      url: 'http://example.com/article2',
+      title_original: 'Original Title 2',
+      description_original: 'Original Description 2',
+      rating: 0.45,
+    },
+  ];
+
+  it('renders without crashing', () => {
+    const { container } = render(<PortalPage items={mockItems} />);
+    expect(container).not.toBeNull();
+  });
+});
diff --git a/browser-plugin/src/ndf/pages/PortalPage.tsx b/browser-plugin/src/ndf/pages/PortalPage.tsx
new file mode 100644
index 0000000..4a40b24
--- /dev/null
+++ b/browser-plugin/src/ndf/pages/PortalPage.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { getDomain } from 'tldts';
+
+import log from '../../shared/logger';
+import { AnalyzedItem } from '../client';
+import { ArticleTile } from '../components/ArticleTile';
+import { Footer } from '../components/Footer';
+
+const portalPageCss = `
+  :host {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    display: block;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    min-height: 100vh;
+  }
+  .container { padding: 2em; }
+  .header {
+    background-color: var(--header-bg);
+    color: var(--text-color);
+    padding: 1em;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-bottom: 2em;
+  }
+  h1 { margin: 0; font-size: 1.5em; }
+  .btn {
+    padding: 10px 16px;
+    border: 1px solid var(--btn-border);
+    border-radius: 8px;
+    background-color: var(--btn-bg);
+    color: var(--btn-text);
+    font-size: 0.95em;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    text-decoration: none;
+    flex-shrink: 0;
+  }
+  .btn:hover { background-color: var(--btn-hover-bg); }
+
+  #btn-hide {
+    position: absolute;
+    right: 1.5em;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
+`;
+
+interface PortalPageProps {
+  items: AnalyzedItem[];
+}
+
+export const PortalPage = ({ items }: PortalPageProps) => {
+  const rootDomain = getDomain(window.location.hostname) || window.location.hostname;
+
+  const bypassAndReload = () => {
+    window.scrollTo(0, 0);
+    log.info('Bypassing for this session and reloading.');
+    sessionStorage.setItem('__ndf-bypass', 'true');
+    window.location.reload();
+  };
+
+  return (
+    <>
+      <style>{portalPageCss}</style>
+      <div className="container">
+        <div className="header">
+          <h1>News Deframer: {rootDomain}</h1>
+          <button id="btn-hide" className="btn" onClick={bypassAndReload}>Hide</button>
+        </div>
+        <div className="grid">
+          {items.map((item) => (
+            <ArticleTile item={item} key={item.url} />
+          ))}
+        </div>
+        <Footer />
+      </div>
+    </>
+  );
+};
diff --git a/browser-plugin/src/ndf/ratings.ts b/browser-plugin/src/ndf/ratings.ts
deleted file mode 100644
index 31c766e..0000000
--- a/browser-plugin/src/ndf/ratings.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const formatRatingPercent = (rating: number | undefined): number => Math.round((rating || 0.0) * 100);
-
-export const getRatingColors = (percentage: number): { bg: string; text: string } => {
-  if (percentage < 34) return { bg: '#198754', text: '#ffffff' }; // Accessible Green
-  if (percentage < 67) return { bg: '#ffc107', text: '#000000' }; // Accessible Yellow
-  return { bg: '#b02a37', text: '#ffffff' }; // Accessible Red
-};
\ No newline at end of file
diff --git a/browser-plugin/src/ndf/url-classifier.ts b/browser-plugin/src/ndf/url-classifier.ts
deleted file mode 100644
index 6c0105c..0000000
--- a/browser-plugin/src/ndf/url-classifier.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export enum PageType {
-  PORTAL = 'portal',
-  ARTICLE = 'article',
-}
-
-export const classifyUrl = (url: URL): PageType => {
-  const pathSegments = url.pathname.split('/').filter((p) => p.length > 0);
-
-  if (pathSegments.length > 1) {
-    return PageType.ARTICLE;
-  }
-
-  if (pathSegments.length === 1) {
-    const segment = pathSegments[0].toLowerCase();
-    if ((segment.endsWith('.html') || segment.endsWith('.htm')) && !segment.startsWith('index.')) {
-      return PageType.ARTICLE;
-    }
-  }
-
-  return PageType.PORTAL;
-};
\ No newline at end of file
diff --git a/browser-plugin/src/ndf/url-classifier.test.ts b/browser-plugin/src/ndf/utils/url-classifier.test.ts
similarity index 75%
rename from browser-plugin/src/ndf/url-classifier.test.ts
rename to browser-plugin/src/ndf/utils/url-classifier.test.ts
index f91ff56..c94a2d1 100644
--- a/browser-plugin/src/ndf/url-classifier.test.ts
+++ b/browser-plugin/src/ndf/utils/url-classifier.test.ts
@@ -6,9 +6,9 @@ describe('URL Classifier', () => {
     expect(classifyUrl(url)).toBe(PageType.PORTAL);
   });
 
-  test('should classify single segment path as PORTAL', () => {
+  test('should classify single segment path as ARTICLE', () => {
     const url = new URL('https://www.example.com/politics');
-    expect(classifyUrl(url)).toBe(PageType.PORTAL);
+    expect(classifyUrl(url)).toBe(PageType.ARTICLE);
   });
 
   test('should classify multi-segment path as ARTICLE', () => {
@@ -18,12 +18,12 @@ describe('URL Classifier', () => {
 
   test('should ignore trailing slashes', () => {
     const url = new URL('https://www.example.com/politics/');
-    expect(classifyUrl(url)).toBe(PageType.PORTAL);
+    expect(classifyUrl(url)).toBe(PageType.ARTICLE);
   });
 
   test('should handle query parameters', () => {
     const url = new URL('https://www.example.com/politics?sort=newest');
-    expect(classifyUrl(url)).toBe(PageType.PORTAL);
+    expect(classifyUrl(url)).toBe(PageType.ARTICLE);
   });
 
   test('should classify winfuture news link as ARTICLE', () => {
@@ -31,8 +31,8 @@ describe('URL Classifier', () => {
     expect(classifyUrl(url)).toBe(PageType.ARTICLE);
   });
 
-  test('should classify index.html as PORTAL', () => {
+  test('should classify index.html as ARTICLE', () => {
     const url = new URL('https://www.example.com/index.html');
-    expect(classifyUrl(url)).toBe(PageType.PORTAL);
+    expect(classifyUrl(url)).toBe(PageType.ARTICLE);
   });
 });
\ No newline at end of file
diff --git a/browser-plugin/src/ndf/utils/url-classifier.ts b/browser-plugin/src/ndf/utils/url-classifier.ts
new file mode 100644
index 0000000..bf6feb5
--- /dev/null
+++ b/browser-plugin/src/ndf/utils/url-classifier.ts
@@ -0,0 +1,18 @@
+export enum PageType {
+  PORTAL = 'portal',
+  ARTICLE = 'article',
+}
+
+// TODO: Consider adding server-side endpoint to determine if a URL should be treated as portal vs article
+// Currently using simple heuristic: root domain = portal, any path = article
+export const classifyUrl = (url: URL): PageType => {
+  const pathSegments = url.pathname.split('/').filter((p) => p.length > 0);
+
+  // If there are any path segments, treat as article
+  if (pathSegments.length > 0) {
+    return PageType.ARTICLE;
+  }
+
+  // Root domain (no path) is portal
+  return PageType.PORTAL;
+};
\ No newline at end of file
diff --git a/browser-plugin/src/shared/settings.ts b/browser-plugin/src/shared/settings.ts
index 44fc7e3..a589b52 100644
--- a/browser-plugin/src/shared/settings.ts
+++ b/browser-plugin/src/shared/settings.ts
@@ -1,8 +1,11 @@
+import { Theme } from './theme';
+
 export interface Settings {
   backendUrl: string;
   username?: string;
   password?: string;
   enabled: boolean;
+  theme: Theme;
 }
 
 export const DEFAULT_BACKEND_URL = 'http://localhost:8080';
@@ -15,6 +18,7 @@ export const getSettings = (): Promise<Settings> => {
         username: '',
         password: '',
         enabled: true,
+        theme: 'system',
       },
       (items: Settings) => {
         resolve(items);
diff --git a/browser-plugin/src/shared/theme.ts b/browser-plugin/src/shared/theme.ts
new file mode 100644
index 0000000..0890525
--- /dev/null
+++ b/browser-plugin/src/shared/theme.ts
@@ -0,0 +1,85 @@
+export type Theme = 'light' | 'dark' | 'system';
+
+export const cssVariables = {
+  light: `
+    --bg-color: #f0f2f5;
+    --text-color: #333333;
+    --card-bg: #ffffff;
+    --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    --card-shadow-hover: 0 8px 12px rgba(0,0,0,0.15);
+    --header-bg: #ffffff;
+    --border-color: #eeeeee;
+    --secondary-text: #666666;
+    --btn-bg: #ffffff;
+    --btn-text: #333333;
+    --btn-border: #dddddd;
+    --btn-hover-bg: #f8f9fa;
+    --accent-color: #007bff;
+    --accent-hover: #0069d9;
+    --accent-text: #ffffff;
+    --rating-bg: #e9ecef;
+    --success-color: #198754;
+    --warning-color: #ffc107;
+    --danger-color: #b02a37;
+    --tooltip-bg: rgba(0,0,0,0.85);
+    --tooltip-text: #ffffff;
+  `,
+  dark: `
+    --bg-color: #18191a;
+    --text-color: #e4e6eb;
+    --card-bg: #242526;
+    --card-shadow: 0 4px 6px rgba(0,0,0,0.3);
+    --card-shadow-hover: 0 8px 12px rgba(0,0,0,0.4);
+    --header-bg: #242526;
+    --border-color: #3e4042;
+    --secondary-text: #b0b3b8;
+    --btn-bg: #3a3b3c;
+    --btn-text: #e4e6eb;
+    --btn-border: #3e4042;
+    --btn-hover-bg: #4e4f50;
+    --accent-color: #2d88ff;
+    --accent-hover: #4599ff;
+     --accent-text: #ffffff;
+     --rating-bg: #3a3b3c;
+     --success-color: #4caf50;
+     --warning-color: #ffca28;
+     --danger-color: #f44336;
+     --tooltip-bg: rgba(255,255,255,0.9);
+     --tooltip-text: #000000;
+   `
+};
+
+export const globalStyles = `
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    min-height: 100vh;
+    width: 100%;
+  }
+`;
+
+export const getThemeCss = (theme: Theme): string => {
+  if (theme === 'system') {
+    return `
+      :host, :root {
+        ${cssVariables.light}
+      }
+      @media (prefers-color-scheme: dark) {
+        :host, :root {
+          ${cssVariables.dark}
+        }
+      }
+    `;
+  }
+  return `
+    :host, :root {
+      ${cssVariables[theme]}
+    }
+  `;
+};
diff --git a/browser-plugin/webpack.config.js b/browser-plugin/webpack.config.js
index bbf4aeb..14c256e 100644
--- a/browser-plugin/webpack.config.js
+++ b/browser-plugin/webpack.config.js
@@ -6,8 +6,8 @@ const packageJson = require('./package.json');
 module.exports = {
     mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
     entry: {
-        options: './src/host/ui/options.tsx',
-        content: './src/host/content.ts',
+        options: './src/host/ui/index.tsx',
+        content: './src/ndf/index.tsx',
         background: './src/host/background.ts'
     },
     devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'inline-source-map',
@@ -55,6 +55,7 @@ module.exports = {
                     }
                 },
                 { from: 'src/host/assets', to: 'assets', noErrorOnMissing: true },
+                { from: 'src/ndf/assets', to: 'assets', noErrorOnMissing: true },
             ],
         }),
         new HtmlWebpackPlugin({
diff --git a/pkg/syncer/syncer.go b/pkg/syncer/syncer.go
index f0d39fd..9faab0e 100644
--- a/pkg/syncer/syncer.go
+++ b/pkg/syncer/syncer.go
@@ -289,7 +289,7 @@ func (s *Syncer) processItem(feed *database.Feed, hash string, item *gofeed.Item
 	dbItem := &database.Item{
 		Hash:            hash,
 		FeedID:          feed.ID,
-		URL:             item.Link,
+		URL:             normalizeURL(item.Link),
 		Language:        &language,
 		Content:         content,
 		PubDate:         pubDate,
@@ -596,7 +596,7 @@ func (s *Syncer) updateCacheFeed(feed *database.Feed, parsedFeed *gofeed.Feed, h
 	return s.repo.UpsertCachedFeed(cachedFeed)
 }
 
-// normalizeURL removes fragments and common tracking/marketing parameters from a URL.
+// normalizeURL removes fragments, common tracking/marketing parameters, and trailing slashes from a URL.
 func normalizeURL(rawURL string) string {
 	u, err := url.Parse(rawURL)
 	if err != nil {
@@ -607,6 +607,9 @@ func normalizeURL(rawURL string) string {
 	u.Fragment = ""
 	u.RawFragment = ""
 
+	// Remove trailing slash from path
+	u.Path = strings.TrimSuffix(u.Path, "/")
+
 	// Remove common tracking/marketing parameters (case-insensitive)
 	q := u.Query()
 	trackingParams := map[string]bool{