diff --git a/rumahSehat/src/main/java/apap/tk/rumahSehat/controller/BaseController.java b/rumahSehat/src/main/java/apap/tk/rumahSehat/controller/BaseController.java
index 198098abd51dc271defd6c47148dbb273a982a4b..02bb1679ec85336f24d758578dd2f3328fb262ca 100644
--- a/rumahSehat/src/main/java/apap/tk/rumahSehat/controller/BaseController.java
+++ b/rumahSehat/src/main/java/apap/tk/rumahSehat/controller/BaseController.java
@@ -1,5 +1,4 @@
 package apap.tk.rumahSehat.controller;
-
 import apap.tk.rumahSehat.service.ApotekerServiceImpl;
 import apap.tk.rumahSehat.service.DokterServiceImpl;
 import apap.tk.rumahSehat.service.PasienServiceImpl;
diff --git a/rumahSehat/src/main/java/apap/tk/rumahSehat/controller/DokterController.java b/rumahSehat/src/main/java/apap/tk/rumahSehat/controller/DokterController.java
index 8abbbe9831552a281b206abb37f775bea0e0a268..04003db25dccfddab4919b30bc765f12614a7191 100644
--- a/rumahSehat/src/main/java/apap/tk/rumahSehat/controller/DokterController.java
+++ b/rumahSehat/src/main/java/apap/tk/rumahSehat/controller/DokterController.java
@@ -11,6 +11,7 @@ import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.PostMapping;
+
 import java.util.*;
 
 
@@ -62,6 +63,7 @@ public class DokterController {
     @GetMapping("/dokter/viewchart")
     public String viewPemasukanDokterChart(Model model) {
         List data = dokterService.getBarchartData();
+
         model.addAttribute("listDokter", data);
         return "chart-dokter";
     }
@@ -72,5 +74,4 @@ public class DokterController {
         model.addAttribute("listDokter", listDokter);
         return "linechart-dokter";
     }
-}
-
+}
\ No newline at end of file
diff --git a/rumahSehat/src/main/resources/templates/add-whitelist.html b/rumahSehat/src/main/resources/templates/add-whitelist.html
index 8a26226cc05d6d647714fbc68ee2e92ca929e951..1c2c16cb23658b3cb3a1ccc272891dba6d3f9810 100644
--- a/rumahSehat/src/main/resources/templates/add-whitelist.html
+++ b/rumahSehat/src/main/resources/templates/add-whitelist.html
@@ -12,15 +12,15 @@
     <div class="card m-4 p-4">
         <div class="card-body">
             <div class="justify-content-center">
-                <h2>Tambah whitelist</h2>
+                <h2>Tambah Whitelist</h2>
                 <br>
                 <form th:action="@{/whitelist/add}" th:object="${whitelist}" method="POST">
 
                     <label>Username</label>
                     <input class="form-control" type="text" name="username" required/>
 
-                    <button class="btn btn-primary" type="submit" name="save">Submit</button>
-                    <a class="btn btn-primary" href="/">Home</a>
+                    <button class="btn btn-primary mt-3" type="submit" name="save">Submit</button>
+                    <a class="btn btn-primary mt-3" href="/">Home</a>
                 </form>
             </div>
         </div>
diff --git a/rumahSehat/src/main/resources/templates/barchart-jumlah-appointment.html b/rumahSehat/src/main/resources/templates/barchart-jumlah-appointment.html
index 83c735ba71714ad6d17b7fcd6947e7ae5e8b1c59..313889124b9497758ed3e4f907a940dc36d97f9c 100644
--- a/rumahSehat/src/main/resources/templates/barchart-jumlah-appointment.html
+++ b/rumahSehat/src/main/resources/templates/barchart-jumlah-appointment.html
@@ -15,129 +15,173 @@
 </head>
 <body>
 <nav th:replace="fragments/fragment :: navbar (${'/chart'})"></nav>
-<div class="d-flex justify-content-center align-items-center">
-    <div class="m-4">
-        <h2>Pilih Dokter</h2>
-        <br>
-        Dokter 1: <select class="form-control" id="dokter1">
-            <option value="default">Pilih Dokter</option>
-            <option th:each="dokter : ${listDokter}"
-                    th:value="${dokter.UUId}"
-                    th:text="${dokter.nama}"></option>
-        </select>
-        <br>
-        Dokter 2: <select class="form-control" id="dokter2">
-            <option value="default">Pilih Dokter</option>
-            <option th:each="dokter : ${listDokter}"
-                    th:value="${dokter.UUId}"
-                    th:text="${dokter.nama}"></option>
-        </select>
-        <br>
-        Dokter 3: <select class="form-control" id="dokter3">
-            <option value="default">Pilih Dokter</option>
-            <option th:each="dokter : ${listDokter}"
-                    th:value="${dokter.UUId}"
-                    th:text="${dokter.nama}"></option>
-        </select>
-        <br>
-        Dokter 4: <select class="form-control" id="dokter4">
-            <option value="default">Pilih Dokter</option>
-            <option th:each="dokter : ${listDokter}"
-                    th:value="${dokter.UUId}"
-                    th:text="${dokter.nama}"></option>
-        </select>
-        <br>
-        Dokter 5: <select class="form-control" id="dokter5">
-            <option value="default">Pilih Dokter</option>
-            <option th:each="dokter : ${listDokter}"
-                    th:value="${dokter.UUId}"
-                    th:text="${dokter.nama}"></option>
-        </select>
-        <br>
-        Dokter 6: <select class="form-control" id="dokter6">
-            <option value="default">Pilih Dokter</option>
-            <option th:each="dokter : ${listDokter}"
-                    th:value="${dokter.UUId}"
-                    th:text="${dokter.nama}"></option>
-        </select>
-        <br>
-        Dokter 7: <select class="form-control" id="dokter7">
-            <option value="default">Pilih Dokter</option>
-            <option th:each="dokter : ${listDokter}"
-                    th:value="${dokter.UUId}"
-                    th:text="${dokter.nama}"></option>
-        </select>
-        <br>
-        Dokter 8: <select class="form-control" id="dokter8">
-            <option value="default">Pilih Dokter</option>
-            <option th:each="dokter : ${listDokter}"
-                    th:value="${dokter.UUId}"
-                    th:text="${dokter.nama}"></option>
-        </select>
-        <br>
-        <button class="btn btn-primary" onclick="getData(document.getElementById('dokter1').value,
-        document.getElementById('dokter2').value,
-        document.getElementById('dokter3').value,
-        document.getElementById('dokter4').value,
-        document.getElementById('dokter5').value,
-        document.getElementById('dokter6').value,
-        document.getElementById('dokter7').value,
-        document.getElementById('dokter8').value,
-        )">Lihat</button>
-        <br><br>
-        <h2>Barchart Jumlah Appointment Dokter</h2>
-        <br>
-        <div class="chart-container" style="position: relative; height:20vh; width:80vw">
+<div class="container">
+    <div class="d-flex justify-content-center mt-4">
+        <h2 style="font-weight: bold;">Bar Chart Total Kuantitas Appointment</h2>
+    </div>
+    <div class="d-flex justify-content-center mt-4">
+        <div class="chart-container" style="width: 70%; height: 70%;">
             <canvas id="jumlahAppointmentChart"></canvas>
         </div>
