diff --git a/app.py b/app.py
index 3f503d1..307e0dd 100755
--- a/app.py
+++ b/app.py
@@ -3,7 +3,7 @@
 
 from pathlib import Path
 
-from flask import Flask, flash, g, redirect, request, url_for
+from flask import Flask, abort, flash, g, redirect, request, url_for
 from flask_mako import MakoTemplates, render_template
 
 import calefaction
@@ -76,12 +76,13 @@ def logout():
     flash(Messages.LOGGED_OUT, "success")
     return redirect(url_for("index"), 303)
 
-@app.route("/test")
+@app.route("/settings/style/<style>", methods=["POST"])
 @catch_exceptions
 @route_restricted
-def test():
-    ...
-    return "Success! You are authenticated!"
+def set_style(style):
+    if not auth.set_character_style(style):
+        abort(404)
+    return "", 204
 
 if __name__ == "__main__":
     app.run(debug=True, port=8080)
diff --git a/calefaction/auth.py b/calefaction/auth.py
index 63e4c85..c67259b 100644
--- a/calefaction/auth.py
+++ b/calefaction/auth.py
@@ -196,6 +196,23 @@ class AuthManager:
             g._character_props = g.db.read_character(cid)
         return g._character_props.get(prop)
 
+    def set_character_style(self, style):
+        """Update the current user's style and return whether successful."""
+        cid = self.get_character_id()
+        if not cid:
+            return False
+
+        style = style.strip().lower()
+        if style not in self._config.get("style.enabled"):
+            return False
+
+        self._debug("Setting style to %s for char id=%d", style, cid)
+        g.db.set_character_style(cid, style)
+
+        if hasattr(g, "_character_props"):
+            delattr(g, "_character_props")
+        return True
+
     def is_authenticated(self):
         """Return whether the user has permission to access this site.
 
diff --git a/calefaction/database.py b/calefaction/database.py
index b5e9e56..073ef50 100644
--- a/calefaction/database.py
+++ b/calefaction/database.py
@@ -148,6 +148,12 @@ class Database:
         res = self._conn.execute(query, (cid,)).fetchall()
         return {"name": res[0][0], "style": res[0][1]} if res else {}
 
+    def set_character_style(self, cid, style):
+        """Update a character's style setting."""
+        with self._conn as conn:
+            conn.execute("""UPDATE character SET character_style = ?
+                WHERE character_id = ?""", (style, cid))
+
     def set_auth(self, cid, token, expires, refresh):
         """Set the authentication info for the given character."""
         with self._conn as conn:
diff --git a/config/config.yml.sample b/config/config.yml.sample
index f1472eb..6a1efcb 100644
--- a/config/config.yml.sample
+++ b/config/config.yml.sample
@@ -33,9 +33,14 @@ auth:
   # SSO client secret:
   client_secret: XXAPGc0LM6wdOJAwSNQmliZ2QhQpoBuUutQY6Rlc
 
-# Default stylesheet from static/styles/*.css;
-# one of "amarr", "caldari", "gallente", "minmatar", or create your own:
-style: null
+style:
+  # Default stylesheet from static/styles/*.css:
+  default: null
+  enabled:
+    - amarr
+    - caldari
+    - gallente
+    - minmatar
 
 welcome: |-
   (If you are seeing this message on the public internet, someone forgot to
diff --git a/static/images/amarr.jpg b/static/images/bg/amarr.jpg
similarity index 100%
rename from static/images/amarr.jpg
rename to static/images/bg/amarr.jpg
diff --git a/static/images/caldari.jpg b/static/images/bg/caldari.jpg
similarity index 100%
rename from static/images/caldari.jpg
rename to static/images/bg/caldari.jpg
diff --git a/static/images/gallente.jpg b/static/images/bg/gallente.jpg
similarity index 100%
rename from static/images/gallente.jpg
rename to static/images/bg/gallente.jpg
diff --git a/static/images/minmatar.jpg b/static/images/bg/minmatar.jpg
similarity index 100%
rename from static/images/minmatar.jpg
rename to static/images/bg/minmatar.jpg
diff --git a/static/images/style/amarr.png b/static/images/style/amarr.png
new file mode 100644
index 0000000..70dba9a
Binary files /dev/null and b/static/images/style/amarr.png differ
diff --git a/static/images/style/caldari.png b/static/images/style/caldari.png
new file mode 100644
index 0000000..8a082ff
Binary files /dev/null and b/static/images/style/caldari.png differ
diff --git a/static/images/style/gallente.png b/static/images/style/gallente.png
new file mode 100644
index 0000000..1bc2e1d
Binary files /dev/null and b/static/images/style/gallente.png differ
diff --git a/static/images/style/minmatar.png b/static/images/style/minmatar.png
new file mode 100644
index 0000000..2eb12db
Binary files /dev/null and b/static/images/style/minmatar.png differ
diff --git a/static/main.css b/static/main.css
index c820603..5af55db 100644
--- a/static/main.css
+++ b/static/main.css
@@ -37,19 +37,21 @@ h1 {
     width: 100%;
 }
 
+.styled-border {
+    border-color: #4A4A4A;
+    border-style: solid;
+}
+
 main, header, footer {
     background-color: rgba(0, 0, 0, 0.8);
-    border-color: #4A4A4A;
 }
 
 main {
     border-width: 1px;
-    border-style: solid;
 }
 
 header {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
+    border-width: 0 0 1px 0;
 }
 
 footer {
@@ -57,8 +59,7 @@ footer {
     font-size: 85%;
     text-align: center;
     color: #BABABA;
-    border-top-width: 1px;
-    border-top-style: solid;
+    border-width: 1px 0 0;
 }
 
 header > div, footer > div {
@@ -164,18 +165,6 @@ footer ul li:not(:last-child):after {
     text-decoration: none;
 }
 
-#character-portrait {
-    height: 32px;
-    margin-right: 0.25em;
-    box-sizing: border-box;
-    border-width: 1px;
-    border-style: solid;
-}
-
-#character-summary {
-    font-size: 90%;
-}
-
 #flashes {
     margin-top: 0.5em;
 }
