diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts
index faaa128..253ba59 100644
--- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts
@@ -5,17 +5,14 @@ export const SubRowDiv = styled.div`
   display: flex;
   flex-direction: column;
   row-gap: ${spacings.LARGE};
-  padding: ${spacings.X_LARGE} ${spacings.XXXX_LARGE};
-
-  width: 100%;
+  padding: ${spacings.MEDIUM} ${spacings.MEDIUM} ${spacings.X_LARGE}
+    calc(${spacings.MEDIUM} + ${spacings.XXXX_LARGE} + ${spacings.MEDIUM});
 `;
 
 export const SubRowInfo = styled.div`
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  width: 100%;
+  align-items: center;
+  gap: 1.5rem;
 `;
 
 export const TableList = styled.div`
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx
index a9d3bfa..e8e79e4 100644
--- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-lines-per-function */
 import { Button, Icon, Typography } from '@equinor/eds-core-react';
-import { bar_chart as barChart } from '@equinor/eds-icons';
+import { timeline } from '@equinor/eds-icons';
 import { useState } from 'react';
 import {
   GetVariogramResultsDto,
@@ -41,10 +41,16 @@ export const SubRowResult = ({
     <>
       <Styled.SubRowDiv>
         <Styled.SubRowInfo>
-          <Typography>Variogram model details</Typography>
-          <Button variant="outlined" onClick={handleImageDialog}>
-            <Icon data={barChart} title={'Open plot for case results.'} />
-            Show plot
+          <Typography variant="h6" as="h3">
+            Variogram model details
+          </Typography>
+          <Button
+            color="secondary"
+            variant="outlined"
+            onClick={handleImageDialog}
+          >
+            Show variogram slices
+            <Icon data={timeline} />
           </Button>
         </Styled.SubRowInfo>
         <Styled.TableList>
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts
index fb54c7a..6aef1f0 100644
--- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts
@@ -7,8 +7,23 @@ export const HeaderContent = styled(Table.Row)`
 `;
 export const TableWrapper = styled.div`
   width: 100%;
