diff --git a/global.d.ts b/global.d.ts
index f2619f17b7..fdcf8203cc 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -25,6 +25,15 @@ declare global {
     updateCallbackDone: () => void
     skipTransition(): void
   }
+
+  declare module 'react' {
+    export interface HTMLAttributes<T>
+      extends AriaAttributes,
+        DOMAttributes<T> {
+      'data-hide-print'?: boolean
+      'data-testid'?: string
+    }
+  }
 }
 
 export {}
diff --git a/src/app/notes/layout.tsx b/src/app/notes/layout.tsx
index 0f612b1a57..880b1c2196 100644
--- a/src/app/notes/layout.tsx
+++ b/src/app/notes/layout.tsx
@@ -19,7 +19,8 @@ export default async (props: PropsWithChildren) => {
 
         <main
           className={clsx(
-            'relative bg-base-100 p-[30px_45px] md:col-start-1 lg:col-auto',
+            'relative bg-base-100 md:col-start-1 lg:col-auto',
+            '-m-4 p-[2rem_1rem] lg:m-0 lg:p-[30px_45px]',
             'rounded-[0_6px_6px_0] border border-[#bbb3]',
             'note-layout-main',
           )}
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index 35fbef28a9..81f1ec8520 100644
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,7 +1,9 @@
 import { memo } from 'react'
 
+import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { clsxm } from '~/utils/helper'
 
+import { AnimatedLogo } from './internal/AnimatedLogo'
 import { BluredBackground } from './internal/BluredBackground'
 import styles from './internal/grid.module.css'
 import {
@@ -13,7 +15,6 @@ import { HeaderContent } from './internal/HeaderContent'
 import { HeaderDataConfigureProvider } from './internal/HeaderDataConfigureProvider'
 import { HeaderDrawerButton } from './internal/HeaderDrawerButton'
 import { HeaderMeta } from './internal/HeaderMeta'
-import { Logo } from './internal/Logo'
 import { SiteOwnerAvatar } from './internal/SiteOwnerAvatar'
 import { UserAuth } from './internal/UserAuth'
 
@@ -40,8 +41,11 @@ const MemoedHeader = memo(() => {
         </HeaderLeftButtonArea>
 
         <HeaderLogoArea>
-          <Logo />
+          <AnimatedLogo />
           <SiteOwnerAvatar className="hidden lg:inline-block" />
+          <OnlyMobile>
+            <HeaderMeta />
+          </OnlyMobile>
         </HeaderLogoArea>
 
         <HeaderCenterArea>
diff --git a/src/components/layout/header/internal/AnimatedLogo.tsx b/src/components/layout/header/internal/AnimatedLogo.tsx
new file mode 100644
index 0000000000..ec01b63471
--- /dev/null
+++ b/src/components/layout/header/internal/AnimatedLogo.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { AnimatePresence, motion } from 'framer-motion'
+
+import { useViewport } from '~/atoms'
+
+import { useHeaderMetaShouldShow } from './hooks'
+import { Logo } from './Logo'
+
+export const AnimatedLogo = () => {
+  const shouldShowMeta = useHeaderMetaShouldShow()
+
+  const isDesktop = useViewport(($) => $.lg && $.w !== 0)
+
+  if (isDesktop) return <Logo />
+
+  return (
+    <AnimatePresence>
+      {!shouldShowMeta && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          <Logo />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
diff --git a/src/components/layout/header/internal/HeaderArea.tsx b/src/components/layout/header/internal/HeaderArea.tsx
index 5d3d434969..2fad494c25 100644
--- a/src/components/layout/header/internal/HeaderArea.tsx
+++ b/src/components/layout/header/internal/HeaderArea.tsx
@@ -8,7 +8,9 @@ import styles from './grid.module.css'
 export const HeaderLogoArea: Component = ({ children }) => {
   return (
     <div className={clsxm('relative', styles['header--grid__logo'])}>
-      <div className={clsxm('relative flex justify-center')}>{children}</div>
+      <div className={clsxm('relative flex h-full w-full justify-center')}>
+        {children}
+      </div>
     </div>
   )
 }
diff --git a/src/components/layout/header/internal/HeaderMeta.tsx b/src/components/layout/header/internal/HeaderMeta.tsx
index b8136ed8d6..d6c30de241 100644
--- a/src/components/layout/header/internal/HeaderMeta.tsx
+++ b/src/components/layout/header/internal/HeaderMeta.tsx
@@ -35,7 +35,8 @@ export const HeaderMeta = () => {
     <AnimatePresence>
       {show && (
         <motion.div
-          className="absolute inset-0 flex min-w-0 items-center justify-between px-[4rem]"
+          className="absolute inset-0 flex min-w-0 items-center justify-between px-0 lg:px-[4rem]"
+          data-testid="header-meta"
           {...animationProps}
         >
           <div className="align-center flex min-w-0 flex-shrink flex-grow flex-col">
@@ -47,7 +48,7 @@ export const HeaderMeta = () => {
             </h2>
           </div>
 
-          <div className="flex min-w-0 flex-shrink-0 flex-col text-right leading-5">
+          <div className="hidden min-w-0 flex-shrink-0 flex-col text-right leading-5 lg:flex">
             <span className="whitespace-pre text-base-content"> {slug}</span>
             <span className="font-medium text-gray-400 dark:text-gray-600">
               {seoTitle}
diff --git a/src/components/layout/header/internal/UserAuth.tsx b/src/components/layout/header/internal/UserAuth.tsx
index 7219568b50..f99729dc42 100644
--- a/src/components/layout/header/internal/UserAuth.tsx
+++ b/src/components/layout/header/internal/UserAuth.tsx
@@ -22,7 +22,7 @@ export function UserAuth() {
   return (
     <AnimatePresence>
       <SignedIn key="user-info">
-        <div className="pointer-events-auto flex h-10 items-center">
+        <div className="pointer-events-auto flex h-10 w-full items-center justify-center">
           <UserButton
             afterSignOutUrl={url(pathname).href}
             appearance={{
diff --git a/src/components/ui/viewport/OnlyDesktop.tsx b/src/components/ui/viewport/OnlyDesktop.tsx
index 78c2519002..e21f4eb46f 100644
--- a/src/components/ui/viewport/OnlyDesktop.tsx
+++ b/src/components/ui/viewport/OnlyDesktop.tsx
@@ -7,7 +7,7 @@ import type { ExtractAtomValue } from 'jotai/vanilla'
 import { viewportAtom } from '~/atoms/viewport'
 import { useIsClient } from '~/hooks/common/use-is-client'
 
-const selector = (v: ExtractAtomValue<typeof viewportAtom>) => v.lg
+const selector = (v: ExtractAtomValue<typeof viewportAtom>) => v.lg && v.w !== 0
 export const OnlyDesktop: Component = ({ children }) => {
   const isClient = useIsClient()