diff --git a/src/pages/notification/component/DetailNotification.jsx b/src/pages/notification/component/DetailNotification.jsx
index 3ec4c77..54bad25 100644
--- a/src/pages/notification/component/DetailNotification.jsx
+++ b/src/pages/notification/component/DetailNotification.jsx
@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Row, Col, Tag, Divider, Card, Button } from 'antd';
+import { Row, Col, Tag, Card, Button } from 'antd';
 import { CloseCircleFilled, WarningFilled, CheckCircleFilled, InfoCircleFilled } from '@ant-design/icons';
 
 const DetailNotification = memo(function DetailNotification({ selectedData, onClose }) {
@@ -47,6 +47,7 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
             title="Detail Notifikasi"
             extra={<Button onClick={onClose}>Tutup</Button>}
             style={{ height: '100%' }}
+            bodyStyle={{ padding: '0 24px' }}
         >
             <div>
                 {/* Header with Icon and Status */}
@@ -54,91 +55,87 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
                     style={{
                         display: 'flex',
                         alignItems: 'center',
-                        gap: '16px',
-                        marginBottom: '24px',
-                        padding: '16px',
+                        gap: '8px',
+                        marginBottom: '0',
+                        padding: '2px 0',
                         backgroundColor: '#fafafa',
                         borderRadius: '8px',
                     }}
                 >
                     <div
                         style={{
-                            width: '64px',
-                            height: '64px',
+                            width: '32px',
+                            height: '32px',
                             borderRadius: '50%',
                             backgroundColor: bgColor,
                             color: color,
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
-                            fontSize: '32px',
+                            fontSize: '18px',
                             flexShrink: 0,
                         }}
                     >
-                        {IconComponent && <IconComponent style={{ fontSize: '32px' }} />}
+                        {IconComponent && <IconComponent style={{ fontSize: '18px' }} />}
                     </div>
                     <div style={{ flex: 1 }}>
-                        <Tag color={tagColor} style={{ marginBottom: '8px', fontSize: '12px' }}>
+                        <Tag color={tagColor} style={{ marginBottom: '2px', fontSize: '11px' }}>
                             {selectedData.type.toUpperCase()}
                         </Tag>
-                        <div style={{ fontSize: '16px', fontWeight: 600, color: '#262626' }}>
+                        <div style={{ fontSize: '14px', fontWeight: 600, color: '#262626' }}>
                             {selectedData.title}
                         </div>
                     </div>
                 </div>
 
-                <Divider style={{ margin: '16px 0' }} />
-
                 {/* Information Grid */}
-                <Row gutter={[16, 16]}>
+                <Row gutter={[16, 0]}>
                     <Col span={12}>
-                        <div style={{ marginBottom: '16px' }}>
-                            <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
+                        <div style={{ marginBottom: '2px' }}>
+                            <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
                                 PLC
                             </div>
-                            <div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
+                            <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
                                 {selectedData.plc}
                             </div>
                         </div>
                     </Col>
                     <Col span={12}>
-                        <div style={{ marginBottom: '16px' }}>
-                            <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>Tag</div>
-                            <div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
+                        <div style={{ marginBottom: '2px' }}>
+                            <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>Tag</div>
+                            <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
                                 {selectedData.tag}
                             </div>
                         </div>
                     </Col>
                 </Row>
 
-                <Row gutter={[16, 16]}>
+                <Row gutter={[16, 0]}>
                     <Col span={12}>
-                        <div style={{ marginBottom: '16px' }}>
-                            <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
+                        <div style={{ marginBottom: '2px' }}>
+                            <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
                                 Engineer
                             </div>
-                            <div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
+                            <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
                                 {selectedData.engineer}
                             </div>
                         </div>
                     </Col>
                     <Col span={12}>
-                        <div style={{ marginBottom: '16px' }}>
-                            <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
+                        <div style={{ marginBottom: '2px' }}>
+                            <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
                                 Waktu
                             </div>
-                            <div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
+                            <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
                                 {selectedData.time}
                             </div>
                         </div>
                     </Col>
                 </Row>
 
-                <Divider style={{ margin: '16px 0' }} />
-
                 {/* Status */}
-                <div style={{ marginBottom: '16px' }}>
-                    <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '8px' }}>Status</div>
+                <div style={{ marginBottom: '2px' }}>
+                    <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '2px' }}>Status</div>
                     <Tag color={selectedData.isRead ? 'default' : 'blue'}>
                         {selectedData.isRead ? 'Sudah Dibaca' : 'Belum Dibaca'}
                     </Tag>