-        <script th:inline="javascript">
-            async function getData(uuid0, uuid1, uuid2, uuid3, uuid4, uuid5, uuid6, uuid7) {
-                var url ='http://localhost:8080/api/dokter/jumlahAppointment';
-                url = url + '/' + uuid0;
-                url = url + '/' + uuid1;
-                url = url + '/' + uuid2;
-                url = url + '/' + uuid3;
-                url = url + '/' + uuid4;
-                url = url + '/' + uuid5;
-                url = url + '/' + uuid6;
-                url = url + '/' + uuid7;
-                let response = await fetch(url);
-                let data = await response.json();
-                console.log(data);
-                length = data.length;
-                dokter = [];
-                jumlahAppointment = [];
-                for (i = 0; i < length; i++) {
-                    dokter.push(data[i][0]);
-                    jumlahAppointment.push(data[i][1]);
-                }
-                let ctx = document.getElementById('jumlahAppointmentChart');
+    </div>
+    <div class="d-flex justify-content-center">
+        <div class="card mt-5">
+            <div class="card-header text-center font-weight-bold bg-primary text-white h5">
+                Pilih Dokter
+            </div>
+            <div class="card-body">
+                <div class="container">
+                    <div class="row">
+                        <div class="col">
+                            <label>Dokter 1:</label>
+                            <select class="form-control" id="dokter1">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label>Dokter 2:</label>
+                            <select class="form-control" id="dokter2">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label>Dokter 3:</label>
+                            <select class="form-control" id="dokter3">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label>Dokter 4:</label>
+                            <select class="form-control" id="dokter4">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <label class="mt-3">Dokter 5:</label>
+                            <select class="form-control" id="dokter5">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label class="mt-3">Dokter 6:</label>
+                            <select class="form-control" id="dokter6">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label class="mt-3">Dokter 7:</label>
+                            <select class="form-control" id="dokter7">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label class="mt-3">Dokter 8:</label>
+                            <select class="form-control" id="dokter8">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="d-flex justify-content-center mt-3 mb-3">
+        <button class="btn btn-primary" onclick="getData(document.getElementById('dokter1').value,
+                document.getElementById('dokter2').value,
+                document.getElementById('dokter3').value,
+                document.getElementById('dokter4').value,
+                document.getElementById('dokter5').value,
+                document.getElementById('dokter6').value,
+                document.getElementById('dokter7').value,
+                document.getElementById('dokter8').value,
+            )">Lihat</button>
+    </div>
+</div>
+<script th:inline="javascript">
+    async function getData(uuid0, uuid1, uuid2, uuid3, uuid4, uuid5, uuid6, uuid7) {
+        var url ='http://localhost:8080/api/dokter/jumlahAppointment';
+        url = url + '/' + uuid0;
+        url = url + '/' + uuid1;
+        url = url + '/' + uuid2;
+        url = url + '/' + uuid3;
+        url = url + '/' + uuid4;
+        url = url + '/' + uuid5;
+        url = url + '/' + uuid6;
+        url = url + '/' + uuid7;
+        let response = await fetch(url);
+        let data = await response.json();
+        console.log(data);
+        length = data.length;
+        dokter = [];
+        jumlahAppointment = [];
+        for (i = 0; i < length; i++) {
+            dokter.push(data[i][0]);
+            jumlahAppointment.push(data[i][1]);
+        }
+        let ctx = document.getElementById('jumlahAppointmentChart');
 
-                new Chart (ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: dokter,
-                        datasets: [{
-                            label: 'Jumlah Appointment',
-                            data: jumlahAppointment,
-                            borderWidth: 1
-                        }]
-                    },
-                    options: {
-                        scales: {
-                            y: {
-                                beginAtZero: true
-                            }
-                        }
+        new Chart (ctx, {
+            type: 'bar',
+            data: {
+                labels: dokter,
+                datasets: [{
+                    label: 'Jumlah Appointment',
+                    data: jumlahAppointment,
+                    backgroundColor: [
+                        'rgba(255, 99, 132, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(255, 206, 86, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(153, 102, 255, 0.2)',
+                        'rgba(255, 159, 64, 0.2)'
+                    ],
+                    borderColor: [
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(255, 206, 86, 1)',
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)'
+                    ],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
                     }
-                });
+                }
             }
-
-
-        </script>
-
-    </div>
-</div>
+        });
+    }
+</script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/rumahSehat/src/main/resources/templates/barchart-pendapatan.html b/rumahSehat/src/main/resources/templates/barchart-pendapatan.html
index d06161f22cc7eea7d5274f3fd8d6d969ffa484f6..2a3e0ed815e774d56ac62bef549cb39cdbc0f34d 100644
--- a/rumahSehat/src/main/resources/templates/barchart-pendapatan.html
+++ b/rumahSehat/src/main/resources/templates/barchart-pendapatan.html
@@ -12,129 +12,199 @@
             integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
