diff --git a/frontend/web/src/components/CollectionView.tsx b/frontend/web/src/components/CollectionView.tsx
index 9010bab..ebf3e6c 100644
--- a/frontend/web/src/components/CollectionView.tsx
+++ b/frontend/web/src/components/CollectionView.tsx
@@ -11,7 +11,7 @@ import { useAppSelector } from "@/stores";
 import useCollectionStore from "@/stores/v1/collection";
 import { Collection } from "@/types/proto/api/v2/collection_service";
 import { showCommonDialog } from "./Alert";
-import CreateCollectionDialog from "./CreateCollectionDialog";
+import CreateCollectionDialog from "./CreateCollectionDrawer";
 import Icon from "./Icon";
 import ShortcutView from "./ShortcutView";
 import Dropdown from "./common/Dropdown";
diff --git a/frontend/web/src/components/CreateCollectionDialog.tsx b/frontend/web/src/components/CreateCollectionDrawer.tsx
similarity index 88%
rename from frontend/web/src/components/CreateCollectionDialog.tsx
rename to frontend/web/src/components/CreateCollectionDrawer.tsx
index 10b9645..d74573e 100644
--- a/frontend/web/src/components/CreateCollectionDialog.tsx
+++ b/frontend/web/src/components/CreateCollectionDrawer.tsx
@@ -1,4 +1,4 @@
-import { Button, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy";
+import { Button, DialogActions, DialogContent, DialogTitle, Drawer, Input, ModalClose, Radio, RadioGroup } from "@mui/joy";
 import { isUndefined } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -22,7 +22,7 @@ interface State {
   collectionCreate: Collection;
 }
 
-const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
+const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
   const { onClose, onConfirm, collectionId } = props;
   const { t } = useTranslation();
   const collectionStore = useCollectionStore();
@@ -141,15 +141,11 @@ const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <Modal open={true}>
-      <ModalDialog>
-        <div className="w-full flex flex-row justify-between items-center">
-          <span className="text-lg font-medium">{isCreating ? "Create Collection" : "Edit Collection"}</span>
-          <Button variant="plain" onClick={onClose}>
-            <Icon.X className="w-5 h-auto text-gray-600" />
-          </Button>
-        </div>
-        <div className="overflow-y-auto overflow-x-hidden w-80 sm:w-96 max-w-full">
+    <Drawer anchor="right" open={true} onClose={onClose}>
+      <DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
+      <ModalClose />
+      <DialogContent className="max-w-full sm:max-w-sm">
+        <div className="overflow-y-auto w-full mt-2 px-3">
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Name <span className="text-red-600">*</span>
@@ -241,19 +237,20 @@ const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
               )}
             </div>
           </div>
-
-          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
-            <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
-              {t("common.save")}
-            </Button>
-          </div>
         </div>
-      </ModalDialog>
-    </Modal>
+      </DialogContent>
+      <DialogActions>
+        <div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
+          <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+            {t("common.save")}
+          </Button>
+        </div>
+      </DialogActions>
+    </Drawer>
   );
 };
 
-export default CreateCollectionDialog;
+export default CreateCollectionDrawer;
diff --git a/frontend/web/src/components/CreateShortcutDialog.tsx b/frontend/web/src/components/CreateShortcutDrawer.tsx
similarity index 92%
rename from frontend/web/src/components/CreateShortcutDialog.tsx
rename to frontend/web/src/components/CreateShortcutDrawer.tsx
index 5bbe542..7374ab4 100644
--- a/frontend/web/src/components/CreateShortcutDialog.tsx
+++ b/frontend/web/src/components/CreateShortcutDrawer.tsx
@@ -1,4 +1,16 @@
-import { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup, Textarea } from "@mui/joy";
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  Drawer,
+  Input,
+  ModalClose,
+  Radio,
+  RadioGroup,
+  Textarea,
+} from "@mui/joy";
 import classnames from "classnames";
 import { isUndefined, uniq } from "lodash-es";
 import { useEffect, useState } from "react";
