diff --git a/src/components/CaseCardComponent/CaseCardComponent.styled.tsx b/src/components/CaseCardComponent/CaseCardComponent.styled.tsx
new file mode 100644
index 00000000..c823d19a
--- /dev/null
+++ b/src/components/CaseCardComponent/CaseCardComponent.styled.tsx
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { spacings } from '../../tokens/spacings';
+import { theme } from '../../tokens/theme';
+
+export const Wrapper = styled.div`
+  border-left: solid;
+  border-width: ${spacings.SMALL};
+  border-color: ${theme.light.primary.resting};
+  border-radius: ${spacings.BORDER_ROUNDED};
+`;
+
+export const Title = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  padding: ${spacings.LARGE} 0 0 ${spacings.LARGE};
+  column-gap: ${spacings.MEDIUM};
+`;
+
+export const CaseBorder = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.XXX_LARGE};
+
+  border-radius: ${spacings.CARD_ROUNDED};
+  border: solid 1px ${theme.light.ui.background.medium};
+`;
diff --git a/src/components/CaseCardComponent/CaseCardComponent.tsx b/src/components/CaseCardComponent/CaseCardComponent.tsx
new file mode 100644
index 00000000..346041f1
--- /dev/null
+++ b/src/components/CaseCardComponent/CaseCardComponent.tsx
@@ -0,0 +1,21 @@
+import { Typography } from '@equinor/eds-core-react';
+import * as Styled from './CaseCardComponent.styled';
+
+export const CaseCardComponent = ({
+  children,
+  title,
+}: {
+  children: React.ReactNode;
+  title: string;
+}) => {
+  return (
+    <Styled.CaseBorder>
+      <Styled.Wrapper>
+        <Styled.Title>
+          <Typography variant="h4">{title}</Typography>
+        </Styled.Title>
+        {children}
+      </Styled.Wrapper>
+    </Styled.CaseBorder>
+  );
+};
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
index 925dd3db..3e6df56a 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
@@ -13,6 +13,8 @@ import { ModelSelect } from './CaseCardParameters/ModelSelect/ModelSelect';
 import { GrainSizeSelect } from './CaseCardParameters/GrainSizeSelect/GrainSizeSelect';
 import { ParameterSelect } from './CaseCardParameters/ParameterSelect/ParameterSelect';
 
