diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
index 90cf14f84..7749c24da 100644
--- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
@@ -193,7 +193,7 @@
 	align-items: center;
 	gap: 12px;
 	align-self: flex-end;
-	margin-top: 20px;
+	margin-top: 52px;
 }
 
 .fabAddButton {
diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts b/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts
index d6c5c4509..e77f31213 100644
--- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts
@@ -72,7 +72,7 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
 
 		this._uiSettings.getUiSettings().subscribe((settings: UiSettings) => {
 			this.connectionsListCollapsed = settings?.globalSettings?.connectionsListCollapsed;
-			this.displayedCardCount = this.connectionsListCollapsed ? 3 : this.connections.length;
+			this.displayedCardCount = this.connectionsListCollapsed ? 3 : (this.connections?.length || 3);
 		});
 	}
 
@@ -82,6 +82,10 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
 				this.hasMultipleMembers = members && members.length > 1;
 			});
 		}
+
+		if (changes.connections && this.connections && !this.connectionsListCollapsed) {
+			this.displayedCardCount = this.connections.length;
+		}
 	}
 
 	showMore() {
@@ -177,6 +181,7 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
 			width: '42em',
 			maxWidth: '95vw',
 			data,
+			disableClose: true,
 		});
 	}
 
diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css
index a657e1b47..af9c7bf30 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.css
+++ b/frontend/src/app/components/upgrade/upgrade.component.css
@@ -94,9 +94,21 @@
 
 @media (width <= 600px) {
 	.current-plan-banner {
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 16px;
+		flex-direction: row;
+		align-items: flex-end;
+		justify-content: space-between;
+		padding: 12px 16px;
+	}
+
+	.payment-settings-button mat-icon {
+		display: none;
+	}
+}
+
+@media (width <= 600px) {
+	.plans {
+		margin: 1.5em auto;
+		width: calc(100% - 32px);
 	}
 }
 
@@ -107,6 +119,85 @@
 	margin-bottom: 1em;
 }
 
+@media (width <= 600px) {
+	.header {
+		grid-template-columns: repeat(3, 1fr);
+		grid-column-gap: 4px;
+		align-items: stretch;
+		position: sticky;
+		top: 4px;
+		z-index: 10;
+		background-color: var(--mat-sidenav-content-background-color);
+		padding: 4px 0;
+		margin-left: calc(-1 * (100vw - 100%) / 2);
+		margin-right: calc(-1 * (100vw - 100%) / 2);
+		padding-left: calc((100vw - 100%) / 2);
+		padding-right: calc((100vw - 100%) / 2);
+		width: 100vw;
+		box-sizing: border-box;
+	}
+
+	.header > div:first-child,
+	.header > div:nth-child(2) {
+		display: none;
+	}
+
+	.plan-header {
+		position: relative;
+		padding: 12px 8px !important;
+		border-radius: 8px;
+		flex: 1;
+	}
+
+	.plan-header-name {
+		margin-bottom: 2px !important;
+	}
+
+	.plan-header-name .mat-h3 {
+		font-size: 14px;
+	}
+
+	.price {
+		font-size: 1.15em;
+	}
+
+	.per {
+		font-size: 0.8em;
+	}
+
+	.users {
+		font-size: 0.7em;
+		margin-bottom: 0.5em;
+		margin-top: 0.15em;
+	}
+
+	.plan-badge:not(.plan-badge-mobile) {
+		display: none;
+	}
+
+	.plan-badge.plan-badge-mobile {
+		position: absolute;
+		top: -8px;
+		right: 8px;
+		display: inline-flex;
+		margin-bottom: 4px;
+		height: 18px;
+	}
+
+	.plan-header-actions {
+		margin-top: auto;
+		padding-top: 4px;
+	}
+}
+
+.plan-badge-mobile {
+	display: none;
+}
+
+.plan-header-actions {
+	margin-top: auto;
+}
+
 .mat-h1 {
 	margin: 0;
 }
@@ -251,6 +342,70 @@
 	}
 }
 