-  > table {
+
+  .variogram-models-table {
     width: 100%;
     border: 1px solid #dcdcdc;
   }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+
+  .unit {
+    font-weight: 400;
+    display: inline-block;
+    margin-inline-start: ${spacings.X_SMALL};
+  }
 `;
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx
index 2b9d5d8..531be34 100644
--- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx
@@ -1,4 +1,6 @@
-import { Table } from '@equinor/eds-core-react';
+/* eslint-disable max-lines-per-function */
+import { EdsProvider, Icon, Table, Tooltip } from '@equinor/eds-core-react';
+import { help_outline as HELP } from '@equinor/eds-icons';
 import { roundResultString } from '../../../../../../../utils/RoundResultString';
 import { ResultObjectType } from '../TanStackTable/TanStackTable';
 import * as Styled from './SubRowResultItem.styled';
@@ -8,39 +10,75 @@ export const SubRowResultItem = ({
   resultList: ResultObjectType[];
 }) => {
   return (
-    <Styled.TableWrapper>
-      <Table>
-        <Table.Head>
-          <Styled.HeaderContent>
-            <Table.Cell>Variogram model</Table.Cell>
-            <Table.Cell>Range major (m)</Table.Cell>
-            <Table.Cell>Range minor (m)</Table.Cell>
-            <Table.Cell>Azimuth (deg)</Table.Cell>
-            <Table.Cell>Range vertical (m)</Table.Cell>
-            <Table.Cell>SILL/STD (m)</Table.Cell>
-            <Table.Cell>X/Y/Z quality factor</Table.Cell>
-          </Styled.HeaderContent>
-        </Table.Head>
-        <Table.Body>
-          {resultList.map((resultItem) => (
-            <Table.Row key={resultItem.computeCaseId + resultItem.quality}>
-              <Table.Cell>{resultItem.variogramModel}</Table.Cell>
-              <Table.Cell>{resultItem.rmajor}</Table.Cell>
-              <Table.Cell>{resultItem.rminor}</Table.Cell>
-              <Table.Cell>{resultItem.azimuth}</Table.Cell>
-              <Table.Cell>{resultItem.rvertical}</Table.Cell>
-              <Table.Cell>{resultItem.sigma}</Table.Cell>
+    <EdsProvider density="compact">
+      <Styled.TableWrapper>
+        <Table className="variogram-models-table">
+          <Table.Head>
+            <Styled.HeaderContent>
+              <Table.Cell>Variogram model</Table.Cell>
+              <Table.Cell className="align-right">
+                Range major <span className="unit">(m)</span>
+              </Table.Cell>
+              <Table.Cell className="align-right">
+                Range minor <span className="unit">(m)</span>
+              </Table.Cell>
+              <Table.Cell className="align-right">
+                Azimuth <span className="unit">(deg)</span>
+              </Table.Cell>
+              <Table.Cell className="align-right">
+                Range vertical <span className="unit">(m)</span>
+              </Table.Cell>
+              <Table.Cell className="align-right">
+                SILL/STD <span className="unit">(m)</span>
+              </Table.Cell>
               <Table.Cell>
-                <div>
-                  {roundResultString(resultItem.qualityX, 2)} {' / '}
-                  {roundResultString(resultItem.qualityY, 2)} {' / '}
-                  {roundResultString(resultItem.qualityZ, 2)}
+                <div className="has-tooltip">
+                  X/Y/Z quality factor
+                  <Tooltip
+                    title="The quality factor is based on the 3D-variogram for each axis"
+                    placement="top"
+                  >
+                    <Icon data={HELP} className="icon" />
+                  </Tooltip>
                 </div>
               </Table.Cell>
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
-    </Styled.TableWrapper>
+            </Styled.HeaderContent>
+          </Table.Head>
+          <Table.Body>
+            {resultList.map((resultItem) => (
+              <Table.Row key={resultItem.computeCaseId + resultItem.quality}>
+                <Table.Cell>
+                  <span className="capitalize">
+                    {resultItem.variogramModel}
+                  </span>
+                </Table.Cell>
+                <Table.Cell className="align-right">
+                  {resultItem.rmajor}
+                </Table.Cell>
+                <Table.Cell className="align-right">
+                  {resultItem.rminor}
+                </Table.Cell>
+                <Table.Cell className="align-right">
+                  {resultItem.azimuth}
+                </Table.Cell>
+                <Table.Cell className="align-right">
+                  {resultItem.rvertical}
+                </Table.Cell>
+                <Table.Cell className="align-right">
+                  {resultItem.sigma}
+                </Table.Cell>
+                <Table.Cell>
+                  <div>
+                    {roundResultString(resultItem.qualityX, 2)} {' / '}
+                    {roundResultString(resultItem.qualityY, 2)} {' / '}
+                    {roundResultString(resultItem.qualityZ, 2)}
+                  </div>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </Styled.TableWrapper>
+    </EdsProvider>
   );
 };
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts
index 5d6b911..218619d 100644
--- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts
@@ -1,72 +1,103 @@
 import styled from 'styled-components';
+import { theme } from '../../../../../../../tokens/theme';
+import { spacings } from '../../../../../../../tokens/spacings';
 
 export const TableWrapper = styled.div`
-  > div {
-    > table {
-      border: 1px solid #dcdcdc;
-      border-collapse: collapse;
+  .variogram-results-table {
+    border: 1px solid #dcdcdc;
+    border-collapse: collapse;
+    min-width: 1180px;
 
-      > thead {
-        border-bottom: 2px solid
-          var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
-        background: var(
-          --eds_interactive_table__header__fill_resting,
-          rgba(247, 247, 247, 1)
-        );
-        > tr {
-          > th {
-            white-space: nowrap;
-            min-height: var(--eds_table__cell__height, 48px);
-            height: var(--eds_table__cell__height, 48px);
-            background: var(
-              --eds_interactive_table__header__fill_resting,
-              rgba(247, 247, 247, 1)
-            );
-            box-sizing: border-box;
-            padding-left: var(--eds_table__cell__padding_x, 16px);
-            padding-top: var(--eds_table__cell__padding_y, 0);
-            padding-right: var(--eds_table__cell__padding_x, 16px);
-            padding-bottom: var(--eds_table__cell__padding_y, 0);
-            margin: 0;
-            color: var(--eds_text__static_icons__default, rgba(61, 61, 61, 1));
-            font-family: Equinor;
-            font-size: var(--eds_table__font_size, 0.875rem);
-            font-weight: 700;
-            line-height: 1.429em;
-            text-align: left;
-            border-bottom: 2px solid
-              var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
-          }
+    /* Fixed width for the expand toggle button column */
+    > thead th:first-child,
+    > tbody td:not(.expanded-cell, .expanded-cell td):first-child {
+      width: calc(
+        ${spacings.MEDIUM} + ${spacings.XXX_LARGE} + ${spacings.MEDIUM}
+      );
+      text-align: center;
+    }
+
+    /* Fixed width for the "Published" toggle button column */
+    > thead th:last-child,
+    > tbody td:not(.expanded-cell, .expanded-cell td):last-child {
+      width: 136px;
+    }
+
+    > thead {
+      border-bottom: 2px solid
+        var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+      background: var(
+        --eds_interactive_table__header__fill_resting,
+        rgba(247, 247, 247, 1)
+      );
+      > tr {
+        > th {
+          white-space: nowrap;
+          min-height: var(--eds_table__cell__height, 48px);
+          height: var(--eds_table__cell__height, 48px);
+          background: var(
+            --eds_interactive_table__header__fill_resting,
+            rgba(247, 247, 247, 1)
+          );
+          box-sizing: border-box;
+          padding-left: var(--eds_table__cell__padding_x, 16px);
+          padding-top: var(--eds_table__cell__padding_y, 0);
+          padding-right: var(--eds_table__cell__padding_x, 16px);
+          padding-bottom: var(--eds_table__cell__padding_y, 0);
+          margin: 0;
+          color: var(--eds_text__static_icons__default, rgba(61, 61, 61, 1));
+          font-family: Equinor;
+          font-size: var(--eds_table__font_size, 0.875rem);
+          font-weight: 700;
+          line-height: 1.429em;
+          text-align: left;
+          border-bottom: 2px solid
+            var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
         }
       }
+    }
 
-      > tbody {
-        border-bottom: 2px solid
-          var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
+    > tbody {
+      border-bottom: 1px solid
+        var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
 
-        > tr {
-          > td {
-            white-space: nowrap;
-            min-height: var(--eds_table__cell__height, 48px);
-            height: var(--eds_table__cell__height, 48px);
-            vertical-align: var(--eds_table__cell__vertical_align, inherit);
-            box-sizing: border-box;
-            padding-left: var(--eds_table__cell__padding_x, 16px);
-            padding-top: var(--eds_table__cell__padding_y, 0);
-            padding-right: var(--eds_table__cell__padding_x, 16px);
-            padding-bottom: var(--eds_table__cell__padding_y, 0);
-            margin: 0;
-            color: var(--eds_text__static_icons__default, rgba(61, 61, 61, 1));
-            font-family: Equinor;
-            font-size: var(--eds_table__font_size, 0.875rem);
-            font-weight: 500;
-            line-height: 1.429em;
-            text-align: left;
-            border-bottom: 1px solid
-              var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
-          }
+      > tr {
+        > td {
+          white-space: nowrap;
+          min-height: var(--eds_table__cell__height, 48px);
+          height: var(--eds_table__cell__height, 48px);
+          vertical-align: var(--eds_table__cell__vertical_align, inherit);
+          box-sizing: border-box;
+          padding-left: var(--eds_table__cell__padding_x, 16px);
+          padding-top: var(--eds_table__cell__padding_y, 0);
+          padding-right: var(--eds_table__cell__padding_x, 16px);
+          padding-bottom: var(--eds_table__cell__padding_y, 0);
+          margin: 0;
+          color: var(--eds_text__static_icons__default, rgba(61, 61, 61, 1));
+          font-family: Equinor;
+          font-size: var(--eds_table__font_size, 0.875rem);
+          font-weight: 500;
+          line-height: 1.429em;
+          text-align: left;
+          border-bottom: 1px solid
+            var(--eds_ui_background__medium, rgba(220, 220, 220, 1));
         }
       }
     }
+
+    .expanded-cell {
+      background-color: ${theme.light.ui.background.light};
+      padding-inline: 0;
+    }
+
+    .has-tooltip {
+      display: flex;
+      column-gap: ${spacings.SMALL};
+      align-items: center;
+
+      .icon {
+        color: ${theme.light.primary.resting};
+      }
+    }
   }
 `;
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx
index 0951e8e..ea3bbd4 100644
--- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx
+++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx
@@ -3,9 +3,10 @@
 /* eslint-disable max-lines-per-function */
 import { ChangeEvent, Fragment } from 'react';
 
-import { Button, Icon, Switch } from '@equinor/eds-core-react';
+import { Button, Icon, Switch, Tooltip } from '@equinor/eds-core-react';
 import {
   chevron_down as DOWN,
+  help_outline as HELP,
   chevron_right as RIGHT,
 } from '@equinor/eds-icons';
 import {
@@ -76,60 +77,59 @@ function Table({
   });
 
   return (
-    <div className="p-2">
-      <div className="h-2" />
-      <table>
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <th key={header.id} colSpan={header.colSpan}>
-                    {header.isPlaceholder ? null : (
-                      <div>
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                      </div>
-                    )}
-                  </th>
-                );
-              })}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map((row) => {
-            return (
-              <Fragment key={row.id}>
+    <table className="variogram-results-table">
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              return (
+                <th key={header.id} colSpan={header.colSpan}>
+                  {header.isPlaceholder ? null : (
+                    <div>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                    </div>
+                  )}
+                </th>
+              );
+            })}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => {
+          return (
+            <Fragment key={row.id}>
+              <tr>
+                {/* first row is a normal row */}
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+              {row.getIsExpanded() && (
                 <tr>
-                  {/* first row is a normal row */}
-                  {row.getVisibleCells().map((cell) => {
-                    return (
-                      <td key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </td>
-                    );
-                  })}
+                  <td
+                    colSpan={row.getVisibleCells().length}
+                    className="expanded-cell"
+                  >
+                    {renderSubComponent({ row })}
+                  </td>
                 </tr>
-                {row.getIsExpanded() && (
-                  <tr>
-                    <td colSpan={row.getVisibleCells().length}>
-                      {renderSubComponent({ row })}
-                    </td>
-                  </tr>
-                )}
-              </Fragment>
-            );
-          })}
-        </tbody>
-      </table>
-      <div className="h-2" />
-    </div>
+              )}
+            </Fragment>
+          );
+        })}
+      </tbody>
+    </table>
   );
 }
 
@@ -256,7 +256,10 @@ export const TanStackTable = ({
       cell: ({ row }) => {
         return (
           row.getCanExpand() && (
-            <Button variant="ghost" onClick={row.getToggleExpandedHandler()}>
+            <Button
+              variant="ghost_icon"
+              onClick={row.getToggleExpandedHandler()}
+            >
               <Icon data={row.getIsExpanded() ? DOWN : RIGHT} size={18} />
             </Button>
           )
@@ -269,6 +272,11 @@ export const TanStackTable = ({
       cell: ({ getValue }) => <div>{getValue<string>()}</div>,
       id: 'method',
     },
+    {
+      accessorKey: 'modelArea',
+      header: () => <div>Model Area</div>,
+      id: 'modelArea',
+    },
     {
       accessorKey: 'parameter',
       header: () => <div>Parameter</div>,
@@ -279,25 +287,34 @@ export const TanStackTable = ({
       header: () => <div>Archel Filter</div>,
       id: 'archelFilter',
     },
-    {
-      accessorKey: 'modelArea',
-      header: () => <div>Model Area</div>,
-      id: 'modelArea',
-    },
     {
       accessorKey: 'status',
-      header: () => <div>Published</div>,
+      header: () => (
+        <div className="has-tooltip">
+          Published
+          <Tooltip
+            title="Only published results will be available from the PEPM results API"
+            placement="top"
+          >
+            <Icon data={HELP} className="icon" />
+          </Tooltip>
+        </div>
+      ),
       cell: ({ row }) => {
         return (
-          row.getCanExpand() && (
+          row.getCanExpand() &&
+          (isOwner ? (
             <Switch
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 updateStatus(e.target.checked, row.original);
               }}
               checked={checkedStatus(row.original)}
-              disabled={!isOwner}
-            ></Switch>
-          )
+            />
+          ) : (
+            <Tooltip title="Only model owners can change the publish status">
+              <Switch checked={checkedStatus(row.original)} disabled />
+            </Tooltip>
+          ))
         );
       },
       id: 'status',