@@ -22,7 +34,7 @@ interface State {
 
 const visibilities: Visibility[] = ["PRIVATE", "WORKSPACE", "PUBLIC"];
 
-const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
+const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
   const { onClose, onConfirm, shortcutId, initialShortcut } = props;
   const { t } = useTranslation();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
@@ -199,15 +211,11 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <Modal open={true}>
-      <ModalDialog>
-        <div className="flex flex-row justify-between items-center w-80 sm:w-96">
-          <span className="text-lg font-medium">{isCreating ? "Create Shortcut" : "Edit Shortcut"}</span>
-          <Button variant="plain" onClick={onClose}>
-            <Icon.X className="w-5 h-auto text-gray-600" />
-          </Button>
-        </div>
-        <div className="overflow-y-auto overflow-x-hidden">
+    <Drawer anchor="right" open={true} onClose={onClose}>
+      <DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
+      <ModalClose />
+      <DialogContent className="max-w-full sm:max-w-sm">
+        <div className="overflow-y-auto w-full mt-2 px-3">
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Name <span className="text-red-600">*</span>
@@ -362,19 +370,20 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
               </div>
             )}
           </div>
-
-          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
-            <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
-              {t("common.save")}
-            </Button>
-          </div>
         </div>
-      </ModalDialog>
-    </Modal>
+      </DialogContent>
+      <DialogActions>
+        <div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
+          <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+            {t("common.save")}
+          </Button>
+        </div>
+      </DialogActions>
+    </Drawer>
   );
 };
 
-export default CreateShortcutDialog;
+export default CreateShortcutDrawer;
diff --git a/frontend/web/src/components/ShortcutActionsDropdown.tsx b/frontend/web/src/components/ShortcutActionsDropdown.tsx
index 57d23d7..9d3801a 100644
--- a/frontend/web/src/components/ShortcutActionsDropdown.tsx
+++ b/frontend/web/src/components/ShortcutActionsDropdown.tsx
@@ -4,7 +4,7 @@ import useNavigateTo from "@/hooks/useNavigateTo";
 import { shortcutService } from "../services";
 import useUserStore from "../stores/v1/user";
 import { showCommonDialog } from "./Alert";
-import CreateShortcutDialog from "./CreateShortcutDialog";
+import CreateShortcutDrawer from "./CreateShortcutDrawer";
 import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
