diff --git a/proto/gen/apidocs.swagger.yaml b/proto/gen/apidocs.swagger.yaml
index 7f3563f9..1f90ca9b 100644
--- a/proto/gen/apidocs.swagger.yaml
+++ b/proto/gen/apidocs.swagger.yaml
@@ -311,12 +311,16 @@ paths:
           type: integer
           format: int32
         - name: pageToken
-          description: "A page token, received from a previous `ListMemos` call.\r\nProvide this to retrieve the subsequent page."
+          description: |-
+            A page token, received from a previous `ListMemos` call.
+            Provide this to retrieve the subsequent page.
           in: query
           required: false
           type: string
         - name: filter
-          description: "Filter is used to filter memos returned in the list.\r\nFormat: \"creator == 'users/{uid}' && visibilities == ['PUBLIC', 'PROTECTED']\""
+          description: |-
+            Filter is used to filter memos returned in the list.
+            Format: "creator == 'users/{uid}' && visibilities == ['PUBLIC', 'PROTECTED']"
           in: query
           required: false
           type: string
@@ -505,7 +509,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: filter
-          description: "Filter is used to filter users returned in the list.\r\nFormat: \"username == 'frank'\""
+          description: |-
+            Filter is used to filter users returned in the list.
+            Format: "username == 'frank'"
           in: query
           required: false
           type: string
@@ -666,7 +672,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The resource name of the workspace setting.\r\nFormat: settings/{setting}"
+          description: |-
+            The resource name of the workspace setting.
+            Format: settings/{setting}
           in: path
           required: true
           type: string
@@ -688,7 +696,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: setting.name
-          description: "name is the name of the setting.\r\nFormat: settings/{setting}"
+          description: |-
+            name is the name of the setting.
+            Format: settings/{setting}
           in: path
           required: true
           type: string
@@ -724,7 +734,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: identityProvider.name
-          description: "The name of the identityProvider.\r\nFormat: identityProviders/{id}"
+          description: |-
+            The name of the identityProvider.
+            Format: identityProviders/{id}
           in: path
           required: true
           type: string
@@ -762,7 +774,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: inbox.name
-          description: "The name of the inbox.\r\nFormat: inboxes/{id}"
+          description: |-
+            The name of the inbox.
+            Format: inboxes/{id}
           in: path
           required: true
           type: string
@@ -806,7 +820,10 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: memo.name
-          description: "The name of the memo.\r\nFormat: memos/{id}\r\nid is the system generated id."
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
+            id is the system generated id.
           in: path
           required: true
           type: string
@@ -824,7 +841,9 @@ paths:
                 $ref: '#/definitions/v1RowStatus'
               creator:
                 type: string
-                title: "The name of the creator.\r\nFormat: users/{id}"
+                title: |-
+                  The name of the creator.
+                  Format: users/{id}
               createTime:
                 type: string
                 format: date-time
@@ -871,7 +890,9 @@ paths:
                 readOnly: true
               parent:
                 type: string
-                title: "The name of the parent memo.\r\nFormat: memos/{id}"
+                title: |-
+                  The name of the parent memo.
+                  Format: memos/{id}
                 readOnly: true
               snippet:
                 type: string
@@ -897,7 +918,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name_1
-          description: "The name of the user.\r\nFormat: users/{id}"
+          description: |-
+            The name of the user.
+            Format: users/{id}
           in: path
           required: true
           type: string
@@ -919,7 +942,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name_1
-          description: "The name of the identityProvider to delete.\r\nFormat: identityProviders/{id}"
+          description: |-
+            The name of the identityProvider to delete.
+            Format: identityProviders/{id}
           in: path
           required: true
           type: string
@@ -941,7 +966,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name_2
-          description: "The name of the identityProvider to get.\r\nFormat: identityProviders/{id}"
+          description: |-
+            The name of the identityProvider to get.
+            Format: identityProviders/{id}
           in: path
           required: true
           type: string
