diff --git a/screens/ScreenGula.js b/screens/ScreenGula.js
index 4db3fcb..1f22b92 100644
--- a/screens/ScreenGula.js
+++ b/screens/ScreenGula.js
@@ -1,21 +1,410 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useState, useRef, useEffect } from "react";
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  BackHandler,
+  FlatList,
+  ScrollView,
+  TextInput,
+} from "react-native";
+import axios from "axios";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import Container from "../components/Container";
+import CardRecord from "../components/CardRecord";
 
 const ScreenGula = ({ navigation }) => {
+  const [token, setToken] = useState(null);
+
+  const [profileId, setProfileId] = useState(null);
+  const [profileName, setProfileName] = useState(null);
+  const [profileSex, setProfileSex] = useState(null);
+  const [profileDob, setProfileDob] = useState(null);
+  const [profileAge, setProfileAge] = useState(null);
+
+  const [result, setResult] = useState(""); // Glucose level
+  const [unit, setUnit] = useState("mg/dL"); // Unit (mg/dL or mmol/L)
+  const [method, setMethod] = useState("CBG"); // Method (CBG, FBG, OGTT, etc.)
+  const [location, setLocation] = useState(""); // Test location
+  const [tool, setTool] = useState(""); // Device/tool used
+
+  const [recordList, setRecordList] = useState([]);
+
+  const getToken = async () => {
+    const savedToken = await AsyncStorage.getItem("auth_token");
+    if (savedToken !== null) {
+      setToken(savedToken);
+    } else {
+      //   navigation.navigate("Profile");
+    }
+  };
+
+  const HttpRequest = (url, body, conf, handle) => {
+    // string, object, object
+    axios
+      .post(url, body, conf)
+      .then((response) => {
+        handle(response.data);
+      })
+      .catch((error) => {
+        console.error("Terjadi kesalahan:", error.stack);
+      });
+  };
+
+  const handleProfileDetail = (data) => {
+    if (data.status === "success") {
+      setProfileId(data.data.id);
+      setProfileName(data.data.name);
+      setProfileSex(data.data.sex);
+      setProfileDob(data.data.dob);
+      if (data.data.dob !== null) {
+        const tanggalLahir = new Date(data.data.dob);
+        const today = new Date();
+        const umur = today.getFullYear() - tanggalLahir.getFullYear();
+        const bulanSekarang = today.getMonth() - tanggalLahir.getMonth();
+        let umurTerupdate;
+        if (
+          bulanSekarang < 0 ||
+          (bulanSekarang === 0 && today.getDate() < tanggalLahir.getDate())
+        ) {
+          umurTerupdate = umur - 1;
+        } else {
+          umurTerupdate = umur;
+        }
+        setProfileAge(umurTerupdate);
+      }
+    }
+  };
+
+  const fetchProfileDetail = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/profile/detail";
+      const body = {};
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      console.log(`Bearer ${auth_token}`);
+      console.log(token);
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handleProfileDetail);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const quickResult = (result, unit, method) => {
+    var title = "Cek Gula Darah";
+    var message = "Masukkan hasil pemeriksaan gula darah";
+    var image = require("../img/thermometer.png"); // You'll change this
+    var category = "unknown";
+
+    const glucoseValue = parseFloat(result) || 0;
+
+    if (glucoseValue === 0) {
+      title = "Cek Gula Darah";
+      message = "Masukkan hasil pemeriksaan gula darah";
+      category = "input";
+    } else {
+      // Convert mmol/L to mg/dL if needed for consistent comparison
+      let glucoseInMgDl = glucoseValue;
+      if (unit === "mmol/L") {
+        glucoseInMgDl = glucoseValue * 18;
+      }
+
+      // Determine category based on method and glucose level
+      if (method === "FBG" || method === "Puasa") {
+        // Fasting Blood Glucose
+        if (glucoseInMgDl < 70) {
+          title = "Hipoglikemia";
+          message = "Gula darah rendah - Segera konsumsi makanan manis";
+          category = "low";
+        } else if (glucoseInMgDl >= 70 && glucoseInMgDl <= 100) {
+          title = "Gula Darah Normal";
+          message = "Gula darah puasa dalam batas normal";
+          category = "normal";
+        } else if (glucoseInMgDl >= 100 && glucoseInMgDl <= 125) {
+          title = "Prediabetes";
+          message = "Gula darah puasa sedikit tinggi - Perhatikan pola makan";
+          category = "prediabetes";
+        } else if (glucoseInMgDl >= 126) {
+          title = "Diabetes";
+          message = "Gula darah puasa tinggi - Konsultasi dengan dokter";
+          category = "diabetes";
+        }
+      } else {
+        // Random/Post-meal glucose
+        if (glucoseInMgDl < 70) {
+          title = "Hipoglikemia";
+          message = "Gula darah rendah - Segera konsumsi makanan manis";
+          category = "low";
+        } else if (glucoseInMgDl < 140) {
+          title = "Gula Darah Normal";
+          message = "Gula darah dalam batas normal";
+          category = "normal";
+        } else if (glucoseInMgDl >= 140 && glucoseInMgDl <= 199) {
+          title = "Prediabetes";
+          message = "Gula darah sedikit tinggi - Perhatikan pola makan";
+          category = "prediabetes";
+        } else if (glucoseInMgDl >= 200) {
+          title = "Diabetes";
+          message = "Gula darah tinggi - Konsultasi dengan dokter";
+          category = "diabetes";
+        }
+      }
+    }
+
+    return { title, message, image, category };
+  };
+
+  const reqRecordList = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/glucose/list";
+      const body = {};
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      const handle = (data) => {
+        setRecordList(data);
+      };
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handle);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const reqAdd = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/glucose/add";
+      const body = {
+        result,
+        unit,
+        method,
+        location,
+        tool,
+      };
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      const handle = (data) => {
+        reqRecordList();
+        setResult("");
+        setUnit("mg/dL");
+        setMethod("CBG");
+        setLocation("");
+        setTool("");
+      };
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handle);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const ListItem = ({ item }) => {
+    const quickRes = quickResult(item.result, item.unit, item.method);
+    return (
+      <CardRecord key="{item.id}">
+        <Text style={styles.resultDate}>{item.when}</Text>
+        <Text style={styles.resultValue}>
+          {item.result} {item.unit} ({item.method})
+        </Text>
+        <Text style={[styles.resultStatus]}>{quickRes.title}</Text>
+      </CardRecord>
+    );
+  };
+
+  useEffect(() => {
+    getToken();
+    fetchProfileDetail();
+    reqRecordList();
+  }, []);
+
   return (
-    <View style={styles.container}>
-      <Text>Ini halaman Cek Gula Darah</Text>
-      <StatusBar style="auto" />
-    </View>
+    <Container>
+      <View style={styles.headerRow}>
+        <View style={styles.illustrationContainer}>
+          <Image
+            source={quickResult(result, unit, method).image}
+            style={styles.illustration}
+            resizeMode="contain"
+          />
+        </View>
+        <View style={styles.textContainer}>
+          <Text style={styles.title}>
+            {quickResult(result, unit, method).title}
+          </Text>
+          <Text style={styles.datetime}>
+            {`Gula: ${result || 0} ${unit} (${method})`}
+          </Text>
+          <Text style={styles.description}>
+            {quickResult(result, unit, method).message}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.inputColumn}>
+        <View style={styles.inputRow}>
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Hasil (angka)"
+            placeholderTextColor="#888"
+            keyboardType="numeric"
+            onChangeText={(text) => setResult(text)}
+            value={result}
+          />
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Unit"
+            placeholderTextColor="#888"
+            onChangeText={(text) => setUnit(text)}
+            value={unit}
+          />
+        </View>
+
+        <View style={styles.inputRow}>
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Metode (CBG/FBG/OGTT)"
+            placeholderTextColor="#888"
+            onChangeText={(text) => setMethod(text)}
+            value={method}
+          />
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Lokasi"
+            placeholderTextColor="#888"
+            onChangeText={(text) => setLocation(text)}
+            value={location}
+          />
+        </View>
+
+        <TextInput
+          style={styles.inputFormTool}
+          placeholder="Alat yang digunakan"
+          placeholderTextColor="#888"
+          onChangeText={(text) => setTool(text)}
+          value={tool}
+        />
+
+        <TouchableOpacity style={styles.inputButtonSubmit} onPress={reqAdd}>
+          <Text style={styles.submitText}>Submit</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={{ flex: 2 }}>
+        <FlatList
+          data={recordList}
+          renderItem={({ item }) => <ListItem item={item} />}
+          keyExtractor={(item, index) => index.toString()}
+        />
+      </View>
+    </Container>
   );
