diff --git a/lib/components/checkout_form.dart b/lib/components/checkout_form.dart
index 025e8b1..0de999a 100644
--- a/lib/components/checkout_form.dart
+++ b/lib/components/checkout_form.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
 import 'package:nekoya_flutter/api/api.dart';
+import 'package:nekoya_flutter/data/cart.dart';
 
 class CheckoutForm extends StatefulWidget {
   CheckoutForm({Key? key}) : super(key: key);
@@ -9,9 +10,246 @@ class CheckoutForm extends StatefulWidget {
   State<CheckoutForm> createState() => _CheckoutFormState();
 }
 
+final _formKey = GlobalKey<FormBuilderState>();
+
 class _CheckoutFormState extends State<CheckoutForm> {
   @override
   Widget build(BuildContext context) {
-    return Container();
+    return Container(
+      margin: const EdgeInsets.fromLTRB(10, 10, 10, 5),
+      child: Card(
+        color: const Color(0xff212226),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(15),
+        ),
+        child: Container(
+          margin: const EdgeInsets.fromLTRB(5, 20, 5, 20),
+          padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
+          width: double.infinity,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Column(
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 25),
+                    child: FormBuilder(
+                      key: _formKey,
+                      child: Column(
+                        children: [
+                          const Center(
+                            child: Text(
+                              "Shipping Details",
+                              style: TextStyle(
+                                  color: Colors.white,
+                                  fontWeight: FontWeight.bold,
+                                  fontSize: 30),
+                            ),
+                          ),
+                          const SizedBox(
+                            height: 20,
+                          ),
+                          Row(
+                            children: const [
+                              Text(
+                                "Contact Information",
+                                style: TextStyle(
+                                    color: Colors.white70,
+                                    fontWeight: FontWeight.bold,
+                                    fontSize: 20),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(
+                            height: 10,
+                          ),
+                          makeInput(label: "First Name"),
+                          makeInput(label: "Last Name"),
+                          makeInput(label: "Phone Number"),
+                          const SizedBox(
+                            height: 20,
+                          ),
+                          Row(
+                            children: const [
+                              Text(
+                                "Address",
+                                style: TextStyle(
+                                    color: Colors.white70,
+                                    fontWeight: FontWeight.bold,
+                                    fontSize: 20),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(
+                            height: 10,
+                          ),
+                          makeInput(label: "Street Address"),
+                          makeInput(label: "Street Address 2"),
+                          makeInput(label: "Region"),
+                          makeInput(label: "Province"),
+                          makeInput(label: "City"),
+                          makeInput(label: "District"),
+                          makeInput(label: "Subdistrict"),
+                          makeInput(label: "Postal Code"),
+                          const SizedBox(
+                            height: 20,
+                          ),
+                          Row(
+                            children: const [
+                              Text(
+                                "Shipping Methods",
+                                style: TextStyle(
+                                    color: Colors.white70,
+                                    fontWeight: FontWeight.bold,
+                                    fontSize: 20),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(
+                            height: 10,
+                          ),
+                          FormBuilderDropdown(
+                            name: "Shipping Method",
+                            dropdownColor: const Color(0xff212226),
+                            style: const TextStyle(color: Colors.white),
+                            decoration: const InputDecoration(
+                              contentPadding: EdgeInsets.symmetric(
+                                  vertical: 0, horizontal: 10),
+                              focusedBorder: OutlineInputBorder(
+                                borderSide: BorderSide(
+                                  color: Colors.red,
+                                ),
+                              ),
+                              enabledBorder: OutlineInputBorder(
+                                borderSide: BorderSide(
+                                  color: Colors.white,
+                                ),
+                              ),
+                              border: OutlineInputBorder(
+                                  borderSide: BorderSide(color: Colors.white)),
+                            ),
+                            items: const [
+                              DropdownMenuItem(
+                                value: "JNE",
+                                child: Text("JNE"),
+                              ),
+                              DropdownMenuItem(
+                                value: "JNT",
+                                child: Text("JNT"),
+                              ),
+                              DropdownMenuItem(
+                                value: "SiCepat",
+                                child: Text("SiCepat"),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(
+                            height: 10,
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 35),
+                    child: Container(
+                      padding: const EdgeInsets.only(top: 3, left: 3),
+                      child: MaterialButton(
+                        minWidth: double.infinity,
+                        height: 35,
+                        onPressed: () async {},
+                        color: const Color(0xff8B0000),
+                        shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(40)),
+                        child: const Text(
+                          "Pay",
+                          style: TextStyle(
+                            color: Colors.white,
+                            fontWeight: FontWeight.w600,
+                            fontSize: 15,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
   }
 }
+
+Widget makeInput({label, obscureText = false}) {
+  return Column(
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: [
+      Text(
+        label,
+        style: const TextStyle(
+            fontSize: 12, fontWeight: FontWeight.bold, color: Colors.white),
+      ),
+      const SizedBox(
+        height: 5,
+      ),
+      FormBuilderTextField(
+        initialValue: "",
+        name: label,
+        obscureText: obscureText,
+        style: const TextStyle(color: Colors.white),
+        decoration: const InputDecoration(
+          contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 10),
+          focusedBorder: OutlineInputBorder(
+            borderSide: BorderSide(
+              color: Colors.red,
+            ),
+          ),
+          enabledBorder: OutlineInputBorder(
+            borderSide: BorderSide(
+              color: Colors.white,
+            ),
+          ),
+          border:
+              OutlineInputBorder(borderSide: BorderSide(color: Colors.white)),
+        ),
+      ),
+      const SizedBox(
+        height: 10,
+      )
+    ],
+  );
+}
+
+showAlertDialog(BuildContext context) {
+  Widget okButton = TextButton(
+    child: const Text("OK", style: TextStyle(color: Colors.red)),
+    onPressed: () {
+      Navigator.of(context, rootNavigator: true).pop();
+    },
+  );
+  AlertDialog alert = AlertDialog(
+    backgroundColor: const Color(0xff1b1c1e),
+    shape: RoundedRectangleBorder(
+      borderRadius: BorderRadius.circular(10),
+    ),
+    title: const Text(
+      "Error",
+      style: TextStyle(color: Colors.white),
+    ),
+    content: const Text(
+      "Make sure to fill all fields",
+      style: TextStyle(color: Colors.white70),
+    ),
+    actions: [
+      okButton,
+    ],
+  );
+  showDialog(
+    context: context,
+    builder: (BuildContext context) {
+      return alert;
+    },
+  );
+}