From bc8e90ecc22da6f195989a20f1a0d7aa3d6b4e6a Mon Sep 17 00:00:00 2001
From: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Date: Wed, 1 Sep 2021 13:29:00 -0600
Subject: [PATCH] Responsive Updates

Initial commit for responsive and dark mode updates
Further work maybe required on resolved merge conflicts
---
 .../providers/manage/manage.component.html    |  4 +-
 .../providers/settings/account.component.html |  4 +-
 .../app/providers/setup/setup.component.html  |  4 +-
 src/app/accounts/lock.component.html          |  4 +-
 src/app/accounts/login.component.html         |  4 +-
 src/app/accounts/register.component.html      |  8 +--
 src/app/accounts/two-factor.component.html    |  4 +-
 .../update-temp-password.component.html       |  2 +-
 .../manage/manage.component.html              |  4 +-
 .../manage/user-add-edit.component.html       |  4 +-
 .../settings/account.component.html           |  4 +-
 .../settings/download-license.component.html  |  2 +-
 .../settings/settings.component.html          |  4 +-
 .../organizations/tools/tools.component.html  |  4 +-
 .../organizations/vault/vault.component.html  |  4 +-
 src/app/send/access.component.html            |  4 +-
 src/app/send/add-edit.component.html          | 10 +--
 src/app/send/efflux-dates.component.html      |  4 +-
 src/app/send/send.component.html              |  4 +-
 src/app/settings/add-credit.component.html    |  2 +-
 .../settings/adjust-storage.component.html    |  2 +-
 src/app/settings/change-email.component.html  |  4 +-
 src/app/settings/change-kdf.component.html    |  6 +-
 .../settings/change-password.component.html   |  6 +-
 .../emergency-access-add-edit.component.html  |  2 +-
 .../emergency-access-takeover.component.html  |  4 +-
 src/app/settings/options.component.html       |  6 +-
 .../organization-plans.component.html         | 18 ++---
 src/app/settings/payment.component.html       | 16 ++---
 src/app/settings/premium.component.html       |  4 +-
 src/app/settings/profile.component.html       |  4 +-
 src/app/settings/settings.component.html      |  4 +-
 src/app/settings/tax-info.component.html      | 16 ++---
 .../two-factor-webauthn.component.html        |  2 +-
 .../two-factor-yubikey.component.html         |  2 +-
 .../settings/user-subscription.component.html |  4 +-
 src/app/tools/breach-report.component.html    | 10 +--
 src/app/tools/export.component.html           |  4 +-
 src/app/tools/import.component.html           |  4 +-
 .../tools/password-generator.component.html   | 10 +--
 src/app/tools/tools.component.html            |  4 +-
 src/app/vault/add-edit.component.html         | 68 +++++++++----------
 src/app/vault/ciphers.component.html          | 29 ++++----
 src/app/vault/vault.component.html            | 33 ++++++++-
 src/images/bwi-globe.svg                      |  3 +
 src/scss/base.scss                            | 40 +++++++++--
 src/scss/cards.scss                           |  1 -
 src/scss/navigation.scss                      |  3 +
 src/scss/tables.scss                          | 41 +++++++++--
 src/scss/variables.scss                       | 11 +--
 50 files changed, 272 insertions(+), 173 deletions(-)
 create mode 100644 src/images/bwi-globe.svg

