diff --git a/web/src/app/app.component.scss b/web/src/app/app.component.scss
index 1cd6e354..95f7680b 100644
--- a/web/src/app/app.component.scss
+++ b/web/src/app/app.component.scss
@@ -1,20 +1,20 @@
 .container {
     border: 1px solid rgba(0, 0, 0, 0.5);
-    height:100vh;
+    height: 96vh;
 }
 
-
 .main {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px 70px 0;
-    min-width:94%;
+    min-width: 86%;
     margin: 10px auto;
+    overflow-x: hidden;
 }
 
-.sidebar{
-    width:16%;
+.sidebar {
+    width: 14%;
 }
 
 .dashboard-highlight {
diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts
index cdce2a10..b9c9f051 100644
--- a/web/src/app/app.module.ts
+++ b/web/src/app/app.module.ts
@@ -21,7 +21,9 @@ import {
   MatProgressSpinnerModule,
   MatSidenavModule,
   MatListModule,
-  MatSortModule
+  MatSortModule,
+  MatExpansionModule,
+  MatLineModule,
 } from '@angular/material';
 
 
@@ -82,6 +84,8 @@ import * as Rx from 'rxjs/Rx';
     MatSidenavModule,
     MatListModule,
     MatSortModule,
+    MatExpansionModule,
+    MatLineModule,
   ],
   providers: [ElectronService,WebsocketService,WebsocketHandlerService, SidebarService],
   bootstrap: [AppComponent]
diff --git a/web/src/app/pages/settings/settings.component.html b/web/src/app/pages/settings/settings.component.html
index ed6955b7..a62a3eeb 100644
--- a/web/src/app/pages/settings/settings.component.html
+++ b/web/src/app/pages/settings/settings.component.html
@@ -2,92 +2,80 @@
     <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
 </div>
 <div *ngIf="settings !== null">
+
     <button (click)="saveSettings()" mat-fab color="accent" class="mat-fab mat-fab-bottom-right"><mat-icon >save</mat-icon></button>
-    <form *ngIf="settings.SMSGlobal != null">
-        <mat-card class="exchange-card card">
-            <mat-card-header>
-                <mat-card-title>SMS Global Settings</mat-card-title>
-            </mat-card-header>
-            <mat-card-content>
-                <table cellspacing="0">
-                    <tr>
-                        <td>
-                            <mat-checkbox name="smsEnabled" [(ngModel)]="settings.SMSGlobal.Enabled">Enabled</mat-checkbox>
-                        </td>
-                    </tr>
-                </table>
-                <mat-grid-list cols="2" rowHeight="3:1">
-                    <mat-grid-tile>
-                        <mat-form-field>
-                            <input matInput name="smsUsername" [(ngModel)]="settings.SMSGlobal.Username" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Username">
-                        </mat-form-field>
-                    </mat-grid-tile>
-                    <mat-grid-tile>
-                        <mat-form-field>
-                            <input matInput name="smsPassword" [(ngModel)]="settings.SMSGlobal.Password" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Password">
-                        </mat-form-field>
-                    </mat-grid-tile>
-                </mat-grid-list>
-                <mat-grid-list cols="3" rowHeight="2:1" *ngFor="let contact of settings.SMSGlobal?.Contacts">
-                    <mat-grid-tile>
-                        <mat-checkbox name="contactEnabled" [disabled]="!settings?.SMSGlobal.Enabled" [(ngModel)]="contact.Enabled">Enabled</mat-checkbox>
-                    </mat-grid-tile>
-                    <mat-grid-tile>
-                        <mat-form-field>
-                            <input matInput name="contactUsername" [(ngModel)]="contact.Name" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Name">
-                        </mat-form-field>
-                    </mat-grid-tile>
-                    <mat-grid-tile>
-                        <mat-form-field>
-                            <input matInput name="contactPassword" [(ngModel)]="contact.Number" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Number">
-                        </mat-form-field>
-                    </mat-grid-tile>
-                </mat-grid-list>
-            </mat-card-content>
-        </mat-card>
-    </form>
 
-    <form *ngFor="let exchange of settings?.Exchanges">
-        <mat-card class="exchange-card card">
-            <mat-card-header>
-                <mat-card-title>{{exchange.Name}} Exchange Settings</mat-card-title>
-            </mat-card-header>
-            <mat-card-content>
-                <table cellspacing="0">
-                    <tr>
-                        <td>
-                            <mat-checkbox name="exchangeEnabled" [(ngModel)]="exchange.Enabled">Enabled</mat-checkbox>
-                        </td>
-                    </tr>
-                </table>
-                <mat-grid-list cols="3" rowHeight="2:1">
-                    <mat-grid-tile>
-                        <mat-form-field>
-                            <input matInput name="apiKey" [(ngModel)]="exchange.APIKey" [disabled]="!exchange.Enabled" placeholder="Exchange API Key">
-                        </mat-form-field>
-                    </mat-grid-tile>
-                    <mat-grid-tile>
-                        <mat-form-field>
-                            <input matInput name="apiSecretKey" [(ngModel)]="exchange.APISecret" [disabled]="!exchange.Enabled" placeholder="Exchange API Secret Key">
-                        </mat-form-field>
-                    </mat-grid-tile>
-                    <mat-grid-tile>
-                        <mat-form-field>
-                            <input matInput name="apiClientId" [(ngModel)]="exchange.ClientID" [disabled]="!exchange.Enabled" placeholder="Exchange API ClientID (optional)">
-                        </mat-form-field>
-                    </mat-grid-tile>
-                </mat-grid-list>
 
-                <label>Enabled Currencies</label>
+    <mat-accordion>
+        <mat-expansion-panel *ngIf="settings.SMSGlobal != null">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    SMS Global
+                </mat-panel-title>
+                <mat-panel-description>
+                    SMS configuration and contact management
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <form class="form-content">
+                <mat-checkbox name="smsEnabled" [(ngModel)]="settings.SMSGlobal.Enabled">Enabled</mat-checkbox>
+                <div mat-line></div>
+                <mat-form-field>
+                    <input matInput name="smsUsername" [(ngModel)]="settings.SMSGlobal.Username" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Username">
+                </mat-form-field>
+                <mat-form-field>
+                    <input matInput name="smsPassword" [(ngModel)]="settings.SMSGlobal.Password" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Password">
+                </mat-form-field>
 
-                <mat-grid-list cols="6" rowHeight="2:1">
-                    <mat-grid-tile *ngFor="let currency of exchange.AvailablePairs.split(',')">
-                        <mat-checkbox name="availableCurrency" [disabled]="true || !exchange.Enabled">{{currency}}</mat-checkbox>
-                    </mat-grid-tile>
-                </mat-grid-list>
-            </mat-card-content>
-        </mat-card>
-    </form>
+                <div *ngFor="let contact of settings.SMSGlobal?.Contacts">
+                    <mat-checkbox name="contactEnabled" [disabled]="!settings?.SMSGlobal.Enabled" [(ngModel)]="contact.Enabled">Enabled</mat-checkbox>
+                    <div mat-line></div>
+                    <mat-form-field>
+                        <input matInput name="contactUsername" [(ngModel)]="contact.Name" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Name" />
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput name="contactPassword" [(ngModel)]="contact.Number" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Number" />
+                    </mat-form-field>
+                </div>
+            </form>
+        </mat-expansion-panel>
 
 
+        <mat-expansion-panel *ngFor="let exchange of settings?.Exchanges">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    {{exchange.Name}}
+                </mat-panel-title>
+                <mat-panel-description>
+                    Exchange Settings
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <form class="form-content">
+                <mat-checkbox name="exchangeEnabled" [(ngModel)]="exchange.Enabled">Enabled</mat-checkbox>
+                <div mat-line></div>
+                <div *ngIf="exchange.Enabled">
+                    <mat-form-field>
+                        <input matInput name="apiKey" [(ngModel)]="exchange.APIKey" [disabled]="!exchange.Enabled" placeholder="API Key*">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput name="apiSecretKey" [(ngModel)]="exchange.APISecret" [disabled]="!exchange.Enabled" placeholder="API Secret Key*">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput name="apiClientId" [(ngModel)]="exchange.ClientID" [disabled]="!exchange.Enabled" placeholder="API ClientID">
+                    </mat-form-field>
+                    <div mat-line></div>
+
+                    <mat-panel-description>
+                        Enabled Currency pairs
+                    </mat-panel-description>
+                    <div mat-line></div>
+                    <mat-list>
+                        <mat-list-item *ngFor="let currency of exchange.AvailablePairs.split(',')">
+                            <mat-checkbox name="availableCurrency" [disabled]="true || !exchange.Enabled">{{currency}}</mat-checkbox>
+                        </mat-list-item>
+                    </mat-list>
+                </div>
+            </form>
+        </mat-expansion-panel>
+    </mat-accordion>
+
 </div>
\ No newline at end of file
diff --git a/web/src/app/pages/settings/settings.component.scss b/web/src/app/pages/settings/settings.component.scss
index 982c89c3..91b50f73 100644
--- a/web/src/app/pages/settings/settings.component.scss
+++ b/web/src/app/pages/settings/settings.component.scss
@@ -5,4 +5,8 @@
     bottom: 20px;
     left: auto;
     position: fixed;
+}
+
+.form-content {
+    margin: 20px;
 }
