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 08df19c..d25b28a 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
@@ -89,6 +89,10 @@ export class TouchPadMenuComponent implements OnInit {
 
   get isShashEnterDisabled(): boolean {
     if (this.selectedLabel === 'TAN') {
+      // In box mode, shash enter is always disabled
+      if (this.isBoxed) {
+        return true;
+      }
       return this.tanGroupStage >= 2 || this.tanGroups[this.tanGroupStage].length === 0;
     } else if (this.multiLegLabels.includes(this.selectedLabel || '')) {
       const maxLegs = this.getMaxLegs(this.selectedLabel || '');
@@ -141,6 +145,34 @@ export class TouchPadMenuComponent implements OnInit {
   selectNumber(number: number) {
     if (!this.selectedLabel) return;
 
+    // TAN Box mode: freestyle selection with dash-separated format
+    if (this.selectedLabel === 'TAN' && this.isBoxed) {
+      if (!this.selectedNumbers.includes(number)) {
+        // Extract current numbers (excluding dashes)
+        const currentNumbers = this.selectedNumbers.filter(n => typeof n === 'number') as number[];
+        const allBoxed = [...currentNumbers, number];
+        // Split into 3 roughly equal groups for display consistency
+        const groupSize = Math.ceil(allBoxed.length / 3);
+        const group1 = allBoxed.slice(0, groupSize);
+        const group2 = allBoxed.slice(group1.length, group1.length + groupSize);
+        const group3 = allBoxed.slice(group1.length + group2.length);
+
+        const combined: (number | string)[] = [...group1];
+        if (group2.length) combined.push('-', ...group2);
+        if (group3.length) combined.push('-', ...group3);
+
+        this.selectedNumbers = combined;
+
+        this.selectionService.updatePartial({
+          numbers: [...this.selectedNumbers],
+          isBoxed: true,
+          label: 'TAN'
+        });
+      }
+      return;
+    }
+
+    // Original TAN logic (unboxed)
     if (this.selectedLabel === 'TAN') {
       if (!this.tanGroups[this.tanGroupStage].includes(number)) {
         this.tanGroups[this.tanGroupStage].push(number);
@@ -153,6 +185,7 @@ export class TouchPadMenuComponent implements OnInit {
       return;
     }
 
+    // Multi-leg logic (TRE, MJP, JKP)
     if (this.multiLegLabels.includes(this.selectedLabel)) {
       if (!this.multiLegGroups[this.multiLegStage].includes(number)) {
         this.multiLegGroups[this.multiLegStage].push(number);
@@ -161,6 +194,7 @@ export class TouchPadMenuComponent implements OnInit {
       return;
     }
 
+    // FOR/QUI logic
     if (this.twoGroupLabels.includes(this.selectedLabel || '')) {
       if (!this.isFirstGroupComplete) {
         if (!this.firstGroup.includes(number)) {
@@ -177,6 +211,7 @@ export class TouchPadMenuComponent implements OnInit {
       return;
     }
 
+    // Default single-number selection (WIN, SHP, THP, etc.)
     if (!this.selectedNumbers.includes(number)) {
       this.selectedNumbers.push(number);
       this.selectionService.updatePartial({ numbers: [...this.selectedNumbers] });
@@ -194,6 +229,10 @@ export class TouchPadMenuComponent implements OnInit {
   }
 
   isNumberDisabled(number: number): boolean {
+    // For TAN Box mode, allow all numbers to be selectable
+    if (this.selectedLabel === 'TAN' && this.isBoxed) {
+      return false;
+    }
     if (this.selectedLabel === 'TAN' || this.multiLegLabels.includes(this.selectedLabel || '') || this.twoGroupLabels.includes(this.selectedLabel || '')) {
       return false;
     }
@@ -207,6 +246,11 @@ export class TouchPadMenuComponent implements OnInit {
   }
 
   onShashEnter() {
+    // Disable shash enter for TAN Box mode
+    if (this.selectedLabel === 'TAN' && this.isBoxed) {
+      return;
+    }
+
     if (this.selectedLabel === 'TAN') {
       if (this.tanGroupStage < 2) {
         this.tanGroupStage++;
@@ -297,6 +341,12 @@ export class TouchPadMenuComponent implements OnInit {
   toggleBoxMode() {
     this.isBoxed = !this.isBoxed;
     const value = parseFloat(this.padValue) || 0;
+    // For TAN Box mode, reset to freestyle selection
+    if (this.selectedLabel === 'TAN' && this.isBoxed) {
+      this.tanGroupStage = 0;
+      this.tanGroups = [[], [], []];
+      this.selectedNumbers = [];
+    }
     this.selectionService.updatePartial({
       isBoxed: this.isBoxed,
       label: this.selectedLabel || '',
@@ -309,6 +359,33 @@ export class TouchPadMenuComponent implements OnInit {
   removeLastNumber() {
     if (!this.selectedLabel || this.selectedNumbers.length === 0) return;
 
+    // TAN Box mode: remove last number and rebuild dash-separated format
+    if (this.selectedLabel === 'TAN' && this.isBoxed) {
+      const currentNumbers = this.selectedNumbers.filter(n => typeof n === 'number') as number[];
+      if (currentNumbers.length > 0) {
+        currentNumbers.pop();
+        // Rebuild dash-separated structure
+        const groupSize = Math.ceil(currentNumbers.length / 3);
+        const group1 = currentNumbers.slice(0, groupSize);
+        const group2 = currentNumbers.slice(group1.length, group1.length + groupSize);
+        const group3 = currentNumbers.slice(group1.length + group2.length);
+
+        const combined: (number | string)[] = [...group1];
+        if (group2.length) combined.push('-', ...group2);
+        if (group3.length) combined.push('-', ...group3);
+
+        this.selectedNumbers = combined;
+
+        this.selectionService.updatePartial({
+          numbers: [...this.selectedNumbers],
+          isBoxed: true,
+          label: 'TAN'
+        });
+      }
+      return;
+    }
+
+    // Original TAN logic (unboxed)
     if (this.selectedLabel === 'TAN') {
       const currentGroup = this.tanGroups[this.tanGroupStage];
       if (currentGroup.length > 0) {
@@ -322,6 +399,7 @@ export class TouchPadMenuComponent implements OnInit {
       return;
     }
 
+    // Multi-leg logic
     if (this.multiLegLabels.includes(this.selectedLabel)) {
       const currentGroup = this.multiLegGroups[this.multiLegStage];
       if (currentGroup.length > 0) {
@@ -331,6 +409,7 @@ export class TouchPadMenuComponent implements OnInit {
       return;
     }
 
+    // FOR/QUI logic
     if (this.twoGroupLabels.includes(this.selectedLabel)) {
       if (!this.isFirstGroupComplete && this.firstGroup.length > 0) {
         this.firstGroup.pop();
@@ -343,6 +422,7 @@ export class TouchPadMenuComponent implements OnInit {
       return;
     }
 
+    // Default single-number removal
     this.selectedNumbers.pop();
     this.selectionService.updatePartial({ numbers: [...this.selectedNumbers] });
   }