diff --git a/views/app/settings.html b/views/app/settings.html
index c05a5fa6ac..b1684b4aad 100644
--- a/views/app/settings.html
+++ b/views/app/settings.html
@@ -1,37 +1,45 @@
 <modals:>
     {{#if _loggedIn}}
         <app:modals:modal modalId="settings-modal" header="Settings">
-            <h4>API</h4>
-            <small>Copy these for use in third party applications.</small>
-            <h6>User ID</h6>
-            <pre class=prettyprint>{_user.id}</pre>
+            <ul class="nav nav-tabs">
+                <li class="active"><a data-toggle="tab" href="#" data-target="#settings-settings">General</a></li>
+                <li><a data-toggle="tab" href="#" data-target="#settings-api">API</a></li>
+            </ul>
 
-            <h6>API Token</h6>
-            <pre class=prettyprint>{_user.apiToken}</pre>
+            <div class="tab-content">
+                <div class="tab-pane active" id="settings-settings">
+                    <h4>Custom Day Start</h4>
+                    <div class="input-append">
+                        <input class="span2" type="number" min=0 max=24 value={_user.preferences.dayStart} />
+                        <span class="add-on">:00 (24h)</span>
+                    </div>
+                    <div>
+                        <small>Habit defaults to check and reset your dailies at midnight each day. You can customize that here (Enter number between 0 and 24).</small>
+                    </div>
 
-            <hr/>
-            <h4>Custom Day Start</h4>
-            <div class="input-append">
-                <input class="span2" type="number" min=0 max=24 value={_user.preferences.dayStart} />
-                <span class="add-on">:00 (24h)</span>
+                    <hr/>
+                    <h4>Toggle Header</h4>
+                    <button x-bind="click:toggleHeader">{#if _user.preferences.hideHeader}Show{else}Hide{/}</button>
+
+                    {{#if _user.auth.local}}
+                        <hr/>
+                        <h4>Change Password</h4>
+                        <derby-auth:changePassword />
+                    {{/}}
+
+                    <hr/>
+                    <a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal" rel=tooltip title="Resets your entire account (dangerous).">Reset</a>
+                    &nbsp;<a class='btn btn-danger' data-target="#restore-modal" data-toggle="modal" rel=tooltip title="Restores attributes to your character.">Restore</a>
+                </div>
+                <div class="tab-pane" id="settings-api">
+                    <small>Copy these for use in third party applications.</small>
+                    <h6>User ID</h6>
+                    <pre class=prettyprint>{_user.id}</pre>
+
+                    <h6>API Token</h6>
+                    <pre class=prettyprint>{_user.apiToken}</pre>
+                </div>
             </div>
-            <div>
-                <small>Habit defaults to check and reset your dailies at midnight each day. You can customize that here (Enter number between 0 and 24).</small>
-            </div>
-
-            <hr/>
-            <h4>Toggle Header</h4>
-            <button x-bind="click:toggleHeader">{#if _user.preferences.hideHeader}Show{else}Hide{/}</button>
-
-            {{#if _user.auth.local}}
-                <hr/>
-                <h4>Change Password</h4>
-                <derby-auth:changePassword />
-            {{/}}
-
-            <hr/>
-            <a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal" rel=tooltip title="Resets your entire account (dangerous).">Reset</a>
-            &nbsp;<a class='btn btn-danger' data-target="#restore-modal" data-toggle="modal" rel=tooltip title="Restores attributes to your character.">Restore</a>
 
             <@footer>
                 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>