+    <style>
+        .card {
+            width: 700px;
+            height: auto;
+            border-radius: 10px;
+            border-style: solid;
+            border-color: #2D89FF;
+        }
+
+        .card-header {
+            border-radius: 10px;
+        }
+
+        th {
+            text-align: center;
+            color: #2D89FF;
+        }
+
+        td {
+            text-align: center;
+        }
+    </style>
 </head>
 <body>
 <nav th:replace="fragments/fragment :: navbar (${'/chart'})"></nav>
-<div class="d-flex justify-content-center align-items-center">
-    <div class="m-4">
-        <h2>Pilih Dokter</h2>
-        <br>
-        Dokter 1: <select class="form-control" id="dokter1">
-            <option value="default">Pilih Dokter</option>
-            <option th:each="dokter : ${listDokter}"
-                    th:value="${dokter.UUId}"
-                    th:text="${dokter.nama}"></option>
-        </select>
-            <br>
-            Dokter 2: <select class="form-control" id="dokter2">
-                <option value="default">Pilih Dokter</option>
-                <option th:each="dokter : ${listDokter}"
-                        th:value="${dokter.UUId}"
-                        th:text="${dokter.nama}"></option>
-            </select>
-            <br>
-            Dokter 3: <select class="form-control" id="dokter3">
-                <option value="default">Pilih Dokter</option>
-                <option th:each="dokter : ${listDokter}"
-                        th:value="${dokter.UUId}"
-                        th:text="${dokter.nama}"></option>
-            </select>
-            <br>
-            Dokter 4: <select class="form-control" id="dokter4">
-                <option value="default">Pilih Dokter</option>
-                <option th:each="dokter : ${listDokter}"
-                        th:value="${dokter.UUId}"
-                        th:text="${dokter.nama}"></option>
-            </select>
-            <br>
-            Dokter 5: <select class="form-control" id="dokter5">
-                <option value="default">Pilih Dokter</option>
-                <option th:each="dokter : ${listDokter}"
-                        th:value="${dokter.UUId}"
-                        th:text="${dokter.nama}"></option>
-            </select>
-            <br>
-            Dokter 6: <select class="form-control" id="dokter6">
-                <option value="default">Pilih Dokter</option>
-                <option th:each="dokter : ${listDokter}"
-                        th:value="${dokter.UUId}"
-                        th:text="${dokter.nama}"></option>
-            </select>
-            <br>
-            Dokter 7: <select class="form-control" id="dokter7">
-                <option value="default">Pilih Dokter</option>
-                <option th:each="dokter : ${listDokter}"
-                        th:value="${dokter.UUId}"
-                        th:text="${dokter.nama}"></option>
-            </select>
-            <br>
-            Dokter 8: <select class="form-control" id="dokter8">
-                <option value="default">Pilih Dokter</option>
-                <option th:each="dokter : ${listDokter}"
-                        th:value="${dokter.UUId}"
-                        th:text="${dokter.nama}"></option>
-            </select>
-            <br>
-        <button class="btn btn-primary" onclick="getData(document.getElementById('dokter1').value,
-        document.getElementById('dokter2').value,
-        document.getElementById('dokter3').value,
-        document.getElementById('dokter4').value,
-        document.getElementById('dokter5').value,
-        document.getElementById('dokter6').value,
-        document.getElementById('dokter7').value,
-        document.getElementById('dokter8').value,
-        )">Lihat</button>
-        <br><br>
-        <h2>Barchart Pendapatan Dokter</h2>
-        <br>
-        <div class="chart-container" style="position: relative; height:20vh; width:80vw">
+
+<div class="container">
+    <div class="d-flex justify-content-center mt-4">
+        <h2 style="font-weight: bold;">Bar Chart Total Pendapatan</h2>
+    </div>
+    <div class="d-flex justify-content-center mt-4">
+        <div class="chart-container" style="width: 70%; height: 70%;">
             <canvas id="pendapatanChart"></canvas>
         </div>
