diff --git a/src/components/InvoicePage.tsx b/src/components/InvoicePage.tsx
index 07c9647..d95fca9 100644
--- a/src/components/InvoicePage.tsx
+++ b/src/components/InvoicePage.tsx
@@ -155,7 +155,6 @@ const InvoicePage: FC<Props> = ({ data, pdfMode, onChange }) => {
               onChangeImage={(value) => handleChange('logo', value)}
               onChangeWidth={(value) => handleChange('logoWidth', value)}
             />
-
             <EditableInput
               placeholder="Your Name"
               value={invoice.name}
diff --git a/src/components/MyInvoicePage.tsx b/src/components/MyInvoicePage.tsx
index 41c4d23..4205af4 100644
--- a/src/components/MyInvoicePage.tsx
+++ b/src/components/MyInvoicePage.tsx
@@ -141,66 +141,329 @@ const MyInvoicePage: FC<Props> = ({ data, pdfMode, onChange }) => {
 
   return (
     <Document pdfMode={pdfMode}>
-      <Page className="invoice-wrapper-my" pdfMode={pdfMode}>
-        {!pdfMode && <Download data={invoice} setData={(d) => setInvoice(d)} />}
-
-        <View className="invoice-container" pdfMode={pdfMode}>
-          <EditableInput
-            className="fs-45 left bold"
-            placeholder="Invoice"
-            value={invoice.title}
-            onChange={(value) => handleChange('title', value)}
-            pdfMode={pdfMode}
-          />
-        </View>
-
-        <View className="logo-pdf" pdfMode={pdfMode}>
-          <EditableFileImage
-            className="logo"
-            placeholder="Your Logo"
-            value={invoice.logo}
-            width={invoice.logoWidth}
-            pdfMode={pdfMode}
-            onChangeImage={(value) => handleChange('logo', value)}
-            onChangeWidth={(value) => handleChange('logoWidth', value)}
-          />
-        </View>
-
-        <View className="one-block" pdfMode={pdfMode}>
-          company
-        </View>
-        <View className="one-block" pdfMode={pdfMode}>
-          <EditableInput
-            className="fs-20 bold"
-            placeholder="Your Company"
-            value={invoice.companyName}
-            onChange={(value) => handleChange('companyName', value)}
-            pdfMode={pdfMode}
-          />
-          <EditableInput
-            placeholder="Company's Address"
-            value={invoice.companyAddress}
-            onChange={(value) => handleChange('companyAddress', value)}
-            pdfMode={pdfMode}
-          />
-          <EditableInput
-            placeholder="City, State Zip"
-            value={invoice.companyAddress2}
-            onChange={(value) => handleChange('companyAddress2', value)}
-            pdfMode={pdfMode}
-          />
-          <EditableSelect
-            options={countryList}
-            value={invoice.companyCountry}
-            onChange={(value) => handleChange('companyCountry', value)}
-            pdfMode={pdfMode}
-          />
-        </View>
-        <View className="one-block" pdfMode={pdfMode}>
-          bank
-        </View>
-        <View className="one-block" pdfMode={pdfMode}>
-          empty
+      <Page className="invoice-wrapper" pdfMode={pdfMode}>
+        <View className="grid grid-cols-4 gap-3">
+          {!pdfMode && <Download data={invoice} setData={(d) => setInvoice(d)} />}
+
+          <View className="invoice-container" pdfMode={pdfMode}>
+            <EditableInput
+              className="fs-45 left bold"
+              placeholder="Invoice"
+              value={invoice.title}
+              onChange={(value) => handleChange('title', value)}
+              pdfMode={pdfMode}
+            />
+          </View>
+
+          <View className="logo-pdf" pdfMode={pdfMode}>
+            <EditableFileImage
+              className="logo"
+              placeholder="Your Logo"
+              value={invoice.logo}
+              width={invoice.logoWidth}
+              pdfMode={pdfMode}
+              onChangeImage={(value) => handleChange('logo', value)}
+              onChangeWidth={(value) => handleChange('logoWidth', value)}
+            />
+          </View>
+
+          {/* Company Section */}
+          <View className="one-block" pdfMode={pdfMode}>
+            COMPANY
+          </View>
+          <View className="one-block" pdfMode={pdfMode}>
+            <EditableInput
+              placeholder="Your Company"
+              value={invoice.companyName}
+              onChange={(value) => handleChange('companyName', value)}
+              pdfMode={pdfMode}
+            />
+            <EditableInput
+              placeholder="Address"
+              value={invoice.companyAddress}
+              onChange={(value) => handleChange('companyAddress', value)}
+              pdfMode={pdfMode}
+            />
+            <EditableInput
+              placeholder="City"
+              value={invoice.companyCity}
+              onChange={(value) => handleChange('companyCity', value)}
+              pdfMode={pdfMode}
+            />
+            <EditableSelect
+              placeholder="Country"
+              options={countryList}
+              value={invoice.companyCountry}
+              onChange={(value) => handleChange('companyCountry', value)}
+              pdfMode={pdfMode}
+            />
+          </View>
+          <View className="one-block col-span-2" pdfMode={pdfMode}>
+            <EditableInput
+              placeholder="bank"
+              value={invoice.bankName}
+              onChange={(value) => handleChange('bankName', value)}
+              pdfMode={pdfMode}
+            />
+            <EditableInput
+              placeholder="IBAN"
+              value={invoice.iban}
+              onChange={(value) => handleChange('iban', value)}
+              pdfMode={pdfMode}
+            />
+            <EditableInput
+              placeholder="BIC"
+              value={invoice.bic}
+              onChange={(value) => handleChange('bic', value)}
+              pdfMode={pdfMode}
+            />
+          </View>
+          {/* Recipient Section */}
+          <View className="one-block" pdfMode={pdfMode}>
+            RECIPIENT
+          </View>
+          <View className="one-block" pdfMode={pdfMode}>
+            <EditableInput
+              placeholder="Bill To"
+              value={invoice.billTo}
+              onChange={(value) => handleChange('billTo', value)}
+              pdfMode={pdfMode}
+            />
+            <EditableInput
+              placeholder="Name"
+              value={invoice.clientName}
+              onChange={(value) => handleChange('clientName', value)}
+              pdfMode={pdfMode}
+            />
+            <EditableInput
+              placeholder="Address"
+              value={invoice.clientAddress}
+              onChange={(value) => handleChange('clientAddress', value)}
+              pdfMode={pdfMode}
+            />
+            <EditableInput
+              placeholder="City"
+              value={invoice.clientCity}
+              onChange={(value) => handleChange('clientCity', value)}
+              pdfMode={pdfMode}
+            />
+            <EditableSelect
+              placeholder="Country"
+              options={countryList}
+              value={invoice.clientCountry}
+              onChange={(value) => handleChange('clientCountry', value)}
+              pdfMode={pdfMode}
+            />
+          </View>
+          <View className="col-span-2 flex flex-col text-right" pdfMode={pdfMode}>
+            <View className="w-60" pdfMode={pdfMode}>
+              <EditableInput
+                placeholder="INV-12"
+                value={invoice.invoiceTitle}
+                onChange={(value) => handleChange('invoiceTitle', value)}
+                pdfMode={pdfMode}
+              />
+            </View>
+            <View className="flex mb-5" pdfMode={pdfMode}>
+              <View className="w-40" pdfMode={pdfMode}>
+                <EditableInput
+                  className="bold"
+                  value={invoice.invoiceDateLabel}
+                  onChange={(value) => handleChange('invoiceDateLabel', value)}
+                  pdfMode={pdfMode}
+                />
+              </View>
+              <View className="w-60" pdfMode={pdfMode}>
+                <EditableCalendarInput
+                  value={format(invoiceDate, dateFormat)}
+                  selected={invoiceDate}
+                  onChange={(date) =>
+                    handleChange(
+                      'invoiceDate',
+                      date && !Array.isArray(date) ? format(date, dateFormat) : '',
+                    )
+                  }
+                  pdfMode={pdfMode}
+                />
+              </View>
+            </View>
+            <View className="flex mb-5" pdfMode={pdfMode}>
+              <View className="w-40" pdfMode={pdfMode}>
+                <EditableInput
+                  className="bold"
+                  value={invoice.invoiceDueDateLabel}
+                  onChange={(value) => handleChange('invoiceDueDateLabel', value)}
+                  pdfMode={pdfMode}
+                />
+              </View>
+              <View className="w-60" pdfMode={pdfMode}>
+                <EditableCalendarInput
+                  value={format(invoiceDueDate, dateFormat)}
+                  selected={invoiceDueDate}
+                  onChange={(date) =>
+                    handleChange(
+                      'invoiceDueDate',
+                      date ? (!Array.isArray(date) ? format(date, dateFormat) : '') : '',
+                    )
+                  }
+                  pdfMode={pdfMode}
+                />
+              </View>
+            </View>
+          </View>
+          {/* bill section */}
+          <View className="one-block" pdfMode={pdfMode}>
+            BREAKDOWN
+          </View>
+          <View className="one-block col-span-3" pdfMode={pdfMode}>
+            <View className="bg-dark flex" pdfMode={pdfMode}>
+              <View className="w-48 p-4-8" pdfMode={pdfMode}>
+                <EditableInput
+                  className="white bold"
+                  value={invoice.productLineDescription}
+                  onChange={(value) => handleChange('productLineDescription', value)}
+                  pdfMode={pdfMode}
+                />
+              </View>
+              <View className="w-17 p-4-8" pdfMode={pdfMode}>
+                <EditableInput
+                  className="white bold right"
+                  value={invoice.productLineQuantity}
+                  onChange={(value) => handleChange('productLineQuantity', value)}
+                  pdfMode={pdfMode}
+                />
+              </View>
+              <View className="w-17 p-4-8" pdfMode={pdfMode}>
+                <EditableInput
+                  className="white bold right"
+                  value={invoice.productLineQuantityRate}
+                  onChange={(value) => handleChange('productLineQuantityRate', value)}
+                  pdfMode={pdfMode}
+                />
+              </View>
+              <View className="w-18 p-4-8" pdfMode={pdfMode}>
+                <EditableInput
+                  className="white bold right"
+                  value={invoice.productLineQuantityAmount}
+                  onChange={(value) => handleChange('productLineQuantityAmount', value)}
+                  pdfMode={pdfMode}
+                />
+              </View>
+            </View>
+            {invoice.productLines.map((productLine, i) => {
+              return pdfMode && productLine.description === '' ? (
+                <Text key={i}></Text>
+              ) : (
+                <View key={i} className="row flex" pdfMode={pdfMode}>
+                  <View className="w-48 p-4-8 pb-10" pdfMode={pdfMode}>
+                    <EditableTextarea
+                      className="dark"
+                      rows={2}
+                      placeholder="Enter item name/description"
+                      value={productLine.description}
+                      onChange={(value) => handleProductLineChange(i, 'description', value)}
+                      pdfMode={pdfMode}
+                    />
+                  </View>
+                  <View className="w-17 p-4-8 pb-10" pdfMode={pdfMode}>
+                    <EditableInput
+                      className="dark right"
+                      value={productLine.quantity}
+                      onChange={(value) => handleProductLineChange(i, 'quantity', value)}
+                      pdfMode={pdfMode}
+                    />
+                  </View>
+                  <View className="w-17 p-4-8 pb-10" pdfMode={pdfMode}>
+                    <EditableInput
+                      className="dark right"
+                      value={productLine.rate}
+                      onChange={(value) => handleProductLineChange(i, 'rate', value)}
+                      pdfMode={pdfMode}
+                    />
+                  </View>
+                  <View className="w-18 p-4-8 pb-10" pdfMode={pdfMode}>
+                    <Text className="dark right" pdfMode={pdfMode}>
+                      {calculateAmount(productLine.quantity, productLine.rate)}
+                    </Text>
+                  </View>
+                  {!pdfMode && (
+                    <button
+                      className="link row__remove"
+                      aria-label="Remove Row"
+                      title="Remove Row"
+                      onClick={() => handleRemove(i)}
+                    >
+                      <span className="icon icon-remove bg-red"></span>
+                    </button>
+                  )}
+                </View>
+              )
+            })}
+            <View className="flex" pdfMode={pdfMode}>
+              <View className="w-50 mt-10" pdfMode={pdfMode}>
+                {!pdfMode && (
+                  <button className="link" onClick={handleAdd}>
+                    <span className="icon icon-add bg-green mr-10"></span>
+                    Add Line Item
+                  </button>
+                )}
+              </View>
+              <View className="w-50 mt-20" pdfMode={pdfMode}>
+                <View className="flex" pdfMode={pdfMode}>
+                  <View className="w-50 p-5" pdfMode={pdfMode}>
+                    <EditableInput
+                      value={invoice.subTotalLabel}
+                      onChange={(value) => handleChange('subTotalLabel', value)}
+                      pdfMode={pdfMode}
+                    />
+                  </View>
+                  <View className="w-50 p-5" pdfMode={pdfMode}>
+                    <Text className="right bold dark" pdfMode={pdfMode}>
+                      {subTotal?.toFixed(2)}
+                    </Text>
+                  </View>
+                </View>
+                <View className="flex" pdfMode={pdfMode}>
+                  <View className="w-50 p-5" pdfMode={pdfMode}>
+                    <EditableInput
+                      value={invoice.taxLabel}
+                      onChange={(value) => handleChange('taxLabel', value)}
+                      pdfMode={pdfMode}
+                    />
+                  </View>
+                  <View className="w-50 p-5" pdfMode={pdfMode}>
+                    <Text className="right bold dark" pdfMode={pdfMode}>
+                      {saleTax?.toFixed(2)}
+                    </Text>
+                  </View>
+                </View>
+                <View className="flex bg-gray p-5" pdfMode={pdfMode}>
+                  <View className="w-50 p-5" pdfMode={pdfMode}>
+                    <EditableInput
+                      className="bold"
+                      value={invoice.totalLabel}
+                      onChange={(value) => handleChange('totalLabel', value)}
+                      pdfMode={pdfMode}
+                    />
+                  </View>
+                  <View className="w-50 p-5 flex" pdfMode={pdfMode}>
+                    <EditableInput
+                      className="dark bold right ml-30"
+                      value={invoice.currency}
+                      onChange={(value) => handleChange('currency', value)}
+                      pdfMode={pdfMode}
+                    />
+                    <Text className="right bold dark w-auto" pdfMode={pdfMode}>
+                      {(typeof subTotal !== 'undefined' && typeof saleTax !== 'undefined'
+                        ? subTotal + saleTax
+                        : 0
+                      ).toFixed(2)}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
         </View>
       </Page>
     </Document>
diff --git a/src/data/initialData.ts b/src/data/initialData.ts
index f6cab4e..44e8959 100644
--- a/src/data/initialData.ts
+++ b/src/data/initialData.ts
@@ -13,12 +13,15 @@ export const initialInvoice: Invoice = {
   companyName: '',
   name: '',
   companyAddress: '',
-  companyAddress2: '',
+  companyCity: '',
   companyCountry: 'United States',
+  bankName: '',
+  iban: '',
+  bic: '',
   billTo: 'Bill To:',
   clientName: '',
   clientAddress: '',
-  clientAddress2: '',
+  clientCity: '',
   clientCountry: 'United States',
   invoiceTitleLabel: 'Invoice#',
   invoiceTitle: '',
diff --git a/src/data/types.ts b/src/data/types.ts
index 50b9874..0d2875e 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -20,12 +20,15 @@ export const TInvoice = z.object({
   companyName: z.string(),
   name: z.string(),
   companyAddress: z.string(),
-  companyAddress2: z.string(),
+  companyCity: z.string(),
   companyCountry: z.string(),
+  bankName: z.string(),
+  iban: z.string(),
+  bic: z.string(),
   billTo: z.string(),
   clientName: z.string(),
   clientAddress: z.string(),
-  clientAddress2: z.string(),
+  clientCity: z.string(),
   clientCountry: z.string(),
   invoiceTitleLabel: z.string(),
   invoiceTitle: z.string(),
diff --git a/src/scss/_app.scss b/src/scss/_app.scss
index 677d723..1f129a8 100644
--- a/src/scss/_app.scss
+++ b/src/scss/_app.scss
@@ -42,17 +42,6 @@
   box-shadow: 0 0 17px 0 rgba(16, 40, 73, 0.09);
 }
 
-.invoice-wrapper-my {
-  position: relative;
-  background: #fff;
-  padding: 40px 35px;
-  box-shadow: 0 0 17px 0 rgba(16, 40, 73, 0.09);
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: auto;
-  gap: 15px;
-}
-
 .invoice-container {
   grid-column: span 3; /* Takes up first 3 columns */
   grid-row: 1; /* First row */
@@ -66,7 +55,7 @@
 }
 
 .one-block {
-  height: 24vh;
+  min-height: 24vh;
   /* No need to specify grid-column or grid-row - it will automatically flow */
 }
 
diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss
index b0aaed7..935853d 100644
--- a/src/scss/_layout.scss
+++ b/src/scss/_layout.scss
@@ -5,6 +5,15 @@
 .flex {
   display: flex;
 }
+.grid {
+  display: grid;
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+.gap-3 {
+  gap: 12px;
+}
 
 .w-auto {
   width: auto !important;
@@ -45,6 +54,27 @@
 .w-18 {
   width: 18%;
 }
+.col-span-1 {
+  grid-column: span 1;
+}
+.col-span-2 {
+  grid-column: span 2;
+}
+.col-span-3 {
+  grid-column: span 3;
+}
+.col-span-4 {
+  grid-column: span 4;
+}
+.text-right {
+  text-align: right;
+}
+.justify-end {
+  align-items: flex-end;
+}
+.flex-col {
+  flex-direction: column;
+}
 
 .row {
   position: relative;