diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 0b86867..26dc81a 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -176,7 +176,9 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
         </div>
         <div className="w-full flex flex-row justify-end items-center">
           <button
-            className={`rounded px-3 py-2 shadow bg-green-600 text-white hover:bg-green-700 ${requestState.isLoading ? "opacity-80" : ""}`}
+            className={`rounded px-3 leading-9 shadow bg-green-600 text-white hover:bg-green-700 ${
+              requestState.isLoading ? "opacity-80" : ""
+            }`}
             onClick={handleSaveBtnClick}
           >
             Save
diff --git a/web/src/components/CreateWorkspaceDialog.tsx b/web/src/components/CreateWorkspaceDialog.tsx
index 8edaa8d..2044cf3 100644
--- a/web/src/components/CreateWorkspaceDialog.tsx
+++ b/web/src/components/CreateWorkspaceDialog.tsx
@@ -113,7 +113,9 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
         <div className="w-full flex flex-row justify-end items-center">
           <button
             disabled={requestState.isLoading}
-            className={`rounded px-3 py-2 shadow bg-green-600 text-white hover:bg-green-700 ${requestState.isLoading ? "opacity-80" : ""}`}
+            className={`rounded px-3 leading-9 shadow bg-green-600 text-white hover:bg-green-700 ${
+              requestState.isLoading ? "opacity-80" : ""
+            }`}
             onClick={handleSaveBtnClick}
           >
             Save
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 51cff35..18ca447 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -31,7 +31,7 @@ const Home: React.FC = () => {
         <div className="mb-4 w-full flex flex-row justify-between items-center">
           <span className="font-mono text-gray-400">Workspace List</span>
           <button
-            className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
+            className="text-sm flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow"
             onClick={() => showCreateWorkspaceDialog()}
           >
             <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
diff --git a/web/src/pages/UserDetail.tsx b/web/src/pages/UserDetail.tsx
index ac8a9b9..9b6f512 100644
--- a/web/src/pages/UserDetail.tsx
+++ b/web/src/pages/UserDetail.tsx
@@ -51,26 +51,26 @@ const UserDetail: React.FC = () => {
   return (
     <div className="w-full h-full flex flex-col justify-start items-start">
       <Header />
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-3">
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
         <p className="text-3xl mt-2 mb-4">{user?.name}</p>
-        <p className="leading-10 flex flex-row justify-start items-center">
+        <p className="leading-8 flex flex-row justify-start items-center">
           <span className="mr-3 text-gray-500 font-mono">Email: </span>
           {user?.email}
         </p>
-        <p className="leading-10 flex flex-row justify-start items-center">
+        <p className="leading-8 flex flex-row justify-start items-center">
           <span className="mr-3 text-gray-500 font-mono">Password: </span>
-          <button className="border rounded-md px-3 hover:shadow" onClick={handleChangePasswordBtnClick}>
+          <button className="border rounded-md px-2 leading-8 hover:shadow" onClick={handleChangePasswordBtnClick}>
             Change
           </button>
         </p>
-        <p className="leading-10 flex flex-row justify-start items-center">
+        <p className="leading-8 flex flex-row justify-start items-center">
           <span className="mr-3 text-gray-500 font-mono">OpenID:</span>
-          <input type="text" value={user?.openId} readOnly className="border rounded-md px-3 pr-5 shadow-inner truncate" />
+          <input type="text" value={user?.openId} readOnly className="border shrink rounded-md px-3 pr-5 shadow-inner truncate" />
           <button className="-ml-6 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
             <Icon.Clipboard className="w-4 h-auto" />
           </button>
           <button
-            className="border ml-4 rounded-md px-3 border-red-600 text-red-600 bg-red-50 hover:shadow"
+            className="border ml-4 rounded-md px-2 leading-8 border-red-600 text-red-600 bg-red-50 hover:shadow"
             onClick={handleResetOpenIdBtnClick}
           >
             Reset
diff --git a/web/src/pages/WorkspaceDetail.tsx b/web/src/pages/WorkspaceDetail.tsx
index 28fe062..79c13bc 100644
--- a/web/src/pages/WorkspaceDetail.tsx
+++ b/web/src/pages/WorkspaceDetail.tsx
@@ -52,10 +52,10 @@ const WorkspaceDetail: React.FC = () => {
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <span className="font-mono text-gray-400">Shortcut List</span>
           <button
-            className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
+            className="text-sm flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow"
             onClick={() => showCreateShortcutDialog(state.workspace.id)}
           >
-            <Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
+            <Icon.Plus className="w-4 h-auto mr-1" /> Create Shortcut
           </button>
         </div>
         {loadingState.isLoading ? (