\ No newline at end of file
diff --git a/web/src/app/pages/wallet/wallet.component.html b/web/src/app/pages/wallet/wallet.component.html
index f26ab348..9ee7db84 100644
--- a/web/src/app/pages/wallet/wallet.component.html
+++ b/web/src/app/pages/wallet/wallet.component.html
@@ -1,83 +1,111 @@
-<mat-card *ngIf="wallet !== null" class="wallet-card card">
-  <mat-card-header>
-      <mat-card-title>Wallet Summary</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-      <mat-list>
-            <h3 mat-subheader>Coin Totals</h3>
-            <mat-list-item *ngFor="let coin of wallet?.coin_totals">
-              <mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
-              <h4 mat-line>{{coin.coin}}</h4>
-              <h4 mat-line>{{coin.balance}}</h4>
-            </mat-list-item>
-     </mat-list>
-            <mat-divider></mat-divider>
-            <mat-list>
-            
-            <h3 mat-subheader>Coins Offline</h3>
-            <mat-list-item *ngFor="let coin of wallet?.coins_offline">
-                    <mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
-                    <h4 mat-line>{{coin.coin}}</h4>
-                    <h4 mat-line>{{coin.balance}}</h4>
-                  </mat-list-item>
-          </mat-list>
-          <mat-divider></mat-divider>
-      <mat-list>
-            
-          <h3 mat-subheader>Coins Online</h3>
-          <mat-list-item *ngFor="let coin of wallet?.coins_online">
-                    <mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
-                    <h4 mat-line>{{coin.coin}}</h4>
-                    <h4 mat-line>{{coin.balance}}</h4>
-                  </mat-list-item>
-          </mat-list>
-
-          <mat-divider></mat-divider>
-          <mat-list>
-                <h3 mat-subheader>Online Summary</h3>
-                      <mat-list-item *ngFor="let coin of wallet?.online_summary.BTC">
-                        <mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
-                        <h4 mat-line>Address: {{coin.address}}</h4>
-                        <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
-                    </mat-list-item>
-                    <mat-divider></mat-divider>
-                    
-                    <mat-list-item *ngFor="let coin of wallet?.online_summary.LTC">
-                      <mat-icon mat-list-icon class="LTC">{{coinIcon('LTC')}}</mat-icon>
-                      <h4 mat-line>Address: {{coin.address}}</h4>
-                      <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
-                  </mat-list-item>
-                <mat-divider></mat-divider>
-      
-                  <mat-list-item *ngFor="let coin of wallet?.online_summary.ETH">
-                          <mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
-                          <h4 mat-line>Address: {{coin.address}}</h4>
-                          <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
-                      </mat-list-item>
-                </mat-list>
-        <mat-divider></mat-divider>
+<mat-accordion *ngIf="wallet !== null">
+    <mat-expansion-panel [expanded]="true">
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Coin Totals
+            </mat-panel-title>
+        </mat-expansion-panel-header>
 
         <mat-list>
