diff --git a/template1.css b/template1.css
new file mode 100644
index 0000000..09375d7
--- /dev/null
+++ b/template1.css
@@ -0,0 +1,124 @@
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    padding: 30px;
+}
+
+.bold{
+	font-weight: 900;
+}
+
+.row-middle {
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+}
+
+.invoice_wrapper {
+    max-width: 100%;
+    width: 800px;
+}
+
+.invoice_wrapper .row-top .invoice-logo-wrapper,
+.invoice-wrapper .row-top .invoice-bill-address-wrapper {
+    display: flex;
+    justify-content: space-between;
+    padding: 30px;
+}
+
+.invoice-wrapper .row-top .logo-sec {
+    display: flex;
+    align-items: center;
+}
+
+.invoice_wrapper .row-top .invoice-sec,
+.invoice_wrapper .row-top .invoice-bill-address-wrapper .invoice-detail-wrapper {
+	text-align: center;
+}
+
+.invoice_wrapper .row-top .invoice-sec .invoice-no, .created-date,
+.invoice_wrapper .row-top .invoice-sec .due-date {
+	display: flex;
+	width: 100%;
+}
+
+.invoice_wrapper .row-top .invoice-sec .invoice-no, .created-date span:first-child,
+.invoice_wrapper .row-top .invoice-sec .due-date span:first-child {
+	width: 60px;
+	text-align: left;
+}
+
+.invoice_wrapper .row-top .invoice-sec .invoice-no, .created-date span:last-child,
+.invoice_wrapper .row-top .invoice-sec .due-date span:last-child {
+	width: calc(100% - 60px);
+}
+
+.invoice_wrapper .row-middle .main-table .table-header {
+    border-bottom: 1px solid black;
+}
+
+.invoice_wrapper .row-middle .main-table .table-header .row {
+	font-size: 16px;
+	border-bottom: 0px;	
+}
+
+.invoice_wrapper .row-middle .main-table .row {
+	display: flex;
+}
+
+.invoice_wrapper .row-middle .main-table .row .col {
+	padding: 10px;
+}
+.invoice_wrapper .row-middle .main-table .row .col-item-code {
+    width: 10%;
+}
+.invoice_wrapper .row-middle .main-table .row .col-item-name {
+    width: 45%;
+}
+.invoice_wrapper .row-middle .main-table .row .col-num-pack {
+    width: 15%;
+    text-align: right;
+}
+.invoice_wrapper .row-middle .main-table .row .col-packsize {
+    width: 15%;
+    text-align: right;
+}
+.invoice_wrapper .row-middle .main-table .row .col-subtotal {
+    width: 15%;
+    text-align: right;
+}
+
+.invoice_wrapper .row-middle .invoice-total-wrapper {
+	display: flex;
+	justify-content: space-between;
+	padding: 5px 0 30px;
+	align-items: flex-end;
+}
+
+.invoice_wrapper .row-middle .invoice-total-wrapper .offset-to-left{
+	padding-left: 30px;
+}
+
+.invoice_wrapper .row-middle .invoice-total-wrapper .total-sec{
+	width: 30%;
+}
+
+.invoice_wrapper .row-middle .invoice-total-wrapper .total-sec p{
+	display: flex;
+	width: 100%;
+	padding-bottom: 5px;
+}
+
+.invoice_wrapper .row-middle .invoice-total-wrapper .total-sec p span:first-child{
+	width: 60%;
+    padding-left: 70px;
+}
+
+.invoice_wrapper .row-middle .invoice-total-wrapper .total-sec p span:last-child{
+	width: 40%;
+    padding-right: 10px;
+	text-align: right;
+}
+
diff --git a/template1.html b/template1.html
new file mode 100644
index 0000000..97b15af
--- /dev/null
+++ b/template1.html
@@ -0,0 +1,75 @@
+<style>
+    {% include "design.css" %}
+</style>
+<div class="container">
+    <div class="invoice_wrapper">
+        <div class="row-top">
+            <div class="invoice-logo-wrapper">
+                <div class="logo-sec">
+                    <img src="{% include "logo_laos" %}" alt="code logo" />
+                </div>
+                <div class="invoice-sec">
+                    <p class="invoice-no">
+                        <span class="bold">Invoice#:</span>
+                        <span>{{ data.invoice.invoiceNumber }}</span>
+                    </p>
+                    <p class="created-date">
+                        <span class="bold">Created:</span>
+                        <span>{{ data.invoice.createdDatetime | date(format="%Y-%m-%d") }}</span>
+                    </p>
+                    <p class="due-date">
+                        <span class="bold">Due:</span>
+                        <span>{{ data.invoice.shippedDatetime | date(format="%Y-%m-%d") }}</span>
+                    </p>
+                </div>
+            </div>
+            <div class="invoice-bill-address-wrapper">
+                <div class="invoice-address-sec">
+                    <p>{{ data.invoice.otherPartyName }}</p> 
+                    <span>
+                        12345 Sunny Road<br>
+                        Sunnyville, CA 12345
+                    </span>
+                </div>
+                <div class="invoice-detail-wrapper">
+                    <p>Sam Corp</p>
+                    <span>Sam Sam sam@example.com</span>
+                </div>
+            </div>
+        </div>
+        <div class="row-middle">
+            <div class="main-table">
+                <div class="table-header">
+                    <div class="row">
+                        <div class="bold col col-item-code">Item code</div>
+                        <div class="bold col col-item-name">Item name</div>
+                        <div class="bold col col-num-pack">No. of packs</div>
+                        <div class="bold col col-packsize">Packsize</div>
+                        <div class="bold col col-subtotal">Subtotal</div>
+                    </div>
+                </div>
+                <div class="table-body">
+                    {% for line in data.invoice.lines.nodes -%}
+                    <div class="row">
+                        {% set subtotal=line.packSize * line.numberOfPacks %}
+                        <div class="col col-item-code">{{ line.itemCode }}</div>
+                        <div class="col col-item-name">{{ line.itemName }}</div>
+                        <div class="col col-num-pack">{{ line.numberOfPacks }}</div>
+                        <div class="col col-packsize">{{ line.packSize }}</div>
+                        <div class="col col-subtotal">{{ subtotal }}</div>
+                    </div>
+                    {%- endfor %}
+                </div>
+            </div>
+            <div class="invoice-total-wrapper">
+                <div class="offset-to-left"></div>
+                <div class="total-sec">
+                    <p class="bold">
+                        <span>Total:</span>
+                        <span>{{ data.invoice.pricing.totalAfterTax }}</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>