diff --git a/src/common/constants.ts b/src/common/constants.ts
index 9132d1c4..6b6a3178 100644
--- a/src/common/constants.ts
+++ b/src/common/constants.ts
@@ -1,3 +1,4 @@
 export const color = {
     primary: "blue" as any,
+    primaryIcon: "#007aff" as any,
 };
diff --git a/src/common/shareState.ts b/src/common/shareState.ts
index 71068d35..f05f59dd 100644
--- a/src/common/shareState.ts
+++ b/src/common/shareState.ts
@@ -24,8 +24,6 @@ export const isSignInState = atom<boolean>(false);
 export const currencyState = atomWithStorage<Currency>("currency", "฿");
 
 export const pageSettingState = atomWithStorage<PageSetting>("pageSetting", {
-    isMenuOnRightSide: false,
-    isLightMenu: false,
     isDarkTheme: false,
 });
 
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 97b3c928..522faa91 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Outlet, useNavigate, useOutletContext } from "react-router-dom";
+import { Outlet, useLocation, useNavigate, useOutletContext } from "react-router-dom";
 import styled from "styled-components";
 import pj from "../../package.json";
 import { accountsState, categoriesState, totalAccountsBalanceState } from "../common/shareState";
@@ -13,6 +13,7 @@ import Menu from "./menu/Menu";
 import { Box, Container, Heading } from "@radix-ui/themes";
 import { color } from "../common/constants";
 import { useAtom, useAtomValue } from "jotai";
+import { AnimatePresence } from "framer-motion";
 
 const Header = styled.div`
     padding-top: 12px;
@@ -43,6 +44,7 @@ const Layout: React.FC = () => {
     const [isLoading, setIsLoading] = React.useState(true);
     const [isSignIn, redirectToSignIn, isSignInLoading] = useSignIn();
     const navigate = useNavigate();
+    const location = useLocation();
     const [backToHomeParam, setBackToHomeParam] = React.useState<BackToHomeParam>(null);
 
     React.useEffect(() => {
@@ -87,9 +89,20 @@ const Layout: React.FC = () => {
                     </Box>
                 </Title>
             </Header>
-            <Container size="2" pt="3" px="6" className="mainContainer">
+            <Container
+                size="2"
+                pt="3"
+                px="6"
+                pb="0"
+                className="mainContainer"
+                style={{ paddingBottom: "calc(88px + env(safe-area-inset-bottom, 0px))" }}>
                 <React.Suspense fallback={<Loading />}>
-                    <Outlet context={{ setBackToHomeParam } satisfies ContextType} />
+                    <AnimatePresence mode="wait">
+                        <Outlet
+                            key={location.pathname}
+                            context={{ setBackToHomeParam } satisfies ContextType}
+                        />
+                    </AnimatePresence>
                 </React.Suspense>
             </Container>
             <Toast position="top-right" />
diff --git a/src/components/bases/Drawer.tsx b/src/components/bases/Drawer.tsx
index 7fbe7413..e47fb958 100644
--- a/src/components/bases/Drawer.tsx
+++ b/src/components/bases/Drawer.tsx
@@ -1,150 +1,110 @@
 import React from "react";
-import styled, { keyframes } from "styled-components";
-import { pageSettingState } from "../../common/shareState";
-import { DotsVerticalIcon } from "@radix-ui/react-icons";
-import { useAtomValue } from "jotai";
+import styled from "styled-components";
+import { motion, AnimatePresence } from "framer-motion";
 
-interface StyledProps {
-    $isMenuOnRightSide: boolean;
-    $isShow: boolean;
-    $isDarkTheme: boolean;
+interface BackgroundStyledProps {
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-interface DrawStyledProps {
-    $isMenuOnRightSide: boolean;
-    $isLightMenu: boolean;
-}
-
-const animationDuration = 0.5;
+const animationDuration = 0.25;
 const zIndex = 1000;
-const slideIn = keyframes`
-    0%   {left: -100%}
-    100% {left: 0;}
-`;
-const slideInRtl = keyframes`
-    0%   {right: -100%}
-    100% {right: 0;}
-`;
-const fadeIn = keyframes`
-    0%   {background-color: rgba(0, 0, 0, 0);}
-    100% {background-color: rgba(0, 0, 0, 0.8);}
-`;
-const slideOut = keyframes`
-    100% {left: -100%;}
-`;
-const slideOutRtl = keyframes`
-    100% {right: -100%;}
-`;
-const fadeOut = keyframes`
-    100% {background-color: rgba(0, 0, 0, 0);}
-`;
 
-const Panel = styled.div<StyledProps>`
+const PanelContainer = styled(motion.div)`
+    box-sizing: border-box;
     z-index: ${zIndex};
+    bottom: 80px;
     position: fixed;
-    top: 0;
-    left: ${(props) => (props.$isMenuOnRightSide ? "initial" : 0)};
-    right: ${(props) => (props.$isMenuOnRightSide ? 0 : "initial")};
-    border-radius: ${(props) => (props.$isMenuOnRightSide ? "8px 0 0 8px" : "0 8px 8px 0")};
-    height: 100%;
-    width: 30%;
-    min-width: 350px;
-    background-color: ${(props) => (props.$isDarkTheme ? "#363636" : "white")};
-    animation: ${(props) =>
-            props.$isShow
-                ? props.$isMenuOnRightSide
-                    ? slideInRtl
-                    : slideIn
-                : props.$isMenuOnRightSide
-                  ? slideOutRtl
-                  : slideOut}
-        ${animationDuration}s forwards;
+    overflow-y: auto;
+    max-height: 65vh;
+    padding: var(--space-4);
+    background-color: var(--gray-2);
+    border-radius: 16px;
+    left: 50%;
+    width: min(420px, calc(100vw - 24px));
+
+    @media (max-width: 768px) {
+        width: calc(100vw - 16px);
+    }
 `;
 