-}
+};
 
 const styles = StyleSheet.create({
-  container: {
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  illustration: {
+    width: 100,
+    height: 100,
+  },
+  illustrationContainer: {
+    marginRight: 16,
+  },
+  textContainer: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: "#111",
+  },
+  datetime: {
+    fontSize: 12,
+    color: "#444",
+    marginVertical: 4,
+  },
+  description: {
+    fontSize: 14,
+    color: "#333",
+    maxWidth: 320,
+    marginBottom: 16,
+  },
+  inputColumn: {
+    width: "100%",
+    marginBottom: 10,
+  },
+  inputRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    marginBottom: 10,
+  },
+  inputForm: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 30,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginHorizontal: 6,
+    backgroundColor: "#fff",
+    color: "#333",
+  },
+  inputFormTool: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 30,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginVertical: 6,
+    backgroundColor: "#fff",
+    color: "#333",
+  },
+  inputButtonSubmit: {
+    borderRadius: 30,
+    paddingVertical: 12,
+    marginVertical: 6,
+    backgroundColor: "#007bff",
+  },
+  submitText: {
+    textAlign: "center",
+    color: "#fff",
+    fontWeight: "600",
+  },
+  resultDate: {
+    flex: 1,
+    color: "#333",
+  },
+  resultValue: {
+    flex: 1,
+    textAlign: "center",
+    color: "#111",
+    fontWeight: "500",
+  },
+  resultStatus: {
+    flex: 1,
+    textAlign: "right",
+    fontWeight: "bold",
   },
 });