diff --git a/btc-UI/src/app/components/middle-section/middle-section.component.html b/btc-UI/src/app/components/middle-section/middle-section.component.html
index bc1d10b..5e805a7 100755
--- a/btc-UI/src/app/components/middle-section/middle-section.component.html
+++ b/btc-UI/src/app/components/middle-section/middle-section.component.html
@@ -22,7 +22,7 @@
             <col style="width: 65%" />
           </colgroup>
           <tbody>
-            <tr *ngFor="let row of summaryRows">
+            <tr *ngFor="let row of summaryRows | slice:0:4">
               <td class="custom-cell pure-white"></td>
               <td class="custom-cell pure-white"></td>
               <td class="custom-cell pure-white"></td>
@@ -47,7 +47,7 @@
           <col style="width: 18%" />
         </colgroup>
         <tbody>
-          <tr *ngFor="let row of rows">
+          <tr *ngFor="let row of rows  | slice:0:5">
             <td class="custom-cell-new"></td>
             <td class="custom-cell-new"></td>
             <td class="custom-cell-new"></td>
diff --git a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css
index 90851e6..b4bd4a9 100755
--- a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css
+++ b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css
@@ -420,4 +420,59 @@ button {
 .calc-backspace-btn{
 margin-right: -120px;
   background-color: #0077b6;
-}
\ No newline at end of file
+}
+
+/* 🔹 Highlight selected label */
+.selected-label {
+  box-shadow: 0 0 0 3px #3a8dd5 inset;
+  background-color: #1d4f91 !important;
+  color: #fff !important;
+}
+
+/* 🔹 Highlight selected number */
+.selected-number {
+  background-color: #b34d4d !important;
+  color: #fff !important;
+  font-weight: bold;
+}
+
+/* 🔹 Disabled state for label and number buttons */
+button[disabled] {
+  opacity: 0.4 !important;
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}
+
+/* 🔹 Pad value display */
+.pad-value-preview {
+  text-align: center;
+  font-size: 1.4rem;
+  font-weight: bold;
+  padding: 0.5rem 0;
+  color: #1d1d1d;
+  background-color: #f9f9f9;
+  border: 1px solid #ccc;
+  margin-bottom: 1rem;
+  border-radius: 8px;
+}
+
+/* 🔹 Active numeric pad key (optional if needed) */
+.active-pad-key {
+  background-color: #007bff !important;
+  color: white;
+}
+
+/* 🔹 Print button enabled effect */
+button.ready-to-print {
+  background-color: #28a745 !important;
+  border-color: #28a745 !important;
+  color: white !important;
+  font-weight: bold;
+}
+
+/* 🔹 Error state (optional for input validation) */
+.input-error {
+  border: 2px solid #dc3545 !important;
+  background-color: #f8d7da !important;
+  color: #721c24;
+}
diff --git a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html
index 7fd7dd0..8415d20 100755
--- a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html
+++ b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html
@@ -2,9 +2,7 @@
 <div class="touch-pad-container scrollable-touchpad">
   <!-- 🔘 Top Button Section (Responsive Wrapper) -->
   <div class="container-fluid mb-2">
-    <div
-      class="d-flex flex-wrap justify-content-center gap-2 flex-md-nowrap flex-column flex-md-row align-items-md-center wrap_one"
-    >
+    <div class="d-flex flex-wrap justify-content-center gap-2 flex-md-nowrap flex-column flex-md-row align-items-md-center wrap_one">
       <!-- Left Group: CALC, ERASE, BOX, FIELD -->
       <div class="d-flex flex-wrap justify-content-center gap-2 first">
         <button class="btn btn-dark one" (click)="openCalculator()">CALC</button>
@@ -27,24 +25,10 @@
     <div class="row gx-2 gy-2 wrapper">
       <!-- Label Section -->
       <div class="col-3">
-        <div
-          class="p-2 rounded wrapper-pad"
-          [ngStyle]="{
-            'background-color': ticketingActive ? '#d0ddf5' : '#f1f1f1df',
-            border: ticketingActive ? '3px solid #050505' : 'none'
-          }"
-        >
+        <div class="p-2 rounded wrapper-pad" [ngStyle]="{ 'background-color': ticketingActive ? '#d0ddf5' : '#f1f1f1df', border: ticketingActive ? '3px solid #050505' : 'none' }">
           <div class="row gx-1 gy-1 custom-touchpad">