@@ -963,7 +990,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name_2
-          description: "The name of the inbox to delete.\r\nFormat: inboxes/{id}"
+          description: |-
+            The name of the inbox to delete.
+            Format: inboxes/{id}
           in: path
           required: true
           type: string
@@ -985,7 +1014,10 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name_3
-          description: "The name of the resource.\r\nFormat: resources/{id}\r\nid is the system generated unique identifier."
+          description: |-
+            The name of the resource.
+            Format: resources/{id}
+            id is the system generated unique identifier.
           in: path
           required: true
           type: string
@@ -1007,7 +1039,10 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name_3
-          description: "The name of the resource.\r\nFormat: resources/{id}\r\nid is the system generated unique identifier."
+          description: |-
+            The name of the resource.
+            Format: resources/{id}
+            id is the system generated unique identifier.
           in: path
           required: true
           type: string
@@ -1029,7 +1064,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name_4
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1051,7 +1088,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name_4
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1073,7 +1112,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the activity.\r\nFormat: activities/{id}"
+          description: |-
+            The name of the activity.
+            Format: activities/{id}
           in: path
           required: true
           type: string
@@ -1095,7 +1136,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the user.\r\nFormat: users/{id}"
+          description: |-
+            The name of the user.
+            Format: users/{id}
           in: path
           required: true
           type: string
@@ -1117,7 +1160,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the user.\r\nFormat: users/{id}"
+          description: |-
+            The name of the user.
+            Format: users/{id}
           in: path
           required: true
           type: string
@@ -1138,7 +1183,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the user.\r\nFormat: users/{id}"
+          description: |-
+            The name of the user.
+            Format: users/{id}
           in: path
           required: true
           type: string
@@ -1166,7 +1213,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the user.\r\nFormat: users/{id}"
+          description: |-
+            The name of the user.
+            Format: users/{id}
           in: path
           required: true
           type: string
@@ -1193,7 +1242,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1214,7 +1265,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1241,7 +1294,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1262,7 +1317,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1289,7 +1346,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1311,7 +1370,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1338,7 +1399,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1360,7 +1423,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the memo.\r\nFormat: memos/{id}"
+          description: |-
+            The name of the memo.
+            Format: memos/{id}
           in: path
           required: true
           type: string
@@ -1387,7 +1452,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the user.\r\nFormat: users/{id}"
+          description: |-
+            The name of the user.
+            Format: users/{id}
           in: path
           required: true
           type: string
@@ -1410,7 +1477,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: parent
-          description: "The parent, who owns the tags.\r\nFormat: memos/{id}. Use \"memos/-\" to delete all tags."
+          description: |-
+            The parent, who owns the tags.
+            Format: memos/{id}. Use "memos/-" to delete all tags.
           in: path
           required: true
           type: string
@@ -1441,7 +1510,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: parent
-          description: "The parent, who owns the tags.\r\nFormat: memos/{id}. Use \"memos/-\" to rename all tags."
+          description: |-
+            The parent, who owns the tags.
+            Format: memos/{id}. Use "memos/-" to rename all tags.
           in: path
           required: true
           type: string
@@ -1468,7 +1539,10 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: resource.name
-          description: "The name of the resource.\r\nFormat: resources/{id}\r\nid is the system generated unique identifier."
+          description: |-
+            The name of the resource.
+            Format: resources/{id}
+            id is the system generated unique identifier.
           in: path
           required: true
           type: string
@@ -1500,7 +1574,9 @@ paths:
                 format: int64
               memo:
                 type: string
-                title: "The related memo.\r\nFormat: memos/{id}"
+                title: |-
+                  The related memo.
+                  Format: memos/{id}
       tags:
         - ResourceService
   /api/v1/{setting.name}:
@@ -1518,7 +1594,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: setting.name
-          description: "The name of the user.\r\nFormat: users/{id}"
+          description: |-
+            The name of the user.
+            Format: users/{id}
           in: path
           required: true
           type: string
