diff --git a/src/frontend/src/functions/icons.tsx b/src/frontend/src/functions/icons.tsx
index d702110dac..d5106b82b0 100644
--- a/src/frontend/src/functions/icons.tsx
+++ b/src/frontend/src/functions/icons.tsx
@@ -94,6 +94,7 @@ const icons: { [key: string]: (props: TablerIconsProps) => React.JSX.Element } =
     customers: IconBuildingStore,
     purchase_orders: IconShoppingCart,
     sales_orders: IconTruckDelivery,
+    shipment: IconTruckDelivery,
     scheduling: IconCalendarStats,
     test_templates: IconTestPipe,
     related_parts: IconLayersLinked,
diff --git a/src/frontend/src/pages/sales/SalesOrderDetail.tsx b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
index 04908963ca..54c2dea284 100644
--- a/src/frontend/src/pages/sales/SalesOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { LoadingOverlay, Skeleton, Stack } from '@mantine/core';
+import { Grid, LoadingOverlay, Skeleton, Stack } from '@mantine/core';
 import {
   IconInfoCircle,
   IconList,
@@ -12,12 +12,17 @@ import {
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { DetailsImage } from '../../components/details/DetailsImage';
+import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import { PageDetail } from '../../components/nav/PageDetail';
 import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
 import { NotesEditor } from '../../components/widgets/MarkdownEditor';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { ModelType } from '../../enums/ModelType';
+import { UserRoles } from '../../enums/Roles';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
+import { DetailsField, DetailsTable } from '../../tables/Details';
 import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
 import { AttachmentTable } from '../../tables/general/AttachmentTable';
 
@@ -35,12 +40,114 @@ export default function SalesOrderDetail() {
     }
   });
 
+  const detailsPanel = useMemo(() => {
+    if (instanceQuery.isFetching) {
+      return <Skeleton />;
+    }
+
+    let tl: DetailsField[] = [
+      {
+        type: 'text',
+        name: 'reference',
+        label: t`Reference`
+      },
+      {
+        type: 'link',
+        name: 'customer',
+        icon: 'customers',
+        label: t`Customer`,
+        model: ModelType.company
+      },
+      {
+        type: 'text',
+        name: 'description',
+        label: t`Description`
+      },
+      {
+        type: 'status',
+        name: 'status',
+        label: t`Status`,
+        model: ModelType.salesorder
+      },
+      {
+        type: 'text',
+        name: 'creation_date',
+        label: t`Created On`,
+        icon: 'calendar'
+      },
+      {
+        type: 'text',
+        name: 'target_date',
+        label: t`Target Date`,
+        icon: 'calendar',
+        hidden: !order.target_date
+      }
+    ];
+
+    let tr: DetailsField[] = [
+      {
+        type: 'text',
+        name: 'line_items',
+        label: t`Line Items`,
+        icon: 'list'
+      },
+      {
+        type: 'progressbar',
+        name: 'completed',
+        icon: 'progress',
+        label: t`Completed Line Items`,
+        total: order.line_items,
+        progress: order.completed_lines
+      },
+      {
+        type: 'progressbar',
+        name: 'shipments',
+        icon: 'shipment',
+        label: t`Completed Shipments`,
+        total: order.shipments,
+        progress: order.completed_shipments
+        // TODO: Fix this progress bar
+      },
+      {
+        type: 'text',
+        name: 'currency',
+        label: t`Order Currency,`
+      },
+      {
+        type: 'text',
+        name: 'total_cost',
+        label: t`Total Cost`
+        // TODO: Implement this!
+      }
+    ];
+
+    return (
+      <ItemDetailsGrid>
+        <Grid>
+          <Grid.Col span={4}>
+            <DetailsImage
+              appRole={UserRoles.purchase_order}
+              apiPath={ApiEndpoints.company_list}
+              src={order.customer_detail?.image}
+              pk={order.customer}
+            />
+          </Grid.Col>
+          <Grid.Col span={8}>
+            <DetailsTable fields={tl} item={order} />
+          </Grid.Col>
+        </Grid>
+        <DetailsTable fields={tr} item={order} />
+      </ItemDetailsGrid>
+    );
+  }, [order, instanceQuery]);
+
   const orderPanels: PanelType[] = useMemo(() => {
     return [
       {
         name: 'detail',
         label: t`Order Details`,
-        icon: <IconInfoCircle />
+        icon: <IconInfoCircle />,
+        content: detailsPanel
       },
       {
         name: 'line-items',