diff --git a/src/App.jsx b/src/App.jsx
index 80efba9..f0f33f3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,6 +14,7 @@ import AddCategoryModal from "@/components/FeedList/components/AddCategoryModal.
 import { useHotkeys } from "@/hooks/useHotkeys.js";
 import SearchModal from "@/components/Search/SearchModal.jsx";
 import LogoutModal from "@/components/FeedList/components/LogoutModal.jsx";
+import AboutModal from "@/components/About/AboutModal.jsx";
 
 function App() {
   const { syncInterval } = useStore(settingsState);
@@ -39,6 +40,7 @@ function App() {
       <AddCategoryModal />
       <SearchModal />
       <LogoutModal />
+      <AboutModal />
     </SidebarProvider>
   );
 }
diff --git a/src/components/About/AboutModal.jsx b/src/components/About/AboutModal.jsx
new file mode 100644
index 0000000..9868c78
--- /dev/null
+++ b/src/components/About/AboutModal.jsx
@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+import { useStore } from "@nanostores/react";
+import { aboutModalOpen } from "@/stores/modalStore";
+import { FancyLogo } from "@/components/About/FancyLogo.jsx";
+import CustomModal from "@/components/ui/CustomModal.jsx";
+
+export default function AboutModal() {
+  const { t } = useTranslation();
+  const $aboutModalOpen = useStore(aboutModalOpen);
+
+  return (
+    <CustomModal
+      open={$aboutModalOpen}
+      onOpenChange={() => aboutModalOpen.set(false)}
+      title={t("about.title")}
+      content={
+        <div className="px-4 pb-4 space-y-6">
+          <FancyLogo since="2025"/>
+        </div>
+      }
+    />
+  );
+}
diff --git a/src/components/About/FancyLogo.jsx b/src/components/About/FancyLogo.jsx
new file mode 100644
index 0000000..7b34726
--- /dev/null
+++ b/src/components/About/FancyLogo.jsx
@@ -0,0 +1,45 @@
+import { useRef } from "react";
+import logo from "@/assets/logo.png";
+import { Image } from "@heroui/react";
+
+export const FancyLogo = ({ since }) => {
+  const boundingRef = useRef(null);
+
+  return (
+    <div className="flex flex-col [perspective:800px] p-5 bg-content2 rounded-md">
+      <div
+        onMouseLeave={() => {
+          boundingRef.current = null;
+        }}
+        onMouseEnter={(ev) => {
+          boundingRef.current = ev.currentTarget.getBoundingClientRect();
+        }}
+        onMouseMove={(ev) => {
+          if (!boundingRef.current) return;
+          const x = ev.clientX - boundingRef.current.left;
+          const y = ev.clientY - boundingRef.current.top;
+          const xPercentage = x / boundingRef.current.width;
+          const yPercentage = y / boundingRef.current.height;
+          const xRotation = (xPercentage - 0.5) * 20;
+          const yRotation = (0.5 - yPercentage) * 20;
+
+          ev.currentTarget.style.setProperty("--x-rotation", `${yRotation}deg`);
+          ev.currentTarget.style.setProperty("--y-rotation", `${xRotation}deg`);
+          ev.currentTarget.style.setProperty("--x", `${xPercentage * 100}%`);
+          ev.currentTarget.style.setProperty("--y", `${yPercentage * 100}%`);
+        }}
+        className="group relative w-full flex flex-col gap-6 py-6 items-center overflow-hidden rounded-md bg-gradient-to-b from-[#EAFFED] to-[#C6F7C9] p-4 text-[#01A977] transition-transform ease-out hover:[transform:rotateX(var(--x-rotation))_rotateY(var(--y-rotation))_scale(1.05)]"
+      >
+        <Image src={logo} alt="logo" classNames={{ wrapper: "size-24", image: "aspect-square" }} />
+        <footer className="flex items-end">
+          <span className="flex rounded-sm border border-current px-1 py-px text-xs uppercase">
+            NEXTFLUX{" "}
+            <span className="-my-px mx-1 inline-block w-4 border-l border-r border-current bg-[repeating-linear-gradient(-45deg,currentColor,currentColor_1px,transparent_1px,transparent_2px)]" />{" "}
+            {since}
+          </span>
+        </footer>
+        <div className="z-10 pointer-events-none absolute inset-0 group-hover:bg-[radial-gradient(at_var(--x)_var(--y),rgba(255,255,255,0.3)_20%,transparent_80%)]" />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ArticleList/components/ArticleCard.jsx b/src/components/ArticleList/components/ArticleCard.jsx
index 69a5abd..3195c18 100644
--- a/src/components/ArticleList/components/ArticleCard.jsx
+++ b/src/components/ArticleList/components/ArticleCard.jsx
@@ -114,7 +114,7 @@ export default function ArticleCard({ article }) {
       <Ripple
         ripples={ripples}
         onClear={onClear}
-        color="hsl(var(--nextui-content4))"
+        color="hsl(var(--heroui-content4))"
       />
       <div
         className={cn(
diff --git a/src/components/ArticleView/ArticleView.css b/src/components/ArticleView/ArticleView.css
index 99677ad..1acc8ce 100644
--- a/src/components/ArticleView/ArticleView.css
+++ b/src/components/ArticleView/ArticleView.css
@@ -45,7 +45,7 @@ p {
 }
 
 .line-numbers code .line::before {
-  color: hsl(var(--nextui-default-400));
+  color: hsl(var(--heroui-default-400));
   content: counter(step);
   counter-increment: step;
   display: inline-block;
@@ -73,12 +73,12 @@ figcaption {
 /*Plyr 自定义样式*/
 .plyr {
   --plyr-audio-border: none;
-  --plyr-audio-control-color: hsl(var(--nextui-content4-foreground));
-  --plyr-audio-controls-background: hsl(var(--nextui-content1));
-  --plyr-color-main: hsl(var(--nextui-primary));
+  --plyr-audio-control-color: hsl(var(--heroui-content4-foreground));
+  --plyr-audio-controls-background: hsl(var(--heroui-content1));
+  --plyr-color-main: hsl(var(--heroui-primary));
   --plyr-tooltip-arrow-size: 0;
-  --plyr-tooltip-background: hsl(var(--nextui-content1));
-  --plyr-tooltip-color: hsl(var(--nextui-content1-foreground));
+  --plyr-tooltip-background: hsl(var(--heroui-content1));
+  --plyr-tooltip-color: hsl(var(--heroui-content1-foreground));
   --plyr-tooltip-shadow: var(--shadow-custom);
 }
 
diff --git a/src/components/FeedList/components/ProfileButton.jsx b/src/components/FeedList/components/ProfileButton.jsx
index 351abea..c4ffe77 100644
--- a/src/components/FeedList/components/ProfileButton.jsx
+++ b/src/components/FeedList/components/ProfileButton.jsx
@@ -11,11 +11,12 @@ import {
   Cog,
   ExternalLink,
   Keyboard,
+  Info,
   LogOut,
 } from "lucide-react";
 import { authState } from "@/stores/authStore.js";
 import { settingsModalOpen } from "@/stores/settingsStore.js";
-import { logoutModalOpen, shortcutsModalOpen } from "@/stores/modalStore.js";
+import { logoutModalOpen, shortcutsModalOpen, aboutModalOpen } from "@/stores/modalStore.js";
 import { useSidebar } from "@/components/ui/sidebar.jsx";
 import { useTranslation } from "react-i18next";
 
@@ -47,6 +48,17 @@ export default function ProfileButton() {
           </Button>
         </DropdownTrigger>
         <DropdownMenu aria-label="Profile Actions" variant="flat">
+          <DropdownItem
+            key="about"
+            textValue="about"
+            startContent={<Info className="size-4" />}
+            onPress={() => {
+              aboutModalOpen.set(true);
+              isMobile && setOpenMobile(false);
+            }}
+          >
+            {t("sidebar.profile.about")}
+          </DropdownItem>
           <DropdownItem
             key="settings"
             textValue="settings"
diff --git a/src/i18n/locales/en-US.js b/src/i18n/locales/en-US.js
index e9df76f..7fbbb2c 100644
--- a/src/i18n/locales/en-US.js
+++ b/src/i18n/locales/en-US.js
@@ -260,4 +260,7 @@ export default {
     description500: "Internal server error",
     backToHome: "Back to Home",
   },
+  about: {
+    title: "About",
+  },
 };
diff --git a/src/i18n/locales/zh-CN.js b/src/i18n/locales/zh-CN.js
index ef4793f..0448fc5 100644
--- a/src/i18n/locales/zh-CN.js
+++ b/src/i18n/locales/zh-CN.js
@@ -64,6 +64,7 @@ export default {
     categoryNameRequired: "请输入分类标题",
     addFeed: "新增订阅",
     profile: {
+      about: "关于",
       settings: "设置",
       openMiniflux: "访问 Miniflux",
       logout: "注销",
@@ -259,4 +260,8 @@ export default {
     description500: "系统发生错误",
     backToHome: "返回主页",
   },
+  about: {
+    title: "关于",
+  },
 };
+
diff --git a/src/stores/modalStore.js b/src/stores/modalStore.js
index 2788196..4bce024 100644
--- a/src/stores/modalStore.js
+++ b/src/stores/modalStore.js
@@ -7,3 +7,4 @@ export const renameModalOpen = atom(false);
 export const addCategoryModalOpen = atom(false);
 export const shortcutsModalOpen = atom(false);
 export const logoutModalOpen = atom(false);
+export const aboutModalOpen = atom(false);
diff --git a/tailwind.config.js b/tailwind.config.js
index 1ec4cf3..4ac714c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,8 +38,8 @@ export default {
           },
         },
         pulse: {
-          "0%, 100%": { backgroundColor: "hsl(var(--nextui-content2))" },
-          "50%": { backgroundColor: "hsl(var(--nextui-content4))" },
+          "0%, 100%": { backgroundColor: "hsl(var(--heroui-content2))" },
+          "50%": { backgroundColor: "hsl(var(--heroui-content4))" },
         },
       },
       animation: {