-            <div
-              class="col-4"
-              *ngFor="let label of labelRowsFlat; let i = index"
-            >
-              <button
-                class="btn w-100 number-button"
-                [ngClass]="'btn-color-' + i"
-              >
-                {{ label }}
-              </button>
+            <div class="col-4" *ngFor="let label of labelRowsFlat; let i = index">
+              <button class="btn w-100 number-button" [ngClass]="'btn-color-' + i" [disabled]="!!selectedLabel" (click)="selectLabel(label)">{{ label }}</button>
             </div>
           </div>
         </div>
@@ -52,67 +36,45 @@
 
       <!-- Numbers 1 to 30 -->
       <div class="col-7">
-        <div
-          class="p-2 rounded wrapper-pad"
-          style="background-color: #f1f1f1df"
-        >
+        <div class="p-2 rounded wrapper-pad" style="background-color: #f1f1f1df">
           <div class="row gx-1 gy-1 custom-touchpad">
-            <div class="col-2" *ngFor="let number of numbersFlat">
-              <button class="btn btn-light w-100 number-button">
-                {{ number }}
-              </button>
-            </div>
+            <!-- Inside Number Pad Section -->
+<div class="col-2" *ngFor="let number of numbersFlat">
+  <button
+    class="btn btn-light w-100 number-button"
+    [disabled]="!selectedLabel || isNumberDisabled(number)"
+    (click)="selectNumber(number)"
+  >
+    {{ number }}
+  </button>
+</div>
+
           </div>
         </div>
       </div>
 
       <!-- Numeric Pad -->
       <div class="col-2 column">
-        <div
-          class="p-2 rounded wrapper-pad"
-          style="background-color: #f1f1f1df"
-        >
+        <div class="p-2 rounded wrapper-pad" style="background-color: #f1f1f1df">
           <div class="row gx-1 gy-1 custom-touchpad">
             <div class="col-6">
-              <button class="btn btn-secondary w-100 number-button">0</button>
+              <button class="btn btn-secondary w-100 number-button" [disabled]="!numericPadEnabled" (click)="enterPadVal('0')">0</button>
             </div>
             <div class="col-6">
-              <button class="btn btn-light w-100 number-button">X</button>
+              <button class="btn btn-light w-100 number-button" [disabled]="!numericPadEnabled" (click)="enterPadVal('X')">X</button>
             </div>
 
-            <ng-container *ngFor="let key of ['7', '8', '9']">
+            <ng-container *ngFor="let key of ['7', '8', '9', '4', '5', '6', '1', '2', '3']">
               <div class="col-4">
-                <button class="btn btn-light w-100 number-button">
-                  {{ key }}
-                </button>
-              </div>
-            </ng-container>
-
-            <ng-container *ngFor="let key of ['4', '5', '6']">
-              <div class="col-4">
-                <button class="btn btn-light w-100 number-button">
-                  {{ key }}
-                </button>
-              </div>
-            </ng-container>
-
-            <ng-container *ngFor="let key of ['1', '2', '3']">
-              <div class="col-4">
-                <button class="btn btn-light w-100 number-button">
-                  {{ key }}
-                </button>
+                <button class="btn btn-light w-100 number-button" [disabled]="!numericPadEnabled" (click)="enterPadVal(key)">{{ key }}</button>
               </div>
             </ng-container>
 
             <div class="col-6">
-              <button class="btn btn-secondary w-100 number-button">
-                Enter
-              </button>
+              <button class="btn btn-secondary w-100 number-button" [disabled]="!numericPadEnabled" (click)="padEnter()">Enter</button>
             </div>
             <div class="col-6">
-              <button class="btn btn-secondary w-100 number-button">
-                Print
-              </button>
+              <button class="btn btn-secondary w-100 number-button" [disabled]="!canPrint" (click)="print()">Print</button>
             </div>
           </div>
         </div>
