diff --git a/index.html b/index.html
index befe7ae9..60bc2856 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
deleted file mode 100644
index 98bf3543..00000000
--- a/src/App.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { BrowserRouter as Router, Navigate, useRoutes } from 'react-router-dom'
-import ExternalRedirect from './component/ExternalRedirect'
-import ApplyPageV2 from './pages/ApplyPageV2'
-import Position from './component/ApplyPage/Position'
-import ScrollToTop from './component/ScrollToTop'
-import LandingPageV3 from './pages/LandingPageV3'
-import CulturePage from './component/CulturePage'
-import TeamsPage from './pages/TeamsPage'
-import ExpandedTeamsPage from './pages/TeamsPage/ExpandedTeams'
-import ProjectsPage from './component/ProjectsPage'
-import { useSanity } from './services/useSanity'
-
-function AppRoutes({ sanityRoutes }) {
-  const routes = [
-    { path: '/', element: <LandingPageV3 /> },
-    {
-      path: '/apply',
-      element: <ApplyPageV2 />,
-      children: [{ path: ':team', element: <ApplyPageV2 /> }]
-    },
-    { path: '/positions/:id', element: <Position /> },
-    { path: '/positions/:categoryType/:index', element: <Position /> },
-    { path: '/about', element: <Navigate to={'/'} /> },
-    { path: '/culture', element: <CulturePage /> },
-    { path: '/teams', element: <TeamsPage /> },
-    { path: '/projects', element: <ProjectsPage /> },
-    { path: '/teams-expanded/*', element: <ExpandedTeamsPage /> },
-    ...sanityRoutes,
-    { path: '*', element: <LandingPageV3 /> }
-  ]
-
-  const allRoutes = useRoutes(routes)
-  return allRoutes
-}
-
-export default function App() {
-  const query = `*[_type == "generateLink"]`
-  const links = useSanity(query)
-  const [sanityRoutes, setSanityRoutes] = useState([])
-
-  useEffect(() => {
-    if (links.length > 0) {
-      const newRoutes = links.map((link) => ({
-        path: `/${link.slug.current}`,
-        element: <ExternalRedirect to={link.url} />
-      }))
-      setSanityRoutes(newRoutes)
-    }
-  }, [links])
-
-  return (
-    <div className='App'>
-      <Router>
-        <ScrollToTop />
-        <AppRoutes sanityRoutes={sanityRoutes} />
-      </Router>
-    </div>
-  )
-}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 00000000..c77c7e1e
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { BrowserRouter as Router, Navigate, useRoutes } from 'react-router-dom';
+import type { RouteObject } from 'react-router-dom';
+
+import Position from './component/ApplyPage/Position';
+import CulturePage from './component/CulturePage';
+import ExternalRedirect from './component/ExternalRedirect';
+import ProjectsPage from './component/ProjectsPage';
+import ScrollToTop from './component/ScrollToTop';
+import ApplyPageV2 from './pages/ApplyPageV2';
+import LandingPageV3 from './pages/LandingPageV3';
+import TeamsPage from './pages/TeamsPage';
+import ExpandedTeamsPage from './pages/TeamsPage/ExpandedTeams';
+import { useSanity } from './services/useSanity';
+
+type GenerateLink = {
+  slug: { current: string };
+  url: string;
+};
+
+type AppRoutesProps = {
+  sanityRoutes: RouteObject[];
+};
+
+function AppRoutes({ sanityRoutes }: AppRoutesProps) {
+  const routes: RouteObject[] = [
+    { path: '/', element: <LandingPageV3 /> },
+    {
+      path: '/apply',
+      element: <ApplyPageV2 />,
+      children: [{ path: ':team', element: <ApplyPageV2 /> }],
+    },
+    { path: '/positions/:id', element: <Position /> },
+    { path: '/positions/:categoryType/:index', element: <Position /> },
+    { path: '/about', element: <Navigate to={'/'} /> },
+    { path: '/culture', element: <CulturePage /> },
+    { path: '/teams', element: <TeamsPage /> },
+    { path: '/projects', element: <ProjectsPage /> },
+    { path: '/teams-expanded/*', element: <ExpandedTeamsPage /> },
+    ...sanityRoutes,
+    { path: '*', element: <LandingPageV3 /> },
+  ];
+
+  const allRoutes = useRoutes(routes);
+
+  return allRoutes;
+}
+
+export default function App() {
+  const query = `*[_type == "generateLink"]`;
+  const links = useSanity<GenerateLink>(query);
+
+  const sanityRoutes: RouteObject[] = links.map(link => ({
+    path: `/${link.slug.current}`,
+    element: <ExternalRedirect to={link.url} />,
+  }));
+
+  return (
+    <div className="App">
+      <Router>
+        <ScrollToTop />
+        <AppRoutes sanityRoutes={sanityRoutes} />
+      </Router>
+    </div>
+  );
+}
diff --git a/src/index.jsx b/src/index.tsx
similarity index 51%
rename from src/index.jsx
rename to src/index.tsx
index fb80a815..13e1e919 100644
--- a/src/index.jsx
+++ b/src/index.tsx
@@ -1,9 +1,17 @@
 // After (React 18)
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const rootElement = document.getElementById('root');
+
+if (!rootElement) {
+  throw new Error('Root element #root not found');
+}
+
+const root = ReactDOM.createRoot(rootElement);
+
 root.render(
   <React.StrictMode>
     <App />