diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0c273de..ce302df 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,18 +1,18 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import localFont from "next/font/local";
 import "./styles/variables.css";
-import "./globals.css";
+import "./styles/base.css";
+import { ServiceWrapper } from "@/providers/serviceWrapper";
+import { Tag } from "@/components/shared/Tag";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",  subsets: ["latin"],
-});
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff2",  variable: "--font-geist-sans",  weight: "100 900"});
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",  subsets: ["latin"],
-});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff2",  variable: "--font-geist-mono",  weight: "100 900"});
 
 export const metadata: Metadata = {
-  title: "Exotic Pets - Premium Exotic Animals",  description: "Discover ethically sourced, health-certified exotic animals including snakes, turtles, and macaws. Expert care and lifetime support."};
+  title: "Exotic Pets - Premium & Ethical Animals",  description: "Discover ethically sourced, health-certified exotic animals including snakes, turtles, and macaws. Expert care and lifetime support."};
 
 export default function RootLayout({
   children,
@@ -21,28 +21,26 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ServiceWrapper>
+          <Tag />
+          {children}
+        </ServiceWrapper>
         <script
           dangerouslySetInnerHTML={{
             __html: `
-              if (typeof window !== 'undefined') {
-                const html = document.documentElement;
-                html.style.setProperty('--vw', window.innerWidth / 100 + 'px');
-                window.addEventListener('resize', () => {
-                  html.style.setProperty('--vw', window.innerWidth / 100 + 'px');
-                });
-              }
+              try {
+                if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                  document.documentElement.classList.add('dark')
+                } else {
+                  document.documentElement.classList.remove('dark')
+                }
+              } catch (e) {}
             `,
           }}
         />
-      </head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-        suppressHydrationWarning
-      >
-        <ServiceWrapper>
-          {children}
-        </ServiceWrapper>
       
         <script
           dangerouslySetInnerHTML={{
@@ -1414,7 +1412,3 @@ export default function RootLayout({
     </html>
   );
 }
-
-function ServiceWrapper({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
-}
