diff --git a/hydra-explorer/json-schemas/hydra-explorer-api.yaml b/hydra-explorer/json-schemas/hydra-explorer-api.yaml
index 57f84b6ed4a..bbc350e18bf 100644
--- a/hydra-explorer/json-schemas/hydra-explorer-api.yaml
+++ b/hydra-explorer/json-schemas/hydra-explorer-api.yaml
@@ -222,8 +222,8 @@ components:
       required:
         - headId
         - status
-        - lastUpdatedAtPoint
-        - lastUpdatedAtBlockNo
+        - point
+        - blockNo
       properties:
         headId:
           $ref: '#/components/schemas/HeadId'
@@ -246,7 +246,7 @@ components:
           $ref: '#/components/schemas/SnapshotNumber'
         contestationDeadline:
           $ref: '#/components/schemas/UTCTime'
-        lastUpdatedAtPoint:
+        point:
           $ref: '#/components/schemas/ChainPoint'
-        lastUpdatedAtBlockNo:
+        blockNo:
           type: integer
diff --git a/hydra-explorer/src/Hydra/Explorer/ExplorerState.hs b/hydra-explorer/src/Hydra/Explorer/ExplorerState.hs
index a3ee6eb5ecc..40ad46b430e 100644
--- a/hydra-explorer/src/Hydra/Explorer/ExplorerState.hs
+++ b/hydra-explorer/src/Hydra/Explorer/ExplorerState.hs
@@ -69,8 +69,8 @@ data HeadState = HeadState
   , contestations :: Observed Natural
   , snapshotNumber :: Observed Natural
   , contestationDeadline :: Observed UTCTime
-  , lastUpdatedAtPoint :: ChainPoint
-  , lastUpdatedAtBlockNo :: BlockNo
+  , point :: ChainPoint
+  , blockNo :: BlockNo
   }
   deriving stock (Eq, Show, Generic)
   deriving anyclass (FromJSON, ToJSON)
@@ -123,8 +123,8 @@ aggregateInitObservation headId point blockNo headSeed HeadParameters{parties, c
       , contestations = Seen 0
       , snapshotNumber = Seen 0
       , contestationDeadline = Unknown
-      , lastUpdatedAtPoint = point
-      , lastUpdatedAtBlockNo = blockNo
+      , point = point
+      , blockNo = blockNo
       }
 
 aggregateAbortObservation :: HeadId -> ChainPoint -> BlockNo -> [HeadState] -> [HeadState]
@@ -145,8 +145,8 @@ aggregateAbortObservation headId point blockNo currentHeads =
       , contestations = Seen 0
       , snapshotNumber = Seen 0
       , contestationDeadline = Unknown
-      , lastUpdatedAtPoint = point
-      , lastUpdatedAtBlockNo = blockNo
+      , point = point
+      , blockNo = blockNo
       }
 
 aggregateCommitObservation :: HeadId -> ChainPoint -> BlockNo -> Party -> UTxO -> [HeadState] -> [HeadState]
@@ -196,8 +196,8 @@ aggregateCommitObservation headId point blockNo party committed currentHeads =
       , contestations = Seen 0
       , snapshotNumber = Seen 0
       , contestationDeadline = Unknown
-      , lastUpdatedAtPoint = point
-      , lastUpdatedAtBlockNo = blockNo
+      , point = point
+      , blockNo = blockNo
       }
 
 aggregateCollectComObservation :: HeadId -> ChainPoint -> BlockNo -> [HeadState] -> [HeadState]
@@ -218,8 +218,8 @@ aggregateCollectComObservation headId point blockNo currentHeads =
       , contestations = Seen 0
       , snapshotNumber = Seen 0
       , contestationDeadline = Unknown
-      , lastUpdatedAtPoint = point
-      , lastUpdatedAtBlockNo = blockNo
+      , point = point
+      , blockNo = blockNo
       }
 
 aggregateCloseObservation :: HeadId -> ChainPoint -> BlockNo -> SnapshotNumber -> UTCTime -> [HeadState] -> [HeadState]
@@ -240,8 +240,8 @@ aggregateCloseObservation headId point blockNo (UnsafeSnapshotNumber sn) contest
       , contestations = Seen 0
       , snapshotNumber = Seen sn
       , contestationDeadline = Seen contestationDeadline
