yqni13 · yqni13 · May 11, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,15 @@
 ## 📜 $\textsf{\color{salmon}{List\ of\ updates}}$
 
+### $\textsf{\color{skyblue}2026/05/11}$
+
+$\textsf{[v2.0.8\ =>\ {\textbf{\color{brown}v2.0.9}]}}$ app
+- $\textsf{\color{orange}Patch:}$ Updated email format by adding html structure with inline styling.
+
+<br>
+
 ### $\textsf{\color{skyblue}2026/04/29}$
 
-$\textsf{[v2.0.7\ =>\ {\textbf{\color{brown}v2.0.8}]}}$ app
+$\textsf{[v2.0.7\ =>\ v2.0.8]}$ app
 - $\textsf{\color{orange}Patch:}$ Updated hero button navigating to page 'service' instead 'about'.
 
 <br>

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # yqni13 | $\texttt{\color{seagreen}{TAXI-VARGA}}$
-### $\textsf{\color{brown}{v2.0.8}}$
+### $\textsf{\color{brown}{v2.0.9}}$
 
 <br><br>
 
@@ -236,14 +236,13 @@ $ npm run lint
 ## 📈 $\textsf{\color{salmon}Updates}$
 [see changelog for all updates](CHANGELOG.md)
 
-$\textsf{[v2.0.7\ =>\ {\textbf{\color{brown}v2.0.8}]}}$ app
-- $\textsf{\color{orange}Patch:}$ Updated hero button navigating to page 'service' instead 'about'.
+$\textsf{[v2.0.8\ =>\ {\textbf{\color{brown}v2.0.9}]}}$ app
+- $\textsf{\color{orange}Patch:}$ Updated email format by adding html structure with inline styling.
 
 <br>
 
 ### Aimed objectives for next $\textsf{\color{green}minor}$ update:
 <dl>
-    <dd>- update email format</dd>
     <dd>- update token handling (refresh token)</dd>
     <dd>- update logging & exception handling (client side)</dd>
     <dd>- add testing (frontend)</dd>

diff --git a/backend/src/models/mailing.model.js b/backend/src/models/mailing.model.js
@@ -28,14 +28,14 @@ class MailingModel {
                 to: Secrets.EMAIL_RECEIVER,
                 replyTo: sender,
                 subject: subject,
-                text: msgRequest
+                html: this.mapEmailStructure(msgRequest)
             };
 
             const mailOptionsConfirm = {
                 from: Secrets.EMAIL_SENDER,
                 to: sender,
                 subject: 'taxi-varga, request received',
-                text: msgConfirm
+                html: this.mapEmailStructure(msgConfirm)
             }
 
             const sendRequest = await this.wrapedSendMail(mailOptionsRequest, Secrets.EMAIL_SENDER, Secrets.EMAIL_PASS);
@@ -223,6 +223,49 @@ class MailingModel {
 
         return msgOutput;
     }
+
+    mapEmailStructure(content) {
+        const headImgPath = '';
+        const footerImgPath = '';
+        return `
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <style>
+                    body {
+                        margin: 0;
+                        padding: 0;
+                        font-family: Arial, sans-serif;
+                        background-color: #f4f4f4;
+                    }
+                    .email-container {
+                        .head,
+                        .footer {
+                            width: auto;
+                            height: 20%;
+                        }
+                        .text p {
+                            white-space: pre-line;
+                        }
+                    }
+                </style>
+            </head>
+            <body>
+                <div class="email-container">
+                    <div class="head">
+                        <img src="${headImgPath}" alt="head-logo">
+                    </div>
+                    <div class="text">
+                        <p>${content}</p>
+                    </div>
+                    <div class="footer">
+                        <img src="${footerImgPath}" alt="footer-logo">
+                    </div>
+                </div>
+            </body>
+        </html>
+        `;
+    }
 }
 
 module.exports = new MailingModel();
diff --git a/backend/src/models/meta.model.js b/backend/src/models/meta.model.js
@@ -16,7 +16,7 @@ class MetaModel {
             "author": "yqni13",
             "environment": Secrets.MODE,
             "maintenance-code": Secrets.MAINTENANCE_CODE,
-            "version": "2.0.8",
+            "version": "2.0.9",
         };
     }
 }

diff --git a/backend/tests/unit-tests/models/mailing/mailing.models.test.js b/backend/tests/unit-tests/models/mailing/mailing.models.test.js
@@ -24,4 +24,18 @@ describe('Mailing tests, priority: sendMail', () => {
                 .rejects.toThrow(expectExceptionResult);
         })
     })
+})
+
+describe('Mailing tests, priority: fn mapEmailStructure()', () => {
+
+    describe('Testing valid fn calls', () => {
+
+        test('Map text to new HTML structure for email', () => {
+            const mockParam_content = 'I am demo text.';
+            const testFn = mailingModel.mapEmailStructure(mockParam_content);
+
+            console.log("mapEmailStructure: ", testFn);
+            expect(testFn).toContain('<!DOCTYPE html>');
+        })
+    })
 })
diff --git a/frontend/src/app/common/components/form-components/select-input/select-input.component.html b/frontend/src/app/common/components/form-components/select-input/select-input.component.html
@@ -6,19 +6,16 @@
 			(change)="selectOption($event)"
 			ngClass="{{formControl.errors && !isFocused ? 'tava-input-padding-error' : 'tava-input-padding-base'}}"
 		>
-		<option value="" disabled>{{placeholder}}</option>
-		<hr>
-		@for (option of options | keyvalue; track option.key) {
-			<option
-				value="{{option.value}}"
-			>{{optionsTranslateRoot + (option.key).toString() | translate}}</option>
-		}
+			<option value="" disabled>{{placeholder}}</option>
+			<hr>
+			@for (option of options | keyvalue; track option.key) {
+				<option value="{{option.value}}">
+					{{optionsTranslateRoot + (option.key).toString() | translate}}
+				</option>
+			}
 		</select>
 		@if (!isFocused && formControl.invalid && (formControl.dirty || formControl.touched)) {
-			<i
-			class="icon-warning icon-base"
-			id="error-icon"
-			></i>
+			<i class="icon-warning icon-base" id="error-icon"></i>
 		}
 	</div>
 	@if (!isFocused) {

diff --git a/frontend/src/app/modules/imprint/imprint.component.ts b/frontend/src/app/modules/imprint/imprint.component.ts
@@ -37,7 +37,7 @@ export class ImprintComponent implements OnInit, OnDestroy {
 
         this.devData = {
             project: 'taxi-varga',
-            version: 'v2.0.8',
+            version: 'v2.0.9',
             github: 'https://github.com/yqni13/taxi-varga/tree/production',
             portfolio: 'https://yqni13.com',
             contact: BaseRoute.SUPPORT