diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
index c002735..27df975 100644
--- a/src/app/[lang]/layout.tsx
+++ b/src/app/[lang]/layout.tsx
@@ -38,7 +38,7 @@ async function I18nLayout({
   params: { lang },
 }: React.PropsWithChildren & RootParams) {
   const { common } = await getDictionary(lang);
-  const logo = {
+  const avatar = {
     src: avatarUrl,
     alt: name,
   };
@@ -55,7 +55,7 @@ async function I18nLayout({
 
   return (
     <>
-      <Header logo={logo} menu={menu} />
+      <Header avatar={avatar} menu={menu} />
       {children}
       <Footer copyright={copyright} />
     </>
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
index 2604fb4..910d7b2 100644
--- a/src/app/[lang]/page.tsx
+++ b/src/app/[lang]/page.tsx
@@ -24,10 +24,12 @@ async function RootPage({ params: { lang } }: RootParams) {
 
   return (
     <Container as="main">
-      <H1 className="pb-6 pl-16 pt-12 text-3xl font-bold dark:text-white">
-        {metadata.title}
-      </H1>
-      <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
+      <div className="py-4">
+        <H1 className="pb-4 pt-16 text-3xl font-bold dark:text-white">
+          {metadata.title}
+        </H1>
+        <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
+      </div>
       <List Item={Card} items={posts} />
     </Container>
   );
diff --git a/src/app/[lang]/posts/[postId]/page.tsx b/src/app/[lang]/posts/[postId]/page.tsx
index 4a8d362..ce4ee75 100644
--- a/src/app/[lang]/posts/[postId]/page.tsx
+++ b/src/app/[lang]/posts/[postId]/page.tsx
@@ -40,9 +40,11 @@ async function PostPage({ params: { postId } }: PostParams) {
   return (
     <>
       <Container as="main">
-        <H1 className="pb-6 pl-16 pt-12 text-3xl font-bold dark:text-white">
-          {frontmatter.title}
-        </H1>
+        <div className="py-4">
+          <H1 className="pb-4 pt-16 text-3xl font-bold dark:text-white">
+            {frontmatter.title}
+          </H1>
+        </div>
         <time className="mt-0">{formattedDate}</time>
         <article className="prose prose-xl prose-slate mx-auto dark:prose-invert">
           {content}
diff --git a/src/app/[lang]/posts/page.tsx b/src/app/[lang]/posts/page.tsx
index 4a5f7b2..a23283c 100644
--- a/src/app/[lang]/posts/page.tsx
+++ b/src/app/[lang]/posts/page.tsx
@@ -24,10 +24,12 @@ async function RootPage({ params: { lang } }: RootParams) {
 
   return (
     <Container as="main">
-      <H1 className="pb-6 pl-16 pt-12 text-3xl font-bold dark:text-white">
-        {metadata.title}
-      </H1>
-      <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
+      <div className="py-4">
+        <H1 className="pb-4 pt-16 text-3xl font-bold dark:text-white">
+          {metadata.title}
+        </H1>
+        <p className="pb-16 text-xl dark:text-white">{metadata.description}</p>
+      </div>
       <List Item={Card} items={posts} />
     </Container>
   );
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 9950f28..1ea5910 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,55 +1,76 @@
 'use client';
 
+import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import { usePathname } from 'next/navigation';
-import { CSSProperties, useEffect, useState, useRef } from 'react';
+import { CSSProperties, useEffect, useRef } from 'react';
 
 import useScroll from '@/hooks/useScroll';
 import cn from '@/utils/cn';
 import getLocale from '@/utils/getLocale';
 import { clamp } from '@/utils/math';
 
-import ThemeSwitcher from '../ThemeSwitcher';
-import Link from '../Link';
-import Logo, { LogoProps } from './Logo';
 import Container from '../Container';
+import Image from '../Image';
+import Link from '../Link';
+import ThemeSwitcher from '../ThemeSwitcher';
 
 type MenuItem = {
   text: string;
   href: LinkWithoutLocalePathProps['href'];
 };
 
+type Avatar = {
+  src: string | StaticImport;
+  alt: string;
+};
+
 export type HeaderProps = {
-  logo: Omit<LogoProps, 'scrollY' | 'scrollThreshold'>;
+  avatar: Avatar;
   menu: MenuItem[];
+  scrollThreshold?: number;
 };
 
-function Header({ logo, menu }: HeaderProps) {
+function Header({ avatar, menu, scrollThreshold = 100 }: HeaderProps) {
   const pathname = usePathname();
-  const [translateY, setTranslateY] = useState(0);
   const [scroll] = useScroll();
   const headerRef = useRef<HTMLDivElement>(null);
-  const headerHeight = useRef(0);
+  const headerTranslateY = useRef(0);
   const previousScrollY = useRef(0);
   const currentScrollY = Math.floor(scroll.y);
-  const scrollThreshold = 120;
-
-  useEffect(() => {
-    headerHeight.current = headerRef.current?.clientHeight || 0;
-  }, []);
-
-  useEffect(() => {
+  const avatarTranslateY = (
+    clamp(currentScrollY * -1, scrollThreshold * -1) + scrollThreshold
+  ).toFixed(2);
+  const avatarScale = (
+    1.5 -
+    clamp(currentScrollY, scrollThreshold) / (scrollThreshold * 2)
+  ).toFixed(2);
+
+  const calcHeaderTranslateY = () => {
     const scrollY = currentScrollY - scrollThreshold;
 
-    if (scrollY <= 0) return setTranslateY(0);
+    if (scrollY <= 0) return headerTranslateY.current = 0;
 
     const deltaScrollY = previousScrollY.current - scrollY;
+    const headerHeight = headerRef.current?.clientHeight || 0;
+    const newHeaderTranslateY = clamp(
+      headerTranslateY.current + deltaScrollY,
+      headerHeight * -1
+    );
 
     previousScrollY.current = scrollY;
+    headerTranslateY.current = newHeaderTranslateY;
 
-    setTranslateY((pre) =>
-      clamp(pre + deltaScrollY, headerHeight.current * -1)
-    );
-  }, [currentScrollY]);
+    return newHeaderTranslateY;
+  }
+
+  const headerStyles = {
+    '--header-translate-y': `${calcHeaderTranslateY()}px`,
+  } as CSSProperties;
+
+  const avatarStyles = {
+    '--avatar-translate-y': `${avatarTranslateY}px`,
+    '--avatar-scale': avatarScale,
+  } as CSSProperties;
 
   const isActiveLink = (href: LinkWithoutLocalePathProps['href']) => {
     const locale = getLocale(pathname) || '';
@@ -65,14 +86,23 @@ function Header({ logo, menu }: HeaderProps) {
     <Container
       as="header"
       ref={headerRef}
-      className="sticky top-0 z-10 flex translate-y-0 items-center justify-between py-7"
-      style={{ '--tw-translate-y': `${translateY}px` } as CSSProperties}
+      className="sticky top-0 z-10 flex translate-y-[var(--header-translate-y)] items-center justify-between py-7"
+      style={headerStyles}
     >
-      <Logo
-        {...logo}
-        scrollY={currentScrollY}
-        scrollThreshold={scrollThreshold}
-      />
+      <Link
+        href="/"
+        className="origin-bottom-left translate-y-[var(--avatar-translate-y)] scale-[var(--avatar-scale)]"
+        style={avatarStyles}
+      >
+        <Image
+          className="rounded-full shadow-black drop-shadow-xl"
+          width={40}
+          height={40}
+          src={avatar.src}
+          alt={avatar.alt}
+          priority
+        />
+      </Link>
       <nav>
         <ul className="flex rounded-full bg-gray-900/60 px-2 backdrop-blur-md">
           {menu.map(({ text, href }) => (
diff --git a/src/components/Header/Logo.tsx b/src/components/Header/Logo.tsx
deleted file mode 100644
index fc1ae01..0000000
--- a/src/components/Header/Logo.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
-import type { CSSProperties } from 'react';
-import { clamp } from '@/utils/math';
-import Image from '../Image';
-import Link from '../Link';
-
-export type LogoProps = {
-  src: string | StaticImport;
-  alt: string;
-  scrollY: number;
-  scrollThreshold: number;
-};
-
-function Logo({ src, alt, scrollY, scrollThreshold }: LogoProps) {
-  const translateY = (
-    clamp(scrollY * -1, scrollThreshold * -1) + scrollThreshold
-  ).toFixed(2);
-
-  const scale = (
-    1.5 -
-    clamp(scrollY, scrollThreshold) / (scrollThreshold * 2)
-  ).toFixed(2);
-
-  const style = {
-    '--tw-translate-y': `${translateY}px`,
-    '--tw-scale-x': scale,
-    '--tw-scale-y': scale,
-  } as CSSProperties;
-
-  return (
-    <Link
-      href="/"
-      className="origin-bottom-left translate-y-0 scale-100"
-      style={style}
-    >
-      <Image
-        className="rounded-full shadow-black drop-shadow-xl"
-        width={40}
-        height={40}
-        src={src}
-        alt={alt}
-        priority
-      />
-    </Link>
-  );
-}
-
-export default Logo;