diff --git a/apps/web-main/package.json b/apps/web-main/package.json
index 98d9f37..215e2ed 100644
--- a/apps/web-main/package.json
+++ b/apps/web-main/package.json
@@ -18,7 +18,6 @@
     "@ricons/utils": "0.1.6",
     "dayjs": "1.11.7",
     "identicon": "3.1.1",
-    "react-perfect-scrollbar": "1.5.8",
     "dplayer": "1.27.1"
   },
   "devDependencies": {
diff --git a/apps/web-main/src/router/index.tsx b/apps/web-main/src/router/index.tsx
index 676c741..fcd7c0f 100644
--- a/apps/web-main/src/router/index.tsx
+++ b/apps/web-main/src/router/index.tsx
@@ -1,5 +1,6 @@
 import Course from "../view/Course";
 import CourseDetail from "../view/CourseDetail";
+import Subscribe from "../view/Subscribe";
 import Topic from "../view/Topic";
 
 export const routerList = [
@@ -13,6 +14,11 @@ export const routerList = [
     element: <Topic />,
     name: "讨论",
   },
+  {
+    path: "/subscribe",
+    element: <Subscribe />,
+    name: "订阅",
+  },
   {
     path: "/course/detail/:id",
     element: <CourseDetail />,
diff --git a/apps/web-main/src/view/CourseDetail/components/DPlayer/index.tsx b/apps/web-main/src/view/CourseDetail/components/DPlayer/index.tsx
index c544bea..e018612 100644
--- a/apps/web-main/src/view/CourseDetail/components/DPlayer/index.tsx
+++ b/apps/web-main/src/view/CourseDetail/components/DPlayer/index.tsx
@@ -12,19 +12,18 @@ interface IProps {
 function Player(props: IProps) {
   const playerRef = useRef<any>();
 
-  const baseConf: DPlayerOptions = {
-    container: playerRef.current,
-    preload: "auto",
-    playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2],
-    screenshot: true,
-    pluginOptions: {
-      hls: {},
-    },
-  };
-
   useEffect(() => {
     if (props.video) {
-      new DPlayer({ ...baseConf, video: { ...props.video, type: "hls" } });
+      new DPlayer({
+        container: playerRef.current,
+        video: { ...props.video, type: "hls" },
+        preload: "auto",
+        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2],
+        screenshot: true,
+        pluginOptions: {
+          hls: {},
+        },
+      });
     }
   }, [props.video]);
 
diff --git a/apps/web-main/src/view/CourseDetail/index.tsx b/apps/web-main/src/view/CourseDetail/index.tsx
index 26902ea..8dffa11 100644
--- a/apps/web-main/src/view/CourseDetail/index.tsx
+++ b/apps/web-main/src/view/CourseDetail/index.tsx
@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
 import "./index.less";
 import { ResizeBox, Space, Result, Button } from "@arco-design/web-react";
 import { Icon } from "@ricons/utils";
-import "react-perfect-scrollbar/dist/css/styles.css";
-import PerfectScrollbar from "react-perfect-scrollbar";
 import Material from "./components/Material";
 import { useMount } from "../../hook";
 import Player from "./components/DPlayer";
@@ -99,38 +97,36 @@ function CourseDetail() {
         min={0.1}
         size={0.2}
         panes={[
-          <PerfectScrollbar>
-            <aside>
-              <h2>基础架构：一条SQL查询语句是如何执行的？</h2>
-              <div>
-                <Space style={{ color: "var(--color-text-3)" }}>
-                  <span>2023年3月2日</span>
-                </Space>
-              </div>
-              <div className="toc">
-                {toc.map((i) => {
-                  if (i.level === 1) {
-                    return (
-                      <div className="level-1" key={i.title}>
-                        {i.title}
-                      </div>
-                    );
-                  } else if (i.level === 2) {
-                    return (
-                      <div
-                        className={`level-2 ${i.active ? "active" : ""}`}
-                        key={i.title}
-                        onClick={() => onclickItem(i)}
-                      >
-                        <span className="bs-ellipsis">{i.title}</span>
-                        <span className="time">{i.time}</span>
-                      </div>
-                    );
-                  }
-                })}
-              </div>
-            </aside>
-          </PerfectScrollbar>,
+          <aside>
+            <h2>基础架构：一条SQL查询语句是如何执行的？</h2>
+            <div>
+              <Space style={{ color: "var(--color-text-3)" }}>
+                <span>2023年3月2日</span>
+              </Space>
+            </div>
+            <div className="toc">
+              {toc.map((i) => {
+                if (i.level === 1) {
+                  return (
+                    <div className="level-1" key={i.title}>
+                      {i.title}
+                    </div>
+                  );
+                } else if (i.level === 2) {
+                  return (
+                    <div
+                      className={`level-2 ${i.active ? "active" : ""}`}
+                      key={i.title}
+                      onClick={() => onclickItem(i)}
+                    >
+                      <span className="bs-ellipsis">{i.title}</span>
+                      <span className="time">{i.time}</span>
+                    </div>
+                  );
+                }
+              })}
+            </div>
+          </aside>,
           <article>
             <main>{view}</main>
           </article>,
diff --git a/apps/web-main/src/view/Subscribe/index.less b/apps/web-main/src/view/Subscribe/index.less
new file mode 100644
index 0000000..fd76e07
--- /dev/null
+++ b/apps/web-main/src/view/Subscribe/index.less
@@ -0,0 +1,43 @@
+.subscribe {
+  padding: 100px 0 20px 0;
+  h2 {
+    text-align: center;
+  }
+  h4 {
+    text-align: center;
+    font-weight: 400;
+    color: var(--color-text-4);
+  }
+  .options {
+    padding-top: 100px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    column-gap: 20px;
+    > section {
+      padding: 40px;
+      text-align: center;
+      .price {
+        font-family: DINCondensed-Bold, "Century Gothic", CenturyGothic,
+          AppleGothic, sans-serif;
+        font-weight: bold;
+        font-size: 48px;
+        color: var(--color-text-2);
+        line-height: 1;
+        margin-top: 16px;
+        letter-spacing: 1px;
+      }
+      h3 {
+        font-size: 18px;
+        font-weight: bold;
+        color: var(--color-text-2);
+        letter-spacing: 5px;
+        margin-top: 40px;
+      }
+      p {
+        color: var(--color-text-3);
+        letter-spacing: 1px;
+        line-height: 1.9;
+      }
+    }
+  }
+}
diff --git a/apps/web-main/src/view/Subscribe/index.tsx b/apps/web-main/src/view/Subscribe/index.tsx
new file mode 100644
index 0000000..36c47c4
--- /dev/null
+++ b/apps/web-main/src/view/Subscribe/index.tsx
@@ -0,0 +1,44 @@
+import { Button } from "@arco-design/web-react";
+import "./index.less";
+
+// 季度：三个月内，在线学习 ninghao.net 上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
+
+function Subscribe() {
+  return (
+    <div className="container subscribe">
+      <h2>订阅选项</h2>
+      <h4>我也不知道该如何劝你们花钱点钱？但是学一点可能就少亏一点</h4>
+      <div className="options">
+        <section className="bs-shadow">
+          <h3>季度</h3>
+          <div className="price">199</div>
+          <p>
+            三个月内，在线学习 ninghao.net
+            上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
+          </p>
+          <Button>订阅</Button>
+        </section>
+        <section className="bs-shadow">
+          <h3>季度</h3>
+          <div className="price">299</div>
+          <p>
+            三个月内，在线学习 ninghao.net
+            上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
+          </p>
+          <Button>订阅</Button>
+        </section>
+        <section className="bs-shadow">
+          <h3>季度</h3>
+          <div className="price">399</div>
+          <p>
+            三个月内，在线学习 ninghao.net
+            上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
+          </p>
+          <Button>订阅</Button>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default Subscribe;
diff --git a/apps/web-main/src/view/Topic/index.less b/apps/web-main/src/view/Topic/index.less
new file mode 100644
index 0000000..3c65563
--- /dev/null
+++ b/apps/web-main/src/view/Topic/index.less
@@ -0,0 +1,3 @@
+.topic {
+  padding: 100px 0 20px 0;
+}
diff --git a/apps/web-main/src/view/Topic/index.tsx b/apps/web-main/src/view/Topic/index.tsx
index d4c560b..ce22de0 100644
--- a/apps/web-main/src/view/Topic/index.tsx
+++ b/apps/web-main/src/view/Topic/index.tsx
@@ -1,5 +1,5 @@
-import React from "react";
+import './index.less'
 
 export default function Index() {
-  return <div>UserIndex</div>;
+  return <div className="container topic">UserIndex</div>;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be84947..63fe7cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,7 +191,6 @@ importers:
       less: ^4.1.3
       react: ^18.2.0
       react-dom: ^18.2.0
-      react-perfect-scrollbar: 1.5.8
       react-router-dom: 6.8.0
       typescript: ^4.9.3
       vite: ^4.1.0
@@ -206,7 +205,6 @@ importers:
       less: registry.npmmirror.com/less/4.1.3
       react: registry.npmmirror.com/react/18.2.0
       react-dom: registry.npmmirror.com/react-dom/18.2.0_react@18.2.0
-      react-perfect-scrollbar: registry.npmmirror.com/react-perfect-scrollbar/1.5.8_biqbaboplfbrettd7655fr4n2y
       react-router-dom: registry.npmmirror.com/react-router-dom/6.8.0_biqbaboplfbrettd7655fr4n2y
     devDependencies:
       '@types/dplayer': registry.npmmirror.com/@types/dplayer/1.25.2
@@ -9859,12 +9857,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  registry.npmmirror.com/perfect-scrollbar/1.5.5:
-    resolution: {integrity: sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz}
-    name: perfect-scrollbar
-    version: 1.5.5
-    dev: false
-
   registry.npmmirror.com/performance-now/2.1.0:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz}
     name: performance-now
@@ -11348,21 +11340,6 @@ packages:
     version: 16.13.1
     dev: false
 
-  registry.npmmirror.com/react-perfect-scrollbar/1.5.8_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-bQ46m70gp/HJtiBOF3gRzBISSZn8FFGNxznTdmTG8AAwpxG1bJCyn7shrgjEvGSQ5FJEafVEiosY+ccER11OSA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.8.tgz}
-    id: registry.npmmirror.com/react-perfect-scrollbar/1.5.8
-    name: react-perfect-scrollbar
-    version: 1.5.8
-    peerDependencies:
-      react: '>=16.3.3'
-      react-dom: '>=16.3.3'
-    dependencies:
-      perfect-scrollbar: registry.npmmirror.com/perfect-scrollbar/1.5.5
-      prop-types: registry.npmmirror.com/prop-types/15.8.1
-      react: registry.npmmirror.com/react/18.2.0
-      react-dom: registry.npmmirror.com/react-dom/18.2.0_react@18.2.0
-    dev: false
-
   registry.npmmirror.com/react-refresh/0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz}
     name: react-refresh