diff --git a/apps/web/src/app/settings/preferences.component.html b/apps/web/src/app/settings/preferences.component.html
index 828c251989..984ae7536a 100644
--- a/apps/web/src/app/settings/preferences.component.html
+++ b/apps/web/src/app/settings/preferences.component.html
@@ -1,106 +1,77 @@
 <app-header></app-header>
 
 <bit-container>
-  <p>{{ "preferencesDesc" | i18n }}</p>
-  <form [formGroup]="form" (ngSubmit)="submit()" ngNativeValidate>
-    <div class="row">
-      <div class="col-6">
-        <app-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
-          <span *ngIf="policy.timeout && policy.action">
-            {{
-              "vaultTimeoutPolicyWithActionInEffect"
-                | i18n: policy.timeout.hours : policy.timeout.minutes : (policy.action | i18n)
-            }}
-          </span>
-          <span *ngIf="policy.timeout && !policy.action">
-            {{ "vaultTimeoutPolicyInEffect" | i18n: policy.timeout.hours : policy.timeout.minutes }}
-          </span>
-          <span *ngIf="!policy.timeout && policy.action">
-            {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
-          </span>
-        </app-callout>
-        <app-vault-timeout-input
-          [vaultTimeoutOptions]="vaultTimeoutOptions"
-          [formControl]="form.controls.vaultTimeout"
-          ngDefaultControl
-        >
-        </app-vault-timeout-input>
-      </div>
-    </div>
+  <p bitTypography="body1">{{ "preferencesDesc" | i18n }}</p>
+  <form [formGroup]="form" [bitSubmit]="submit" class="tw-w-1/2">
+    <app-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
+      <span *ngIf="policy.timeout && policy.action">
+        {{
+          "vaultTimeoutPolicyWithActionInEffect"
+            | i18n: policy.timeout.hours : policy.timeout.minutes : (policy.action | i18n)
+        }}
+      </span>
+      <span *ngIf="policy.timeout && !policy.action">
+        {{ "vaultTimeoutPolicyInEffect" | i18n: policy.timeout.hours : policy.timeout.minutes }}
+      </span>
+      <span *ngIf="!policy.timeout && policy.action">
+        {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
+      </span>
+    </app-callout>
+    <app-vault-timeout-input
+      [vaultTimeoutOptions]="vaultTimeoutOptions"
+      [formControl]="form.controls.vaultTimeout"
+      ngDefaultControl
+    >
+    </app-vault-timeout-input>
     <ng-container *ngIf="availableVaultTimeoutActions$ | async as availableVaultTimeoutActions">
-      <div *ngIf="availableVaultTimeoutActions.length > 1" class="form-group">
-        <label>{{ "vaultTimeoutAction" | i18n }}</label>
-        <div
+      <bit-radio-group
+        formControlName="vaultTimeoutAction"
+        *ngIf="availableVaultTimeoutActions.length > 1"
+      >
+        <bit-label>{{ "vaultTimeoutAction" | i18n }}</bit-label>
+        <bit-radio-button
           *ngIf="availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)"
-          class="form-check form-check-block"
+          id="vaultTimeoutActionLock"
+          [value]="VaultTimeoutAction.Lock"
         >
-          <input
-            class="form-check-input"
-            type="radio"
-            name="vaultTimeoutAction"
-            id="vaultTimeoutActionLock"
-            value="{{ VaultTimeoutAction.Lock }}"
-            formControlName="vaultTimeoutAction"
-          />
-          <label class="form-check-label" for="vaultTimeoutActionLock">
-            {{ "lock" | i18n }}
-            <small>{{ "vaultTimeoutActionLockDesc" | i18n }}</small>
-          </label>
-        </div>
-        <div
+          <bit-label>{{ "lock" | i18n }}</bit-label>
+          <bit-hint>{{ "vaultTimeoutActionLockDesc" | i18n }}</bit-hint>
+        </bit-radio-button>
+        <bit-radio-button
           *ngIf="availableVaultTimeoutActions.includes(VaultTimeoutAction.LogOut)"
-          class="form-check mt-2 form-check-block"
+          id="vaultTimeoutActionLogOut"
+          [value]="VaultTimeoutAction.LogOut"
         >
-          <input
-            class="form-check-input"
-            type="radio"
-            name="vaultTimeoutAction"
-            id="vaultTimeoutActionLogOut"
-            value="{{ VaultTimeoutAction.LogOut }}"
-            formControlName="vaultTimeoutAction"
-          />
-          <label class="form-check-label" for="vaultTimeoutActionLogOut">
-            {{ "logOut" | i18n }}
-            <small>{{ "vaultTimeoutActionLogOutDesc" | i18n }}</small>
-          </label>
-        </div>
-      </div>
+          <bit-label>{{ "logOut" | i18n }}</bit-label>
+          <bit-hint>{{ "vaultTimeoutActionLogOutDesc" | i18n }}</bit-hint>
+        </bit-radio-button>
+      </bit-radio-group>
     </ng-container>
-    <div class="row">
-      <div class="col-6">
-        <div class="form-group">
-          <div class="d-flex">
-            <label for="locale">{{ "language" | i18n }}</label>
-            <a
-              class="ml-auto"
-              href="https://bitwarden.com/help/localization/"
-              target="_blank"
-              rel="noreferrer"
-              appA11yTitle="{{ 'learnMore' | i18n }}"
-            >
-              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-            </a>
-          </div>
-          <select id="locale" name="Locale" formControlName="locale" class="form-control">
-            <option *ngFor="let o of localeOptions" [ngValue]="o.value">{{ o.name }}</option>
-          </select>
-          <small class="form-text text-muted">{{ "languageDesc" | i18n }}</small>
-        </div>
-      </div>
-    </div>
-    <div class="form-group">
-      <div class="form-check">
-        <input
-          class="form-check-input"
-          type="checkbox"
-          id="enableFavicons"
-          name="enableFavicons"
-          formControlName="enableFavicons"
-        />
-        <label class="form-check-label" for="enableFavicons">
-          {{ "enableFavicon" | i18n }}
-        </label>
+    <bit-form-field>
+      <bit-label
+        >{{ "language" | i18n }}
         <a
+          bitLink
+          class="tw-float-right"
+          href="https://bitwarden.com/help/localization/"
+          target="_blank"
+          rel="noreferrer"
+          appA11yTitle="{{ 'learnMore' | i18n }}"
+        >
+          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+        </a>
+      </bit-label>
+      <bit-select formControlName="locale" id="locale">
+        <bit-option *ngFor="let o of localeOptions" [value]="o.value" [label]="o.name"></bit-option>
+      </bit-select>
+      <bit-hint>{{ "languageDesc" | i18n }}</bit-hint>
+    </bit-form-field>
+    <bit-form-control>
+      <input type="checkbox" bitCheckbox formControlName="enableFavicons" />
+      <bit-label
+        >{{ "enableFavicon" | i18n }}
+        <a
+          bitLink
           href="https://bitwarden.com/help/website-icons/"
           target="_blank"
           rel="noreferrer"
@@ -108,22 +79,16 @@
         >
           <i class="bwi bwi-question-circle" aria-hidden="true"></i>
         </a>
-      </div>
-      <small class="form-text text-muted">{{ "faviconDesc" | i18n }}</small>
-    </div>
-    <div class="row">
-      <div class="col-6">
-        <div class="form-group">
-          <label for="theme">{{ "theme" | i18n }}</label>
-          <select id="theme" name="theme" formControlName="theme" class="form-control">
-            <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
-          </select>
-          <small class="form-text text-muted">{{ "themeDesc" | i18n }}</small>
-        </div>
-      </div>
-    </div>
-    <button type="submit" class="btn btn-primary">
-      {{ "save" | i18n }}
-    </button>
+      </bit-label>
+      <bit-hint>{{ "faviconDesc" | i18n }}</bit-hint>
+    </bit-form-control>
+    <bit-form-field>
+      <bit-label>{{ "theme" | i18n }}</bit-label>
+      <bit-select formControlName="theme" id="theme">
+        <bit-option *ngFor="let o of themeOptions" [value]="o.value" [label]="o.name"></bit-option>
+      </bit-select>
+      <bit-hint>{{ "themeDesc" | i18n }}</bit-hint>
+    </bit-form-field>
+    <button bitButton bitFormButton type="submit" buttonType="primary">{{ "save" | i18n }}</button>
   </form>
 </bit-container>
diff --git a/apps/web/src/app/settings/preferences.component.ts b/apps/web/src/app/settings/preferences.component.ts
index a6443b453e..1092a31d5c 100644
--- a/apps/web/src/app/settings/preferences.component.ts
+++ b/apps/web/src/app/settings/preferences.component.ts
@@ -158,7 +158,7 @@ export class PreferencesComponent implements OnInit {
     this.form.setValue(initialFormValues, { emitEvent: false });
   }
 
-  async submit() {
+  submit = async () => {
     if (!this.form.controls.vaultTimeout.valid) {
       this.platformUtilsService.showToast(
         "error",
@@ -188,7 +188,7 @@ export class PreferencesComponent implements OnInit {
         this.i18nService.t("preferencesUpdated"),
       );
     }
-  }
+  };
 
   ngOnDestroy() {
     this.destroy$.next();