diff --git a/web/src/App.tsx b/web/src/App.tsx
index 7ddd805..800516f 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -33,7 +33,7 @@ function App() {
     userService.initialState().finally(() => {
       if (!userService.getState().user) {
         pageLoadingStatus.setFinish();
-        navigate("/auth");
+        navigate("/user/auth");
         return;
       }
 
@@ -47,9 +47,9 @@ function App() {
     <Only when={!pageLoadingStatus.isLoading}>
       <Routes>
         <Route index element={<Home />} />
-        <Route path="/auth" element={<Auth />} />
+        <Route path="/user/auth" element={<Auth />} />
         <Route path="/user/:userId" element={<UserDetail />} />
-        <Route path="/workspace/:workspaceId" element={<WorkspaceDetail />} />
+        <Route path="/:workspaceName" element={<WorkspaceDetail />} />
         <Route path="/:workspaceName/go/:shortcutName" element={<ShortcutRedirector />} />
       </Routes>
     </Only>
diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 98a77ab..0b86867 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -90,16 +90,16 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       } else {
         await shortcutService.createShortcut(state.shortcutCreate);
       }
+      destroy();
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toastHelper.error(error.response.data.error || error.response.data.message);
     }
-    destroy();
   };
 
   return (
     <>
-      <div className="max-w-full w-80 flex flex-row justify-between items-center mb-4">
+      <div className="max-w-full w-80 sm:w-96 flex flex-row justify-between items-center mb-4">
         <p className="text-base">{shortcutId ? "Edit Shortcut" : "Create Shortcut"}</p>
         <button className="rounded p-1 hover:bg-gray-100" onClick={destroy}>
           <Icon.X className="w-5 h-auto text-gray-600" />
diff --git a/web/src/components/CreateWorkspaceDialog.tsx b/web/src/components/CreateWorkspaceDialog.tsx
index 284fded..5aba668 100644
--- a/web/src/components/CreateWorkspaceDialog.tsx
+++ b/web/src/components/CreateWorkspaceDialog.tsx
@@ -74,11 +74,11 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
           ...state.workspaceCreate,
         });
       }
+      destroy();
     } catch (error: any) {
       console.error(error);
-      toastHelper.error(error.response.data.message);
+      toastHelper.error(error.response.data.error || error.response.data.message);
     }
-    destroy();
   };
 
   return (
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 697ccd9..4baf7f6 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useAppSelector } from "../store";
 import { userService } from "../services";
 import Icon from "./Icon";
