diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 3990bb82..011c6264 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -18,27 +18,22 @@ import { getHighlights } from "../utils/fetchOpenSaucedApiData";
 
 import Help from "./help";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../constants";
-interface Highlight {
-    highlight: string;
-    title: string;
-    name: string;
-    url: string;
-    login: string;
-}
-
+import type { Highlight } from "../ts/types";
 
 const Home = () => {
     const { user } = useAuth();
     const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
     const [highlights, setHighlights] = useState<Highlight[]>([]);
     const [currentPage, setCurrentPage] = useState(0);
-    const [currentName, setCurrentName] = useState<string>("");
-
 
     useEffect(() => {
         const fetchHighlights = async () => {
             try {
                 const userHighlightsData = await getHighlights();
+
+                if (!userHighlightsData) {
+                    return;
+                }
                 const highlights = userHighlightsData.data;
 
                 setHighlights(highlights);
@@ -58,13 +53,6 @@ const Home = () => {
         setCurrentPage(prevPage => prevPage + 1);
     };
 
-    useEffect(() => {
-        // Update the current name when the highlight changes
-        if (highlights[currentPage]?.login) {
-            setCurrentName(highlights[currentPage].login);
-        }
-    }, [highlights, currentPage]);
-
     return (
         <div className="p-4 bg-slate-800">
             <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
diff --git a/src/ts/types.ts b/src/ts/types.ts
index 597da4f0..c8f75a65 100644
--- a/src/ts/types.ts
+++ b/src/ts/types.ts
@@ -17,3 +17,33 @@ export interface IUserPR {
     readonly changed_files: number;
     readonly repo_id: number;
 }
+
+export interface Highlights {
+    data: Highlight[];
+    meta: HighlightsMeta;
+}
+
+export interface Highlight {
+    id: number;
+    user_id: number;
+    url: string;
+    title: string;
+    highlight: string;
+    pinned: boolean;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string;
+    shipped_at: string;
+    full_name: string;
+    name: string;
+    login: string;
+}
+
+interface HighlightsMeta {
+    page: number;
+    limit: number;
+    itemCount: number;
+    pageCount: number;
+    hasPreviousPage: boolean;
+    hasNextPage: boolean;
+}
diff --git a/src/utils/fetchOpenSaucedApiData.ts b/src/utils/fetchOpenSaucedApiData.ts
index 0be04fc8..e5714218 100644
--- a/src/utils/fetchOpenSaucedApiData.ts
+++ b/src/utils/fetchOpenSaucedApiData.ts
@@ -8,6 +8,7 @@ import {
     OPEN_SAUCED_HIGHLIGHTS_ENDPOINT,
 } from "../constants";
 import { IInsight } from "../ts/InsightDto";
+import { Highlights } from "../ts/types";
 
 export const isOpenSaucedUser = async (username: string) => {
     try {
@@ -178,12 +179,18 @@ export const updateInsight = async (userToken: string, repoId: string, checked:
 
     return response.status === 200;
 };
-export const getHighlights = async () => {
-    const response = await fetch(
+export const getHighlights = async (): Promise<Highlights | undefined> => {
+    const response = await cachedFetch(
         `${OPEN_SAUCED_HIGHLIGHTS_ENDPOINT}`,
-        { method: "GET" },
+        {
+            method: "GET",
+            expireInSeconds: 300,
+        },
     );
 
+    if (!response) {
+        return;
+    }
     return response.json();
 };