-const Background = styled.div<StyledProps>`
+const panelMotion = {
+    initial: { y: "100%", x: "-50%", opacity: 0 },
+    animate: { y: 0, x: "-50%", opacity: 1 },
+    exit: { y: "100%", x: "-50%", opacity: 0 },
+};
+
+const backdropMotion = {
+    initial: { opacity: 0, backdropFilter: "blur(0px)" },
+    animate: { opacity: 1, backdropFilter: "blur(8px)" },
+    exit: { opacity: 0, backdropFilter: "blur(0px)" },
+};
+
+const Background = styled(motion.div)<BackgroundStyledProps>`
     z-index: ${zIndex - 1};
     position: fixed;
     top: 0;
-    left: ${(props) => (props.$isMenuOnRightSide ? "initial" : 0)};
-    right: ${(props) => (props.$isMenuOnRightSide ? 0 : "initial")};
     height: 100%;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.8);
-    animation: ${(props) => (props.$isShow ? fadeIn : fadeOut)} ${animationDuration}s forwards;
-`;
-
-const Draw = styled.div<DrawStyledProps>`
-    position: fixed;
-    cursor: pointer;
-    top: 40%;
-    width: 24px;
-    height: 100px;
-    background-color: ${(props) => (props.$isLightMenu ? "white" : "#363636")};
-    color: ${(props) => (props.$isLightMenu ? "black" : "white")};
-    border-radius: ${(props) => (props.$isMenuOnRightSide ? "8px 0 0 8px" : "0 8px 8px 0")};
-    z-index: 10;
-    right: ${(props) => (props.$isMenuOnRightSide ? "0" : "initial")};
-`;
-const Icon = styled(DotsVerticalIcon)`
-    margin-top: 38px;
-    width: 24px;
-    height: 24px;
+    will-change: opacity, backdrop-filter;
+    -webkit-backdrop-filter: blur(0px);
+    pointer-events: auto;
 `;
 
 interface OwnProps {
     preventCloseIdOrClassList?: string[];
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 
 type DrawerProps = React.PropsWithChildren<OwnProps>;
 
 const Drawer: React.FC<DrawerProps> = (props) => {
-    const { isMenuOnRightSide, isLightMenu, isDarkTheme } = useAtomValue(pageSettingState);
-    const [isShowPanel, setIsShowPanel] = React.useState(false);
-    const [isAnimationUnmount, setIsAnimationUnmount] = React.useState(false);
-    const btnClickHandler = () => {
-        setIsShowPanel(true);
-    };
+    const { open, onOpenChange, preventCloseIdOrClassList, children } = props;
+    const isControlled = open !== undefined && onOpenChange !== undefined;
+    const [internalIsShow, setInternalIsShow] = React.useState(false);
+    const isShowPanel = isControlled ? open : internalIsShow;
+
     const closePanelHandler = (event: React.MouseEvent<HTMLDivElement>) => {
         const target = event.target as HTMLElement;
+        const targetClassName = typeof target.className === "string" ? target.className : "";
         const shouldPrevent =
-            props.preventCloseIdOrClassList?.some(
-                (x) => x === target.id || target.className.includes(x)
+            preventCloseIdOrClassList?.some(
+                (x) => x === target.id || targetClassName.includes(x)
             ) ?? false;
 
         if (shouldPrevent) {
             return;
         }
 
-        setIsAnimationUnmount(true);
-        setTimeout(() => {
-            setIsShowPanel(false);
-            setIsAnimationUnmount(false);
-        }, animationDuration * 1000);
+        if (isControlled) {
+            onOpenChange(false);
+        } else {
+            setInternalIsShow(false);
+        }
     };
 
     return (
-        <>
-            <Draw
-                onClick={btnClickHandler}
-                $isMenuOnRightSide={isMenuOnRightSide}
-                $isLightMenu={isLightMenu}>
-                <Icon />
-            </Draw>
-            {isShowPanel ? (
-                <Background
-                    $isShow={!isAnimationUnmount && isShowPanel}
-                    onClick={closePanelHandler}
-                    $isMenuOnRightSide={isMenuOnRightSide}
-                    $isDarkTheme={isDarkTheme}>
-                    <Panel
-                        $isShow={!isAnimationUnmount && isShowPanel}
-                        $isMenuOnRightSide={isMenuOnRightSide}
-                        $isDarkTheme={isDarkTheme}>
-                        {props.children}
-                    </Panel>
-                </Background>
-            ) : null}
-        </>
+        <AnimatePresence>
+            {isShowPanel && (
+                <>
+                    <Background
+                        onClick={closePanelHandler}
+                        initial={backdropMotion.initial}
+                        animate={backdropMotion.animate}
+                        exit={backdropMotion.exit}
+                        transition={{ duration: animationDuration, ease: "easeInOut" }}
+                    />
+                    <PanelContainer
+                        initial={panelMotion.initial}
+                        animate={panelMotion.animate}
+                        exit={panelMotion.exit}
+                        transition={{ duration: animationDuration, ease: "easeInOut" }}>
+                        {children}
+                    </PanelContainer>
+                </>
+            )}
+        </AnimatePresence>
     );
 };
 
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index a287b574..f77c5438 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,14 +1,22 @@
-import { ReactElement } from "react";
-import { Link } from "react-router-dom";
+import React from "react";
+import {
+    GearIcon,
+    HomeIcon,
+    ExitIcon,
+    CardStackIcon,
+    ReaderIcon,
+    IdCardIcon,
+} from "@radix-ui/react-icons";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import Account from "../../service/model/Account";
 import BalanceWithCurrency from "../bases/BalanceWithCurrency";
 import Drawer from "../bases/Drawer";
 import Switch from "../bases/Switch";
-import { Box, Container, Flex, Grid, Separator, Text } from "@radix-ui/themes";
-import React from "react";
+import { Box, Flex, Grid, Separator, Text } from "@radix-ui/themes";
 import { useAtom } from "jotai";
 import { isHideBalanceOnMenuState } from "../../common/shareState";
+import { color } from "../../common/constants";
 
 interface MenuProps {
     accounts: Account[];
@@ -17,72 +25,105 @@ interface MenuProps {
     version: string;
 }
 
+const BottomMenuWrapper = styled.div`
+    position: fixed;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    width: min(420px, calc(100vw - 24px));
+    z-index: 1000;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+
+    @media (max-width: 768px) {
+        width: calc(100vw - 16px);
+        transform: translateX(-50%);
+    }
+`;
+
+const BottomMenuBar = styled.div`
+    border-radius: 18px;
+    background: var(--gray-2);
+    border: none;
+    box-shadow: none;
+`;
+
+const TabButton = styled.button`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
+    border: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+`;
+
 const Version = styled.div`
