diff --git a/cssAsPlugin.js b/cssAsPlugin.js
new file mode 100644
index 0000000000..0d452c6afb
--- /dev/null
+++ b/cssAsPlugin.js
@@ -0,0 +1,24 @@
+// https://github.com/tailwindlabs/tailwindcss-intellisense/issues/227#issuecomment-1462034856
+// cssAsPlugin.js
+const postcss = require("postcss")
+const postcssJs = require("postcss-js")
+const { readFileSync } = require("node:fs")
+
+require.extensions[".css"] = function (module, filename) {
+  const cssAsPlugin = ({ addBase, addComponents, addUtilities }) => {
+    const css = readFileSync(filename, "utf8")
+    const root = postcss.parse(css)
+    const jss = postcssJs.objectify(root)
+
+    if ("@layer base" in jss) {
+      addBase(jss["@layer base"])
+    }
+    if ("@layer components" in jss) {
+      addComponents(jss["@layer components"])
+    }
+    if ("@layer utilities" in jss) {
+      addUtilities(jss["@layer utilities"])
+    }
+  }
+  module.exports = cssAsPlugin
+}
diff --git a/package.json b/package.json
index 2fcf1a83cc..e261439c06 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,8 @@
     "eslint": "^9.3.0",
     "eslint-config-hyoban": "^2.9.3",
     "lint-staged": "15.2.4",
+    "postcss": "8.4.38",
+    "postcss-js": "4.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "simple-git-hooks": "2.11.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e728280e1..4c8f889d36 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -207,6 +207,12 @@ importers:
       lint-staged:
         specifier: 15.2.4
         version: 15.2.4
+      postcss:
+        specifier: 8.4.38
+        version: 8.4.38
+      postcss-js:
+        specifier: 4.0.1
+        version: 4.0.1(postcss@8.4.38)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -5287,7 +5293,7 @@ snapshots:
       '@babel/helper-validator-identifier': 7.22.20
       chalk: 2.4.2
       js-tokens: 4.0.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1
 
   '@babel/highlight@7.24.6':
     dependencies:
@@ -9751,7 +9757,7 @@ snapshots:
   postcss@8.4.38:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       source-map-js: 1.2.0
 
   preact-render-to-string@5.2.3(preact@10.11.3):
@@ -10455,7 +10461,7 @@ snapshots:
     dependencies:
       browserslist: 4.23.0
       escalade: 3.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
 
   uri-js@4.4.1:
     dependencies:
diff --git a/src/renderer/src/assets/base.css b/src/renderer/src/assets/base.css
index 4838709dd8..179f44c6a4 100644
--- a/src/renderer/src/assets/base.css
+++ b/src/renderer/src/assets/base.css
@@ -7,14 +7,6 @@ body,
   font-family: "SN Pro", sans-serif;
 }
 
