diff --git a/CHANGELOG.md b/CHANGELOG.md
index eebd9f5..8c53bcd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 > All notable changes to this project will be documented in this file.
 
+## [0.7.1] - 2022-11-06
+
+- Use select instead of inputs in transportation problem tabs
+- Fix assignment problem page styles
+- Fix spelling on the home page & and add new example
+- Fix white background at the top in Safari browsers
+
 ## [0.7.0] - 2022-10-30
 
 - Add second phase support for transportation problem on API and UI side
diff --git a/apps/frontend/src/app/pages/assignment-problem/assignment-problem.style.scss b/apps/frontend/src/app/pages/assignment-problem/assignment-problem.style.scss
index d31c4bc..69a4e01 100644
--- a/apps/frontend/src/app/pages/assignment-problem/assignment-problem.style.scss
+++ b/apps/frontend/src/app/pages/assignment-problem/assignment-problem.style.scss
@@ -1,7 +1,31 @@
 @import 'libs/shared/styles/colors';
 
-form {
-  padding: 16px env(safe-area-inset-right) 16px 16px;
+:host {
+  .content-wrapper {
+    padding: 8px calc(env(safe-area-inset-right) + 8px) 8px 8px;
+  }
+
+  section {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+    article {
+      display: flex;
+      flex-direction: column;
+    }
+
+    article.assignment-table-wrapper {
+      display: grid;
+      padding: 8px;
+      overflow-x: auto;
+    }
+  }
+
+  mat-form-field {
+    margin: 8px;
+  }
 
   mat-hint {
     display: block;
@@ -13,20 +37,17 @@ form {
     }
   }
 
-  .assignment-table-wrapper {
-    padding: 8px 0;
-    overflow-y: auto;
+  button[type='submit'] {
+    margin: 8px;
   }
-}
-
-button[type='submit'] {
-  margin: 8px 16px 0 0;
-}
 
-.wrapper {
-  padding-bottom: 16px;
-}
+  .wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 8px;
+  }
 
-.result-table {
-  padding: 8px;
+  .result-table {
+    padding: 8px 0;
+  }
 }
diff --git a/apps/frontend/src/app/pages/assignment-problem/assignment-problem.template.html b/apps/frontend/src/app/pages/assignment-problem/assignment-problem.template.html
index e80a8d4..04ab75a 100644
--- a/apps/frontend/src/app/pages/assignment-problem/assignment-problem.template.html
+++ b/apps/frontend/src/app/pages/assignment-problem/assignment-problem.template.html
@@ -1,4 +1,4 @@
-<form>
+<div class="content-wrapper">
   <div class="wrapper">
     <info-card
       type="warning"
@@ -8,49 +8,55 @@
       {{'ASSIGNMENT_PROBLEM.PAGE_INFO.CONTENT' | translate}}
     </info-card>
   </div>
-  <mat-form-field appearance="outline">
-    <mat-label
-      >{{ 'ASSIGNMENT_PROBLEM.TABLE_SIZE_SELECT' | translate }}</mat-label
-    >
-    <mat-select [value]="6" #tableSize>
-      <mat-option [value]="3">3</mat-option>
-      <mat-option [value]="4">4</mat-option>
-      <mat-option [value]="5">5</mat-option>
-      <mat-option [value]="6">6</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <div class="assignment-table-wrapper">
-    <opres-input-table
-      key="assignment"
-      [rows]="tableSize.value"
-      [columns]="tableSize.value"
-      [tableSource]="mockedAssignment"
-      (tableChange)="onTableChange($event)"
-    ></opres-input-table>
+  <form>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label
+          >{{ 'ASSIGNMENT_PROBLEM.TABLE_SIZE_SELECT' | translate }}</mat-label
+        >
+        <mat-select [value]="6" #tableSize>
+          <mat-option [value]="3">3</mat-option>
+          <mat-option [value]="4">4</mat-option>
+          <mat-option [value]="5">5</mat-option>
+          <mat-option [value]="6">6</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <article class="assignment-table-wrapper">
+        <opres-input-table
+          key="assignment"
+          [rows]="tableSize.value"
+          [columns]="tableSize.value"
+          [tableSource]="mockedAssignment"
+          (tableChange)="onTableChange($event)"
+        ></opres-input-table>
+      </article>
+    </section>
+    <section>
+      <button
+        mat-flat-button
+        color="primary"
+        type="submit"
+        (click)="onCalculate($event)"
+      >
+        {{ 'CALCULATE_BUTTON' | translate }}
+      </button>
+      <button
+        mat-flat-button
+        color="primary"
+        type="button"
+        (click)="onAssignmentTableClear()"
+      >
+        {{ 'TABLE_CLEAR_BUTTON' | translate }}
+      </button>
+    </section>
+  </form>
+  <div class="result-table" *ngIf="{result: result$ | async} as sub">
+    <p *ngIf="sub?.result?.length">
+      {{'ASSIGNMENT_PROBLEM.RESULT_INFO' | translate}}
+    </p>
+    <opres-table
+      *ngIf="sub?.result?.length"
+      [tableSource]="sub.result || []"
+    ></opres-table>
   </div>
-  <button
-    mat-flat-button
-    color="primary"
-    type="submit"
-    (click)="onCalculate($event)"
-  >
-    {{ 'CALCULATE_BUTTON' | translate }}
-  </button>
-  <button
-    mat-flat-button
-    color="primary"
-    type="button"
-    (click)="onAssignmentTableClear()"
-  >
-    {{ 'TABLE_CLEAR_BUTTON' | translate }}
-  </button>
-</form>
-<div class="result-table" *ngIf="{result: result$ | async} as sub">
-  <p *ngIf="sub?.result?.length">
-    {{'ASSIGNMENT_PROBLEM.RESULT_INFO' | translate}}
-  </p>
-  <opres-table
-    *ngIf="sub?.result?.length"
-    [tableSource]="sub.result || []"
-  ></opres-table>
 </div>
diff --git a/apps/frontend/src/app/pages/home/home.template.html b/apps/frontend/src/app/pages/home/home.template.html
index 18a46ef..8be5a48 100644
--- a/apps/frontend/src/app/pages/home/home.template.html
+++ b/apps/frontend/src/app/pages/home/home.template.html
@@ -30,7 +30,17 @@ <h3>{{'HOME.HELPERS_LIST.TRANSPORTATION_PR.ALL' | translate}}</h3>
       <img
         class="mat-elevation-z12 sample-img-right"
         src="../../../assets/home/transport-problem/all-tab.example.png"
-        alt="Transportation page example"
+        alt="Transportation page all tab example"
+      />
+    </section>
+    <section>
+      <h3>
+        {{'HOME.HELPERS_LIST.TRANSPORTATION_PR.SECOND_PHASE' | translate}}
+      </h3>
+      <img
+        class="mat-elevation-z12 sample-img-left"
+        src="../../../assets/home/transport-problem/second-phase-tab.example.png"
+        alt="Transportation page second phase tab example"
       />
     </section>
     <section>
@@ -38,7 +48,7 @@ <h3>{{'HOME.HELPERS_LIST.TRANSPORTATION_PR.EPSILON' | translate}}</h3>
       <img
         class="mat-elevation-z12 sample-img-left"
         src="../../../assets/home/transport-problem/epsilon-tab.example.png"
-        alt="Transportation page example"
+        alt="Transportation page epsilon tab example"
       />
     </section>
   </div>
diff --git a/apps/frontend/src/app/pages/transport-problem/+first-phase-result-input/first-phase-result-input.template.html b/apps/frontend/src/app/pages/transport-problem/+first-phase-result-input/first-phase-result-input.template.html
index 11d2842..cc2e658 100644
--- a/apps/frontend/src/app/pages/transport-problem/+first-phase-result-input/first-phase-result-input.template.html
+++ b/apps/frontend/src/app/pages/transport-problem/+first-phase-result-input/first-phase-result-input.template.html
@@ -12,29 +12,37 @@
               >{{'TRANSPORTATION_PROBLEM.COLUMNS_SELECT' |
               translate}}</mat-label
             >
-            <input
-              matInput
-              type="number"
-              min="3"
-              max="8"
-              formControlName="shops"
+            <mat-select
+              matNativeControl
+              required
               data-test-id="number-of-shops-input"
-              [defaultValue]="4"
-            />
+              formControlName="shops"
+            >
+              <mat-option [value]="3">3</mat-option>
+              <mat-option [value]="4">4</mat-option>
+              <mat-option [value]="5">5</mat-option>
+              <mat-option [value]="6">6</mat-option>
+              <mat-option [value]="7">7</mat-option>
+              <mat-option [value]="8">8</mat-option>
+            </mat-select>
           </mat-form-field>
           <mat-form-field appearance="outline">
             <mat-label
               >{{'TRANSPORTATION_PROBLEM.ROWS_SELECT' | translate}}</mat-label
             >
-            <input
-              matInput
-              type="number"
-              min="3"
-              max="8"
-              formControlName="storages"
+            <mat-select
+              matNativeControl
+              required
               data-test-id="number-of-storages-input"
-              [defaultValue]="4"
-            />
+              formControlName="storages"
+            >
+              <mat-option [value]="3">3</mat-option>
+              <mat-option [value]="4">4</mat-option>
+              <mat-option [value]="5">5</mat-option>
+              <mat-option [value]="6">6</mat-option>
+              <mat-option [value]="7">7</mat-option>
+              <mat-option [value]="8">8</mat-option>
+            </mat-select>
           </mat-form-field>
         </article>
         <opres-input-table
diff --git a/apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.component.spec.ts b/apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.component.spec.ts
index ad98322..dc43f1c 100644
--- a/apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.component.spec.ts
+++ b/apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.component.spec.ts
@@ -3,7 +3,6 @@ import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {HttpClientModule} from '@angular/common/http';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatButtonHarness} from '@angular/material/button/testing';
-import {MatInputHarness} from '@angular/material/input/testing';
 import {MatSelectHarness} from '@angular/material/select/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -57,23 +56,29 @@ describe('AllTabComponent', () => {
   });
 
   it('should change number of shops', async () => {
-    const input = await loader.getHarness(
-      MatInputHarness.with({
+    const shopSelect = await loader.getHarness(
+      MatSelectHarness.with({
         selector: '[data-test-id="number-of-shops-input"]',
       }),
     );
-    await input.setValue('3');
-    expect(component.formGroup.get('shops')?.value).toEqual(3);
+    await shopSelect.open();
+    const storageSizes = await shopSelect.getOptions();
+    expect(storageSizes.length).toEqual(6);
+    expect(await storageSizes[0].getText()).toEqual('3');
+    expect(await storageSizes[5].getText()).toEqual('8');
   });
 
   it('should change number of storages', async () => {
-    const input = await loader.getHarness(
-      MatInputHarness.with({
+    const storageSelect = await loader.getHarness(
+      MatSelectHarness.with({
         selector: '[data-test-id="number-of-storages-input"]',
       }),
     );
-    await input.setValue('3');
-    expect(component.formGroup.get('storages')?.value).toEqual(3);
+    await storageSelect.open();
+    const storageSizes = await storageSelect.getOptions();
+    expect(storageSizes.length).toEqual(6);
+    expect(await storageSizes[0].getText()).toEqual('3');
+    expect(await storageSizes[5].getText()).toEqual('8');
   });
 
   it('should check method options', async () => {
diff --git a/apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.template.html b/apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.template.html
index 888c709..ca17496 100644
--- a/apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.template.html
+++ b/apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.template.html
@@ -15,29 +15,37 @@
         <mat-label
           >{{'TRANSPORTATION_PROBLEM.COLUMNS_SELECT' | translate}}</mat-label
         >
-        <input
-          matInput
-          type="number"
-          min="3"
-          max="8"
-          formControlName="shops"
+        <mat-select
+          matNativeControl
+          required
           data-test-id="number-of-shops-input"
-          [defaultValue]="4"
-        />
+          formControlName="shops"
+        >
+          <mat-option [value]="3">3</mat-option>
+          <mat-option [value]="4">4</mat-option>
+          <mat-option [value]="5">5</mat-option>
+          <mat-option [value]="6">6</mat-option>
+          <mat-option [value]="7">7</mat-option>
+          <mat-option [value]="8">8</mat-option>
+        </mat-select>
       </mat-form-field>
       <mat-form-field appearance="outline">
         <mat-label
           >{{'TRANSPORTATION_PROBLEM.ROWS_SELECT' | translate}}</mat-label
         >
-        <input
-          matInput
-          type="number"
-          min="3"
-          max="8"
-          formControlName="storages"
+        <mat-select
+          matNativeControl
+          required
           data-test-id="number-of-storages-input"
-          [defaultValue]="4"
-        />
+          formControlName="storages"
+        >
+          <mat-option [value]="3">3</mat-option>
+          <mat-option [value]="4">4</mat-option>
+          <mat-option [value]="5">5</mat-option>
+          <mat-option [value]="6">6</mat-option>
+          <mat-option [value]="7">7</mat-option>
+          <mat-option [value]="8">8</mat-option>
+        </mat-select>
       </mat-form-field>
       <mat-form-field appearance="outline">
         <mat-label
diff --git a/apps/frontend/src/app/pages/transport-problem/+tabs/epsilon-tab/epsilon.tab.component.ts b/apps/frontend/src/app/pages/transport-problem/+tabs/epsilon-tab/epsilon.tab.component.ts
index 050202f..fa1c8da 100644
--- a/apps/frontend/src/app/pages/transport-problem/+tabs/epsilon-tab/epsilon.tab.component.ts
+++ b/apps/frontend/src/app/pages/transport-problem/+tabs/epsilon-tab/epsilon.tab.component.ts
@@ -16,7 +16,7 @@ import {
 @Component({
   selector: 'epsilon-tab',
   templateUrl: './epsilon.tab.template.html',
-  styleUrls: ['../tabs.style.scss', './epsilon.tab.style.scss'],
+  styleUrls: ['../tabs.style.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EpsilonTabComponent implements OnDestroy {
diff --git a/apps/frontend/src/app/pages/transport-problem/+tabs/epsilon-tab/epsilon.tab.style.scss b/apps/frontend/src/app/pages/transport-problem/+tabs/epsilon-tab/epsilon.tab.style.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/apps/frontend/src/assets/home/transport-problem/second-phase-tab.example.png b/apps/frontend/src/assets/home/transport-problem/second-phase-tab.example.png
new file mode 100644
index 0000000..5c6bfa9
Binary files /dev/null and b/apps/frontend/src/assets/home/transport-problem/second-phase-tab.example.png differ
diff --git a/apps/frontend/src/assets/i18n/en.json b/apps/frontend/src/assets/i18n/en.json
index c37dd9c..4157286 100644
--- a/apps/frontend/src/assets/i18n/en.json
+++ b/apps/frontend/src/assets/i18n/en.json
@@ -27,15 +27,16 @@
     "HELPERS_LIST": {
       "TRANSPORTATION_PR": {
         "TITLE": "Transportation problem",
-        "ALL": "Need all steps?",
-        "EPSILON": "If only the epsilon is needed"
+        "ALL": "Need both first and second phase steps?",
+        "EPSILON": "If only the epsilon is needed",
+        "SECOND_PHASE": "If only the second phase is needed"
       },
       "ASSIGNMENT_PR": "Assignment problem",
       "OTHERS_SOON": "And more coming soon..."
     },
     "FEATURE_LIST_TITLE": "Other smaller features",
     "FEATURE_LIST": {
-      "LANGUAGES": "You can choose between english & hungarian",
+      "LANGUAGES": "You can choose between English & Hungarian",
       "THEMES": "You can set your preferred theme"
     },
     "SUPPORT": {
diff --git a/apps/frontend/src/assets/i18n/hu.json b/apps/frontend/src/assets/i18n/hu.json
index d362d34..8890eb9 100644
--- a/apps/frontend/src/assets/i18n/hu.json
+++ b/apps/frontend/src/assets/i18n/hu.json
@@ -27,8 +27,9 @@
     "HELPERS_LIST": {
       "TRANSPORTATION_PR": {
         "TITLE": "Szállítási probléma",
-        "ALL": "Az összes lépés kell?",
-        "EPSILON": "Ha csak az epszilon kell"
+        "ALL": "Kellenek az első és második fázis lépései?",
+        "EPSILON": "Ha csak az epszilon kell",
+        "SECOND_PHASE": "Ha csak a második fázis kell"
       },
       "ASSIGNMENT_PR": "Hozzárendelési probléma",
       "OTHERS_SOON": "És még több hamarosan..."
diff --git a/apps/frontend/src/styles.scss b/apps/frontend/src/styles.scss
index 8561a10..d245794 100644
--- a/apps/frontend/src/styles.scss
+++ b/apps/frontend/src/styles.scss
@@ -85,6 +85,7 @@ body {
 html,
 body {
   height: 100%;
+  background-color: $primary;
 }
 
 body {
diff --git a/libs/shared/data/constants/src/index.ts b/libs/shared/data/constants/src/index.ts
index 2a33b46..bbf9f1b 100644
--- a/libs/shared/data/constants/src/index.ts
+++ b/libs/shared/data/constants/src/index.ts
@@ -1,3 +1,3 @@
 export default {
-  appVersion: '0.7.0',
+  appVersion: '0.7.1',
 };
diff --git a/package.json b/package.json
index 51b57ea..46f231a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opres",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "license": "MIT",
   "scripts": {
     "ng": "nx",