diff --git a/pkg/server/startup.go b/pkg/server/startup.go
index 1df69c7..4e0f3a7 100644
--- a/pkg/server/startup.go
+++ b/pkg/server/startup.go
@@ -58,6 +58,7 @@ func NewServer() {
 	{
 		api.Get("/users/me", auth, getUserinfo)
 		api.Get("/users/:accountId", getOthersInfo)
+		api.Get("/users/:accountId/follow", auth, getAccountFollowed)
 		api.Post("/users/:accountId/follow", auth, doFollowAccount)
 
 		api.Get("/auth", doLogin)
diff --git a/pkg/server/users_api.go b/pkg/server/users_api.go
index f285f3d..4158539 100644
--- a/pkg/server/users_api.go
+++ b/pkg/server/users_api.go
@@ -33,6 +33,24 @@ func getOthersInfo(c *fiber.Ctx) error {
 	return c.JSON(data)
 }
 
+func getAccountFollowed(c *fiber.Ctx) error {
+	user := c.Locals("principal").(models.Account)
+	accountId, _ := c.ParamsInt("accountId", 0)
+
+	var data models.Account
+	if err := database.C.
+		Where(&models.Account{BaseModel: models.BaseModel{ID: uint(accountId)}}).
+		First(&data).Error; err != nil {
+		return fiber.NewError(fiber.StatusInternalServerError, err.Error())
+	}
+
+	_, status := services.GetAccountFollowed(user, data)
+
+	return c.JSON(fiber.Map{
+		"is_followed": status,
+	})
+}
+
 func doFollowAccount(c *fiber.Ctx) error {
 	user := c.Locals("principal").(models.Account)
 	id, _ := c.ParamsInt("accountId", 0)
diff --git a/pkg/services/accounts.go b/pkg/services/accounts.go
index 7255b32..f9e9be8 100644
--- a/pkg/services/accounts.go
+++ b/pkg/services/accounts.go
@@ -3,8 +3,6 @@ package services
 import (
 	"code.smartsheep.studio/hydrogen/interactive/pkg/database"
 	"code.smartsheep.studio/hydrogen/interactive/pkg/models"
-	"errors"
-	"gorm.io/gorm"
 )
 
 func FollowAccount(followerId, followingId uint) error {
@@ -26,7 +24,7 @@ func GetAccountFollowed(user models.Account, target models.Account) (models.Acco
 	var relationship models.AccountMembership
 	err := database.C.Model(&models.AccountMembership{}).
 		Where(&models.AccountMembership{FollowerID: user.ID, FollowingID: target.ID}).
-		Find(&relationship).
+		First(&relationship).
 		Error
-	return relationship, !errors.Is(err, gorm.ErrRecordNotFound)
+	return relationship, err == nil
 }
diff --git a/pkg/view/src/components/NameCard.tsx b/pkg/view/src/components/NameCard.tsx
index bc9fdfa..f291398 100644
--- a/pkg/view/src/components/NameCard.tsx
+++ b/pkg/view/src/components/NameCard.tsx
@@ -1,11 +1,14 @@
-import { createSignal } from "solid-js";
+import { createSignal, Show } from "solid-js";
 
 import styles from "./NameCard.module.css";
+import { getAtk } from "../stores/userinfo.tsx";
 
 export default function NameCard(props: { accountId: number, onError: (messasge: string | null) => void }) {
   const [info, setInfo] = createSignal<any>(null);
+  const [isFollowing, setIsFollowing] = createSignal(false);
 
   const [_, setLoading] = createSignal(true);
+  const [submitting, setSubmitting] = createSignal(false);
 
   async function readInfo() {
     setLoading(true);
@@ -19,7 +22,36 @@ export default function NameCard(props: { accountId: number, onError: (messasge:
     setLoading(false);
   }
 
+  async function readIsFollowing() {
+    setLoading(true);
+    const res = await fetch(`/api/users/${props.accountId}/follow`, {
+      method: "GET",
+      headers: { Authorization: `Bearer ${getAtk()}` }
+    });
+    if (res.status === 200) {
+      const data = await res.json();
+      setIsFollowing(data["is_followed"]);
+    }
+    setLoading(false);
+  }
+
+  async function follow() {
+    setSubmitting(true);
+    const res = await fetch(`/api/users/${props.accountId}/follow`, {
+      method: "POST",
+      headers: { "Authorization": `Bearer ${getAtk()}` }
+    });
+    if (res.status !== 201 && res.status !== 204) {
+      props.onError(await res.text());
+    } else {
+      await readIsFollowing();
+      props.onError(null);
+    }
+    setSubmitting(false);
+  }
+
   readInfo();
+  readIsFollowing();
 
   return (
     <div class="relative">
@@ -36,10 +68,17 @@ export default function NameCard(props: { accountId: number, onError: (messasge:
 
       <div id="actions" class="flex justify-end">
         <div>
-          <button type="button" class="btn btn-primary">
-            <i class="fa-solid fa-plus"></i>
-            Follow
-          </button>
+          <Show when={isFollowing()} fallback={
+            <button type="button" class="btn btn-primary" disabled={submitting()} onClick={() => follow()}>
+              <i class="fa-solid fa-plus"></i>
+              Follow
+            </button>
+          }>
+            <button type="button" class="btn btn-accent" disabled={submitting()} onClick={() => follow()}>
+              <i class="fa-solid fa-check"></i>
+              Followed
+            </button>
+          </Show>
         </div>
       </div>
 
diff --git a/pkg/view/src/components/PostPublish.tsx b/pkg/view/src/components/PostPublish.tsx
index d47e8f6..a69fb73 100644
--- a/pkg/view/src/components/PostPublish.tsx
+++ b/pkg/view/src/components/PostPublish.tsx
@@ -46,7 +46,7 @@ export default function PostPublish(props: {
   return (
     <form id="publish" onSubmit={doPost}>
       <div id="publish-identity" class="flex border-y border-base-200">
-        <div class="avatar">
+        <div class="avatar pl-[20px]">
           <div class="w-12">
             <Show when={userinfo?.profiles?.avatar}
                   fallback={<span class="text-3xl">{userinfo?.displayName.substring(0, 1)}</span>}>