-      , lastUpdatedAtPoint = point
-      , lastUpdatedAtBlockNo = blockNo
+      , point = point
+      , blockNo = blockNo
       }
 
 aggregateContestObservation :: HeadId -> ChainPoint -> BlockNo -> SnapshotNumber -> [HeadState] -> [HeadState]
@@ -270,8 +270,8 @@ aggregateContestObservation headId point blockNo (UnsafeSnapshotNumber sn) curre
       , contestations = Seen 1
       , snapshotNumber = Seen sn
       , contestationDeadline = Unknown
-      , lastUpdatedAtPoint = point
-      , lastUpdatedAtBlockNo = blockNo
+      , point = point
+      , blockNo = blockNo
       }
 
 aggregateFanoutObservation :: HeadId -> ChainPoint -> BlockNo -> [HeadState] -> [HeadState]
@@ -292,8 +292,8 @@ aggregateFanoutObservation headId point blockNo currentHeads =
       , contestations = Unknown
       , snapshotNumber = Unknown
       , contestationDeadline = Unknown
-      , lastUpdatedAtPoint = point
-      , lastUpdatedAtBlockNo = blockNo
+      , point = point
+      , blockNo = blockNo
       }
 
 replaceHeadState :: HeadState -> [HeadState] -> [HeadState]
