diff --git a/frontend/src/components/BarChart.tsx b/frontend/src/components/Charts/BarChart.tsx
similarity index 99%
rename from frontend/src/components/BarChart.tsx
rename to frontend/src/components/Charts/BarChart.tsx
index e35efc44..b08356ad 100644
--- a/frontend/src/components/BarChart.tsx
+++ b/frontend/src/components/Charts/BarChart.tsx
@@ -8,7 +8,7 @@ import { Button } from "@equinor/eds-core-react";
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, zoomPlugin);
 
-interface BarChartProps {
+export interface BarChartProps {
     graphData: ChartDataSet[];
     aspectRatio?: number;
     xLabel?: string;
diff --git a/frontend/src/components/LineChart.tsx b/frontend/src/components/Charts/LineChart.tsx
similarity index 98%
rename from frontend/src/components/LineChart.tsx
rename to frontend/src/components/Charts/LineChart.tsx
index 2fc5d953..7bee2b42 100644
--- a/frontend/src/components/LineChart.tsx
+++ b/frontend/src/components/Charts/LineChart.tsx
@@ -22,7 +22,7 @@ export interface LineSeries {
     color?: string;
 }
 
-interface LineChartProps {
+export interface LineChartProps {
     xValues: number[];
     series: LineSeries[];
     xAxisLabel?: string;
diff --git a/frontend/src/components/ScatterPlot.tsx b/frontend/src/components/Charts/ScatterChart.tsx
similarity index 94%
rename from frontend/src/components/ScatterPlot.tsx
rename to frontend/src/components/Charts/ScatterChart.tsx
index 7218113b..7b726226 100644
--- a/frontend/src/components/ScatterPlot.tsx
+++ b/frontend/src/components/Charts/ScatterChart.tsx
@@ -11,14 +11,14 @@ export interface ScatterDataSet {
     color?: string;
 }
 
-interface ScatterPlotProps {
+export interface ScatterChartProps {
     datasets: ScatterDataSet[];
     xLabel?: string;
     yLabel?: string;
     showDiagonal?: boolean;
 }
 
-const ScatterPlot: React.FC<ScatterPlotProps> = ({ datasets, xLabel, yLabel, showDiagonal }) => {
+const ScatterChart: React.FC<ScatterChartProps> = ({ datasets, xLabel, yLabel, showDiagonal }) => {
     if (datasets.length === 0) return null;
 
     const maxVal = Math.max(...datasets.flatMap((ds) => ds.data.flatMap((p) => [Math.abs(p.x), Math.abs(p.y)])), 0);
@@ -101,4 +101,4 @@ const ScatterPlot: React.FC<ScatterPlotProps> = ({ datasets, xLabel, yLabel, sho
     );
 };
 
-export default ScatterPlot;
+export default ScatterChart;
diff --git a/frontend/src/components/GridSimulation/CompareGridSimulations.tsx b/frontend/src/components/Comparison/CompareGridSimulations.tsx
similarity index 76%
rename from frontend/src/components/GridSimulation/CompareGridSimulations.tsx
rename to frontend/src/components/Comparison/CompareGridSimulations.tsx
index f1f12c48..368b256c 100644
--- a/frontend/src/components/GridSimulation/CompareGridSimulations.tsx
+++ b/frontend/src/components/Comparison/CompareGridSimulations.tsx
@@ -1,36 +1,37 @@
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useQueries, type Query } from "@tanstack/react-query";
-import { CircularProgress, NativeSelect, Typography } from "@equinor/eds-core-react";
+import { NativeSelect, Typography } from "@equinor/eds-core-react";
 import { getGridSimulationResult } from "@/api/api";
-import { MainContainer } from "@/components/styles";
-import { GridSimulationResult } from "@/dto/GridSimulation";
-import LineChart, { LineSeries } from "@/components/LineChart";
+import { getGridAxis, getGridInput, GridSimulationResult } from "@/dto/GridSimulation";
+import { Phase } from "@/dto/SimulationResults";
+import LineChart, { LineSeries } from "@/components/Charts/LineChart";
 import {
     collectOutputSubstances,
     pointOutput,
     significantSubstances,
     visiblePhaseKinds,
-} from "@/functions/GridSimulation";
+} from "@/components/GridSimulation/gridSimulationUtils";
 import { optionName } from "@/functions/Substance";
 import { useAvailableModels } from "@/contexts/ModelContext";
 import { buildModelSections, phaseLabel } from "@/utils/modelUtils";
 import ModelAccordionLayout, { AccordionItem } from "@/components/ModelAccordionLayout";
-import ConcentrationTable, { SimulationConcentrations } from "@/components/ConcentrationTable";
+import ConcentrationTable, { SimulationConcentrations } from "@/components/Tables/ConcentrationTable";
+import ComparisonPage from "@/components/Comparison/ComparisonPage";
 
 interface CompareGridSimulationsProps {
     gridIds: string[];
 }
 
 const modelChainLabel = (result: GridSimulationResult): string => {
-    const firstSim = result.simulations[0];
-    if (!firstSim) return "Unknown model";
-    return firstSim.input.models.map((m) => m.modelId).join(" → ") || "Unknown model";
+    const input = getGridInput(result);
+    if (!input) return "Unknown model";
+    return input.models.map((m) => m.modelId).join(" → ") || "Unknown model";
 };
 
 interface CompareSectionProps {
     results: GridSimulationResult[];
     modelIndex: number;
-    phaseKind: string;
+    phaseKind: Phase["kind"];
 }
 
 const CompareSection: React.FC<CompareSectionProps> = ({ results, modelIndex, phaseKind }) => {
@@ -50,7 +51,8 @@ const CompareSection: React.FC<CompareSectionProps> = ({ results, modelIndex, ph
     const [substance, setSubstance] = useState<string>("");
     const selectedSubstance = substance || allSubstances[0] || "";
 
-    const xAxisSubstance = results[0]?.axes[0]?.substance ?? "";
+    const referenceResult = results.at(0);
+    const xAxisSubstance = referenceResult ? (getGridAxis(referenceResult)?.substance ?? "") : "";
     const unifiedXValues = Array.from(
         new Set(results.flatMap((r) => r.simulations.map((sim) => sim.input.concentrations[xAxisSubstance] ?? 0)))
     ).sort((a, b) => a - b);
@@ -58,7 +60,7 @@ const CompareSection: React.FC<CompareSectionProps> = ({ results, modelIndex, ph
     const series: LineSeries[] = results.map((r) => {
         const valueToSim = new Map(r.simulations.map((sim) => [sim.input.concentrations[xAxisSubstance] ?? 0, sim]));
         return {
-            label: `${modelChainLabel(r)} · ${r.axes[0]?.substance ?? ""}`,
+            label: `${modelChainLabel(r)} · ${getGridAxis(r)?.substance ?? ""}`,
             data: unifiedXValues.map((x) => {
                 const sim = valueToSim.get(x);
                 return sim ? pointOutput(sim, selectedSubstance, modelIndex, phaseKind) : null;
@@ -66,7 +68,7 @@ const CompareSection: React.FC<CompareSectionProps> = ({ results, modelIndex, ph
         };
     });
 
-    const axisSubstances = new Set(results.map((r) => r.axes[0]?.substance).filter(Boolean));
+    const axisSubstances = new Set(results.map((r) => getGridAxis(r)?.substance).filter(Boolean));
     const xAxisLabel =
         axisSubstances.size === 1 ? `${[...axisSubstances][0]} (ppm·mol)` : "Varied concentration (ppm·mol)";
     const unit = phaseKind === "aqueous" ? "wt%" : "ppm·mol";
@@ -118,52 +120,19 @@ const CompareGridSimulations: React.FC<CompareGridSimulationsProps> = ({ gridIds
     const isLoading = queries.some((q) => q.isLoading);
     const hasError = queries.some((q) => q.isError);
     const results = queries.map((q) => q.data).filter((data): data is GridSimulationResult => data !== undefined);
+    const referenceResult = results.at(0);
 
-    const header = (
-        <Typography variant="h2" style={{ marginBottom: "2rem" }}>
-            Compare Grid Simulations
-        </Typography>
-    );
-
-    if (gridIds.length === 0) {
-        return (
-            <MainContainer>
-                {header}
-                <Typography variant="body_short">No grid simulations selected for comparison.</Typography>
-            </MainContainer>
-        );
-    }
-    if (isLoading) {
-        return (
-            <MainContainer>
-                {header}
-                <CircularProgress />
-            </MainContainer>
-        );
-    }
-    if (hasError) {
-        return (
-            <MainContainer>
-                {header}
-                <Typography variant="body_short" style={{ color: "red" }}>
-                    Error loading grid simulation results
-                </Typography>
-            </MainContainer>
-        );
-    }
-
-    const firstSim = results[0]?.simulations[0];
-    const inputModels = firstSim?.input.models ?? [];
+    const inputModels = referenceResult ? (getGridInput(referenceResult)?.models ?? []) : [];
     const sections = buildModelSections(inputModels, models);
 
-    const allPhasesByModel = new Map<number, string[]>();
+    const allPhasesByModel = new Map<number, Phase["kind"][]>();
     sections.forEach((section) => {
         section.indices.forEach((modelIndex) => {
-            const phases = new Set<string>();
+            const phases = new Set<Phase["kind"]>();
             results.forEach((r) => {
                 visiblePhaseKinds(r.simulations, modelIndex).forEach((k) => phases.add(k));
             });
-            const order = ["co2-rich", "aqueous"];
+            const order: Phase["kind"][] = ["co2-rich", "aqueous"];
             allPhasesByModel.set(
                 modelIndex,
                 order.filter((k) => phases.has(k))
@@ -201,7 +170,7 @@ const CompareGridSimulations: React.FC<CompareGridSimulationsProps> = ({ gridIds
         return {
             id: gridIds[index],
             modelName: modelChainLabel(result),
-            concentrations: result.simulations[0]?.input.concentrations ?? {},
+            concentrations: getGridInput(result)?.concentrations ?? {},
             ranges,
         };
     });
@@ -211,9 +180,14 @@ const CompareGridSimulations: React.FC<CompareGridSimulationsProps> = ({ gridIds
     ).sort();
 
     return (
-        <MainContainer>
-            {header}
-
+        <ComparisonPage
+            title="Compare Grid Simulations"
+            isEmpty={gridIds.length === 0}
+            emptyMessage="No grid simulations selected for comparison."
+            isLoading={isLoading}
+            hasError={hasError}
+            errorMessage="Error loading grid simulation results"
+        >
             <Typography variant="h4" style={{ margin: "1rem 0" }}>
                 Input Concentrations
             </Typography>
@@ -223,7 +197,7 @@ const CompareGridSimulations: React.FC<CompareGridSimulationsProps> = ({ gridIds
             </div>
 
             <ModelAccordionLayout items={items} />
-        </MainContainer>
+        </ComparisonPage>
     );
 };
 
diff --git a/frontend/src/components/Comparison/CompareSimulations.tsx b/frontend/src/components/Comparison/CompareSimulations.tsx
new file mode 100644
index 00000000..1a0e3c67
--- /dev/null
+++ b/frontend/src/components/Comparison/CompareSimulations.tsx
@@ -0,0 +1,120 @@
+import React from "react";
+import { useQueries } from "@tanstack/react-query";
+import { Banner, Typography } from "@equinor/eds-core-react";
+import { getResultForSimulation, ResultIsPending } from "@/api/api";
+import BarChart from "@/components/Charts/BarChart";
+import ConcentrationTable from "@/components/Tables/ConcentrationTable";
+import { ChartDataSet } from "@/dto/ChartData";
+import { getOutputConcentrations, getPrimaryModel, SimulationResults } from "@/dto/SimulationResults";
+import ComparisonPage from "@/components/Comparison/ComparisonPage";
+
+type SimulationComparison = {
+    id: string;
+    modelName: string;
+    inputConcentrations: Record<string, number>;
+    outputConcentrations: Record<string, number>;
+};
+
+interface CompareSimulationsProps {
+    simulationIds: string[];
+}
+
+const CompareSimulations: React.FC<CompareSimulationsProps> = ({ simulationIds }) => {
+    const queries = useQueries({
+        queries: simulationIds.map((id) => ({
+            queryKey: ["simulation", id],
+            queryFn: () => getResultForSimulation(id),
+            retry: (_count: number, error: Error) => error instanceof ResultIsPending,
+            retryDelay: () => 2000,
+        })),
+    });
+
+    const isLoading = queries.some((query) => query.isLoading);
+    const hasError = queries.some((query) => query.isError);
+
+    const simulationResults = queries
+        .map((query) => query.data)
+        .filter((result): result is SimulationResults => result !== undefined);
+    const comparisons: SimulationComparison[] = simulationResults.map((result, index) => ({
+        id: simulationIds[index],
+        modelName: getPrimaryModel(result)?.modelId ?? "Unknown",
+        inputConcentrations: result.input.concentrations,
+        outputConcentrations: getOutputConcentrations(result),
+    }));
+
+    const firstInput = comparisons[0] ? JSON.stringify(Object.entries(comparisons[0].inputConcentrations).sort()) : "";
+    const allInputsMatch =
+        comparisons.length < 2 ||
+        comparisons.every(
+            (comparison) => JSON.stringify(Object.entries(comparison.inputConcentrations).sort()) === firstInput
+        );
+
+    const collectUniqueSubstances = (
+        field: keyof Pick<SimulationComparison, "inputConcentrations" | "outputConcentrations">
+    ) => Array.from(new Set(comparisons.flatMap((comparison) => Object.keys(comparison[field])))).sort();
+
+    const inputSubstances = collectUniqueSubstances("inputConcentrations");
+    const significantOutputs = collectUniqueSubstances("outputConcentrations").filter((substance) =>
+        comparisons.some((comparison) => (comparison.outputConcentrations[substance] ?? 0) >= 0.01)
+    );
+    const chartData: ChartDataSet[] = comparisons.map((comparison) => ({
+        label: `${comparison.modelName} (${comparison.id.slice(0, 8)})`,
+        data: significantOutputs.map((substance) => ({
+            x: substance,
+            y: comparison.outputConcentrations[substance] ?? 0,
+        })),
+    }));
+
+    return (
+        <ComparisonPage
+            title="Compare Simulations"
+            isEmpty={simulationIds.length === 0}
+            emptyMessage="No simulations selected for comparison."
+            isLoading={isLoading}
+            hasError={hasError}
+            errorMessage="Error loading simulation results"
+        >
+            {!allInputsMatch && (
+                <Banner style={{ marginBottom: "2rem" }}>
+                    <Banner.Icon variant="warning">⚠️</Banner.Icon>
+                    <Banner.Message>
+                        Warning: The selected simulations have different input concentrations. You may be comparing
+                        incompatible scenarios.
+                    </Banner.Message>
+                </Banner>
+            )}
+
+            <Typography variant="h4" style={{ marginBottom: "1rem" }}>
+                Input Concentrations
+            </Typography>
+            <ConcentrationTable
+                substances={inputSubstances}
+                simulations={comparisons.map((comparison) => ({
+                    id: comparison.id,
+                    modelName: comparison.modelName,
+                    concentrations: comparison.inputConcentrations,
+                }))}
+                highlightDifferences
+            />
+
+            <Typography variant="h4" style={{ marginBottom: "1rem", marginTop: "3rem" }}>
+                Output Concentrations
+            </Typography>
+            <BarChart graphData={chartData} aspectRatio={3} xLabel="Components" yLabel="Concentration (ppm·mol)" />
+
+            <Typography variant="h5" style={{ marginBottom: "1rem" }}>
+                Concentration Values (≥ 0.01)
+            </Typography>
+            <ConcentrationTable
+                substances={significantOutputs}
+                simulations={comparisons.map((comparison) => ({
+                    id: comparison.id,
+                    modelName: comparison.modelName,
+                    concentrations: comparison.outputConcentrations,
+                }))}
+            />
+        </ComparisonPage>
+    );
+};
+
+export default CompareSimulations;
diff --git a/frontend/src/components/Comparison/ComparisonPage.tsx b/frontend/src/components/Comparison/ComparisonPage.tsx
new file mode 100644
index 00000000..b04b3dc2
--- /dev/null
+++ b/frontend/src/components/Comparison/ComparisonPage.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { CircularProgress, Typography } from "@equinor/eds-core-react";
+import { MainContainer } from "@/components/styles";
+
+interface ComparisonPageProps {
+    title: string;
+    isEmpty: boolean;
+    emptyMessage: string;
+    isLoading: boolean;
+    hasError: boolean;
+    errorMessage: string;
+    children: React.ReactNode;
+}
+
+const ComparisonPage: React.FC<ComparisonPageProps> = ({
+    title,
+    isEmpty,
+    emptyMessage,
+    isLoading,
+    hasError,
+    errorMessage,
+    children,
+}) => {
+    let content = children;
+    if (isEmpty) {
+        content = <Typography variant="body_short">{emptyMessage}</Typography>;
+    } else if (isLoading) {
+        content = <CircularProgress />;
+    } else if (hasError) {
+        content = (
+            <Typography variant="body_short" style={{ color: "red" }}>
+                {errorMessage}
+            </Typography>
+        );
+    }
+
+    return (
+        <MainContainer>
+            <Typography variant="h2" style={{ marginBottom: "2rem" }}>
+                {title}
+            </Typography>
+            {content}
+        </MainContainer>
+    );
+};
+
+export default ComparisonPage;
diff --git a/frontend/src/components/GridSimulation/GridPhaseTable.tsx b/frontend/src/components/GridSimulation/GridPhaseTable.tsx
new file mode 100644
index 00000000..6cd7a0f2
--- /dev/null
+++ b/frontend/src/components/GridSimulation/GridPhaseTable.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { Table } from "@equinor/eds-core-react";
+import { GridSimulationResult } from "@/dto/GridSimulation";
+import { Phase } from "@/dto/SimulationResults";
+import { formatConcentration } from "@/functions/Formatting";
+import { pointOutput } from "@/components/GridSimulation/gridSimulationUtils";
+import { optionName } from "@/functions/Substance";
+
+interface GridPhaseTableProps {
+    result: GridSimulationResult;
+    modelIndex: number;
+    phaseKind: Phase["kind"];
+    substances: string[];
+}
+
+const GridPhaseTable: React.FC<GridPhaseTableProps> = ({ result, modelIndex, phaseKind, substances }) => (
+    <Table>
+        <Table.Head>
+            <Table.Row>
+                {result.axes.map((axis) => (
+                    <Table.Cell key={axis.substance}>{axis.substance} (ppm)</Table.Cell>
+                ))}
+                {substances.map((substance) => (
+                    <Table.Cell key={substance}>{optionName(substance)}</Table.Cell>
+                ))}
+            </Table.Row>
+        </Table.Head>
+        <Table.Body>
+            {result.simulations.map((simulation, index) => (
+                <Table.Row key={index}>
+                    {result.axes.map((axis) => (
+                        <Table.Cell key={axis.substance}>
+                            {simulation.input.concentrations[axis.substance] ?? 0}
+                        </Table.Cell>
+                    ))}
+                    {substances.map((substance) => (
+                        <Table.Cell key={substance}>
+                            {simulation.status === "done"
+                                ? formatConcentration(pointOutput(simulation, substance, modelIndex, phaseKind) ?? 0)
+                                : simulation.status === "error"
+                                  ? "error"
+                                  : "…"}
+                        </Table.Cell>
+                    ))}
+                </Table.Row>
+            ))}
+        </Table.Body>
+    </Table>
+);
+
+export default GridPhaseTable;
diff --git a/frontend/src/components/GridSimulation/GridResultStep.tsx b/frontend/src/components/GridSimulation/GridResultStep.tsx
index 82f856b5..2504d057 100644
--- a/frontend/src/components/GridSimulation/GridResultStep.tsx
+++ b/frontend/src/components/GridSimulation/GridResultStep.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { Banner } from "@equinor/eds-core-react";
 import { GridSimulationResult } from "@/dto/GridSimulation";
 import GridResults from "./GridResults";
-import Working from "@/components/Simulation/Working";
-import NoResults from "@/components/Simulation/NoResults";
+import Working from "@/components/SimulationStatus/Working";
+import NoResults from "@/components/SimulationStatus/NoResults";
 
 type GridResultStepProps = {
     result?: GridSimulationResult;
diff --git a/frontend/src/components/GridSimulation/GridResults.tsx b/frontend/src/components/GridSimulation/GridResults.tsx
index 2ebe5020..0fb7e5de 100644
--- a/frontend/src/components/GridSimulation/GridResults.tsx
+++ b/frontend/src/components/GridSimulation/GridResults.tsx
@@ -1,20 +1,21 @@
 import React, { useMemo, useState } from "react";
-import { Autocomplete, Banner, Table, Typography } from "@equinor/eds-core-react";
-import { GridSimulationResult } from "@/dto/GridSimulation";
-import { formatConcentration } from "@/functions/Formatting";
+import { Autocomplete, Banner, Typography } from "@equinor/eds-core-react";
+import { getGridAxis, getGridInput, GridSimulationResult } from "@/dto/GridSimulation";
+import { Phase } from "@/dto/SimulationResults";
 import {
     buildGridCsv,
     collectOutputSubstances,
     defaultSelectedSubstances,
     pointOutput,
     visiblePhaseKinds,
-} from "@/functions/GridSimulation";
+} from "@/components/GridSimulation/gridSimulationUtils";
 import { optionName } from "@/functions/Substance";
-import LineChart, { LineSeries } from "@/components/LineChart";
+import LineChart, { LineSeries } from "@/components/Charts/LineChart";
 import DownloadButton from "@/components/DownloadButton";
 import { useAvailableModels } from "@/contexts/ModelContext";
 import { buildModelSections, phaseLabel } from "@/utils/modelUtils";
 import ModelAccordionLayout, { AccordionItem } from "@/components/ModelAccordionLayout";
+import GridPhaseTable from "@/components/GridSimulation/GridPhaseTable";
 
 interface GridResultsProps {
     result: GridSimulationResult;
@@ -23,11 +24,11 @@ interface GridResultsProps {
 interface GridPhaseChartProps {
     result: GridSimulationResult;
     modelIndex: number;
-    phaseKind: string;
+    phaseKind: Phase["kind"];
 }
 
 const GridPhaseChart: React.FC<GridPhaseChartProps> = ({ result, modelIndex, phaseKind }) => {
-    const { simulations, axes } = result;
+    const { simulations } = result;
 
     const allSubstances = useMemo(
         () => collectOutputSubstances(simulations, modelIndex, phaseKind),
@@ -36,7 +37,7 @@ const GridPhaseChart: React.FC<GridPhaseChartProps> = ({ result, modelIndex, pha
     const [selection, setSelection] = useState<string[] | null>(null);
     const selectedSubstances = selection ?? defaultSelectedSubstances(simulations, modelIndex, phaseKind);
 
-    const xAxisSubstance = axes[0]?.substance ?? "Unknown";
+    const xAxisSubstance = getGridAxis(result)?.substance ?? "Unknown";
     const xValues = simulations.map((sim) => parseFloat(sim.input.concentrations[xAxisSubstance].toFixed(2)) ?? 0);
     const series: LineSeries[] = selectedSubstances.map((substance) => ({
         label: optionName(substance),
@@ -57,7 +58,7 @@ const GridPhaseChart: React.FC<GridPhaseChartProps> = ({ result, modelIndex, pha
 
             {series.length === 0 ? (
                 <Typography variant="body_short" italic>
-                    Select at least one output substance to plot.
+                    Select at least one output substance to chart.
                 </Typography>
             ) : (
                 <LineChart
@@ -73,38 +74,12 @@ const GridPhaseChart: React.FC<GridPhaseChartProps> = ({ result, modelIndex, pha
                 Values
             </Typography>
 
-            <Table>
-                <Table.Head>
-                    <Table.Row>
-                        {axes.map((axis) => (
-                            <Table.Cell key={axis.substance}>{axis.substance} (ppm)</Table.Cell>
-                        ))}
-                        {selectedSubstances.map((substance) => (
-                            <Table.Cell key={substance}>{optionName(substance)}</Table.Cell>
-                        ))}
-                    </Table.Row>
-                </Table.Head>
-                <Table.Body>
-                    {simulations.map((sim, idx) => (
-                        <Table.Row key={idx}>
-                            {axes.map((axis) => (
-                                <Table.Cell key={axis.substance}>
-                                    {sim.input.concentrations[axis.substance] ?? 0}
-                                </Table.Cell>
-                            ))}
-                            {selectedSubstances.map((substance) => (
-                                <Table.Cell key={substance}>
-                                    {sim.status === "done"
-                                        ? formatConcentration(pointOutput(sim, substance, modelIndex, phaseKind) ?? 0)
-                                        : sim.status === "error"
-                                          ? "error"
-                                          : "…"}
-                                </Table.Cell>
-                            ))}
-                        </Table.Row>
-                    ))}
-                </Table.Body>
-            </Table>
+            <GridPhaseTable
+                result={result}
+                modelIndex={modelIndex}
+                phaseKind={phaseKind}
+                substances={selectedSubstances}
+            />
         </>
     );
 };
@@ -136,11 +111,10 @@ const GridSection: React.FC<GridSectionProps> = ({ result, modelIndex }) => {
 };
 
 const GridResults: React.FC<GridResultsProps> = ({ result }) => {
-    const { simulations, axes } = result;
+    const { simulations } = result;
     const { models } = useAvailableModels();
 
-    const firstSim = simulations[0];
-    const inputModels = firstSim?.input.models ?? [];
+    const inputModels = getGridInput(result)?.models ?? [];
 
     const sections = buildModelSections(inputModels, models);
 
@@ -148,7 +122,7 @@ const GridResults: React.FC<GridResultsProps> = ({ result }) => {
     const doneSimulations = simulations.filter((sim) => sim.status === "done");
     const allFinished = doneSimulations.length + erroredSimulations.length === simulations.length;
 
-    const xAxisSubstance = axes[0]?.substance ?? "Unknown";
+    const xAxisSubstance = getGridAxis(result)?.substance ?? "Unknown";
     const modelLabel = inputModels.map((model) => model.modelId).join(" → ") || "Unknown model";
 
     const items: AccordionItem[] = sections.flatMap((section) =>
diff --git a/frontend/src/functions/GridSimulation.ts b/frontend/src/components/GridSimulation/gridSimulationUtils.ts
similarity index 75%
rename from frontend/src/functions/GridSimulation.ts
rename to frontend/src/components/GridSimulation/gridSimulationUtils.ts
index 337b1981..2ebfae9e 100644
--- a/frontend/src/functions/GridSimulation.ts
+++ b/frontend/src/components/GridSimulation/gridSimulationUtils.ts
@@ -1,24 +1,30 @@
 import { GridSimulationResult } from "@/dto/GridSimulation";
-import { SimulationResults, getCo2RichConcentrations, Phase } from "@/dto/SimulationResults";
+import {
+    SimulationResults,
+    getFinalResult,
+    getModelResult,
+    getPhaseConcentrations,
+    Phase,
+} from "@/dto/SimulationResults";
 import { TabulatedResultRow } from "@/dto/ChartData";
 import { convertTabulatedDataToCSVFormat } from "@/functions/Formatting";
 import { ppmMolToWeightPercent } from "@/functions/UnitConversion";
 
-export const SIGNIFICANCE_THRESHOLD = 0.01;
+const SIGNIFICANCE_THRESHOLD = 0.01;
 export const MAX_DEFAULT_SERIES = 6;
 
 const getModelPhases = (sim: SimulationResults, modelIndex: number): Phase[] => {
     if (sim.status !== "done" || sim.results.length === 0) return [];
-    return sim.results[modelIndex]?.phases ?? [];
+    return getModelResult(sim, modelIndex)?.phases ?? [];
 };
 
-const getPhaseConcentrations = (
+const getModelPhaseConcentrations = (
     sim: SimulationResults,
     modelIndex: number,
-    phaseKind: string
+    phaseKind: Phase["kind"]
 ): Record<string, number> => {
     const phases = getModelPhases(sim, modelIndex);
-    const raw = phases.find((p) => p.kind === phaseKind)?.concentrations ?? {};
+    const raw = getPhaseConcentrations(phases, phaseKind);
     if (phaseKind === "aqueous") {
         return ppmMolToWeightPercent(raw);
     }
@@ -27,22 +33,21 @@ const getPhaseConcentrations = (
 
 const lastPhaseConcentrations = (sim: SimulationResults): Record<string, number> => {
     if (sim.status !== "done" || sim.results.length === 0) return {};
-    const lastResult = sim.results[sim.results.length - 1];
-    return getCo2RichConcentrations(lastResult.phases);
+    return getPhaseConcentrations(getFinalResult(sim)?.phases, "co2-rich");
 };
 
 export const pointOutput = (
     sim: SimulationResults,
     substance: string,
     modelIndex?: number,
-    phaseKind?: string
+    phaseKind?: Phase["kind"]
 ): number | null => {
     if (sim.status !== "done") return null;
     if (modelIndex !== undefined && phaseKind !== undefined) {
-        return getPhaseConcentrations(sim, modelIndex, phaseKind)[substance] ?? 0;
+        return getModelPhaseConcentrations(sim, modelIndex, phaseKind)[substance] ?? 0;
     }
     if (modelIndex !== undefined) {
-        return getCo2RichConcentrations(getModelPhases(sim, modelIndex))[substance] ?? 0;
+        return getPhaseConcentrations(getModelPhases(sim, modelIndex), "co2-rich")[substance] ?? 0;
     }
     return lastPhaseConcentrations(sim)[substance] ?? 0;
 };
@@ -50,14 +55,16 @@ export const pointOutput = (
 export const collectOutputSubstances = (
     simulations: SimulationResults[],
     modelIndex?: number,
-    phaseKind?: string
+    phaseKind?: Phase["kind"]
 ): string[] => {
     const substances = new Set<string>();
     simulations.forEach((sim) => {
         if (modelIndex !== undefined && phaseKind !== undefined) {
-            Object.keys(getPhaseConcentrations(sim, modelIndex, phaseKind)).forEach((s) => substances.add(s));
+            Object.keys(getModelPhaseConcentrations(sim, modelIndex, phaseKind)).forEach((s) => substances.add(s));
         } else if (modelIndex !== undefined) {
-            Object.keys(getCo2RichConcentrations(getModelPhases(sim, modelIndex))).forEach((s) => substances.add(s));
+            Object.keys(getPhaseConcentrations(getModelPhases(sim, modelIndex), "co2-rich")).forEach((s) =>
+                substances.add(s)
+            );
         } else {
             Object.keys(lastPhaseConcentrations(sim)).forEach((s) => substances.add(s));
         }
@@ -69,7 +76,7 @@ export const maxOutput = (
     simulations: SimulationResults[],
     substance: string,
     modelIndex?: number,
-    phaseKind?: string
+    phaseKind?: Phase["kind"]
 ): number =>
     simulations.reduce((currentMax, sim) => {
         const val = pointOutput(sim, substance, modelIndex, phaseKind);
@@ -79,7 +86,7 @@ export const maxOutput = (
 export const significantSubstances = (
     simulations: SimulationResults[],
     modelIndex?: number,
-    phaseKind?: string
+    phaseKind?: Phase["kind"]
 ): string[] =>
     collectOutputSubstances(simulations, modelIndex, phaseKind).filter(
         (s) => maxOutput(simulations, s, modelIndex, phaseKind) >= SIGNIFICANCE_THRESHOLD
@@ -88,7 +95,7 @@ export const significantSubstances = (
 export const defaultSelectedSubstances = (
     simulations: SimulationResults[],
     modelIndex?: number,
-    phaseKind?: string
+    phaseKind?: Phase["kind"]
 ): string[] =>
     significantSubstances(simulations, modelIndex, phaseKind)
         .sort(
@@ -97,8 +104,8 @@ export const defaultSelectedSubstances = (
         )
         .slice(0, MAX_DEFAULT_SERIES);
 
-export const visiblePhaseKinds = (simulations: SimulationResults[], modelIndex: number): string[] => {
-    const kinds = new Set<string>();
+export const visiblePhaseKinds = (simulations: SimulationResults[], modelIndex: number): Phase["kind"][] => {
+    const kinds = new Set<Phase["kind"]>();
     simulations.forEach((sim) => {
         getModelPhases(sim, modelIndex).forEach((phase) => {
             if (Object.values(phase.concentrations).some((v) => v > 0)) {
@@ -106,7 +113,7 @@ export const visiblePhaseKinds = (simulations: SimulationResults[], modelIndex:
             }
         });
     });
-    const order = ["co2-rich", "aqueous"];
+    const order: Phase["kind"][] = ["co2-rich", "aqueous"];
     return order.filter((k) => kinds.has(k));
 };
 
diff --git a/frontend/src/components/LabResultsPlot.tsx b/frontend/src/components/LabResults/LabResultsChart.tsx
similarity index 82%
rename from frontend/src/components/LabResultsPlot.tsx
rename to frontend/src/components/LabResults/LabResultsChart.tsx
index 11670d33..fb9e49c6 100644
--- a/frontend/src/components/LabResultsPlot.tsx
+++ b/frontend/src/components/LabResults/LabResultsChart.tsx
@@ -1,22 +1,22 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Typography } from "@equinor/eds-core-react";
 import { ExperimentResult } from "@/dto/ExperimentResult";
 import { ChartDataSet } from "@/dto/ChartData";
-import BarChart from "./BarChart";
+import BarChart from "@/components/Charts/BarChart";
 import { SimulationResults } from "@/dto/SimulationResults";
 import { convertSimulationToChartData } from "@/functions/Formatting";
 import { getLabResultColor, EXPERIMENT_PATTERNS } from "@/functions/Colors";
 
-interface LabResultsPlotProps {
+interface LabResultsChartProps {
     selectedExperiments: ExperimentResult[];
     simulationsPerExperiment: Record<string, SimulationResults[]>;
 }
 
-const LabResultsPlot: React.FC<LabResultsPlotProps> = ({
+const LabResultsChart = ({
     selectedExperiments,
     simulationsPerExperiment: simulationQueries,
-}) => {
-    const [plotComponents, setPlotComponents] = useState<string[]>([]);
+}: LabResultsChartProps) => {
+    const [chartComponents, setChartComponents] = useState<string[]>([]);
 
     const chartDatasets: ChartDataSet[] = [];
     selectedExperiments.forEach((exp, expIdx) => {
@@ -44,7 +44,7 @@ const LabResultsPlot: React.FC<LabResultsPlotProps> = ({
     if (selectedExperiments.length === 0) {
         return (
             <Typography variant="body_short" style={{ margin: "2rem 0" }}>
-                Select experiments from the table below to view comparison plots.
+                Select experiments from the table below to view comparison charts.
             </Typography>
         );
     }
@@ -54,21 +54,21 @@ const LabResultsPlot: React.FC<LabResultsPlotProps> = ({
             <BarChart
                 graphData={chartDatasets.map((ds) => ({
                     ...ds,
-                    data: ds.data.filter((point) => plotComponents.length === 0 || plotComponents.includes(point.x)),
+                    data: ds.data.filter((point) => chartComponents.length === 0 || chartComponents.includes(point.x)),
                 }))}
                 aspectRatio={4}
                 yLabel="Concentration (ppm·mol)"
                 xLabel="Components"
             />
             <div style={{ marginBottom: "20px" }}>
-                Plot subset of components:{" "}
+                Chart subset of components:{" "}
                 {allComponents.map((component) => (
                     <label key={component} style={{ marginRight: "12px", fontSize: "0.75rem" }}>
                         <input
                             type="checkbox"
-                            checked={plotComponents.includes(component)}
+                            checked={chartComponents.includes(component)}
                             onChange={(e) => {
-                                setPlotComponents((prev) =>
+                                setChartComponents((prev) =>
                                     e.target.checked ? [...prev, component] : prev.filter((c) => c !== component)
                                 );
                             }}
@@ -81,4 +81,4 @@ const LabResultsPlot: React.FC<LabResultsPlotProps> = ({
     );
 };
 
-export default LabResultsPlot;
+export default LabResultsChart;
diff --git a/frontend/src/components/LabResultsTable.tsx b/frontend/src/components/LabResults/LabResultsTable.tsx
similarity index 96%
rename from frontend/src/components/LabResultsTable.tsx
rename to frontend/src/components/LabResults/LabResultsTable.tsx
index bc34afef..a6d3f8b1 100644
--- a/frontend/src/components/LabResultsTable.tsx
+++ b/frontend/src/components/LabResults/LabResultsTable.tsx
@@ -2,7 +2,7 @@
 import { ExperimentResult } from "@/dto/ExperimentResult";
 import { Button, EdsProvider, Typography } from "@equinor/eds-core-react";
 import { EdsDataGrid, Row } from "@equinor/eds-data-grid-react";
-import { buildLabResultsTableData } from "@/functions/Tables";
+import { buildLabResultsTableData } from "@/components/LabResults/buildLabResultsTableData";
 
 interface LabResultsTableProps {
     labResults: ExperimentResult[];
diff --git a/frontend/src/components/ParityPlots.tsx b/frontend/src/components/LabResults/ParityCharts.tsx
similarity index 84%
rename from frontend/src/components/ParityPlots.tsx
rename to frontend/src/components/LabResults/ParityCharts.tsx
index 1f59d239..0043b4b8 100644
--- a/frontend/src/components/ParityPlots.tsx
+++ b/frontend/src/components/LabResults/ParityCharts.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Button, NativeSelect, Typography } from "@equinor/eds-core-react";
-import ScatterPlot, { ScatterDataSet } from "@/components/ScatterPlot";
+import ScatterChart, { ScatterDataSet } from "@/components/Charts/ScatterChart";
 import { ExperimentResult } from "@/dto/ExperimentResult";
-import { SimulationResults, getCo2RichConcentrations } from "@/dto/SimulationResults";
+import { SimulationResults, getOutputConcentrations, getPrimaryModel } from "@/dto/SimulationResults";
 
 const buildParityDatasets = (
     experiments: ExperimentResult[],
@@ -15,28 +15,28 @@ const buildParityDatasets = (
         if (measured === undefined) return;
         const simulations = simulationsPerExperiment[exp.name] ?? [];
         simulations.forEach((sim) => {
-            const modelId = sim.input.models[0].modelId;
-            const modelled = getCo2RichConcentrations(sim.results[0]?.phases)[component] ?? 0;
+            const modelId = getPrimaryModel(sim)?.modelId ?? "Unknown";
+            const modelled = getOutputConcentrations(sim)[component] ?? 0;
             (byModel[modelId] ??= []).push({ x: measured, y: modelled });
         });
     });
     return Object.entries(byModel).map(([modelId, data]) => ({ label: modelId, data }));
 };
 
-interface ParityPlotsProps {
+interface ParityChartsProps {
     availableComponents: string[];
     experiments: ExperimentResult[];
     simulationsPerExperiment: Record<string, SimulationResults[]>;
 }
 
-const ParityPlots: React.FC<ParityPlotsProps> = ({ availableComponents, experiments, simulationsPerExperiment }) => {
+const ParityCharts = ({ availableComponents, experiments, simulationsPerExperiment }: ParityChartsProps) => {
     const [components, setComponents] = useState<string[]>([]);
 
     if (availableComponents.length === 0) return null;
 
     return (
         <div style={{ margin: "1rem 0" }}>
-            <Typography variant="h4">Parity plots</Typography>
+            <Typography variant="h4">Parity charts</Typography>
             <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
                 {components.map((comp, idx) => (
                     <div key={idx} style={{ flex: "1 1 calc(50% - 0.5rem)", minWidth: "300px" }}>
@@ -64,7 +64,7 @@ const ParityPlots: React.FC<ParityPlotsProps> = ({ availableComponents, experime
                             </Button>
                         </div>
                         {comp && (
-                            <ScatterPlot
+                            <ScatterChart
                                 datasets={buildParityDatasets(experiments, simulationsPerExperiment, comp)}
                                 xLabel={`Measured ${comp} (ppm·mol)`}
                                 yLabel={`Modelled ${comp} (ppm·mol)`}
@@ -86,4 +86,4 @@ const ParityPlots: React.FC<ParityPlotsProps> = ({ availableComponents, experime
     );
 };
 
-export default ParityPlots;
+export default ParityCharts;
diff --git a/frontend/src/functions/Tables.ts b/frontend/src/components/LabResults/buildLabResultsTableData.ts
similarity index 96%
rename from frontend/src/functions/Tables.ts
rename to frontend/src/components/LabResults/buildLabResultsTableData.ts
index 3d80c310..3f9d06d1 100644
--- a/frontend/src/functions/Tables.ts
+++ b/frontend/src/components/LabResults/buildLabResultsTableData.ts
@@ -1,6 +1,6 @@
 import { ExperimentResult } from "@/dto/ExperimentResult";
 
-export function buildLabResultsTableData(labResults: ExperimentResult[]) {
+export const buildLabResultsTableData = (labResults: ExperimentResult[]) => {
     const initialPrefix = "in-";
     const finalPrefix = "out-";
 
@@ -83,4 +83,4 @@ export function buildLabResultsTableData(labResults: ExperimentResult[]) {
     }));
 
     return { columns, rows };
-}
+};
diff --git a/frontend/src/components/Simulation/ConcResultTable.tsx b/frontend/src/components/Simulation/ConcResultTable.tsx
deleted file mode 100644
index 40e0bfb5..00000000
--- a/frontend/src/components/Simulation/ConcResultTable.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Table } from "@equinor/eds-core-react";
-
-interface ResultConcTableProps {
-    initialConcentrations: Record<string, number>;
-    finalConcentrations: Record<string, number>;
-}
-const ResultConcTable: React.FC<ResultConcTableProps> = ({ initialConcentrations, finalConcentrations }) => {
-    return (
-        <Table>
-            <Table.Head>
-                <Table.Row>
-                    <Table.Cell>Component</Table.Cell>
-                    <Table.Cell>Initial</Table.Cell>
-                    <Table.Cell>Final</Table.Cell>
-                    <Table.Cell>Change</Table.Cell>
-                </Table.Row>
-            </Table.Head>
-            <Table.Body>
-                {Object.keys(finalConcentrations)
-                    .filter(
-                        (key) => (initialConcentrations[key] ?? 0) >= 0.001 || (finalConcentrations[key] ?? 0) >= 0.001
-                    )
-                    .map((key, index) => {
-                        const init = initialConcentrations[key] ?? 0;
-                        const final = finalConcentrations[key] ?? 0;
-                        const change = final - init;
-
-                        return (
-                            <Table.Row key={index}>
-                                <Table.Cell>{key}</Table.Cell>
-                                <Table.Cell>{init >= 0.001 ? init.toFixed(3) : "-"}</Table.Cell>
-                                <Table.Cell>{final >= 0.001 ? final.toFixed(3) : "-"}</Table.Cell>
-                                <Table.Cell>{Math.abs(change) >= 0.001 ? change.toFixed(3) : "-"}</Table.Cell>
-                            </Table.Row>
-                        );
-                    })}
-            </Table.Body>
-        </Table>
-    );
-};
-
-export default ResultConcTable;
diff --git a/frontend/src/components/Simulation/ResultStep.tsx b/frontend/src/components/Simulation/ResultStep.tsx
index d1e53e64..1b14b7f3 100644
--- a/frontend/src/components/Simulation/ResultStep.tsx
+++ b/frontend/src/components/Simulation/ResultStep.tsx
@@ -1,9 +1,9 @@
 import { convertSimulationQueriesResultToTabulatedData, convertTabulatedDataToCSVFormat } from "@/functions/Formatting";
 import { Banner } from "@equinor/eds-core-react";
 import DownloadButton from "../DownloadButton";
-import { SimulationResults } from "@/dto/SimulationResults";
-import Working from "./Working";
-import NoResults from "./NoResults";
+import { SimulationResults, getPrimaryModel } from "@/dto/SimulationResults";
+import Working from "@/components/SimulationStatus/Working";
+import NoResults from "@/components/SimulationStatus/NoResults";
 import Results from "./Results";
 
 type ResultStepProps = {
@@ -46,7 +46,7 @@ const ResultStep: React.FC<ResultStepProps> = ({ simulationResults, isLoading, e
                     <DownloadButton
                         csvContent={convertTabulatedDataToCSVFormat([
                             ...convertSimulationQueriesResultToTabulatedData({
-                                [`${simulationResults.input.models[0].modelId}`]: [simulationResults],
+                                [getPrimaryModel(simulationResults)?.modelId ?? "Unknown"]: [simulationResults],
                             }),
                         ])}
                         fileName={`AcidWatch-ModelResults-${new Date().toISOString().replace(/[:.]/g, "-")}.csv`}
diff --git a/frontend/src/components/Simulation/Results.tsx b/frontend/src/components/Simulation/Results.tsx
index 6f6b7071..af4f2952 100644
--- a/frontend/src/components/Simulation/Results.tsx
+++ b/frontend/src/components/Simulation/Results.tsx
@@ -5,9 +5,9 @@ import { Panel, SimulationResults } from "@/dto/SimulationResults";
 import PhaseResultTable from "@/components/Simulation/PhaseResultTable";
 import Reactions from "../../pages/Reactions";
 import { MassBalanceError } from "@/components/Simulation/MassBalanceError";
-import { extractPlotData } from "@/functions/Formatting";
-import BarChart from "@/components/BarChart";
-import GenericTable from "@/components/GenericTable";
+import { extractChartData } from "@/functions/Formatting";
+import BarChart from "@/components/Charts/BarChart";
+import GenericTable from "@/components/Tables/GenericTable";
 import { useAvailableModels } from "@/contexts/ModelContext";
 import { buildModelSections } from "@/utils/modelUtils";
 import ModelAccordionLayout, { AccordionItem } from "@/components/ModelAccordionLayout";
@@ -87,7 +87,7 @@ const ModelResultTabs: React.FC<ModelResultTabsProps> = ({ simulationResults, mo
 
                     <BarChart
                         aspectRatio={2}
-                        graphData={extractPlotData(initialConcentrations, phasesWithConcentrations)}
+                        graphData={extractChartData(initialConcentrations, phasesWithConcentrations)}
                         xLabel="Components"
                         yLabel="Concentration (ppm·mol)"
                     />
diff --git a/frontend/src/components/Simulation/InputStep.tsx b/frontend/src/components/SimulationInput/InputStep.tsx
similarity index 92%
rename from frontend/src/components/Simulation/InputStep.tsx
rename to frontend/src/components/SimulationInput/InputStep.tsx
index 74474234..092deee4 100644
--- a/frontend/src/components/Simulation/InputStep.tsx
+++ b/frontend/src/components/SimulationInput/InputStep.tsx
@@ -1,6 +1,6 @@
 import { ModelConfig } from "@/dto/FormConfig";
 import React from "react";
-import ModelInputs from "./ModelInputs";
+import ModelInputs from "@/components/SimulationInput/ModelInputs";
 import noModelImage from "@/assets/no-model-light.svg";
 import CenteredImage from "@/components/CenteredImage";
 import { CreateGridSimulation } from "@/dto/GridSimulation";
diff --git a/frontend/src/components/Simulation/ModelInputs.tsx b/frontend/src/components/SimulationInput/ModelInputs.tsx
similarity index 100%
rename from frontend/src/components/Simulation/ModelInputs.tsx
rename to frontend/src/components/SimulationInput/ModelInputs.tsx
diff --git a/frontend/src/components/Simulation/ModelSelect.tsx b/frontend/src/components/SimulationInput/ModelSelect.tsx
similarity index 100%
rename from frontend/src/components/Simulation/ModelSelect.tsx
rename to frontend/src/components/SimulationInput/ModelSelect.tsx
diff --git a/frontend/src/components/Simulation/NoResults.tsx b/frontend/src/components/SimulationStatus/NoResults.tsx
similarity index 100%
rename from frontend/src/components/Simulation/NoResults.tsx
rename to frontend/src/components/SimulationStatus/NoResults.tsx
diff --git a/frontend/src/components/Simulation/Working.tsx b/frontend/src/components/SimulationStatus/Working.tsx
similarity index 100%
rename from frontend/src/components/Simulation/Working.tsx
rename to frontend/src/components/SimulationStatus/Working.tsx
diff --git a/frontend/src/components/ConcentrationTable.tsx b/frontend/src/components/Tables/ConcentrationTable.tsx
similarity index 100%
rename from frontend/src/components/ConcentrationTable.tsx
rename to frontend/src/components/Tables/ConcentrationTable.tsx
diff --git a/frontend/src/components/GenericTable.tsx b/frontend/src/components/Tables/GenericTable.tsx
similarity index 80%
rename from frontend/src/components/GenericTable.tsx
rename to frontend/src/components/Tables/GenericTable.tsx
index 3284058e..3d48e22c 100644
--- a/frontend/src/components/GenericTable.tsx
+++ b/frontend/src/components/Tables/GenericTable.tsx
@@ -1,8 +1,11 @@
 import React from "react";
 import { Table } from "@equinor/eds-core-react";
 import { convertToSubscripts } from "@/functions/Formatting";
+
+type TableValue = string | number | null | undefined;
+
 interface GenericTableProps {
-    data: Record<string, any>[];
+    data: Record<string, TableValue>[];
 }
 
 const GenericTable: React.FC<GenericTableProps> = ({ data }) => {
@@ -15,13 +18,13 @@ const GenericTable: React.FC<GenericTableProps> = ({ data }) => {
             <Table.Head>
                 <Table.Row>
                     {columns.map((col) => (
-                        <Table.Cell>{col}</Table.Cell>
+                        <Table.Cell key={col}>{col}</Table.Cell>
                     ))}
                 </Table.Row>
             </Table.Head>
             <Table.Body>
-                {data.map((row) => (
-                    <Table.Row>
+                {data.map((row, rowIndex) => (
+                    <Table.Row key={rowIndex}>
                         {columns.map((col) => (
                             <Table.Cell key={col} style={{ whiteSpace: "pre-line" }}>
                                 {typeof row[col] === "string" ? convertToSubscripts(row[col]) : row[col]}
diff --git a/frontend/src/dto/GridSimulation.ts b/frontend/src/dto/GridSimulation.ts
index 36a311a7..e4fdb797 100644
--- a/frontend/src/dto/GridSimulation.ts
+++ b/frontend/src/dto/GridSimulation.ts
@@ -33,3 +33,7 @@ export const GridSimulationResult = z.object({
     simulations: z.array(SimulationResults),
 });
 export type GridSimulationResult = z.infer<typeof GridSimulationResult>;
+
+export const getGridInput = (result: GridSimulationResult) => result.simulations.at(0)?.input;
+
+export const getGridAxis = (result: GridSimulationResult) => result.axes.at(0);
diff --git a/frontend/src/dto/SimulationResults.ts b/frontend/src/dto/SimulationResults.ts
index c3ca6d55..f88432db 100644
--- a/frontend/src/dto/SimulationResults.ts
+++ b/frontend/src/dto/SimulationResults.ts
@@ -36,12 +36,6 @@ export const Phase = z.object({
 });
 export type Phase = z.infer<typeof Phase>;
 
-export const getCo2RichPhase = (phases: Phase[] = []): Phase | undefined =>
-    phases.find((phase) => phase.kind === "co2-rich");
-
-export const getCo2RichConcentrations = (phases: Phase[] = []): Record<string, number> =>
-    getCo2RichPhase(phases)?.concentrations ?? {};
-
 export const SimulationResults = z.object({
     status: z.enum(["done", "pending", "processing", "error"]),
     input: ModelInput,
@@ -54,3 +48,18 @@ export const SimulationResults = z.object({
     error: z.nullable(z.string()).optional(),
 });
 export type SimulationResults = z.infer<typeof SimulationResults>;
+
+export const getModelResult = (simulation: SimulationResults, modelIndex: number) => simulation.results[modelIndex];
+
+export const getFinalResult = (simulation: SimulationResults) =>
+    [...simulation.results].reverse().find((result) => result.phases.length > 0);
+
+export const getPrimaryModel = (simulation: SimulationResults) => simulation.input.models.at(0);
+
+export const getPhaseConcentrations = (phases: Phase[] = [], phaseKind: Phase["kind"]): Record<string, number> =>
+    phases.find((phase) => phase.kind === phaseKind)?.concentrations ?? {};
+
+export const getOutputConcentrations = (
+    simulation: SimulationResults,
+    phaseKind: Phase["kind"] = "co2-rich"
+): Record<string, number> => getPhaseConcentrations(getFinalResult(simulation)?.phases, phaseKind);
diff --git a/frontend/src/functions/Formatting.tsx b/frontend/src/functions/Formatting.tsx
index 8e43f496..6b679519 100644
--- a/frontend/src/functions/Formatting.tsx
+++ b/frontend/src/functions/Formatting.tsx
@@ -1,4 +1,4 @@
-import { SimulationResults, Phase, getCo2RichConcentrations } from "@/dto/SimulationResults";
+import { SimulationResults, Phase, getOutputConcentrations, getPrimaryModel } from "@/dto/SimulationResults";
 import { ChartDataSet, TabulatedResultRow } from "@/dto/ChartData";
 import { ExperimentResult } from "@/dto/ExperimentResult";
 
@@ -48,7 +48,7 @@ export const convertToSubscripts = (chemicalFormula: string): React.ReactNode =>
     return <p>{result}</p>;
 };
 
-export const extractPlotData = (inputConcentrations: Record<string, number>, phases: Phase[]): ChartDataSet[] => {
+export const extractChartData = (inputConcentrations: Record<string, number>, phases: Phase[]): ChartDataSet[] => {
     const allKeys = Array.from(
         new Set([...Object.keys(inputConcentrations), ...phases.flatMap((phase) => Object.keys(phase.concentrations))])
     );
@@ -78,9 +78,9 @@ export const extractPlotData = (inputConcentrations: Record<string, number>, pha
 };
 
 export const convertSimulationToChartData = (simulation: SimulationResults, experimentName: string): ChartDataSet => {
-    const concentrations = getCo2RichConcentrations(simulation.results[0]?.phases);
+    const concentrations = getOutputConcentrations(simulation);
     return {
-        label: `${simulation.input.models[0].modelId} - ${experimentName}`,
+        label: `${getPrimaryModel(simulation)?.modelId ?? "Unknown"} - ${experimentName}`,
         data: Object.entries(concentrations)
             .filter(([, y]) => y !== 0)
             .map(([x, y]) => ({ x, y })),
@@ -121,10 +121,10 @@ export const convertSimulationQueriesResultToTabulatedData = (
         simulations.forEach((simulation) => {
             tabulatedData.push(
                 buildTabulatedRow(
-                    `${simulation.input.models[0].modelId || "Unknown"} - ${experimentName}`,
+                    `${getPrimaryModel(simulation)?.modelId ?? "Unknown"} - ${experimentName}`,
                     simulation.input.concentrations,
-                    getCo2RichConcentrations(simulation.results[0]?.phases),
-                    { ...simulation.input.conditions, ...simulation.input.models[0].parameters }
+                    getOutputConcentrations(simulation),
+                    { ...simulation.input.conditions, ...getPrimaryModel(simulation)?.parameters }
                 )
             );
         });
diff --git a/frontend/src/hooks/useRestoreSimulationInput.ts b/frontend/src/hooks/useRestoreSimulationInput.ts
new file mode 100644
index 00000000..a8587a8d
--- /dev/null
+++ b/frontend/src/hooks/useRestoreSimulationInput.ts
@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { Axis } from "@/dto/GridSimulation";
+import { ModelConfig } from "@/dto/FormConfig";
+import { ModelInput } from "@/dto/ModelInput";
+import { useConcentrationsStore } from "@/hooks/useConcentrationsStore";
+import { useConditionsStore } from "@/hooks/useConditionsStore";
+import { useGridRangeStore } from "@/hooks/useGridRangeStore";
+import { getModelInputStore } from "@/hooks/useModelInputStore";
+
+export const useRestoreSimulationInput = (
+    input: ModelInput | undefined,
+    axes: Axis[] | undefined,
+    availableModels: ModelConfig[],
+    setSelectedModels: (models: ModelConfig[]) => void
+) => {
+    useEffect(() => {
+        if (!input || availableModels.length === 0) return;
+
+        const selectedModels = input.models.flatMap((modelInput) => {
+            const model = availableModels.find((candidate) => candidate.modelId === modelInput.modelId);
+            if (!model) {
+                console.warn(`Could not find model ${modelInput.modelId}`);
+                return [];
+            }
+
+            getModelInputStore(model).getState().reset({ parameters: modelInput.parameters });
+            return [model];
+        });
+
+        useConcentrationsStore.getState().reset(input.concentrations);
+        useConditionsStore.getState().reset(input.conditions);
+        useGridRangeStore.getState().reset({ axes });
+        setSelectedModels(selectedModels);
+    }, [input, axes, availableModels, setSelectedModels]);
+};
diff --git a/frontend/src/pages/Compare.tsx b/frontend/src/pages/Compare.tsx
index 6b518308..8bc76684 100644
--- a/frontend/src/pages/Compare.tsx
+++ b/frontend/src/pages/Compare.tsx
@@ -1,172 +1,19 @@
 import React from "react";
 import { useSearchParams } from "react-router-dom";
-import { useQueries } from "@tanstack/react-query";
-import { getResultForSimulation, ResultIsPending } from "@/api/api";
-import { MainContainer } from "@/components/styles";
-import { Typography, CircularProgress, Banner } from "@equinor/eds-core-react";
-import { SimulationResults, getCo2RichConcentrations } from "@/dto/SimulationResults";
-import BarChart from "@/components/BarChart";
-import { ChartDataSet } from "@/dto/ChartData";
-import ConcentrationTable from "@/components/ConcentrationTable";
-import CompareGridSimulations from "@/components/GridSimulation/CompareGridSimulations";
+import CompareGridSimulations from "@/components/Comparison/CompareGridSimulations";
+import CompareSimulations from "@/components/Comparison/CompareSimulations";
 
-type SimulationComparison = {
-    id: string;
-    modelName: string;
-    inputConcentrations: Record<string, number>;
-    outputConcentrations: Record<string, number>;
-};
+const parseIds = (value: string | null): string[] => value?.split(",").filter(Boolean) ?? [];
 
 const Compare: React.FC = () => {
     const [searchParams] = useSearchParams();
-    const gridParam = searchParams.get("grids");
-    const idsParam = searchParams.get("ids");
+    const gridIds = parseIds(searchParams.get("grids"));
 
-    if (gridParam) {
-        const gridIds = gridParam.split(",").filter(Boolean);
+    if (gridIds.length > 0) {
         return <CompareGridSimulations gridIds={gridIds} />;
     }
 
-    const simulationIds = idsParam ? idsParam.split(",").filter(Boolean) : [];
-    return <CompareSimulations simulationIds={simulationIds} />;
-};
-
-const CompareSimulations: React.FC<{ simulationIds: string[] }> = ({ simulationIds }) => {
-    const queries = useQueries({
-        queries: simulationIds.map((id) => ({
-            queryKey: ["simulation", id],
-            queryFn: () => getResultForSimulation(id),
-            retry: (_count: number, error: Error) => error instanceof ResultIsPending,
-            retryDelay: () => 2000,
-        })),
-    });
-
-    const isLoading = queries.some((q) => q.isLoading);
-    const hasError = queries.some((q) => q.isError);
-
-    let content;
-
-    if (simulationIds.length === 0) {
-        content = <Typography variant="body_short">No simulations selected for comparison.</Typography>;
-    } else if (isLoading) {
-        content = <CircularProgress />;
-    } else if (hasError) {
-        content = (
-            <Typography variant="body_short" style={{ color: "red" }}>
-                Error loading simulation results
-            </Typography>
-        );
-    }
-
-    if (content) {
-        return (
-            <MainContainer>
-                <Typography variant="h2" style={{ marginBottom: "2rem" }}>
-                    Compare Simulations
-                </Typography>
-                {content}
-            </MainContainer>
-        );
-    }
-
-    const simulationResults = queries.map((q) => q.data as SimulationResults);
-
-    const comparisons: SimulationComparison[] = simulationResults.map((result, index) => {
-        const finalResult = [...result.results].reverse().find((r) => r.phases.length > 0);
-        const firstModel = result.input.models[0];
-
-        return {
-            id: simulationIds[index],
-            modelName: firstModel?.modelId || "Unknown",
-            inputConcentrations: result.input.concentrations || {},
-            outputConcentrations: getCo2RichConcentrations(finalResult?.phases),
-        };
-    });
-
-    const allInputsMatch = (() => {
-        if (comparisons.length < 2) return true;
-
-        const firstInputStr = JSON.stringify(Object.entries(comparisons[0].inputConcentrations).sort());
-        return comparisons.every(
-            (comp) => JSON.stringify(Object.entries(comp.inputConcentrations).sort()) === firstInputStr
-        );
-    })();
-
-    const collectUniqueSubstances = (
-        field: keyof Pick<SimulationComparison, "inputConcentrations" | "outputConcentrations">
-    ) => {
-        const substances = new Set<string>();
-        comparisons.forEach((comp) => {
-            Object.keys(comp[field]).forEach((substance) => substances.add(substance));
-        });
-        return Array.from(substances).sort();
-    };
-
-    const inputSubstances = collectUniqueSubstances("inputConcentrations");
-    const outputSubstances = collectUniqueSubstances("outputConcentrations");
-
-    const significantOutputs = outputSubstances.filter((substance) =>
-        comparisons.some((comp) => (comp.outputConcentrations[substance] || 0) >= 0.01)
-    );
-
-    const chartData: ChartDataSet[] = comparisons.map((comp) => ({
-        label: `${comp.modelName} (${comp.id.slice(0, 8)})`,
-        data: significantOutputs.map((substance) => ({
-            x: substance,
-            y: comp.outputConcentrations[substance] || 0,
-        })),
-    }));
-
-    return (
-        <MainContainer>
-            <Typography variant="h2" style={{ marginBottom: "2rem" }}>
-                Compare Simulations
-            </Typography>
-
-            {!allInputsMatch && (
-                <Banner style={{ marginBottom: "2rem" }}>
-                    <Banner.Icon variant="warning">⚠️</Banner.Icon>
-                    <Banner.Message>
-                        Warning: The selected simulations have different input concentrations. You may be comparing
-                        incompatible scenarios.
-                    </Banner.Message>
-                </Banner>
-            )}
-
-            <Typography variant="h4" style={{ marginBottom: "1rem" }}>
-                Input Concentrations
-            </Typography>
-
-            <ConcentrationTable
-                substances={inputSubstances}
-                simulations={comparisons.map((c) => ({
-                    id: c.id,
-                    modelName: c.modelName,
-                    concentrations: c.inputConcentrations,
-                }))}
-                highlightDifferences={true}
-            />
-
-            <Typography variant="h4" style={{ marginBottom: "1rem", marginTop: "3rem" }}>
-                Output Concentrations
-            </Typography>
-
-            <BarChart graphData={chartData} aspectRatio={3} xLabel="Components" yLabel="Concentration (ppm·mol)" />
-
-            <Typography variant="h5" style={{ marginBottom: "1rem" }}>
-                Concentration Values (≥ 0.01)
-            </Typography>
-
-            <ConcentrationTable
-                substances={significantOutputs}
-                simulations={comparisons.map((c) => ({
-                    id: c.id,
-                    modelName: c.modelName,
-                    concentrations: c.outputConcentrations,
-                }))}
-            />
-        </MainContainer>
-    );
+    return <CompareSimulations simulationIds={parseIds(searchParams.get("ids"))} />;
 };
 
 export default Compare;
diff --git a/frontend/src/pages/LabResults.tsx b/frontend/src/pages/LabResults.tsx
index f47b948c..791be367 100644
--- a/frontend/src/pages/LabResults.tsx
+++ b/frontend/src/pages/LabResults.tsx
@@ -4,9 +4,9 @@ import { getLabResults } from "@/api/api";
 import { paperResults } from "@/assets/morland2019acid.ts";
 import { Button, Card, Checkbox, Divider, Typography } from "@equinor/eds-core-react";
 import { useAvailableModels } from "@/contexts/ModelContext";
-import LabResultsPlot from "@/components/LabResultsPlot";
-import ParityPlots from "@/components/ParityPlots";
-import LabResultsTable from "@/components/LabResultsTable";
+import LabResultsChart from "@/components/LabResults/LabResultsChart";
+import ParityCharts from "@/components/LabResults/ParityCharts";
+import LabResultsTable from "@/components/LabResults/LabResultsTable";
 import { ExperimentResult } from "@/dto/ExperimentResult.tsx";
 import { useSimulationQueries } from "@/hooks/useSimulationQueriesResult.ts";
 import DownloadButton from "@/components/DownloadButton.tsx";
@@ -149,12 +149,12 @@ const LabResults: React.FC = () => {
 
             <Statuses statuses={statuses} />
 
-            <LabResultsPlot
+            <LabResultsChart
                 selectedExperiments={selectedExperiments}
                 simulationsPerExperiment={simulationsPerExperiment}
             />
 
-            <ParityPlots
+            <ParityCharts
                 availableComponents={availableComponents}
                 experiments={selectedExperimentData}
                 simulationsPerExperiment={simulationsPerExperiment}
diff --git a/frontend/src/pages/Models.tsx b/frontend/src/pages/Models.tsx
index a562dd70..0c2cd550 100644
--- a/frontend/src/pages/Models.tsx
+++ b/frontend/src/pages/Models.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import ModelSelect from "@/components/Simulation/ModelSelect";
+import ModelSelect from "@/components/SimulationInput/ModelSelect";
 import { ModelConfig } from "@/dto/FormConfig";
 import { useAvailableModels } from "@/contexts/ModelContext";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -14,14 +14,12 @@ import Step from "@/components/Step";
 import { MainContainer } from "@/components/styles";
 import { useNavigate, useParams } from "react-router-dom";
 import { simulationHistory } from "@/hooks/useSimulationHistory.ts";
-import { getModelInputStore } from "@/hooks/useModelInputStore";
-import { useConcentrationsStore } from "@/hooks/useConcentrationsStore";
-import { useConditionsStore } from "@/hooks/useConditionsStore";
-import { useGridRangeStore } from "@/hooks/useGridRangeStore";
-import InputStep from "@/components/Simulation/InputStep";
+import InputStep from "@/components/SimulationInput/InputStep";
 import ResultStep from "@/components/Simulation/ResultStep";
 import GridResultStep from "@/components/GridSimulation/GridResultStep";
 import ErrorBoundary from "@/components/ErrorBoundary.tsx";
+import { getGridInput } from "@/dto/GridSimulation";
+import { useRestoreSimulationInput } from "@/hooks/useRestoreSimulationInput";
 
 const Models: React.FC = () => {
     const [selectedModels, setSelectedModels] = useState<ModelConfig[]>([]);
@@ -111,57 +109,9 @@ const Models: React.FC = () => {
         }
     }, [gridId, gridResult?.status, gridResultError]);
 
-    useEffect(() => {
-        if (simulationResults && simulationResults.status !== "error" && models.length > 0) {
-            const loadedModels: ModelConfig[] = [];
-
-            simulationResults.input.models.forEach((modelInput) => {
-                const model = models.find((m) => m.modelId === modelInput.modelId);
-                if (model) {
-                    loadedModels.push(model);
-                    getModelInputStore(model).getState().reset({
-                        parameters: modelInput.parameters,
-                    });
-                } else {
-                    console.log(`Could not find model ${modelInput.modelId}`);
-                }
-            });
-
-            useConcentrationsStore.getState().reset(simulationResults.input.concentrations);
-            useConditionsStore.getState().reset(simulationResults.input.conditions);
-            setSelectedModels(loadedModels);
-        }
-    }, [simulationResults, models]);
-
-    const gridInput = gridResult?.simulations[0]?.input;
-    const gridAxes = gridResult?.axes;
-
-    useEffect(() => {
-        if (gridInput && gridAxes && models.length > 0) {
-            const loadedModels: ModelConfig[] = [];
-
-            gridInput.models.forEach((modelInput) => {
-                const model = models.find((m) => m.modelId === modelInput.modelId);
-                if (model) {
-                    loadedModels.push(model);
-                    getModelInputStore(model).getState().reset({
-                        parameters: modelInput.parameters,
-                    });
-                } else {
-                    console.log(`Could not find model ${modelInput.modelId}`);
-                }
-            });
-
-            useConcentrationsStore.getState().reset(gridInput.concentrations);
-            useConditionsStore.getState().reset(gridInput.conditions);
-
-            useGridRangeStore.getState().reset({
-                axes: gridAxes,
-            });
-
-            setSelectedModels(loadedModels);
-        }
-    }, [gridInput, gridAxes, models, gridId]);
+    const gridInput = gridResult && getGridInput(gridResult);
+    const simulationInput = simulationResults?.status === "error" ? undefined : simulationResults?.input;
+    useRestoreSimulationInput(gridInput ?? simulationInput, gridResult?.axes, models, setSelectedModels);
 
     const isGridMode = gridId !== undefined;
 
diff --git a/frontend/src/pages/Reactions.tsx b/frontend/src/pages/Reactions.tsx
index b7867a39..203e605b 100644
--- a/frontend/src/pages/Reactions.tsx
+++ b/frontend/src/pages/Reactions.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Button, Typography } from "@equinor/eds-core-react";
 
-import GenericTable from "@/components/GenericTable";
+import GenericTable from "@/components/Tables/GenericTable";
 const Reactions: React.FC<{ commonPaths: any; reactions: Record<string, any> }> = ({ commonPaths, reactions }) => {
     const [isReactionsLimited, setIsReactionsLimited] = useState<boolean>(true);
     const reactionLimit = 5;
diff --git a/frontend/tests/components/LabResultPlot.test.tsx b/frontend/tests/components/LabResultsChart.test.tsx
similarity index 94%
rename from frontend/tests/components/LabResultPlot.test.tsx
rename to frontend/tests/components/LabResultsChart.test.tsx
index a5bb2cd7..ec6a6e4b 100644
--- a/frontend/tests/components/LabResultPlot.test.tsx
+++ b/frontend/tests/components/LabResultsChart.test.tsx
@@ -1,11 +1,11 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
-import LabResultsPlot from "@/components/LabResultsPlot";
+import LabResultsChart from "@/components/LabResults/LabResultsChart";
 import { ExperimentResult } from "@/dto/ExperimentResult";
 import { ChartDataSet } from "@/dto/ChartData";
 import { SimulationResults } from "@/dto/SimulationResults";
 
-vi.mock("@/components/BarChart", () => ({
+vi.mock("@/components/Charts/BarChart", () => ({
     default: vi.fn(({ graphData, aspectRatio }) => (
         <div data-testid="bar-chart" data-graph-data={JSON.stringify(graphData)} data-aspect-ratio={aspectRatio}>
             BarChart with {graphData.length} datasets
@@ -13,7 +13,7 @@ vi.mock("@/components/BarChart", () => ({
     )),
 }));
 
-describe("LabResultsPlot Component", () => {
+describe("LabResultsChart Component", () => {
     const mockExperiments: ExperimentResult[] = [
         {
             name: "Experiment Gondor",
@@ -61,7 +61,7 @@ describe("LabResultsPlot Component", () => {
 
     it("passes data correctly to BarChart component", () => {
         render(
-            <LabResultsPlot
+            <LabResultsChart
                 selectedExperiments={mockExperiments}
                 simulationsPerExperiment={mockSimulationQueries}
                 isLoading={false}
@@ -89,7 +89,7 @@ describe("LabResultsPlot Component", () => {
 
     it("filters chart data when components are selected", () => {
         render(
-            <LabResultsPlot
+            <LabResultsChart
                 selectedExperiments={mockExperiments}
                 simulationsPerExperiment={mockSimulationQueries}
                 isLoading={false}
@@ -115,7 +115,7 @@ describe("LabResultsPlot Component", () => {
 
     it("handles multiple component selection correctly", () => {
         render(
-            <LabResultsPlot
+            <LabResultsChart
                 selectedExperiments={mockExperiments}
                 simulationsPerExperiment={mockSimulationQueries}
                 isLoading={false}
@@ -141,7 +141,7 @@ describe("LabResultsPlot Component", () => {
 
     it("shows all data when no components are filtered", () => {
         render(
-            <LabResultsPlot
+            <LabResultsChart
                 selectedExperiments={mockExperiments}
                 simulationsPerExperiment={mockSimulationQueries}
                 isLoading={false}
diff --git a/frontend/tests/functions/Tables.test.tsx b/frontend/tests/components/buildLabResultsTableData.test.tsx
similarity index 95%
rename from frontend/tests/functions/Tables.test.tsx
rename to frontend/tests/components/buildLabResultsTableData.test.tsx
index 12375643..59954cd1 100644
--- a/frontend/tests/functions/Tables.test.tsx
+++ b/frontend/tests/components/buildLabResultsTableData.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { buildLabResultsTableData } from "@/functions/Tables";
+import { buildLabResultsTableData } from "@/components/LabResults/buildLabResultsTableData";
 import type { ExperimentResult } from "@/dto/ExperimentResult";
 
 describe("buildLabResultsTableData", () => {