-          <h3 mat-subheader>Offline Summary</h3>
-                <mat-list-item *ngFor="let coin of wallet?.offline_summary.BTC">
-                  <mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
-                  <h4 mat-line>Address: {{coin.address}}</h4>
-                  <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
-              </mat-list-item>
-              <mat-divider></mat-divider>
-              
-              <mat-list-item *ngFor="let coin of wallet?.offline_summary.LTC">
+            <mat-list-item *ngFor="let coin of wallet?.coin_totals">
+                <mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
+                <h4 mat-line>{{coin.coin}}</h4>
+                <h4 mat-line>{{coin.balance}}</h4>
+            </mat-list-item>
+        </mat-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Online Summary
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-list>
+            <mat-list-item *ngFor="let coin of wallet?.online_summary.BTC">
+                <mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
+                <h4 mat-line>Address: {{coin.address}}</h4>
+                <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+            </mat-list-item>
+            <mat-divider></mat-divider>
+
+            <mat-list-item *ngFor="let coin of wallet?.online_summary.LTC">
                 <mat-icon mat-list-icon class="LTC">{{coinIcon('LTC')}}</mat-icon>
                 <h4 mat-line>Address: {{coin.address}}</h4>
                 <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
             </mat-list-item>
-          <mat-divider></mat-divider>
+            <mat-divider></mat-divider>
+
+            <mat-list-item *ngFor="let coin of wallet?.online_summary.ETH">
+                <mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
+                <h4 mat-line>Address: {{coin.address}}</h4>
+                <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+            </mat-list-item>
+        </mat-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Offline Summary
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-list>
+            <mat-list-item *ngFor="let coin of wallet?.offline_summary.BTC">
+                <mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
+                <h4 mat-line>Address: {{coin.address}}</h4>
+                <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+            </mat-list-item>
+            <mat-divider></mat-divider>
+
+            <mat-list-item *ngFor="let coin of wallet?.offline_summary.LTC">
+                <mat-icon mat-list-icon class="LTC">{{coinIcon('LTC')}}</mat-icon>
+                <h4 mat-line>Address: {{coin.address}}</h4>
+                <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+            </mat-list-item>
+            <mat-divider></mat-divider>
 
             <mat-list-item *ngFor="let coin of wallet?.offline_summary.ETH">