-.drag-region {
-  -webkit-app-region: drag;
-}
-
-.no-drag-region {
-  -webkit-app-region: no-drag;
-}
-
 button,
 a {
   @apply cursor-default;
diff --git a/src/renderer/src/assets/tailwind-extend.css b/src/renderer/src/assets/tailwind-extend.css
new file mode 100644
index 0000000000..4a4a3c1914
--- /dev/null
+++ b/src/renderer/src/assets/tailwind-extend.css
@@ -0,0 +1,13 @@
+/* This CSS File do not import anywhere, just write atom class for tailwindcss. The tailwindcss intellisense will be work. */
+
+@tailwind components;
+
+@layer components {
+  .drag-region {
+    -webkit-app-region: drag;
+  }
+
+  .no-drag-region {
+    -webkit-app-region: no-drag;
+  }
+}
diff --git a/src/renderer/src/components/entry-column/article-item.tsx b/src/renderer/src/components/entry-column/article-item.tsx
index 8e4f56dc66..a054a3aad7 100644
--- a/src/renderer/src/components/entry-column/article-item.tsx
+++ b/src/renderer/src/components/entry-column/article-item.tsx
@@ -2,13 +2,14 @@ import { FeedIcon } from "@renderer/components/feed-icon"
 import { Image } from "@renderer/components/ui/image"
 import dayjs from "@renderer/lib/dayjs"
 import type { EntriesResponse } from "@renderer/lib/types"
+import { cn } from "@renderer/lib/utils"
 
 export function ArticleItem({ entry }: { entry: EntriesResponse[number] }) {
   return (
     <div className="my-5 flex px-2 py-3">
       <FeedIcon feed={entry.feeds} />
       <div className="-mt-0.5 line-clamp-5 flex-1 text-sm leading-tight">
-        <div className="space-x-1 text-[10px] text-zinc-500">
+        <div className="space-x-1 text-[10px] font-bold text-zinc-500">
           <span>{entry.feeds.title}</span>
           <span>·</span>
           <span>
@@ -20,7 +21,15 @@ export function ArticleItem({ entry }: { entry: EntriesResponse[number] }) {
               .humanize()}
           </span>
         </div>
-        <div className="my-0.5 break-words font-medium">{entry.title}</div>
+
+        <div
+          className={cn(
+            "my-0.5 break-words font-medium text-foreground/60",
+            !entry.read && "text-black dark:text-white/90",
+          )}
+        >
+          {entry.title}
+        </div>
         <div className="text-[13px] text-zinc-500">{entry.description}</div>
       </div>
       {entry.images?.[0] && (
diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx
index 043998d1e9..a9b8fa49d0 100644
--- a/src/renderer/src/components/entry-column/item-wrapper.tsx
+++ b/src/renderer/src/components/entry-column/item-wrapper.tsx
@@ -62,8 +62,8 @@ export function EntryItemWrapper({
       key={entry.id}
       className={cn(
         "rounded-md transition-colors",
-        activeEntry === entry.id && "bg-native-active",
-        entry.read && "text-foreground/50",
+        activeEntry === entry.id && "bg-native-active/50",
+        entry.read && "text-foreground/80",
       )}
       ref={itemRef}
       onClick={(e) => {
diff --git a/src/renderer/src/components/entry-content/index.tsx b/src/renderer/src/components/entry-content/index.tsx
index 828793989b..885aee0f89 100644
--- a/src/renderer/src/components/entry-content/index.tsx
+++ b/src/renderer/src/components/entry-content/index.tsx
@@ -38,7 +38,7 @@ export function EntryContent({ entryId }: { entryId: ActiveEntry }) {
           <a
             href={entry.data?.url || void 0}
             target="_blank"
-            className="mx-auto block max-w-[598px] rounded-md p-6 transition-colors hover:bg-zinc-100"
+            className="mx-auto block max-w-[598px] rounded-md p-6 transition-colors hover:bg-zinc-100 dark:hover:bg-neutral-800"
             rel="noreferrer"
           >
             <div className="select-text break-words text-3xl font-bold">
diff --git a/src/renderer/src/pages/(main)/(context)/index.tsx b/src/renderer/src/pages/(main)/(context)/index.tsx
index 0090f4858e..4467b354f4 100644
--- a/src/renderer/src/pages/(main)/(context)/index.tsx
+++ b/src/renderer/src/pages/(main)/(context)/index.tsx
@@ -27,7 +27,8 @@ export function Component() {
     <>
       <div
         className={cn(
-          "h-full shrink-0 overflow-y-auto border-r pt-10",
+          "h-full shrink-0 overflow-y-auto border-r",
+          window.electron ? "pt-10" : "pt-4",
           activeList && wideMode.has(activeList.view) ? "flex-1" : "w-[340px]",
         )}
       >
diff --git a/src/renderer/src/pages/(main)/(context)/layout.tsx b/src/renderer/src/pages/(main)/(context)/layout.tsx
index d7e202dcf0..d67068c3e4 100644
--- a/src/renderer/src/pages/(main)/(context)/layout.tsx
+++ b/src/renderer/src/pages/(main)/(context)/layout.tsx
@@ -1,10 +1,11 @@
 import { FeedColumn } from "@renderer/components/feed-column"
+import { cn } from "@renderer/lib/utils"
 import { Outlet } from "react-router-dom"
 
 export function Component() {
   return (
     <div className="flex h-full">
-      <div className="w-64 shrink-0 border-r bg-native/80 pt-10 backdrop-blur">
+      <div className={cn("w-64 shrink-0 border-r bg-native/80 backdrop-blur", window.electron ? "pt-10" : "pt-4")}>
         <FeedColumn />
       </div>
       <div className="flex flex-1 bg-background">
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 858edc59ca..f83bf29824 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,5 +1,7 @@
 const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
 
+require("./cssAsPlugin")
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
@@ -88,5 +90,6 @@ module.exports = {
     }),
     require("tailwindcss-animate"),
     require("@tailwindcss/typography"),
+    require("./src/renderer/src/assets/tailwind-extend.css"),
   ],
 }