diff --git a/screens/ScreenTensi.js b/screens/ScreenTensi.js
index 04388e7..ba89b43 100644
--- a/screens/ScreenTensi.js
+++ b/screens/ScreenTensi.js
@@ -1,21 +1,392 @@
-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 ScreenTensi = ({ 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 [sys, setSys] = useState(""); // Systolic
+  const [dia, setDia] = useState(""); // Diastolic
+  const [pulse, setPulse] = useState(""); // Pulse rate
+  const [note, setNote] = useState(""); // Additional notes
+
+  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 = (sys, dia, pulse) => {
+    var title = "Cek Tekanan Darah";
+    var message = "Masukkan tekanan darah dan nadi Anda";
+    var image = require("../img/thermometer.png"); // You'll change this
+    var category = "unknown";
+
+    const sysNum = parseInt(sys) || 0;
+    const diaNum = parseInt(dia) || 0;
+    const pulseNum = parseInt(pulse) || 0;
+
+    if (sysNum === 0 && diaNum === 0 && pulseNum === 0) {
+      title = "Cek Tekanan Darah";
+      message = "Masukkan tekanan darah dan nadi Anda";
+      category = "input";
+    } else {
+      // Blood pressure categories
+      if (sysNum >= 180 || diaNum >= 120) {
+        title = "Krisis Hipertensi";
+        message = "Tekanan darah sangat tinggi - Segera ke dokter!";
+        category = "emergency";
+      } else if (sysNum >= 140 || diaNum >= 90) {
+        title = "Hipertensi Tingkat 2";
+        message = "Tekanan darah tinggi - Konsultasi dengan dokter";
+        category = "high2";
+      } else if (sysNum >= 130 || diaNum >= 80) {
+        title = "Hipertensi Tingkat 1";
+        message = "Tekanan darah sedikit tinggi - Perhatikan pola hidup";
+        category = "high1";
+      } else if (sysNum >= 120 && diaNum < 80) {
+        title = "Tekanan Darah Meningkat";
+        message = "Tekanan darah mulai meningkat - Jaga pola hidup sehat";
+        category = "elevated";
+      } else if (sysNum < 120 && diaNum < 80) {
+        title = "Tekanan Darah Normal";
+        message = "Tekanan darah Anda dalam batas normal";
+        category = "normal";
+      } else if (sysNum < 90 || diaNum < 60) {
+        title = "Tekanan Darah Rendah";
+        message = "Tekanan darah rendah - Perhatikan gejala pusing";
+        category = "low";
+      }
+
+      // Pulse check
+      if (pulseNum > 0) {
+        if (pulseNum < 60) {
+          message += " | Nadi lambat (bradycardia)";
+        } else if (pulseNum > 100) {
+          message += " | Nadi cepat (tachycardia)";
+        } else {
+          message += " | Nadi normal";
+        }
+      }
+    }
+
+    return { title, message, image, category };
+  };
+
+  const reqRecordList = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/tension/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/tension/add";
+      const body = {
+        sys: parseInt(sys) || 0,
+        dia: parseInt(dia) || 0,
+        pulse: parseInt(pulse) || 0,
+        note,
+      };
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      const handle = (data) => {
+        reqRecordList();
+        setSys("");
+        setDia("");
+        setPulse("");
+        setNote("");
+      };
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handle);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const ListItem = ({ item }) => {
+    const result = quickResult(item.sys, item.dia, item.pulse);
+    return (
+      <CardRecord key="{item.id}">
+        <Text style={styles.resultDate}>{item.when}</Text>
+        <Text style={styles.resultValue}>
+          {item.sys}/{item.dia} mmHg | {item.pulse} bpm
+        </Text>
+        <Text style={[styles.resultStatus]}>{result.title}</Text>
+      </CardRecord>
+    );
+  };
+
+  useEffect(() => {
+    getToken();
+    fetchProfileDetail();
+    reqRecordList();
+  }, []);
+
   return (
-    <View style={styles.container}>
-      <Text>Ini halaman Tensi</Text>
-      <StatusBar style="auto" />
-    </View>
+    <Container>
+      <View style={styles.headerRow}>
+        <View style={styles.illustrationContainer}>
+          <Image
+            source={quickResult(sys, dia, pulse).image}
+            style={styles.illustration}
+            resizeMode="contain"
+          />
+        </View>
+        <View style={styles.textContainer}>
+          <Text style={styles.title}>{quickResult(sys, dia, pulse).title}</Text>
+          <Text style={styles.datetime}>
+            {`Tekanan: ${sys || 0}/${dia || 0} mmHg | Nadi: ${pulse || 0} bpm`}
+          </Text>
+          <Text style={styles.description}>
+            {quickResult(sys, dia, pulse).message}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.inputColumn}>
+        <View style={styles.inputRow}>
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Sistol (mmHg)"
+            placeholderTextColor="#888"
+            keyboardType="numeric"
+            onChangeText={(text) => setSys(text)}
+            value={sys}
+          />
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Diastol (mmHg)"
+            placeholderTextColor="#888"
+            keyboardType="numeric"
+            onChangeText={(text) => setDia(text)}
+            value={dia}
+          />
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Nadi (bpm)"
+            placeholderTextColor="#888"
+            keyboardType="numeric"
+            onChangeText={(text) => setPulse(text)}
+            value={pulse}
+          />
+        </View>
+
+        <TextInput
+          style={styles.inputFormNote}
+          placeholder="Catatan (opsional)"
+          placeholderTextColor="#888"
+          onChangeText={(text) => setNote(text)}
+          value={note}
+          multiline
+        />
+
+        <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",
+  },
+  inputFormNote: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 15,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginVertical: 6,
+    backgroundColor: "#fff",
+    color: "#333",
+    minHeight: 60,
+  },
+  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",
   },
 });