@@ -196,6 +185,74 @@ footer ul li:not(:last-child):after {
     background-color: rgba(255, 60, 30, 0.2);
 }
 
+#character-portrait {
+    height: 32px;
+    margin-right: 0.25em;
+    box-sizing: border-box;
+    border-width: 1px;
+}
+
+#character-summary {
+    font-size: 90%;
+}
+
+#character-options {
+    position: absolute;
+    margin-top: 1em;
+    margin-left: -10px;
+    padding: 0.5em;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-width: 1px;
+}
+
+#character-options:after, #character-options:before {
+    bottom: 100%;
+    left: 20px;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+#character-options:after {
+    border-bottom-color: black;
+    border-width: 10px;
+    margin-left: -10px;
+}
+
+#character-options:before {
+    border-bottom-color: #4A4A4A;
+    border-width: 12px;
+    margin-left: -12px;
+}
+
+#style-options {
+    line-height: 0;
+}
+
+#style-options form {
+    display: inline-block;
+}
+
+#style-options form:not(:first-child) {
+    margin-left: 0.25em;
+}
+
+#style-options input[type=submit] {
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    background-color: transparent;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    font-size: 0;
+    border: 0;
+    cursor: pointer;
+}
+
 #error pre {
     white-space: pre-wrap;
 }
diff --git a/static/main.js b/static/main.js
index e03a55b..d7e1767 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,3 +1,7 @@
+var overlaps = function(needle, haystack) {
+    return haystack.is(needle) || haystack.has(needle).length > 0;
+};
+
 $(function() {
     // Install logout auto-POST form:
     $("#logout").click(function() {
@@ -7,4 +11,23 @@ $(function() {
         }).appendTo($("body")).submit();
         return false;
     });
+
+    // Toggle character options on click:
+    var charopts = $("#character-options");
+    charopts.hide();
+    $("#character-portrait").click(function() {
+        if (charopts.is(":visible")) {
+            charopts.hide();
+            $(document).off("mouseup.charopts");
+        } else {
+            charopts.show();
+            $(document).on("mouseup.charopts", function(e) {
+                if (!overlaps(e.target, charopts) &&
+                        !overlaps(e.target, $("#character-portrait"))) {
+                    charopts.hide();
+                    $(document).off("mouseup.charopts");
+                }
+            });
+        }
+    }).css("cursor", "pointer");
 });
diff --git a/static/styles/amarr.css b/static/styles/amarr.css
index 3b6200b..dadb13c 100644
--- a/static/styles/amarr.css
+++ b/static/styles/amarr.css
@@ -1,11 +1,15 @@
 body {
-    background-image: url("/static/images/amarr.jpg?v=1");
+    background-image: url("/static/images/bg/amarr.jpg?v=1");
 }
 
-main, header, footer, #character-portrait {
+.styled-border {
     border-color: #5F4A26;
 }
 
+#character-options:before {
+    border-bottom-color: #5F4A26;
+}
+
 a {
     color: #FFDE78;
 }
diff --git a/static/styles/caldari.css b/static/styles/caldari.css
index b9a0cf2..766d570 100644
--- a/static/styles/caldari.css
+++ b/static/styles/caldari.css
@@ -1,11 +1,15 @@
 body {
-    background-image: url("/static/images/caldari.jpg?v=1");
+    background-image: url("/static/images/bg/caldari.jpg?v=1");
 }
 
