diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index a1156097..72749b3f 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -8,7 +8,7 @@ import Selector from "./common/Selector";
 import "../less/create-shortcut-dialog.less";
 
 interface Props extends DialogProps {
-  shortcutId?: string;
+  shortcutId?: ShortcutId;
 }
 
 const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
@@ -23,12 +23,14 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
   }).length;
 
   useEffect(() => {
-    const shortcutTemp = shortcutService.getShortcutById(shortcutId ?? "");
-    if (shortcutTemp) {
-      setTitle(shortcutTemp.title);
-      const temp = JSON.parse(shortcutTemp.payload);
-      if (Array.isArray(temp)) {
-        setFilters(temp);
+    if (shortcutId) {
+      const shortcutTemp = shortcutService.getShortcutById(shortcutId);
+      if (shortcutTemp) {
+        setTitle(shortcutTemp.title);
+        const temp = JSON.parse(shortcutTemp.payload);
+        if (Array.isArray(temp)) {
+          setFilters(temp);
+        }
       }
     }
   }, [shortcutId]);
@@ -298,7 +300,7 @@ const FilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterInpute
 
 const MemoFilterInputer: React.FC<MemoFilterInputerProps> = memo(FilterInputer);
 
-export default function showCreateShortcutDialog(shortcutId?: string): void {
+export default function showCreateShortcutDialog(shortcutId?: ShortcutId): void {
   showDialog(
     {
       className: "create-shortcut-dialog",
diff --git a/web/src/components/ShortcutList.tsx b/web/src/components/ShortcutList.tsx
index 2de571cb..7b001a27 100644
--- a/web/src/components/ShortcutList.tsx
+++ b/web/src/components/ShortcutList.tsx
@@ -1,9 +1,10 @@
 import { useContext, useEffect } from "react";
 import { locationService, shortcutService } from "../services";
 import appContext from "../stores/appContext";
+import { UNKNOWN_ID } from "../helpers/consts";
+import utils from "../helpers/utils";
 import useToggle from "../hooks/useToggle";
 import useLoading from "../hooks/useLoading";
-import utils from "../helpers/utils";
 import toastHelper from "./Toast";
 import showCreateShortcutDialog from "./CreateShortcutDialog";
 import "../less/shortcut-list.less";
@@ -47,7 +48,7 @@ const ShortcutList: React.FC<Props> = () => {
       </p>
       <div className="shortcuts-container">
         {sortedShortcuts.map((s) => {
-          return <ShortcutContainer key={s.id} shortcut={s} isActive={s.id === shortcutId} />;
+          return <ShortcutContainer key={s.id} shortcut={s} isActive={s.id === Number(shortcutId)} />;
         })}
       </div>
     </div>
@@ -65,7 +66,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
 
   const handleShortcutClick = () => {
     if (isActive) {
-      locationService.setMemoShortcut("");
+      locationService.setMemoShortcut(UNKNOWN_ID);
     } else {
       if (!["/"].includes(locationService.getState().pathname)) {
         locationService.setPathname("/");
diff --git a/web/src/helpers/api.ts b/web/src/helpers/api.ts
index 18e519c0..7aff8de9 100644
--- a/web/src/helpers/api.ts
+++ b/web/src/helpers/api.ts
@@ -204,7 +204,7 @@ namespace api {
     });
   }
 
-  export function updateShortcut(shortcutId: string, title: string, payload: string) {
+  export function updateShortcut(shortcutId: ShortcutId, title: string, payload: string) {
     return request<Shortcut>({
       method: "PATCH",
       url: `/api/shortcut/${shortcutId}`,
@@ -215,14 +215,14 @@ namespace api {
     });
   }
 
-  export function deleteShortcutById(shortcutId: string) {
+  export function deleteShortcutById(shortcutId: ShortcutId) {
     return request({
       method: "DELETE",
       url: `/api/shortcut/${shortcutId}`,
     });
   }
 
-  export function pinShortcut(shortcutId: string) {
+  export function pinShortcut(shortcutId: ShortcutId) {
     return request({
       method: "PATCH",
       url: `/api/shortcut/${shortcutId}`,
@@ -232,7 +232,7 @@ namespace api {
     });
   }
 
-  export function unpinShortcut(shortcutId: string) {
+  export function unpinShortcut(shortcutId: ShortcutId) {
     return request({
       method: "PATCH",
       url: `/api/shortcut/${shortcutId}`,
diff --git a/web/src/services/locationService.ts b/web/src/services/locationService.ts
index 0138584d..6e4881f2 100644
--- a/web/src/services/locationService.ts
+++ b/web/src/services/locationService.ts
@@ -36,13 +36,12 @@ class LocationService {
         duration: null,
         text: "",
         type: "",
-        shortcutId: "",
       },
     };
     state.query.tag = urlParams.get("tag") ?? "";
     state.query.type = (urlParams.get("type") ?? "") as MemoSpecType;
     state.query.text = urlParams.get("text") ?? "";
-    state.query.shortcutId = urlParams.get("shortcutId") ?? "";
+    state.query.shortcutId = Number(urlParams.get("shortcutId")) ?? undefined;
     const from = parseInt(urlParams.get("from") ?? "0");
     const to = parseInt(urlParams.get("to") ?? "0");
     if (to > from && to !== 0) {
@@ -71,7 +70,6 @@ class LocationService {
         duration: null,
         text: "",
         type: "",
-        shortcutId: "",
       },
     });
 
@@ -142,7 +140,7 @@ class LocationService {
     updateLocationUrl();
   };
 
-  public setMemoShortcut = (shortcutId: string) => {
+  public setMemoShortcut = (shortcutId?: ShortcutId) => {
     appStore.dispatch({
       type: "SET_SHORTCUT_ID",
       payload: shortcutId,
diff --git a/web/src/services/shortcutService.ts b/web/src/services/shortcutService.ts
index 96b9156c..017eb015 100644
--- a/web/src/services/shortcutService.ts
+++ b/web/src/services/shortcutService.ts
@@ -1,6 +1,7 @@
 import userService from "./userService";
 import api from "../helpers/api";
 import appStore from "../stores/appStore";
+import { UNKNOWN_ID } from "../helpers/consts";
 
 class ShortcutService {
   public getState() {
@@ -22,10 +23,14 @@ class ShortcutService {
     return data;
   }
 
-  public getShortcutById(id: string) {
-    for (const q of this.getState().shortcuts) {
-      if (q.id === id) {
-        return q;
+  public getShortcutById(id: ShortcutId) {
+    if (id === UNKNOWN_ID) {
+      return null;
+    }
+
+    for (const s of this.getState().shortcuts) {
+      if (s.id === id) {
+        return s;
       }
     }
 
@@ -50,7 +55,7 @@ class ShortcutService {
     });
   }
 
-  public async deleteShortcut(shortcutId: string) {
+  public async deleteShortcut(shortcutId: ShortcutId) {
     await api.deleteShortcutById(shortcutId);
     appStore.dispatch({
       type: "DELETE_SHORTCUT_BY_ID",
@@ -60,21 +65,21 @@ class ShortcutService {
     });
   }
 
-  public async createShortcut(title: string, shortcutstring: string) {
-    const data = await api.createShortcut(title, shortcutstring);
+  public async createShortcut(title: string, payload: string) {
+    const data = await api.createShortcut(title, payload);
     return data;
   }
 
-  public async updateShortcut(shortcutId: string, title: string, shortcutstring: string) {
-    const data = await api.updateShortcut(shortcutId, title, shortcutstring);
+  public async updateShortcut(shortcutId: ShortcutId, title: string, payload: string) {
+    const data = await api.updateShortcut(shortcutId, title, payload);
     return data;
   }
 
-  public async pinShortcut(shortcutId: string) {
+  public async pinShortcut(shortcutId: ShortcutId) {
     await api.pinShortcut(shortcutId);
   }
 
-  public async unpinShortcut(shortcutId: string) {
+  public async unpinShortcut(shortcutId: ShortcutId) {
     await api.unpinShortcut(shortcutId);
   }
 
diff --git a/web/src/stores/locationStore.ts b/web/src/stores/locationStore.ts
index 6cbeb029..46e5f6d5 100644
--- a/web/src/stores/locationStore.ts
+++ b/web/src/stores/locationStore.ts
@@ -19,7 +19,7 @@ interface SetQueryAction {
 
 interface SetShortcutIdAction {
   type: "SET_SHORTCUT_ID";
-  payload: string;
+  payload: ShortcutId | undefined;
 }
 
 interface SetTagQueryAction {
@@ -183,6 +183,5 @@ export const defaultState: State = {
     duration: null,
     type: "",
     text: "",
-    shortcutId: "",
   },
 };
diff --git a/web/src/stores/shortcutStore.ts b/web/src/stores/shortcutStore.ts
index 1a9b6187..30e6754e 100644
--- a/web/src/stores/shortcutStore.ts
+++ b/web/src/stores/shortcutStore.ts
@@ -21,7 +21,7 @@ interface InsertShortcutAction {
 interface DeleteShortcutByIdAction {
   type: "DELETE_SHORTCUT_BY_ID";
   payload: {
-    id: string;
+    id: ShortcutId;
   };
 }
 
diff --git a/web/src/types/location.d.ts b/web/src/types/location.d.ts
index d7ffeea1..4f4b30a4 100644
--- a/web/src/types/location.d.ts
+++ b/web/src/types/location.d.ts
@@ -8,7 +8,7 @@ interface Query {
   duration: Duration | null;
   type: MemoSpecType | "";
   text: string;
-  shortcutId: string;
+  shortcutId?: ShortcutId;
 }
 
 type AppRouter = "/" | "/signin";
diff --git a/web/src/types/modules/shortcut.d.ts b/web/src/types/modules/shortcut.d.ts
index 06b89a62..bfaac285 100644
--- a/web/src/types/modules/shortcut.d.ts
+++ b/web/src/types/modules/shortcut.d.ts
@@ -1,7 +1,7 @@
 type ShortcutId = number;
 
 interface Shortcut {
-  id: string;
+  id: ShortcutId;
 
   rowStatus: RowStatus;
   createdTs: TimeStamp;