diff --git a/src/components/frontend/home/essays/item/styles.module.less b/src/components/frontend/home/essays/item/styles.module.less
index b082f9e..2dc221a 100644
--- a/src/components/frontend/home/essays/item/styles.module.less
+++ b/src/components/frontend/home/essays/item/styles.module.less
@@ -5,6 +5,12 @@
     border-radius: 5px;
     background-color: #fff;
     box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
+    transition: all 0.3s ease;
+
+    &:hover {
+        box-shadow: 0 1px 5px rgba(26, 26, 26, 0.3);
+        cursor: pointer;
+    }
 
     .title {
         font-size: 20px;
diff --git a/src/components/frontend/home/essays/item/web.pc.tsx b/src/components/frontend/home/essays/item/web.pc.tsx
index 958c10a..efbc62a 100644
--- a/src/components/frontend/home/essays/item/web.pc.tsx
+++ b/src/components/frontend/home/essays/item/web.pc.tsx
@@ -14,10 +14,20 @@ const EssayItem = (
     >
 ) => {
     const { item } = props.data;
+    const { navigateTo } = props.methods;
+
     return (
         <>
             {item && (
-                <div className={Styles.essay}>
+                <div
+                    className={Styles.essay}
+                    onClick={() => {
+                        navigateTo({
+                            url: `/essay/details`,
+                            oakId: item.id,
+                        });
+                    }}
+                >
                     <div className={Styles.title}>{item.title}</div>
                     <div className={Styles.content}>{item.summary}</div>
                     {/* labels */}
diff --git a/src/data/i18n.ts b/src/data/i18n.ts
index 4666261..d1ba68a 100644
--- a/src/data/i18n.ts
+++ b/src/data/i18n.ts
@@ -10,7 +10,8 @@ const i18ns: I18n[] = [
         position: "src/pages/console/category/list",
         data: {
             "pageHeader": "分类列表",
-            "author": "作者"
+            "author": "作者",
+            "createCategory": "创建分类"
         }
     },
     {
diff --git a/src/pages/frontend/essay/details/index.ts b/src/pages/frontend/essay/details/index.ts
new file mode 100644
index 0000000..e8f451e
--- /dev/null
+++ b/src/pages/frontend/essay/details/index.ts
@@ -0,0 +1,12 @@
+import { essayProjection } from '@project/utils/projection';
+
+export default OakComponent({
+    entity: 'essay',
+    isList: false,
+    projection: essayProjection,
+    formData({ data }) {
+        return {
+            item: data,
+        };
+    },
+});
diff --git a/src/pages/frontend/essay/details/web.pc.tsx b/src/pages/frontend/essay/details/web.pc.tsx
new file mode 100644
index 0000000..6de159b
--- /dev/null
+++ b/src/pages/frontend/essay/details/web.pc.tsx
@@ -0,0 +1,22 @@
+import { EntityDict } from '@project/oak-app-domain';
+import { RowWithActions, WebComponentProps } from 'oak-frontend-base';
+import React from 'react';
+
+const EssayDetails = (
+    props: WebComponentProps<
+        EntityDict,
+        'essay',
+        false,
+        {
+            item: RowWithActions<EntityDict, 'essay'>;
+        }
+    >
+) => {
+    return (
+        <div>
+            <h1>Essay Details</h1>
+        </div>
+    );
+};
+
+export default EssayDetails;