-        <script th:inline="javascript">
-            async function getData(uuid0, uuid1, uuid2, uuid3, uuid4, uuid5, uuid6, uuid7) {
-                var url = 'http://localhost:8080/api/dokter/getPendapatan';
-                url = url + '/' + uuid0;
-                url = url + '/' + uuid1;
-                url = url + '/' + uuid2;
-                url = url + '/' + uuid3;
-                url = url + '/' + uuid4;
-                url = url + '/' + uuid5;
-                url = url + '/' + uuid6;
-                url = url + '/' + uuid7;
-                let response = await fetch(url);
-                let data = await response.json();
-                console.log(data);
-                length = data.length;
-                dokter = [];
-                pendapatan = [];
-                for (i = 0; i < length; i++) {
-                    dokter.push(data[i][0]);
-                    pendapatan.push(data[i][1]);
-                }
-                let ctx = document.getElementById('pendapatanChart');
+    </div>
+    <div class="d-flex justify-content-center">
+        <div class="card mt-5">
+            <div class="card-header text-center font-weight-bold bg-primary text-white h5">
+                Pilih Dokter
+            </div>
+            <div class="card-body">
+                <div class="container">
+                    <div class="row">
+                        <div class="col">
+                            <label>Dokter 1:</label>
+                            <select class="form-control" id="dokter1">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label>Dokter 2:</label>
+                            <select class="form-control" id="dokter2">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label>Dokter 3:</label>
+                            <select class="form-control" id="dokter3">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label>Dokter 4:</label>
+                            <select class="form-control" id="dokter4">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <label class="mt-3">Dokter 5:</label>
+                            <select class="form-control" id="dokter5">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label class="mt-3">Dokter 6:</label>
+                            <select class="form-control" id="dokter6">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label class="mt-3">Dokter 7:</label>
+                            <select class="form-control" id="dokter7">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label class="mt-3">Dokter 8:</label>
+                            <select class="form-control" id="dokter8">
+                                <option value="default">Pilih Dokter</option>
+                                <option th:each="dokter : ${listDokter}"
+                                        th:value="${dokter.UUId}"
+                                        th:text="${dokter.nama}"></option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="d-flex justify-content-center mt-3 mb-3">
+        <button class="btn btn-primary" onclick="getData(document.getElementById('dokter1').value,
+                document.getElementById('dokter2').value,
+                document.getElementById('dokter3').value,
+                document.getElementById('dokter4').value,
+                document.getElementById('dokter5').value,
+                document.getElementById('dokter6').value,
+                document.getElementById('dokter7').value,
+                document.getElementById('dokter8').value,
+            )">Lihat</button>
+    </div>
+</div>
+<script th:inline="javascript">
+    async function getData(uuid0, uuid1, uuid2, uuid3, uuid4, uuid5, uuid6, uuid7) {
+        var url = 'http://localhost:8080/api/dokter/getPendapatan';
+        url = url + '/' + uuid0;
+        url = url + '/' + uuid1;
+        url = url + '/' + uuid2;
+        url = url + '/' + uuid3;
+        url = url + '/' + uuid4;
+        url = url + '/' + uuid5;
+        url = url + '/' + uuid6;
+        url = url + '/' + uuid7;
+        let response = await fetch(url);
+        let data = await response.json();
+        console.log(data);
+        length = data.length;
+        dokter = [];
+        pendapatan = [];
+        for (i = 0; i < length; i++) {
+            dokter.push(data[i][0]);
+            pendapatan.push(data[i][1]);
+        }
+        let ctx = document.getElementById('pendapatanChart');
 
-                new Chart (ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: dokter,
-                        datasets: [{
-                            label: 'Pendapatan',
-                            data: pendapatan,
-                            borderWidth: 1
-                        }]
-                    },
-                    options: {
-                        scales: {
-                            y: {
-                                beginAtZero: true
-                            }
-                        }
+        new Chart (ctx, {
+            type: 'bar',
+            data: {
+                labels: dokter,
+                datasets: [{
+                    label: 'Pendapatan',
+                    data: pendapatan,
+                    backgroundColor: [
+                        'rgba(255, 99, 132, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(255, 206, 86, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(153, 102, 255, 0.2)',
+                        'rgba(255, 159, 64, 0.2)'
+                    ],
+                    borderColor: [
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(255, 206, 86, 1)',
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)'
+                    ],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
                     }
-                });
+                }
             }
-        </script>
-    </div>
-</div>
+        });
+    }
+</script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/rumahSehat/src/main/resources/templates/chart-dokter.html b/rumahSehat/src/main/resources/templates/chart-dokter.html
index 5ec5c1b0119b26a3f45ff0d4ba6ed21b260f0e7e..15a860db9200659d36fc0f39d4b961f8564fdc1a 100644
--- a/rumahSehat/src/main/resources/templates/chart-dokter.html
+++ b/rumahSehat/src/main/resources/templates/chart-dokter.html
@@ -19,8 +19,21 @@
 <nav th:replace="fragments/fragment :: navbar (${'/chart'})"></nav>
 
 <div class="container">
-  <div class="chart-container d-flex justify-content-center" style="position: relative; height:20vh; width:80vw">
-    <canvas id="defaultChart"></canvas>
+  <div class="d-flex justify-content-center mt-4">
+    <h2 style="font-weight: bold;">Pemasukan semua dokter dalam periode tahunan (12 bulan)</h2>
+  </div>
+  <div class="d-flex justify-content-center mt-4">
+    <div class="chart-container" style="width: 70%; height: 70%;">
+      <canvas id="defaultChart"></canvas>
+    </div>
+  </div>
+  <div class="d-flex justify-content-center mt-4">
+    <p>Akses lebih banyak chart:</p>
+  </div>
+  <div class="d-flex justify-content-center mt-1">
+    <a class="add-button btn btn-primary mr-4" th:href="@{/dokter/viewchart-line}">Line Chart Periodik</a>
+    <a class="add-button btn btn-primary mr-4" th:href="@{/dokter/pendapatan}">Bar Chart Pendapatan</a>
+    <a class="add-button btn btn-primary" th:href="@{/dokter/jumlahAppointment}">Bar Chart Appointment</a>
   </div>
 </div>
 