@@ -1555,7 +1633,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: user.name
-          description: "The name of the user.\r\nFormat: users/{id}"
+          description: |-
+            The name of the user.
+            Format: users/{id}
           in: path
           required: true
           type: string
@@ -1609,7 +1689,9 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the user.\r\nFormat: users/{id}"
+          description: |-
+            The name of the user.
+            Format: users/{id}
           in: path
           required: true
           type: string
@@ -1642,7 +1724,10 @@ paths:
             $ref: '#/definitions/googlerpcStatus'
       parameters:
         - name: name
-          description: "The name of the resource.\r\nFormat: resources/{id}\r\nid is the system generated unique identifier."
+          description: |-
+            The name of the resource.
+            Format: resources/{id}
+            id is the system generated unique identifier.
           in: path
           required: true
           type: string
@@ -1835,7 +1920,9 @@ definitions:
     properties:
       name:
         type: string
-        title: "The name of the identityProvider.\r\nFormat: identityProviders/{id}"
+        title: |-
+          The name of the identityProvider.
+          Format: identityProviders/{id}
       type:
         $ref: '#/definitions/apiv1IdentityProviderType'
       title:
@@ -1871,7 +1958,10 @@ definitions:
     properties:
       name:
         type: string
-        description: "The name of the memo.\r\nFormat: memos/{id}\r\nid is the system generated id."
+        description: |-
+          The name of the memo.
+          Format: memos/{id}
+          id is the system generated id.
       uid:
         type: string
         description: The user defined id of the memo.
@@ -1879,7 +1969,9 @@ definitions:
         $ref: '#/definitions/v1RowStatus'
       creator:
         type: string
-        title: "The name of the creator.\r\nFormat: users/{id}"
+        title: |-
+          The name of the creator.
+          Format: users/{id}
       createTime:
         type: string
         format: date-time
@@ -1926,7 +2018,9 @@ definitions:
         readOnly: true
       parent:
         type: string
-        title: "The name of the parent memo.\r\nFormat: memos/{id}"
+        title: |-
+          The name of the parent memo.
+          Format: memos/{id}
         readOnly: true
       snippet:
         type: string
@@ -1959,7 +2053,9 @@ definitions:
     properties:
       name:
         type: string
-        title: "The name of the user.\r\nFormat: users/{id}"
+        title: |-
+          The name of the user.
+          Format: users/{id}
       locale:
         type: string
         description: The preferred locale of the user.
@@ -2003,7 +2099,10 @@ definitions:
       weekStartDayOffset:
         type: integer
         format: int32
-        description: "week_start_day_offset is the week start day offset from Sunday.\r\n0: Sunday, 1: Monday, 2: Tuesday, 3: Wednesday, 4: Thursday, 5: Friday, 6: Saturday\r\nDefault is Sunday."
+        description: |-
+          week_start_day_offset is the week start day offset from Sunday.
+          0: Sunday, 1: Monday, 2: Tuesday, 3: Wednesday, 4: Thursday, 5: Friday, 6: Saturday
+          Default is Sunday.
       disallowChangeUsername:
         type: boolean
         description: disallow_change_username disallows changing username.
@@ -2054,7 +2153,9 @@ definitions:
     properties:
       name:
         type: string
-        title: "name is the name of the setting.\r\nFormat: settings/{setting}"
+        title: |-
+          name is the name of the setting.
+          Format: settings/{setting}
       generalSetting:
         $ref: '#/definitions/apiv1WorkspaceGeneralSetting'
       storageSetting:
@@ -2069,7 +2170,9 @@ definitions:
         description: storage_type is the storage type.
       filepathTemplate:
         type: string
-        title: "The template of file path.\r\ne.g. assets/{timestamp}_{filename}"
+        title: |-
+          The template of file path.
+          e.g. assets/{timestamp}_{filename}
       uploadSizeLimitMb:
         type: string
         format: int64
@@ -2228,7 +2331,9 @@ definitions:
     properties:
       name:
         type: string
