diff --git a/app/root.tsx b/app/root.tsx
index 02a61a8..4d7df04 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -3,19 +3,22 @@ import {
   Meta,
   Outlet,
   Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
+  ScrollRestoration
+} from "@remix-run/react"
 
-import stylesheet from "./tailwind.css?url";
-import { LinksFunction } from "@remix-run/node";
+import stylesheet from "./tailwind.css?url"
+import { LinksFunction } from "@remix-run/node"
 
 // Supports weights 200-800
-import '@fontsource-variable/manrope';
+import "@fontsource-variable/manrope"
+import { Refine } from "@refinedev/core"
+import routerProvider from "@refinedev/remix-router";
+import { authProvider } from "./data/auth-provider"
 
 export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: stylesheet },
+  { rel: "stylesheet", href: stylesheet }
   // { rel: "stylesheet", href: manropeStylesheet },
-];
+]
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -27,18 +30,23 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body>
-        {children}
+        <Refine
+          authProvider={authProvider}
+          routerProvider={routerProvider}
+        >
+          {children}
+        </Refine>
         <ScrollRestoration />
         <Scripts />
       </body>
     </html>
-  );
+  )
 }
 
 export default function App() {
-  return <Outlet />;
+  return <Outlet />
 }
 
 export function HydrateFallback() {
-  return <p>Loading...</p>;
+  return <p>Loading...</p>
 }