@@ -10,44 +10,44 @@ const Header: React.FC = () => {
 
   const handleSignOutButtonClick = async () => {
     await userService.doSignOut();
-    navigate("/auth");
+    navigate("/user/auth");
   };
 
   return (
     <div className="w-full bg-amber-50">
       <div className="w-full max-w-4xl mx-auto px-3 py-4 flex flex-row justify-between items-center">
-        <span className="text-xl font-mono font-medium cursor-pointer" onClick={() => navigate("/")}>
+        <Link to={"/"} className="text-xl font-mono font-medium cursor-pointer">
           Corgi
-        </span>
+        </Link>
         <div className="relative">
           {user ? (
             <Dropdown
               trigger={
-                <div className="flex flex-row justify-end items-center cursor-pointer">
+                <button className="flex flex-row justify-end items-center cursor-pointer">
                   <span>{user?.name}</span>
                   <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
-                </div>
+                </button>
               }
               actions={
                 <>
-                  <span
-                    className="w-full px-3 leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
-                    onClick={() => navigate(`/user/${user?.id}`)}
+                  <Link
+                    to={`/user/${user?.id}`}
+                    className="w-full px-3 leading-8 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
                   >
                     My information
-                  </span>
-                  <span
-                    className="w-full px-3 leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                  </Link>
+                  <button
+                    className="w-full px-3 leading-8 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
                     onClick={() => handleSignOutButtonClick()}
                   >
                     Sign out
-                  </span>
+                  </button>
                 </>
               }
               actionsClassName="!w-36"
             ></Dropdown>
           ) : (
-            <span className="cursor-pointer" onClick={() => navigate("/auth")}>
+            <span className="cursor-pointer" onClick={() => navigate("/user/auth")}>
               Sign in
             </span>
           )}
diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx
index 620a79f..6e08156 100644
--- a/web/src/components/ShortcutListView.tsx
+++ b/web/src/components/ShortcutListView.tsx
@@ -1,5 +1,6 @@
 import copy from "copy-to-clipboard";
 import { shortcutService, workspaceService } from "../services";
+import { useAppSelector } from "../store";
 import Dropdown from "./common/Dropdown";
 import showCreateShortcutDialog from "./CreateShortcutDialog";
 import Icon from "./Icon";
@@ -11,6 +12,7 @@ interface Props {
 
 const ShortcutListView: React.FC<Props> = (props: Props) => {
   const { workspaceId, shortcutList } = props;
+  const { user } = useAppSelector((state) => state.user);
 
   const handleCopyButtonClick = (shortcut: Shortcut) => {
     const workspace = workspaceService.getWorkspaceById(workspaceId);
@@ -27,8 +29,8 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
         return (
           <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
             <div className="flex flex-row justify-start items-center mr-4">
-              <span className="font-medium">{shortcut.name}</span>
-              <span className="text-gray-500 ml-4">{shortcut.description}</span>
+              <span>{shortcut.name}</span>
+              <span className="text-gray-400 text-sm ml-2">({shortcut.description})</span>
             </div>
             <div className="flex flex-row justify-end items-center">
               <span
@@ -45,20 +47,22 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
               <Dropdown
                 actions={
                   <>
-                    <span
-                      className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100"
+                    <button
+                      disabled={shortcut.creatorId !== user?.id}
+                      className="w-full px-2 text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                       onClick={() => showCreateShortcutDialog(workspaceId, shortcut.id)}
                     >
                       Edit
-                    </span>
-                    <span
-                      className="w-full px-2 leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100"
+                    </button>
+                    <button
+                      disabled={shortcut.creatorId !== user?.id}
+                      className="w-full px-2 text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                       onClick={() => {
                         handleDeleteShortcutButtonClick(shortcut);
                       }}
                     >
                       Delete
-                    </span>
+                    </button>
                   </>
                 }
                 actionsClassName="!w-24"
diff --git a/web/src/components/WorkspaceListView.tsx b/web/src/components/WorkspaceListView.tsx
index 79269ea..0d7b5aa 100644
--- a/web/src/components/WorkspaceListView.tsx
+++ b/web/src/components/WorkspaceListView.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { workspaceService } from "../services";
 import Dropdown from "./common/Dropdown";
 import showCreateWorkspaceDialog from "./CreateWorkspaceDialog";
@@ -9,11 +9,6 @@ interface Props {
 
 const WorkspaceListView: React.FC<Props> = (props: Props) => {
   const { workspaceList } = props;
-  const navigate = useNavigate();
-
-  const gotoWorkspaceDetailPage = (workspace: Workspace) => {
-    navigate(`/workspace/${workspace.id}`);
-  };
 
   const handleDeleteWorkspaceButtonClick = (workspace: Workspace) => {
     workspaceService.deleteWorkspaceById(workspace.id);
@@ -25,10 +20,10 @@ const WorkspaceListView: React.FC<Props> = (props: Props) => {
         return (
           <div key={workspace.id} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
             <div className="flex flex-col justify-start items-start">
-              <span className="text-lg font-medium cursor-pointer hover:underline" onClick={() => gotoWorkspaceDetailPage(workspace)}>
+              <Link to={`/${workspace.name}`} className="text-lg font-medium cursor-pointer hover:underline">
                 {workspace.name}
-              </span>
-              <span className="text-base text-gray-600">{workspace.description}</span>
+              </Link>
+              <span className="text-sm mt-1 text-gray-600">{workspace.description}</span>
             </div>
             <Dropdown
               actions={
diff --git a/web/src/components/common/Dropdown.tsx b/web/src/components/common/Dropdown.tsx
index 598ea21..477e1fe 100644
--- a/web/src/components/common/Dropdown.tsx
+++ b/web/src/components/common/Dropdown.tsx
@@ -37,9 +37,9 @@ const Dropdown: React.FC<Props> = (props: Props) => {
       {trigger ? (
         trigger
       ) : (
-        <span className="flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 cursor-pointer hover:opacity-80">
+        <button className="flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 cursor-pointer hover:opacity-80">
           <Icon.MoreHorizontal className="w-4 h-auto" />
-        </span>
+        </button>
       )}
       <div
         className={`w-auto mt-1 absolute top-full right-0 flex flex-col justify-start items-start bg-white z-1 border p-1 rounded-md shadow ${
diff --git a/web/src/less/base-dialog.less b/web/src/less/base-dialog.less
index 5e659f8..b870dca 100644
--- a/web/src/less/base-dialog.less
+++ b/web/src/less/base-dialog.less
@@ -10,7 +10,7 @@
   }
 
   > .dialog-container {
-    @apply flex flex-col justify-start items-start bg-white p-4 rounded-lg;
+    @apply flex flex-col justify-start items-start bg-white p-4 sm:px-6 rounded-lg;
 
     > .dialog-header-container {
       @apply flex flex-row justify-between items-center w-full mb-4;
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 5d91142..1e17247 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -23,12 +23,12 @@ const Home: React.FC = () => {
       <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
         <div className="mb-4 w-full flex flex-row justify-between items-center">
           <span className="font-mono text-gray-400">Workspace List</span>
-          <div
+          <button
             className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
             onClick={() => showCreateWorkspaceDialog()}
           >
             <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
-          </div>
+          </button>
         </div>
         {loadingState.isLoading ? (
           <div className="py-4 w-full flex flex-row justify-center items-center">
diff --git a/web/src/pages/WorkspaceDetail.tsx b/web/src/pages/WorkspaceDetail.tsx
index 3b065a2..1e8a93d 100644
--- a/web/src/pages/WorkspaceDetail.tsx
+++ b/web/src/pages/WorkspaceDetail.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { shortcutService, workspaceService } from "../services";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
@@ -15,7 +15,6 @@ interface State {
 }
 
 const WorkspaceDetail: React.FC = () => {
-  const navigate = useNavigate();
   const params = useParams();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const [state, setState] = useState<State>({
@@ -24,7 +23,7 @@ const WorkspaceDetail: React.FC = () => {
   const loadingState = useLoading();
 
   useEffect(() => {
-    const workspace = workspaceService.getWorkspaceById(Number(params.workspaceId));
+    const workspace = workspaceService.getWorkspaceByName(params.workspaceName ?? "");
     if (!workspace) {
       toastHelper.error("workspace not found");
       return;
@@ -39,29 +38,25 @@ const WorkspaceDetail: React.FC = () => {
     });
   }, []);
 
-  const handleBackToHome = () => {
-    navigate("/");
-  };
-
   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">
         <div className="w-full flex flex-row justify-start items-center mb-4">
-          <span className="font-mono text-gray-600 cursor-pointer hover:underline" onClick={() => handleBackToHome()}>
+          <Link to={"/"} className="font-mono text-gray-600 cursor-pointer hover:underline">
             Home
-          </span>
+          </Link>
           <span className="font-mono text-gray-200 mx-4">/</span>
           <span className="font-mono text-gray-600">Workspace: {state?.workspace.name}</span>
         </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <span className="font-mono text-gray-400">Shortcut List</span>
-          <div
+          <button
             className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
             onClick={() => showCreateShortcutDialog(state.workspace.id)}
           >
             <Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
-          </div>
+          </button>
         </div>
         {loadingState.isLoading ? (
           <div className="py-4 w-full flex flex-row justify-center items-center">
diff --git a/web/src/services/workspaceService.ts b/web/src/services/workspaceService.ts
index 6afca53..6b8c207 100644
--- a/web/src/services/workspaceService.ts
+++ b/web/src/services/workspaceService.ts
@@ -22,6 +22,16 @@ const workspaceService = {
     return workspaces;
   },
 
+  getWorkspaceByName: (workspaceName: string) => {
+    const workspaceList = workspaceService.getState().workspaceList;
+    for (const workspace of workspaceList) {
+      if (workspace.name === workspaceName) {
+        return workspace;
+      }
+    }
+    return undefined;
+  },
+
   getWorkspaceById: (id: WorkspaceId) => {
     const workspaceList = workspaceService.getState().workspaceList;
     for (const workspace of workspaceList) {