diff --git a/web/src/components/DemoBanner.tsx b/web/src/components/DemoBanner.tsx
index a648ae1..366e1d3 100644
--- a/web/src/components/DemoBanner.tsx
+++ b/web/src/components/DemoBanner.tsx
@@ -13,7 +13,7 @@ const DemoBanner: React.FC = () => {
 
   return (
     <div className="z-10 relative flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
-      <div className="w-full max-w-6xl px-4 flex flex-row justify-between items-center gap-x-3">
+      <div className="w-full max-w-6xl px-4 md:px-12 flex flex-row justify-between items-center gap-x-3">
         <span>✨Slash - An open source, self-hosted bookmarks and link sharing platform</span>
         <a
           className="shadow flex flex-row justify-center items-center px-2 py-1 rounded-md text-sm sm:text-base text-white bg-blue-600 hover:bg-blue-700"
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 2312005..1ca0376 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -19,7 +19,7 @@ const Header: React.FC = () => {
   return (
     <>
       <div className="w-full bg-gray-50 border-b border-b-gray-200">
-        <div className="w-full max-w-6xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
+        <div className="w-full max-w-6xl mx-auto px-3 md:px-12 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="/logo.png" className="w-8 h-auto mr-2" alt="" />
diff --git a/web/src/components/setting/AccountSection.tsx b/web/src/components/setting/AccountSection.tsx
index 1b4e27a..fb17d01 100644
--- a/web/src/components/setting/AccountSection.tsx
+++ b/web/src/components/setting/AccountSection.tsx
@@ -12,7 +12,7 @@ const AccountSection: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start gap-y-2">
+      <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-2">
         <p className="text-base font-semibold leading-6 text-gray-900">Account</p>
         <p className="flex flex-row justify-start items-center mt-2">
           <span className="text-xl">{currentUser.nickname}</span>
diff --git a/web/src/components/setting/UserSection.tsx b/web/src/components/setting/UserSection.tsx
index fc11391..717d4f8 100644
--- a/web/src/components/setting/UserSection.tsx
+++ b/web/src/components/setting/UserSection.tsx
@@ -20,7 +20,7 @@ const MemberSection = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+      <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start space-y-4">
         <div className="w-full">
           <div className="sm:flex sm:items-center">
             <div className="sm:flex-auto">
diff --git a/web/src/components/setting/WorkspaceSection.tsx b/web/src/components/setting/WorkspaceSection.tsx
index d05c4f1..c8affbd 100644
--- a/web/src/components/setting/WorkspaceSection.tsx
+++ b/web/src/components/setting/WorkspaceSection.tsx
@@ -17,7 +17,7 @@ const WorkspaceSection: React.FC = () => {
   };
 
   return (
-    <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+    <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start space-y-4">
       <p className="text-base font-semibold leading-6 text-gray-900">Workspace settings</p>
       <div className="w-full flex flex-col justify-start items-start">
         <Checkbox
diff --git a/web/src/pages/Account.tsx b/web/src/pages/Account.tsx
index 14453a8..48985e5 100644
--- a/web/src/pages/Account.tsx
+++ b/web/src/pages/Account.tsx
@@ -11,7 +11,7 @@ const Account: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+      <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start space-y-4">
         <p className="text-3xl my-2">{currentUser.nickname}</p>
         <p className="leading-8 flex flex-row justify-start items-center">
           <span className="mr-3 text-gray-500 font-mono">Email: </span>
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 961e718..4721075 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -43,7 +43,7 @@ const Home: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-6xl w-full px-3 pt-4 pb-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-6xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
         <Navigator />
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx
index ca3bb34..265e025 100644
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -8,7 +8,7 @@ const Setting: React.FC = () => {
   const isAdmin = currentUser.role === "ADMIN";
 
   return (
-    <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+    <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start space-y-4">
       <AccountSection />
       {isAdmin && (
         <>
diff --git a/web/src/pages/ShortcutDetail.tsx b/web/src/pages/ShortcutDetail.tsx
index 7d55ca0..ba1ed30 100644
--- a/web/src/pages/ShortcutDetail.tsx
+++ b/web/src/pages/ShortcutDetail.tsx
@@ -3,7 +3,7 @@ import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useLoaderData } from "react-router-dom";
+import { useLoaderData, useNavigate } from "react-router-dom";
 import { showCommonDialog } from "../components/Alert";
 import AnalyticsDialog from "../components/AnalyticsDialog";
 import Dropdown from "../components/common/Dropdown";
@@ -22,6 +22,7 @@ interface State {
 
 const ShortcutDetail = () => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const shortcutId = (useLoaderData() as Shortcut).id;
   const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut;
   const currentUser = useUserStore().getCurrentUser();
@@ -55,13 +56,16 @@ const ShortcutDetail = () => {
       style: "danger",
       onConfirm: async () => {
         await shortcutService.deleteShortcutById(shortcut.id);
+        navigate("/", {
+          replace: true,
+        });
       },
     });
   };
 
   return (
     <>
-      <div className="mx-auto max-w-6xl w-full px-3 pt-4 pb-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-6xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
         <div className="mt-8 w-12 h-12 flex justify-center items-center overflow-clip">
           {favicon ? (
             <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />