diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5e7b323cc..fd584efbb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,5 +5,5 @@
     "titleBar.activeBackground": "#1D4902",
     "titleBar.activeForeground": "#EEFEE4"
   },
-  "conventionalCommits.scopes": ["handover", "sidesheet"]
+  "conventionalCommits.scopes": ["handover", "loop", "work order", "sidesheet"]
 }
diff --git a/libs/loopapp/src/lib/config/gardenConfig.ts b/libs/loopapp/src/lib/config/gardenConfig.ts
index 03a92e5e0..f2c15cbca 100644
--- a/libs/loopapp/src/lib/config/gardenConfig.ts
+++ b/libs/loopapp/src/lib/config/gardenConfig.ts
@@ -23,10 +23,12 @@ export const useGardenConfig = (contextId: string): GardenConfig<Loop, FilterSta
     getHeader,
     getSubgroupItems,
     getDisplayName: (item) => item.loopNo,
-    initialGrouping: ['Responsible'],
+    initialGrouping: ['RFC'],
     customViews: {
-      //bs typescript error
-      customItemView: GardenItem as any,
+      customItemView: GardenItem,
+    },
+    visuals: {
+      rowHeight: 30,
     },
   };
 };
diff --git a/libs/loopsidesheet/src/lib/types/loopContent.ts b/libs/loopsidesheet/src/lib/types/loopContent.ts
index a5c02d965..3078c8c26 100644
--- a/libs/loopsidesheet/src/lib/types/loopContent.ts
+++ b/libs/loopsidesheet/src/lib/types/loopContent.ts
@@ -1,14 +1,17 @@
 export type LoopContent = {
-    loopNo: string;
-    facility: string | null;
-    contentTagId: string;
-    contentTagNo: string;
-    register: string | null;
-    mechanicalCompletionStatus: string | null;
-    mechanicalCompletionPackageNo: string | null;
-    mechanicalCompletionPackageUrlId: string | null;
-    commissioningPackageNo: string | null;
-    commissioningPackageUrlId: string | null;
-    description: string | null;
-    clStatus: string | null;
-};
\ No newline at end of file
+  loopNo: string;
+  facility: string | null;
+  contentTagId: string;
+  contentTagNo: string;
+  register: string | null;
+  mechanicalCompletionStatus: string | null;
+  mechanicalCompletionPackageNo: string | null;
+  mechanicalCompletionPackageUrl: string | null;
+  mechanicalCompletionPackageUrlId: string | null;
+  commissioningPackageNo: string | null;
+  commissioningPackageUrl: string | null;
+  commissioningPackageUrlId: string | null;
+  description: string | null;
+  clStatus: string | null;
+  contentTagUrl: string | null;
+};
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/ContentDetails.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/ContentDetails.tsx
deleted file mode 100644
index ba56611eb..000000000
--- a/libs/loopsidesheet/src/lib/ui-sidesheet/ContentDetails.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Loop } from '@cc-components/loopshared';
-import { StatusCircle } from '@cc-components/shared/common';
-import { statusColorMap } from '@cc-components/shared/mapping';
-import {
-  stringCell,
-  StyledTabContent,
-  StyledTable,
-} from '@cc-components/shared/sidesheet';
-import { formatDateString } from '@cc-components/shared/utils-dates';
-
-import { ContentTable } from './LoopContentTable';
-
-type ContentDetailsProps = {
-  loop: Loop | undefined;
-};
-
-export const ContentDetails = ({ loop }: ContentDetailsProps): JSX.Element | null => {
-  if (!loop) return null;
-  return (
-    <StyledTabContent>
-      <h3>Details</h3>
-
-      <StyledTable>
-        <tbody>
-          <tr>
-            <td>MC status of content</td>
-            <td>
-              {loop.loopContentStatus ? (
-                <StatusCircle
-                  content={loop.loopContentStatus}
-                  statusColor={statusColorMap[loop.loopContentStatus]}
-                />
-              ) : (
-                '-'
-              )}
-            </td>
-          </tr>
-          <tr>
-            <td>Planned MC complete of content</td>
-            <td>
-              {loop.woPlannedCompletionDate
-                ? stringCell(formatDateString(loop.woPlannedCompletionDate))
-                : '-'}
-            </td>
-          </tr>
-          <tr>
-            <td>Actual MC complete of content</td>
-            <td>
-              {loop.woActualCompletionDate
-                ? stringCell(formatDateString(loop.woActualCompletionDate))
-                : '-'}
-            </td>
-          </tr>
-        </tbody>
-      </StyledTable>
-      <ContentTable loop={loop} />
-    </StyledTabContent>
-  );
-};
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx
index ee0d0f1c2..54a38cd99 100644
--- a/libs/loopsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx
+++ b/libs/loopsidesheet/src/lib/ui-sidesheet/DetailsTab.tsx
@@ -1,9 +1,13 @@
 import { Loop } from '@cc-components/loopshared';
+import { StatusCircle } from '@cc-components/shared/common';
+import { statusColorMap } from '@cc-components/shared/mapping';
 import {
   stringCell,
   StyledTabContent,
   StyledTable,
 } from '@cc-components/shared/sidesheet';
+import { formatDateString } from '@cc-components/shared/utils-dates';
+import { ContentTable } from './LoopContentTable';
 
 type DetailsTabProps = {
   loop: Loop | undefined;
@@ -33,8 +37,38 @@ export const DetailsTab = ({ loop }: DetailsTabProps): JSX.Element | null => {
             <td>Status</td>
             <td>{stringCell(loop.tagStatus)}</td>
           </tr>
+          <tr>
+            <td>MC status of content</td>
+            <td>
+              {loop.loopContentStatus ? (
+                <StatusCircle
+                  content={loop.loopContentStatus}
+                  statusColor={statusColorMap[loop.loopContentStatus]}
+                />
+              ) : (
+                '-'
+              )}
+            </td>
+          </tr>
+          <tr>
+            <td>Planned MC complete of content</td>
+            <td>
+              {loop.woPlannedCompletionDate
+                ? stringCell(formatDateString(loop.woPlannedCompletionDate))
+                : '-'}
+            </td>
+          </tr>
+          <tr>
+            <td>Actual MC complete of content</td>
+            <td>
+              {loop.woActualCompletionDate
+                ? stringCell(formatDateString(loop.woActualCompletionDate))
+                : '-'}
+            </td>
+          </tr>
         </tbody>
       </StyledTable>
+      <ContentTable loop={loop} />
     </StyledTabContent>
   );
 };
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/LoopContentTable.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/LoopContentTable.tsx
index eb65e4f94..58464c66d 100644
--- a/libs/loopsidesheet/src/lib/ui-sidesheet/LoopContentTable.tsx
+++ b/libs/loopsidesheet/src/lib/ui-sidesheet/LoopContentTable.tsx
@@ -16,18 +16,17 @@ const columns: ColDef<LoopContent>[] = [
   {
     headerName: 'Tag',
     valueGetter: (pkg) => pkg.data?.contentTagNo,
-    // valueFormatter: (pkg) => {
-    //   if (pkg.data?.contentTagId) {
-    //     return proCoSysUrls.getTagUrl(pkg.data.contentTagId);
-    //   }
-    //   return '';
-    // },
-    // cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
-    //   if (props.valueFormatted) {
-    //     return <LinkCell url={props.valueFormatted} urlText={props.value ?? ''} />;
-    //   }
-    //   return null;
-    // },
+    cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
+      if (props.valueFormatted) {
+        return (
+          <LinkCell
+            url={props.data?.contentTagUrl ?? undefined}
+            urlText={props.value ?? ''}
+          />
+        );
+      }
+      return null;
+    },
     width: 120,
   },
   {
@@ -66,35 +65,33 @@ const columns: ColDef<LoopContent>[] = [
   {
     headerName: 'Comm Pkg',
     valueGetter: (pkg) => pkg.data?.commissioningPackageNo,
-    // valueFormatter: (pkg) => {
-    //   if (pkg.data?.commissioningPackageUrlId) {
-    //     return proCoSysUrls.getCommPkgUrl(pkg.data.commissioningPackageUrlId);
-    //   }
-    //   return '';
-    // },
-    // cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
-    //   if (props.valueFormatted) {
-    //     return <LinkCell url={props.valueFormatted} urlText={props.value ?? ''} />;
-    //   }
-    //   return null;
-    // },
+    cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
+      if (props.valueFormatted) {
+        return (
+          <LinkCell
+            url={props.data?.commissioningPackageUrl ?? undefined}
+            urlText={props.value ?? ''}
+          />
+        );
+      }
+      return null;
+    },
     width: 120,
   },
   {
     headerName: 'MC Pkg',
     valueGetter: (pkg) => pkg.data?.mechanicalCompletionPackageNo,
-    // valueFormatter: (pkg) => {
-    //   if (pkg.data?.mechanicalCompletionPackageUrlId) {
-    //     return proCoSysUrls.getMcUrl(pkg.data.mechanicalCompletionPackageUrlId);
-    //   }
-    //   return '';
-    // },
-    // cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
-    //   if (props.valueFormatted) {
-    //     return <LinkCell url={props.valueFormatted} urlText={props.value ?? ''} />;
-    //   }
-    //   return null;
-    // },
+    cellRenderer: (props: ICellRendererProps<LoopContent, string | null>) => {
+      if (props.valueFormatted) {
+        return (
+          <LinkCell
+            url={props.data?.mechanicalCompletionPackageUrl ?? undefined}
+            urlText={props.value ?? ''}
+          />
+        );
+      }
+      return null;
+    },
     width: 140,
   },
 ];