diff --git a/hydra-explorer/web/src/app/model.tsx b/hydra-explorer/web/src/app/model.tsx
index 258bb4c9efc..bcce6a508ee 100644
--- a/hydra-explorer/web/src/app/model.tsx
+++ b/hydra-explorer/web/src/app/model.tsx
@@ -6,8 +6,8 @@ export interface ChainPoint {
 export interface HeadState {
     headId: string
     status: string
-    lastUpdatedAtPoint: ChainPoint
-    lastUpdatedAtBlockNo: number
+    point: ChainPoint
+    blockNo: number
 }
 
 export interface TickState {
diff --git a/hydra-explorer/web/src/components/HeadsTable/index.tsx b/hydra-explorer/web/src/components/HeadsTable/index.tsx
index eb7e71475df..2edba490f2c 100644
--- a/hydra-explorer/web/src/components/HeadsTable/index.tsx
+++ b/hydra-explorer/web/src/components/HeadsTable/index.tsx
@@ -5,7 +5,6 @@ import useDataFetcher from "@/hooks/DataFetcher"
 import { useState } from "react"
 
 const HeadsTable = () => {
-
     const [heads, setHeads] = useState<HeadState[]>([])
     const [error, setError] = useState<string | null>(null)
 
@@ -16,7 +15,7 @@ const HeadsTable = () => {
     })
 
     return (
-        <div className="container mx-auto mt-8">
+        <div className="container mx-auto mt-12">
             {error ? (
                 <p className="text-red-500">{error}</p>
             ) : (
@@ -24,21 +23,21 @@ const HeadsTable = () => {
                     <table className="table-fixed w-full bg-gray-800 text-white rounded-lg">
                         <thead>
                             <tr>
-                                <th className="px-4 py-2">Head ID</th>
-                                <th className="px-4 py-2">Status</th>
-                                <th className="px-4 py-2">Last Updated At SlotNo</th>
-                                <th className="px-4 py-2">Last Updated At BlockNo</th>
-                                <th className="px-4 py-2">Last Updated At BlockHash</th>
+                                <th className="text-center px-4 py-2">Head ID</th>
+                                <th className="text-center px-4 py-2">Status</th>
+                                <th className="text-center px-4 py-2">Slot Number</th>
+                                <th className="text-center px-4 py-2">Block Number</th>
+                                <th className="text-center px-4 py-2">Block Hash</th>
                             </tr>
                         </thead>
                         <tbody>
                             {heads?.map((entry, index) => (
                                 <tr key={index} className={`${index % 2 === 0 ? 'bg-gray-700' : 'bg-gray-600'}`}>
-                                    <td className="truncate border px-4 py-2">{entry.headId}</td>
-                                    <td className="truncate border px-4 py-2">{entry.status}</td>
-                                    <td className="truncate border px-4 py-2">{entry.lastUpdatedAtPoint.slot}</td>
-                                    <td className="truncate border px-4 py-2">{entry.lastUpdatedAtBlockNo}</td>
-                                    <td className="truncate border px-4 py-2">{entry.lastUpdatedAtPoint.blockHash}</td>
+                                    <td className="truncate text-center border px-4 py-2">{entry.headId}</td>
+                                    <td className="truncate text-center border px-4 py-2">{entry.status}</td>
+                                    <td className="truncate text-center border px-4 py-2">{entry.point.slot}</td>
+                                    <td className="truncate text-center border px-4 py-2">{entry.blockNo}</td>
+                                    <td className="truncate text-center border px-4 py-2">{entry.point.blockHash}</td>
                                 </tr>
                             ))}
                         </tbody>
diff --git a/hydra-explorer/web/src/components/IntervalSetter/index.tsx b/hydra-explorer/web/src/components/IntervalSetter/index.tsx
index d4b031d4e61..c1145d3aa55 100644
--- a/hydra-explorer/web/src/components/IntervalSetter/index.tsx
+++ b/hydra-explorer/web/src/components/IntervalSetter/index.tsx
@@ -3,20 +3,16 @@
 import { useIntervalContext } from "@/providers/IntervalProvider"
 import { ChangeEvent } from "react"
 
-interface IntervalSetterProps {
-  className?: string
-}
-
-export default function IntervalSetter(props: IntervalSetterProps) {
+const IntervalSetter = () => {
   const { isAutoUpdate
     , intervalTime
     , toggleAutoUpdate
     , updateIntervalTime } = useIntervalContext()
 
   return (
-    <div className={`col ${props.className}`}>
-      <label className="block text-sm font-medium text-gray-200">Update Interval:</label>
-      <div className="mt-1 flex items-center">
+    <div className="flex">
+      <div>
+        <label className="mt-8 block text-sm font-medium text-gray-200">Update Interval:</label>
         <button
           type="button"
           onClick={toggleAutoUpdate}
@@ -26,6 +22,8 @@ export default function IntervalSetter(props: IntervalSetterProps) {
         >
           {isAutoUpdate ? "Pause ⏸" : "Resume ▶"}
         </button>
+      </div>
+      <div className="mt-14">
         <select
           value={intervalTime}
           onChange={(e: ChangeEvent<HTMLSelectElement>) => {
@@ -44,3 +42,4 @@ export default function IntervalSetter(props: IntervalSetterProps) {
   )
 }
 
+export default IntervalSetter
\ No newline at end of file
diff --git a/hydra-explorer/web/src/components/TickBox/index.tsx b/hydra-explorer/web/src/components/TickBox/index.tsx
index d1749ad703a..9b7acfc3410 100644
--- a/hydra-explorer/web/src/components/TickBox/index.tsx
+++ b/hydra-explorer/web/src/components/TickBox/index.tsx
@@ -24,17 +24,17 @@ const TickBox = () => {
                     <table className="table-fixed bg-gray-800 text-white rounded-lg">
                         <thead>
                             <tr>
-                                <th className="px-4 py-2">Block Number</th>
-                                <th className="px-4 py-2">Block Hash</th>
-                                <th className="px-4 py-2">Slot Number</th>
+                                <th className="text-center px-4 py-2">Block Number</th>
+                                <th className="text-center px-4 py-2">Block Hash</th>
+                                <th className="text-center px-4 py-2">Slot Number</th>
                             </tr>
                         </thead>
                         <tbody>
                             {tick ? (
                                 <tr>
-                                    <td className="truncate border px-4 py-2">{tick?.blockNo}</td>
-                                    <td className="truncate border px-4 py-2">{tick?.point.blockHash}</td>
-                                    <td className="truncate border px-4 py-2">{tick?.point.slot}</td>
+                                    <td className="truncate text-center border px-4 py-2">{tick?.blockNo}</td>
+                                    <td className="truncate text-center border px-4 py-2">{tick?.point.blockHash}</td>
+                                    <td className="truncate text-center border px-4 py-2">{tick?.point.slot}</td>
                                 </tr>
                             ) : null}
                         </tbody>