-    position: absolute;
-    bottom: 16px;
-    right: 0;
-    font-size: 0.5em;
-    margin-right: 5px;
+    font-size: 10px;
+    opacity: 0.7;
 `;
-const SignOut = styled.a`
+
+const ActionText = styled.span`
     cursor: pointer;
-    color: inherit;
 `;
-const hideBalanceSwitchId = "hideBalanceSwitch";
-const preventDrawerCloseIdList = ["rt-SwitchButton", "rt-SwitchThumb", hideBalanceSwitchId];
+
+type ActiveTab = "none" | "home" | "account" | "settings";
 
 const Menu: React.FC<MenuProps> = (props) => {
     const [isHideBalance, setIsHideBalance] = useAtom<boolean>(isHideBalanceOnMenuState);
+    const [activeTab, setActiveTab] = React.useState<ActiveTab>("none");
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    React.useEffect(() => {
+        if (location.pathname === "/") {
+            setActiveTab("home");
+            return;
+        }
+
+        setActiveTab("none");
+    }, [location.pathname]);
+
     const onHideBalanceChangeHandler = () => {
-        setIsHideBalance((prevState) => {
-            const nextState = !prevState;
+        setIsHideBalance((prev) => !prev);
+    };
 
-            return nextState;
-        });
+    const navigateToHome = () => {
+        setActiveTab("home");
+        navigate("/");
+    };
+
+    const closeSheet = () => {
+        setActiveTab(location.pathname === "/" ? "home" : "none");
+    };
+
+    const handleBottomDrawerOpenChange = (open: boolean) => {
+        if (!open) {
+            closeSheet();
+        }
+    };
+
+    const handleDrawerTabClick = (tab: Extract<ActiveTab, "account" | "settings">) => {
+        setActiveTab((prev) =>
+            prev === tab ? (location.pathname === "/" ? "home" : "none") : tab
+        );
     };
-    const getMenuTitle = (title: string) => (
-        <Flex my="3">
-            <Text size="1" color="gray">
-                {title.toUpperCase()}
-            </Text>
-        </Flex>
-    );
-    const getMenuContent = (title: string, link: string) => (
-        <Flex align="center">
-            <Flex width="32px" justify="center">
-                <Separator orientation="vertical" size="2" />
-            </Flex>
-            <Text ml="2">
-                <Link to={link} style={{ color: "inherit" }}>
-                    {title}
-                </Link>
-            </Text>
-        </Flex>
-    );
-    const getMenuContentWithChildren = (element: ReactElement) => (
-        <Flex align="center">
-            <Flex width="32px" justify="center">
-                <Separator orientation="vertical" size="2" />
-            </Flex>
-            <Text ml="2">{element}</Text>
-        </Flex>
-    );
 
     return (
-        <Drawer preventCloseIdOrClassList={preventDrawerCloseIdList}>
-            <Container mt="6" px="6">
-                <Grid columns="2" gap="2">
-                    <Box style={{ gridColumn: "1 / 3" }}>
-                        <Text color="gray" size="1">
-                            ACCOUNTS
-                        </Text>
-                    </Box>
+        <>
+            <Drawer open={activeTab === "account"} onOpenChange={handleBottomDrawerOpenChange}>
+                <Text color="gray" size="1">
+                    ACCOUNTS
+                </Text>
+                <Grid columns="2" gap="2" mt="2">
                     {props.accounts.map((x) => (
                         <React.Fragment key={x.id}>
                             <Box>
                                 <Text>{x.name}</Text>
                             </Box>
-                            <Box ml="2" key={x.name + "Balance"}>
+                            <Box ml="2">
                                 <BalanceWithCurrency
                                     balance={x.balance}
                                     isHideBalance={isHideBalance}
@@ -104,7 +145,7 @@ const Menu: React.FC<MenuProps> = (props) => {
                 </Grid>
                 <Flex justify="end" mt="3">
                     <Switch
-                        name={hideBalanceSwitchId}
+                        name="hideBalanceSwitch"
                         isRounded
                         isOn={isHideBalance}
                         onChange={onHideBalanceChangeHandler}
@@ -113,19 +154,71 @@ const Menu: React.FC<MenuProps> = (props) => {
                         isRtl
                     />
                 </Flex>
-                {getMenuTitle("page")}
-                {getMenuContent("Home", "/")}
-                {getMenuTitle("Setting")}
-                {getMenuContent("Account", "/account/setting")}
-                {getMenuContent("Category", "/category/setting")}
-                {getMenuContent("Page", "/page/setting")}
-                {getMenuTitle("Misc")}
-                {getMenuContentWithChildren(
-                    <SignOut onClick={props.signOutFunc}>Sign out</SignOut>
-                )}
-            </Container>
-            <Version>v{props.version}</Version>
-        </Drawer>
+            </Drawer>
+            <Drawer open={activeTab === "settings"} onOpenChange={handleBottomDrawerOpenChange}>
+                <Text color="gray" size="1">
+                    SETTINGS
+                </Text>
+                <Flex direction="column" gap="3" mt="2">
+                    <Flex align="center" gap="2">
+                        <CardStackIcon />
+                        <Link to="/account/setting" onClick={closeSheet}>
+                            Account
+                        </Link>
+                    </Flex>
+                    <Flex align="center" gap="2">
+                        <ReaderIcon />
+                        <Link to="/category/setting" onClick={closeSheet}>
+                            Category
+                        </Link>
+                    </Flex>
+                    <Flex align="center" gap="2">
+                        <GearIcon />
+                        <Link to="/page/setting" onClick={closeSheet}>
+                            Page
+                        </Link>
+                    </Flex>
+                    <Flex align="center" gap="2">
+                        <ExitIcon />
+                        <ActionText onClick={props.signOutFunc}>Sign out</ActionText>
+                    </Flex>
+                    <Flex justify="end">
+                        <Version>v{props.version}</Version>
+                    </Flex>
+                </Flex>
+            </Drawer>
+
+            <BottomMenuWrapper>
+                <BottomMenuBar>
+                    <Flex justify="between" align="center" p="3">
+                        <TabButton onClick={navigateToHome}>
+                            <HomeIcon color="gray" />
+                            <Text size="1" color="gray">
+                                Home
+                            </Text>
+                        </TabButton>
+                        <TabButton onClick={() => handleDrawerTabClick("account")}>
+                            <IdCardIcon
+                                color={activeTab === "account" ? color.primaryIcon : "gray"}
+                            />
+                            <Text size="1" color={activeTab === "account" ? color.primary : "gray"}>
+                                Account
+                            </Text>
+                        </TabButton>
+                        <TabButton onClick={() => handleDrawerTabClick("settings")}>
+                            <GearIcon
+                                color={activeTab === "settings" ? color.primaryIcon : "gray"}
+                            />
+                            <Text
+                                size="1"
+                                color={activeTab === "settings" ? color.primary : "gray"}>
+                                Settings
+                            </Text>
+                        </TabButton>
+                    </Flex>
+                </BottomMenuBar>
+            </BottomMenuWrapper>
+        </>
     );
 };
 
diff --git a/src/components/setting/PageSetting.tsx b/src/components/setting/PageSetting.tsx
index bcd80e17..e9f2a95c 100644
--- a/src/components/setting/PageSetting.tsx
+++ b/src/components/setting/PageSetting.tsx
@@ -6,26 +6,6 @@ import AnimatedPage from "../AnimatedPage";
 
 const PageSetting: React.FC = () => {
     const [pageSetting, setPageSetting] = useAtom(pageSettingState);
-    const onMoveMenuToRightSideChangeHandler = () => {
-        setPageSetting((prevState) => {
-            const nextState = {
-                ...prevState,
-                isMenuOnRightSide: !prevState.isMenuOnRightSide,
-            };
-
-            return nextState;
-        });
-    };
-    const onMenuColorChangeHandler = () => {
-        setPageSetting((prevState) => {
-            const nextState = {
-                ...prevState,
-                isLightMenu: !prevState.isLightMenu,
-            };
-
-            return nextState;
-        });
-    };
     const onThemeChangeHandler = () => {
         setPageSetting((prevState) => {
             const nextState = {
@@ -40,29 +20,7 @@ const PageSetting: React.FC = () => {
     return (
         <AnimatedPage>
             <Card>
-                <Flex justify="between" align="center" mb="3">
-                    <Text>Move menu to the right</Text>
-                    <Switch
-                        name="moveMenuToRightSide"
-                        isOn={pageSetting.isMenuOnRightSide}
-                        size="small"
-                        isRounded
-                        onChange={onMoveMenuToRightSideChangeHandler}
-                    />
-                </Flex>
-                <Separator size="4" />
-                <Flex justify="between" align="center" mt="3" mb="3">
-                    <Text>Change menu to light color</Text>
-                    <Switch
-                        name="changeMenuColor"
-                        isOn={pageSetting.isLightMenu}
-                        size="small"
-                        isRounded
-                        onChange={onMenuColorChangeHandler}
-                    />
-                </Flex>
-                <Separator size="4" />
-                <Flex justify="between" align="center" mt="3">
+                <Flex justify="between" align="center">
                     <Text>Change to dark theme</Text>
                     <Switch
                         name="changeMenuColor"
diff --git a/src/service/model/configs/PageSetting.ts b/src/service/model/configs/PageSetting.ts
index f28bde90..708c18bc 100644
--- a/src/service/model/configs/PageSetting.ts
+++ b/src/service/model/configs/PageSetting.ts
@@ -1,6 +1,4 @@
 interface PageSetting {
-    isMenuOnRightSide: boolean;
-    isLightMenu: boolean;
     isDarkTheme: boolean;
 }