diff --git a/src/screens/daily-report-page/dialogform.js b/src/screens/daily-report-page/dialogform.js
new file mode 100644
index 0000000..97457c6
--- /dev/null
+++ b/src/screens/daily-report-page/dialogform.js
@@ -0,0 +1,145 @@
+import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
+import { StatusBar } from 'react-native';
+import { Button, Text, Appbar, } from 'react-native-paper';
+import { StyleSheet, View, } from 'react-native';
+import { colors } from '../../utils/color';
+import { strings } from '../../utils/i18n';
+import StepIndicator from 'react-native-step-indicator';
+import Manpower from './stepComponent/manPower'
+import InformationReport from './stepComponent/informationReport';
+import SpesialRequest from './stepComponent/spesialRequest';
+import Training from './stepComponent/training';
+import Visit from './stepComponent/visit';
+import PatroliDRScreen from './stepComponent/patroli'
+
+
+export default function DialogForm({ route, navigation }) {
+    const [active, setActive] = useState(0);
+    const labels = ["Manpower", "Kunjungan", "Spesial Request", "Pelatihan", "Laporan Informasi", "Patroli"];
+
+    const renderStepContent = useMemo(() => {
+        switch (active) {
+            case 0:
+                return <Manpower navigation={navigation} />;
+            case 1:
+                return <Visit />;
+            case 2:
+                return <SpesialRequest />;
+            case 3:
+                return <Training />;
+            case 4:
+                return <InformationReport navigation={navigation} />;
+            case 5:
+                return <PatroliDRScreen navigation={navigation} />;
+            default:
+                return null;
+        }
+    }, [active]);
+
+    const handleBack = () => {
+        if (active > 0) {
+            setActive(active - 1);
+        }
+    };
+
+    const handleNext = () => {
+        if (active < labels.length - 1) {
+            setActive(active + 1);
+        }
+    };
+    return (
+        <View style={styles.container}>
+            <StatusBar backgroundColor={colors.pureWhite} barStyle="dark-content" />
+            <Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.pureWhite }}>
+                <Appbar.BackAction color={colors.blue} onPress={() => { navigation.goBack() }} />
+                <Appbar.Content titleStyle={{ fontWeight: 'bold' }} color={colors.blue} title={strings('dailyReport.add')} />
+            </Appbar.Header>
+            <View style={{ width: '100%', marginTop: 15, marginBottom: 2, backgroundColor: colors.pureWhite }}>
+                <StepIndicator
+                    stepCount={labels.length}
+                    customStyles={stepIndicatorStyles}
+                    currentPosition={active}
+                    labels={labels}
+                    onPress={(position) => setActive(position)}
+                />
+            </View>
+            <View style={styles.contentContainer}>
+                {renderStepContent}
+            </View>
+            <View style={styles.buttonContainer}>
+                <Button mode="outlined" style={styles.button} textColor={colors.mistBlue} onPress={handleBack} disabled={active === 0}>
+                    Kembali
+                </Button>
+                {active === labels.length - 1 ?
+                    (
+                        <Button mode="contained" style={[styles.button, { backgroundColor: colors.blue }]} onPress={() => console.log('Handle Saved')}>
+                            Simpan
+                        </Button>
+                    )
+                    : (
+                        <Button mode="contained" style={[styles.button, { backgroundColor: colors.blue }]} onPress={handleNext}>
+                            Lanjut
+                        </Button>
+                    )}
+
+            </View>
+        </View >
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginTop: 20,
+        backgroundColor: colors.pureWhite
+    },
+    cardView: {
+        marginTop: 10,
+    },
+    card: {
+        marginTop: 10,
+        marginHorizontal: 10,
+        backgroundColor: '#1C1B40',
+    },
+    button: {
+        flex: 1,
+        margin: 5,
+        borderRadius: 5
+    },
+    contentContainer: {
+        flex: 1,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        padding: 10,
+        paddingBottom: 20,
+    },
+
+})
+
+const stepIndicatorStyles = {
+
+    stepIndicatorSize: 25,
+    currentStepIndicatorSize: 30,
+    separatorStrokeWidth: 2,
+    currentStepStrokeWidth: 2,
+    stepIndicatorCurrentColor: colors.blue,
+    stepStrokeCurrentColor: colors.blue,
+    stepStrokeWidth: 1,
+    stepStrokeFinishedColor: colors.blue,
+    stepStrokeUnFinishedColor: colors.semiBlue,
+    separatorFinishedColor: colors.blue,
+    separatorUnFinishedColor: colors.semiBlue,
+    stepIndicatorFinishedColor: colors.blue,
+    stepIndicatorUnFinishedColor: colors.semiBlue,
+    stepIndicatorCurrentColor: colors.blue,
+    stepIndicatorLabelFontSize: 12,
+    currentStepIndicatorLabelFontSize: 12,
+    stepIndicatorLabelCurrentColor: colors.pureWhite,
+    stepIndicatorLabelFinishedColor: colors.pureWhite,
+    stepIndicatorLabelUnFinishedColor: colors.blue,
+    labelColor: colors.semiBlue,
+    labelSize: 12,
+    currentStepLabelColor: colors.blue
+}
\ No newline at end of file
diff --git a/src/screens/daily-report-page/index.js b/src/screens/daily-report-page/index.js
index ceb38b6..08b6c05 100644
--- a/src/screens/daily-report-page/index.js
+++ b/src/screens/daily-report-page/index.js
@@ -1,40 +1,56 @@
 import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
