diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 668a814a..a4443a66 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,7 @@
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@heroicons/react": "^2.2.0",
-        "@mui/icons-material": "^6.1.2",
+        "@mui/icons-material": "^6.1.9",
         "@mui/material": "^6.1.2",
         "@mui/x-date-pickers": "^7.23.0",
         "@supabase/supabase-js": "^2.45.5",
@@ -1859,13 +1859,13 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/@emotion/cache": {
-      "version": "11.13.1",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
-      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz",
+      "integrity": "sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==",
       "dependencies": {
         "@emotion/memoize": "^0.9.0",
         "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
         "@emotion/weak-memoize": "^0.4.0",
         "stylis": "4.2.0"
       }
@@ -1912,14 +1912,14 @@
       }
     },
     "node_modules/@emotion/serialize": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
-      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
       "dependencies": {
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
         "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.1",
+        "@emotion/utils": "^1.4.2",
         "csstype": "^3.0.2"
       }
     },
@@ -1964,9 +1964,9 @@
       }
     },
     "node_modules/@emotion/utils": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
-      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA=="
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA=="
     },
     "node_modules/@emotion/weak-memoize": {
       "version": "0.4.0",
@@ -3036,18 +3036,18 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.7.tgz",
-      "integrity": "sha512-POuIBi80BZBogQkG4PQKIGwy4QFwB+kOr+OI4k7Znh7LqMAIhwB9OC00l6M+w1GrZJYj3T8R5WX8G6QAIvoVEw==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.9.tgz",
+      "integrity": "sha512-TWqj7b1w5cmSz4H/uf+y2AHxAH4ldPR7D2bz0XVyn60GCAo/zRbRPx7cF8gTs/i7CiYeHzV6dtat0VpMwOtolw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.7.tgz",
-      "integrity": "sha512-RGzkeHNArIVy5ZQ12bq/8VYNeICEyngngsFskTJ/2hYKhIeIII3iRGtaZaSvLpXh7h3Fg3VKTulT+QU0w5K4XQ==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.9.tgz",
+      "integrity": "sha512-AzlhIT51rdjkZ/EcUV2dbhNkNSUHIqCnNoUxodpiTw8buyAUBd+qnxg5OBSuPpun/ZEdSSB8Q7Uyh6zqjiMsEQ==",
       "dependencies": {
         "@babel/runtime": "^7.26.0"
       },
@@ -3059,7 +3059,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^6.1.7",
+        "@mui/material": "^6.1.9",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -3070,15 +3070,15 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.7.tgz",
-      "integrity": "sha512-KsjujQL/A2hLd1PV3QboF+W6SSL5QqH6ZlSuQoeYz9r69+TnyBFIevbYLxdjJcJmGBjigL5pfpn7hTGop+vhSg==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.9.tgz",
+      "integrity": "sha512-NwqIN0bdsgzSbZd5JFcC+2ez0XW/XNs8uiV2PDHrqQ4qf/FEasFJG1z6g8JbCN0YlTrHZekVb17X0Fv0qcYJfQ==",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/core-downloads-tracker": "^6.1.7",
-        "@mui/system": "^6.1.7",
+        "@mui/core-downloads-tracker": "^6.1.9",
+        "@mui/system": "^6.1.9",
         "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.7",
+        "@mui/utils": "^6.1.9",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
@@ -3097,7 +3097,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.1.7",
+        "@mui/material-pigment-css": "^6.1.9",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3118,12 +3118,12 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.7.tgz",
-      "integrity": "sha512-uLbfUSsug5K0LVkv0PI6Flste3le8+6WSL2omdTiYde93P89Qr7pKr8TA6d2yXfr+Bm+SvD8/fGnkaRwFkryuQ==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.9.tgz",
+      "integrity": "sha512-7aum/O1RquBYhfwL/7egDyl9GqJgPM6hoJDFFBbhF6Sgv9yI9v4w3ArKUkuVvR0CtVj4NXRVMKEioh1bjUzvuA==",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/utils": "^6.1.7",
+        "@mui/utils": "^6.1.9",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3144,13 +3144,13 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.7.tgz",
-      "integrity": "sha512-Ou4CxN7MQmwrfG1Pu6EYjPgPChQXxPDJrwgizLXlRPOad5qAq4gYXRuzrGQ2DfGjjwmJhjI8T6A0SeapAZPGig==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.9.tgz",
+      "integrity": "sha512-xynSLlJRxHLzSfQaiDjkaTx8LiFb9ByVa7aOdwFnTxGWFMY1F+mkXwAUY4jDDE+MAxkWxlzzQE0wOohnsxhdQg==",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@emotion/cache": "^11.13.1",
-        "@emotion/serialize": "^1.3.2",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
         "@emotion/sheet": "^1.4.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -3177,15 +3177,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.7.tgz",
-      "integrity": "sha512-qbMGgcC/FodpuRSfjXlEDdbNQaW++eATh0vNBcPUv2/YXSpReoOpoT9FhogxEBNks+aQViDXBRZKh6HX2fVmwg==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.9.tgz",
+      "integrity": "sha512-8x+RucnNp21gfFYsklCaZf0COXbv3+v0lrVuXONxvPEkESi2rwLlOi8UPJfcz6LxZOAX3v3oQ7qw18vnpgueRg==",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/private-theming": "^6.1.7",
-        "@mui/styled-engine": "^6.1.7",
+        "@mui/private-theming": "^6.1.9",
+        "@mui/styled-engine": "^6.1.9",
         "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.7",
+        "@mui/utils": "^6.1.9",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -3229,9 +3229,9 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.7.tgz",
-      "integrity": "sha512-Gr7cRZxBoZ0BIa3Xqf/2YaUrBLyNPJvXPQH3OsD9WMZukI/TutibbQBVqLYpgqJn8pKSjbD50Yq2auG0wI1xOw==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.9.tgz",
+      "integrity": "sha512-N7uzBp7p2or+xanXn3aH2OTINC6F/Ru/U8h6amhRZEev8bJhKN86rIDIoxZZ902tj+09LXtH83iLxFMjMHyqNA==",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
         "@mui/types": "^7.2.19",
diff --git a/frontend/package.json b/frontend/package.json
index f7bcfe84..84860c67 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@heroicons/react": "^2.2.0",
-    "@mui/icons-material": "^6.1.2",
+    "@mui/icons-material": "^6.1.9",
     "@mui/material": "^6.1.2",
     "@mui/x-date-pickers": "^7.23.0",
     "@supabase/supabase-js": "^2.45.5",
diff --git a/frontend/src/components/Modals/ConfirmCancelModal/ConfirmCancelModal.jsx b/frontend/src/components/Modals/ConfirmCancelModal/ConfirmCancelModal.jsx
index 6e069bc0..326deb6d 100644
--- a/frontend/src/components/Modals/ConfirmCancelModal/ConfirmCancelModal.jsx
+++ b/frontend/src/components/Modals/ConfirmCancelModal/ConfirmCancelModal.jsx
@@ -5,7 +5,7 @@ import { CLButtonSecondary } from "../../Buttons/CLButtons"
 import Typography from '@mui/material/Typography';
 import Modal from '@mui/material/Modal';
 import Divider from '@mui/material/Divider'
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { ExclamationCircleIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import './ConfirmCancelModal.css'
 
 export const ConfirmCancelModal = () => {
@@ -30,10 +30,10 @@ export const ConfirmCancelModal = () => {
         onClose={handleClose}
       >
         <Box className="modal-content">
+          <ExclamationCircleIcon />
           <Typography variant="h6" component="h2">
-            Congratulations!
+            Are you sure you would like to cancel without saving?
           </Typography>
-          <Typography>Your new log &quot;MyExampleLog&quot; has been saved to log history.</Typography>
           <Divider />
           <button style={{backgroundColor: "red"}} onClick={handleConfirm}>Confirm</button>
           <CLButtonSecondary onClick={handleClose}>
diff --git a/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.jsx b/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.jsx
index 95a384b9..e8b2606e 100644
--- a/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.jsx
+++ b/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.jsx
@@ -5,7 +5,8 @@ import { CLButtonPrimary, CLButtonSecondary } from "../../Buttons/CLButtons"
 import Typography from '@mui/material/Typography';
 import Modal from '@mui/material/Modal';
 import Divider from '@mui/material/Divider'
-import { ClockIcon, HomeIcon, BookmarkSquareIcon } from '@heroicons/react/24/outline';
+import { ClockIcon, HomeIcon } from '@heroicons/react/24/outline';
+import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import './LogSavedSuccessModal.css'
 
 export const LogSavedSuccessModal = () => {
@@ -26,7 +27,7 @@ export const LogSavedSuccessModal = () => {
   return (
     <div>
       <CLButtonPrimary onClick={handleOpen} width={"330px"}>
-       <BookmarkSquareIcon />
+       <SaveOutlinedIcon />
         <p>Create New Log</p>
       </CLButtonPrimary>
       <Modal
diff --git a/frontend/src/pages/manual_entry/ManualEntry.css b/frontend/src/pages/manual_entry/ManualEntry.css
index 9dd4701f..821a05e0 100644
--- a/frontend/src/pages/manual_entry/ManualEntry.css
+++ b/frontend/src/pages/manual_entry/ManualEntry.css
@@ -2,15 +2,22 @@
   margin: 0 220px 0 220px;
 }
 
+.section-header {
+  font-size: 28px;
+}
+
 .input-title {
   margin: 4px 0 4px 0;
   color: #4F607E;
 }
 
 .text-input {
+  box-sizing: border-box;
+  width: 100%;
   padding: 1rem;
   border: 1px solid #BAC1D0;
   border-radius: 16px;
+  background-color: transparent;
 }
 
 .case-planning-text-area {
@@ -18,6 +25,7 @@
   padding: 1rem;
   border: 1px solid #BAC1D0;
   border-radius: 16px;
+  background-color: transparent;
   resize: none;
 }
 
@@ -26,5 +34,6 @@
   padding: 1rem;
   border: 1px solid #BAC1D0;
   border-radius: 16px;
+  background-color: transparent;
   resize: none;
 }
diff --git a/frontend/src/pages/manual_entry/ManualEntry.jsx b/frontend/src/pages/manual_entry/ManualEntry.jsx
index a88da7d8..f968adb6 100644
--- a/frontend/src/pages/manual_entry/ManualEntry.jsx
+++ b/frontend/src/pages/manual_entry/ManualEntry.jsx
@@ -5,27 +5,30 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { Divider } from "@mui/material";
+import Box from "@mui/material/Box";
+import Grid from '@mui/material/Grid2';
 import "./ManualEntry.css"
 
+/**
+ * TODO: Add IntersectionObserver scrollable sticky header behaviour
+ * https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/
+ * https://dev.to/dance2die/react-sticky-event-with-intersection-observer-310h
+ */
 const ManualEntry = () => {
+
   return (
     <div>
       <AppBar />
       <div className="manual-entry-container">
         <Divider />
-        <h2>1. Surgical and Patient Information</h2>
-        <p className="input-title">Case no.</p>
-        <input className="text-input" placeholder="1234567"/>
-        <input className="text-input" placeholder="1234567"/>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <DatePicker />
-        </LocalizationProvider>
-        <h2>2. Examinations and Investigations</h2>
-        <h2>3. Case Planning</h2>
-        <textarea className="case-planning-text-area"/>
-        <h2>4. Learning Points</h2>
-        <textarea className="learning-points-text-area"/>
-        <textarea className="learning-points-text-area"/>
+        <h2 className="section-header">1. Surgical and Patient Information</h2>
+        <SurgicalAndPatientInfo />
+        <h2 className="section-header">2. Examinations and Investigations</h2>
+        <ExaminationsAndInvestigations />
+        <h2 className="section-header">3. Case Planning</h2>
+        <CasePlanning />
+        <h2 className="section-header">4. Learning Points</h2>
+        <LearningPoints />
         <ConfirmCancelModal />
         <LogSavedSuccessModal />
       </div>
@@ -33,4 +36,74 @@ const ManualEntry = () => {
   );
 };
 
+const SurgicalAndPatientInfo = () => {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={8}>
+        <Grid size={6}>
+          <Grid container spacing={1}>
+            <Grid size={6}>
+              <div>
+                <p className="input-title">Case no.</p>
+                <input className="text-input" placeholder="1234567"/>
+              </div>
+            </Grid>
+            <Grid size={6}>
+              <div>
+                <p className="input-title">Type</p>
+                <input className="text-input" placeholder="Adult cardiac"/>
+              </div>
+            </Grid>
+            <Grid size={12}>
+              <div>
+                <p className="input-title">Surgeon</p>
+                <input className="text-input" placeholder="Surgeon name"/>
+              </div>
+            </Grid>
+            <Grid size={12}>
+              <div>
+                <p className="input-title">OR Date</p>
+                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                  <DatePicker sx={{ borderRadius: "100px" }}/>
+                </LocalizationProvider>
+              </div>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid size={6}>
+          <div>
+            <p className="input-title">Patient ID</p>
+            <input className="text-input" placeholder="7654321"/>
+          </div>
+        </Grid>
+      </Grid>
+    </Box>
+  )
+}
+
+const ExaminationsAndInvestigations = () => {
+  return (
+    <div>
+      <textarea className="case-planning-text-area"/>
+    </div>
+  )
+}
+
+const CasePlanning = () => {
+  return (
+    <div>
+      <textarea className="case-planning-text-area"/>
+    </div>
+  )
+}
+
+const LearningPoints = () => {
+  return (
+    <div>
+      <textarea className="learning-points-text-area"/>
+      <textarea className="learning-points-text-area"/>
+    </div>
+  )
+}
+
 export default ManualEntry;