diff --git a/src/components/models-download/ModelsDownload.tsx b/src/components/models-download/ModelsDownload.tsx
index 19785b89..e945ab1f 100644
--- a/src/components/models-download/ModelsDownload.tsx
+++ b/src/components/models-download/ModelsDownload.tsx
@@ -1,6 +1,6 @@
 import { selectModelsDownloaded, setModelsDownloaded } from "@/src/reduxStore/states/pages/models-downloaded";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { ModalEnum } from "@/src/types/shared/modal";
@@ -23,20 +23,15 @@ export default function ModelsDownload() {
     const isAdmin = useSelector(selectIsAdmin);
     const modelsDownloaded = useSelector(selectModelsDownloaded);
 
-    const [preparedValues, setPreparedValues] = useState([]);
-
     useEffect(() => {
         refetchModels();
     }, []);
 
-    useEffect(() => {
-        if (!modelsDownloaded) return;
-        setPreparedValues(prepareTableBodyModelsDownload(modelsDownloaded, openDeleteModal, isAdmin));
-    }, [modelsDownloaded]);
-
-    function openDeleteModal(model) {
+    const openDeleteModal = useCallback((model) => {
         dispatch(setModalStates(ModalEnum.DELETE_MODEL_DOWNLOAD, { modelName: model.name, open: true }));
-    }
+    }, []);
+
+    const preparedValues = useMemo(() => prepareTableBodyModelsDownload(modelsDownloaded, openDeleteModal, isAdmin), [modelsDownloaded, isAdmin]);
 
     function refetchModels() {
         getModelProviderInfo((res) => {
diff --git a/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicStatistics.tsx b/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicStatistics.tsx
index 252c4672..5f9e5ee3 100644
--- a/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicStatistics.tsx
+++ b/src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicStatistics.tsx
@@ -1,32 +1,29 @@
 import { selectHeuristic } from "@/src/reduxStore/states/pages/heuristics"
 import { HEURISTICS_STATISTICS_TABLE_COLUMNS, prepareTableBodyHeuristicStatistics } from "@/src/util/table-preparations/heuristic-statistics";
 import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux"
 
 export default function HeuristicStatistics() {
     const currentHeuristic = useSelector(selectHeuristic);
 
-    const [preparedValues, setPreparedValues] = useState([]);
-
-    useEffect(() => {
-        setPreparedValues(prepareTableBodyHeuristicStatistics(currentHeuristic.stats));
-    }, [currentHeuristic]);
+    const preparedValues = useMemo(() => {
+        if (!currentHeuristic) return [];
+        return prepareTableBodyHeuristicStatistics(currentHeuristic.stats);
+    }, [currentHeuristic?.sourceStatistics]);
 
     return (
         <div className="mt-8">
             <div className="text-sm leading-5 font-medium text-gray-700 inline-block">Statistics</div>
             <div className="mt-1 flex flex-col">
-                <div className="overflow-x-auto">
-                    <div className="inline-block min-w-full py-2 align-middle">
-                        <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                            <KernTable
-                                headers={HEURISTICS_STATISTICS_TABLE_COLUMNS}
-                                values={preparedValues}
-                            />
-                        </div>
+                <div className="inline-block min-w-full py-2 align-middle">
+                    <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                        <KernTable
+                            headers={HEURISTICS_STATISTICS_TABLE_COLUMNS}
+                            values={preparedValues}
+                        />
                     </div>
-                </div >
+                </div>
             </div>
         </div>
     )
diff --git a/src/components/projects/projectId/playground/EvaluationGroups.tsx b/src/components/projects/projectId/playground/EvaluationGroups.tsx
index 0e4d8680..06961b2c 100644
--- a/src/components/projects/projectId/playground/EvaluationGroups.tsx
+++ b/src/components/projects/projectId/playground/EvaluationGroups.tsx
@@ -3,7 +3,7 @@ import CreateEvaluationGroupModal from "./CreateEvaluationGroupModal";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { useDispatch, useSelector } from "react-redux";
 import { selectProjectId } from "@/src/reduxStore/states/project";
-import { useEffect, useState, useRef, useLayoutEffect, useCallback, useMemo } from "react";
+import { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import { getEvaluationGroups, getEvaluationSetsByGroupId } from "@/src/services/base/playground";
 import ViewEvaluationGroupModal from "./ViewEvaluationGroupModal";
 import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
@@ -20,72 +20,57 @@ export function EvaluationGroups() {
     const users = useSelector(selectAllUsers);
 
     const [evaluationGroups, setEvaluationGroups] = useState(null);
-    const [preparedValues, setPreparedValues] = useState(null);
-    const [preparedHeaders, setPreparedHeaders] = useState(EVALUATION_GROUPS_TABLE_HEADER);
     const [selectedEvaluationGroups, setSelectedEvaluationGroups] = useState(new Set<string>());
     const isFetchingEvalGroups = useRef(false);
     const [checked, setChecked] = useState(false);
-    const [indeterminate, setIndeterminate] = useState(false);
-    const checkbox = useRef<any>(null);
 
     const usersDict = useMemo(() => arrayToDict(users, 'id'), [users]);
 
+    const projectIdRef = useRef(projectId);
     useEffect(() => {
-        if (!projectId) return;
+        if (!projectIdRef.current) return;
         if (isFetchingEvalGroups.current) return;
         isFetchingEvalGroups.current = true
-        getEvaluationGroups(projectId, (res) => {
+        getEvaluationGroups(projectIdRef.current, (res) => {
             setEvaluationGroups(res);
             isFetchingEvalGroups.current = false
         });
-    }, [projectId]);
+    }, []);
 
-    useLayoutEffect(() => {
-        if (!selectedEvaluationGroups || !evaluationGroups) return;
-        const isIndeterminate = selectedEvaluationGroups.size > 0 && selectedEvaluationGroups.size < evaluationGroups.length;
-        setChecked(selectedEvaluationGroups.size > 0 && selectedEvaluationGroups.size === evaluationGroups.length);
-        setIndeterminate(isIndeterminate);
-
-        if (checkbox.current !== null) {
-            checkbox.current.indeterminate = isIndeterminate;
-        }
-    }, [selectedEvaluationGroups, evaluationGroups]);
+    const refetchEvaluationGroups = useCallback(() => {
+        getEvaluationGroups(projectIdRef.current, (res) => {
+            setEvaluationGroups(res);
+            setSelectedEvaluationGroups(new Set<string>());
+        });
+    }, []);
 
-    useEffect(() => {
-        if (!evaluationGroups) return;
-        setPreparedValues(prepareTableBodyEvaluationGroups(evaluationGroups, selectedEvaluationGroups, setSelectedEvaluationGroups, usersDict, viewSetsModal));
-    }, [evaluationGroups, selectedEvaluationGroups, setSelectedEvaluationGroups]);
+    const toggleAll = useCallback(() => {
+        if (!evaluationGroups || evaluationGroups.length === 0) return;
+        if (checked) setSelectedEvaluationGroups(new Set<string>());
+        else setSelectedEvaluationGroups(new Set<string>(evaluationGroups.map(x => x.id)));
+        setChecked(!checked);
+    }, [checked, evaluationGroups]);
 
-    function viewSetsModal(groupId: string) {
+    const viewSetsModal = useCallback((groupId: string) => {
         let setsArr = [];
-        getEvaluationSetsByGroupId(projectId, groupId, (res) => {
+        getEvaluationSetsByGroupId(projectIdRef.current, groupId, (res) => {
             setsArr = res;
-            dispatch(setModalStates(ModalEnum.VIEW_EVALUATION_GROUP, { open: true, sets: setsArr }));
+            dispatch(setModalStates(ModalEnum.VIEW_EVALUATION_GROUP, { open: true, sets: res }));
         });
-    }
+    }, []);
 
-    useEffect(() => {
-        setPreparedHeaders(preparedHeaders.map((header) => {
-            if (header.id === "checkboxes") {
-                return { ...header, hasCheckboxes: true, checked: checked, onChange: toggleAll };
-            }
-            return header;
-        }))
-    }, [checked, evaluationGroups, selectedEvaluationGroups])
+    const preparedValues = useMemo(() => {
+        if (!evaluationGroups) return null;
+        return prepareTableBodyEvaluationGroups(evaluationGroups, selectedEvaluationGroups, setSelectedEvaluationGroups, usersDict, viewSetsModal);
+    }, [evaluationGroups, selectedEvaluationGroups, setSelectedEvaluationGroups, usersDict, viewSetsModal]);
 
-    const refetchEvaluationGroups = useCallback(() => {
-        getEvaluationGroups(projectId, (res) => {
-            setEvaluationGroups(res);
-            setSelectedEvaluationGroups(new Set<string>());
+    const finalHeaders = useMemo(() => {
+        if (!evaluationGroups || !selectedEvaluationGroups) return null;
+        return EVALUATION_GROUPS_TABLE_HEADER.map((group) => {
+            if (group.id === "checkboxes") return { ...group, checked: selectedEvaluationGroups.size === evaluationGroups.length, onChange: toggleAll };
+            return group;
         });
-    }, [projectId]);
-
-    function toggleAll() {
-        if (checked || indeterminate) setSelectedEvaluationGroups(new Set<string>());
-        else setSelectedEvaluationGroups(new Set<string>(evaluationGroups.map(x => x.id)));
-        setChecked(!checked && !indeterminate)
-        setIndeterminate(false)
-    }
+    }, [evaluationGroups, selectedEvaluationGroups, toggleAll]);
 
     return <>
         {projectId != null && <div className="p-4 bg-gray-100 h-full flex-1 flex flex-col overflow-y-auto">
@@ -114,9 +99,9 @@ export function EvaluationGroups() {
                     </div>
                 }
             </div>
-            {preparedHeaders && preparedValues && (evaluationGroups.length > 0 ?
+            {finalHeaders && preparedValues && (evaluationGroups.length > 0 ?
                 <KernTable
-                    headers={preparedHeaders}
+                    headers={finalHeaders}
                     values={preparedValues}
                     config={EVALUATION_GROUPS_TABLE_CONFIG}
                 />
diff --git a/src/components/projects/projectId/playground/EvaluationRuns.tsx b/src/components/projects/projectId/playground/EvaluationRuns.tsx
index b6757748..74d53d95 100644
--- a/src/components/projects/projectId/playground/EvaluationRuns.tsx
+++ b/src/components/projects/projectId/playground/EvaluationRuns.tsx
@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
 import { EVALUATION_RUN_TABLE_CONFIG, EVALUATION_RUN_TABLE_HEADER, prepareTableBodyEvaluationRun } from "@/src/util/table-preparations/evaluation-runs";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { getEvaluationGroups, getEvaluationRuns } from "@/src/services/base/playground";
 import { selectAllUsers } from "@/src/reduxStore/states/general";
 import { arrayToDict } from "@/submodules/javascript-functions/general";
@@ -23,17 +23,13 @@ export default function EvaluationRuns() {
     const usersDict = arrayToDict(users, 'id');
     const onAttributeEmbeddings = useSelector(selectOnAttributeEmbeddings);
 
-    const [preparedValues, setPreparedValues] = useState(null);
     const [evaluationRuns, setEvaluationRuns] = useState(null);
     const [evaluationGroups, setEvaluationGroups] = useState([]);
     const [evaluationDict, setEvaluationDict] = useState(null);
     const [embeddingsDict, setEmbeddingsDict] = useState(null);
     const [refetchTrigger, setRefetchTrigger] = useState(false)
-    const [preparedHeaders, setPreparedHeaders] = useState(EVALUATION_RUN_TABLE_HEADER);
     const [selectedEvaluationRuns, setSelectedEvaluationRuns] = useState(new Set<string>());
     const [checked, setChecked] = useState(false);
-    const [indeterminate, setIndeterminate] = useState(false);
-    const checkbox = useRef<any>(null);
 
     useEffect(() => {
         if (!projectId) return;
@@ -51,31 +47,6 @@ export default function EvaluationRuns() {
         setEmbeddingsDict(arrayToDict(onAttributeEmbeddings, 'id'));
     }, [onAttributeEmbeddings]);
 
-    useLayoutEffect(() => {
-        if (!selectedEvaluationRuns || !evaluationRuns) return;
-        const isIndeterminate = selectedEvaluationRuns.size > 0 && selectedEvaluationRuns.size < evaluationRuns.length;
-        setChecked(selectedEvaluationRuns.size > 0 && selectedEvaluationRuns.size === evaluationRuns.length);
-        setIndeterminate(isIndeterminate);
-
-        if (checkbox.current !== null) {
-            checkbox.current.indeterminate = isIndeterminate;
-        }
-    }, [selectedEvaluationRuns, evaluationRuns]);
-
-    useEffect(() => {
-        if (!evaluationRuns || !evaluationDict || !embeddingsDict) return;
-        setPreparedValues(prepareTableBodyEvaluationRun(evaluationRuns, usersDict, embeddingsDict, evaluationDict, navigateToDetails, selectedEvaluationRuns, setSelectedEvaluationRuns));
-    }, [evaluationRuns, evaluationDict, embeddingsDict, selectedEvaluationRuns, setSelectedEvaluationRuns]);
-
-    useEffect(() => {
-        setPreparedHeaders(preparedHeaders.map((header) => {
-            if (header.id === "checkboxes") {
-                return { ...header, hasCheckboxes: true, checked: checked, onChange: toggleAll };
-            }
-            return header;
-        }))
-    }, [checked, evaluationGroups, selectedEvaluationRuns])
-
     const refetchEvaluationRuns = useCallback(() => {
         getEvaluationRuns(projectId, (res) => {
             setEvaluationRuns(res);
@@ -83,16 +54,30 @@ export default function EvaluationRuns() {
         });
     }, [projectId]);
 
-    function toggleAll() {
-        if (checked || indeterminate) setSelectedEvaluationRuns(new Set<string>());
+    const navigateToDetails = useCallback((evaluationRunId: string) => {
+        router.push(`/projects/${projectId}/playground/${evaluationRunId}`);
+    }, [projectId]);
+
+    const toggleAll = useCallback(() => {
+        if (!evaluationRuns || evaluationRuns.length === 0) return;
+        if (checked) setSelectedEvaluationRuns(new Set<string>());
         else setSelectedEvaluationRuns(new Set<string>(evaluationRuns.map(x => x.id)));
-        setChecked(!checked && !indeterminate)
-        setIndeterminate(false)
-    }
+        setChecked(!checked);
+    }, [checked, evaluationRuns]);
 
-    function navigateToDetails(evaluationRunId: string) {
-        router.push(`/projects/${projectId}/playground/${evaluationRunId}`);
-    }
+
+    const preparedValues = useMemo(() => {
+        if (!evaluationRuns) return null;
+        return prepareTableBodyEvaluationRun(evaluationRuns, usersDict, embeddingsDict, evaluationDict, navigateToDetails, selectedEvaluationRuns, setSelectedEvaluationRuns);
+    }, [evaluationRuns, usersDict, embeddingsDict, evaluationDict, selectedEvaluationRuns, setSelectedEvaluationRuns, navigateToDetails]);
+
+    const finalHeaders = useMemo(() => {
+        if (!evaluationRuns || !selectedEvaluationRuns) return null;
+        return EVALUATION_RUN_TABLE_HEADER.map((run) => {
+            if (run.id === "checkboxes") return { ...run, checked: selectedEvaluationRuns.size === evaluationRuns.length, onChange: toggleAll };
+            return run;
+        })
+    }, [selectedEvaluationRuns, evaluationRuns, toggleAll]);
 
     return <>
         {projectId != null && <div className="p-4 bg-gray-100 h-full flex-1 flex flex-col overflow-y-auto">
@@ -121,9 +106,9 @@ export default function EvaluationRuns() {
                     </div>
                 }
             </div >
-            {preparedHeaders && preparedValues && (evaluationRuns.length > 0 ?
+            {finalHeaders && preparedValues && (evaluationRuns.length > 0 ?
                 <KernTable
-                    headers={preparedHeaders}
+                    headers={finalHeaders}
                     values={preparedValues}
                     config={EVALUATION_RUN_TABLE_CONFIG}
                 /> :
diff --git a/src/components/projects/projectId/playground/EvaluationSets.tsx b/src/components/projects/projectId/playground/EvaluationSets.tsx
index 0c7cd0f2..02c49690 100644
--- a/src/components/projects/projectId/playground/EvaluationSets.tsx
+++ b/src/components/projects/projectId/playground/EvaluationSets.tsx
@@ -3,7 +3,7 @@ import { ModalEnum } from "@/src/types/shared/modal";
 import { useDispatch, useSelector } from "react-redux";
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import CreateEvaluationSetModal from "./CreateEvaluationSetModal";
-import { useEffect, useState, useRef, useLayoutEffect, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { getEvaluationSets } from "@/src/services/base/playground";
 import { getRecordsBatch } from "@/src/services/base/project-setting";
 import { postProcessRecordByRecordId } from "@/src/util/components/projects/projectId/settings/attribute-calculation-helper";
@@ -14,7 +14,7 @@ import { EVALUATION_SETS_TABLE_CONFIG, EVALUATION_SETS_TABLE_HEADER, prepareTabl
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import { selectAllUsers } from "@/src/reduxStore/states/general";
 import { arrayToDict } from "@/submodules/javascript-functions/general";
-
+import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 
 export function EvaluationSets() {
     const dispatch = useDispatch();
@@ -24,68 +24,51 @@ export function EvaluationSets() {
     const usersDict = arrayToDict(users, 'id');
 
     const [evaluationSets, setEvaluationSets] = useState(null);
-    const [preparedValues, setPreparedValues] = useState(null);
-    const [preparedHeaders, setPreparedHeaders] = useState(EVALUATION_SETS_TABLE_HEADER);
+    const [checked, setChecked] = useState(false)
     const [selectedEvaluationSets, setSelectedEvaluationSets] = useState(new Set<string>());
-    const [checked, setChecked] = useState(false);
-    const [indeterminate, setIndeterminate] = useState(false);
-    const checkbox = useRef<any>(null);
-
-    useEffect(() => {
-        if (!projectId) return;
-        getEvaluationSets(projectId, (res) => {
-            setEvaluationSets(res);
-        });
-    }, [projectId]);
-
-    useLayoutEffect(() => {
-        if (!selectedEvaluationSets || !evaluationSets) return;
-        const isIndeterminate = selectedEvaluationSets.size > 0 && selectedEvaluationSets.size < evaluationSets.length;
-        setChecked(selectedEvaluationSets.size > 0 && selectedEvaluationSets.size === evaluationSets.length);
-        setIndeterminate(isIndeterminate);
-
-        if (checkbox.current !== null) {
-            checkbox.current.indeterminate = isIndeterminate;
-        }
-    }, [selectedEvaluationSets, evaluationSets]);
 
+    const projectIdRef = useRefFor(projectId);
     useEffect(() => {
-        if (!evaluationSets) return;
-        setPreparedValues(prepareTableBodyEvaluationSets(evaluationSets, selectedEvaluationSets, setSelectedEvaluationSets, usersDict, viewEvalSetRecordsModal));
-    }, [evaluationSets, selectedEvaluationSets, setSelectedEvaluationSets]);
-
-    useEffect(() => {
-        setPreparedHeaders(preparedHeaders.map((header) => {
-            if (header.id === "checkboxes") {
-                return { ...header, hasCheckboxes: true, checked: checked, onChange: toggleAll };
-            }
-            return header;
-        }))
-    }, [checked, evaluationSets, selectedEvaluationSets])
+        if (!projectIdRef.current) return;
+        getEvaluationSets(projectIdRef.current, (res) => setEvaluationSets(res));
+    }, []);
 
     const refetchEvaluationSets = useCallback(() => {
-        getEvaluationSets(projectId, (res) => {
+        getEvaluationSets(projectIdRef.current, (res) => {
             setEvaluationSets(res);
             setSelectedEvaluationSets(new Set<string>());
         });
-    }, [projectId]);
+    }, []);
 
-    function toggleAll() {
-        if (checked || indeterminate) setSelectedEvaluationSets(new Set<string>());
+    const toggleAll = useCallback(() => {
+        if (!evaluationSets || evaluationSets.length === 0) return;
+        if (checked) setSelectedEvaluationSets(new Set<string>());
         else setSelectedEvaluationSets(new Set<string>(evaluationSets.map(x => x.id)));
-        setChecked(!checked && !indeterminate);
-        setIndeterminate(false);
-    }
+        setChecked(!checked);
+    }, [checked, evaluationSets]);
 
-    function viewEvalSetRecordsModal(recordIds: any[], question) {
+    const viewEvalSetRecordsModal = useCallback((recordIds: any[], question) => {
         let recordsArr = [];
-        getRecordsBatch(projectId, { recordIds: recordIds }, (recordsBatch) => {
+        getRecordsBatch(projectIdRef.current, { recordIds: recordIds }, (recordsBatch) => {
             recordsBatch.forEach((record) => {
                 recordsArr = [...recordsArr, postProcessRecordByRecordId(record)];
             });
             dispatch(setModalStates(ModalEnum.VIEW_EVALUATION_SET, { open: true, records: recordsArr, question: question }));
-        })
-    }
+        });
+    }, []);
+
+    const preparedValues = useMemo(() => {
+        if (!evaluationSets) return null;
+        return prepareTableBodyEvaluationSets(evaluationSets, selectedEvaluationSets, setSelectedEvaluationSets, usersDict, viewEvalSetRecordsModal);
+    }, [evaluationSets, selectedEvaluationSets, setSelectedEvaluationSets, usersDict, viewEvalSetRecordsModal]);
+
+    const finalHeaders = useMemo(() => {
+        if (!selectedEvaluationSets || !evaluationSets) return null;
+        return EVALUATION_SETS_TABLE_HEADER.map((set) => {
+            if (set.id === "checkboxes") return { ...set, checked: selectedEvaluationSets.size === evaluationSets.length, onChange: toggleAll };
+            return set;
+        });
+    }, [selectedEvaluationSets, evaluationSets, toggleAll]);
 
     return <>
         {projectId != null && <div className="p-4 bg-gray-100 h-full flex-1 flex flex-col overflow-y-auto">
@@ -114,10 +97,10 @@ export function EvaluationSets() {
                     </div>
                 }
             </div >
-            {preparedHeaders && preparedValues && (
+            {finalHeaders && preparedValues && (
                 evaluationSets.length > 0 ?
                     <KernTable
-                        headers={preparedHeaders}
+                        headers={finalHeaders}
                         values={preparedValues}
                         config={EVALUATION_SETS_TABLE_CONFIG}
                     /> :
diff --git a/src/components/shared/sidebar/VersionOverviewModal.tsx b/src/components/shared/sidebar/VersionOverviewModal.tsx
index 9448ad13..c67b8150 100644
--- a/src/components/shared/sidebar/VersionOverviewModal.tsx
+++ b/src/components/shared/sidebar/VersionOverviewModal.tsx
@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import { CacheEnum, selectCachedValue } from "@/src/reduxStore/states/cachedValues";
 import style from '@/src/styles/shared/sidebar.module.css';
 import LoadingIcon from "../../../../submodules/react-components/components/LoadingIcon";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
 import { prepareTableBodyVersionOverview, VERSION_OVERVIEW_TABLE_COLUMNS } from "@/src/util/table-preparations/version-overview";
 import { MemoIconArrowRight } from "@/submodules/react-components/components/kern-icons/icons";
@@ -13,12 +13,7 @@ import { MemoIconArrowRight } from "@/submodules/react-components/components/ker
 export default function VersionOverviewModal() {
     const versionOverviewData = useSelector(selectCachedValue(CacheEnum.VERSION_OVERVIEW));
 
-    const [preparedValues, setPreparedValues] = useState([]);
-
-    useEffect(() => {
-        if (!versionOverviewData) return;
-        setPreparedValues(prepareTableBodyVersionOverview(versionOverviewData));
-    }, [versionOverviewData]);
+    const preparedValues = useMemo(() => prepareTableBodyVersionOverview(versionOverviewData), [versionOverviewData])
 
     return (<Modal modalName={ModalEnum.VERSION_OVERVIEW}>
         <div className="inline-block justify-center text-lg leading-6 text-gray-900 font-medium">
diff --git a/src/types/components/projects/projectId/heuristics/heuristics.ts b/src/types/components/projects/projectId/heuristics/heuristics.ts
index acdb3e35..887c3ed0 100644
--- a/src/types/components/projects/projectId/heuristics/heuristics.ts
+++ b/src/types/components/projects/projectId/heuristics/heuristics.ts
@@ -27,17 +27,17 @@ export type Heuristic = {
 
 export type StatData = {
     color: string;
-    false_negatives: number;
-    false_positives: number;
+    falseNegatives: number;
+    falsePositives: number;
     id: string;
     label: string;
     labelId: string;
-    record_coverage: number;
-    source_conflicts: number;
-    source_id: string;
-    source_overlaps: number;
-    total_hits: number;
-    true_positives: number;
+    recordCoverage: number;
+    sourceConflicts: number;
+    sourceId: string;
+    sourceOverlaps: number;
+    totalHits: number;
+    truePositives: number;
 }
 
 export type Stat = {
diff --git a/src/util/components/projects/projectId/heuristics/shared-helper.ts b/src/util/components/projects/projectId/heuristics/shared-helper.ts
index 54b2a212..ac8a3acb 100644
--- a/src/util/components/projects/projectId/heuristics/shared-helper.ts
+++ b/src/util/components/projects/projectId/heuristics/shared-helper.ts
@@ -33,7 +33,7 @@ function convertStatDataGlobal(data = null) {
 export function mapInformationSourceStats(sourceStatistics) {
     if (sourceStatistics.length) {
         return sourceStatistics.map((wrapper) => {
-            return convertStatData(wrapper['node'])
+            return convertStatData(wrapper)
         })
     } else {
         return [convertStatData()];
diff --git a/src/util/shared/sidebar-helper.ts b/src/util/shared/sidebar-helper.ts
index 77e3e4b3..9fd493a1 100644
--- a/src/util/shared/sidebar-helper.ts
+++ b/src/util/shared/sidebar-helper.ts
@@ -1,11 +1,5 @@
 import { VersionOverview } from "@/src/types/shared/sidebar";
-import { parseUTC } from "@/submodules/javascript-functions/date-parser";
-import { jsonCopy } from "@/submodules/javascript-functions/general";
 
 export default function postprocessVersionOverview(versionOverview: VersionOverview[]): VersionOverview[] {
-    const prepareVersionOverview = jsonCopy(versionOverview);
-    prepareVersionOverview.forEach((version: any) => {
-        version.parseDate = parseUTC(version.lastChecked);
-    });
-    return prepareVersionOverview.sort((a, b) => a.service.localeCompare(b.service));;
+    return versionOverview.sort((a, b) => a.service.localeCompare(b.service));;
 }
\ No newline at end of file
diff --git a/src/util/table-preparations/evaluation-groups.ts b/src/util/table-preparations/evaluation-groups.ts
index 3bbf0c74..015319d9 100644
--- a/src/util/table-preparations/evaluation-groups.ts
+++ b/src/util/table-preparations/evaluation-groups.ts
@@ -1,43 +1,30 @@
+import { EvaluationGroup } from "@/src/types/components/projects/projectId/settings/playground";
 import { parseUTC } from "@/submodules/javascript-functions/date-parser";
+import { toTableColumnCheckbox, toTableColumnComponent, toTableColumnDate, toTableColumnText } from "@/submodules/react-components/helpers/kern-table-helper";
+import { Dispatch } from "react";
+
+export const EVALUATION_GROUPS_TABLE_HEADER = [
+    { column: "", id: "checkboxes", hasCheckboxes: true, checked: false },
+    { column: 'Name', id: 'name' },
+    { column: 'Created At', id: 'createdAt' },
+    { column: 'Created By', id: 'createdBy' },
+    { column: 'Evaluation sets', id: 'evaluationSets' }];
 
-export const EVALUATION_GROUPS_TABLE_HEADER = [{ column: "", id: "checkboxes", hasCheckboxes: true, checked: false }, { column: 'Name', id: 'name' }, { column: 'Created At', id: 'createdAt' }, { column: 'Created By', id: 'createdBy' }, { column: 'Evaluation sets', id: 'evaluationSets' }];
 export const EVALUATION_GROUPS_TABLE_CONFIG = { addBorder: true };
 
-export function prepareTableBodyEvaluationGroups(evaluationGroups, selectedEvaluationGroups, setSelectedEvaluationGroups, usersDict, openModal) {
-    let finalData = [];
-    evaluationGroups.forEach((group) => {
-        const currentRow = [
-            {
-                type: 'boolean',
-                value: group.id,
-                checked: selectedEvaluationGroups.has(group.id),
-                valueChange: (e) => setSelectedEvaluationGroups(
-                    e.target.checked ? prev => new Set(prev).add(group.id) : prev => {
-                        const newGroup = new Set(prev);
-                        newGroup.delete(group.id);
-                        return newGroup;
-                    }
-                )
-            },
-            {
-                type: 'text',
-                value: group.name
-            },
-            {
-                type: 'text',
-                value: parseUTC(group.createdAt)
-            },
-            {
-                type: 'text',
-                value: usersDict[group.createdBy]?.firstName + ' ' + usersDict[group.createdBy]?.lastName
-            },
-            {
-                type: 'Component',
-                component: 'ViewCell',
-                onClick: () => openModal(group.id),
-            }
-        ];
-        finalData.push(currentRow);
-    });
-    return finalData;
+export function prepareTableBodyEvaluationGroups(evaluationGroups: EvaluationGroup[], selectedEvaluationGroups: Set<string>, setSelectedEvaluationGroups: Dispatch<React.SetStateAction<Set<string>>>, usersDict: { [key: string]: any }, openModal: (groupId: string) => void) {
+
+    if (!evaluationGroups || evaluationGroups.length === 0) return [];
+
+    return evaluationGroups.map((group) => [
+        toTableColumnCheckbox(selectedEvaluationGroups.has(group.id), () => setSelectedEvaluationGroups(prev => {
+            const newSet = new Set(prev);
+            newSet.has(group.id) ? newSet.delete(group.id) : newSet.add(group.id);
+            return newSet;
+        })),
+        toTableColumnText(group.name),
+        toTableColumnDate(group.createdAt),
+        toTableColumnText(`${usersDict[group.createdBy]?.firstName} ${usersDict[group.createdBy]?.lastName}`),
+        toTableColumnComponent('ViewCell', undefined, { onClick: () => openModal(group.id) })
+    ]);
 }
\ No newline at end of file
diff --git a/src/util/table-preparations/evaluation-runs.ts b/src/util/table-preparations/evaluation-runs.ts
index d834ab28..7446904f 100644
--- a/src/util/table-preparations/evaluation-runs.ts
+++ b/src/util/table-preparations/evaluation-runs.ts
@@ -1,55 +1,38 @@
+import { EvaluationRun } from "@/src/types/components/projects/projectId/settings/playground";
 import { parseUTC } from "@/submodules/javascript-functions/date-parser";
+import { toTableColumnCheckbox, toTableColumnComponent, toTableColumnDate, toTableColumnText } from "@/submodules/react-components/helpers/kern-table-helper";
 import { EvaluationRunState } from "@/submodules/react-components/types/evaluationRun";
+import { Dispatch } from "react";
+
+export const EVALUATION_RUN_TABLE_HEADER = [
+    { column: "", id: "checkboxes", hasCheckboxes: true, checked: false },
+    { column: "Embedding", id: "embedding" },
+    { column: "Evaluation group", id: "evaluationGroup" },
+    { column: 'Created At', id: 'createdAt' },
+    { column: 'Created By', id: 'createdBy' },
+    { column: "State", id: "state" },
+    { column: "Run details", id: "runDetails" }];
 
-export const EVALUATION_RUN_TABLE_HEADER = [{ column: "", id: "checkboxes", hasCheckboxes: true, checked: false }, { column: "Embedding", id: "embedding" }, { column: "Evaluation group", id: "evaluationGroup" }, { column: 'Created At', id: 'createdAt' }, { column: 'Created By', id: 'createdBy' }, { column: "State", id: "state" }, { column: "Run details", id: "runDetails" }];
 export const EVALUATION_RUN_TABLE_CONFIG = { addBorder: true };
 
-export function prepareTableBodyEvaluationRun(evaluationRuns, usersDict, embeddingsDict, evaluationGroupsDict, navigateToDetails, selectedEvaluationRuns, setSelectedEvaluationRuns) {
-    let finalData = [];
-    evaluationRuns.forEach((run) => {
-        const currentRow = [
-            {
-                type: 'boolean',
-                value: run.id,
-                checked: selectedEvaluationRuns.has(run.id),
-                valueChange: (e) => setSelectedEvaluationRuns(
-                    e.target.checked ? prev => new Set(prev).add(run.id) : prev => {
-                        const newRUn = new Set(prev);
-                        newRUn.delete(run.id);
-                        return newRUn;
-                    }
-                )
-            },
-            {
-                type: 'text',
-                value: embeddingsDict[run.embeddingId]?.name
-            },
-            {
-                type: 'text',
-                value: evaluationGroupsDict[run.evaluationGroupId]?.name
-            },
-            {
-                type: 'text',
-                value: parseUTC(run.createdAt)
-            },
-            {
-                type: 'text',
-                value: usersDict[run.createdBy]?.firstName + ' ' + usersDict[run.createdBy]?.lastName
-            },
-            {
-                type: 'Component',
-                component: 'EvaluationRunStateCell',
-                value: run.state
-            },
-            {
-                type: 'Component',
-                component: 'EvaluationRunDetailsCell',
-                onClick: () => navigateToDetails(run.id),
-                disabled: run.state !== EvaluationRunState.SUCCESS
-            }
+export function prepareTableBodyEvaluationRun(evaluationRuns: EvaluationRun[], usersDict: { [key: string]: any }, embeddingsDict: { [key: string]: any }, evaluationGroupsDict: { [group: string]: any }, navigateToDetails: (runId: string) => void, selectedEvaluationRuns: Set<string>, setSelectedEvaluationRuns: Dispatch<React.SetStateAction<Set<string>>>) {
+
+    if (!evaluationRuns || evaluationRuns.length === 0) return [];
 
-        ];
-        finalData.push(currentRow);
-    });
-    return finalData;
+    return evaluationRuns.map((run) => [
+        toTableColumnCheckbox(selectedEvaluationRuns.has(run.id), () => setSelectedEvaluationRuns(prev => {
+            const newSet = new Set(prev);
+            newSet.has(run.id) ? newSet.delete(run.id) : newSet.add(run.id);
+            return newSet;
+        })),
+        toTableColumnText(embeddingsDict[run.embeddingId]?.name),
+        toTableColumnText(evaluationGroupsDict[run.evaluationGroupId]?.name),
+        toTableColumnDate(run.createdAt),
+        toTableColumnText(`${usersDict[run.createdBy]?.firstName} ${usersDict[run.createdBy]?.lastName}`),
+        toTableColumnComponent('EvaluationRunStateCell', undefined, { value: run.state }),
+        toTableColumnComponent('EvaluationRunDetailsCell', undefined, {
+            onClick: () => navigateToDetails(run.id),
+            disabled: run.state !== EvaluationRunState.SUCCESS
+        })
+    ]);
 }
\ No newline at end of file
diff --git a/src/util/table-preparations/evaluation-sets.ts b/src/util/table-preparations/evaluation-sets.ts
index 59c78dad..7d5a65fe 100644
--- a/src/util/table-preparations/evaluation-sets.ts
+++ b/src/util/table-preparations/evaluation-sets.ts
@@ -1,48 +1,33 @@
+import { EvaluationSet } from "@/src/types/components/projects/projectId/settings/playground";
 import { parseUTC } from "@/submodules/javascript-functions/date-parser";
+import { toTableColumnCheckbox, toTableColumnComponent, toTableColumnDate, toTableColumnNumber, toTableColumnText } from "@/submodules/react-components/helpers/kern-table-helper";
+import { Dispatch } from "react";
+
+export const EVALUATION_SETS_TABLE_HEADER = [
+    { column: "", id: "checkboxes", hasCheckboxes: true, checked: false },
+    { column: 'Question', id: 'question' },
+    { column: 'Created At', id: 'createdAt' },
+    { column: 'Created By', id: 'createdBy' },
+    { column: 'Records', id: 'records' },
+    { column: "View", id: 'viewRecords' }];
 
-export const EVALUATION_SETS_TABLE_HEADER = [{ column: "", id: "checkboxes", hasCheckboxes: true, checked: false }, { column: 'Question', id: 'question' }, { column: 'Created At', id: 'createdAt' }, { column: 'Created By', id: 'createdBy' }, { column: 'Records', id: 'records' }, { column: "View", id: 'viewRecords' }];
 export const EVALUATION_SETS_TABLE_CONFIG = { addBorder: true };
 const MAX_QUESTION_SHOW = 100;
 
-export function prepareTableBodyEvaluationSets(evaluationSets, selectedEvaluationSets, setSelectedEvaluationSets, usersDict, openModal) {
-    let finalData = [];
-    evaluationSets.forEach((set) => {
-        const currentRow = [
-            {
-                type: 'boolean',
-                value: set.id,
-                checked: selectedEvaluationSets.has(set.id),
-                valueChange: (e) => setSelectedEvaluationSets(
-                    e.target.checked ? prev => new Set(prev).add(set.id) : prev => {
-                        const newSet = new Set(prev);
-                        newSet.delete(set.id);
-                        return newSet;
-                    }
-                )
-            },
-            {
-                type: 'text',
-                value: set.question.length > MAX_QUESTION_SHOW ? set.question.slice(0, MAX_QUESTION_SHOW) + '...' : set.question
-            },
-            {
-                type: 'text',
-                value: parseUTC(set.createdAt)
-            },
-            {
-                type: 'text',
-                value: usersDict[set.createdBy]?.firstName + ' ' + usersDict[set.createdBy]?.lastName
-            },
-            {
-                type: 'text',
-                value: Number(set.recordIds?.length)
-            },
-            {
-                type: 'Component',
-                component: 'ViewCell',
-                onClick: () => openModal(set.recordIds, set.question),
-            },
-        ];
-        finalData.push(currentRow);
-    });
-    return finalData;
+export function prepareTableBodyEvaluationSets(evaluationSets: EvaluationSet[], selectedEvaluationSets: Set<string>, setSelectedEvaluationSets: Dispatch<React.SetStateAction<Set<string>>>, usersDict: { [key: string]: any }, openModal: (setId: string[], question: string) => void) {
+
+    if (!evaluationSets || evaluationSets.length === 0) return [];
+
+    return evaluationSets.map((set) => [
+        toTableColumnCheckbox(selectedEvaluationSets.has(set.id), () => setSelectedEvaluationSets(prev => {
+            const newSet = new Set(prev);
+            newSet.has(set.id) ? newSet.delete(set.id) : newSet.add(set.id);
+            return newSet;
+        })),
+        toTableColumnText(set.question.length > MAX_QUESTION_SHOW ? set.question.slice(0, MAX_QUESTION_SHOW) + '...' : set.question),
+        toTableColumnDate(set.createdAt),
+        toTableColumnText(`${usersDict[set.createdBy]?.firstName} ${usersDict[set.createdBy]?.lastName}`),
+        toTableColumnNumber(set.recordIds?.length),
+        toTableColumnComponent('ViewCell', undefined, { onClick: () => openModal(set.recordIds, set.question) })
+    ]);
 }
\ No newline at end of file
diff --git a/src/util/table-preparations/heuristic-statistics.ts b/src/util/table-preparations/heuristic-statistics.ts
index 7a9411f7..1ea510d6 100644
--- a/src/util/table-preparations/heuristic-statistics.ts
+++ b/src/util/table-preparations/heuristic-statistics.ts
@@ -1,3 +1,5 @@
+import { toTableColumnComponent, toTableColumnNumber, toTableColumnText } from "@/submodules/react-components/helpers/kern-table-helper";
+
 export const HEURISTICS_STATISTICS_TABLE_COLUMNS = [
     { column: 'Label', id: 'label' },
     { column: 'Est. Precision', id: 'precision', tooltip: 'True positives / (True positives + False positives)\nfor the reference data you labeled' },
@@ -8,40 +10,17 @@ export const HEURISTICS_STATISTICS_TABLE_COLUMNS = [
     { column: 'Overlaps', id: 'overlaps', tooltip: 'On how many records (or spans)\ndoes this heuristic create overlapping\nexpressions to other heuristics?' }];
 
 export function prepareTableBodyHeuristicStatistics(stats) {
-    let finalData = [];
-    stats.forEach((stat) => {
-        const currentRow = [
-            {
-                type: 'Component',
-                component: 'LabelCell',
-                sourceContainer: stat
-            },
-            {
-                type: 'text',
-                value: stat.values.Precision
-            },
-            {
-                type: 'text',
-                value: stat.values.Recall
-            },
-            {
-                type: 'text',
-                value: stat.values.Coverage
-            },
-            {
-                type: 'text',
-                value: stat.values.TotalHits
-            },
-            {
-                type: 'text',
-                value: stat.values.Conflicts
-            },
-            {
-                type: 'text',
-                value: stat.values.Overlaps
-            }
-        ];
-        finalData.push(currentRow);
-    });
-    return finalData;
+
+    if (!stats || stats.length === 0) return [];
+
+    return stats.map(stat => [
+        toTableColumnComponent('LabelCell', undefined, { sourceContainer: stat }),
+        toTableColumnText(stat.values.Precision),
+        toTableColumnText(stat.values.Recall),
+        toTableColumnNumber(stat.values.Coverage),
+        toTableColumnNumber(stat.values.TotalHits),
+        toTableColumnNumber(stat.values.Conflicts),
+        toTableColumnNumber(stat.values.Overlaps),
+    ])
+
 }
\ No newline at end of file
diff --git a/src/util/table-preparations/models-download.ts b/src/util/table-preparations/models-download.ts
index 2f7544f2..856cb234 100644
--- a/src/util/table-preparations/models-download.ts
+++ b/src/util/table-preparations/models-download.ts
@@ -1,47 +1,25 @@
-export const MODELS_DOWNLOAD_TABLE_COLUMNS = [{ column: 'Name', id: 'name' }, { column: 'Revision', id: 'revision' }, { column: 'Link', id: 'link' }, { column: 'Download date', id: 'downloadDate' }, { column: 'Size', id: 'size' }, { column: 'Status', id: 'status' }, { column: '', id: 'delete' }];
+import { ModelsDownloaded } from "@/src/types/components/models-downloaded/models-downloaded";
+import { toTableColumnComponent, toTableColumnText } from "@/submodules/react-components/helpers/kern-table-helper";
 
-export function prepareTableBodyModelsDownload(modelsDownload, onClick, isAdmin) {
-    let finalData = [];
-    modelsDownload.forEach(model => {
-        const currentRow = [
-            {
-                type: 'text',
-                value: model.name
-            },
-            {
-                type: 'text',
-                value: model.revision
-            },
-            {
-                type: 'Component',
-                component: 'ExternalLinkCell',
-                link: model.link
-            },
-            {
-                type: 'Component',
-                component: 'ModelDateCell',
-                model: model
-            },
-            {
-                type: 'Component',
-                component: 'FileSizeCell',
-                model: model
-            },
-            {
-                type: 'Component',
-                component: 'StatusModelCell',
-                model: model
-            },
-            {
-                type: 'Component',
-                component: 'DeleteModelCell',
-                model: model,
-                isAdmin: isAdmin,
-                onClick: () => onClick(model)
+export const MODELS_DOWNLOAD_TABLE_COLUMNS = [
+    { column: 'Name', id: 'name' },
+    { column: 'Revision', id: 'revision' },
+    { column: 'Link', id: 'link' },
+    { column: 'Download date', id: 'downloadDate' },
+    { column: 'Size', id: 'size' },
+    { column: 'Status', id: 'status' },
+    { column: '', id: 'delete' }];
 
-            }
-        ];
-        finalData.push(currentRow);
-    });
-    return finalData;
+export function prepareTableBodyModelsDownload(modelsDownload: ModelsDownloaded[], onClick: (model: ModelsDownloaded) => void, isAdmin: boolean) {
+    if (!modelsDownload || modelsDownload.length === 0) return [];
+
+    return modelsDownload.map(model => [
+        toTableColumnText(model.name),
+        toTableColumnText(model.revision),
+        toTableColumnComponent('ExternalLinkCell', undefined, { link: model.link }),
+        toTableColumnComponent('ModelDateCell', undefined, { model: model }),
+        toTableColumnComponent('FileSizeCell', undefined, { model: model }),
+        toTableColumnComponent('StatusModelCell', undefined, { model: model }),
+        toTableColumnComponent('DeleteModelCell', undefined, { model: model, isAdmin: isAdmin, onClick: () => onClick(model) }),
+    ]);
 }
\ No newline at end of file
diff --git a/src/util/table-preparations/version-overview.ts b/src/util/table-preparations/version-overview.ts
index 0a26e7d8..af09217e 100644
--- a/src/util/table-preparations/version-overview.ts
+++ b/src/util/table-preparations/version-overview.ts
@@ -1,33 +1,21 @@
-export const VERSION_OVERVIEW_TABLE_COLUMNS = [{ column: 'Service', id: 'service' }, { column: 'Installed version', id: 'installedVersion' }, { column: 'Remote version', id: 'remoteVersion' }, { column: 'Last checked', id: 'parseDate' }, { column: 'Link', id: 'link' }];
+import { VersionOverview } from "@/src/types/shared/sidebar";
+import { toTableColumnComponent, toTableColumnDate, toTableColumnText } from "@/submodules/react-components/helpers/kern-table-helper";
 
-export function prepareTableBodyVersionOverview(versionOverview) {
-    let finalData = [];
-    versionOverview.forEach(element => {
-        const currentRow = [
-            {
-                type: 'text',
-                value: element.service
-            },
-            {
-                type: 'text',
-                value: element.installedVersion
-            },
-            {
-                type: 'Component',
-                component: 'RemoteVersionCell',
-                service: element
-            },
-            {
-                type: 'text',
-                value: element.parseDate
-            },
-            {
-                type: 'Component',
-                component: 'ExternalLinkCell',
-                link: element.link
-            }
-        ];
-        finalData.push(currentRow);
-    });
-    return finalData;
+export const VERSION_OVERVIEW_TABLE_COLUMNS = [
+    { column: 'Service', id: 'service' },
+    { column: 'Installed version', id: 'installedVersion' },
+    { column: 'Remote version', id: 'remoteVersion' },
+    { column: 'Last checked', id: 'parseDate' },
+    { column: 'Link', id: 'link' }];
+
+export function prepareTableBodyVersionOverview(versionOverview: VersionOverview[]) {
+    if (!versionOverview || versionOverview.length === 0) return [];
+
+    return versionOverview.map(element => [
+        toTableColumnText(element.service),
+        toTableColumnText(element.installedVersion),
+        toTableColumnComponent('RemoteVersionCell', undefined, { service: element }),
+        toTableColumnDate(element.lastChecked),
+        toTableColumnComponent('ExternalLinkCell', undefined, { link: element.link })
+    ]);
 }
\ No newline at end of file