@@ -18,7 +18,7 @@ const ShortcutActionsDropdown = (props: Props) => {
   const { t } = useTranslation();
   const navigateTo = useNavigateTo();
   const currentUser = useUserStore().getCurrentUser();
-  const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
+  const [showEditDrawer, setShowEditDrawer] = useState<boolean>(false);
   const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
   const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
 
@@ -46,7 +46,7 @@ const ShortcutActionsDropdown = (props: Props) => {
             {havePermission && (
               <button
                 className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
-                onClick={() => setShowEditDialog(true)}
+                onClick={() => setShowEditDrawer(true)}
               >
                 <Icon.Edit className="w-4 h-auto mr-2" /> {t("common.edit")}
               </button>
@@ -77,11 +77,11 @@ const ShortcutActionsDropdown = (props: Props) => {
         }
       ></Dropdown>
 
-      {showEditDialog && (
-        <CreateShortcutDialog
+      {showEditDrawer && (
+        <CreateShortcutDrawer
           shortcutId={shortcut.id}
-          onClose={() => setShowEditDialog(false)}
-          onConfirm={() => setShowEditDialog(false)}
+          onClose={() => setShowEditDrawer(false)}
+          onConfirm={() => setShowEditDrawer(false)}
         />
       )}
 
diff --git a/frontend/web/src/components/ShortcutsContainer.tsx b/frontend/web/src/components/ShortcutsContainer.tsx
index 85755e7..eaccedd 100644
--- a/frontend/web/src/components/ShortcutsContainer.tsx
+++ b/frontend/web/src/components/ShortcutsContainer.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { absolutifyLink } from "@/helpers/utils";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import useViewStore from "../stores/v1/view";
 import ShortcutCard from "./ShortcutCard";
 import ShortcutView from "./ShortcutView";
@@ -10,12 +10,13 @@ interface Props {
 
 const ShortcutsContainer: React.FC<Props> = (props: Props) => {
   const { shortcutList } = props;
+  const navigateTo = useNavigateTo();
   const viewStore = useViewStore();
   const displayStyle = viewStore.displayStyle || "full";
   const ShortcutItemView = viewStore.displayStyle === "compact" ? ShortcutView : ShortcutCard;
 
   const handleShortcutClick = (shortcut: Shortcut) => {
-    window.open(absolutifyLink(`/s/${shortcut.name}`));
+    navigateTo(`/shortcut/${shortcut.id}`);
   };
 
   return (
diff --git a/frontend/web/src/components/ViewSetting.tsx b/frontend/web/src/components/ViewSetting.tsx
index 7d60858..c4144d9 100644
--- a/frontend/web/src/components/ViewSetting.tsx
+++ b/frontend/web/src/components/ViewSetting.tsx
@@ -18,7 +18,7 @@ const ViewSetting = () => {
           <Icon.Settings2 className="w-4 h-auto text-gray-500" />
         </button>
       }
-      actionsClassName="!mt-3 !-right-2"
+      actionsClassName="!mt-3 !right-[unset] -left-24 -ml-2"
       actions={
         <div className="w-52 p-2 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
           <div className="w-full flex flex-row justify-between items-center">
diff --git a/frontend/web/src/css/joy-ui.css b/frontend/web/src/css/joy-ui.css
new file mode 100644
index 0000000..f37fc96
--- /dev/null
+++ b/frontend/web/src/css/joy-ui.css
@@ -0,0 +1,3 @@
+.MuiDrawer-content {
+  @apply !w-auto;
+}
diff --git a/frontend/web/src/main.tsx b/frontend/web/src/main.tsx
index a91dd4e..c9f54c9 100644
--- a/frontend/web/src/main.tsx
+++ b/frontend/web/src/main.tsx
@@ -4,6 +4,7 @@ import { Toaster } from "react-hot-toast";
 import { Provider } from "react-redux";
 import { RouterProvider } from "react-router-dom";
 import "./css/index.css";
+import "./css/joy-ui.css";
 import "./i18n";
 import router from "./routers";
 import store from "./stores";
diff --git a/frontend/web/src/pages/CollectionDashboard.tsx b/frontend/web/src/pages/CollectionDashboard.tsx
index c1ec805..1ad6081 100644
--- a/frontend/web/src/pages/CollectionDashboard.tsx
+++ b/frontend/web/src/pages/CollectionDashboard.tsx
@@ -2,7 +2,7 @@ import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CollectionView from "@/components/CollectionView";
-import CreateCollectionDialog from "@/components/CreateCollectionDialog";
+import CreateCollectionDrawer from "@/components/CreateCollectionDrawer";
 import { shortcutService } from "@/services";
 import useCollectionStore from "@/stores/v1/collection";
 import FilterView from "../components/FilterView";
@@ -10,7 +10,7 @@ import Icon from "../components/Icon";
 import useLoading from "../hooks/useLoading";
 
 interface State {
-  showCreateCollectionDialog: boolean;
+  showCreateCollectionDrawer: boolean;
 }
 
 const CollectionDashboard: React.FC = () => {
@@ -19,7 +19,7 @@ const CollectionDashboard: React.FC = () => {
   const collectionStore = useCollectionStore();
   const collections = collectionStore.getCollectionList();
   const [state, setState] = useState<State>({
-    showCreateCollectionDialog: false,
+    showCreateCollectionDrawer: false,
   });
 
   useEffect(() => {
@@ -28,10 +28,10 @@ const CollectionDashboard: React.FC = () => {
     });
   }, []);
 
-  const setShowCreateCollectionDialog = (show: boolean) => {
+  const setShowCreateCollectionDrawer = (show: boolean) => {
     setState({
       ...state,
-      showCreateCollectionDialog: show,
+      showCreateCollectionDrawer: show,
     });
   };
 
@@ -52,8 +52,9 @@ const CollectionDashboard: React.FC = () => {
           </div>
         </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
+          <div></div>
           <div className="flex flex-row justify-start items-center">
-            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateCollectionDialog(true)}>
+            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateCollectionDrawer(true)}>
               <Icon.Plus className="w-5 h-auto" />
               <span className="ml-0.5">{t("common.create")}</span>
             </Button>
@@ -79,10 +80,10 @@ const CollectionDashboard: React.FC = () => {
         )}
       </div>
 
-      {state.showCreateCollectionDialog && (
-        <CreateCollectionDialog
-          onClose={() => setShowCreateCollectionDialog(false)}
-          onConfirm={() => setShowCreateCollectionDialog(false)}
+      {state.showCreateCollectionDrawer && (
+        <CreateCollectionDrawer
+          onClose={() => setShowCreateCollectionDrawer(false)}
+          onConfirm={() => setShowCreateCollectionDrawer(false)}
         />
       )}
     </>
diff --git a/frontend/web/src/pages/Home.tsx b/frontend/web/src/pages/Home.tsx
index 85397d3..00dc7c6 100644
--- a/frontend/web/src/pages/Home.tsx
+++ b/frontend/web/src/pages/Home.tsx
@@ -1,7 +1,7 @@
 import { Button, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import CreateShortcutDialog from "../components/CreateShortcutDialog";
+import CreateShortcutDrawer from "../components/CreateShortcutDrawer";
 import FilterView from "../components/FilterView";
 import Icon from "../components/Icon";
 import ShortcutsContainer from "../components/ShortcutsContainer";
@@ -14,7 +14,7 @@ import useUserStore from "../stores/v1/user";
 import useViewStore, { getFilteredShortcutList, getOrderedShortcutList } from "../stores/v1/view";
 
 interface State {
-  showCreateShortcutDialog: boolean;
+  showCreateShortcutDrawer: boolean;
 }
 
 const Home: React.FC = () => {
@@ -24,7 +24,7 @@ const Home: React.FC = () => {
   const viewStore = useViewStore();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const [state, setState] = useState<State>({
-    showCreateShortcutDialog: false,
+    showCreateShortcutDrawer: false,
   });
   const filter = viewStore.filter;
   const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
@@ -36,10 +36,10 @@ const Home: React.FC = () => {
     });
   }, []);
 
-  const setShowCreateShortcutDialog = (show: boolean) => {
+  const setShowCreateShortcutDrawer = (show: boolean) => {
     setState({
       ...state,
-      showCreateShortcutDialog: show,
+      showCreateShortcutDrawer: show,
     });
   };
 
@@ -49,14 +49,8 @@ const Home: React.FC = () => {
         <ShortcutsNavigator />
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
-            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
-              <Icon.Plus className="w-5 h-auto" />
-              <span className="hidden sm:block ml-0.5">{t("common.create")}</span>
-            </Button>
-          </div>
-          <div className="flex flex-row justify-end items-center">
             <Input
-              className="w-32 ml-2"
+              className="w-32 mr-2"
               type="text"
               size="sm"
               placeholder={t("common.search")}
@@ -66,6 +60,12 @@ const Home: React.FC = () => {
               onChange={(e) => viewStore.setFilter({ search: e.target.value })}
             />
           </div>
+          <div className="flex flex-row justify-end items-center">
+            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDrawer(true)}>
+              <Icon.Plus className="w-5 h-auto" />
+              <span className="hidden sm:block ml-0.5">{t("common.create")}</span>
+            </Button>
+          </div>
         </div>
         <FilterView />
         {loadingState.isLoading ? (
@@ -83,8 +83,8 @@ const Home: React.FC = () => {
         )}
       </div>
 
-      {state.showCreateShortcutDialog && (
-        <CreateShortcutDialog onClose={() => setShowCreateShortcutDialog(false)} onConfirm={() => setShowCreateShortcutDialog(false)} />
+      {state.showCreateShortcutDrawer && (
+        <CreateShortcutDrawer onClose={() => setShowCreateShortcutDrawer(false)} onConfirm={() => setShowCreateShortcutDrawer(false)} />
       )}
     </>
   );
diff --git a/frontend/web/src/pages/NotFound.tsx b/frontend/web/src/pages/NotFound.tsx
index 9ebb1df..120b2fb 100644
--- a/frontend/web/src/pages/NotFound.tsx
+++ b/frontend/web/src/pages/NotFound.tsx
@@ -1,61 +1,13 @@
-import { Button } from "@mui/joy";
-import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
-import CreateShortcutDialog from "@/components/CreateShortcutDialog";
 import Icon from "@/components/Icon";
-import useNavigateTo from "@/hooks/useNavigateTo";
-import useUserStore from "@/stores/v1/user";
-
-interface State {
-  showCreateShortcutButton: boolean;
-}
 
 const NotFound = () => {
-  const location = useLocation();
-  const navigateTo = useNavigateTo();
-  const currentUser = useUserStore().getCurrentUser();
-  const [state, setState] = useState<State>({
-    showCreateShortcutButton: false,
-  });
-  const [showCreateShortcutDialog, setShowCreateShortcutDialog] = useState(false);
-  const params = new URLSearchParams(location.search);
-
-  useEffect(() => {
-    const shortcut = params.get("shortcut");
-    if (currentUser && shortcut) {
-      setState({
-        ...state,
-        showCreateShortcutButton: true,
-      });
-    }
-  }, []);
-
   return (
-    <>
-      <div className="w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
-        <div className="w-full h-full flex flex-col justify-center items-center">
-          <Icon.Meh strokeWidth={1} className="w-20 h-auto opacity-80 dark:text-gray-300" />
-          <p className="mt-4 mb-8 text-4xl font-mono dark:text-gray-300">404</p>
-          {state.showCreateShortcutButton && (
-            <Button
-              variant="outlined"
-              startDecorator={<Icon.Plus className="w-5 h-auto" />}
-              onClick={() => setShowCreateShortcutDialog(true)}
-            >
-              Create shortcut
-            </Button>
-          )}
-        </div>
+    <div className="w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
+      <div className="w-full h-full flex flex-col justify-center items-center">
+        <Icon.Meh strokeWidth={1} className="w-20 h-auto opacity-80 dark:text-gray-300" />
+        <p className="mt-4 mb-8 text-4xl font-mono dark:text-gray-300">404</p>
       </div>
-
-      {showCreateShortcutDialog && (
-        <CreateShortcutDialog
-          initialShortcut={{ name: params.get("shortcut") || "" }}
-          onClose={() => setShowCreateShortcutDialog(false)}
-          onConfirm={() => navigateTo("/")}
-        />
-      )}
-    </>
+    </div>
   );
 };
 
diff --git a/frontend/web/src/pages/ShortcutDetail.tsx b/frontend/web/src/pages/ShortcutDetail.tsx
index bef7e0c..d36e2e9 100644
--- a/frontend/web/src/pages/ShortcutDetail.tsx
+++ b/frontend/web/src/pages/ShortcutDetail.tsx
@@ -8,7 +8,7 @@ import { useLoaderData } from "react-router-dom";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { showCommonDialog } from "../components/Alert";
 import AnalyticsView from "../components/AnalyticsView";
-import CreateShortcutDialog from "../components/CreateShortcutDialog";
+import CreateShortcutDrawer from "../components/CreateShortcutDrawer";
 import GenerateQRCodeDialog from "../components/GenerateQRCodeDialog";
 import Icon from "../components/Icon";
 import VisibilityIcon from "../components/VisibilityIcon";
@@ -18,7 +18,7 @@ import { shortcutService } from "../services";
 import useUserStore from "../stores/v1/user";
 
 interface State {
-  showEditModal: boolean;
+  showEditDrawer: boolean;
 }
 
 const ShortcutDetail = () => {
@@ -28,7 +28,7 @@ const ShortcutDetail = () => {
   const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut;
   const currentUser = useUserStore().getCurrentUser();
   const [state, setState] = useState<State>({
-    showEditModal: false,
+    showEditDrawer: false,
   });
   const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
   const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
@@ -116,7 +116,7 @@ const ShortcutDetail = () => {
                     onClick={() => {
                       setState({
                         ...state,
-                        showEditModal: true,
+                        showEditDrawer: true,
                       });
                     }}
                   >
@@ -178,13 +178,13 @@ const ShortcutDetail = () => {
 
       {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
 
-      {state.showEditModal && (
-        <CreateShortcutDialog
+      {state.showEditDrawer && (
+        <CreateShortcutDrawer
           shortcutId={shortcut.id}
           onClose={() =>
             setState({
               ...state,
-              showEditModal: false,
+              showEditDrawer: false,
             })
           }
         />