+@media (width <= 600px) {
+	.plansTable colgroup {
+		display: none;
+	}
+
+	.plansTable ::ng-deep table {
+		display: block;
+	}
+
+	.plansTable ::ng-deep tbody {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.plansTable ::ng-deep .mat-mdc-row {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		padding: 12px 16px;
+		height: auto;
+	}
+
+	.plansTable ::ng-deep .mat-mdc-cell:first-child {
+		grid-column: 1 / -1;
+		font-weight: 500;
+		padding: 0 0 4px !important;
+		font-size: 14px;
+		text-align: left;
+		border-bottom: none;
+		min-height: unset;
+	}
+
+	.plansTable ::ng-deep .mat-mdc-cell:not(:first-child) {
+		padding: 0 !important;
+		text-align: center;
+		border-bottom: none;
+		min-height: unset;
+		border-left: 1px solid rgba(0, 0, 0, 0.08);
+		border-right: 1px solid rgba(0, 0, 0, 0.08);
+	}
+
+	.plansTable ::ng-deep .mat-mdc-cell:nth-child(2) {
+		border-left: none;
+	}
+
+	.plansTable ::ng-deep .mat-mdc-cell:last-child {
+		border-right: none;
+	}
+
+	.cell_centered {
+		padding: 0 !important;
+	}
+
+	.cell_current {
+		background: none;
+	}
+}
+
+@media (width <= 600px) and (prefers-color-scheme: dark) {
+	.plansTable ::ng-deep .mat-mdc-cell:not(:first-child) {
+		border-left-color: rgba(255, 255, 255, 0.08);
+		border-right-color: rgba(255, 255, 255, 0.08);
+	}
+}
+
 .databases-header-cell__users {
 	text-align: center;
 }
diff --git a/frontend/src/app/components/upgrade/upgrade.component.html b/frontend/src/app/components/upgrade/upgrade.component.html
index edff0792a..178dda1bd 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.html
+++ b/frontend/src/app/components/upgrade/upgrade.component.html
@@ -33,6 +33,7 @@ <h1 class="mat-h1">
                                 <span class="mat-h3">{{plan.name}} </span>
                                 <mat-chip disabled *ngIf="plan.name === 'Team'" class="plan-badge">Recommended</mat-chip>
                             </div>
+                            <mat-chip disabled *ngIf="plan.name === 'Team'" class="plan-badge plan-badge-mobile">Popular</mat-chip>
                             <div>
                                 <span class="price">${{ plan.price }}</span><span class="per">/monthly</span>
                             </div>
@@ -40,42 +41,44 @@ <h1 class="mat-h1">
                                 <span *ngIf="plan.price !== 0">per each <strong class="users__value">10 users</strong></span>
                                 <span *ngIf="plan.price === 0">up to <strong class="users__value">3 users</strong></span>
                             </span>
-                            <button mat-flat-button color="accent" type="button"
-                                *ngIf="plan.key === currentPlan.key; else activeButton"
-                                disabled class="current">
-                                Current
-                            </button>
-                            <ng-template #activeButton>
-                                <ng-container *ngIf="isAdmin">
-                                    <button mat-flat-button color="accent" type="button"
-                                        *ngIf="plan.price > currentPlan.price && hasPaymentMethod"
-                                        [disabled]="submitting"
-                                        (click)="changePlan(plan.key)">
-                                        Upgrade
-                                    </button>
-                                    <button mat-button type="button"
-                                        *ngIf="plan.price < currentPlan.price && hasPaymentMethod"
-                                        [disabled]="submitting"
-                                        (click)="changePlan(plan.key)">
-                                        Downgrade
-                                    </button>
-
-                                    <a mat-flat-button color="accent"
-                                        *ngIf="plan.price > currentPlan.price && !hasPaymentMethod"
-                                        [disabled]="submitting"
-                                        routerLink="/upgrade/payment"
-                                        [queryParams]="{plan: plan.key}">
-                                        Upgrade
-                                    </a>
-                                    <a mat-button
-                                        *ngIf="plan.price < currentPlan.price && !hasPaymentMethod"
-                                        [disabled]="submitting"
-                                        routerLink="/upgrade/payment"
-                                        [queryParams]="{plan: plan.key}">
-                                        Downgrade
-                                    </a>
-                                </ng-container>
-                            </ng-template>
+                            <div class="plan-header-actions">
+                                <button mat-flat-button color="accent" type="button"
+                                    *ngIf="plan.key === currentPlan.key; else activeButton"
+                                    disabled class="current">
+                                    Current
+                                </button>
+                                <ng-template #activeButton>
+                                    <ng-container *ngIf="isAdmin">
+                                        <button mat-flat-button color="accent" type="button"
+                                            *ngIf="plan.price > currentPlan.price && hasPaymentMethod"
+                                            [disabled]="submitting"
+                                            (click)="changePlan(plan.key)">
+                                            Upgrade
+                                        </button>
+                                        <button mat-button type="button"
+                                            *ngIf="plan.price < currentPlan.price && hasPaymentMethod"
+                                            [disabled]="submitting"
+                                            (click)="changePlan(plan.key)">
+                                            Downgrade
+                                        </button>
+
+                                        <a mat-flat-button color="accent"
+                                            *ngIf="plan.price > currentPlan.price && !hasPaymentMethod"
+                                            [disabled]="submitting"
+                                            routerLink="/upgrade/payment"
+                                            [queryParams]="{plan: plan.key}">
+                                            Upgrade
+                                        </a>
+                                        <a mat-button
+                                            *ngIf="plan.price < currentPlan.price && !hasPaymentMethod"
+                                            [disabled]="submitting"
+                                            routerLink="/upgrade/payment"
+                                            [queryParams]="{plan: plan.key}">
+                                            Downgrade
+                                        </a>
+                                    </ng-container>
+                                </ng-template>
+                            </div>
                         </div>
                     </ng-template>
                 </ng-container>
@@ -96,9 +99,12 @@ <h2 class="mat-header-2">Databases</h2>
                 <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
                     <td mat-cell *matCellDef="let element"
                         [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
-                        <span *ngIf="plan.key === 'title'">{{element[plan.key]}}</span>
-                        <mat-icon *ngIf="element[plan.key] === '∞'" class="person-icon" fontSet="material-symbols-outlined">all_inclusive</mat-icon>
-                        <span *ngIf="element[plan.key] !== '∞' && plan.key !== 'title'">{{element[plan.key]}}<mat-icon class="person-icon">person</mat-icon></span>
+                        <span *ngIf="plan.key === 'title'" class="row-title">{{element[plan.key]}}</span>
+                        <ng-container *ngIf="plan.key !== 'title'">
+
+                            <mat-icon *ngIf="element[plan.key] === '∞'" class="person-icon" fontSet="material-symbols-outlined">all_inclusive</mat-icon>
+                            <span *ngIf="element[plan.key] !== '∞'">{{element[plan.key]}}<mat-icon class="person-icon">person</mat-icon></span>
+                        </ng-container>
                     </td>
                 </ng-container>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
@@ -117,7 +123,11 @@ <h2 class="mat-header-2">Hosted Instances</h2>
                 <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
                     <td mat-cell *matCellDef="let element"
                         [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
-                        {{element[plan.key]}}
+                        <span *ngIf="plan.key === 'title'" class="row-title">{{element[plan.key]}}</span>
+                        <ng-container *ngIf="plan.key !== 'title'">
+
+                            {{element[plan.key]}}
+                        </ng-container>
                     </td>
                 </ng-container>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
@@ -135,8 +145,12 @@ <h2 class="mat-header-2">Users</h2>
                 <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
                     <td mat-cell *matCellDef="let element"
                         [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
-                        <span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
-                        <ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
+                        <span *ngIf="plan.key === 'title'" class="row-title">{{element[plan.key]}}</span>
+                        <ng-container *ngIf="plan.key !== 'title'">
+
+                            <span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
+                            <ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
+                        </ng-container>
                     </td>
                 </ng-container>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
@@ -154,8 +168,12 @@ <h2 class="mat-header-2">Features</h2>
                 <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
                     <td mat-cell *matCellDef="let element"
                         [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
-                        <span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
-                        <ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
+                        <span *ngIf="plan.key === 'title'" class="row-title">{{element[plan.key]}}</span>
+                        <ng-container *ngIf="plan.key !== 'title'">
+
+                            <span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
+                            <ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
+                        </ng-container>
                     </td>
                 </ng-container>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>