-main, header, footer, #character-portrait {
+.styled-border {
     border-color: #364A5F;
 }
 
+#character-options:before {
+    border-bottom-color: #364A5F;
+}
+
 a {
     color: #99CCEE;
 }
diff --git a/static/styles/gallente.css b/static/styles/gallente.css
index 1ce639d..4fca5b0 100644
--- a/static/styles/gallente.css
+++ b/static/styles/gallente.css
@@ -1,11 +1,15 @@
 body {
-    background-image: url("/static/images/gallente.jpg?v=1");
+    background-image: url("/static/images/bg/gallente.jpg?v=1");
 }
 
-main, header, footer, #character-portrait {
+.styled-border {
     border-color: #365F4A;
 }
 
+#character-options:before {
+    border-bottom-color: #365F4A;
+}
+
 a {
     color: #66BB99;
 }
diff --git a/static/styles/minmatar.css b/static/styles/minmatar.css
index f9c7c08..3e29419 100644
--- a/static/styles/minmatar.css
+++ b/static/styles/minmatar.css
@@ -1,11 +1,15 @@
 body {
-    background-image: url("/static/images/minmatar.jpg?v=1");
+    background-image: url("/static/images/bg/minmatar.jpg?v=1");
 }
 
-main, header, footer, #character-portrait {
+.styled-border {
     border-color: #5F3C42;
 }
 
+#character-options:before {
+    border-bottom-color: #5F3C42;
+}
+
 a {
     color: #D89988;
 }
diff --git a/templates/_base.mako b/templates/_base.mako
index 318b1e5..d27315c 100644
--- a/templates/_base.mako
+++ b/templates/_base.mako
@@ -8,12 +8,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="canonical" href="${g.config.scheme}://${g.config.get('site.canonical')}${request.script_root}${request.path}">
         <link rel="stylesheet" type="text/css" href="${url_for('staticv', filename='main.css')}"/>
-        % if g.config.get("style"):
-            <%
-                charstyle = g.auth.get_character_prop("style")
-                style = charstyle if charstyle else g.config.get("style")
-                stylesheet = "styles/{}.css".format(style)
-            %>
+        <%
+            charstyle = g.auth.get_character_prop("style")
+            style = charstyle if charstyle else g.config.get("style.default")
+        %>
+        % if style:
+            <% stylesheet = "styles/{}.css".format(style) %>
             <link rel="stylesheet" type="text/css" href="${url_for('staticv', filename=stylesheet)}"/>
         % endif
         % for size in g.eve.image.corp_widths:
@@ -24,7 +24,7 @@
     </head>
     <body>
         <%block name="header">
-            <header>
+            <header class="styled-border">
                 <div>
                     <div class="left">
                         <%block name="lefthead">
@@ -45,7 +45,7 @@
         <%block name="container">
             <div id="container">
                 <div>
-                    <main>
+                    <main class="styled-border">
                         <%block name="flashes">
                             <% messages = get_flashed_messages(with_categories=True) %>
                             % if messages:
@@ -62,7 +62,7 @@
             </div>
         </%block>
         <%block name="footer">
-            <footer>
+            <footer class="styled-border">
                 <div>
                     <ul>
                         <li>YC&nbsp;${g.eve.clock.now()}</li>
diff --git a/templates/_default.mako b/templates/_default.mako
index 54b16de..f4fd142 100644
--- a/templates/_default.mako
+++ b/templates/_default.mako
@@ -6,7 +6,16 @@
     </nav>
 </%block>
 <%block name="righthead">
-    <img id="character-portrait" class="aligned" title="${g.auth.get_character_prop('name')}" alt="" src="${g.eve.image.character(g.auth.get_character_id(), 256)}"/>
+    <img id="character-portrait" class="styled-border aligned" alt="" src="${g.eve.image.character(g.auth.get_character_id(), 256)}"/>
+    <div id="character-options" class="styled-border">
+        <div id="style-options">
+            % for style in g.config.get("style.enabled"):
+                <form action="${url_for('set_style', style=style)}" method="post">
+                    <input type="submit" title="${style.title()}" value="${style}" style="background-image: url('${url_for('staticv', filename='images/style/{}.png'.format(style))}')">
+                </form>
+            % endfor
+        </div>
+    </div>
     <span id="character-summary" class="aligned">
         ${g.auth.get_character_prop("name")}
         <span class="sep">[</span><a id="logout" title="Log out" href="${url_for('logout')}">log out</a><span class="sep">]</span>