-        title: "The name of the activity.\r\nFormat: activities/{id}"
+        title: |-
+          The name of the activity.
+          Format: activities/{id}
       creatorId:
         type: integer
         format: int32
@@ -2371,7 +2476,9 @@ definitions:
     properties:
       name:
         type: string
-        title: "The name of the inbox.\r\nFormat: inboxes/{id}"
+        title: |-
+          The name of the inbox.
+          Format: inboxes/{id}
       sender:
         type: string
         title: 'Format: users/{id}'
@@ -2445,7 +2552,9 @@ definitions:
           $ref: '#/definitions/v1Inbox'
       nextPageToken:
         type: string
-        description: "A token, which can be sent as `page_token` to retrieve the next page.\r\nIf this field is omitted, there are no subsequent pages."
+        description: |-
+          A token, which can be sent as `page_token` to retrieve the next page.
+          If this field is omitted, there are no subsequent pages.
   v1ListMemoCommentsResponse:
     type: object
     properties:
@@ -2488,7 +2597,9 @@ definitions:
           $ref: '#/definitions/apiv1Memo'
       nextPageToken:
         type: string
-        description: "A token, which can be sent as `page_token` to retrieve the next page.\r\nIf this field is omitted, there are no subsequent pages."
+        description: |-
+          A token, which can be sent as `page_token` to retrieve the next page.
+          If this field is omitted, there are no subsequent pages.
   v1ListNode:
     type: object
     properties:
@@ -2564,10 +2675,14 @@ definitions:
     properties:
       memo:
         $ref: '#/definitions/v1MemoRelationMemo'
-        title: "The name of memo.\r\nFormat: \"memos/{uid}\""
+        title: |-
+          The name of memo.
+          Format: "memos/{uid}"
       relatedMemo:
         $ref: '#/definitions/v1MemoRelationMemo'
-        title: "The name of related memo.\r\nFormat: \"memos/{uid}\""
+        title: |-
+          The name of related memo.
+          Format: "memos/{uid}"
       type:
         $ref: '#/definitions/v1MemoRelationType'
   v1MemoRelationMemo:
@@ -2575,7 +2690,9 @@ definitions:
     properties:
       name:
         type: string
-        title: "The name of the memo.\r\nFormat: memos/{id}"
+        title: |-
+          The name of the memo.
+          Format: memos/{id}
       uid:
         type: string
       snippet:
@@ -2749,7 +2866,9 @@ definitions:
         format: int32
       creator:
         type: string
-        title: "The name of the creator.\r\nFormat: users/{id}"
+        title: |-
+          The name of the creator.
+          Format: users/{id}
       contentId:
         type: string
       reactionType:
@@ -2766,7 +2885,10 @@ definitions:
     properties:
       name:
         type: string
-        description: "The name of the resource.\r\nFormat: resources/{id}\r\nid is the system generated unique identifier."
+        description: |-
+          The name of the resource.
+          Format: resources/{id}
+          id is the system generated unique identifier.
       uid:
         type: string
         description: The user defined id of the resource.
@@ -2788,7 +2910,9 @@ definitions:
         format: int64
       memo:
         type: string
-        title: "The related memo.\r\nFormat: memos/{id}"
+        title: |-
+          The related memo.
+          Format: memos/{id}
   v1RestoreMarkdownNodesRequest:
     type: object
     properties:
@@ -2910,7 +3034,9 @@ definitions:
     properties:
       name:
         type: string
-        title: "The name of the user.\r\nFormat: users/{id}"
+        title: |-
+          The name of the user.
+          Format: users/{id}
       id:
         type: integer
         format: int32
@@ -2984,7 +3110,9 @@ definitions:
     properties:
       owner:
         type: string
-        title: "The name of instance owner.\r\nFormat: \"users/{id}\""
+        title: |-
+          The name of instance owner.
+          Format: "users/{id}"
       version:
         type: string
         title: version is the current version of instance
