diff --git a/components/ui/Section.jsx b/components/ui/Section.tsx
similarity index 82%
rename from components/ui/Section.jsx
rename to components/ui/Section.tsx
index 0bfd1ec..b059e70 100644
--- a/components/ui/Section.jsx
+++ b/components/ui/Section.tsx
@@ -1,6 +1,6 @@
-import { useId } from 'react'
+import {ReactNode, useId} from 'react'
 
-export function Section({ title, children }) {
+export function Section({title, children}: { title: string, children: ReactNode }) {
     let id = useId()
 
     return (
diff --git a/pages/uses.jsx b/pages/uses.tsx
similarity index 96%
rename from pages/uses.jsx
rename to pages/uses.tsx
index edfb50b..a6b321a 100644
--- a/pages/uses.jsx
+++ b/pages/uses.tsx
@@ -3,10 +3,11 @@ import Head from 'next/head'
 import {Card} from '@/components/ui/Card'
 import {Section} from '@/components/ui/Section'
 import {SimpleLayout} from '@/components/layouts/SimpleLayout'
+import {ReactNode} from 'react'
 
-function ToolsSection({children, ...props}) {
+function ToolsSection({children, title}: { children: ReactNode, title: string }) {
     return (
-        <Section {...props}>
+        <Section title={title}>
             <ul role="list" className="space-y-16">
                 {children}
             </ul>
@@ -14,7 +15,7 @@ function ToolsSection({children, ...props}) {
     )
 }
 
-function Tool({title, href, children}) {
+function Tool({title, href, children}: { title: string, href: string, children: ReactNode }) {
     return (
         <Card as="li">
             <Card.Title as="h3" href={href}>