diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8c9dae2..5469c55 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,15 +1,15 @@
-import { useEffect } from 'react'
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { AppLayout } from './components/layout/AppLayout'
-import { Toaster } from './components/ui/toaster'
-import { useAuthStore } from './store/auth'
-import { Dashboard } from './pages/Dashboard'
-import { Channels } from './pages/Channels'
-import { Tokens } from './pages/Tokens'
-import { Pricing } from './pages/Pricing'
-import { ApiTest } from './pages/ApiTest'
-import { NotFound } from './pages/NotFound'
+import { useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AppLayout } from "./components/layout/AppLayout";
+import { Toaster } from "./components/ui/toaster";
+import { useAuthStore } from "./store/auth";
+import { Dashboard } from "./pages/Dashboard";
+import { Channels } from "./pages/Channels";
+import { Tokens } from "./pages/Tokens";
+import { Pricing } from "./pages/Pricing";
+import { ApiTest } from "./pages/ApiTest";
+import { NotFound } from "./pages/NotFound";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,42 +18,42 @@ const queryClient = new QueryClient({
       refetchOnWindowFocus: false,
     },
   },
-})
+});
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const { isAuthenticated, isLoading } = useAuthStore()
+  const { isAuthenticated, isLoading } = useAuthStore();
 
   if (isLoading) {
-    return null
+    return null;
   }
 
   if (!isAuthenticated) {
-    return <Navigate to="/" replace />
+    return <Navigate to="/" replace />;
   }
 
-  return <>{children}</>
+  return <>{children}</>;
 }
 
 function HomeRoute() {
-  const { isAuthenticated, isLoading } = useAuthStore()
+  const { isAuthenticated, isLoading } = useAuthStore();
 
   if (isLoading) {
-    return null
+    return null;
   }
 
   if (isAuthenticated) {
-    return <Navigate to="/channels" replace />
+    return <Navigate to="/channels" replace />;
   }
 
-  return <Dashboard />
+  return <Dashboard />;
 }
 
 function App() {
-  const { checkAuth } = useAuthStore()
+  const { checkAuth } = useAuthStore();
 
   useEffect(() => {
-    checkAuth()
-  }, [checkAuth])
+    checkAuth();
+  }, [checkAuth]);
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -61,7 +61,14 @@ function App() {
         <AppLayout>
           <Routes>
             <Route path="/" element={<HomeRoute />} />
-            <Route path="/api-test" element={<ApiTest />} />
+            <Route
+              path="/api-test"
+              element={
+                <ProtectedRoute>
+                  <ApiTest />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="/channels"
               element={
@@ -92,7 +99,7 @@ function App() {
         <Toaster />
       </Router>
     </QueryClientProvider>
-  )
+  );
 }
 
-export default App
+export default App;