diff --git a/web/package.json b/web/package.json
index ed68e991..4dd8d098 100644
--- a/web/package.json
+++ b/web/package.json
@@ -19,7 +19,7 @@
     "@mui/joy": "5.0.0-beta.48",
     "@radix-ui/react-popover": "^1.1.2",
     "@reduxjs/toolkit": "^2.3.0",
-    "@usememos/mui": "0.0.1-alpha.24",
+    "@usememos/mui": "0.0.1-alpha.25",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index d64122bf..329b0347 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -39,8 +39,8 @@ importers:
         specifier: ^2.3.0
         version: 2.3.0(react-redux@9.1.2(@types/react@18.3.12)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
       '@usememos/mui':
-        specifier: 0.0.1-alpha.24
-        version: 0.0.1-alpha.24(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)
+        specifier: 0.0.1-alpha.25
+        version: 0.0.1-alpha.25(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -1409,8 +1409,8 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
-  '@usememos/mui@0.0.1-alpha.24':
-    resolution: {integrity: sha512-4UAlapAs7UfgG3OkdvolgNBo1BCcaXhs3TeWw1UvEA7pwj6txzbIjqN8c6IHl+gYeMzoXBO2Ou7gnYD9OOtj5Q==}
+  '@usememos/mui@0.0.1-alpha.25':
+    resolution: {integrity: sha512-TjvhSgKRqXrDBPGJuojwjbBGLysiycvE+05UJlzmJ1OOQLO3UBYFc5F+iPHg5ok+7PEjWrt3tTubU76/kWsgBQ==}
     peerDependencies:
       lucide-react: ^0.453.0
       postcss: ^8.4.47
@@ -4645,7 +4645,7 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@usememos/mui@0.0.1-alpha.24(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)':
+  '@usememos/mui@0.0.1-alpha.25(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)':
     dependencies:
       lucide-react: 0.453.0(react@18.3.1)
       postcss: 8.4.47
diff --git a/web/src/components/ActivityCalendar.tsx b/web/src/components/ActivityCalendar.tsx
index b2d9d659..7dcdd00c 100644
--- a/web/src/components/ActivityCalendar.tsx
+++ b/web/src/components/ActivityCalendar.tsx
@@ -21,11 +21,11 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
 
   const ratio = count / maxCount;
   if (ratio > 0.7) {
-    return "bg-teal-700 text-gray-100 dark:opacity-80";
+    return "bg-primary-darker text-gray-100 dark:opacity-80";
   } else if (ratio > 0.4) {
-    return "bg-teal-600 text-gray-100 dark:opacity-80";
+    return "bg-primary-dark text-gray-100 dark:opacity-80";
   } else {
-    return "bg-teal-500 text-gray-100 dark:opacity-70";
+    return "bg-primary text-gray-100 dark:opacity-70";
   }
 };
 
diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index 153ac12a..9ab9cc51 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -98,9 +98,7 @@ const LocationSelector = (props: Props) => {
           <MapPinIcon className="w-5 h-5 mx-auto shrink-0" />
           {props.location && (
             <>
-              <span className="font-normal ml-0.5 text-ellipsis whitespace-nowrap overflow-hidden max-w-32">
-                {props.location.placeholder}
-              </span>
+              <span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-32">{props.location.placeholder}</span>
               <XIcon className="w-5 h-5 mx-auto shrink-0 hidden group-hover:block opacity-60 hover:opacity-80" onClick={removeLocation} />
             </>
           )}
@@ -111,14 +109,17 @@ const LocationSelector = (props: Props) => {
           <LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
           <div className="mt-2 w-full flex flex-row justify-between items-center gap-2">
             <div className="flex flex-row items-center justify-start gap-2">
-              {state.position && (
-                <span className="text-sm">
-                  [{state.position.lat.toFixed(2)}, {state.position.lng.toFixed(2)}]
-                </span>
-              )}
               <Input
                 placeholder="Choose a position first."
                 value={state.placeholder}
+                size="sm"
+                startDecorator={
+                  state.position && (
+                    <span className="text-xs opacity-60">
+                      [{state.position.lat.toFixed(2)}, {state.position.lng.toFixed(2)}]
+                    </span>
+                  )
+                }
                 disabled={!state.position}
                 onChange={(e) => setState((state) => ({ ...state, placeholder: e.target.value }))}
               />
@@ -126,6 +127,7 @@ const LocationSelector = (props: Props) => {
             <Button
               className="shrink-0"
               color="primary"
+              size="sm"
               onClick={() => {
                 props.onChange(
                   Location.fromPartial({
diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
index 70a5ba2a..2408e21a 100644
--- a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
@@ -46,15 +46,15 @@ const TagSelector = (props: Props) => {
           <HashIcon className="w-5 h-5 mx-auto" />
         </Button>
       </MenuButton>
-      <Menu className="relative text-sm" component="div" size="sm" placement="bottom-start">
+      <Menu className="relative" component="div" size="sm" placement="bottom-start">
         <div ref={containerRef}>
           {tags.length > 0 ? (
-            <div className="flex-row justify-start items-start flex-wrap px-1 max-w-[12rem] h-auto max-h-48 overflow-y-auto font-mono">
+            <div className="flex flex-row justify-start items-start flex-wrap px-3 py-1 max-w-[12rem] h-auto max-h-48 overflow-y-auto gap-x-2 gap-y-1">
               {tags.map((tag) => {
                 return (
                   <div
                     key={tag}
-                    className="inline-flex w-auto max-w-full cursor-pointer rounded text-sm leading-5 px-1 text-gray-500 dark:text-gray-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                    className="inline-flex w-auto max-w-full cursor-pointer text-base leading-6 text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-dark"
                     onClick={() => handleTagClick(tag)}
                   >
                     <OverflowTip>#{tag}</OverflowTip>
diff --git a/web/src/components/ReactionView.tsx b/web/src/components/ReactionView.tsx
index 3eab5aa9..629a126f 100644
--- a/web/src/components/ReactionView.tsx
+++ b/web/src/components/ReactionView.tsx
@@ -66,14 +66,15 @@ const ReactionView = (props: Props) => {
     <Tooltip title={stringifyUsers(users, reactionType)} placement="top">
       <div
         className={clsx(
-          "h-7 border px-2 py-0.5 rounded-full font-memo flex flex-row justify-center items-center gap-1 dark:border-zinc-700",
+          "h-7 border px-2 py-0.5 rounded-full flex flex-row justify-center items-center gap-1 dark:border-zinc-700",
+          "text-sm text-gray-600 dark:text-gray-400",
           currentUser && "cursor-pointer",
           hasReaction && "bg-blue-100 border-blue-200 dark:bg-zinc-900",
         )}
         onClick={handleReactionClick}
       >
         <span>{reactionType}</span>
-        <span className="text-sm text-gray-500 dark:text-gray-400">{users.length}</span>
+        <span className="opacity-60">{users.length}</span>
       </div>
     </Tooltip>
   );
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 29507745..03cd3ac1 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -6,6 +6,28 @@ module.exports = {
   prefix: "",
   theme: {
     extend: {
+      colors: {
+        primary: {
+          DEFAULT: "#0d9488", // Teal 600
+          dark: "#0f766e", // Teal 700
+          darker: "#0d5a56", // Teal 800
+        },
+        success: {
+          DEFAULT: "#16a34a", // Green 600
+          dark: "#047857", // Green 700
+          darker: "#03664a", // Green 800
+        },
+        danger: {
+          DEFAULT: "#dc2626", // Red 600
+          dark: "#b91c1c", // Red 700
+          darker: "#991b1b", // Red 800
+        },
+        warning: {
+          DEFAULT: "#ca8a04", // Yellow 600
+          dark: "#b45309", // Yellow 700
+          darker: "#92400e", // Yellow 800
+        },
+      },
       spacing: {
         128: "32rem",
       },