diff --git a/bemani/frontend/static/classnames.min.js b/bemani/frontend/static/classnames.min.js
new file mode 100644
index 0000000..fb8f747
--- /dev/null
+++ b/bemani/frontend/static/classnames.min.js
@@ -0,0 +1 @@
+!function(){"use strict";var f={}.hasOwnProperty;function s(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var o,r=typeof n;if("string"==r||"number"==r)e.push(n);else if(Array.isArray(n))!n.length||(o=s.apply(null,n))&&e.push(o);else if("object"==r)if(n.toString===Object.prototype.toString||n.toString.toString().includes("[native code]"))for(var i in n)f.call(n,i)&&n[i]&&e.push(i);else e.push(n.toString())}}return e.join(" ")}"undefined"!=typeof module&&module.exports?module.exports=s.default=s:"function"==typeof define&&"object"==typeof define.amd&&define.amd?define("classnames",[],function(){return s}):window.classNames=s}();
\ No newline at end of file
diff --git a/bemani/frontend/static/components/labelledsection.react.js b/bemani/frontend/static/components/labelledsection.react.js
index 458da1e..8236644 100644
--- a/bemani/frontend/static/components/labelledsection.react.js
+++ b/bemani/frontend/static/components/labelledsection.react.js
@@ -2,18 +2,13 @@
 
 var LabelledSection = createReactClass({
     render: function() {
-        var classname = "labelledsection"
-        if (this.props.vertical) {
-            classname = classname + " vertical";
-        } else {
-            classname = classname + " horizontal";
-        }
-        if (this.props.className) {
-            classname = classname + " " + this.props.className;
-        }
         return (
             <div
-                className={classname}
+                className={classNames(
+                    "labelledsection",
+                    {"vertical": this.props.vertical, "horizontal": !this.props.vertical},
+                    this.props.className
+                )}
             >
                 <div className="label">{this.props.label}</div>
                 <div className="content">{this.props.children}</div>
diff --git a/bemani/frontend/static/components/nav.react.js b/bemani/frontend/static/components/nav.react.js
index 55bdf40..c1b5cad 100644
--- a/bemani/frontend/static/components/nav.react.js
+++ b/bemani/frontend/static/components/nav.react.js
@@ -2,12 +2,6 @@
 
 var Nav = createReactClass({
     render: function() {
-        var cls = 'nav';
-        if (this.props.active) {
-            cls += ' active';
-        }
-        cls += " " + this.props.title;
-
         var title = (
            <span>
                 {this.props.title}
@@ -19,7 +13,7 @@ var Nav = createReactClass({
         );
         return (
             <Button
-                className={cls}
+                className={classNames("nav", {"active": this.props.active}, this.props.title)}
                 disabled={this.props.disabled}
                 style={this.props.style}
                 onClick={function(event) {
diff --git a/bemani/frontend/static/components/slider.react.js b/bemani/frontend/static/components/slider.react.js
index 23d42eb..6c9c92e 100644
--- a/bemani/frontend/static/components/slider.react.js
+++ b/bemani/frontend/static/components/slider.react.js
@@ -4,7 +4,7 @@ var Slider = createReactClass({
     render: function() {
         return (
             <div
-                className={"slider " + (this.props.value ? "on " : "off ") + this.props.className}
+                className={classNames("slider", this.props.value ? "on" : "off", this.props.className)}
                 onClick={function(event) {
                     event.preventDefault();
                     event.stopPropagation();
diff --git a/bemani/frontend/templates/base.html b/bemani/frontend/templates/base.html
index 0a9c21b..837e36d 100644
--- a/bemani/frontend/templates/base.html
+++ b/bemani/frontend/templates/base.html
@@ -17,6 +17,7 @@
         <script type="text/javascript" src="{{ url_for('static', filename='jquery-confirm.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='jquery.touchSwipe.min.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='tinynav.js') }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='classnames.min.js') }}"></script>
         <script defer type="text/javascript" src="{{ url_for('static', filename='react.min.js') }}"></script>
         <script defer type="text/javascript" src="{{ url_for('static', filename='react-dom.min.js') }}"></script>
         <script defer type="text/javascript" src="{{ url_for('static', filename='create-react-class.min.js') }}"></script>