diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index 97ae595..6946c4c 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -2,7 +2,6 @@ import { getServerSession } from "next-auth";
 import { authOptions } from "@/lib/auth/auth-options";
 import { redirect } from "next/navigation";
 import { getAdminDiscordIds, getSessionDiscordId } from "@/lib/auth/auth";
-import { PageProgress } from "@/components/page-progress";
 
 export default async function AdminLayout({
   children,
@@ -16,10 +15,5 @@ export default async function AdminLayout({
     redirect("/");
   }
 
-  return (
-    <>
-      <PageProgress />
-      {children}
-    </>
-  );
+  return <>{children}</>;
 }
diff --git a/app/form/layout.tsx b/app/form/layout.tsx
index d9b3d40..37a4030 100644
--- a/app/form/layout.tsx
+++ b/app/form/layout.tsx
@@ -7,7 +7,6 @@ import { getSessionDiscordId } from "@/lib/auth/auth";
 import { getDiscordMemberProfile } from "@/lib/discord/discord";
 import Link from 'next/link';
 import { getAdminDiscordIds } from "@/lib/auth/auth";
-import { PageProgress } from "@/components/page-progress";
 import { config } from "@/lib/config";
 
 const siteUrl = config.site.url;
@@ -49,7 +48,6 @@ export default async function FormLayout({
 
   return (
     <div className="relative flex min-h-screen w-full flex-1 flex-col overflow-x-hidden bg-background text-foreground">
-      <PageProgress />
       <header className="relative z-10 flex shrink-0 items-center justify-between border-b border-border bg-background/90 px-6 py-3 backdrop-blur">
         <Link href="/form">
           <span className="font-semibold text-sm">
diff --git a/app/globals.css b/app/globals.css
index 73130a6..052b7cb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,42 +3,6 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url("/fonts/inter-latin.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
-    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
-    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: "Anuphan";
-  font-style: normal;
-  font-weight: 100 700;
-  font-display: swap;
-  src: url("/fonts/anuphan-thai.woff2") format("woff2");
-  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
-}
-
-@font-face {
-  font-family: "Anuphan";
-  font-style: normal;
-  font-weight: 100 700;
-  font-display: swap;
-  src: url("/fonts/anuphan-latin.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
-    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
-    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-:root {
-  --font-inter: "Inter", Arial, sans-serif;
-  --font-anuphan: "Anuphan", Tahoma, sans-serif;
-}
-
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
diff --git a/app/layout.tsx b/app/layout.tsx
index 07fd6f3..4954e7d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,8 +1,33 @@
 import type { Metadata } from "next";
+import localFont from "next/font/local";
 import "./globals.css";
 import { cn } from "@/lib/utils";
 import { config } from "@/lib/config";
 
+const inter = localFont({
+  src: "../public/fonts/inter-latin.woff2",
+  variable: "--font-inter",
+  weight: "100 900",
+  display: "swap",
+});
+
+const anuphan = localFont({
+  src: [
+    {
+      path: "../public/fonts/anuphan-thai.woff2",
+      weight: "100 700",
+      style: "normal",
+    },
+    {
+      path: "../public/fonts/anuphan-latin.woff2",
+      weight: "100 700",
+      style: "normal",
+    },
+  ],
+  variable: "--font-anuphan",
+  display: "swap",
+});
+
 const siteUrl = config.site.url;
 
 export const metadata: Metadata = {
@@ -58,6 +83,7 @@ export const metadata: Metadata = {
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "sonner";
 import { ThemeProvider } from "@/components/theme-provider";
+import { PageProgress } from "@/components/page-progress";
 
 export default function RootLayout({
   children,
@@ -67,10 +93,17 @@ export default function RootLayout({
   return (
     <html
       lang="th"
-      className={cn("h-full", "antialiased", "font-sans")}
+      className={cn(
+        "h-full",
+        "antialiased",
+        inter.variable,
+        anuphan.variable,
+        "font-sans",
+      )}
       suppressHydrationWarning
     >
       <body className="font-sans" suppressHydrationWarning>
+        <PageProgress />
         <ThemeProvider
           attribute="class"
           defaultTheme="system"