@@ -147,14 +144,14 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
                 {/* Additional Info */}
                 <div
                     style={{
-                        marginTop: '16px',
-                        padding: '12px',
+                        marginTop: '0',
+                        padding: '4px',
                         backgroundColor: '#f6f9ff',
                         borderRadius: '6px',
                         border: '1px solid #d6e4ff',
                     }}
                 >
-                    <div style={{ fontSize: '12px', color: '#595959' }}>
+                    <div style={{ fontSize: '11px', color: '#595959' }}>
                         <strong>Catatan:</strong> Notifikasi ini telah dikirim ke engineer yang bersangkutan
                         untuk ditindaklanjuti sesuai dengan prosedur yang berlaku.
                     </div>
diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx
index 2e5ef42..a859add 100644
--- a/src/pages/notification/component/ListNotification.jsx
+++ b/src/pages/notification/component/ListNotification.jsx
@@ -645,200 +645,199 @@ const ListNotification = memo(function ListNotification(props) {
         </>
     );
 
-    const renderDetailsNotification = () => {
-        if (!selectedNotification) return null;
-
-        const { IconComponent, color } = getIconAndColor(selectedNotification.type);
-
-        return (
-            <Space direction="vertical" size="large" style={{ width: '100%' }}>
-                <Row gutter={[16, 16]}>
-                    {/* Kolom Kiri: Data Kompresor */}
-                    <Col span={12}>
-                        <Card
-                            title=""
-                            size="small"
-                            style={{ height: '100%', borderColor: '#d4380d' }}
-                            bodyStyle={{ padding: '12px' }}
-                        >
-                            <Space direction="vertical" size="large" style={{ width: '100%' }}>
-                                <Row gutter={16} align="middle">
-                                    <Col>
-                                        <div
-                                            style={{
-                                                width: '32px',
-                                                height: '32px',
-                                                borderRadius: '50%',
-                                                backgroundColor: '#d4380d',
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                color: '#ffffff',
-                                                fontSize: '18px',
-                                            }}
-                                        >
-                                            <CloseOutlined />
-                                        </div>
-                                    </Col>
-                                    <Col>
-                                        <Text>{selectedNotification.title}</Text>
-                                        <div style={{ marginTop: '2px' }}>
-                                            <Text strong style={{ fontSize: '16px' }}>
-                                                {selectedNotification.issue}
-                                            </Text>
-                                        </div>
-                                    </Col>
-                                </Row>
-                                <div>
-                                    <Text strong>Plant Subsection</Text>
-                                    <div>{selectedNotification.subsection}</div>
-                                    <Text strong style={{ display: 'block', marginTop: '8px' }}>
-                                        Time
-                                    </Text>
-                                    <div>{selectedNotification.timestamp.split(' ')[1]} WIB</div>
-                                </div>
-
-                                <div
-                                    style={{
-                                        border: '1px solid #d4380d',
-                                        borderRadius: '4px',
-                                        padding: '8px',
-                                        background: 'linear-gradient(to right, #ffe7e6, #ffffff)',
-                                    }}
-                                >
-                                    <Row justify="space-around" align="middle">
+        const renderDetailsNotification = () => {
+            if (!selectedNotification) return null;
+    
+            const { IconComponent, color } = getIconAndColor(selectedNotification.type);
+    
+            return (
+                <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+                    <Row gutter={[16, 8]}>
+                        {/* Kolom Kiri: Data Kompresor */}
+                        <Col span={12}>
+                            <Card
+                                title=""
+                                size="small"
+                                style={{ height: '100%', borderColor: '#d4380d' }}
+                                bodyStyle={{ padding: '12px' }}
+                            >
+                                <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+                                    <Row gutter={16} align="middle">
                                         <Col>
-                                            <Text style={{ fontSize: '12px', color: color }}>
-                                                Value
-                                            </Text>
                                             <div
                                                 style={{
-                                                    fontWeight: 'bold',
-                                                    fontSize: '16px',
-                                                    color: color,
+                                                    width: '32px',
+                                                    height: '32px',
+                                                    borderRadius: '50%',
+                                                    backgroundColor: '#d4380d',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    color: '#ffffff',
+                                                    fontSize: '18px',
                                                 }}
                                             >
-                                                N/A
+                                                <CloseOutlined />
                                             </div>
                                         </Col>
                                         <Col>
-                                            <Text type="secondary" style={{ fontSize: '12px' }}>
-                                                Treshold
-                                            </Text>
-                                            <div style={{ fontWeight: 500 }}>N/A</div>
+                                            <Text>{selectedNotification.title}</Text>
+                                            <div style={{ marginTop: '2px' }}>
+                                                <Text strong style={{ fontSize: '16px' }}>
+                                                    {selectedNotification.issue}
+                                                </Text>
+                                            </div>
                                         </Col>
                                     </Row>
-                                </div>
-                            </Space>
-                        </Card>
-                    </Col>
-
-                    {/* Kolom Kanan: Informasi Teknis */}
-                    <Col span={12}>
-                        <Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
-                            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
-                                <div>
-                                    <Text strong>PLC</Text>
-                                    <div>{selectedNotification.plc}</div>
-                                </div>
-                                <div>
-                                    <Text strong>Status</Text>
-                                    <div style={{ color: '#faad14', fontWeight: 500 }}>
-                                        {selectedNotification.status}
+                                    <div>
+                                        <Text strong>Plant Subsection</Text>
+                                        <div>{selectedNotification.subsection}</div>
+                                        <Text strong style={{ display: 'block', marginTop: '8px' }}>
+                                            Time
+                                        </Text>
+                                        <div>{selectedNotification.timestamp.split(' ')[1]} WIB</div>
                                     </div>
-                                </div>
-                                <div>
-                                    <Text strong>Tag</Text>
+    
                                     <div
                                         style={{
-                                            fontFamily: 'monospace',
-                                            backgroundColor: '#f0f0f0',
-                                            padding: '2px 6px',
+                                            border: '1px solid #d4380d',
                                             borderRadius: '4px',
-                                            display: 'inline-block',
+                                            padding: '8px',
+                                            background: 'linear-gradient(to right, #ffe7e6, #ffffff)',
                                         }}
                                     >
-                                        {selectedNotification.tag}
+                                        <Row justify="space-around" align="middle">
+                                            <Col>
+                                                <Text style={{ fontSize: '12px', color: color }}>
+                                                    Value
+                                                </Text>
+                                                <div
+                                                    style={{
+                                                        fontWeight: 'bold',
+                                                        fontSize: '16px',
+                                                        color: color,
+                                                    }}
+                                                >
+                                                    N/A
+                                                </div>
+                                            </Col>
+                                            <Col>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>
+                                                    Treshold
+                                                </Text>
+                                                <div style={{ fontWeight: 500 }}>N/A</div>
+                                            </Col>
+                                        </Row>
                                     </div>
-                                </div>
-                            </Space>
-                        </Card>
-                    </Col>
-                </Row>
-                <div>
-                    <Row gutter={[16, 16]}>
-                        <Col span={8}>
-                            <Card
-                                style={{
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    cursor: 'pointer',
-                                }}
-                                bodyStyle={{ padding: '12px' }}
-                            >
-                                <Space>
-                                    <BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
-                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>
-                                        Handling Guideline
-                                    </Text>
                                 </Space>
                             </Card>
                         </Col>
-                        <Col span={8}>
-                            <Card
-                                style={{
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    cursor: 'pointer',
-                                }}
-                                bodyStyle={{ padding: '12px' }}
-                            >
-                                <Space>
-                                    <ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
-                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>
-                                        Spare Part
-                                    </Text>
-                                </Space>
-                            </Card>
-                        </Col>
-                        <Col span={8}>
-                            <Card
-                                style={{
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    cursor: 'pointer',
-                                }}
-                                bodyStyle={{ padding: '12px' }}
-                                onClick={() => setModalContent('log')}
-                            >
-                                <Space>
-                                    <HistoryOutlined
-                                        style={{ fontSize: '16px', color: '#1890ff' }}
-                                    />
-                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>
-                                        Log Activity
-                                    </Text>
+    
+                        {/* Kolom Kanan: Informasi Teknis */}
+                        <Col span={12}>
+                            <Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
+                                <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+                                    <div>
+                                        <Text strong>PLC</Text>
+                                        <div>{selectedNotification.plc}</div>
+                                    </div>
+                                    <div>
+                                        <Text strong>Status</Text>
+                                        <div style={{ color: '#faad14', fontWeight: 500 }}>
+                                            {selectedNotification.status}
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <Text strong>Tag</Text>
+                                        <div
+                                            style={{
+                                                fontFamily: 'monospace',
+                                                backgroundColor: '#f0f0f0',
+                                                padding: '2px 6px',
+                                                borderRadius: '4px',
+                                                display: 'inline-block',
+                                            }}
+                                        >
+                                            {selectedNotification.tag}
+                                        </div>
+                                    </div>
                                 </Space>
                             </Card>
                         </Col>
                     </Row>
-                    <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
-                        <Col span={8}>
-                            <Card size="small" style={{ height: '100%' }}>
-                                <Space direction="vertical" size="small" style={{ width: '100%' }}>
-                                    <Card
-                                        size="small"
-                                        bodyStyle={{ padding: '8px 12px' }}
-                                        hoverable
-                                        extra={
-                                            <Text type="secondary" style={{ fontSize: '10px' }}>
-                                                PDF
-                                            </Text>
-                                        }
-                                    >
+                    <div>
+                        <Row gutter={[16, 8]}>
+                            <Col span={8}>
+                                <Card
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                    }}
+                                    bodyStyle={{ padding: '12px' }}
+                                >
+                                    <Space>
+                                        <BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
+                                        <Text strong style={{ fontSize: '16px', color: '#262626' }}>
+                                            Handling Guideline
+                                        </Text>
+                                    </Space>
+                                </Card>
+                            </Col>
+                            <Col span={8}>
+                                <Card
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                    }}
+                                    bodyStyle={{ padding: '12px' }}
+                                >
+                                    <Space>
+                                        <ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
+                                        <Text strong style={{ fontSize: '16px', color: '#262626' }}>
+                                            Spare Part
+                                        </Text>
+                                    </Space>
+                                </Card>
+                            </Col>
+                            <Col span={8}>
+                                <Card
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                    }}
+                                    bodyStyle={{ padding: '12px' }}
+                                    onClick={() => setModalContent('log')}
+                                >
+                                    <Space>
+                                        <HistoryOutlined
+                                            style={{ fontSize: '16px', color: '#1890ff' }}
+                                        />
+                                        <Text strong style={{ fontSize: '16px', color: '#262626' }}>
+                                            Log Activity
+                                        </Text>
+                                    </Space>
+                                </Card>
+                            </Col>
+                        </Row>
+                        <Row gutter={[16, 8]} style={{ marginTop: '0' }}>
+                            <Col span={8}>
+                                <Card size="small" style={{ height: '100%' }}>
+                                    <Space direction="vertical" size="small" style={{ width: '100%' }}>
+                                        <Card
+                                            size="small"
+                                            bodyStyle={{ padding: '8px 12px' }}
+                                            hoverable
+                                            extra={
+                                                <Text type="secondary" style={{ fontSize: '10px' }}>
+                                                    PDF
+                                                </Text>
+                                            }                                    >
                                         <div
                                             style={{
                                                 display: 'flex',
diff --git a/src/pages/notification/component/LogHistoryCard.jsx b/src/pages/notification/component/LogHistoryCard.jsx
index 0be9a09..a12be28 100644
--- a/src/pages/notification/component/LogHistoryCard.jsx
+++ b/src/pages/notification/component/LogHistoryCard.jsx
@@ -76,12 +76,17 @@ const LogHistoryCard = ({ notificationData }) => {
     const logHistoryData = getDummyLogHistory(notificationData);
 
     return (
-        <Card title="Log History" size="small" style={{ height: '100%' }}>
+        <Card 
+            title="Log History" 
+            size="small" 
+            style={{ height: '100%' }}
+        >
             <Table
                 columns={columns}
                 dataSource={logHistoryData}
-                pagination={{ pageSize: 3, size: 'small' }}
+                pagination={false} // Remove pagination entirely
                 size="small"
+                scroll={{ y: 200 }} // Use scroll for overflow, adjust height as needed
             />
         </Card>
     );