diff --git a/bitwarden_license/src/app/providers/manage/manage.component.html b/bitwarden_license/src/app/providers/manage/manage.component.html
index 8941baaa..352fac97 100644
--- a/bitwarden_license/src/app/providers/manage/manage.component.html
+++ b/bitwarden_license/src/app/providers/manage/manage.component.html
@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-md-3">
             <div class="card" *ngIf="provider">
                 <div class="card-header">{{'manage' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -15,7 +15,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-md-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>
diff --git a/bitwarden_license/src/app/providers/settings/account.component.html b/bitwarden_license/src/app/providers/settings/account.component.html
index 0a90198a..6b89e4b5 100644
--- a/bitwarden_license/src/app/providers/settings/account.component.html
+++ b/bitwarden_license/src/app/providers/settings/account.component.html
@@ -7,7 +7,7 @@
 </div>
 <form *ngIf="provider && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="name">{{'providerName' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="provider.name"
@@ -19,7 +19,7 @@
                     [(ngModel)]="provider.billingEmail" [disabled]="selfHosted">
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <app-avatar data="{{provider.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
         </div>
     </div>
diff --git a/bitwarden_license/src/app/providers/setup/setup.component.html b/bitwarden_license/src/app/providers/setup/setup.component.html
index f8327f28..4a84682c 100644
--- a/bitwarden_license/src/app/providers/setup/setup.component.html
+++ b/bitwarden_license/src/app/providers/setup/setup.component.html
@@ -8,11 +8,11 @@
     <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="loading">
         <h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-md-6 mt-4 mt-md-0">
                 <label for="name">{{'providerName' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
             </div>
-            <div class="form-group col-6">
+            <div class="form-group col-md-6 mt-4 mt-md-0">
                 <label for="billingEmail">{{'billingEmail' | i18n}}</label>
                 <input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="billingEmail" required>
             </div>
diff --git a/src/app/accounts/lock.component.html b/src/app/accounts/lock.component.html
index 81438381..6099a6a6 100644
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
+    <div class="row justify-content-center mt-5">
+        <div class="col-10 col-md-5">
             <p class="text-center mb-4">
                 <i class="fa fa-lock fa-4x text-muted" aria-hidden="true"></i>
             </p>
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index 64fd2ef9..1ec745b0 100644
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
+    <div class="row justify-content-center mt-5">
+        <div class="col-10 col-md-5">
             <img class="mb-2 logo logo-themed" alt="Bitwarden">
             <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
             <div class="card d-block">
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index d752d958..3ede3346 100644
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -2,7 +2,7 @@
     <header class="header" *ngIf="layout === 'enterprise2'">
         <div class="container">
             <div class="row">
-                <div class="col-7">
+                <div class="col-md-7">
                     <img alt="Bitwarden" class="logo mb-2" src="../../images/register-layout/logo-horizontal-white.png">
                 </div>
             </div>
@@ -10,7 +10,7 @@
     </header>
     <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
         <div class="row">
-            <div class="col-7" *ngIf="layout">
+            <div class="col-md-7" *ngIf="layout">
                 <div class="mt-5">
                     <div *ngIf="layout === 'enterprise2'">
                         <h2>Companies globally trust Bitwarden for password management.</h2>
@@ -38,9 +38,9 @@
                     </div>
                 </div>
             </div>
-            <div [ngClass]="{'col-5': layout, 'col-12': !layout}">
+            <div [ngClass]="{'col-md-6': layout, 'col-12': !layout}">
                 <div class="row justify-content-md-center mt-5">
-                    <div [ngClass]="{'col-5': !layout, 'col-12': layout}">
+                    <div [ngClass]="{'col-md-6': !layout, 'col-12': layout}">
                         <p class="lead text-center mb-4" *ngIf="!layout">{{'createAccount' | i18n}}</p>
                         <div class="card d-block">
                             <div class="card-body">
diff --git a/src/app/accounts/two-factor.component.html b/src/app/accounts/two-factor.component.html
index 013363fc..28339dea 100644
--- a/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate autocomplete="off">
     <div class="row justify-content-md-center mt-5">
-        <div class="col-5"
-            [ngClass]="{'col-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
+        <div class="col-md-5"
+            [ngClass]="{'col-md-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
             <p class="lead text-center mb-4">{{title}}</p>
             <div class="card d-block">
                 <div class="card-body">
diff --git a/src/app/accounts/update-temp-password.component.html b/src/app/accounts/update-temp-password.component.html
index 59d7d238..e2743bd9 100644
--- a/src/app/accounts/update-temp-password.component.html
+++ b/src/app/accounts/update-temp-password.component.html
@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row justify-content-md-center mt-5">
-        <div class="col-4">
+        <div class="col-md-4">
             <p class="lead text-center mb-4">{{'updateMasterPassword' | i18n}}</p>
             <div class="card d-block">
                 <div class="card-body">
diff --git a/src/app/organizations/manage/manage.component.html b/src/app/organizations/manage/manage.component.html
index 1cb4384b..5c69c94f 100644
--- a/src/app/organizations/manage/manage.component.html
+++ b/src/app/organizations/manage/manage.component.html
@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3 mt-4 mt-md-0">
             <div class="card" *ngIf="organization">
                 <div class="card-header">{{'manage' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -31,7 +31,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>
diff --git a/src/app/organizations/manage/user-add-edit.component.html b/src/app/organizations/manage/user-add-edit.component.html
index 43b53f6f..25c10ebc 100644
--- a/src/app/organizations/manage/user-add-edit.component.html
+++ b/src/app/organizations/manage/user-add-edit.component.html
@@ -76,7 +76,7 @@
                         {{'permissions' | i18n}}
                     </h3>
                     <div class="row">
-                        <div class="col-6">
+                        <div class="col-12 col-md-6 mt-4 mt-md-0">
                             <div class="mb-3">
                                 <label class="font-weight-bold mb-0">Manager Permissions</label>
                                 <hr class="my-0 mr-2" />
@@ -85,7 +85,7 @@
                                 </app-nested-checkbox>
                             </div>
                         </div>
-                        <div class="col-6">
+                        <div class="col-12 col-md-6 mt-4 mt-md-0">
                             <div class="mb-3">
                                 <label class="font-weight-bold mb-0">Admin Permissions</label>
                                 <hr class="my-0 mr-2" />
diff --git a/src/app/organizations/settings/account.component.html b/src/app/organizations/settings/account.component.html
index fffa1004..6eabfa80 100644
--- a/src/app/organizations/settings/account.component.html
+++ b/src/app/organizations/settings/account.component.html
@@ -7,7 +7,7 @@
 </div>
 <form *ngIf="org && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="name">{{'organizationName' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="org.name"
@@ -29,7 +29,7 @@
                     [(ngModel)]="org.identifier">
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <app-avatar data="{{org.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
         </div>
     </div>
diff --git a/src/app/organizations/settings/download-license.component.html b/src/app/organizations/settings/download-license.component.html
index 77936a6a..63295f28 100644
--- a/src/app/organizations/settings/download-license.component.html
+++ b/src/app/organizations/settings/download-license.component.html
@@ -4,7 +4,7 @@
                 aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{'downloadLicense' | i18n}}</h3>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6">
                 <div class="d-flex">
                     <label for="installationId">{{'enterInstallationId' | i18n}}</label>
                     <a class="ml-auto" target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
diff --git a/src/app/organizations/settings/settings.component.html b/src/app/organizations/settings/settings.component.html
index 2dac5ac1..16d08ecf 100644
--- a/src/app/organizations/settings/settings.component.html
+++ b/src/app/organizations/settings/settings.component.html
@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-md-4 col-lg-3 mt-4 mt-md-0">
             <div class="card">
                 <div class="card-header">{{'settings' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -19,7 +19,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-md-8 col-lg-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>
diff --git a/src/app/organizations/tools/tools.component.html b/src/app/organizations/tools/tools.component.html
index 9c0205a4..d1bf08d5 100644
--- a/src/app/organizations/tools/tools.component.html
+++ b/src/app/organizations/tools/tools.component.html
@@ -5,7 +5,7 @@
     </ng-container>
     <ng-container *ngIf="!loading">
         <div class="row">
-            <div class="col-3">
+            <div class="col-12 col-md-4 col-lg-3">
                 <div class="card mb-4" *ngIf="organization.canAccessImportExport">
                     <div class="card-header">{{'tools' | i18n}}</div>
                     <div class="list-group list-group-flush">
@@ -46,7 +46,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-9">
+            <div class="col-12 col-md-8 col-lg-9">
                 <router-outlet></router-outlet>
             </div>
         </div>
diff --git a/src/app/organizations/vault/vault.component.html b/src/app/organizations/vault/vault.component.html
index b70ad1d4..7e6f927c 100644
--- a/src/app/organizations/vault/vault.component.html
+++ b/src/app/organizations/vault/vault.component.html
@@ -1,13 +1,13 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3">
             <app-org-vault-groupings [showFolders]="false" [showFavorites]="false" [showTrash]="true"
                 (onAllClicked)="clearGroupingFilters()" (onCipherTypeClicked)="filterCipherType($event)"
                 (onCollectionClicked)="filterCollection($event.id)" (onSearchTextChanged)="filterSearchText($event)"
                 (onTrashClicked)="filterDeleted()">
             </app-org-vault-groupings>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9">
             <div class="page-header d-flex">
                 <h1>
                     {{'vault' | i18n}}
diff --git a/src/app/send/access.component.html b/src/app/send/access.component.html
index 84944a2b..86575049 100644
--- a/src/app/send/access.component.html
+++ b/src/app/send/access.component.html
@@ -6,7 +6,7 @@
         <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
             <p>{{'sendCreatorIdentifier' | i18n: creatorIdentifier }}</p>
         </div>
-        <div class="col-8" *ngIf="hideEmail">
+        <div class="col-12 col-md-8" *ngIf="hideEmail">
             <app-callout type="warning" title="{{'warning' | i18n}}">
                 {{'viewSendHiddenEmailWarning' | i18n }} 
                 <a href="https://bitwarden.com/help/article/receive-send/" target="_blank">{{'learnMore' | i18n}}</a>.
@@ -14,7 +14,7 @@
         </div>
     </div>
     <div class="row justify-content-center">
-        <div class="col-5">
+        <div class="col-12 col-md-5">
             <div class="card d-block">
                 <div class="card-body" *ngIf="loading" class="text-center">
                     <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"
diff --git a/src/app/send/add-edit.component.html b/src/app/send/add-edit.component.html
index d852d4b8..372f0a0b 100644
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -19,7 +19,7 @@
                     </ul>
                 </app-callout>
                 <div class="row">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label for="name">{{'name' | i18n}}</label>
                         <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="send.name" required
                             [readOnly]="disableSend">
@@ -27,7 +27,7 @@
                     </div>
                 </div>
                 <div class="row" *ngIf="!editMode">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label>{{'whatTypeOfSend' | i18n}}</label>
                         <div class="form-check" *ngFor="let o of typeOptions">
                             <input class="form-check-input" type="radio" [(ngModel)]="send.type" name="Type_{{o.value}}"
@@ -97,20 +97,20 @@
                         [editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)">
                     </app-send-efflux-dates>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
                             <input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
                                 [(ngModel)]="send.maxAccessCount" min="1" [readOnly]="disableSend">
                             <div class="form-text text-muted small">{{'maxAccessCountDesc' | i18n}}</div>
                         </div>
-                        <div class="col-6 form-group" *ngIf="editMode">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group" *ngIf="editMode">
                             <label for="accessCount">{{'currentAccessCount' | i18n}}</label>
                             <input id="accessCount" class="form-control" type="text" name="AccessCount" readonly
                                 [(ngModel)]="send.accessCount">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="password" *ngIf="!hasPassword">{{'password' | i18n}}</label>
                             <label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
                             <div class="input-group">
diff --git a/src/app/send/efflux-dates.component.html b/src/app/send/efflux-dates.component.html
index e3a45711..0c99ce4c 100644
--- a/src/app/send/efflux-dates.component.html
+++ b/src/app/send/efflux-dates.component.html
@@ -1,5 +1,5 @@
 <div class="row" [formGroup]="datesForm">
-    <div class="col-6 form-group">
+    <div class="col-md-6 mt-4 mt-md-0 form-group">
         <label for="deletionDate">{{'deletionDate' | i18n}}</label>
         <ng-template #deletionDateCustom>
             <ng-container [ngSwitch]="browserPath">
@@ -48,7 +48,7 @@
         </div>
         <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
     </div>
-    <div class="col-6 form-group">
+    <div class="col-md-6 mt-4 mt-md-0 form-group">
         <div class="d-flex">
             <label for="expirationDate">{{'expirationDate' | i18n}}</label>
             <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto"
diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html
index a1fdd3f4..dd8e1bd3 100644
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -3,7 +3,7 @@
         <span>{{'sendDisabledWarning' | i18n}}</span>
     </app-callout>
     <div class="row">
-        <div class="col-3 groupings">
+        <div class="col-12 col-md-3 groupings">
             <div class="card vault-filters">
                 <div class="card-header d-flex">
                     {{'filters' | i18n}}
@@ -35,7 +35,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-9 mt-4 mt-md-0">
             <div class="page-header d-flex">
                 <h1>
                     {{'send' | i18n}}
diff --git a/src/app/settings/add-credit.component.html b/src/app/settings/add-credit.component.html
index 7ec14b99..02222608 100644
--- a/src/app/settings/add-credit.component.html
+++ b/src/app/settings/add-credit.component.html
@@ -19,7 +19,7 @@
         </div>
         <div class="form-group">
             <div class="row">
-                <div class="col-4">
+                <div class="col-12 col-md-4 mt-4 mt-md-0">
                     <label for="creditAmount">{{'amount' | i18n}}</label>
                     <div class="input-group">
                         <div class="input-group-prepend"><span class="input-group-text">$USD</span></div>
diff --git a/src/app/settings/adjust-storage.component.html b/src/app/settings/adjust-storage.component.html
index fee9be43..67e67dbe 100644
--- a/src/app/settings/adjust-storage.component.html
+++ b/src/app/settings/adjust-storage.component.html
@@ -4,7 +4,7 @@
                 aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{(add ? 'addStorage' : 'removeStorage') | i18n}}</h3>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-md-6">
                 <label for="storageAdjustment">{{(add ? 'gbStorageAdd' : 'gbStorageRemove') | i18n}}</label>
                 <input id="storageAdjustment" class="form-control" type="number" name="StroageGbAdjustment"
                     [(ngModel)]="storageAdjustment" min="0" max="99" step="1" required>
diff --git a/src/app/settings/change-email.component.html b/src/app/settings/change-email.component.html
index 79a24bd7..ee0672d7 100644
--- a/src/app/settings/change-email.component.html
+++ b/src/app/settings/change-email.component.html
@@ -3,7 +3,7 @@
         {{'changeEmailTwoFactorWarning' | i18n}}
     </app-callout>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
                 <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -21,7 +21,7 @@
         <p>{{'changeEmailDesc' | i18n : newEmail}}</p>
         <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
         <div class="row">
-            <div class="col-6">
+            <div class="col-12 col-md-6 mt-4 mt-md-0">
                 <div class="form-group">
                     <label for="token">{{'code' | i18n}}</label>
                     <input id="token" class="form-control" type="text" name="Token" [(ngModel)]="token" required
diff --git a/src/app/settings/change-kdf.component.html b/src/app/settings/change-kdf.component.html
index da3af596..77f7bf8f 100644
--- a/src/app/settings/change-kdf.component.html
+++ b/src/app/settings/change-kdf.component.html
@@ -1,7 +1,7 @@
 <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="kdfMasterPassword">{{'masterPass' | i18n}}</label>
                 <input id="kdfMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -10,7 +10,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group mb-0">
                 <label for="kdf">{{'kdfAlgorithm' | i18n}}</label>
                 <a class="ml-auto" href="https://en.wikipedia.org/wiki/Key_derivation_function" target="_blank"
@@ -22,7 +22,7 @@
                 </select>
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group mb-0">
                 <label for="kdfIterations">{{'kdfIterations' | i18n}}</label>
                 <a class="ml-auto" href="https://bitwarden.com/help/article/what-encryption-is-used/#pbkdf2" target="_blank" rel="noopener"
diff --git a/src/app/settings/change-password.component.html b/src/app/settings/change-password.component.html
index 33b72648..b587a0d2 100644
--- a/src/app/settings/change-password.component.html
+++ b/src/app/settings/change-password.component.html
@@ -4,7 +4,7 @@
 
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="currentMasterPassword">{{'currentMasterPass' | i18n}}</label>
                 <input id="currentMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -13,7 +13,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="newMasterPassword">{{'newMasterPass' | i18n}}</label>
                 <input id="newMasterPassword" type="password" name="NewMasterPasswordHash" class="form-control mb-1"
@@ -22,7 +22,7 @@
                 <app-password-strength [score]="masterPasswordScore" [showText]="true"></app-password-strength>
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
                 <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype" class="form-control"
diff --git a/src/app/settings/emergency-access-add-edit.component.html b/src/app/settings/emergency-access-add-edit.component.html
index 1a89bc54..f5273a84 100644
--- a/src/app/settings/emergency-access-add-edit.component.html
+++ b/src/app/settings/emergency-access-add-edit.component.html
@@ -46,7 +46,7 @@
                         <small>{{'takeoverDesc' | i18n}}</small>
                     </label>
                 </div>
-                <div class="form-group col-6 mt-4">
+                <div class="form-group col-12 col-md-6 mt-4">
                     <label for="waitTime">{{'waitTime' | i18n}}</label>
                     <select id="waitTime" name="waitTime" [(ngModel)]="waitTime" class="form-control" [disabled]="readOnly">
                         <option *ngFor="let o of waitTimes" [ngValue]="o.value">{{o.name}}</option>
diff --git a/src/app/settings/emergency-access-takeover.component.html b/src/app/settings/emergency-access-takeover.component.html
index 17ea9ae3..d549fa9e 100644
--- a/src/app/settings/emergency-access-takeover.component.html
+++ b/src/app/settings/emergency-access-takeover.component.html
@@ -15,7 +15,7 @@
                 <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
                 </app-callout>
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-md-6 mt-4 mt-md-0">
                         <div class="form-group">
                             <label for="masterPassword">{{'newMasterPass' | i18n}}</label>
                             <input id="masterPassword" type="password" name="NewMasterPasswordHash"
@@ -26,7 +26,7 @@
                             </app-password-strength>
                         </div>
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-md-6 mt-4 mt-md-0">
                         <div class="form-group">
                             <label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
                             <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype"
diff --git a/src/app/settings/options.component.html b/src/app/settings/options.component.html
index 06180898..cd4e7f60 100644
--- a/src/app/settings/options.component.html
+++ b/src/app/settings/options.component.html
@@ -4,7 +4,7 @@
 <p>{{'optionsDesc' | i18n}}</p>
 <form (ngSubmit)="submit()" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <app-vault-timeout-input [vaultTimeouts]="vaultTimeouts" [formControl]="vaultTimeout" ngDefaultControl>
             </app-vault-timeout-input>
         </div>
@@ -29,7 +29,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <div class="d-flex">
                     <label for="locale">{{'language' | i18n}}</label>
@@ -83,7 +83,7 @@
         <small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="theme">{{'theme' | i18n}}</label>
                 <select id="theme" name="theme" [(ngModel)]="theme" class="form-control">
diff --git a/src/app/settings/organization-plans.component.html b/src/app/settings/organization-plans.component.html
index b30bc88e..3588b62c 100644
--- a/src/app/settings/organization-plans.component.html
+++ b/src/app/settings/organization-plans.component.html
@@ -21,16 +21,16 @@
     *ngIf="!loading && !selfHosted && this.plans">
     <h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
     <div class="row" *ngIf="createOrganization">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="name">{{'organizationName' | i18n}}</label>
             <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
         </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="billingEmail">{{'billingEmail' | i18n}}</label>
             <input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="billingEmail"
                 required>
         </div>
-        <div class="form-group col-6" *ngIf="!!providerId">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngIf="!!providerId">
             <label for="email">{{'clientOwnerEmail' | i18n}}</label>
             <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="clientOwnerEmail" required>
             <small class="text-muted">{{'clientOwnerDesc' | i18n : '20'}}</small>
@@ -43,7 +43,7 @@
             <label for="ownedBusiness" class="form-check-label">{{'accountOwnedBusiness' | i18n}}</label>
         </div>
         <div class="row" *ngIf="ownedBusiness">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                 <label for="businessName">{{'businessName' | i18n}}</label>
                 <input id="businessName" class="form-control" type="text" name="BusinessName"
                     [(ngModel)]="businessName">
@@ -111,7 +111,7 @@
         <ng-container *ngIf="selectedPlan.hasAdditionalSeatsOption && !selectedPlan.baseSeats">
             <h2 class="mt-5">{{'users' | i18n}}</h2>
             <div class="row">
-                <div class="col-6">
+                <div class="col-12 col-md-6 mt-4 mt-md-0">
                     <label for="additionalSeats">{{'userSeats' | i18n}}</label>
                     <input id="additionalSeats" class="form-control" type="number" name="AdditionalSeats"
                         [(ngModel)]="additionalSeats" min="1" max="100000" placeholder="{{'userSeatsDesc' | i18n}}"
@@ -122,7 +122,7 @@
         </ng-container>
         <h2 class="mt-5">{{'addons' | i18n}}</h2>
         <div class="row" *ngIf="selectedPlan.hasAdditionalSeatsOption && selectedPlan.baseSeats">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                 <label for="additionalSeats">{{'additionalUserSeats' | i18n}}</label>
                 <input id="additionalSeats" class="form-control" type="number" name="AdditionalSeats"
                     [(ngModel)]="additionalSeats" min="0" max="100000" placeholder="{{'userSeatsDesc' | i18n}}">
@@ -131,7 +131,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                 <label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
                 <input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb"
                     [(ngModel)]="additionalStorage" min="0" max="99" step="1"
@@ -141,7 +141,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="form-group col-6" *ngIf="selectedPlan.hasPremiumAccessOption">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngIf="selectedPlan.hasPremiumAccessOption">
                 <div class="form-check">
                     <input id="premiumAccess" class="form-check-input" type="checkbox" name="PremiumAccessAddon"
                         [(ngModel)]="premiumAccessAddon">
@@ -229,7 +229,7 @@
                     {{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
                 </ng-container>
             </div>
-            <hr class="my-1 col-3 ml-0">
+            <hr class="my-1 col-6 col-md-3 ml-0">
             <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
                 {{total | currency:'USD $'}}/{{selectedPlanInterval | i18n}}</p>
         </div>
diff --git a/src/app/settings/payment.component.html b/src/app/settings/payment.component.html
index ea22d5a2..64239618 100644
--- a/src/app/settings/payment.component.html
+++ b/src/app/settings/payment.component.html
@@ -26,19 +26,19 @@
 </div>
 <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
     <div class="row">
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="stripe-card-number-element">{{'number' | i18n}}</label>
             <div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
         </div>
-        <div class="form-group col-8 d-flex align-items-end">
+        <div class="form-group col-12 col-md-8 mt-4 mt-md-0 d-flex align-items-end">
             <img src="../../images/cards.png" alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
                 width="323" height="32">
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="stripe-card-expiry-element">{{'expiration' | i18n}}</label>
             <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <div class="d-flex">
                 <label for="stripe-card-cvc-element">
                     {{'securityCode' | i18n}}
@@ -57,22 +57,22 @@
         {{'verifyBankAccountInitialDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}
     </app-callout>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="routing_number">{{'routingNumber' | i18n}}</label>
             <input id="routing_number" class="form-control" type="text" name="routing_number"
                 [(ngModel)]="bank.routing_number" required appInputVerbatim>
         </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="account_number">{{'accountNumber' | i18n}}</label>
             <input id="account_number" class="form-control" type="text" name="account_number"
                 [(ngModel)]="bank.account_number" required appInputVerbatim>
         </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="account_holder_name">{{'accountHolderName' | i18n}}</label>
             <input id="account_holder_name" class="form-control" type="text" name="account_holder_name"
                 [(ngModel)]="bank.account_holder_name" required>
         </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="account_holder_type">{{'bankAccountType' | i18n}}</label>
             <select id="account_holder_type" class="form-control" name="account_holder_type"
                 [(ngModel)]="bank.account_holder_type" required>
diff --git a/src/app/settings/premium.component.html b/src/app/settings/premium.component.html
index 131d2e39..0ae65eb9 100644
--- a/src/app/settings/premium.component.html
+++ b/src/app/settings/premium.component.html
@@ -59,7 +59,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
     <h2 class="mt-5">{{'addons' | i18n}}</h2>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6">
             <label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
             <input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb"
                 [(ngModel)]="additionalStorage" min="0" max="99" step="1"
@@ -84,7 +84,7 @@
                 {{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
             </ng-container>
         </div>
-        <hr class="my-1 col-3 ml-0">
+        <hr class="my-1 col-12 col-md-3 ml-0">
         <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
             {{total | currency:'USD $'}}/{{'year' | i18n}}</p>
     </div>
diff --git a/src/app/settings/profile.component.html b/src/app/settings/profile.component.html
index e2c3eb6e..4341648f 100644
--- a/src/app/settings/profile.component.html
+++ b/src/app/settings/profile.component.html
@@ -4,7 +4,7 @@
 </div>
 <form *ngIf="profile && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="name">{{'name' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="profile.name">
@@ -19,7 +19,7 @@
                     [(ngModel)]="profile.masterPasswordHint">
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <div class="mb-3">
                 <app-avatar data="{{profile | userName}}" [email]="profile.email" dynamic="true" size="75"
                     fontSize="35"></app-avatar>
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index c1775529..7e70ad04 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3 mt-4 mt-md-0">
             <div class="card">
                 <div class="card-header">{{'settings' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -34,7 +34,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>
diff --git a/src/app/settings/tax-info.component.html b/src/app/settings/tax-info.component.html
index be314926..fd215b76 100644
--- a/src/app/settings/tax-info.component.html
+++ b/src/app/settings/tax-info.component.html
@@ -1,5 +1,5 @@
 <div class="row">
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressCountry">{{'country' | i18n}}</label>
             <select id="addressCountry" class="form-control" [(ngModel)]="taxInfo.country" required name="addressCountry" 
@@ -258,14 +258,14 @@
             </select>
         </div>
     </div>
-    <div class="col-3">
+    <div class="col-12 col-md-3 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressPostalCode">{{'zipPostalCode' | i18n}}</label>
             <input id="addressPostalCode" class="form-control" type="text" name="addressPostalCode" 
                 [(ngModel)]="taxInfo.postalCode" [required]="taxInfo.country === 'US'" autocomplete="postal-code">
         </div>
     </div>
-    <div class="col-6" *ngIf="organizationId && taxInfo.country !== 'US'">
+    <div class="col-12 col-md-6 mt-4 mt-md-0" *ngIf="organizationId && taxInfo.country !== 'US'">
         <div class="form-group form-check">
             <input class="form-check-input" id="addressIncludeTaxId" name="addressIncludeTaxId" type="checkbox" 
                 [(ngModel)]="taxInfo.includeTaxId">
@@ -274,7 +274,7 @@
     </div>
 </div>
 <div class="row" *ngIf="organizationId && taxInfo.includeTaxId">
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="taxId">{{'taxIdNumber' | i18n}}</label>
             <input id="taxId" class="form-control" type="text" name="taxId" [(ngModel)]="taxInfo.taxId">
@@ -282,28 +282,28 @@
     </div>
 </div>
 <div class="row" *ngIf="organizationId && taxInfo.includeTaxId">
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressLine1">{{'address1' | i18n}}</label>
             <input id="addressLine1" class="form-control" type="text" name="addressLine1" 
                 [(ngModel)]="taxInfo.line1" autocomplete="address-line1">
         </div>
     </div>
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressLine2">{{'address2' | i18n}}</label>
             <input id="addressLine2" class="form-control" type="text" name="addressLine2" 
                 [(ngModel)]="taxInfo.line2" autocomplete="address-line2">
         </div>
     </div>
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressCity">{{'cityTown' | i18n}}</label>
             <input id="addressCity" class="form-control" type="text" name="addressCity" 
                 [(ngModel)]="taxInfo.city" autocomplete="address-level2">
         </div>
     </div>
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressState">{{'stateProvince' | i18n}}</label>
             <input id="addressState" class="form-control" type="text" name="addressState" 
diff --git a/src/app/settings/two-factor-webauthn.component.html b/src/app/settings/two-factor-webauthn.component.html
index e887afce..0ae26f34 100644
--- a/src/app/settings/two-factor-webauthn.component.html
+++ b/src/app/settings/two-factor-webauthn.component.html
@@ -52,7 +52,7 @@
                         <li>{{'twoFactorU2fSaveForm' | i18n}}</li>
                     </ol>
                     <div class="row">
-                        <div class="form-group col-6">
+                        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                             <label for="name">{{'name' | i18n}}</label>
                             <input id="name" type="text" name="Name" class="form-control" [(ngModel)]="name"
                                 [disabled]="!keyIdAvailable">
diff --git a/src/app/settings/two-factor-yubikey.component.html b/src/app/settings/two-factor-yubikey.component.html
index b94dc68a..407dbf61 100644
--- a/src/app/settings/two-factor-yubikey.component.html
+++ b/src/app/settings/two-factor-yubikey.component.html
@@ -36,7 +36,7 @@
                     </ol>
                     <hr>
                     <div class="row">
-                        <div class="form-group col-6" *ngFor="let k of keys; let i = index">
+                        <div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngFor="let k of keys; let i = index">
                             <label for="key{{i + 1}}">{{'yubikeyX' | i18n : i + 1}}</label>
                             <input id="key{{i + 1}}" type="password" name="Key{{i + 1}}" class="form-control"
                                 [(ngModel)]="k.key" *ngIf="!k.existingKey" appInputVerbatim autocomplete="new-password">
diff --git a/src/app/settings/user-subscription.component.html b/src/app/settings/user-subscription.component.html
index 1ad5bcf8..753ffcb6 100644
--- a/src/app/settings/user-subscription.component.html
+++ b/src/app/settings/user-subscription.component.html
@@ -28,7 +28,7 @@
         <dd *ngIf="!sub.expiration">{{'neverExpires' | i18n}}</dd>
     </dl>
     <div class="row" *ngIf="!selfHosted">
-        <div class="col-4">
+        <div class="col-12 col-md-4 mt-4 mt-md-0">
             <dl>
                 <dt>{{'status' | i18n}}</dt>
                 <dd>
@@ -42,7 +42,7 @@
                 </dd>
             </dl>
         </div>
-        <div class="col-8" *ngIf="subscription">
+        <div class="col-12 col-md-8 mt-4 mt-md-0" *ngIf="subscription">
             <strong class="d-block mb-1">{{'details' | i18n}}</strong>
             <table class="table">
                 <tbody>
diff --git a/src/app/tools/breach-report.component.html b/src/app/tools/breach-report.component.html
index 9ed02593..646b1dfb 100644
--- a/src/app/tools/breach-report.component.html
+++ b/src/app/tools/breach-report.component.html
@@ -4,7 +4,7 @@
 <p>{{'breachDesc' | i18n}}</p>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6">
             <label for="username">{{'username' | i18n}}</label>
             <input id="username" type="text" name="Username" class="form-control" [(ngModel)]="username" required>
             <small class="form-text text-muted">{{'breachCheckUsernameEmail' | i18n}}</small>
@@ -27,10 +27,10 @@
         <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
             <li *ngFor="let a of breachedAccounts" class="list-group-item min-height-fix">
                 <div class="row">
-                    <div class="col-2 text-center">
-                        <img [src]="a.logoPath" alt="" class="img-fluid">
+                    <div class="col-md-2 mt-2 mt-md-0 text-center">
+                        <img [src]="a.logoPath" alt="" class="img-fluid" style="max-width: 115px;">
                     </div>
-                    <div class="col-7">
+                    <div class="col-md-7 mt-2 mt-md-0">
                         <h3 class="text-lg">{{a.title}}</h3>
                         <p [innerHTML]="a.description"></p>
                         <p class="mb-1">{{'compromisedData' | i18n}}:</p>
@@ -38,7 +38,7 @@
                             <li *ngFor="let d of a.dataClasses">{{d}}</li>
                         </ul>
                     </div>
-                    <div class="col-3">
+                    <div class="col-md-3 mt-2 mt-md-0">
                         <dl>
                             <dt>{{'website' | i18n}}</dt>
                             <dd>{{a.domain}}</dd>
diff --git a/src/app/tools/export.component.html b/src/app/tools/export.component.html
index 3b5212df..52de09ab 100644
--- a/src/app/tools/export.component.html
+++ b/src/app/tools/export.component.html
@@ -9,7 +9,7 @@
 
     <p>{{'exportMasterPassword' | i18n}}</p>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="format">{{'fileFormat' | i18n}}</label>
             <select class="form-control" id="format" name="Format" [(ngModel)]="format" [disabled]="disabledByPolicy">
                 <option value="json">.json</option>
@@ -19,7 +19,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="masterPassword">{{'masterPass' | i18n}}</label>
             <input id="masterPassword" type="password" name="MasterPassword" class="form-control"
                 [(ngModel)]="masterPassword" required appInputVerbatim [disabled]="disabledByPolicy">
diff --git a/src/app/tools/import.component.html b/src/app/tools/import.component.html
index c52d4b1d..839fcb7f 100644
--- a/src/app/tools/import.component.html
+++ b/src/app/tools/import.component.html
@@ -6,7 +6,7 @@
 </app-callout>
 <form #form (ngSubmit)="submit()" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6">
             <div class="form-group">
                 <label for="type">1. {{'selectFormat' | i18n}}</label>
                 <select id="type" name="Format" [(ngModel)]="format" class="form-control"
@@ -241,7 +241,7 @@
         </ng-container>
     </app-callout>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6">
             <div class="form-group">
                 <label for="file">2. {{'selectImportFile' | i18n}}</label>
                 <input type="file" id="file" class="form-control-file" name="file" [disabled]="importBlockedByPolicy">
diff --git a/src/app/tools/password-generator.component.html b/src/app/tools/password-generator.component.html
index 365390fa..58e7137f 100644
--- a/src/app/tools/password-generator.component.html
+++ b/src/app/tools/password-generator.component.html
@@ -20,12 +20,12 @@
 </div>
 <ng-container *ngIf="options.type === 'passphrase'">
     <div class="row">
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="num-words">{{'numWords' | i18n}}</label>
             <input id="num-words" class="form-control" type="number" min="3" max="20" [(ngModel)]="options.numWords"
                 (blur)="saveOptions()">
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="word-separator">{{'wordSeparator' | i18n}}</label>
             <input id="word-separator" class="form-control" type="text" maxlength="1"
                 [(ngModel)]="options.wordSeparator" (blur)="saveOptions()">
@@ -46,17 +46,17 @@
 </ng-container>
 <ng-container *ngIf="options.type === 'password'">
     <div class="row">
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="length">{{'length' | i18n}}</label>
             <input id="length" class="form-control" type="number" min="5" max="128" [(ngModel)]="options.length"
                 (blur)="saveOptions()" (change)="lengthChanged()">
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="min-number">{{'minNumbers' | i18n}}</label>
             <input id="min-number" class="form-control" type="number" min="0" max="9" (blur)="saveOptions()"
                 [(ngModel)]="options.minNumber" (change)="minNumberChanged()">
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="min-special">{{'minSpecial' | i18n}}</label>
             <input id="min-special" class="form-control" type="number" min="0" max="9" (blur)="saveOptions()"
                 [(ngModel)]="options.minSpecial" (change)="minSpecialChanged()">
diff --git a/src/app/tools/tools.component.html b/src/app/tools/tools.component.html
index 69c6263e..eb177f2e 100644
--- a/src/app/tools/tools.component.html
+++ b/src/app/tools/tools.component.html
@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-3">
             <div class="card mb-4">
                 <div class="card-header">{{'tools' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -52,7 +52,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index d6e7fbf8..2c2d3477 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -13,7 +13,7 @@
                     {{'personalOwnershipPolicyInEffect' | i18n}}
                 </app-callout>
                 <div class="row" *ngIf="!editMode && !viewOnly">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label for="type">{{'whatTypeOfItem' | i18n}}</label>
                         <select id="type" name="Type" [(ngModel)]="cipher.type" class="form-control"
                             [disabled]="cipher.isDeleted" appAutofocus>
@@ -22,12 +22,12 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label for="name">{{'name' | i18n}}</label>
                         <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="cipher.name" required
                             [disabled]="cipher.isDeleted || viewOnly">
                     </div>
-                    <div class="col-6 form-group" *ngIf="!organization">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group" *ngIf="!organization">
                         <label for="folder">{{'folder' | i18n}}</label>
                         <select id="folder" name="FolderId" [(ngModel)]="cipher.folderId" class="form-control"
                             [disabled]="cipher.isDeleted || viewOnly">
@@ -38,7 +38,7 @@
                 <!-- Login -->
                 <ng-container *ngIf="cipher.type === cipherType.Login">
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="loginUsername">{{'username' | i18n}}</label>
                             <div class="input-group">
                                 <input id="loginUsername" class="form-control" type="text" name="Login.Username"
@@ -53,7 +53,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <div class="d-flex">
                                 <label for="loginPassword">{{'password' | i18n}}</label>
                                 <div class="ml-auto d-flex" *ngIf="!cipher.isDeleted && !viewOnly">
@@ -95,13 +95,13 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
                             <input id="loginTotp" type="{{cipher.viewPassword ? 'text' : 'password'}}" name="Login.Totp"
                                 class="form-control text-monospace" [(ngModel)]="cipher.login.totp" appInputVerbatim
                                 [disabled]="cipher.isDeleted || !cipher.viewPassword || viewOnly">
                         </div>
-                        <div class="col-6 form-group totp d-flex align-items-end" [ngClass]="{'low': totpLow}">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group totp d-flex align-items-end" [ngClass]="{'low': totpLow}">
                             <div *ngIf="!cipher.login.totp || !totpCode">
                                 <img src="../../images/totp-countdown.png" id="totpImage" title="{{'verificationCodeTotp' | i18n}}"
                                     class="ml-2">
@@ -138,7 +138,7 @@
                     </div>
                     <ng-container *ngIf="cipher.login.hasUris">
                         <div class="row" *ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
-                            <div class="col-7 form-group">
+                            <div class="col-md-7 form-group">
                                 <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
                                 <div class="input-group">
                                     <input class="form-control" id="loginUri{{i}}" type="text"
@@ -158,7 +158,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-5 form-group">
+                            <div class="col-md-5 form-group">
                                 <div class="d-flex">
                                     <label for="loginUriMatch{{i}}">
                                         {{'matchDetection' | i18n}}
@@ -191,13 +191,13 @@
                 <!-- Card -->
                 <ng-container *ngIf="cipher.type === cipherType.Card">
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
                             <input id="cardCardholderName" class="form-control" type="text"
                                 name="Card.CardCardholderName" [(ngModel)]="cipher.card.cardholderName"
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="cardBrand">{{'brand' | i18n}}</label>
                             <select id="cardBrand" class="form-control" name="Card.Brand"
                                 [(ngModel)]="cipher.card.brand" [disabled]="cipher.isDeleted || viewOnly">
@@ -206,7 +206,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="cardNumber">{{'number' | i18n}}</label>
                             <div class="input-group">
                                 <input id="cardNumber" class="form-control text-monospace"
@@ -227,14 +227,14 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col form-group">
+                        <div class="col-md-6 form-group">
                             <label for="cardExpMonth">{{'expirationMonth' | i18n}}</label>
                             <select id="cardExpMonth" class="form-control" name="Card.ExpMonth"
                                 [(ngModel)]="cipher.card.expMonth" [disabled]="cipher.isDeleted || viewOnly">
                                 <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">{{o.name}}</option>
                             </select>
                         </div>
-                        <div class="col form-group">
+                        <div class="col-md-6 form-group">
                             <label for="cardExpYear">{{'expirationYear' | i18n}}</label>
                             <input id="cardExpYear" class="form-control" type="text" name="Card.ExpYear"
                                 [(ngModel)]="cipher.card.expYear" placeholder="{{'ex' | i18n}} 2019"
@@ -242,7 +242,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="cardCode">{{'securityCode' | i18n}}</label>
                             <div class="input-group">
                                 <input id="cardCode" class="form-control text-monospace"
@@ -268,7 +268,7 @@
                 <!-- Identity -->
                 <ng-container *ngIf="cipher.type === cipherType.Identity">
                     <div class="row">
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idTitle">{{'title' | i18n}}</label>
                             <select id="idTitle" class="form-control" name="Identity.Title"
                                 [(ngModel)]="cipher.identity.title" [disabled]="cipher.isDeleted || viewOnly">
@@ -277,49 +277,49 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idFirstName">{{'firstName' | i18n}}</label>
                             <input id="idFirstName" class="form-control" type="text" name="Identity.FirstName"
                                 [(ngModel)]="cipher.identity.firstName" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idMiddleName">{{'middleName' | i18n}}</label>
                             <input id="idMiddleName" class="form-control" type="text" name="Identity.MiddleName"
                                 [(ngModel)]="cipher.identity.middleName" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idLastName">{{'lastName' | i18n}}</label>
                             <input id="idLastName" class="form-control" type="text" name="Identity.LastName"
                                 [(ngModel)]="cipher.identity.lastName" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idUsername">{{'username' | i18n}}</label>
                             <input id="idUsername" class="form-control" type="text" name="Identity.Username"
                                 [(ngModel)]="cipher.identity.username" appInputVerbatim
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idCompany">{{'company' | i18n}}</label>
                             <input id="idCompany" class="form-control" type="text" name="Identity.Company"
                                 [(ngModel)]="cipher.identity.company" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idSsn">{{'ssn' | i18n}}</label>
                             <input id="idSsn" class="form-control" type="text" name="Identity.SSN"
                                 [(ngModel)]="cipher.identity.ssn" appInputVerbatim
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
                             <input id="idPassportNumber" class="form-control" type="text" name="Identity.PassportNumber"
                                 [(ngModel)]="cipher.identity.passportNumber" appInputVerbatim
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
                             <input id="idLicenseNumber" class="form-control" type="text" name="Identity.LicenseNumber"
                                 [(ngModel)]="cipher.identity.licenseNumber" appInputVerbatim
@@ -327,56 +327,56 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idEmail">{{'email' | i18n}}</label>
                             <input id="idEmail" class="form-control" type="text" name="Identity.Email"
                                 [(ngModel)]="cipher.identity.email" appInputVerbatim
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idPhone">{{'phone' | i18n}}</label>
                             <input id="idPhone" class="form-control" type="text" name="Identity.Phone"
                                 [(ngModel)]="cipher.identity.phone" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idAddress1">{{'address1' | i18n}}</label>
                             <input id="idAddress1" class="form-control" type="text" name="Identity.Address1"
                                 [(ngModel)]="cipher.identity.address1" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idAddress2">{{'address2' | i18n}}</label>
                             <input id="idAddress2" class="form-control" type="text" name="Identity.Address2"
                                 [(ngModel)]="cipher.identity.address2" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idAddress3">{{'address3' | i18n}}</label>
                             <input id="idAddress3" class="form-control" type="text" name="Identity.Address3"
                                 [(ngModel)]="cipher.identity.address3" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idCity">{{'cityTown' | i18n}}</label>
                             <input id="idCity" class="form-control" type="text" name="Identity.City"
                                 [(ngModel)]="cipher.identity.city" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idState">{{'stateProvince' | i18n}}</label>
                             <input id="idState" class="form-control" type="text" name="Identity.State"
                                 [(ngModel)]="cipher.identity.state" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idPostalCode">{{'zipPostalCode' | i18n}}</label>
                             <input id="idPostalCode" class="form-control" type="text" name="Identity.PostalCode"
                                 [(ngModel)]="cipher.identity.postalCode" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idCountry">{{'country' | i18n}}</label>
                             <input id="idCountry" class="form-control" type="text" name="Identity.Country"
                                 [(ngModel)]="cipher.identity.country" [disabled]="cipher.isDeleted || viewOnly">
@@ -393,7 +393,7 @@
                 <ng-container *ngIf="allowOwnershipAssignment()">
                     <h3 class="mt-4">{{'ownership' | i18n}}</h3>
                     <div class="row">
-                        <div class="col-5">
+                        <div class="col-md-5">
                             <label for="organizationId">{{'whoOwnsThisItem' | i18n}}</label>
                             <select id="organizationId" class="form-control" name="OrganizationId"
                                 [(ngModel)]="cipher.organizationId" (change)="organizationChanged()"
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 77d17445..99162af1 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -1,15 +1,16 @@
 <ng-container *ngIf="(isPaging() ? pagedCiphers : ciphers) as filteredCiphers">
-    <table class="table table-hover table-list table-ciphers" *ngIf="filteredCiphers.length" infiniteScroll
+    <div class="d-flex flex-row flex-wrap justify-content-between" *ngIf="filteredCiphers.length" infiniteScroll
         [infiniteScrollDistance]="1" [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
-        <tbody>
-            <tr *ngFor="let c of filteredCiphers">
-                <td (click)="checkCipher(c)" class="table-list-checkbox">
+
+        <div *ngFor="let c of filteredCiphers" class="col-lg-6">
+            <div class="vault-item">
+                <div (click)="checkCipher(c)" class="table-list-checkbox">
                     <input type="checkbox" [(ngModel)]="c.checked" appStopProp>
-                </td>
-                <td (click)="checkCipher(c)" class="table-list-icon">
+                </div>
+                <div (click)="checkCipher(c)" class="table-list-icon" style="width: 30px;">
                     <app-vault-icon [cipher]="c"></app-vault-icon>
-                </td>
-                <td (click)="checkCipher(c)" class="reduced-lh wrap">
+                </div>
+                <div (click)="checkCipher(c)" class="reduced-lh wrap">
                     <a href="#" appStopClick appStopProp (click)="selectCipher(c)"
                         title="{{'editItem' | i18n}}">{{c.name}}</a>
                     <ng-container *ngIf="!organization && c.organizationId">
@@ -27,8 +28,8 @@
                     </ng-container>
                     <br>
                     <small appStopProp>{{c.subTitle}}</small>
-                </td>
-                <td class="table-list-options">
+                </div>
+                <div class="table-list-options ml-auto">
                     <div class="dropdown" appListDropdown>
                         <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
@@ -93,10 +94,10 @@
                             </a>
                         </div>
                     </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="no-items" *ngIf="!filteredCiphers.length">
         <ng-container *ngIf="!loaded">
             <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index 666bcd15..d2b81972 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3">
             <app-vault-groupings (onAllClicked)="clearGroupingFilters()" (onFavoritesClicked)="filterFavorites()"
                 (onCipherTypeClicked)="filterCipherType($event)" (onFolderClicked)="filterFolder($event.id)"
                 (onAddFolder)="addFolder()" (onEditFolder)="editFolder($event.id)"
@@ -73,7 +73,7 @@
                     </a>
                 </div>
             </div>
-            <div class="card">
+            <div class="card mt-4">
                 <div class="card-header d-flex">
                     {{'organizations' | i18n}}
                     <a class="ml-auto" href="https://help.bitwarden.com/article/what-is-an-organization/"
@@ -98,6 +98,35 @@
                 </div>
             </div>
         </div>
+        <div class="col-12 col-md-8 col-lg-9 mt-4 mt-md-0">
+            <div class="page-header d-flex">
+                <h1>
+                    {{'myVault' | i18n}}
+                    <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
+                        <ng-container *ngIf="actionSpinner.loading">
+                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'loading' | i18n}}</span>
+                        </ng-container>
+                    </small>
+                </h1>
+                <div class="ml-auto d-flex">
+                    <app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [modal]="modal" [deleted]="deleted">
+                    </app-vault-bulk-actions>
+                    <button type="button" class="btn btn-primary btn-sm" (click)="addCipher()" *ngIf="!deleted">
+                        <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{'addItem' | i18n}}
+                    </button>
+                </div>
+            </div>
+            <app-callout type="warning" *ngIf="deleted" icon="fa-warning">
+                {{trashCleanupWarning}}
+            </app-callout>
+            <app-vault-ciphers (onCipherClicked)="editCipher($event)"
+                (onAttachmentsClicked)="editCipherAttachments($event)" (onAddCipher)="addCipher()"
+                (onShareClicked)="shareCipher($event)" (onCollectionsClicked)="editCipherCollections($event)"
+                (onCloneClicked)="cloneCipher($event)">
+            </app-vault-ciphers>
+        </div>
     </div>
 </div>
 <ng-template #attachments></ng-template>
diff --git a/src/images/bwi-globe.svg b/src/images/bwi-globe.svg
new file mode 100644
index 00000000..b92550b8
--- /dev/null
+++ b/src/images/bwi-globe.svg
@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M89.2765 41.7842C87.8565 34.768 84.5365 28.2628 79.6665 22.9649C74.7965 17.6669 68.564 13.7737 61.629 11.6975C54.694 9.62376 47.3215 9.44601 40.294 11.1865C33.2665 12.9269 26.849 16.5165 21.724 21.5774C16.6015 26.6359 12.964 32.9732 11.2015 39.9153C9.43899 46.8574 9.61899 54.1378 11.719 60.9836C13.819 67.8319 17.7615 73.9865 23.129 78.7957C28.4965 83.6048 35.0815 86.8833 42.1865 88.2855C48.649 89.5841 55.339 89.2804 61.654 87.4017C67.969 85.523 73.7165 82.1309 78.379 77.5267C83.0415 72.9225 86.479 67.2468 88.379 61.0108C90.2815 54.7747 90.589 48.1683 89.274 41.7866L89.2765 41.7842ZM29.1365 21.8268C35.164 17.3658 42.494 14.9587 50.0265 14.9637C50.4565 14.9637 50.8665 15.0377 51.2965 15.0575C52.8515 15.5018 51.6665 16.7708 51.6665 16.7708C46.344 19.4963 41.8665 23.5919 38.7015 28.6208C37.2015 31.0105 36.0115 30.9858 35.6265 30.9414C33.4215 30.8476 30.7115 27.8209 28.6565 24.7448C28.3515 24.2881 28.2315 23.7351 28.319 23.1945C28.4065 22.6538 28.699 22.165 29.1365 21.8268V21.8268ZM39.6365 81.1854C39.3365 81.4891 38.9515 81.6989 38.529 81.7878C38.1065 81.8767 37.669 81.8372 37.2715 81.6792C30.9315 79.2252 25.4515 74.9962 21.5065 69.5156C17.5615 64.035 15.3165 57.5348 15.0515 50.8148L16.5265 48.672C21.2815 46.9192 25.9665 45.9712 27.2315 47.0525C27.8165 47.5462 27.4165 49.0768 27.2315 49.7088C23.6565 61.149 32.9015 64.0868 36.3915 65.1978C36.7765 65.3212 37.1065 65.4298 37.3915 65.5237C41.0465 66.916 43.1315 68.9355 43.5965 71.5178C43.684 73.315 43.3765 75.1098 42.6965 76.7762C42.0165 78.4426 40.979 79.9486 39.6565 81.1854H39.6365V81.1854ZM74.5815 74.0063C68.0715 80.4448 59.2415 84.0714 50.0265 84.0887C48.4965 84.0788 46.9665 83.9652 45.4515 83.748C45.1565 83.7011 44.879 83.585 44.6415 83.4048C44.404 83.2246 44.2165 82.9925 44.094 82.7234C43.9715 82.4543 43.919 82.1606 43.9415 81.8668C43.964 81.573 44.059 81.2891 44.219 81.0422C46.4265 78.1464 47.419 74.5223 46.994 70.9203C46.5215 68.8663 45.489 66.9778 44.009 65.4595C42.529 63.9412 40.659 62.85 38.599 62.3044C38.289 62.1859 37.889 62.0526 37.429 61.9094C32.649 60.3887 28.184 58.2754 30.524 50.7309C31.624 47.2055 30.564 45.3638 29.484 44.4405C27.184 42.4655 22.769 43.063 18.709 44.2529C18.3365 44.3517 17.9465 44.3541 17.574 44.2578C17.2015 44.1616 16.8615 43.9715 16.5865 43.7073C16.3115 43.4432 16.109 43.1099 16.004 42.747C15.899 42.3841 15.889 41.9965 15.979 41.6262C17.2015 36.4665 19.6115 31.6573 23.024 27.5691C23.239 27.3222 23.509 27.1272 23.8115 26.9988C24.114 26.8704 24.444 26.8112 24.7715 26.826C25.1015 26.8408 25.4215 26.9297 25.7115 27.0852C26.0015 27.2408 26.2515 27.4605 26.4415 27.7271C28.6765 30.8476 31.9165 34.2693 35.4415 34.4223H35.6915C36.959 34.3557 38.184 33.9508 39.234 33.2497C40.284 32.5486 41.124 31.5783 41.6615 30.4427C45.629 24.4708 51.454 19.9357 58.2615 17.5213C59.7465 17.067 61.3315 17.0399 62.8315 17.4423C67.4715 19.242 71.6665 21.9996 75.1415 25.5299C75.4215 25.8163 75.619 26.1718 75.709 26.5594C75.799 26.947 75.7815 27.3518 75.6565 27.7296C75.5315 28.1073 75.304 28.4455 74.999 28.7072C74.694 28.9689 74.324 29.1417 73.9265 29.2083C67.5065 30.3094 59.2065 32.477 58.1315 36.4319C57.6315 38.3477 58.5865 40.2091 61.0315 41.9668C70.4515 48.7164 73.2165 53.9008 71.7765 56.0437C70.449 57.7249 69.5515 59.6974 69.1565 61.7909C68.7615 63.8844 68.879 66.0446 69.5015 68.0862C70.424 69.7255 71.9215 70.9747 73.7115 71.6017C73.7115 71.6017 75.4865 72.609 74.5965 74.0063H74.5765H74.5815ZM80.0265 67.0642C79.564 67.6246 78.974 68.0714 78.304 68.3677C77.634 68.6639 76.904 68.7997 76.1715 68.7676C75.454 68.654 74.7665 68.3948 74.154 68.0072C73.5415 67.6196 73.019 67.1086 72.6165 66.5112C71.4315 64.2547 72.9965 60.5022 74.6965 57.9693C76.4615 55.3277 77.3115 49.378 63.0865 39.1821C61.8915 38.3279 61.4315 37.6268 61.5115 37.3404C62.0115 35.5185 69.7315 33.1633 78.5115 32.0425C78.9565 31.9857 79.4065 32.0622 79.809 32.2597C80.2115 32.4572 80.5415 32.7683 80.7615 33.1534C83.6615 38.3723 85.119 44.2529 84.9915 50.2051C84.864 56.1572 83.1515 61.9711 80.0265 67.0642V67.0642Z" fill="#BAC0CE"/>
+</svg>
diff --git a/src/scss/base.scss b/src/scss/base.scss
index f7bad93b..17e5939e 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -3,7 +3,7 @@ html {
 }
 
 body {
-    min-width: 1010px;
+    // min-width: 1010px;
 
     &.layout_frontend {
         @media (prefers-color-scheme: dark) {
@@ -33,9 +33,9 @@ body {
 
 .container {
     margin: 0 auto;
-    max-width: none !important;
-    padding: 0;
-    width: 980px;
+    max-width: 1200px !important;
+    padding: 0 15px;
+    width: 100%;
 }
 
 .page-header, .secondary-header {
@@ -269,3 +269,35 @@ code {
         color: themed('textMuted') !important;
     }
 }
+
+
+.vault-item {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    margin: 10px 0;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    
+    @include themify($themes) {
+        background-color: themed('bgSwapColor');
+        &:hover {
+            background-color: rgba(32, 36, 45, 0.5);
+            border-color: rgba(255, 255, 255, 0.125)
+        }
+    }
+
+    &:hover {
+        background-color: rgba(32, 36, 45, 0.06);
+        border-color: rgba(32, 36, 45, 0.5);
+    }
+
+    .table-list-icon {
+        max-width: 30px;
+        width: 30px;
+        padding: 0 4px;
+        img {
+            max-width: 100%;
+        }
+    }
+}
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
index b1f514bd..e311167d 100644
--- a/src/scss/cards.scss
+++ b/src/scss/cards.scss
@@ -1,7 +1,6 @@
 .card {
     @include themify($themes) {
         background-color: themed('foregroundColor');
-        border-color: themed('borderColor');
         color: themed('textColor');
     }
     
diff --git a/src/scss/navigation.scss b/src/scss/navigation.scss
index 89d9e85a..8c9b8908 100644
--- a/src/scss/navigation.scss
+++ b/src/scss/navigation.scss
@@ -26,6 +26,9 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
+                @include themify($themes) {
+                    color: themed('infoTextColor') !important;
+                }
                 &.text-muted {
                     @include themify($themes) {
                         color: themed('dropdownTextMuted') !important;
diff --git a/src/scss/tables.scss b/src/scss/tables.scss
index 6b9cf59d..038c952f 100644
--- a/src/scss/tables.scss
+++ b/src/scss/tables.scss
@@ -3,6 +3,36 @@
         color: themed('textColor');
     }
 
+    &.table td, .table th {
+        &:not(tr:first-child td) {
+            @include themify($themes) {
+                border-top: 1px solid themed('separator');
+            }
+        }
+    }
+
+    thead th {
+        border-top: none;
+    }
+
+    tr:first-child {
+        td {
+            border: none;
+        }
+    }
+
+    tr.vault-item {
+        display: flex;
+        width: calc(50% - 10px);
+        align-items: center;
+        padding: 15px;
+        margin: 10px 0;
+        border-radius: 6px;
+        @include themify($themes) {
+            background-color: themed('bgSwapColor');
+        }
+    }
+
     td {
         vertical-align: middle;
         @include themify($themes) {
@@ -75,14 +105,15 @@
     }
 
     td.table-list-icon {
-        max-width: 45px;
+        max-width: 30px;
         text-align: center;
-        width: 45px;
+        width: 30px;
         
         img {
-            @extend .rounded;
-            @extend .img-fluid;
-            max-height: 24px;
+            // @extend .rounded;
+            // @extend .img-fluid;
+            // max-height: 24px;
+            max-width: 100%;
         }
     }
 
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 6853cdba..cd62ed8c 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -65,11 +65,11 @@ $btn-font-weight: 600;
 $lead-font-weight: normal;
 
 $grid-breakpoints: (
-  xs: 0,
-  sm: 1px,
-  md: 2px,
-  lg: 3px,
-  xl: 4px
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px
 );
 
 $text-color: #333333;
@@ -250,6 +250,7 @@ $themes: (
         badgeSecondaryText: $white,
         bgPrimaryColor: $darkPrimary,
         bgLightColor: $darkDarkBlue2,
+        bgSwapColor: $darkDarkBlue2,
         borderColor: $darkBlue1,
         borderPrimaryColor: $darkPrimary,
         btnDanger: $darkDanger,