-                    <mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
-                    <h4 mat-line>Address: {{coin.address}}</h4>
-                    <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
-                </mat-list-item>
-          </mat-list>
-  </mat-card-content>
-</mat-card>
\ No newline at end of file
+                <mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
+                <h4 mat-line>Address: {{coin.address}}</h4>
+                <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+            </mat-list-item>
+        </mat-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Online Coins
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+
+        <mat-list>
+            <mat-list-item *ngFor="let coin of wallet?.coins_online">
+                <mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
+                <h4 mat-line>{{coin.coin}}</h4>
+                <h4 mat-line>{{coin.balance}}</h4>
+            </mat-list-item>
+        </mat-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Offline Coins
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+
+        <mat-list>
+            <mat-list-item *ngFor="let coin of wallet?.coins_offline">
+                <mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
+                <h4 mat-line>{{coin.coin}}</h4>
+                <h4 mat-line>{{coin.balance}}</h4>
+            </mat-list-item>
+        </mat-list>
+    </mat-expansion-panel>
+
+
+
+
+</mat-accordion>
\ No newline at end of file
diff --git a/web/src/styles.scss b/web/src/styles.scss
index f14345bf..a17f4bdb 100644
--- a/web/src/styles.scss
+++ b/web/src/styles.scss
@@ -5,15 +5,13 @@ body {
     margin: 0;
     padding: 0;
     overflow-y: hidden;
-    
 }
 
-
-
 .loading-spinner {
-    margin-left:50%;
-    margin-right:50%;
+    margin-left: 50%;
+    margin-right: 50%;
 }
+
 ////////////////////////////////////////////////////////////////
 // Default settings for cards
 ////////////////////////////////////////////////////////////////
@@ -22,13 +20,24 @@ body {
     margin: 10px auto;
 }
 
+////////////////////////////////////////////////////////////////
+// Default settings for expandable tile menus
+////////////////////////////////////////////////////////////////
+.mat-expansion-panel {
+    width: 80%;
+    margin: 0px auto !important;
+}
+
+.mat-expansion-panel-header-description {
+    flex-grow: 0 !important;
+}
+
 .mat-drawer {
     background: none !important;
 }
 
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
-
 /*
 deeppurple-amber.css
 indigo-pink.css