diff --git a/backend/netify_data.db b/backend/netify_data.db
index e8e48c5..f4b935b 100644
Binary files a/backend/netify_data.db and b/backend/netify_data.db differ
diff --git a/public/fonts/BackOneLogo-Regular.ttf b/public/fonts/BackOneLogo-Regular.ttf
new file mode 100644
index 0000000..e2c1b66
Binary files /dev/null and b/public/fonts/BackOneLogo-Regular.ttf differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 0655fd4..129df06 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,6 +4,8 @@
   --color-background: var(--background);
   --color-foreground: var(--foreground);
 
+  --font-backone: var(--font-backone);
+
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
 
@@ -480,7 +482,7 @@ body::after {
 *::after {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow, opacity, transform !important;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-  transition-duration: 300ms !important;
+  transition-duration: 500ms !important;
 }
 
 canvas {
@@ -490,7 +492,7 @@ canvas {
 /* View Transitions API (For perfect whole-screen crossfade including WebGL/Canvas) */
 ::view-transition-old(root),
 ::view-transition-new(root) {
-  animation-duration: 300ms;
+  animation-duration: 500ms;
   animation-timing-function: ease-in-out;
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3c0c69a..19b1a4b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import "./globals.css";
 const inter = Inter({
@@ -7,6 +8,11 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
+const backoneFont = localFont({
+  src: "../../public/fonts/BackOneLogo-Regular.ttf",
+  variable: "--font-backone",
+});
+
 export const metadata: Metadata = {
   title: "BackOne - Deep Package Inspection",
   description: "BackOne by PT. Data Bisnis Solusi - Network Intelligence Dashboard",
@@ -23,7 +29,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${inter.variable} h-full antialiased dark`}
+      className={`${inter.variable} ${backoneFont.variable} h-full antialiased dark`}
       suppressHydrationWarning
     >
       <body className="min-h-full flex flex-col">
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 7e956c2..6385d07 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -48,7 +48,7 @@ export default function LoginPage() {
       <div className="z-10 w-full max-w-md p-8 bg-sidebar/80 backdrop-blur-2xl rounded-2xl border border-border/50 shadow-2xl relative">
         <div className="flex flex-col items-center mb-8">
           <img src="/backone-logo.png" alt="BackOne" className="w-16 h-16 drop-shadow-[0_0_15px_rgba(220,38,38,0.5)] mb-4" />
-          <h1 className="text-2xl font-bold text-white tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70">
+          <h1 className="text-2xl text-center font-bold font-backone text-white tracking-normal leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70">
             BackOne Dashboard
           </h1>
           <p className="text-sm text-muted-foreground mt-2">Sign in to your account</p>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index a79c602..41bbc0e 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -288,10 +288,10 @@ export function Sidebar() {
       <div className="flex h-[72px] shrink-0 items-center px-6 border-b border-border/50 relative z-10">
         <img src="/backone-logo.png" alt="BackOne Logo" className="w-8 h-8 mr-3 rounded-full drop-shadow-[0_0_10px_rgba(255,0,0,0.3)]" />
         <div className="flex flex-col">
-          <span className="text-lg font-bold text-white tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70 leading-tight">
+          <span className="text-lg font-bold font-backone text-white tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70 leading-tight">
             BackOne
           </span>
-          <span className="text-[10px] font-medium text-muted-foreground tracking-wide mt-0.5">
+          <span className="text-[10px] font-medium font-backone text-muted-foreground tracking-wide mt-0.5">
             Deep Package Inspection
           </span>
         </div>