diff --git a/static/src/js/panel.js b/static/src/js/panel.js
index 5d364dd..6b8d960 100644
--- a/static/src/js/panel.js
+++ b/static/src/js/panel.js
@@ -85,8 +85,8 @@ var Panel = Widget.extend({
     start: function () {
         var self = this;
         return this._super.apply(this, arguments).then(function() {
-            self.$el.find('.oom_shuffle_off').closest('li').hide();
-            self.$el.find('.oom_repeat_off').closest('li').hide();
+            self.$el.find('.oom_shuffle_off').hide();
+            self.$el.find('.oom_repeat_off').hide();
             self._play(self.init_id, {play_now: false});
             self._startPolling();
         });
@@ -123,8 +123,8 @@ var Panel = Widget.extend({
             return;
         }
         this.sound.play();
-        this.$el.find('.oom_pause').closest('li').show();
-        this.$el.find('.oom_play').closest('li').hide();
+        this.$el.find('.oom_pause').show();
+        this.$el.find('.oom_play').hide();
     },
 
     pause: function () {
@@ -132,8 +132,8 @@ var Panel = Widget.extend({
             return;
         }
         this.sound.pause();
-        this.$el.find('.oom_pause').closest('li').hide();
-        this.$el.find('.oom_play').closest('li').show();
+        this.$el.find('.oom_pause').hide();
+        this.$el.find('.oom_play').show();
     },
 
     stop: function (play_now, keep_loaded) {
@@ -267,11 +267,11 @@ var Panel = Widget.extend({
         if (params.play_now) {
             this.sound_seek_last_played = 0;
             this.sound.play();
-            this.$el.find('.oom_pause').closest('li').show();
-            this.$el.find('.oom_play').closest('li').hide();
+            this.$el.find('.oom_pause').show();
+            this.$el.find('.oom_play').hide();
         } else {
-            this.$el.find('.oom_pause').closest('li').hide();
-            this.$el.find('.oom_play').closest('li').show();
+            this.$el.find('.oom_pause').hide();
+            this.$el.find('.oom_play').show();
         }
 
         // Reset next sound
@@ -461,26 +461,26 @@ var Panel = Widget.extend({
 
     _onClickShuffle: function () {
         this.shuffle = true;
-        this.$el.find('.oom_shuffle_off').closest('li').show();
-        this.$el.find('.oom_shuffle').closest('li').hide();
+        this.$el.find('.oom_shuffle_off').show();
+        this.$el.find('.oom_shuffle').hide();
     },
 
     _onClickShuffleOff: function () {
         this.shuffle = false;
-        this.$el.find('.oom_shuffle').closest('li').show();
-        this.$el.find('.oom_shuffle_off').closest('li').hide();
+        this.$el.find('.oom_shuffle').show();
+        this.$el.find('.oom_shuffle_off').hide();
     },
 
     _onClickRepeat: function () {
         this.repeat = true;
-        this.$el.find('.oom_repeat_off').closest('li').show();
-        this.$el.find('.oom_repeat').closest('li').hide();
+        this.$el.find('.oom_repeat_off').show();
+        this.$el.find('.oom_repeat').hide();
     },
 
     _onClickRepeatOff: function () {
         this.repeat = false;
-        this.$el.find('.oom_repeat').closest('li').show();
-        this.$el.find('.oom_repeat_off').closest('li').hide();
+        this.$el.find('.oom_repeat').show();
+        this.$el.find('.oom_repeat_off').hide();
     },
 
     _onClickStar: function () {
diff --git a/static/src/scss/panel.scss b/static/src/scss/panel.scss
index 0881daa..94173c6 100644
--- a/static/src/scss/panel.scss
+++ b/static/src/scss/panel.scss
@@ -11,65 +11,37 @@ $background_color_1: #F0EEEE;
     z-index: 100;
     box-shadow: 2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8);
 
-    .oom_albumart {
-        background-color: $background_color_1;
+    .oom_panel_left {
         float: left;
-        width: 90px;
-        height: 90px;
-        left: 0px;
-    }
-
-    .oom_time_holder {
-        .oom_title {
-            text-align: center;
-        }
-
-        .oom_current_time {
-            float: left;
-            margin-left: 5px;
-        }
-
-        .oom_duration {
-            float: right;
-            margin-right: 5px;
-        }
-    }
-
-    .oom_controls {
-        position: absolute;
-        left: 50%;
-        padding: 0;
-        margin-left: -180px;
 
-        li {
-            display: inline-block;
+        .oom_albumart {
+            background-color: $background_color_1;
+            width: 90px;
+            height: 90px;
         }
     }
 
-    .oom_volume_toggles {
-        position: absolute;
-        left: 50%;
-        padding: 0;
+    .oom_panel_right {
+        float: none;
 
-        li {
-            display: inline;
+        .container {
+            max-width: 100%;
 
-            .oom_volume_bar {
-                position: absolute;
-                width: 60px;
-                top: 10px;
+            // Avoid padding so progressbar takes the whole width.
+            .oom_nopad {
+                padding-left: 0px;
+                padding-right: 0px;
+            }
+            @media (min-width: 576px) {
+                &.oom_nopad_container {
+                    padding-left: 0px;
+                    padding-right: 0px;
+                }
             }
-        }
-    }
-
-    .oom_toggles {
-        position: absolute;
-        left: 50%;
-        padding: 6px;
-        margin-left: 80px;
 
-        li {
-            display: inline-block;
+            .oom_title {
+                @include o-text-overflow;
+            }
         }
     }
 }
diff --git a/static/src/xml/panel.xml b/static/src/xml/panel.xml
index d703e56..38090ae 100644
--- a/static/src/xml/panel.xml
+++ b/static/src/xml/panel.xml
@@ -3,69 +3,78 @@
 
 <t t-name="oomusic.Panel">
     <div class="oom_panel">
-        <t t-call="oomusic.Albumart"/>
-        <div>
-            <div>
-                <div>
-                    <!-- Progress bar -->
-                    <div class="oom_progress progress" style="height:18px">
-                        <div class="oom_progress_bar progress-bar progress-bar-striped"
-                            role="progressbar" aria-valuenow="0"
-                            aria-valuemin="0" aria-valuemax="100" style="width:0%;height:18px">
+        <div class="oom_panel_left d-none d-sm-block">
+            <t t-call="oomusic.Albumart"/>
+        </div>
+        <div class="oom_panel_right">
+            <div class="container oom_nopad_container">
+                <!-- Progress bar -->
+                <div class="row">
+                    <div class="col oom_nopad">
+                        <div class="oom_progress oom_nopad progress col-sm" style="height:18px">
+                            <div class="oom_progress_bar progress-bar progress-bar-striped"
+                                role="progressbar" aria-valuenow="0"
+                                aria-valuemin="0" aria-valuemax="100" style="width:0%;height:18px">
+                            </div>
                         </div>
                     </div>
-                    <!-- Duration and Title-->
-                    <div class="oom_time_holder">
-                        <t t-call="oomusic.Title"/>
+                </div>
+                <!-- Duration and Title-->
+                <div class="row">
+                    <div class="col-xs-1">
                         <t t-call="oomusic.CurrentTime"/>
+                    </div>
+                    <div class="col text-center">
+                        <t t-call="oomusic.Title"/>
+                    </div>
+                    <div class="col-xs-1 text-right d-none d-sm-block">
                         <t t-call="oomusic.Duration"/>
                     </div>
                 </div>
-                <ul class="oom_controls">
-                    <li><a class="oom_previous btn btn-lg" tabindex="1">
-                        <span class="fa fa-step-backward"></span>
-                    </a></li>
-                    <li><a class="oom_play btn btn-lg" tabindex="1">
-                        <span class="fa fa-play"></span>
-                    </a></li>
-                    <li><a class="oom_pause btn btn-lg" tabindex="1">
-                        <span class="fa fa-pause"></span>
-                    </a></li>
-                    <li><a class="oom_next btn btn-lg" tabindex="1">
-                        <span class="fa fa-step-forward"></span>
-                    </a></li>
-                    <li><a class="oom_stop btn btn-lg" tabindex="1">
-                        <span class="fa fa-stop"></span>
-                    </a></li>
-                    <li>
-                    </li>
-                </ul>
-
-                <ul class="oom_volume_toggles">
-                    <li>
+                <div class="row">
+                    <!-- Control buttons-->
+                    <div class="col text-right">
+                        <a class="oom_previous btn btn-lg" tabindex="1">
+                            <span class="fa fa-step-backward"></span>
+                        </a>
+                        <a class="oom_play btn btn-lg" tabindex="1">
+                            <span class="fa fa-play"></span>
+                        </a>
+                        <a class="oom_pause btn btn-lg" tabindex="1">
+                            <span class="fa fa-pause"></span>
+                        </a>
+                        <a class="oom_next btn btn-lg" tabindex="1">
+                            <span class="fa fa-step-forward"></span>
+                        </a>
+                        <a class="oom_stop btn btn-lg" tabindex="1">
+                            <span class="fa fa-stop"></span>
+                        </a>
+                    </div>
+                    <!-- Volume-->
+                    <div class="col-1 d-none d-sm-block">
                         <div class="oom_volume_bar">
                             <input type="range" min="0" max="100" value="100" class="oom_volume"/>
                         </div>
-                    </li>
-                </ul>
-
-                <ul class="oom_toggles">
-                    <li><a class="oom_shuffle btn" tabindex="1" title="Turn shuffle on">
-                        <span class="fa fa-random"></span>
-                    </a></li>
-                    <li><a class="oom_shuffle_off btn" tabindex="1" title="Turn shuffle off">
-                        <span class="fa fa-arrow-right"></span>
-                    </a></li>
-                    <li><a class="oom_repeat btn" tabindex="1" title="Activate repeat">
-                        <span class="fa fa-repeat"></span>
-                    </a></li>
-                    <li><a class="oom_repeat_off btn" tabindex="1" title="Deactivate repeat">
-                        <span class="fa fa-arrow-down"></span>
-                    </a></li>
-                    <li><a class="oom_star btn" tabindex="1" title="I Like It!">
-                        <span class="fa fa-star"></span>
-                    </a></li>
-                </ul>
+                    </div>
+                    <!-- Control toggles-->
+                    <div class="col">
+                        <a class="oom_shuffle btn" tabindex="1" title="Turn shuffle on">
+                            <span class="fa fa-random"></span>
+                        </a>
+                        <a class="oom_shuffle_off btn" tabindex="1" title="Turn shuffle off">
+                            <span class="fa fa-arrow-right"></span>
+                        </a>
+                        <a class="oom_repeat btn" tabindex="1" title="Activate repeat">
+                            <span class="fa fa-repeat"></span>
+                        </a>
+                        <a class="oom_repeat_off btn" tabindex="1" title="Deactivate repeat">
+                            <span class="fa fa-arrow-down"></span>
+                        </a>
+                        <a class="oom_star btn" tabindex="1" title="I Like It!">
+                            <span class="fa fa-star"></span>
+                        </a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>