diff --git a/lib/components/cart_box.dart b/lib/components/cart_box.dart
new file mode 100644
index 0000000..9d423dc
--- /dev/null
+++ b/lib/components/cart_box.dart
@@ -0,0 +1,104 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+
+class CartBox extends StatefulWidget {
+  const CartBox({Key? key, required this.imageUrl, required this.title, required this.quantity, required this.plus, required this.minus, required this.remove}) : super(key: key);
+
+  final String imageUrl;
+  final String title;
+  final int quantity;
+  final Function() plus;
+  final Function() minus;
+  final Function() remove;
+
+  @override
+  State<CartBox> createState() => _CartBoxState();
+}
+
+class _CartBoxState extends State<CartBox> {
+
+  @override
+  Widget build(BuildContext context) {
+    var currentQuantity = widget.quantity;
+
+    return Container(
+      margin: const EdgeInsets.all(8.0),
+      child: Card(
+        color: const Color(0xff212226),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+        ),
+        child: Row(
+          children: [
+            Flexible(
+              flex: 2,
+              child: CachedNetworkImage(
+                imageUrl: widget.imageUrl,
+                placeholder: (context, url) =>
+                    const CircularProgressIndicator(
+                  color: Color(0xff8B0000),
+                ),
+                errorWidget: (context, url, error) =>
+                    Image.asset('assets/image-error.webp'),
+                fadeOutDuration: const Duration(milliseconds: 5),
+                imageBuilder: (context, imageProvider) => Container(
+                  width: 300,
+                  height: 150,
+                  decoration: BoxDecoration(
+                      image: DecorationImage(
+                          image: imageProvider, fit: BoxFit.cover)),
+                ),
+              ),
+            ),
+            Flexible(
+              flex: 3,
+              child: Column(
+                children: [
+                  Container(
+                    margin: const EdgeInsets.only(left: 10.0, right: 10.0),
+                    child: Text(
+                      widget.title,
+                      style: const TextStyle(
+                        fontSize: 18,
+                        color: Colors.white,
+                        fontWeight: FontWeight.w600),
+                      textAlign: TextAlign.start,
+                    ),
+                  ),
+                  const SizedBox(height: 10,),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceAround,
+                    children: [
+                      ElevatedButton(
+                        onPressed: (){
+                          currentQuantity++;
+                          widget.plus();
+                          setState(() {});
+                        },
+                        child: const Text("+")
+                      ),
+                      Text(currentQuantity.toString(),
+                        style: const TextStyle(
+                          fontSize: 15,
+                          color: Colors.white,
+                          fontWeight: FontWeight.w400)
+                      ),
+                      ElevatedButton(
+                        onPressed: (){
+                          currentQuantity--;
+                          widget.minus();
+                          setState(() {});
+                        },
+                        child: const Text("-")
+                      )
+                    ],
+                  )
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/screens/cart.dart b/lib/screens/cart.dart
new file mode 100644
index 0000000..55c749d
--- /dev/null
+++ b/lib/screens/cart.dart
@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+
+import 'package:nekoya_flutter/api/api.dart';
+import 'package:nekoya_flutter/components/cart_box.dart';
+import 'package:nekoya_flutter/data/cart.dart';
+
+class Cart extends StatefulWidget {
+  const Cart({Key? key}) : super(key: key);
+
+  @override
+  State<Cart> createState() => _CartState();
+}
+
+class _CartState extends State<Cart> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xff1b1c1e),
+      appBar: AppBar(
+        title: const Text('Cart'),
+        centerTitle: true,
+        backgroundColor: const Color(0xff212226),
+      ),
+      body: FutureBuilder<dynamic>(
+        future: viewCart(),
+        builder: (context, snapshot) {
+          if (snapshot.hasData) {
+            var data = snapshot.data;
+            return ListView.builder(
+              itemCount: data!.length,
+              itemBuilder: (context, index) {
+                return FutureBuilder<dynamic>(
+                  future: getProduct(data[index]["product_id"]),
+                  builder: (context, snapshotx) {
+                    if (snapshot.hasData) {
+                      var productData = snapshotx.data;
+                      if (productData != null) {
+                        return CartBox(
+                          imageUrl: 'https://nekoya.moe.team/img/' + productData[0]['IMAGE'],
+                          title: productData[0]['TITLE'],
+                          quantity: data[index]["quantity"],
+                          plus: () {
+                            addToCart(data[index]["product_id"]);
+                          },
+                          minus: () {
+                            removeFromCart(data[index]["product_id"], false);
+                          },
+                          remove: () {
+                            removeFromCart(data[index]["product_id"], true);
+                          }
+                        );
+                      }
+                    }
+
+                    return CartBox(
+                      imageUrl: 'https://i.ibb.co/QJFLZC4/La-Darknesss-Portrait.webp',
+                      title: 'Loading...',
+                      quantity: 0,
+                      plus: () {},
+                      minus: () {},
+                      remove: () {},
+                    );
+                  }
+                );
+              },
+            );
+          }
+
+          return const Center(
+            child: CircularProgressIndicator(
+              color: Color(0xff8B0000),
+            ),
+          );
+        }
+      )
+    );
+  }
+}
\ No newline at end of file