-import { Icon, Card, Text, Avatar, useTheme, IconButton, Appbar, Button } from 'react-native-paper';
-import { RefreshControl, StyleSheet, View, ScrollView, Image, Dimensions } from 'react-native';
+import { Card, Text, Appbar, Button, TouchableRipple } from 'react-native-paper';
+import { RefreshControl, StyleSheet, View, ScrollView, StatusBar } from 'react-native';
+import { colors } from '../../utils/color';
+import Icon from 'react-native-vector-icons/AntDesign';
+import { strings } from '../../utils/i18n';
+
 export default function DailyReportScreen({ route, navigation }) {
+    const incidentData = [
+        { id: 1, date: "Senin, 02-05-2024 21:03", location: "Kangean Site Indonesia", company: "Kangean Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "KEI2301M" },
+        { id: 2, date: "Selasa, 03-05-2024 10:15", location: "Sumatra Site Indonesia", company: "Sumatra Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "SEI2402M" },
+        { id: 3, date: "Rabu, 04-05-2024 15:20", location: "Java Site Indonesia", company: "Java Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "JEI2503M" },
+        { id: 4, date: "Kamis, 05-05-2024 18:30", location: "Bali Site Indonesia", company: "Bali Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "BEI2604M" },
+        { id: 5, date: "Jumat, 06-05-2024 08:00", location: "Sulawesi Site Indonesia", company: "Sulawesi Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "SEI2705M" },
+        { id: 5, date: "Sabtu, 07-05-2024 08:00", location: "Sulawesi Site Indonesia", company: "Sulawesi Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "SEI2705M" },
+        { id: 5, date: "Minggu, 08-05-2024 08:00", location: "Sulawesi Site Indonesia", company: "Sulawesi Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "SEI2705M" }
+    ];
+
     return (
         <View style={styles.container}>
-            <Appbar.Header mode='center-aligned' style={{ backgroundColor: 'white' }}>
+            <StatusBar backgroundColor={colors.white} barStyle='dark-content' translucent={true} />
+            <Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.pureWhite, elevation: 4 }}>
                 <Appbar.BackAction onPress={() => { navigation.goBack() }} />
-                <Appbar.Content title="Laporan harian" />
-                <Appbar.Action icon='filter-plus-outline' onPress={() => { }} />
-                <Appbar.Action icon='plus' onPress={() => { }} />
+                <Appbar.Content titleStyle={{ fontWeight: 'bold' }} title={strings('dailyReport.title')} />
             </Appbar.Header>
-            <ScrollView>
-                <Card style={styles.card}>
-                    <Card.Title title="Semen lebak factory" titleVariant='titleMedium' subtitle="20-02-2024 22:20:17" subtitleStyle={{ color: 'white' }} titleStyle={{ fontWeight: 'bold', color: 'white' }} />
-                    <Card.Content style={styles.cardContent}>
-                        <View style={[styles.row, { justifyContent: 'space-around' }]}>
-                            <Text variant="titleMedium" style={{ color: 'white' }} >ICN</Text>
-                            <Text variant="titleMedium" style={{ color: 'white' }} >SICN</Text>
-                        </View>
-                        <View style={[styles.row, { justifyContent: 'space-around' }]}>
-                            <Text variant="bodyMedium" style={{ color: 'white' }} >TIM2301M</Text>
-                            <Text variant="bodyMedium" style={{ color: 'white' }} >DNC200102A</Text>
-                        </View>
-                    </Card.Content>
-                    <Card.Actions style={styles.cardActions}>
-                        <Button icon="view-list" textColor='#1C1B40' buttonColor='white' mode="contained" onPress={() => console.log('Pressed')}>
-                            Detail
-                        </Button>
-                        <Button icon="view-list" textColor='#1C1B40' buttonColor='white' mode="contained" onPress={() => console.log('Pressed')}>
-                            Ubah
-                        </Button>
-                        <Button icon="trash-can-outline" iconColor={'white'} buttonColor='#EF6262' mode="contained" onPress={() => console.log('Pressed')}>
-                            Hapus
-                        </Button>
-                    </Card.Actions>
-                </Card>
+
+            <View style={{ width: '100%', marginTop: 10, marginBottom: 5 }}>
+                <Button icon="plus" style={{ borderRadius: 10, backgroundColor: colors.semiBlue, marginHorizontal: 8, }} textColor={colors.blue} mode="contained-tonal" onPress={() => { navigation.navigate('DialogFormDailyReport') }}>
+                    {strings('dailyReport.add')}
+                </Button>
+            </View>
+
+            <ScrollView style={{ backgroundColor: colors.pureWhite }}>
+                {incidentData.map((incident) => (
+                    <TouchableRipple>
+                        <Card key={incident.id} elevation={2} style={styles.card}>
+                            <View style={styles.cardContent}>
+                                <View style={styles.leftContent}>
+                                    <Icon name="calendar" size={25} color={colors.blue} />
+                                </View>
+                                <View style={styles.midContent}>
+                                    <Text variant="bodySmall" style={styles.subText}>{incident.date}</Text>
+                                    <Text variant="headlineMedium" style={styles.Text}>{incident.location}</Text>
+                                    <Text variant="bodySmall" style={styles.subText}>{incident.company}</Text>
+                                    <Text variant="bodySmall" style={styles.subText}>{incident.icn} - {incident.sicn}</Text>
+                                </View>
+                                <View style={styles.rightContent}>
+                                    <Icon name="right" size={25} color={colors.blue} />
+                                </View>
+                            </View>
+                        </Card>
+                    </TouchableRipple>
+                ))}
             </ScrollView>
         </View >
     )
@@ -44,22 +60,44 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         marginTop: 20,
+        backgroundColor: colors.pureWhite
+    },
+    Text: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: colors.blue
     },
     card: {
-        marginTop: 15,
-        marginHorizontal: 10,
-        marginVertical: 2,
-        backgroundColor: '#1C1B40',
+        flex: 1,
+        marginHorizontal: 8,
+        marginVertical: 5,
+        backgroundColor: colors.pureWhite,
     },
-    cardActions: {
-        justifyContent: 'space-between',
-        backgroundColor: '#1C1B40',
-        borderBottomRightRadius: 20,
-        borderBottomLeftRadius: 20,
-        marginVertical: 4,
+    subText: {
+        fontSize: 12,
+        color: colors.blue
     },
     cardContent: {
-        paddingHorizontal: 10,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingVertical: 10,
+    },
+    leftContent: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+        marginLeft: 15
+    },
+    midContent: {
+        flex: 7,
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+    },
+    rightContent: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+        marginRight: 15,
     },
     row: {
         flexDirection: 'row',