diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index a34198a7..883a9cd2 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -16,6 +16,7 @@ export class RouteNames {
   public static EMBED = 'embed';
   public static LOGOUT = 'logout';
   public static SIGN_UP = 'sign-up';
+  public static CLEAR_ACCOUNT = 'clear-account';
   public static LOG_IN = 'log-in';
   public static LOAD_SEED = 'load-seed';
   public static APPROVE = 'approve';
@@ -31,7 +32,16 @@ const routes: Routes = [
   { path: RouteNames.LOGOUT, component: LogoutComponent, pathMatch: 'full' },
   { path: RouteNames.SIGN_UP, component: SignUpComponent, pathMatch: 'full' },
   { path: RouteNames.LOG_IN, component: LogInComponent, pathMatch: 'full' },
-  { path: RouteNames.LOAD_SEED, component: LogInSeedComponent, pathMatch: 'full' },
+  {
+    path: RouteNames.CLEAR_ACCOUNT,
+    component: ClearAccountComponent,
+    pathMatch: 'full',
+  },
+  {
+    path: RouteNames.LOAD_SEED,
+    component: LogInSeedComponent,
+    pathMatch: 'full',
+  },
   { path: RouteNames.APPROVE, component: ApproveComponent, pathMatch: 'full' },
   { path: RouteNames.AUTH_GOOGLE, component: GoogleComponent, pathMatch: 'full' },
   { path: RouteNames.JUMIO_SUCCESS, component: JumioSuccessComponent, pathMatch: 'full'},
@@ -41,6 +51,6 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 29f9b09d..cd935577 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,20 +1,20 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { EmbedComponent } from './embed/embed.component';
 import { HomeComponent } from './home/home.component';
-import {FormsModule} from '@angular/forms';
-import {IdentityService} from './identity.service';
-import {CookieModule} from 'ngx-cookie';
+import { FormsModule } from '@angular/forms';
+import { IdentityService } from './identity.service';
+import { CookieModule } from 'ngx-cookie';
 import { LogoutComponent } from './logout/logout.component';
 import { BannerComponent } from './banner/banner.component';
 import { SignUpComponent } from './sign-up/sign-up.component';
-import {AccountService} from './account.service';
-import {EntropyService} from './entropy.service';
+import { AccountService } from './account.service';
+import { EntropyService } from './entropy.service';
 import { LogInComponent } from './log-in/log-in.component';
-import {HttpClientModule} from '@angular/common/http';
+import { ClearAccountComponent } from './clear-account/clear-account.component';
+import { HttpClientModule } from '@angular/common/http';
 import { ApproveComponent } from './approve/approve.component';
 import { LogInSeedComponent } from './log-in-seed/log-in-seed.component';
 import { GoogleComponent } from './auth/google/google.component';
@@ -32,6 +32,7 @@ import { JumioErrorComponent } from './jumio/jumio-error/jumio-error.component';
     BannerComponent,
     SignUpComponent,
     LogInComponent,
+    ClearAccountComponent,
     ApproveComponent,
     LogInSeedComponent,
     GoogleComponent,
@@ -45,13 +46,9 @@ import { JumioErrorComponent } from './jumio/jumio-error/jumio-error.component';
     HttpClientModule,
     AppRoutingModule,
     FormsModule,
-    CookieModule.forRoot()
-  ],
-  providers: [
-    IdentityService,
-    EntropyService,
-    AccountService,
+    CookieModule.forRoot(),
   ],
-  bootstrap: [AppComponent]
+  providers: [IdentityService, EntropyService, AccountService],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/src/app/clear-account/clear-account.component.html b/src/app/clear-account/clear-account.component.html
new file mode 100644
index 00000000..e542a114
--- /dev/null
+++ b/src/app/clear-account/clear-account.component.html
@@ -0,0 +1,56 @@
+<app-banner></app-banner>
+
+<div
+  class="container home-container"
+  *ngIf="globalVars.inTab || globalVars.webview"
+>
+  <div class="font-weight-bold fs-30px mb-20px">Clear Login Data</div>
+  <div class="fs-15px">
+    Confirming this step will remove your login data from your browser. If you
+    use a seedphrase to login to your account, make sure you have recorded this
+    securely.
+  </div>
+  <div class="fc-red fs-18px pt-15px">
+    Enter "<b>I understand log me out</b>" to confirm you want to clear your
+    login data.
+  </div>
+  <div class="form-group pt-10px">
+    <textarea
+      [(ngModel)]="clearAccountCheck"
+      class="form-control fs-15px"
+      rows="4"
+    ></textarea>
+  </div>
+  <div class="d-flex align-items-center" style="margin-top: -15px">
+    <div class="fs-12px mt-15px text-grey6">
+      By proceeding, you agree that you will need to re-enter your seed phrase
+      on login to access your account.
+    </div>
+  </div>
+  <div class="d-flex pt-15px justify-content-between">
+    <button
+      class="btn btn-outline-primary font-weight-bold fs-15px sign-up-btn"
+      [routerLink]="['/log-in']"
+    >
+      Back
+    </button>
+    <div>
+      <button
+        *ngIf="clearAccountCheck == 'I understand log me out'"
+        (click)="clearAccounts()"
+        class="btn btn-primary font-weight-bold fs-15px ml-10px sign-up-btn"
+        [routerLink]="['/log-in']"
+      >
+        Confirm
+      </button>
+      <!-- Show blocked button if text entered does not equal required text-->
+      <button
+        *ngIf="clearAccountCheck !== 'I understand log me out'"
+        class="btn btn-primary font-weight-bold fs-15px ml-10px sign-up-btn"
+        disabled
+      >
+        Confirm
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/clear-account/clear-account.component.scss b/src/app/clear-account/clear-account.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/clear-account/clear-account.component.spec.ts b/src/app/clear-account/clear-account.component.spec.ts
new file mode 100644
index 00000000..ed431cf8
--- /dev/null
+++ b/src/app/clear-account/clear-account.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClearAccountComponent } from './clear-account.component';
+
+describe('ClearAccountComponent', () => {
+  let component: ClearAccountComponent;
+  let fixture: ComponentFixture<ClearAccountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ClearAccountComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClearAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/clear-account/clear-account.component.ts b/src/app/clear-account/clear-account.component.ts
new file mode 100644
index 00000000..3530925e
--- /dev/null
+++ b/src/app/clear-account/clear-account.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { AccountService } from '../account.service';
+import { GlobalVarsService } from '../global-vars.service';
+
+@Component({
+  selector: 'app-clear-account',
+  templateUrl: './clear-account.component.html',
+  styleUrls: ['./clear-account.component.scss'],
+})
+export class ClearAccountComponent {
+  clearAccountCheck = '';
+
+  constructor(
+    private accountService: AccountService,
+    public globalVars: GlobalVarsService
+  ) {}
+
+  clearAccounts(): void {
+    const publicKeys = this.accountService.getPublicKeys();
+    for (const key of publicKeys) {
+      this.accountService.deleteUser(key);
+    }
+  }
+
+  clearAccountsCancel(): void {
+    this.clearAccountCheck = '';
+  }
+}
diff --git a/src/app/log-in/log-in.component.html b/src/app/log-in/log-in.component.html
index e434b6f0..df7f6fa3 100644
--- a/src/app/log-in/log-in.component.html
+++ b/src/app/log-in/log-in.component.html
@@ -1,6 +1,9 @@
 <app-banner></app-banner>
 
-<div class="container home-container" *ngIf="globalVars.inTab || globalVars.webview">
+<div
+  class="container home-container"
+  *ngIf="globalVars.inTab || globalVars.webview"
+>
   <div class="font-weight-bold fs-30px mb-20px">
     Log in to {{ globalVars.hostname }}
   </div>
@@ -8,21 +11,51 @@
   <div class="row">
     <div class="d-flex flex-column col-sm-6" *ngIf="hasUsers">
       <ul class="list-group mt-7px mb-30px">
-        <li *ngFor="let item of allUsers | keyvalue" class="list-group-item list-group-item-action cursor-pointer" (click)="selectAccount(item.key)">
+        <li
+          *ngFor="let item of allUsers | keyvalue"
+          class="list-group-item list-group-item-action cursor-pointer"
+          (click)="selectAccount(item.key)"
+        >
           <div class="w-100">
-            <div *ngIf="!item.value.username" class="text-truncate">{{ item.key }}&hellip;</div>
+            <div *ngIf="!item.value.username" class="text-truncate">
+              {{ item.key }}&hellip;
+            </div>
             <div *ngIf="item.value.username" class="d-flex align-items-center">
-              <div class="avatar mr-15px" [appAvatar]="item.key"></div>
+              <div
+                class="avatar mr-15px"
+                [style.background-image]="'url(' + item.value.profilePic + ')'"
+              ></div>
               <div class="text-truncate">{{ item.value.username }}</div>
             </div>
           </div>
         </li>
       </ul>
     </div>
-    <div class="d-flex align-items-center flex-column" [class.col-sm-6]="hasUsers" [class.col-sm-12]="!hasUsers">
-      <button class="btn btn-default log-in-google mb-30px" (click)="launchGoogle()" *ngIf="!globalVars.hideGoogle"></button>
-      <button class="btn btn-default log-in-seed" [routerLink]="['/load-seed']"></button>
-      <button class="btn btn-default sign-up-seed" [routerLink]="['/sign-up']"></button>
+    <div
+      class="d-flex align-items-center flex-column"
+      [class.col-sm-6]="hasUsers"
+      [class.col-sm-12]="!hasUsers"
+    >
+      <button
+        class="btn btn-default log-in-google mb-30px"
+        (click)="launchGoogle()"
+        *ngIf="!globalVars.hideGoogle"
+      ></button>
+      <button
+        class="btn btn-default log-in-seed"
+        [routerLink]="['/load-seed']"
+      ></button>
+      <button
+        class="btn btn-default sign-up-seed"
+        [routerLink]="['/sign-up']"
+      ></button>
+      <button
+        *ngIf="hasUsers"
+        class="btn btn-default log-in-clear-data mt-30px"
+        [routerLink]="['/clear-account']"
+      >
+        Clear Login Data
+      </button>
     </div>
   </div>
 
@@ -36,21 +69,48 @@
         <span *ngIf="globalVars.accessLevelRequest >= 2">✅</span>
         <span *ngIf="globalVars.accessLevelRequest < 2">❌</span>
         My basic information
-        <div class="fs-14px text-muted"><b>{{ globalVars.hostname }}</b> can access my public key and any other public information</div>
+        <div class="fs-14px text-muted">
+          <b>{{ globalVars.hostname }}</b> can access my public key and any
+          other public information
+        </div>
       </li>
       <li class="list-group-item">
         <span *ngIf="globalVars.accessLevelRequest >= 3">✅</span>
         <span *ngIf="globalVars.accessLevelRequest < 3">❌</span>
         Post, message, like, and follow on my behalf
-        <div class="fs-14px text-muted" *ngIf="globalVars.accessLevelRequest < 3"><b>{{ globalVars.hostname }}</b> will require approval to post, message, like, and follow</div>
-        <div class="fs-14px text-muted" *ngIf="globalVars.accessLevelRequest >= 3"><b>{{ globalVars.hostname }}</b> may post, message, like, and follow without requiring approval</div>
+        <div
+          class="fs-14px text-muted"
+          *ngIf="globalVars.accessLevelRequest < 3"
+        >
+          <b>{{ globalVars.hostname }}</b> will require approval to post,
+          message, like, and follow
+        </div>
+        <div
+          class="fs-14px text-muted"
+          *ngIf="globalVars.accessLevelRequest >= 3"
+        >
+          <b>{{ globalVars.hostname }}</b> may post, message, like, and follow
+          without requiring approval
+        </div>
       </li>
       <li class="list-group-item">
         <span *ngIf="globalVars.accessLevelRequest === 4">✅</span>
         <span *ngIf="globalVars.accessLevelRequest < 4">❌</span>
         Buy, sell, and send coins on my behalf
-        <div class="fs-14px text-muted" *ngIf="globalVars.accessLevelRequest < 4"><b>{{ globalVars.hostname }}</b> will require approval to buy, sell, or send coins</div>
-        <div class="fs-14px text-muted" *ngIf="globalVars.accessLevelRequest === 4"><b>{{ globalVars.hostname }}</b> may buy, sell, and send coins without requiring approval</div>
+        <div
+          class="fs-14px text-muted"
+          *ngIf="globalVars.accessLevelRequest < 4"
+        >
+          <b>{{ globalVars.hostname }}</b> will require approval to buy, sell,
+          or send coins
+        </div>
+        <div
+          class="fs-14px text-muted"
+          *ngIf="globalVars.accessLevelRequest === 4"
+        >
+          <b>{{ globalVars.hostname }}</b> may buy, sell, and send coins without
+          requiring approval
+        </div>
       </li>
     </ul>
   </div>
diff --git a/src/app/log-in/log-in.component.scss b/src/app/log-in/log-in.component.scss
index e69de29b..65be59bb 100644
--- a/src/app/log-in/log-in.component.scss
+++ b/src/app/log-in/log-in.component.scss
@@ -0,0 +1,23 @@
+.log-in-clear-data {
+  text-decoration: underline;
+}
+
+.log-in-google,
+.log-in-seed,
+.sign-up-seed {
+  height: 72px;
+  width: 290px;
+  background-size: 290px 72px;
+}
+
+.log-in-google {
+  background-image: url(/assets/log_in_google.png);
+}
+
+.log-in-seed {
+  background-image: url(/assets/log_in_seed.png);
+}
+
+.sign-up-seed {
+  background-image: url(/assets/sign_up_seed.png);
+}
diff --git a/src/app/log-in/log-in.component.ts b/src/app/log-in/log-in.component.ts
index 16904cfc..8f53213c 100644
--- a/src/app/log-in/log-in.component.ts
+++ b/src/app/log-in/log-in.component.ts
@@ -1,35 +1,28 @@
-import {Component, OnInit} from '@angular/core';
-import {AccountService} from '../account.service';
-import {IdentityService} from '../identity.service';
-import {GlobalVarsService} from '../global-vars.service';
-import {BackendAPIService} from '../backend-api.service';
-import {Network} from '../../types/identity';
-import {CryptoService} from '../crypto.service';
-import {EntropyService} from '../entropy.service';
-import {GoogleDriveService} from '../google-drive.service';
-import {RouteNames} from '../app-routing.module';
+import { Component, OnInit } from '@angular/core';
+import { AccountService } from '../account.service';
+import { IdentityService } from '../identity.service';
+import { GlobalVarsService } from '../global-vars.service';
+import { BackendAPIService } from '../backend-api.service';
+import { Network } from '../../types/identity';
+import { GoogleDriveService } from '../google-drive.service';
+import { RouteNames } from '../app-routing.module';
 
 @Component({
   selector: 'app-log-in',
   templateUrl: './log-in.component.html',
-  styleUrls: ['./log-in.component.scss']
+  styleUrls: ['./log-in.component.scss'],
 })
 export class LogInComponent implements OnInit {
-  loading = false;
-  showAccessLevels = true;
-
-  allUsers: {[key: string]: any} = {};
+  allUsers: { [key: string]: any } = {};
   hasUsers = false;
+  showAccessLevels = true;
 
   constructor(
     private accountService: AccountService,
     private identityService: IdentityService,
-    private cryptoService: CryptoService,
-    private entropyService: EntropyService,
-    private googleDrive: GoogleDriveService,
     public globalVars: GlobalVarsService,
-    private backendApi: BackendAPIService,
-  ) { }
+    private backendApi: BackendAPIService
+  ) {}
 
   ngOnInit(): void {
     // Load profile pictures and usernames
@@ -47,7 +40,7 @@ export class LogInComponent implements OnInit {
     this.hasUsers = publicKeys.length > 0;
 
     if (publicKeys.length > 0) {
-      this.backendApi.GetUsersStateless(publicKeys).subscribe(res2 => {
+      this.backendApi.GetUsersStateless(publicKeys).subscribe((res2) => {
         for (const user of res2.UserList) {
           this.allUsers[user.PublicKeyBase58Check] = {
             username: user.ProfileEntryResponse?.Username,
@@ -59,7 +52,9 @@ export class LogInComponent implements OnInit {
   }
 
   launchGoogle(): void {
-    const redirectUri = new URL(`${window.location.origin}/${RouteNames.AUTH_GOOGLE}`);
+    const redirectUri = new URL(
+      `${window.location.origin}/${RouteNames.AUTH_GOOGLE}`
+    );
     if (this.globalVars.network === Network.testnet) {
       redirectUri.searchParams.append('testnet', 'true');
     }
@@ -69,20 +64,16 @@ export class LogInComponent implements OnInit {
     oauthUri.searchParams.append('client_id', GoogleDriveService.CLIENT_ID);
     oauthUri.searchParams.append('scope', GoogleDriveService.DRIVE_SCOPE);
     oauthUri.searchParams.append('response_type', 'token');
-    // TODO: Investigate using this parameter to defend against CSRF attacks
-    // pass on webview state to Google OAuth state
-    // https://stackoverflow.com/questions/7722062/google-oauth-2-0-redirect-uri-with-several-parameters
-    const stateString = btoa(JSON.stringify({
-      webview: this.globalVars.webview,
-      testnet: this.globalVars.network === Network.testnet
-    }));
-    oauthUri.searchParams.append('state', stateString);
 
     window.location.href = oauthUri.toString();
   }
 
   selectAccount(publicKey: string): void {
-    this.accountService.setAccessLevel(publicKey, this.globalVars.hostname, this.globalVars.accessLevelRequest);
+    this.accountService.setAccessLevel(
+      publicKey,
+      this.globalVars.hostname,
+      this.globalVars.accessLevelRequest
+    );
     this.identityService.login({
       users: this.accountService.getEncryptedUsers(),
       publicKeyAdded: publicKey,
diff --git a/src/styles.scss b/src/styles.scss
index ad248c1f..469ccfd4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,24 +1,25 @@
-$primary: #0059F7;
-$danger: #E63946;
+$primary: #0059f7;
+$danger: #e63946;
 $secondary: #ecf0f1;
-$success: #32ED4B;
+$success: #32ed4b;
 $info: #689eff;
 
 $feed-border-radius: 12px;
-$border-grey: #E5E5E5;
-$staking-grey: #F0F0F0;
-$light-grey-for-divider: #F8F8F8;
-$light-grey-for-divider-2: #FAFAFA;
-$buy-button-blue: #0058F7;
+$border-grey: #e5e5e5;
+$staking-grey: #f0f0f0;
+$light-grey-for-divider: #f8f8f8;
+$light-grey-for-divider-2: #fafafa;
+$buy-button-blue: #0058f7;
 
 // Font colors.
 $light-font-color: #777777;
 $normal-font-color: #222222;
 $red-font-color: #fe3537;
-$green-font-color: #19B028;
+$green-font-color: #19b028;
 
-html, body {
-  font-family: 'Roboto Mono';
+html,
+body {
+  font-family: "Roboto Mono";
   height: 100%;
   width: 100%;
 }
@@ -28,10 +29,15 @@ h1 {
   color: #333333;
 }
 
-h2,h3,h4,h5,h6,p {
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
   margin: 0;
   color: #333333;
-  font-family: 'Roboto Mono';
+  font-family: "Roboto Mono";
   font-weight: normal;
 }
 
@@ -49,194 +55,514 @@ h2,h3,h4,h5,h6,p {
 
 @font-face {
   font-family: "color-emoji";
-  src: local("Apple Color Emoji"),
-       local("Segoe UI Emoji"),
-       local("Segoe UI Symbol"),
-       local("Noto Color Emoji");
+  src: local("Apple Color Emoji"), local("Segoe UI Emoji"),
+    local("Segoe UI Symbol"), local("Noto Color Emoji");
 }
 
 .font-emoji {
-  font-family: 'color-emoji';
+  font-family: "color-emoji";
 }
 
 // Custom font classes.
-.fc-default { color: $normal-font-color; }
-.fc-muted { color: $light-font-color; }
-.fc-blue { color: $buy-button-blue; }
-.fc-red { color: $red-font-color; }
-.fc-green { color: $green-font-color; }
-
-.fs-1 { font-size: 2.5rem }
-.fs-2 { font-size: 2rem }
-.fs-3 { font-size: 1.75rem }
-
-.fs-30px { font-size: 30px; }
-.fs-25px { font-size: 25px; }
-.fs-24px { font-size: 24px; }
-.fs-20px { font-size: 20px; }
-.fs-18px { font-size: 18px; }
-.fs-16px { font-size: 16px; }
-.fs-15px { font-size: 15px; }
-.fs-15px-important { font-size: 15px !important; }
-.fs-14px { font-size: 14px; }
-.fs-13px { font-size: 13px; }
-.fs-12px { font-size: 12px !important; }
+.fc-default {
+  color: $normal-font-color;
+}
+.fc-muted {
+  color: $light-font-color;
+}
+.fc-blue {
+  color: $buy-button-blue;
+}
+.fc-red {
+  color: $red-font-color;
+}
+.fc-green {
+  color: $green-font-color;
+}
+
+.fs-1 {
+  font-size: 2.5rem;
+}
+.fs-2 {
+  font-size: 2rem;
+}
+.fs-3 {
+  font-size: 1.75rem;
+}
+
+.fs-30px {
+  font-size: 30px;
+}
+.fs-25px {
+  font-size: 25px;
+}
+.fs-24px {
+  font-size: 24px;
+}
+.fs-20px {
+  font-size: 20px;
+}
+.fs-18px {
+  font-size: 18px;
+}
+.fs-16px {
+  font-size: 16px;
+}
+.fs-15px {
+  font-size: 15px;
+}
+.fs-15px-important {
+  font-size: 15px !important;
+}
+.fs-14px {
+  font-size: 14px;
+}
+.fs-13px {
+  font-size: 13px;
+}
+.fs-12px {
+  font-size: 12px !important;
+}
 // line heights
-.lh-24px { line-height: 24px; }
-.lh-18px { line-height: 18px; }
-.lh-16px { line-height: 16px; }
-.lh-15px { line-height: 15px; }
-.lh-14px { line-height: 14px; }
-.lh-13px { line-height: 13px; }
-.lh-12px { line-height: 12px; }
-.roboto-regular { font-family: 'Roboto' }
-.roboto-mono { font-family: 'Roboto Mono' }
+.lh-24px {
+  line-height: 24px;
+}
+.lh-18px {
+  line-height: 18px;
+}
+.lh-16px {
+  line-height: 16px;
+}
+.lh-15px {
+  line-height: 15px;
+}
+.lh-14px {
+  line-height: 14px;
+}
+.lh-13px {
+  line-height: 13px;
+}
+.lh-12px {
+  line-height: 12px;
+}
+.roboto-regular {
+  font-family: "Roboto";
+}
+.roboto-mono {
+  font-family: "Roboto Mono";
+}
 
 // Custom border classes.
-.border-color-grey { border-color: $border-grey; }
-.border-color-blue { border-color: $buy-button-blue; }
-.tab-underline-active { border-bottom: solid $buy-button-blue 3px; }
-.tab-underline-inactive { border-bottom: solid rgba(0,0,0,0) 3px; }
+.border-color-grey {
+  border-color: $border-grey;
+}
+.border-color-blue {
+  border-color: $buy-button-blue;
+}
+.tab-underline-active {
+  border-bottom: solid $buy-button-blue 3px;
+}
+.tab-underline-inactive {
+  border-bottom: solid rgba(0, 0, 0, 0) 3px;
+}
 
-.background-color-grey { background-color: #F5F5F5; } // mocks call this G4
-.background-color-light-grey { background-color: $light-grey-for-divider; }
-.background-color-light-pink { background-color: lightpink; }
+.background-color-grey {
+  background-color: #f5f5f5;
+} // mocks call this G4
+.background-color-light-grey {
+  background-color: $light-grey-for-divider;
+}
+.background-color-light-pink {
+  background-color: lightpink;
+}
 
 // Custom padding classes.
-.p-35px { padding: 35px; }
-.pt-35px { padding-top: 35px; }
-.pr-35px { padding-right: 35px; }
-.pb-35px { padding-bottom: 35px; }
-.pl-35px { padding-left: 35px; }
-.py-35px { padding-top: 35px; padding-bottom: 35px;}
-.px-35px { padding-left: 35px; padding-right: 35px;}
-
-.p-30px { padding: 30px; }
-.pt-30px { padding-top: 30px; }
-.pr-30px { padding-right: 30px; }
-.pb-30px { padding-bottom: 30px; }
-.pl-30px { padding-left: 30px; }
-.py-30px { padding-top: 30px; padding-bottom: 30px;}
-.px-30px { padding-left: 30px; padding-right: 30px;}
-
-.p-30px { padding: 30px; }
-.pt-30px { padding-top: 30px; }
-.pr-30px { padding-right: 30px; }
-.pb-30px { padding-bottom: 30px; }
-.pl-30px { padding-left: 30px; }
-.py-30px { padding-top: 30px; padding-bottom: 30px;}
-.px-30px { padding-left: 30px; padding-right: 30px;}
-
-.p-25px { padding: 25px; }
-.pt-25px { padding-top: 25px; }
-.pr-25px { padding-right: 25px; }
-.pb-25px { padding-bottom: 25px; }
-.pl-25px { padding-left: 25px; }
-.py-25px { padding-top: 25px; padding-bottom: 25px;}
-.px-25px { padding-left: 25px; padding-right: 25px;}
-
-.p-20px { padding: 20px; }
-.pt-20px { padding-top: 20px; }
-.pr-20px { padding-right: 20px; }
-.pb-20px { padding-bottom: 20px; }
-.pl-20px { padding-left: 20px; }
-.py-20px { padding-top: 20px; padding-bottom: 20px;}
-.px-20px { padding-left: 20px; padding-right: 20px;}
-
-.p-15px { padding: 15px; }
-.pt-15px { padding-top: 15px; }
-.pr-15px { padding-right: 15px; }
-.pb-15px { padding-bottom: 15px; }
-.pl-15px { padding-left: 15px; }
-.py-15px { padding-top: 15px; padding-bottom: 15px;}
-.px-15px { padding-left: 15px; padding-right: 15px;}
-
-.p-10px { padding: 10px; }
-.pt-10px { padding-top: 10px; }
-.pr-10px { padding-right: 10px; }
-.pb-10px { padding-bottom: 10px; }
-.pl-10px { padding-left: 10px; }
-.py-10px { padding-top: 10px; padding-bottom: 10px;}
-.px-10px { padding-left: 10px; padding-right: 10px;}
-
-.p-5px { padding: 5px; }
-.pt-5px { padding-top: 5px; }
-.pr-5px { padding-right: 5px; }
-.pb-5px { padding-bottom: 5px; }
-.pl-5px { padding-left: 5px; }
-.py-5px { padding-top: 5px; padding-bottom: 5px;}
-.px-5px { padding-left: 5px; padding-right: 5px;}
-
-.p-2px { padding: 2px; }
-.pt-2px { padding-top: 2px; }
-.pr-2px { padding-right: 2px; }
-.pb-2px { padding-bottom: 2px; }
-.pl-2px { padding-left: 5px; }
-.py-2px { padding-top: 2px; padding-bottom: 2px;}
-.px-2px { padding-left: 2px; padding-right: 2px;}
+.p-35px {
+  padding: 35px;
+}
+.pt-35px {
+  padding-top: 35px;
+}
+.pr-35px {
+  padding-right: 35px;
+}
+.pb-35px {
+  padding-bottom: 35px;
+}
+.pl-35px {
+  padding-left: 35px;
+}
+.py-35px {
+  padding-top: 35px;
+  padding-bottom: 35px;
+}
+.px-35px {
+  padding-left: 35px;
+  padding-right: 35px;
+}
+
+.p-30px {
+  padding: 30px;
+}
+.pt-30px {
+  padding-top: 30px;
+}
+.pr-30px {
+  padding-right: 30px;
+}
+.pb-30px {
+  padding-bottom: 30px;
+}
+.pl-30px {
+  padding-left: 30px;
+}
+.py-30px {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+.px-30px {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.p-30px {
+  padding: 30px;
+}
+.pt-30px {
+  padding-top: 30px;
+}
+.pr-30px {
+  padding-right: 30px;
+}
+.pb-30px {
+  padding-bottom: 30px;
+}
+.pl-30px {
+  padding-left: 30px;
+}
+.py-30px {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+.px-30px {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.p-25px {
+  padding: 25px;
+}
+.pt-25px {
+  padding-top: 25px;
+}
+.pr-25px {
+  padding-right: 25px;
+}
+.pb-25px {
+  padding-bottom: 25px;
+}
+.pl-25px {
+  padding-left: 25px;
+}
+.py-25px {
+  padding-top: 25px;
+  padding-bottom: 25px;
+}
+.px-25px {
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+.p-20px {
+  padding: 20px;
+}
+.pt-20px {
+  padding-top: 20px;
+}
+.pr-20px {
+  padding-right: 20px;
+}
+.pb-20px {
+  padding-bottom: 20px;
+}
+.pl-20px {
+  padding-left: 20px;
+}
+.py-20px {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.px-20px {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.p-15px {
+  padding: 15px;
+}
+.pt-15px {
+  padding-top: 15px;
+}
+.pr-15px {
+  padding-right: 15px;
+}
+.pb-15px {
+  padding-bottom: 15px;
+}
+.pl-15px {
+  padding-left: 15px;
+}
+.py-15px {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.px-15px {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.p-10px {
+  padding: 10px;
+}
+.pt-10px {
+  padding-top: 10px;
+}
+.pr-10px {
+  padding-right: 10px;
+}
+.pb-10px {
+  padding-bottom: 10px;
+}
+.pl-10px {
+  padding-left: 10px;
+}
+.py-10px {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.px-10px {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.p-5px {
+  padding: 5px;
+}
+.pt-5px {
+  padding-top: 5px;
+}
+.pr-5px {
+  padding-right: 5px;
+}
+.pb-5px {
+  padding-bottom: 5px;
+}
+.pl-5px {
+  padding-left: 5px;
+}
+.py-5px {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.px-5px {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.p-2px {
+  padding: 2px;
+}
+.pt-2px {
+  padding-top: 2px;
+}
+.pr-2px {
+  padding-right: 2px;
+}
+.pb-2px {
+  padding-bottom: 2px;
+}
+.pl-2px {
+  padding-left: 5px;
+}
+.py-2px {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.px-2px {
+  padding-left: 2px;
+  padding-right: 2px;
+}
 
 // Zero padding classes are useful for things like bootstrap columns that have padding added.
-.p-0px { padding: 0px; }
-.pt-0px { padding-top: 0px; }
-.pr-0px { padding-right: 0px; }
-.pb-0px { padding-bottom: 0px; }
-.pl-0px { padding-left: 0px; }
-.py-0px { padding-top: 0px; padding-bottom: 0px;}
-.px-0px { padding-left: 0px; padding-right: 0px;}
+.p-0px {
+  padding: 0px;
+}
+.pt-0px {
+  padding-top: 0px;
+}
+.pr-0px {
+  padding-right: 0px;
+}
+.pb-0px {
+  padding-bottom: 0px;
+}
+.pl-0px {
+  padding-left: 0px;
+}
+.py-0px {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.px-0px {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 
 // Custom margin classes.
-.mt-2px { margin-top: 2px; }
-.mt-7px { margin-top: 7px; }
-
-.m-5px { margin: 5px; }
-.mt-5px { margin-top: 5px; }
-.mr-5px { margin-right: 5px; }
-.mb-5px { margin-bottom: 5px; }
-.ml-5px { margin-left: 5px; }
-
-.m-10px { margin: 10px; }
-.mt-10px { margin-top: 10px; }
-.mr-10px { margin-right: 10px; }
-.mb-10px { margin-bottom: 10px; }
-.ml-10px { margin-left: 10px; }
-
-.m-15px { margin: 15px; }
-.mt-15px { margin-top: 15px; }
-.mr-15px { margin-right: 15px; }
-.mb-15px { margin-bottom: 15px; }
-.ml-15px { margin-left: 15px; }
-
-.m-20px { margin: 20px; }
-.mt-20px { margin-top: 20px; }
-.mr-20px { margin-right: 20px; }
-.mb-20px { margin-bottom: 20px; }
-.ml-20px { margin-left: 20px; }
-.mx-20px { margin-left: 20px; margin-right: 20px; }
-.my-20px { margin-top: 20px; margin-bottom: 20px; }
-
-.m-25px { margin: 25px; }
-.mt-25px { margin-top: 25px; }
-.mr-25px { margin-right: 25px; }
-.mb-25px { margin-bottom: 25px; }
-.ml-25px { margin-left: 25px; }
-.mx-25px { margin-left: 25px; margin-right: 25px; }
-.my-25px { margin-top: 25px; margin-bottom: 25px; }
-
-.m-30px { margin: 30px; }
-.mt-30px { margin-top: 30px; }
-.mr-30px { margin-right: 30px; }
-.mb-30px { margin-bottom: 30px; }
-.ml-30px { margin-left: 30px; }
-.mx-30px { margin-left: 30px; margin-right: 30px; }
-.my-30px { margin-top: 30px; margin-bottom: 30px; }
-
-.br-3px { border-radius: 3px; }
-.br-12px { border-radius: $feed-border-radius; }
-
-.vh-100 { height: 100vh !important; }
-
-.position-fixed { position: fixed; }
-.background-color-white { background-color: white; }
+.mt-2px {
+  margin-top: 2px;
+}
+.mt-7px {
+  margin-top: 7px;
+}
+
+.m-5px {
+  margin: 5px;
+}
+.mt-5px {
+  margin-top: 5px;
+}
+.mr-5px {
+  margin-right: 5px;
+}
+.mb-5px {
+  margin-bottom: 5px;
+}
+.ml-5px {
+  margin-left: 5px;
+}
+
+.m-10px {
+  margin: 10px;
+}
+.mt-10px {
+  margin-top: 10px;
+}
+.mr-10px {
+  margin-right: 10px;
+}
+.mb-10px {
+  margin-bottom: 10px;
+}
+.ml-10px {
+  margin-left: 10px;
+}
+
+.m-15px {
+  margin: 15px;
+}
+.mt-15px {
+  margin-top: 15px;
+}
+.mr-15px {
+  margin-right: 15px;
+}
+.mb-15px {
+  margin-bottom: 15px;
+}
+.ml-15px {
+  margin-left: 15px;
+}
+
+.m-20px {
+  margin: 20px;
+}
+.mt-20px {
+  margin-top: 20px;
+}
+.mr-20px {
+  margin-right: 20px;
+}
+.mb-20px {
+  margin-bottom: 20px;
+}
+.ml-20px {
+  margin-left: 20px;
+}
+.mx-20px {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.my-20px {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.m-25px {
+  margin: 25px;
+}
+.mt-25px {
+  margin-top: 25px;
+}
+.mr-25px {
+  margin-right: 25px;
+}
+.mb-25px {
+  margin-bottom: 25px;
+}
+.ml-25px {
+  margin-left: 25px;
+}
+.mx-25px {
+  margin-left: 25px;
+  margin-right: 25px;
+}
+.my-25px {
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+
+.m-30px {
+  margin: 30px;
+}
+.mt-30px {
+  margin-top: 30px;
+}
+.mr-30px {
+  margin-right: 30px;
+}
+.mb-30px {
+  margin-bottom: 30px;
+}
+.ml-30px {
+  margin-left: 30px;
+}
+.mx-30px {
+  margin-left: 30px;
+  margin-right: 30px;
+}
+.my-30px {
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.br-3px {
+  border-radius: 3px;
+}
+.br-12px {
+  border-radius: $feed-border-radius;
+}
+
+.vh-100 {
+  height: 100vh !important;
+}
+
+.position-fixed {
+  position: fixed;
+}
+.background-color-white {
+  background-color: white;
+}
 
 .home-container {
   max-width: 720px;
@@ -251,7 +577,7 @@ h2,h3,h4,h5,h6,p {
   background-color: $primary;
   padding: 20px;
   text-align: center;
-  color: #FFF;
+  color: #fff;
 }
 
 .full-screen {
@@ -272,37 +598,11 @@ h2,h3,h4,h5,h6,p {
 .sign-up-btn {
   height: 36px;
 }
-
-.log-in-google,
-.log-in-seed,
-.sign-up-google,
-.sign-up-seed {
-  height: 72px;
-  width: 290px;
-  background-size: 290px 72px;
-}
-
-.log-in-google {
-  background-image: url(/assets/log_in_google.png);
-}
-
-.log-in-seed {
-  background-image: url(/assets/log_in_seed.png);
-}
-
-.sign-up-google {
-  background-image: url(/assets/sign_up_google.png);
-}
-
-.sign-up-seed {
-  background-image: url(/assets/sign_up_seed.png);
-}
-
 .google-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 200px
+  height: 200px;
 }
 
 .google-ball {
@@ -315,26 +615,26 @@ h2,h3,h4,h5,h6,p {
 }
 
 .google-ball.blue {
-  background-color: #4285F5;
+  background-color: #4285f5;
 }
 
 .google-ball.red {
-  background-color: #EA4436;
-  animation-delay: .25s;
+  background-color: #ea4436;
+  animation-delay: 0.25s;
 }
 
 .google-ball.yellow {
-  background-color: #FBBD06;
-  animation-delay: .5s;
+  background-color: #fbbd06;
+  animation-delay: 0.5s;
 }
 
 .google-ball.green {
-  background-color: #34A952;
-  animation-delay: .75s;
+  background-color: #34a952;
+  animation-delay: 0.75s;
 }
 
 @keyframes bounce {
-    50% {
-        transform: translateY(25px);
-    }
+  50% {
+    transform: translateY(25px);
+  }
 }