diff --git a/libs/loopsidesheet/src/lib/ui-sidesheet/LoopSidesheet.tsx b/libs/loopsidesheet/src/lib/ui-sidesheet/LoopSidesheet.tsx
index e79c46b26..b66aa5a00 100644
--- a/libs/loopsidesheet/src/lib/ui-sidesheet/LoopSidesheet.tsx
+++ b/libs/loopsidesheet/src/lib/ui-sidesheet/LoopSidesheet.tsx
@@ -1,15 +1,8 @@
 import { Loop } from '@cc-components/loopshared';
-import { useState } from 'react';
-import { DetailsTab } from './DetailsTab';
-import { Tabs } from '@equinor/eds-core-react';
-import { useGetWorkorders } from '../utils-sidesheet';
-import { Checklists } from './Checklists';
-import { ContentDetails } from './ContentDetails';
-import { WorkorderTab } from '@cc-components/shared/sidesheet';
+import { LinkCell, useContextId, useHttpClient } from '@cc-components/shared';
 import { StatusCircle } from '@cc-components/shared/common';
 import { statusColorMap } from '@cc-components/shared/mapping';
-import { useQuery } from '@tanstack/react-query';
-import { LinkCell, useContextId, useHttpClient } from '@cc-components/shared';
+import { WorkorderTab } from '@cc-components/shared/sidesheet';
 import {
   BannerItem,
   CustomStyledPanels,
@@ -22,6 +15,12 @@ import {
   StyledTabsList,
   TabTitle,
 } from '@cc-components/sharedcomponents';
+import { Tabs } from '@equinor/eds-core-react';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useGetWorkorders } from '../utils-sidesheet';
+import { Checklists } from './Checklists';
+import { DetailsTab } from './DetailsTab';
 
 export const LoopSidesheet = (props: {
   item?: Loop | undefined;
@@ -69,7 +68,8 @@ export const LoopSidesheet = (props: {
   return (
     <StyledSideSheetContainer>
       <SidesheetHeader
-        title={`${loop.loopNo}, ${loop.description}` || ''}
+        title={loop.loopNo}
+        description={loop.description ?? undefined}
         onClose={props.close}
         applicationTitle="Loop"
       />
@@ -128,7 +128,6 @@ export const LoopSidesheet = (props: {
           <Tabs.Panel>
             <DetailsTab loop={loop} />
             {loop.loopId && <Checklists loopId={loop.loopId} />}
-            <ContentDetails loop={loop} />
           </Tabs.Panel>
           <Tabs.Panel>
             <WorkorderTab error={error} isFetching={isLoading} workorders={data} />
diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/columns.tsx b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/columns.tsx
index bdc4d2495..954880731 100644
--- a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/columns.tsx
+++ b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/columns.tsx
@@ -2,6 +2,13 @@ import { ColDef, ICellRendererProps } from '@equinor/workspace-ag-grid';
 import { CutoffBase } from './types';
 import { DateCell, DescriptionCell, ProgressCell } from '../../../../../../table-helpers';
 
+const progressBarCellStyle = () => {
+  return {
+    display: 'grid',
+    height: '100%',
+  };
+};
+
 export const columns: ColDef<CutoffBase>[] = [
   {
     headerName: 'Cutoff',
@@ -62,6 +69,8 @@ export const columns: ColDef<CutoffBase>[] = [
     cellRenderer: (props: ICellRendererProps<CutoffBase, string | null>) => (
       <ProgressCell percentWidth={Math.round(props.data?.projectProgress ?? 0)} />
     ),
+    cellStyle: progressBarCellStyle,
+    minWidth: 150,
   },
 
   {
diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/workorder/columns.tsx b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/workorder/columns.tsx
index d75a5caf5..232d9ddbd 100644
--- a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/workorder/columns.tsx
+++ b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/workorder/columns.tsx
@@ -60,12 +60,10 @@ export const columns = (
       headerName: 'Progress',
       valueGetter: (pkg) => pkg.data?.projectProgress,
       cellRenderer: (props: ICellRendererProps<WorkorderBase>) => {
-        return (
-          <Center>
-            <ProgressCell percentWidth={props.value === null ? 0 : props.value} />
-          </Center>
-        );
+        return <ProgressCell percentWidth={props.value === null ? 0 : props.value} />;
       },
+      cellStyle: progressBarCellStyle,
+      minWidth: 150,
     },
     {
       headerName: 'Estimated',
@@ -76,14 +74,14 @@ export const columns = (
           maxEstimatedHours = maxCount;
         }
         return (
-          <Center>
-            <EstimateCell
-              current={Number(props.value === null ? 0 : props.value)}
-              max={maxEstimatedHours}
-            />
-          </Center>
+          <EstimateCell
+            current={Number(props.value === null ? 0 : props.value)}
+            max={maxEstimatedHours}
+          />
         );
       },
+      cellStyle: progressBarCellStyle,
+      minWidth: 150,
     },
     {
       headerName: 'Remaining',
@@ -94,21 +92,21 @@ export const columns = (
           maxRemainingHours = maxCount;
         }
         return (
-          <Center>
-            <EstimateCell
-              current={Number(props.value === null ? 0 : props.value)}
-              max={maxRemainingHours}
-            />
-          </Center>
+          <EstimateCell
+            current={Number(props.value === null ? 0 : props.value)}
+            max={maxRemainingHours}
+          />
         );
       },
+      cellStyle: progressBarCellStyle,
+      minWidth: 150,
     },
   ];
 };
 
-const Center = styled.div`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-`;
+const progressBarCellStyle = () => {
+  return {
+    display: 'grid',
+    height: '100%',
+  };
+};
diff --git a/libs/shared/src/packages/table-helpers/src/lib/table/cells/EstimateCell.tsx b/libs/shared/src/packages/table-helpers/src/lib/table/cells/EstimateCell.tsx
index c82332343..5187a4810 100644
--- a/libs/shared/src/packages/table-helpers/src/lib/table/cells/EstimateCell.tsx
+++ b/libs/shared/src/packages/table-helpers/src/lib/table/cells/EstimateCell.tsx
@@ -17,12 +17,23 @@ export const EstimateCell = ({ current, max }: EstimateCellProps): JSX.Element =
     () => (max === 0 ? 0 : (current / max) * 100),
     [current, max]
   );
+  if (Number.isNaN(current)) return <></>;
   return (
-    <StyledProgressBarContainer>
-      <StyledActualProgress borderColor="#0084C4" color="#CCE6F3" width={percentage} />
+    <div style={{ display: 'flex', alignItems: 'center', gap: '5px', height: '100%' }}>
       <StyledProgressNumber>
         {parseFloat(Math.round(current).toString()).toLocaleString('no')}
       </StyledProgressNumber>
-    </StyledProgressBarContainer>
+      <StyledProgressBarContainer>
+        {percentage > 0 ? (
+          <StyledActualProgress
+            borderColor="#0084C4"
+            width={percentage}
+            color="#CCE6F3"
+          ></StyledActualProgress>
+        ) : (
+          <></>
+        )}
+      </StyledProgressBarContainer>
+    </div>
   );
 };
diff --git a/libs/shared/src/packages/table-helpers/src/lib/table/cells/ProgressCell.tsx b/libs/shared/src/packages/table-helpers/src/lib/table/cells/ProgressCell.tsx
index f3771d95e..1f48f7e24 100644
--- a/libs/shared/src/packages/table-helpers/src/lib/table/cells/ProgressCell.tsx
+++ b/libs/shared/src/packages/table-helpers/src/lib/table/cells/ProgressCell.tsx
@@ -13,13 +13,19 @@ type ProgressCellProps = {
  */
 export const ProgressCell = ({ percentWidth }: ProgressCellProps): JSX.Element => {
   return (
-    <StyledProgressBarContainer>
-      <StyledActualProgress
-        borderColor="#40D38F"
-        width={percentWidth}
-        color="#D9F6E9"
-      ></StyledActualProgress>
+    <div style={{ display: 'flex', alignItems: 'center', gap: '5px', height: '100%' }}>
       <StyledProgressNumber>{`${Math.round(percentWidth)}%`}</StyledProgressNumber>
-    </StyledProgressBarContainer>
+      <StyledProgressBarContainer>
+        {Math.round(percentWidth) > 0 ? (
+          <StyledActualProgress
+            borderColor="#40D38F"
+            width={percentWidth}
+            color="#D9F6E9"
+          ></StyledActualProgress>
+        ) : (
+          <></>
+        )}
+      </StyledProgressBarContainer>
+    </div>
   );
 };
diff --git a/libs/shared/src/packages/table-helpers/src/lib/table/cells/cell.styles.ts b/libs/shared/src/packages/table-helpers/src/lib/table/cells/cell.styles.ts
index 54b556151..ed08ffba5 100644
--- a/libs/shared/src/packages/table-helpers/src/lib/table/cells/cell.styles.ts
+++ b/libs/shared/src/packages/table-helpers/src/lib/table/cells/cell.styles.ts
@@ -22,12 +22,13 @@ export const StyledDescription = styled.div`
 `;
 
 export const StyledProgressBarContainer = styled.div`
-  height: 16px;
+  height: 8px;
   /* width: 68px; */
   background-color: #f5f5f5;
-  border-bottom: 2px #dcdcdc solid;
+  border: 2px #dcdcdc solid;
   width: -webkit-fill-available;
   position: relative;
+  border-radius: 10px;
 `;
 
 export const StyledActualProgress = styled.div<{
@@ -37,14 +38,17 @@ export const StyledActualProgress = styled.div<{
 }>`
   background-color: ${({ color }) => `${color ?? '#CCE6F3'}`};
   width: ${({ width }) => `${width}%`};
-  height: 16px;
-  border-bottom: ${({ borderColor }) => `2px ${borderColor ?? '#0084C4'} solid`};
+  height: 100%;
+  border: ${({ borderColor }) => `2px ${borderColor ?? '#0084C4'} solid`};
+  border-radius: 10px;
+  margin: -2px;
+  position: relative;
+  z-index: 1;
 `;
 export const StyledProgressNumber = styled.div`
-  position: absolute;
-  right: 5px;
-  top: 0px;
   line-height: normal;
+  z-index: 1;
+  width: 36px;
 `;
 export const StyledLink = styled.a`
   font-variant-numeric: tabular-nums;
diff --git a/libs/workorderapp/src/lib/config/tableConfig.tsx b/libs/workorderapp/src/lib/config/tableConfig.tsx
index 750aab00b..1c4691d93 100644
--- a/libs/workorderapp/src/lib/config/tableConfig.tsx
+++ b/libs/workorderapp/src/lib/config/tableConfig.tsx
@@ -27,6 +27,13 @@ import {
   MenuModule,
 } from '@equinor/workspace-fusion/grid';
 
+const progressBarCellStyle = () => {
+  return {
+    display: 'grid',
+    height: '100%',
+  };
+};
+
 export const useTableConfig = (contextId: string): GridConfig<WorkOrder, FilterState> => {
   const client = useHttpClient('cc-app');
 
@@ -166,6 +173,8 @@ const columnDefinitions: [ColDef<WorkOrder>, ...ColDef<WorkOrder>[]] = [
 
       return <ProgressCell percentWidth={Number(props.value)} />;
     },
+    cellStyle: progressBarCellStyle,
+    minWidth: 150,
   },
   {
     colId: 'MCStatus',