diff --git a/src/app/devtools/page.jsx b/src/app/devtools/DevToolsPageClient.jsx
similarity index 98%
rename from src/app/devtools/page.jsx
rename to src/app/devtools/DevToolsPageClient.jsx
index f5b93b51..26182453 100644
--- a/src/app/devtools/page.jsx
+++ b/src/app/devtools/DevToolsPageClient.jsx
@@ -13,7 +13,7 @@ import { CodeIcon } from 'lucide-react'
 import { getLogoById } from '@/lib/logoImports'
 import heroImage from '@/images/ai-hacking.webp' 
 
-export default function DevToolsIndex() {
+export default function DevToolsPageClient() {
   const router = useRouter();
   const allTools = getTools();
   const [filteredTools, setFilteredTools] = useState(allTools);
diff --git a/src/app/devtools/page.tsx b/src/app/devtools/page.tsx
new file mode 100644
index 00000000..98317905
--- /dev/null
+++ b/src/app/devtools/page.tsx
@@ -0,0 +1,13 @@
+import { Metadata } from 'next'
+import DevToolsPageClient from './DevToolsPageClient'
+import { getTools } from '@/lib/getTools'
+
+export const metadata: Metadata = {
+  title: 'AI-Assisted Developer Tools',
+  description: 'Compare different AI-assisted developer tools to find the best fit for your needs',
+}
+
+export default function DevToolsPage() {
+  const tools = getTools()
+  return <DevToolsPageClient initialTools={tools} />
+}
\ No newline at end of file