+import { CaseCardComponent } from '../../../../components/CaseCardComponent/CaseCardComponent';
+
 export default interface optionTypes {
   id: number;
   name: string;
@@ -57,11 +59,6 @@ export const CaseCard = ({
     { id: 7, name: 'General exponential' },
   ];
 
-  // const parameterOptions: optionTypes[] = [
-  //   { id: 8, name: 'Porosity' },
-  //   { id: 9, name: 'Permeability' },
-  // ];
-
   const modelAreas: optionTypes[] = [
     { id: 10, name: 'Proximal' },
     { id: 11, name: 'Left' },
@@ -87,9 +84,8 @@ export const CaseCard = ({
   };
 
   return (
-    <Styled.Wrapper>
+    <CaseCardComponent title={name}>
       <Styled.Case>
-        <Typography variant="h4">{name}</Typography>
         <Styled.CaseCard>
           {caseType === 'variogram' ? (
             <VariogramCaseCardInputs
@@ -158,6 +154,6 @@ export const CaseCard = ({
           </Styled.Parameters>
         )}
       </div>
-    </Styled.Wrapper>
+    </CaseCardComponent>
   );
 };
diff --git a/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.styled.tsx b/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.styled.tsx
deleted file mode 100644
index 73c729ac..00000000
--- a/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.styled.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-import { spacings } from '../../../../tokens/spacings';
-import { theme } from '../../../../tokens/theme';
-
-export const CaseResultCard = styled.div`
-  display: flex;
-  flex-direction: row;
-
-  width: 60%;
-  column-gap: ${spacings.LARGE};
-  padding-left: ${spacings.LARGE};
-
-  background-color: ${theme.light.ui.background.light};
-
-  &:hover {
-    background-color: ${theme.light.ui.background.medium};
-    cursor: pointer;
-  }
-`;
diff --git a/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.tsx b/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.tsx
deleted file mode 100644
index f797179b..00000000
--- a/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import { ResultType } from '../../../../pages/ModelPages/Results/Results';
-import * as Styled from './CaseResultCard.styled';
-
-export const CaseResultCard = ({ result }: { result: ResultType }) => {
-  const navigate = useNavigate();
-  const handleClick = () => {
-    navigate(`${result.caseId}`);
-  };
-
-  return (
-    <Styled.CaseResultCard onClick={handleClick}>
-      <h2>{result.case}</h2>
-      {result.finished ? <h4>Finished</h4> : <h4>Not computed yet!</h4>}
-    </Styled.CaseResultCard>
-  );
-};
diff --git a/src/features/Results/CaseResult/CaseResultList/CaseResultList.styled.tsx b/src/features/Results/CaseResult/CaseResultList/CaseResultList.styled.tsx
deleted file mode 100644
index a702fc25..00000000
--- a/src/features/Results/CaseResult/CaseResultList/CaseResultList.styled.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import { spacings } from '../../../../tokens/spacings';
-
-export const CaseResultList = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  column-gap: ${spacings.LARGE};
-  row-gap: ${spacings.LARGE};
-
-  margin: ${spacings.XXX_LARGE};
-`;
diff --git a/src/features/Results/CaseResult/CaseResultList/CaseResultList.tsx b/src/features/Results/CaseResult/CaseResultList/CaseResultList.tsx
deleted file mode 100644
index 78a08596..00000000
--- a/src/features/Results/CaseResult/CaseResultList/CaseResultList.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ResultType } from '../../../../pages/ModelPages/Results/Results';
-import { CaseResultCard } from '../../CaseResult/CaseResultCard/CaseResultCard';
-import * as Styled from './CaseResultList.styled';
-
-export const CaseResultList = ({ results }: { results: ResultType[] }) => {
-  return (
-    <Styled.CaseResultList>
-      {results.map((res: ResultType) => (
-        <CaseResultCard key={res.caseId} result={res} />
-      ))}
-    </Styled.CaseResultList>
-  );
-};
diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx
index 2a863478..0751c052 100644
--- a/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx
+++ b/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx
@@ -1,77 +1,19 @@
 import styled from 'styled-components';
 import { spacings } from '../../../../tokens/spacings';
-import { theme } from '../../../../tokens/theme';
 
 export const CaseResultView = styled.div`
   display: flex;
   flex-direction: column;
 
-  row-gap: ${spacings.MEDIUM};
-  padding-left: ${spacings.LARGE};
-  padding-bottom: ${spacings.LARGE};
+  row-gap: ${spacings.XXX_LARGE};
+  padding: ${spacings.LARGE};
 
-  > h2 {
-    margin-bottom: ${spacings.SMALL};
-  }
-  > h3 {
-    margin: ${spacings.SMALL};
-  }
+  width: 75vw;
 `;
 
 export const CaseResultList = styled.div`
   display: flex;
   flex-direction: column;
 
-  row-gap: ${spacings.LARGE};
-`;
-
-export const CaseResultCard = styled.div`
-  display: flex;
-  flex-direction: row;
-  row-gap: ${spacings.LARGE};
-
-  width: 60vw;
-  padding: ${spacings.X_LARGE};
-
-  border-radius: ${spacings.CARD_ROUNDED};
-  box-shadow: ${theme.light.ui.elevation.raised};
-
-  > div {
-    width: 50%;
-  }
-`;
-export const CaseResultStatus = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  padding: ${spacings.SMALL};
-  row-gap: ${spacings.SMALL};
-`;
-
-export const CaseLeftDiv = styled.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${spacings.LARGE};
-
-  > table {
-    width: 80%;
-  }
-`;
-
-export const CaseStatusDisplay = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  column-gap: ${spacings.LARGE};
-`;
-
-export const CaseStatusButtons = styled.div`
-  display: flex;
-  flex-direction: row;
-  column-gap: ${spacings.SMALL};
-  padding-top: ${spacings.SMALL};
-
-  > button {
-    width: ${spacings.COMPUTE_BUTTON};
-  }
+  row-gap: ${spacings.XXX_LARGE};
 `;
diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx
index c1183780..e09869f2 100644
--- a/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx
+++ b/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx
@@ -1,177 +1,33 @@
-/* eslint-disable max-lines-per-function */
-import { Button, Chip, Table, Typography } from '@equinor/eds-core-react';
-import { useState } from 'react';
-import { ImageView } from '../../../../components/ImageView/ImageView';
-import { ResultType } from '../../../../pages/ModelPages/Results/Results';
 import * as Styled from './CaseResultView.styled';
-import Img from './vargrest_output-0-_variogram_slices_.png';
-import Img1 from './vargrest_output-1-_variogram_slices_.png';
-export const CaseResultView = () => {
-  const caseResult: ResultType = {
-    caseId: '1',
-    case: 'Variogramcase 1',
-    finished: true,
-  };
-  // const results: ResultType[] = [
-  //   { id: '1', case: 'Variogramcase 1', finished: true },
-  //   { id: '2', case: 'Variogramcase 2', finished: false },
-  // ]
 
+import { Typography } from '@equinor/eds-core-react';
+import {
+  ObjectResultType,
+  VariogramResultListType,
+} from '../../../../pages/ModelPages/Results/Results';
+import { ObjectCaseResult } from './ObjectCaseResult/ObjectCaseResult';
+import { VariogramCaseResult } from './VariogramCaseResult/VariogramCaseResult';
+import ResultIMG from './vargrest_output-0-_variogram_slices_.png';
+
+export const CaseResultView = ({
+  caseList,
+  objectList,
+}: {
+  caseList: VariogramResultListType[];
+  objectList: ObjectResultType[];
+}) => {
   return (
     <Styled.CaseResultView>
-      <h2>Case Results</h2>
-      <h3>{caseResult.case}</h3>
+      <Typography variant="h2">Compute results</Typography>
       <Styled.CaseResultList>
-        <ResultMetadata key={0} caseNumner={0} img={Img}></ResultMetadata>
-        <ResultMetadata key={1} caseNumner={1} img={Img1}></ResultMetadata>
-        <ResultMetadata key={2} caseNumner={2} img={Img1}></ResultMetadata>
+        <VariogramCaseResult
+          caseList={caseList}
+          img={ResultIMG}
+        ></VariogramCaseResult>
+        {objectList.map((obj) => (
+          <ObjectCaseResult key={obj.identifier} data={obj}></ObjectCaseResult>
+        ))}
       </Styled.CaseResultList>
     </Styled.CaseResultView>
   );
 };
-
-export interface ResultMetadataType {
-  identifier: number;
-  family: string;
-  indicator: string | null;
-  attribute: string;
-  quality: GLfloat;
-  sigma: GLfloat;
-  approved: string;
-}
-
-const ResultMetadata = ({
-  caseNumner,
-  img,
-}: {
-  caseNumner: number;
-  img: string;
-}) => {
-  const [data, setData] = useState<ResultMetadataType[]>([
-    {
-      identifier: 0,
-      family: 'exponential',
-      indicator: null,
-      attribute: 'Porosity',
-      quality: 0.6427819811789964,
-      sigma: 0.06967589201242001,
-      approved: 'rejected',
-    },
-    {
-      identifier: 1,
-      family: 'gaussian',
-      indicator: null,
-      attribute: 'Porosity',
-      quality: 0.5432924009373808,
-      sigma: 0.0670758033212357,
-      approved: 'pending',
-    },
-    {
-      identifier: 2,
-      family: 'general_exponential',
-      indicator: null,
-      attribute: 'Porosity',
-      quality: 0.5580294305723851,
-      sigma: 0.0678988627745677,
-      approved: 'approved',
-    },
-  ]);
-
-  const onApproveClick = () => {
-    const dataList = [...data];
-    const dataObj = { ...dataList[caseNumner] };
-    dataObj.approved = 'approved';
-    dataList[caseNumner] = dataObj;
-
-    setData(dataList);
-  };
-  const onRejectClick = () => {
-    const dataList = [...data];
-    const dataObj = { ...dataList[caseNumner] };
-    dataObj.approved = 'rejected';
-    dataList[caseNumner] = dataObj;
-
-    setData(dataList);
-  };
-
-  const onResetClick = () => {
-    const dataList = [...data];
-    const dataObj = { ...dataList[caseNumner] };
-    dataObj.approved = 'pending';
-    dataList[caseNumner] = dataObj;
-
-    setData(dataList);
-  };
-  return (
-    <Styled.CaseResultCard>
-      <Styled.CaseLeftDiv>
-        <Table>
-          <Table.Body key={data[caseNumner].identifier}>
-            <Table.Row className="table-row">
-              <Table.Cell className="table-first-col">Family</Table.Cell>
-              <Table.Cell>{data[caseNumner].family}</Table.Cell>
-            </Table.Row>
-            <Table.Row className="table-row">
-              <Table.Cell className="table-first-col">
-                Quality factor
-              </Table.Cell>
-              <Table.Cell>{data[caseNumner].quality}</Table.Cell>
-            </Table.Row>
-
-            <Table.Row className="table-row">
-              <Table.Cell className="table-first-col">Attribute</Table.Cell>
-              <Table.Cell>{data[caseNumner].attribute}</Table.Cell>
-            </Table.Row>
-            <Table.Row className="table-row">
-              <Table.Cell className="table-first-col">Sigma</Table.Cell>
-              <Table.Cell>{data[caseNumner].sigma}</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-        <Styled.CaseResultStatus>
-          <Styled.CaseStatusDisplay>
-            <Typography variant="h4">Status: </Typography>
-            {data[caseNumner].approved === 'approved' && (
-              <Chip variant="active">Approved</Chip>
-            )}
-            {data[caseNumner].approved === 'pending' && <Chip>Pending</Chip>}
-            {data[caseNumner].approved === 'rejected' && (
-              <Chip variant="error">Not aproved</Chip>
-            )}
-          </Styled.CaseStatusDisplay>
-
-          <Styled.CaseStatusButtons>
-            <Button
-              disabled={
-                data[caseNumner].approved === 'approved' ||
-                data[caseNumner].approved === 'rejected'
-              }
-              onClick={onApproveClick}
-            >
-              Approve
-            </Button>
-            <Button
-              color="danger"
-              disabled={
-                data[caseNumner].approved === 'rejected' ||
-                data[caseNumner].approved === 'approved'
-              }
-              onClick={onRejectClick}
-            >
-              Reject
-            </Button>
-            <Button
-              variant="outlined"
-              disabled={data[caseNumner].approved === 'pending'}
-              onClick={onResetClick}
-            >
-              Reset
-            </Button>
-          </Styled.CaseStatusButtons>
-        </Styled.CaseResultStatus>
-      </Styled.CaseLeftDiv>
-
-      <ImageView text="run" img={img} altText="run"></ImageView>
-    </Styled.CaseResultCard>
-  );
-};
diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ObjectCaseResult.styled.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ObjectCaseResult.styled.tsx
new file mode 100644
index 00000000..36d46655
--- /dev/null
+++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ObjectCaseResult.styled.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable prettier/prettier */
+import { Table } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { spacings } from '../../../../../tokens/spacings';
+import { theme } from '../../../../../tokens/theme';
+
+export const ResultCard = styled.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${spacings.LARGE};
+
+  padding: ${spacings.X_LARGE};
+`;
+
+export const CaseTable = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.LARGE};
+
+  width: 100%;
+`;
+
+export const ColumnCell = styled(Table.Cell)`
+  background: ${theme.light.ui.background.light};
+`;
+
+export const DataCell = styled(Table.Cell)`
+  text-align: right;
+
+  > div {
+    display: flex;
+    justify-content: right;
+  }
+`;
diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ObjectCaseResult.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ObjectCaseResult.tsx
new file mode 100644
index 00000000..31c496f9
--- /dev/null
+++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ObjectCaseResult.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable max-lines-per-function */
+import { Table } from '@equinor/eds-core-react';
+import { CaseCardComponent } from '../../../../../components/CaseCardComponent/CaseCardComponent';
+import { ObjectResultType } from '../../../../../pages/ModelPages/Results/Results';
+
+import * as Styled1 from './ObjectCaseResult.styled';
+
+export const ObjectCaseResult = ({ data }: { data: ObjectResultType }) => {
+  return (
+    <CaseCardComponent title="Case X">
+      <Styled1.ResultCard>
+        <Styled1.CaseTable>
+          <Table>
+            <Table.Head>
+              <Table.Row>
+                <Table.Cell></Table.Cell>
+                <Styled1.DataCell>Mean</Styled1.DataCell>
+                <Styled1.DataCell>Standard deviation (SD)</Styled1.DataCell>
+                <Styled1.DataCell>Count</Styled1.DataCell>
+              </Table.Row>
+            </Table.Head>
+            <Table.Body key={data.identifier}>
+              <Table.Row>
+                <Styled1.ColumnCell>Channel width</Styled1.ColumnCell>
+                <Styled1.DataCell>{data.CWMean}</Styled1.DataCell>
+                <Styled1.DataCell>{data.CWSD}</Styled1.DataCell>
+                <Styled1.DataCell>{data.CWCount}</Styled1.DataCell>
+              </Table.Row>
+              <Table.Row>
+                <Styled1.ColumnCell>Channel height</Styled1.ColumnCell>
+                <Styled1.DataCell>{data.CHMean}</Styled1.DataCell>
+                <Styled1.DataCell>{data.CHSD}</Styled1.DataCell>
+                <Styled1.DataCell>{data.CHCount}</Styled1.DataCell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </Styled1.CaseTable>
+      </Styled1.ResultCard>
+    </CaseCardComponent>
+  );
+};
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramCaseResult.styled.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramCaseResult.styled.tsx
new file mode 100644
index 00000000..bb681a28
--- /dev/null
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramCaseResult.styled.tsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { spacings } from '../../../../../tokens/spacings';
+
+export const CaseResultCard = styled.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${spacings.XXX_LARGE};
+
+  padding: ${spacings.X_LARGE};
+
+  > div {
+    width: 70vw;
+  }
+`;
+
+export const CaseLeftDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.LARGE};
+
+  > table {
+    width: 80%;
+  }
+`;
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramCaseResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramCaseResult.tsx
new file mode 100644
index 00000000..1799f685
--- /dev/null
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramCaseResult.tsx
@@ -0,0 +1,57 @@
+import { Table } from '@equinor/eds-core-react';
+import { CaseCardComponent } from '../../../../../components/CaseCardComponent/CaseCardComponent';
+import { ImageView } from '../../../../../components/ImageView/ImageView';
+import { VariogramResultListType } from '../../../../../pages/ModelPages/Results/Results';
+import * as Styled from './VariogramCaseResult.styled';
+
+export const VariogramCaseResult = ({
+  caseList,
+  img,
+}: {
+  caseList: VariogramResultListType[];
+  img: string;
+}) => {
+  return (
+    <>
+      {caseList.map((caseItem) => (
+        <CaseCardComponent key={caseItem.caseId} title={caseItem.title}>
+          {caseItem.resultList.map((item) => (
+            <Styled.CaseResultCard key={item.identifier}>
+              <ImageView text="run" img={img} altText="run"></ImageView>
+              <Styled.CaseLeftDiv>
+                <Table>
+                  <Table.Body>
+                    <Table.Row>
+                      <Table.Cell>Quality factor</Table.Cell>
+                      <Table.Cell>{item.quality}</Table.Cell>
+                    </Table.Row>
+                    <Table.Row>
+                      <Table.Cell>Model area</Table.Cell>
+                      <Table.Cell>{item.modelArea}</Table.Cell>
+                    </Table.Row>
+                    <Table.Row>
+                      <Table.Cell>Compute method</Table.Cell>
+                      <Table.Cell>{item.computeMethod}</Table.Cell>
+                    </Table.Row>
+                    <Table.Row>
+                      <Table.Cell>Attribute</Table.Cell>
+                      <Table.Cell>{item.attribute}</Table.Cell>
+                    </Table.Row>
+                    <Table.Row>
+                      <Table.Cell>Variogram model</Table.Cell>
+                      <Table.Cell>{item.family}</Table.Cell>
+                    </Table.Row>
+                    <Table.Row>
+                      <Table.Cell>Sigma</Table.Cell>
+                      <Table.Cell>{item.sigma}</Table.Cell>
+                    </Table.Row>
+                  </Table.Body>
+                </Table>
+              </Styled.CaseLeftDiv>
+            </Styled.CaseResultCard>
+          ))}
+        </CaseCardComponent>
+      ))}
+    </>
+  );
+};
diff --git a/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx b/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx
index 90c9d05e..938c9aa0 100644
--- a/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx
+++ b/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx
@@ -34,14 +34,13 @@ export const ComputeObject = () => {
       <ComputeCaseInfoActions addCase={addCase} caseInfo={ObjectCaseInfo} />
       {cases.length !== 0 ? (
         cases.map((c) => (
-          <Styled.CaseBorder key={c.id}>
-            <CaseCard
-              id={c.id}
-              name={c.name}
-              removeCase={removeCase}
-              caseType={'object'}
-            />
-          </Styled.CaseBorder>
+          <CaseCard
+            key={c.id}
+            id={c.id}
+            name={c.name}
+            removeCase={removeCase}
+            caseType={'object'}
+          />
         ))
       ) : (
         <Typography>Add a Case</Typography>
diff --git a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.styled.tsx b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.styled.tsx
index e65a9c98..4a217a9e 100644
--- a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.styled.tsx
+++ b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.styled.tsx
@@ -19,14 +19,7 @@ export const Case = styled.div`
 
   border-left: solid ${spacings.XX_SMALL} ${theme.light.ui.background.medium};
 `;
-export const CaseBorder = styled.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${spacings.XXX_LARGE};
 
-  border-radius: ${spacings.CARD_ROUNDED};
-  border: solid 1px ${theme.light.ui.background.medium};
-`;
 export const AddCaseButton = styled(Button)`
   width: fit-content;
 `;
diff --git a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
index 2e447d8a..dd517bb6 100644
--- a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
+++ b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
@@ -46,14 +46,13 @@ export const ComputeVariogram = () => {
       <ComputeCaseInfoActions addCase={addCase} caseInfo={variogramCaseInfo} />
       {cases.length !== 0 ? (
         cases.map((c) => (
-          <Styled.CaseBorder key={c.id}>
-            <CaseCard
-              id={c.id}
-              name={c.name}
-              removeCase={removeCase}
-              caseType={'variogram'}
-            />
-          </Styled.CaseBorder>
+          <CaseCard
+            key={c.id}
+            id={c.id}
+            name={c.name}
+            removeCase={removeCase}
+            caseType={'variogram'}
+          />
         ))
       ) : (
         <Typography>Add a Case</Typography>
diff --git a/src/pages/ModelPages/Results/Results.tsx b/src/pages/ModelPages/Results/Results.tsx
index 0c44c49a..0ce016af 100644
--- a/src/pages/ModelPages/Results/Results.tsx
+++ b/src/pages/ModelPages/Results/Results.tsx
@@ -1,6 +1,36 @@
-import { CaseResultList } from '../../../features/Results/CaseResult/CaseResultList/CaseResultList';
+/* eslint-disable max-lines-per-function */
+import { CaseResultView } from '../../../features/Results/CaseResult/CaseResultView/CaseResultView';
 import { NoResults } from '../../../features/Results/NoResults/NoResults';
 
+export interface VariogramResultListType {
+  caseId: number;
+  title: string;
+  resultList: VariogramResultType[];
+}
+
+export interface VariogramResultType {
+  identifier: number;
+  family: string;
+  computeMethod: string;
+  modelArea: string;
+  attribute: string;
+  quality: GLfloat;
+  sigma: GLfloat;
+  approved: string;
+}
+
+export interface ObjectResultType {
+  identifier: number;
+  family: string;
+  CWMean: GLfloat;
+  CHMean: GLfloat;
+  CWSD: GLfloat;
+  CHSD: GLfloat;
+  CWCount: GLfloat;
+  CHCount: GLfloat;
+  approved: string;
+}
+
 export type ResultType = {
   caseId: string;
   case: string;
@@ -8,14 +38,83 @@ export type ResultType = {
 };
 export const Results = () => {
   const loaded = true;
-  const results: ResultType[] = [
-    { caseId: '1', case: 'Variogramcase 1', finished: true },
-    { caseId: '2', case: 'Variogramcase 2', finished: false },
+  const caseList: VariogramResultListType[] = [
+    {
+      caseId: 1,
+      title: 'Variogram Case 1',
+      resultList: [
+        {
+          identifier: 0,
+          family: 'exponential',
+          computeMethod: 'Net-to-gross',
+          modelArea: 'Left',
+          attribute: 'Porosity',
+          quality: 0.6427819811789964,
+          sigma: 0.06967589201242001,
+          approved: 'rejected',
+        },
+        {
+          identifier: 1,
+          family: 'gaussian',
+          computeMethod: 'Net-to-gross',
+          modelArea: 'Proximal',
+          attribute: 'Porosity',
+          quality: 0.5432924009373808,
+          sigma: 0.0670758033212357,
+          approved: 'pending',
+        },
+      ],
+    },
+    {
+      caseId: 3,
+      title: 'Variogram Case 3',
+      resultList: [
+        {
+          identifier: 2,
+          family: 'general_exponential',
+          computeMethod: 'Indicator / Architectural Element (AE)',
+          modelArea: 'Distal',
+          attribute: 'Porosity',
+          quality: 0.5580294305723851,
+          sigma: 0.0678988627745677,
+          approved: 'approved',
+        },
+      ],
+    },
+  ];
+
+  const objectList: ObjectResultType[] = [
+    {
+      identifier: 3,
+      family: 'channel',
+      CWMean: 190.15,
+      CHMean: 1.94,
+      CWSD: 68.69,
+      CHSD: 0.68,
+      CWCount: 863,
+      CHCount: 863,
+      approved: 'approved',
+    },
+    {
+      identifier: 4,
+      family: 'channel',
+      CWMean: 134.47,
+      CHMean: 1.76,
+      CWSD: 59.93,
+      CHSD: 0.73,
+      CWCount: 754,
+      CHCount: 754,
+      approved: 'approved',
+    },
   ];
 
   return (
     <>
-      {loaded && results ? <CaseResultList results={results} /> : <NoResults />}
+      {loaded && (caseList.length !== 0 || objectList.length !== 0) ? (
+        <CaseResultView caseList={caseList} objectList={objectList} />
+      ) : (
+        <NoResults />
+      )}
     </>
   );
 };
diff --git a/src/router.tsx b/src/router.tsx
index 98159b2d..c4b814a4 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,7 +1,6 @@
 import { createBrowserRouter, NonIndexRouteObject } from 'react-router-dom';
 import { App } from './App';
 import { ModelView } from './features/ModelView/ModelView';
-import { CaseResultView } from './features/Results/CaseResult/CaseResultView/CaseResultView';
 import { About } from './pages/About/About';
 import { Api } from './pages/Api/Api';
 import { Browse } from './pages/Browse/Browse';
@@ -47,7 +46,6 @@ const appRoutes = (tabs as NonIndexRouteObject[]).concat([
         path: 'results',
         element: <Results />,
       },
-      { path: 'results/:caseId', element: <CaseResultView /> },
     ],
   },
 ]);