diff --git a/app/page.tsx b/app/page.tsx
index b8b3b34..5688305 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,26 @@
-import RouteCards from '@/components/RouteCards';
+"use client"
+
 import { CardTitle, Card, CardDescription, CardHeader, CardContent } from '@/components/ui/card';
 import { getRoutes } from '@/lib/serverActions';
+import RouteCards from '@/components/RouteCards';
+import { useEffect, useState } from 'react';
 
-export default async function Home() {
+async function fetchRoutes() {
   let routes: Route[] = await getRoutes();
+  return routes;
+}
+
+export default function Home() {
+
+  useEffect(() => {
+    async function fetchData() {
+      const data: Route[] = await fetchRoutes();
+      setRoutes(data);
+    }
+    fetchData();
+  }, []);
+
+  const [routes, setRoutes] = useState<Route[]>([])
 
   return (
     <main>
diff --git a/components/RouteCards.tsx b/components/RouteCards.tsx
index 9645c0d..f43409a 100644
--- a/components/RouteCards.tsx
+++ b/components/RouteCards.tsx
@@ -10,17 +10,18 @@ import React, { useState } from 'react';
 class RouteCards extends React.Component<{routes: Route[]}> {
     constructor(props: { routes: Route[] }) {
         super(props);
+        this.handleClick = this.handleClick.bind(this);
     }
 
     state = {
         routes: this.props.routes,
     }
 
-    componentDidUpdate(prevProps: Readonly<{ routes: Route[]; }>, prevState: Readonly<{}>, snapshot?: any): void {
-        if (prevProps.routes !== this.props.routes) {
+    componentDidUpdate(prevProps: Readonly<{ routes: Route[]; }>, prevState: Readonly<{}>) {
+        if (this.props.routes !== prevProps.routes) {
             this.setState({
                 routes: this.props.routes
-            })
+            });
         }
     }
 
@@ -48,6 +49,7 @@ class RouteCards extends React.Component<{routes: Route[]}> {
 
 
 
+
     handleClick = (route: Route) => {
         console.log(route);
     }