@@ -121,23 +83,13 @@
   </div>
 
   <!-- 🧮 Calculator Modal -->
-  <div
-    id="calculatorModal"
-    class="calculator-modal"
-    [style.display]="calculatorOpen ? 'block' : 'none'"
-  >
+  <div id="calculatorModal" class="calculator-modal" [style.display]="calculatorOpen ? 'block' : 'none'">
     <div class="calculator-content">
       <div class="calculator-header">
         <span class="close-btn" (click)="closeCalculator()">&times;</span>
         <h5>Calculator</h5>
       </div>
-      <input
-        type="text"
-        id="calc-display"
-        class="calc-display"
-        [value]="calcDisplay"
-        disabled
-      />
+      <input type="text" id="calc-display" class="calc-display" [value]="calcDisplay" disabled />
 
       <div class="calc-buttons">
         <button (click)="press('7')">7</button>
@@ -165,4 +117,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts
index fb1498b..d4f845b 100755
--- a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts
+++ b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts
@@ -20,12 +20,14 @@ export class TouchPadMenuComponent implements OnInit {
   ];
 
   numbers: number[] = Array.from({ length: 30 }, (_, i) => i + 1);
-  calcKeys: string[] = ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '←', 'CLR'];
-
   labelRowsFlat: string[] = [];
   numbersFlat: number[] = [];
 
-  // Calculator modal state
+  selectedLabel: string | null = null;
+  selectedNumbers: number[] = [];
+  padValue: string = '';
+  canPrint = false;
+
   calculatorOpen = false;
   calcDisplay = '';
 
@@ -42,8 +44,8 @@ export class TouchPadMenuComponent implements OnInit {
     return this.chunk(this.numbers, 6);
   }
 
-  get calcKeyRows() {
-    return this.chunk(this.calcKeys, 3);
+  get numericPadEnabled() {
+    return this.selectedLabel !== null && this.selectedNumbers.length > 0;
   }
 
   private chunk<T>(array: T[], size: number): T[][] {
@@ -52,7 +54,56 @@ export class TouchPadMenuComponent implements OnInit {
     );
   }
 
-  // Calculator methods
+  selectLabel(label: string) {
+    this.selectedLabel = label;
+    this.selectedNumbers = [];
+    this.padValue = '';
+    this.canPrint = false;
+  }
+
+  selectNumber(number: number) {
+    if (!this.selectedLabel) return;
+    if (!this.selectedNumbers.includes(number)) {
+      this.selectedNumbers.push(number);
+      this.padValue = '';
+      this.canPrint = false;
+    }
+  }
+
+  isNumberDisabled(number: number) {
+    return this.selectedNumbers.includes(number);
+  }
+
+  enterPadVal(key: string) {
+    if (!this.numericPadEnabled) return;
+    if (/[0-9]/.test(key)) {
+      this.padValue += key;
+    } else if (key === 'X') {
+      this.padValue += 'X';
+    }
+    this.updateCanPrint();
+  }
+
+  updateCanPrint() {
+    this.canPrint = this.padValue.trim().length > 0;
+  }
+
+  padEnter() {
+    // Optional action on enter
+  }
+
+  print() {
+    alert(`Printing: Label=${this.selectedLabel}, Numbers=${this.selectedNumbers.join(', ')}, Value=${this.padValue}`);
+    this.resetSelections();
+  }
+
+  resetSelections() {
+    this.selectedLabel = null;
+    this.selectedNumbers = [];
+    this.padValue = '';
+    this.canPrint = false;
+  }
+
   openCalculator() {
     this.calculatorOpen = true;
     this.calcDisplay = '';
@@ -72,11 +123,9 @@ export class TouchPadMenuComponent implements OnInit {
   }
 
   backspace() {
-    if (this.calcDisplay === 'Error') {
-      this.calcDisplay = '';
-    } else {
-      this.calcDisplay = this.calcDisplay.slice(0, -1);
-    }
+    this.calcDisplay = this.calcDisplay === 'Error'
+      ? ''
+      : this.calcDisplay.slice(0, -1);
   }
 
   calculate() {