diff --git a/apps/blog/src/components/Header/Header.tsx b/apps/blog/src/components/Header/Header.tsx
index 55df397..f555d66 100644
--- a/apps/blog/src/components/Header/Header.tsx
+++ b/apps/blog/src/components/Header/Header.tsx
@@ -2,9 +2,7 @@ import { type FC } from "react"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
 
-import Sidebar from "../Sidebar"
 import Buttons from "./Buttons"
-import Nav from "./Nav"
 import ReadProgress from "./ReadProgress"
 
 const StyledHeader = styled.header`
@@ -54,9 +52,7 @@ const Header: FC = () => {
                         alt="logo"
                     />
                 </Link>
-                <Nav />
                 <Buttons />
-                <Sidebar />
             </Container>
             <ReadProgress />
         </StyledHeader>
diff --git a/apps/blog/src/components/Header/Nav.tsx b/apps/blog/src/components/Header/Nav.tsx
deleted file mode 100644
index e93bcee..0000000
--- a/apps/blog/src/components/Header/Nav.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { type FC } from "react"
-import { Link } from "react-router-dom"
-import styled from "styled-components"
-
-import NavbarData from "../../data/NavbarData"
-import HeaderButton from "./HeaderButton"
-
-const StyledNav = styled.div`
-    display: flex;
-    height: 100%;
-
-    @media only screen and (max-width: ${({ theme }) =>
-            theme.theme.maxDisplayWidth.mobile}) {
-        display: none;
-    }
-`
-
-const Nav: FC = () => {
-    return (
-        <StyledNav>
-            {NavbarData.map(({ path, title }, index) => {
-                return path.at(0) === "/" ? (
-                    <Link key={index} to={path}>
-                        <HeaderButton>{title}</HeaderButton>
-                    </Link>
-                ) : (
-                    <a key={index} target="_blank" href={path} rel="noreferrer">
-                        <HeaderButton>{title}</HeaderButton>
-                    </a>
-                )
-            })}
-        </StyledNav>
-    )
-}
-
-export default Nav
diff --git a/apps/blog/src/components/Sidebar/Sidebar.tsx b/apps/blog/src/components/Sidebar/Sidebar.tsx
deleted file mode 100644
index fff9471..0000000
--- a/apps/blog/src/components/Sidebar/Sidebar.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { useCallback, useState } from "react"
-import { isMobile } from "react-device-detect"
-import ReactTooltip from "react-tooltip"
-import styled from "styled-components"
-
-import NavbarData from "../../data/NavbarData"
-import { HeaderButtonCSS } from "../Header/HeaderButton"
-import SubMenu from "./SubMenu"
-
-const SidebarOpenButton = styled.div`
-    ${HeaderButtonCSS}
-
-    @media only screen and (min-width: ${({ theme }) =>
-        theme.theme.maxDisplayWidth.mobile}) {
-        display: none;
-    }
-`
-
-const SidebarCloseButton = styled.div`
-    ${HeaderButtonCSS}
-    height: 4rem;
-    font-size: 1.1rem;
-
-    svg {
-        margin-top: 0.2rem;
-        margin-right: 0.5rem;
-    }
-`
-
-const StyledOverlay = styled.div<{ isSidebarOpen: boolean }>`
-    display: ${(props) => (props.isSidebarOpen ? "block" : "none")};
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 20;
-    transition-property: opacity;
-    background-color: rgba(0, 0, 0, 25%);
-
-    * {
-        overflow: scroll;
-    }
-`
-
-const SidebarNav = styled.nav<{ isSidebarOpen: boolean }>`
-    width: 250px;
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    top: 0;
-    right: ${(props) => (props.isSidebarOpen ? "0" : "-100%")};
-    transition: 350ms;
-    z-index: 30;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    background-color: ${({ theme }) =>
-        theme.theme.component.header.color.background};
-    color: ${({ theme }) => theme.theme.component.header.color.text};
-`
-
-const SidebarWrap = styled.div`
-    width: 100%;
-`
-
-const Sidebar = () => {
-    const [isSidebarOpen, setSidebarOpen] = useState(false)
-    const toggleSidebar = useCallback(() => {
-        setSidebarOpen((prev) => !prev)
-        document.body.style.overflow = isSidebarOpen ? "" : "hidden"
-    }, [isSidebarOpen])
-
-    return (
-        <>
-            <StyledOverlay
-                isSidebarOpen={isSidebarOpen}
-                onClick={toggleSidebar}
-            />
-
-            <SidebarOpenButton
-                data-tip
-                data-for="sidebar"
-                onClick={toggleSidebar}
-            >
-                <FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon>
-                {!isMobile && (
-                    <ReactTooltip id="sidebar" type="dark" effect="solid">
-                        <span>open sidebar</span>
-                    </ReactTooltip>
-                )}
-            </SidebarOpenButton>
-
-            <SidebarNav isSidebarOpen={isSidebarOpen}>
-                <SidebarWrap>
-                    {/* close sidebar button */}
-
-                    <SidebarCloseButton onClick={toggleSidebar}>
-                        <FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>Close
-                    </SidebarCloseButton>
-
-                    {/* sidebar items */}
-
-                    {NavbarData.map((item, index) => {
-                        return (
-                            <SubMenu
-                                onClick={toggleSidebar}
-                                item={item}
-                                key={index}
-                            />
-                        )
-                    })}
-                </SidebarWrap>
-            </SidebarNav>
-        </>
-    )
-}
-
-export default Sidebar
diff --git a/apps/blog/src/components/Sidebar/SubMenu.tsx b/apps/blog/src/components/Sidebar/SubMenu.tsx
deleted file mode 100644
index a5fb4b2..0000000
--- a/apps/blog/src/components/Sidebar/SubMenu.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * @file Submenu item for sidebar
- */
-
-import { useCallback, useState } from "react"
-import { Link } from "react-router-dom"
-import styled, { css } from "styled-components"
-
-import type { Item } from "../../data/NavbarData"
-import button from "../../styles/button"
-
-const sharedStyle = css`
-    ${button};
-    display: flex;
-    width: 100%;
-    margin: 0;
-    border-radius: 0;
-    justify-content: space-between;
-    height: 2rem;
-    align-items: center;
-    padding: 20px;
-    list-style: none;
-
-    svg {
-        scale: 1.5;
-    }
-
-    &:hover {
-        color: inherit;
-    }
-`
-
-const SidebarLink = styled(Link)`
-    ${sharedStyle}
-`
-
-const SidebarAnchor = styled.a`
-    ${sharedStyle}
-`
-
-const SidebarLabel = styled.span`
-    margin-left: 1rem;
-`
-
-interface Props {
-    item: Item
-    onClick: () => void
-}
-
-const SubMenu = ({ item, onClick }: Props) => {
-    const { path, icon, title } = item
-    const [isSubNavOpen, setSubNavOpen] = useState(false)
-    const handleSidebarLinkClick = useCallback(() => {
-        onClick()
-        setSubNavOpen((prev) => !prev)
-    }, [isSubNavOpen])
-
-    if (path.at(0) == "/") {
-        return (
-            <SidebarLink to={path} onClick={handleSidebarLinkClick}>
-                <div>
-                    {icon}
-                    <SidebarLabel>{title}</SidebarLabel>
-                </div>
-            </SidebarLink>
-        )
-    }
-
-    return (
-        <SidebarAnchor
-            target="_blank"
-            href={path}
-            onClick={handleSidebarLinkClick}
-        >
-            <div>
-                {icon}
-                <SidebarLabel>{title}</SidebarLabel>
-            </div>
-        </SidebarAnchor>
-    )
-}
-
-export default SubMenu
diff --git a/apps/blog/src/components/Sidebar/index.ts b/apps/blog/src/components/Sidebar/index.ts
deleted file mode 100644
index 2161835..0000000
--- a/apps/blog/src/components/Sidebar/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Sidebar from "./Sidebar"
-
-export default Sidebar
diff --git a/apps/blog/src/data/NavbarData.tsx b/apps/blog/src/data/NavbarData.tsx
deleted file mode 100644
index 1bb0bea..0000000
--- a/apps/blog/src/data/NavbarData.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-    faFileLines,
-    faUser,
-    faUserTie,
-} from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-
-// item from sidebar data
-export type Item = {
-    path: string
-    icon: JSX.Element
-    title: string
-}
-
-const NavbarData: Item[] = [
-    {
-        title: "About",
-        path: "https://developomp.com",
-        icon: <FontAwesomeIcon icon={faUser} />,
-    },
-    {
-        title: "Portfolio",
-        path: "https://portfolio.developomp.com",
-        icon: <FontAwesomeIcon icon={faFileLines} />,
-    },
-    {
-        title: "Resume",
-        path: "/resume",
-        icon: <FontAwesomeIcon icon={faUserTie} />,
-    },
-]
-
-export default NavbarData