@@ -29,6 +42,8 @@
   $(document).ready(function () {
     console.log(listDokter);
 
+    var monthLabel = ['January', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'October', 'November', 'Desember']
+
     var x = listDokter.map(x => x[0])
     var y = listDokter.map(x => x[1])
 
diff --git a/rumahSehat/src/main/resources/templates/detail-appointment.html b/rumahSehat/src/main/resources/templates/detail-appointment.html
index a2f00622b9b83b74491979a8b586256ca5b5d489..4ad639b66abb3358e47335d5d94484b20b3f1013 100644
--- a/rumahSehat/src/main/resources/templates/detail-appointment.html
+++ b/rumahSehat/src/main/resources/templates/detail-appointment.html
@@ -115,7 +115,7 @@
                                             <div class="modal-content">
                                                 <div class="modal-header">
                                                     <h5 class="modal-title" id="staticBackdropLabel2">Warning!</h5>
-                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times</span></button>
                                                 </div>
                                                 <div class="modal-body">Resep belum terkonfirmasi, appointment tidak bisa diselesaikan!</div>
                                                 <div class="modal-footer">
diff --git a/rumahSehat/src/main/resources/templates/fragments/fragment.html b/rumahSehat/src/main/resources/templates/fragments/fragment.html
index 549f9935bc216ab8354e04f4c603be3bf81c4a63..3f52b88ef8b52338c93810415e4f4ba7099f8137 100644
--- a/rumahSehat/src/main/resources/templates/fragments/fragment.html
+++ b/rumahSehat/src/main/resources/templates/fragments/fragment.html
@@ -70,7 +70,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="staticBackdropLabel">Perhatian</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body">
           Apakah anda ingin logout?
diff --git a/rumahSehat/src/main/resources/templates/home.html b/rumahSehat/src/main/resources/templates/home.html
index 4e8f485da1ec268d5d3cf810d59688d784bc0cd8..57fb1ea27d1a6d810ef5fe42c43e86ed0f190ce5 100644
--- a/rumahSehat/src/main/resources/templates/home.html
+++ b/rumahSehat/src/main/resources/templates/home.html
@@ -5,8 +5,13 @@
   <title>Beranda</title>
   <object th:include="fragments/fragment :: css" th:remove="tag"></object>
   <object th:include="fragments/fragment :: js" th:remove="tag"></object>
+<<<<<<< HEAD
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css">
+=======
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css">
   <link href='https://fonts.googleapis.com/css?family=Plus Jakarta Sans' rel='stylesheet'>
+>>>>>>> f2ed30b822580f0d16a7160520835017851966a3
 
   <style>
     .display-4 {
@@ -95,8 +100,5 @@
       </div>
     </div>
   </div>
-
-
-
 </body>
 </html>
\ No newline at end of file
diff --git a/rumahSehat/src/main/resources/templates/linechart-dokter.html b/rumahSehat/src/main/resources/templates/linechart-dokter.html
index 48a0f544d3e670559cc82e09b5fc0c79082a8db5..50a9f470d64c5abeed6d3d7a99f883fb1c406e76 100644
--- a/rumahSehat/src/main/resources/templates/linechart-dokter.html
+++ b/rumahSehat/src/main/resources/templates/linechart-dokter.html
@@ -15,69 +15,71 @@
 </head>
 <body>
 <nav th:replace="fragments/fragment :: navbar (${'/chart'})"></nav>
-
-<div style="display: flex; align-items: center; justify-content: center;">
-    <div style="position: relative; width: 70%; height: 70%;">
-        <div class="card mt-5">
-            <div class="card-header text-center font-weight-bold bg-primary text-white h5">
-                Grafik Pendapatan Dokter Bedasarkan Tagihan yang Telah Dibayar
-            </div>
-            <div class="card-body">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-sm">
-                            <div th:each="dokter, iterationStatus : ${listDokter}" class="col-md-6 mb-3">
-                                <div class="form-check">
-                                    <input class="form-check-input dokter" type="checkbox" th:value="${dokter.UUId}" id="defaultCheck" name="doc">
-                                    <label class="form-check-label" for="defaultCheck" th:text="${dokter.nama}"></label>
+<div class="container">
+    <div class="d-flex justify-content-center mt-4">
+        <h2 style="font-weight: bold;">Line Chart Pendapatan Dokter (Periodik)</h2>
+    </div>
+    <div style="display: flex; align-items: center; justify-content: center;">
+        <div style="position: relative; width: 70%; height: 70%;">
+            <div class="card mt-5">
+                <div class="card-header text-center font-weight-bold bg-primary text-white h5">
+                    Pilih Kriteria
+                </div>
+                <div class="card-body">
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-sm">
+                                <div th:each="dokter, iterationStatus : ${listDokter}" class="col-md-6 mb-3">
+                                    <div class="form-check">
+                                        <input class="form-check-input dokter" type="checkbox" th:value="${dokter.UUId}" id="defaultCheck" name="doc">
+                                        <label class="form-check-label" for="defaultCheck" th:text="${dokter.nama}"></label>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <div class="col-sm">
-                            <div class="row">
-                                <div class="form-group">
-                                    <label for="tahun">Tahun</label>
-                                    <input type="number" class="form-control" id="tahun" name="tahun">
+                            <div class="col-sm">
+                                <div class="row">
+                                    <div class="form-group">
+                                        <label for="tahun">Tahun</label>
+                                        <input type="number" class="form-control" id="tahun" name="tahun">
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="row">
-                                <div class="form-group">
-                                    <label for="bulan">Bulan</label>
-                                    <select class="form-control" id="bulan" name="bulan">
-                                        <option value="1">January</option>
-                                        <option value="2">February</option>
-                                        <option value="3">March</option>
-                                        <option value="4">April</option>
-                                        <option value="5">May</option>
-                                        <option value="6">June</option>
-                                        <option value="7">July</option>
-                                        <option value="8">August</option>
-                                        <option value="9">September</option>
-                                        <option value="10">October</option>
-                                        <option value="11">November</option>
-                                        <option value="12">December</option>
-                                    </select>
+                                <div class="row">
+                                    <div class="form-group">
+                                        <label for="bulan">Bulan</label>
+                                        <select class="form-control" id="bulan" name="bulan">
+                                            <option value="1">January</option>
+                                            <option value="2">February</option>
+                                            <option value="3">March</option>
+                                            <option value="4">April</option>
+                                            <option value="5">May</option>
+                                            <option value="6">June</option>
+                                            <option value="7">July</option>
+                                            <option value="8">August</option>
+                                            <option value="9">September</option>
+                                            <option value="10">October</option>
+                                            <option value="11">November</option>
+                                            <option value="12">December</option>
+                                        </select>
+                                    </div>
                                 </div>
-                            </div>
 
-                        </div>
-                        <div class="col-sm">
-                            <button class="btn btn-primary my-2" onclick="showGraph('Tahun')">Data Tahunan</button>
-                            <button class="btn btn-primary my-2" onclick="showGraph('Bulan')">Data Bulanan</button>
+                            </div>
+                            <div class="col-sm">
+                                <button class="btn btn-primary my-2" onclick="showGraph('Tahun')">Data Tahunan</button>
+                                <button class="btn btn-primary my-2" onclick="showGraph('Bulan')">Data Bulanan</button>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
-
-<div class="my-4" style="display: flex; align-items: center; justify-content: center;">
-    <div style="position: relative; width: 70%; height: 70%;">
-        <canvas id="myChart"></canvas>
+    <div class="my-4" style="display: flex; align-items: center; justify-content: center;">
+        <div style="position: relative; width: 70%; height: 70%;">
+            <canvas id="myChart"></canvas>
+        </div>
     </div>
 </div>
-
 </body>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
diff --git a/rumahSehat/src/main/resources/templates/user/apoteker-add-form.html b/rumahSehat/src/main/resources/templates/user/apoteker-add-form.html
index 6a3e09d909da62b05497df8fee8219e576542729..1c3cb50a7d6b7266c8485c3723cff29f1763fb3d 100644
--- a/rumahSehat/src/main/resources/templates/user/apoteker-add-form.html
+++ b/rumahSehat/src/main/resources/templates/user/apoteker-add-form.html
@@ -20,17 +20,17 @@
                     <label>Username</label>
                     <input class="form-control" type="text" name="username" required/>
 
-                    <label>Nama Apoteker</label>
+                    <label class="mt-3">Nama Apoteker</label>
                     <input class="form-control" type="text" name="nama" required/>
 
-                    <label>E-mail</label>
+                    <label class="mt-3">E-mail</label>
                     <input class="form-control" name="email" type="text" required/>
 
-                    <label>password</label>
+                    <label class="mt-3">Password</label>
                     <input class="form-control" name="password" type="password" required/>
 
-                    <button class="btn btn-primary" type="submit" name="save">Submit</button>
-                    <a class="btn btn-primary" href="/">Home</a>
+                    <button class="btn btn-primary mt-3" type="submit" name="save">Submit</button>
+                    <a class="btn btn-primary mt-3" href="/">Home</a>
                 </form>
             </div>
         </div>
diff --git a/rumahSehat/src/main/resources/templates/user/apoteker-viewall.html b/rumahSehat/src/main/resources/templates/user/apoteker-viewall.html
index 4d79174d244d72e710be60f8c9013792ef9c3903..e63c8be994081ca40a3cc8b4339369abf10a00b9 100644
--- a/rumahSehat/src/main/resources/templates/user/apoteker-viewall.html
+++ b/rumahSehat/src/main/resources/templates/user/apoteker-viewall.html
@@ -5,55 +5,95 @@
   <title>User Management</title>
   <object th:include="fragments/fragment :: css" th:remove="tag"></object>
   <object th:include="fragments/fragment :: js" th:remove="tag"></object>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css">
+
+  <style>
+    .container-content {
+      width: 850px;
+      display: flex;
+      justify-content: center;
+      padding-bottom: 80px;
+    }
+
+    .container-table {
+      width: 900px;
+      height: auto;
+      border-radius: 10px;
+      border-style: solid;
+      border-color: #2D89FF;
+    }
+
+    .header-container-table {
+      height: 60px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      background-color: #2D89FF;
+    }
+
+    .content-container-table {
+      display: flex;
+      justify-content: center;
+    }
+
+    .table {
+      margin-top: 20px;
+      width: 800px;
+      height: auto;
+    }
+
+    th {
+      text-align: center;
+      color: #2D89FF;
+    }
+
+    td {
+      text-align: center;
+    }
+  </style>
 </head>
 
 <body>
 <nav th:replace="fragments/fragment :: navbar('/')"></nav>
-
 <div class="container">
-  <div class="text-center mt-4">
-    <h3>Daftar Apoteker</h3>
+  <div class="d-flex justify-content-center">
+    <h2 class="mt-4" style="font-weight: bold;">Daftar Apoteker</h2>
   </div>
-  <ul class="list-group list-group-flush">
-    <li class="list-group-item justify-content-center">
-
-      <div class="card m-4 mt-0 border-primary">
-        <div class="card-header bg-primary text-white">
-          <div class="row">
-            <div class="col m-2">
-              Daftar Apoteker
-            </div>
-            <div class="col text-right">
-              <a class="btn btn-outline-primary btn-light" th:href="@{/apoteker/add}">Tambah Apoteker</a>
-            </div>
-          </div>
+  <div class="d-flex justify-content-center">
+    <div class="container-content mt-4">
+      <div class="container-table">
+        <div class="header-container-table">
+          <h5 class="table-title text-white ml-4 mt-2">Apoteker</h5>
+          <a class="add-button btn btn-success mr-4 mt-2" th:href="@{/apoteker/add}"><i class="fa-solid fa-user-plus"></i> Tambah Apoteker</a>
         </div>
-        <ul class="list-group list-group-flush">
-          <li class="list-group-item">
-            <table class="table table-striped">
-              <thead class="text-primary">
-              <tr>
-                <th>No</th>
-                <th>Nama</th>
-                <th>Username</th>
-                <th>Email</th>
-              </tr>
-              </thead>
-              <tbody>
+        <div class="content-container-table">
+          <table class="table">
+            <thead>
+            <tr>
+              <th>No</th>
+              <th>Nama</th>
+              <th>Username</th>
+              <th>Email</th>
+            </tr>
+            </thead>
+            <tbody>
               <tr th:each="apoteker, iterationStatus : ${listApoteker}">
                 <td th:text="${iterationStatus.count}"></td>
                 <td th:text="${apoteker.nama}"></td>
                 <td th:text="${apoteker.username}"></td>
                 <td th:text="${apoteker.email}"></td>
               </tr>
-              </tbody>
-            </table>
-          </li>
-        </ul>
+            </tbody>
+          </table>
+        </div>
       </div>
-    </li>
-  </ul>
+    </div>
+  </div>
 </div>
-
 </body>
+
 </html>
\ No newline at end of file
diff --git a/rumahSehat/src/main/resources/templates/user/dokter-add-form.html b/rumahSehat/src/main/resources/templates/user/dokter-add-form.html
index b8013b77828fb8201f64427f7e6f48326aeda726..3f87f0f41756204e2d9038f5302ed79d90c2f2a2 100644
--- a/rumahSehat/src/main/resources/templates/user/dokter-add-form.html
+++ b/rumahSehat/src/main/resources/templates/user/dokter-add-form.html
@@ -20,20 +20,20 @@
                     <label>Username</label>
                     <input class="form-control" type="text" name="username" required/>
 
-                    <label>Nama Dokter</label>
+                    <label class="mt-3">Nama Dokter</label>
                     <input class="form-control" type="text" name="nama" required/>
 
-                    <label>E-mail</label>
+                    <label class="mt-3">E-mail</label>
                     <input class="form-control" name="email" type="text" required/>
 
-                    <label>Password</label>
+                    <label class="mt-3">Password</label>
                     <input class="form-control" name="password" type="password" required/>
 
-                    <label>Tarif</label>
+                    <label class="mt-3">Tarif</label>
                     <input class="form-control" name="tarif" type="number" required/>
 
-                    <button class="btn btn-primary" type="submit" name="save">Submit</button>
-                    <a class="btn btn-primary" href="/">Home</a>
+                    <button class="btn btn-primary mt-3" type="submit" name="save">Submit</button>
+                    <a class="btn btn-primary mt-3" href="/">Home</a>
                 </form>
             </div>
         </div>
diff --git a/rumahSehat/src/main/resources/templates/user/dokter-viewall.html b/rumahSehat/src/main/resources/templates/user/dokter-viewall.html
index e57bb54c523aa441718d88453a0abb496e6823ff..269819fe7ea1fcb4e6cfc7ee505252bf01ecab91 100644
--- a/rumahSehat/src/main/resources/templates/user/dokter-viewall.html
+++ b/rumahSehat/src/main/resources/templates/user/dokter-viewall.html
@@ -5,56 +5,97 @@
   <title>User Management</title>
   <object th:include="fragments/fragment :: css" th:remove="tag"></object>
   <object th:include="fragments/fragment :: js" th:remove="tag"></object>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css">
+
+  <style>
+    .container-content {
+      width: 850px;
+      display: flex;
+      justify-content: center;
+      padding-bottom: 80px;
+    }
+
+    .container-table {
+      width: 900px;
+      height: auto;
+      border-radius: 10px;
+      border-style: solid;
+      border-color: #2D89FF;
+    }
+
+    .header-container-table {
+      height: 60px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      background-color: #2D89FF;
+    }
+
+    .content-container-table {
+      display: flex;
+      justify-content: center;
+    }
+
+    .table {
+      margin-top: 20px;
+      width: 800px;
+      height: auto;
+    }
+
+    th {
+      text-align: center;
+      color: #2D89FF;
+    }
+
+    td {
+      text-align: center;
+    }
+  </style>
 </head>
 
 <body>
 <nav th:replace="fragments/fragment :: navbar('/')"></nav>
 
 <div class="container">
-  <div class="text-center mt-4">
-    <h3>Daftar Dokter</h3>
+  <div class="d-flex justify-content-center">
+    <h2 class="mt-4" style="font-weight: bold;">Daftar Dokter</h2>
   </div>
-  <ul class="list-group list-group-flush">
-    <li class="list-group-item justify-content-center">
-
-      <div class="card m-4 mt-0 border-primary">
-        <div class="card-header bg-primary text-white">
-          <div class="row">
-            <div class="col m-2">
-              Daftar Dokter
-            </div>
-            <div class="col text-right">
-              <a class="btn btn-outline-primary btn-light" th:href="@{/dokter/add}">Tambah Dokter</a>
-            </div>
-          </div>
+  <div class="d-flex justify-content-center">
+    <div class="container-content mt-4">
+      <div class="container-table">
+        <div class="header-container-table">
+          <h5 class="table-title text-white ml-4 mt-2">Dokter</h5>
+          <a class="add-button btn btn-success mr-4 mt-2" th:href="@{/dokter/add}"><i class="fa-solid fa-user-plus"></i> Tambah Dokter</a>
+        </div>
+        <div class="content-container-table">
+          <table class="table">
+            <thead>
+            <tr>
+              <th>No</th>
+              <th>Nama</th>
+              <th>Username</th>
+              <th>Email</th>
+              <th>Tarif</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr th:each="dokter, iterationStatus : ${listDokter}">
+              <td th:text="${iterationStatus.count}"></td>
+              <td th:text="${dokter.nama}"></td>
+              <td th:text="${dokter.username}"></td>
+              <td th:text="${dokter.email}"></td>
+              <td th:text="${dokter.tarif}"></td>
+            </tr>
+            </tbody>
+          </table>
         </div>
-        <ul class="list-group list-group-flush">
-          <li class="list-group-item">
-            <table class="table table-striped">
-              <thead class="text-primary">
-              <tr>
-                <th>No</th>
-                <th>Nama</th>
-                <th>Username</th>
-                <th>Email</th>
-                <th>Tarif</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr th:each="dokter, iterationStatus : ${listDokter}">
-                <td th:text="${iterationStatus.count}"></td>
-                <td th:text="${dokter.nama}"></td>
-                <td th:text="${dokter.username}"></td>
-                <td th:text="${dokter.email}"></td>
-                <td th:text="${dokter.tarif}"></td>
-              </tr>
-              </tbody>
-            </table>
-          </li>
-        </ul>
       </div>
-    </li>
-  </ul>
+    </div>
+  </div>
 </div>
 
 </body>
diff --git a/rumahSehat/src/main/resources/templates/user/pasien-viewall.html b/rumahSehat/src/main/resources/templates/user/pasien-viewall.html
index 50f3d80575ba1f120f5e3e46f93fc3132d97dd65..0c795d783dc2d6e6be9fd7c2dcbaa9b027249f1e 100644
--- a/rumahSehat/src/main/resources/templates/user/pasien-viewall.html
+++ b/rumahSehat/src/main/resources/templates/user/pasien-viewall.html
@@ -5,55 +5,97 @@
   <title>View All Pasien</title>
   <object th:include="fragments/fragment :: css" th:remove="tag"></object>
   <object th:include="fragments/fragment :: js" th:remove="tag"></object>
+
+  <style>
+    .container-content {
+      width: 850px;
+      display: flex;
+      justify-content: center;
+      padding-bottom: 80px;
+    }
+
+    .container-table {
+      width: 900px;
+      height: auto;
+      border-radius: 10px;
+      border-style: solid;
+      border-color: #2D89FF;
+    }
+
+    .header-container-table {
+      height: 60px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      background-color: #2D89FF;
+    }
+
+    .content-container-table {
+      display: flex;
+      justify-content: center;
+    }
+
+    .table {
+      margin-top: 20px;
+      width: 800px;
+      height: auto;
+    }
+
+    th {
+      text-align: center;
+      color: #2D89FF;
+    }
+
+    td {
+      text-align: center;
+    }
+  </style>
 </head>
 
 <body>
 <nav th:replace="fragments/fragment :: navbar('/')"></nav>
 
 <div class="container">
-  <div class="text-center mt-4">
-    <h3>Daftar Pasien</h3>
+  <div class="d-flex justify-content-center">
+    <h2 class="mt-4" style="font-weight: bold;">Daftar Pasien</h2>
   </div>
-  <ul class="list-group list-group-flush">
-    <li class="list-group-item justify-content-center">
-
-      <div class="card m-4 mt-0 border-primary">
-        <div class="card-header bg-primary text-white">
-          <div class="row">
-            <div class="col m-2">
-              Daftar Pasien
-            </div>
-          </div>
+  <div class="d-flex justify-content-center">
+    <div class="container-content mt-4">
+      <div class="container-table">
+        <div class="header-container-table">
+          <h5 class="table-title text-white ml-4 mt-2">Pasien</h5>
+        </div>
+        <div class="content-container-table">
+          <table class="table">
+            <thead>
+            <tr>
+              <th>No</th>
+              <th>Nama</th>
+              <th>Username</th>
+              <th>Email</th>
+              <th>Umur</th>
+              <th>Saldo</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr th:each="pasien, iterationStatus : ${listPasien}">
+              <td th:text="${iterationStatus.count}"></td>
+              <td th:text="${pasien.nama}"></td>
+              <td th:text="${pasien.username}"></td>
+              <td th:text="${pasien.email}"></td>
+              <td th:text="${pasien.umur}"></td>
+              <td th:text="${pasien.saldo}"></td>
+            </tr>
+
+            </tbody>
+          </table>
         </div>
-        <ul class="list-group list-group-flush">
-          <li class="list-group-item">
-            <table class="table table-striped">
-              <thead class="text-primary">
-              <tr>
-                <th>No</th>
-                <th>Nama</th>
-                <th>Username</th>
-                <th>Email</th>
-                <th>Umur</th>
-                <th>Saldo</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr th:each="pasien, iterationStatus : ${listPasien}">
-                <td th:text="${iterationStatus.count}"></td>
-                <td th:text="${pasien.nama}"></td>
-                <td th:text="${pasien.username}"></td>
-                <td th:text="${pasien.email}"></td>
-                <td th:text="${pasien.umur}"></td>
-                <td th:text="${pasien.saldo}"></td>
-              </tr>
-              </tbody>
-            </table>
-          </li>
-        </ul>
       </div>
-    </li>
-  </ul>
+    </div>
+  </div>
 </div>
 
 </body>
diff --git a/rumahSehat_jwt/.gradle/7.5.1/executionHistory/executionHistory.lock b/rumahSehat_jwt/.gradle/7.5.1/executionHistory/executionHistory.lock
index c6b1e3ea30a92dcd3d642c9bcc691960df329108..16bd905fb6625e78226c0875c591440def982e74 100644
Binary files a/rumahSehat_jwt/.gradle/7.5.1/executionHistory/executionHistory.lock and b/rumahSehat_jwt/.gradle/7.5.1/executionHistory/executionHistory.lock differ
diff --git a/rumahSehat_jwt/.gradle/7.5.1/fileHashes/fileHashes.lock b/rumahSehat_jwt/.gradle/7.5.1/fileHashes/fileHashes.lock
index 463a1493a93f22eec1eddbe6b6de49bac5c6972f..933c0be2724dfa507f1608c87dcd045d325d389b 100644
Binary files a/rumahSehat_jwt/.gradle/7.5.1/fileHashes/fileHashes.lock and b/rumahSehat_jwt/.gradle/7.5.1/fileHashes/fileHashes.lock differ
diff --git a/rumahSehat_jwt/.gradle/buildOutputCleanup/buildOutputCleanup.lock b/rumahSehat_jwt/.gradle/buildOutputCleanup/buildOutputCleanup.lock
index eca19cbbb403fa4dc1ae68f09ae8b869ae650c00..5e005406fc8eb0e2d2626ebe28066ff07c2169e0 100644
Binary files a/rumahSehat_jwt/.gradle/buildOutputCleanup/buildOutputCleanup.lock and b/rumahSehat_jwt/.gradle/buildOutputCleanup/buildOutputCleanup.lock differ
diff --git a/rumahSehat_mobile/android/local.properties b/rumahSehat_mobile/android/local.properties
index 264303e9b0b90fcf945505a2cc66626634d432ca..254f92be77e0a119ecfffe40bca900792b227c9b 100644
--- a/rumahSehat_mobile/android/local.properties
+++ b/rumahSehat_mobile/android/local.properties
@@ -1,6 +1,6 @@
-sdk.dir=/Users/davidjohan/Library/Android/sdk
+sdk.dir=C:\\Users\\aherm\\AppData\\Local\\Android\\sdk
 =======
-flutter.sdk=/Users/davidjohan/Developer/flutter
+flutter.sdk=C:\\flutter
 flutter.buildMode=debug
 flutter.versionName=1.0.0
 flutter.versionCode=1
\ No newline at end of file
diff --git a/rumahSehat_mobile/lib/url_settings.dart b/rumahSehat_mobile/lib/url_settings.dart
index 33b04839ecd4d289834c3ccb35af74677d3e081e..4f5b9b09338f04abc016077c953914faa503d95b 100644
--- a/rumahSehat_mobile/lib/url_settings.dart
+++ b/rumahSehat_mobile/lib/url_settings.dart
@@ -1,4 +1,4 @@
-const String base_url = "http://10.5.252.146:8081/api";
+const String base_url = "http://192.168.50.6:8081/api";
 
 const String doctor_url = base_url + "/dokter";
 const String get_alldoctor_url = doctor_url + "/viewAll";