diff --git a/web/src/components/ChangePasswordDialog.tsx b/web/src/components/ChangePasswordDialog.tsx
index a9a9070..7e6aa43 100644
--- a/web/src/components/ChangePasswordDialog.tsx
+++ b/web/src/components/ChangePasswordDialog.tsx
@@ -66,7 +66,7 @@ const ChangePasswordDialog: React.FC<Props> = (props: Props) => {
       toastHelper.info("Password changed");
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toastHelper.error(JSON.stringify(error.response.data));
     }
     requestState.setFinish();
   };
diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 7cf1fb3..ee1bfb1 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -100,7 +100,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.error || error.response.data.message);
+      toastHelper.error(JSON.stringify(error.response.data));
     }
   };
 
diff --git a/web/src/components/CreateWorkspaceDialog.tsx b/web/src/components/CreateWorkspaceDialog.tsx
index b69c16f..d275674 100644
--- a/web/src/components/CreateWorkspaceDialog.tsx
+++ b/web/src/components/CreateWorkspaceDialog.tsx
@@ -86,7 +86,7 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.error || error.response.data.message);
+      toastHelper.error(JSON.stringify(error.response.data));
     }
     requestState.setFinish();
   };
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 06d63bb..833d230 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -38,12 +38,12 @@ const Header: React.FC = () => {
         <div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
           <div className="flex flex-row justify-start items-center shrink mr-2">
             <Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center">
-              <img src="/corgi-logo.png" className="w-8 h-auto mr-1" alt="" />
+              <img src="/corgi-logo.png" className="w-8 h-auto mr-2" alt="" />
               Corgi
             </Link>
             {workspaceList.length > 0 && activedWorkspace !== undefined && (
               <>
-                <span className="font-mono mx-2 text-gray-200">/</span>
+                <span className="font-mono mx-1 text-gray-200">/</span>
                 <Dropdown
                   trigger={
                     <button className="flex flex-row justify-end items-center cursor-pointer">
diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx
index 77a95e3..4accdea 100644
--- a/web/src/components/ShortcutListView.tsx
+++ b/web/src/components/ShortcutListView.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from "@mui/joy";
 import copy from "copy-to-clipboard";
 import { useState } from "react";
 import { shortcutService, workspaceService } from "../services";
@@ -59,17 +60,21 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
               </div>
               <div className="flex flex-row justify-end items-center">
                 <span className="w-16 truncate mr-2 text-gray-600">{shortcut.creator.name}</span>
-                <button
-                  className="cursor-pointer mr-4 hover:opacity-80"
-                  onClick={() => {
-                    handleCopyButtonClick(shortcut);
-                  }}
-                >
-                  <Icon.Copy className="w-5 h-auto" />
-                </button>
-                <a className="cursor-pointer mr-4 hover:opacity-80" target="_blank" href={shortcut.link} rel="noreferrer">
-                  <Icon.ExternalLink className="w-5 h-auto" />
-                </a>
+                <Tooltip title="Copy link" variant="solid" placement="top">
+                  <button
+                    className="cursor-pointer mr-4 hover:opacity-80"
+                    onClick={() => {
+                      handleCopyButtonClick(shortcut);
+                    }}
+                  >
+                    <Icon.Copy className="w-5 h-auto" />
+                  </button>
+                </Tooltip>
+                <Tooltip title="Go to link" variant="solid" placement="top">
+                  <a className="cursor-pointer mr-4 hover:opacity-80" target="_blank" href={shortcut.link} rel="noreferrer">
+                    <Icon.ExternalLink className="w-5 h-auto" />
+                  </a>
+                </Tooltip>
                 <Dropdown
                   actions={
                     <>
diff --git a/web/src/components/UpsertWorkspaceUserDialog.tsx b/web/src/components/UpsertWorkspaceUserDialog.tsx
index 484757f..65c3c37 100644
--- a/web/src/components/UpsertWorkspaceUserDialog.tsx
+++ b/web/src/components/UpsertWorkspaceUserDialog.tsx
@@ -69,7 +69,7 @@ const UpsertWorkspaceUserDialog: React.FC<Props> = (props: Props) => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.error || error.response.data.message);
+      toastHelper.error(JSON.stringify(error.response.data));
     }
     requestState.setFinish();
   };
diff --git a/web/src/components/WorkspaceSetting.tsx b/web/src/components/WorkspaceSetting.tsx
index 0237f05..02d15d9 100644
--- a/web/src/components/WorkspaceSetting.tsx
+++ b/web/src/components/WorkspaceSetting.tsx
@@ -9,6 +9,7 @@ import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspa
 import { showCommonDialog } from "./Alert";
 import toastHelper from "./Toast";
 import CreateWorkspaceDialog from "./CreateWorkspaceDialog";
+import Icon from "./Icon";
 
 interface Props {
   workspaceId: WorkspaceId;
@@ -93,9 +94,11 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
             {workspaceUser.role === "ADMIN" ? (
               <>
                 <Button variant="soft" onClick={handleEditWorkspaceButtonClick}>
+                  <Icon.Edit className="w-4 h-auto mr-1" />
                   Edit
                 </Button>
                 <Button variant="soft" color="danger" onClick={handleDeleteWorkspaceButtonClick}>
+                  <Icon.Trash className="w-4 h-auto mr-1" />
                   Delete
                 </Button>
               </>
diff --git a/web/src/pages/Auth.tsx b/web/src/pages/Auth.tsx
index 5c2e1bc..30fcf38 100644
--- a/web/src/pages/Auth.tsx
+++ b/web/src/pages/Auth.tsx
@@ -76,7 +76,7 @@ const Auth: React.FC = () => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toastHelper.error(JSON.stringify(error.response.data));
     }
     actionBtnLoadingState.setFinish();
   };
@@ -111,7 +111,7 @@ const Auth: React.FC = () => {
       }
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toastHelper.error(JSON.stringify(error.response.data));
     }
     actionBtnLoadingState.setFinish();
   };
diff --git a/web/src/pages/UserDetail.tsx b/web/src/pages/UserDetail.tsx
index 5475852..ae06a43 100644
--- a/web/src/pages/UserDetail.tsx
+++ b/web/src/pages/UserDetail.tsx
@@ -1,4 +1,4 @@
-import { Button, Input } from "@mui/joy";
+import { Button, Input, Tooltip } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../store";
@@ -69,22 +69,24 @@ const UserDetail: React.FC = () => {
             <span className="mr-3 text-gray-500 font-mono">Email: </span>
             {user?.email}
           </p>
-          <p className="leading-8 flex flex-row justify-start items-center">
+          <div className="leading-8 flex flex-row justify-start items-center">
             <span className="mr-3 text-gray-500 font-mono">Password: </span>
             <Button variant="soft" onClick={handleChangePasswordBtnClick}>
               Change
             </Button>
-          </p>
-          <p className="leading-8 flex flex-row justify-start items-center">
+          </div>
+          <div className="leading-8 flex flex-row justify-start items-center">
             <span className="mr-3 text-gray-500 font-mono">OpenID:</span>
             <Input type="text" className="w-48" value={user?.openId} readOnly />
-            <button className="-ml-6 z-1 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
-              <Icon.Clipboard className="w-4 h-auto" />
-            </button>
+            <Tooltip title="Copy OpenID" variant="solid" placement="top">
+              <button className="-ml-6 z-1 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
+                <Icon.Clipboard className="w-4 h-auto" />
+              </button>
+            </Tooltip>
             <Button className="!ml-6" variant="soft" color="warning" onClick={handleResetOpenIdBtnClick}>
               Reset
             </Button>
-          </p>
+          </div>
         </div>
       </div>
       {state.showChangePasswordDialog && (