diff --git a/pages.php b/pages.php
index ad2a84f..28de167 100644
--- a/pages.php
+++ b/pages.php
@@ -11,6 +11,14 @@ define("PAGES", [
         "navbar" => true,
         "icon" => "fas fa-home"
     ],
+    "pos" => [
+        "title" => "point of sale",
+        "navbar" => true,
+        "icon" => "far fa-money-bill-alt",
+        "scripts" => [
+            "static/js/pos.js",
+        ]
+    ],
     "404" => [
         "title" => "404 error"
     ]
diff --git a/pages/pos.php b/pages/pos.php
new file mode 100644
index 0000000..06cc133
--- /dev/null
+++ b/pages/pos.php
@@ -0,0 +1,73 @@
+<?php
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+?>
+<div class="row">
+    <div class="col-12 col-md-6">
+        <div class="card d-block d-md-none mb-2">
+            <div class="display-4 p-3 text-center">$<span class="grand-total">236.32</span></div>
+        </div>
+
+        <div class="card d-flex">
+            <div class="card-header p-1">
+                <div class="input-group">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text"><i class="fas fa-barcode"></i></span>
+                    </div>
+                    <input type="text" class="form-control" id="barcode" placeholder="<?php lang("barcode"); ?>" />
+                    <div class="input-group-append">
+                        <button class="btn btn-link" type="button"><i class="fas fa-plus"></i></button>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div class="list-group" id="pos-lines-box">
+                    <?php
+                    for ($i = 0; $i < 5; $i++) {
+                        ?>
+                        <div class="list-group-item">
+                            <div class="d-flex w-100 justify-content-between mb-2">
+                                <h5 class="item-name">
+                                    Cool Widget
+                                </h5>
+                                <h5>
+                                    <small class="item-code">659321</small>
+                                    <span class="badge badge-light">
+                                        $<span class="line-total">10.23</span>
+                                    </span>
+                                </h5>
+                            </div>
+                            <div class="d-inline-flex">
+                                <div class="input-group input-group-sm qty-control">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text mx-0 px-0"><b>$</b></span>
+                                    </div>
+                                    <input type="number" class="form-control item-price" value="10.23"/>
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fas fa-times"></i></span>
+                                        <button class="btn btn-red qty-minus" type="button"><i class="fas fa-trash"></i></button>
+                                    </div>
+                                    <input type="number" class="form-control item-qty" value="1" />
+                                    <div class="input-group-append">
+                                        <button class="btn btn-light-green qty-plus" type="button"><i class="fas fa-plus"></i></button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <?php
+                    }
+                    ?>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12 col-md-6">
+        <div class="card d-none d-md-block">
+            <div class="display-4 p-3 text-center">$<span class="grand-total">236.32</span></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/static/css/app.css b/static/css/app.css
index e255bff..320c743 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -47,4 +47,18 @@ body {
 .footer {
     margin-top: 10em;
     text-align: center;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+#pos-lines-box {
+    max-height: calc(100vh - 200px);
+    overflow-y: scroll;
 }
\ No newline at end of file
diff --git a/static/js/pos.js b/static/js/pos.js
new file mode 100644
index 0000000..f1a1d2d
--- /dev/null
+++ b/static/js/pos.js
@@ -0,0 +1,86 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+function addItem(name, code, price) {
+    if ($(".list-group-item[data-code='" + code + "']").length) {
+        updateQty($(".list-group-item[data-code='" + code + "']").find(".qty-plus"), 1);
+        return;
+    }
+    $("#pos-lines-box").append('<div class="list-group-item" data-code="' + code + '">'
+            + '<div class="d-flex w-100 justify-content-between mb-2">'
+            + '<h5 class="item-name">'
+            + name
+            + '</h5>'
+            + '<h5>'
+            + '<small class="item-code">' + code + '</small>'
+            + '<span class="badge badge-light">'
+            + '$<span class="line-total">'
+            + price
+            + '</span>'
+            + '</span>'
+            + '</h5>'
+            + '</div>'
+            + '<div class="d-inline-flex">'
+            + '<div class="input-group input-group-sm qty-control">'
+            + '<div class="input-group-prepend">'
+            + '<span class="input-group-text mx-0 px-0"><b>$</b></span>'
+            + '</div>'
+            + '<input type="number" class="form-control item-price" value="' + price + '"/>'
+            + '<div class="input-group-prepend">'
+            + '<span class="input-group-text"><i class="fas fa-times"></i></span>'
+            + '<button class="btn btn-red qty-minus" type="button"><i class="fas fa-trash"></i></button>'
+            + '</div>'
+            + '<input type="number" class="form-control item-qty" value="1" />'
+            + '<div class="input-group-append">'
+            + '<button class="btn btn-light-green qty-plus" type="button"><i class="fas fa-plus"></i></button>'
+            + '</div>'
+            + '</div>'
+            + '</div>'
+            + '</div>');
+}
+
+function recalculate() {
+    var total = 0.0;
+    $("#pos-lines-box .list-group-item").each(function () {
+        var each = $(".item-price", this).val() * 1.0;
+        var qty = $(".item-qty", this).val() * 1.0;
+        var line = each * qty;
+        $(".line-total", this).text(line.toFixed(2));
+        $(".item-price", this).val(each.toFixed(2));
+        total += line;
+    });
+    $(".grand-total").text(total.toFixed(2));
+}
+
+function updateQty(btn, diff) {
+    var qtybox = $(btn).parent().parent().find(".item-qty");
+    var qty = parseInt(qtybox.val());
+    qty += diff;
+    if (qty > 0) {
+        qtybox.val(qty);
+        var minbtn = $(btn).parent().parent().find(".qty-minus");
+        if (qty == 1) {
+            minbtn.html("<i class=\"fas fa-trash\"></i>");
+        } else {
+            minbtn.html("<i class=\"fas fa-minus\"></i>");
+        }
+    } else {
+        qtybox.closest(".list-group-item").remove();
+    }
+    recalculate();
+}
+
+$("#pos-lines-box").on("click", ".qty-minus", function () {
+    updateQty(this, -1);
+});
+
+$("#pos-lines-box").on("click", ".qty-plus", function () {
+    updateQty(this, 1);
+});
+
+$("#pos-lines-box").on("change", ".item-qty,.item-price", function () {
+    recalculate();
+});
\ No newline at end of file