diff --git a/src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx b/src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx
index d5711d3..b2c0835 100644
--- a/src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx
+++ b/src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx
@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types'
-import { Button, Flex, Typography, Card } from 'antd'
+import { useState } from 'react'
+import { Button, Flex, Typography, Card, Dropdown, Modal, Table } from 'antd'
 import TimeDisplay from '../../common/TimeDisplay'
 import FarmControlAppIcon from '../../../Logos/FarmControlAppIcon'
+import EyeIcon from '../../../Icons/EyeIcon'
 
 const { Text, Title } = Typography
 
@@ -9,56 +11,131 @@ const NewAppUpdate = ({ update, onCancel, onUpdate }) => {
   const artifacts = Array.isArray(update?.artifacts) ? update.artifacts : []
   const primaryArtifact = artifacts.find((artifact) => artifact.url)
 
+  const [changesMenuOpen, setChangesMenuOpen] = useState(false)
+
+  const columns = [
+    {
+      title: 'Date',
+      dataIndex: 'date',
+      key: 'date',
+      width: 290,
+      render: (text, record) => {
+        return <TimeDisplay dateTime={record.date} showSince={true} />
+      }
+    },
+    {
+      title: 'Author',
+      dataIndex: 'author',
+      key: 'author',
+      width: 180
+    },
+    {
+      title: 'Message',
+      dataIndex: 'message',
+      key: 'message',
+      width: 500
+    }
+  ]
+
+  const actionsMenu = {
+    items: [
+      {
+        label: 'View Changes',
+        key: 'viewChanges',
+        icon: <EyeIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'viewChanges') {
+        setChangesMenuOpen(true)
+      }
+    }
+  }
+
   return (
-    <Flex vertical gap='middle'>
-      <Text>
-        A new Farm Control update is available. Would you like to update now?
-      </Text>
-      <Card styles={{ body: { padding: 12 } }}>
-        <Flex gap={12}>
-          <FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
-          <Flex vertical gap={2} justify='center'>
-            <Title level={3} style={{ margin: 0 }}>
-              {'Farm Control UI'}
-            </Title>
-            <Flex style={{ columnGap: '15px', rowGap: '8px' }}>
-              <Text style={{ margin: 0 }} type='secondary'>
-                Version:{' '}
-                <Text>
-                  {update?.version ? `v${update.version}` : 'Unknown'}
-                </Text>
-              </Text>
-              <Text style={{ margin: 0 }} type='secondary'>
-                Build Number:{' '}
-                <Text>
-                  {update?.buildNumber ? `b${update.buildNumber}` : 'Unknown'}
-                </Text>
-              </Text>
-              <Text style={{ margin: 0 }} type='secondary'>
-                Branch: <Text>{update?.branch || 'Unknown'}</Text>
-              </Text>
+    <>
+      <Flex vertical gap='middle'>
+        <Text>
+          A new Farm Control update is available. Would you like to update now?
+        </Text>
+        <Card styles={{ body: { padding: '12px 18px 12px 12px' } }}>
+          <Flex gap={12} style={{ width: '100%' }}>
+            <FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
+            <Flex vertical gap={2} justify='center' style={{ width: '100%' }}>
+              <Title level={3} style={{ margin: 0 }}>
+                {'Farm Control UI'}
+              </Title>
+              <Flex
+                align='center'
+                justify='space-between'
+                style={{ width: '100%' }}
+              >
+                <Flex style={{ columnGap: '15px', rowGap: '8px' }}>
+                  <Text style={{ margin: 0 }} type='secondary'>
+                    Version:{' '}
+                    <Text>
+                      {update?.version ? `v${update.version}` : 'Unknown'}
+                    </Text>
+                  </Text>
+                  <Text style={{ margin: 0 }} type='secondary'>
+                    Build Number:{' '}
+                    <Text>
+                      {update?.buildNumber
+                        ? `b${update.buildNumber}`
+                        : 'Unknown'}
+                    </Text>
+                  </Text>
+                  <Text style={{ margin: 0 }} type='secondary'>
+                    Branch: <Text>{update?.branch || 'Unknown'}</Text>
+                  </Text>
+                </Flex>
+                <Dropdown menu={actionsMenu}>
+                  <Button size='small' type='text'>
+                    Actions
+                  </Button>
+                </Dropdown>
+              </Flex>
             </Flex>
           </Flex>
-        </Flex>
-      </Card>
+        </Card>
 
-      <Flex justify='space-between' gap='small' align='center'>
-        <Flex gap='small'>
-          <Text type='secondary'>Built at:</Text>
-          <TimeDisplay dateTime={update?.builtAt} />
-        </Flex>
-        <Flex gap='small'>
-          <Button onClick={onCancel}>Not Now</Button>
-          <Button
-            type='primary'
-            onClick={() => onUpdate(update)}
-            disabled={!primaryArtifact}
-          >
-            Update Now
-          </Button>
+        <Flex justify='space-between' gap='small' align='center'>
+          <Flex gap='small'>
+            <Text type='secondary'>Built at:</Text>
+            <TimeDisplay dateTime={update?.builtAt} />
+          </Flex>
+          <Flex gap='small'>
+            <Button onClick={onCancel}>Not Now</Button>
+            <Button
+              type='primary'
+              onClick={() => onUpdate(update)}
+              disabled={!primaryArtifact}
+            >
+              Update Now
+            </Button>
+          </Flex>
         </Flex>
+
+        <Modal
+          open={changesMenuOpen}
+          onCancel={() => setChangesMenuOpen(false)}
+          footer={null}
+          title='View Changes'
+          width={1200}
+        >
+          <div style={{ marginTop: '20px' }}>
+            <Table
+              dataSource={update?.changes}
+              columns={columns}
+              scroll={{ x: 1100 }}
+              bordered={true}
+              pagination={false}
+              className='child-table'
+            />
+          </div>
+        </Modal>
       </Flex>
-    </Flex>
+    </>
   )
 }