diff --git a/src/app/js/app.js b/src/app/js/app.js
index 81d4f7d..0558759 100644
--- a/src/app/js/app.js
+++ b/src/app/js/app.js
@@ -23,7 +23,7 @@ $(function() {
     ipcRenderer.on('watchr_file', function(event, arg) {
         arg.file = encodeURI(arg.file)
         if (arg.type === "add") {
-            $('#watchr_files').append('<tr class="file" data-file="' + arg.file + '"><td>' + arg.file + '</td><td><button class="play-file btn btn-success" data-file="' + 'file://' + arg.file + '"><i class="fa fa-play-circle-o" aria-hidden="true"></i></button></td></tr>')
+            $('#watchr_files').append('<div class="row-flex file" data-file="' + arg.file + '"><div class="flex-btn"><button class="play-file btn btn-success" data-file="' + 'file://' + arg.file + '"><i class="fa fa-play-circle-o" aria-hidden="true"></i></button></div><div class="cont">' + arg.file + '</div></tr>')
         } else if (arg.type === "remove") {
             $('.file[data-file="' + arg.file + '"]').remove();
         }
diff --git a/src/app/js/player.js b/src/app/js/player.js
new file mode 100644
index 0000000..907001a
--- /dev/null
+++ b/src/app/js/player.js
@@ -0,0 +1,46 @@
+var video;
+$(function(){
+        video = document.getElementById('video');
+
+
+        // btn
+        var st_play  = '<i class="fa fa-play-circle-o" aria-hidden="true"></i>';
+        var st_pause = '<i class="fa fa-pause-circle-o" aria-hidden="true"></i>';
+
+        video.ontimeupdate = function(){
+          var percentage = ( video.currentTime / video.duration ) * 100;
+          $("#time span").css("width", percentage+"%");
+        };
+
+        $("#time").on("click", function(e){
+            var offset = $(this).offset();
+            var left = (e.pageX - offset.left);
+            var totalWidth = $("#time").width();
+            var percentage = ( left / totalWidth );
+            var vidTime = video.duration * percentage;
+            video.currentTime = vidTime;
+        })
+        $("#volume span").css('width',(100*video.volume)+'%')
+        $("#volume").on("click", function(e){
+            var offset = $(this).offset();
+            var left = (e.pageX - offset.left);
+            var totalWidth = $("#volume").width();
+            var percentage = ( left / totalWidth );
+            var volume = 1 * percentage;
+            video.volume = volume;
+            $("#volume span").css('width',(100*percentage)+'%')
+            console.log(volume)
+        })
+        
+
+
+        $('#play').click(function(){
+            if(video.paused){
+                video.play();
+                $('#play').html(st_pause)
+            }else{
+                video.pause();
+                $('#play').html(st_play)
+            }
+        })
+})
diff --git a/src/app/js/pot_main.js b/src/app/js/pot_main.js
index 95af97f..4a42595 100644
--- a/src/app/js/pot_main.js
+++ b/src/app/js/pot_main.js
@@ -1,57 +1,16 @@
 $(function() {
     const ipcRenderer = require('electron').ipcRenderer;
     ipcRenderer.send('pot_real_open', {x:"xx"});
-    var video = document.getElementById('video');
-    console.log('TEST')
+
+
+    $('#close').click(function () {
+        ipcRenderer.send('close_pot',{});
+    });
     ipcRenderer.on('pot_play',function(event,arg){
         var file = arg.file;
         video.setAttribute("src", file);
         video.play();
     })
-
-
-    // btn
-    var st_play  = '<i class="fa fa-play-circle-o" aria-hidden="true"></i>';
-    var st_pause = '<i class="fa fa-pause-circle-o" aria-hidden="true"></i>';
-
-    video.ontimeupdate = function(){
-      var percentage = ( video.currentTime / video.duration ) * 100;
-      $("#time span").css("width", percentage+"%");
-    };
-
-    $("#time").on("click", function(e){
-        var offset = $(this).offset();
-        var left = (e.pageX - offset.left);
-        var totalWidth = $("#time").width();
-        var percentage = ( left / totalWidth );
-        var vidTime = video.duration * percentage;
-        video.currentTime = vidTime;
-    })
-    $("#volume span").css('width',(100*video.volume)+'%')
-    $("#volume").on("click", function(e){
-        var offset = $(this).offset();
-        var left = (e.pageX - offset.left);
-        var totalWidth = $("#volume").width();
-        var percentage = ( left / totalWidth );
-        var volume = 1 * percentage;
-        video.volume = volume;
-        $("#volume span").css('width',(100*percentage)+'%')
-        console.log(volume)
-    })
-    $('#close').click(function () {
-        ipcRenderer.send('close_pot',{});
-    });
-
-
-    $('#play').click(function(){
-        if(video.paused){
-            video.play();
-            $('#play').html(st_pause)
-        }else{
-            video.pause();
-            $('#play').html(st_play)
-        }
-    })
     $('.navbar').on( "mouseleave",function () {
         $('.navbar').css('opacity',"0")
     });
diff --git a/src/app/style/player.css b/src/app/style/player.css
new file mode 100644
index 0000000..aeb38d2
--- /dev/null
+++ b/src/app/style/player.css
@@ -0,0 +1,38 @@
+#time {
+    cursor: pointer;
+    height: 10px;
+    margin-bottom: 10px;
+    outline: thin solid #FFF;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    vertical-align: -webkit-baseline-middle;
+    line-height: 1.42857143;
+    height: 9px;
+    display: inline-block;
+    top: 13px;
+}
+
+#volume {
+    cursor: pointer;
+    height: 10px;
+    margin-bottom: 10px;
+    outline: thin solid #FFF;
+    overflow: hidden;
+    position: relative;
+    width: 200px;
+    vertical-align: -webkit-baseline-middle;
+    line-height: 1.42857143;
+    height: 9px;
+    display: inline-block;
+    top: 13px;
+}
+
+#time span, #volume span {
+    background-color: #FFF;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 10px;
+    width: 0px;
+}
diff --git a/src/app/style/style.css b/src/app/style/style.css
index 994a629..4be1566 100644
--- a/src/app/style/style.css
+++ b/src/app/style/style.css
@@ -1 +1 @@
-body{margin:0;margin-top:50px;background:#1d2247;color:#e01931}.btn-success{color:#e01931;background-color:#1d2247;border-color:#e01931;transition:all .3s}.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.dropdown-toggle:active,.dropdown-toggle:focus,.open>.dropdown-toggle.btn-success{color:#1d2247!important;background-color:#e01931!important;border-color:#e01931!important;transition:all .3s}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{text-decoration:none;color:#e01931;background-color:#1d2247}.dropdown-menu{background-color:#1d2247}span.input-group-btn.open>ul>li>a{background-image:none}.progress{background-image:none;background-color:#1d2247;box-shadow:inset 0 0 3px 0 #e01931}.progress-bar{background-image:none;background-color:#1d2247;box-shadow:inset 0 0 12px 0 #e01931;transition:.3s all}.media:first-child{margin-top:15px}.media{box-shadow:0 0 6px 1px #e01931}.sidebar-nav{padding:10px}.nav.nav-list a{padding:5px 10px}.nav-header{font-weight:700}.scroll{overflow-y:scroll;height:calc(100vh - 96px)}.left-playlist{box-shadow:0 0 6px 1px #e01931;height:calc(100vh - 20vw - 30px)}
\ No newline at end of file
+body{margin:0;margin-top:50px;background:#111;color:#f8f8f8}.btn-success{color:#f8f8f8;background-color:#111;border-color:#f8f8f8;transition:all .3s}.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.dropdown-toggle:active,.dropdown-toggle:focus,.open>.dropdown-toggle.btn-success{color:#111!important;background-color:#f8f8f8!important;border-color:#f8f8f8!important;transition:all .3s}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{text-decoration:none;color:#f8f8f8;background-color:#111}.dropdown-menu{background-color:#111}span.input-group-btn.open>ul>li>a{background-image:none}.progress{background-image:none;background-color:#111;box-shadow:inset 0 0 3px 0 #f8f8f8}.progress-bar{background-image:none;background-color:#111;box-shadow:inset 0 0 12px 0 #f8f8f8;transition:.3s all}.media:first-child{margin-top:15px}.media{box-shadow:0 0 6px 1px #f8f8f8}.sidebar-nav{padding:10px}.nav.nav-list a{padding:5px 10px}.nav-header{font-weight:700}.scroll{overflow-y:scroll;height:calc(100vh - 96px)}.left-playlist{box-shadow:0 0 6px 1px #f8f8f8;height:calc(100vh - 20vw - 30px)}.row-flex{word-break:break-all;width:100%;display:flex}.row-flex .flex-btn{width:50px}.row-flex .cont{width:100%}
\ No newline at end of file
diff --git a/src/app/style/style.less b/src/app/style/style.less
index 02ad122..1fb83d7 100644
--- a/src/app/style/style.less
+++ b/src/app/style/style.less
@@ -5,8 +5,9 @@
 
 */
 
-@main-front-color: #E01931;
-@background-color: #1D2247;
+@main-front-color   : #f8f8f8;
+@background-color   : #111111;
+@background-2ndcolor: #232323;
 
 body {
   margin: 0;
@@ -74,3 +75,14 @@ span.input-group-btn.open > ul > li> a{
     box-shadow: 0px 0px 6px 1px @main-front-color;
     height: ~"calc(100vh - 20vw - 30px )";
 }
+.row-flex{
+    word-break: break-all;
+    width:100%;
+    display: flex;
+    .flex-btn{
+        width: 50px;
+    }
+    .cont{
+        width:100%;
+    }
+}
diff --git a/src/app/view/layout.html b/src/app/view/layout.html
index 0db1484..18f5aa9 100644
--- a/src/app/view/layout.html
+++ b/src/app/view/layout.html
@@ -10,7 +10,7 @@
     </script>
     <script src="./../libs/jquery/jquery-3.2.1.min.js"></script>
     <script src="./../libs/bootstrap/js/bootstrap.js"></script>
-
+    <script src="./../js/player.js"></script>
     <meta charset="utf-8">
     <title>Cyb3r Downloader</title>
     <link rel="stylesheet" href="./../libs/bootstrap/css/bootstrap.css" />
@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="./../libs/font-awesome/css/font-awesome.min.css" />
     <link rel="stylesheet" href="./../style/progress.css" />
     <link rel="stylesheet" href="./../style/style.css" />
+    <link rel="stylesheet" href="./../style/player.css" />
 </head>
 
 <body>
@@ -45,12 +46,12 @@
                                     <span class="input-group-btn">
                                           <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                             Format <span class="caret"></span>
-                                          </button>
-                                          <ul class="dropdown-menu" id="format">
-                                            <li><a href="#" class="format" data-format="mp3">MP3</a></li>
-                                            <li role="separator" class="divider"></li>
-                                            <li><a href="#" class="format" data-format="mp4">MP4</a></li>
-                                          </ul>
+                                    </button>
+                                    <ul class="dropdown-menu" id="format">
+                                        <li><a href="#" class="format" data-format="mp3">MP3</a></li>
+                                        <li role="separator" class="divider"></li>
+                                        <li><a href="#" class="format" data-format="mp4">MP4</a></li>
+                                    </ul>
                                     </span>
                                     <span class="input-group-btn">
                                       <button type="button" id="start-download" class="btn btn-success btn-sm">Download</button>
@@ -65,18 +66,32 @@
                         </div>
                     </div>
                     <div role="tabpanel" class="tab-pane fade" id="player">
-                        <table class="table table-striped" id="watchr_files">
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div id="watchr_files">
 
-                        </table>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
 
             </div>
             <div class="col-md-4">
                 <div class="embed-responsive embed-responsive-16by9">
-                  <video controls="true" id="video"></video>
+                    <video id="video"></video>
+                </div>
+                <div style="    margin: 0;    padding: 0;    height: 35px; display:flex;">
+                    <button class="btn nabbar-btn btn-success" style="margin:0;" id="play"><i class="fa fa-pause-circle-o" aria-hidden="true"></i></button>
+                    <div id="time">
+                        <span></span>
+                    </div>
+                    <button class="btn nabbar-btn btn-success" style="margin:0;"><i class="fa fa-volume-up" aria-hidden="true"></i></button>
+                    <div id="volume">
+                        <span></span>
+                    </div>
+                    <button class="btn navbar-btn btn-success" id="pot" style="margin:0;"><i class="fa fa-window-restore" aria-hidden="true"></i></button>
                 </div>
-                <button id="pot">POT</button>
                 <div class="left-playlist">
 
                 </div>
diff --git a/src/app/view/pot.html b/src/app/view/pot.html
index a60124c..78e0938 100644
--- a/src/app/view/pot.html
+++ b/src/app/view/pot.html
@@ -10,6 +10,7 @@
     </script>
     <script src="./../libs/jquery/jquery-3.2.1.min.js"></script>
     <script src="./../libs/bootstrap/js/bootstrap.js"></script>
+    <script src="./../js/player.js"></script>
 
     <meta charset="utf-8">
     <title>Cyb3r Downloader - Player on Top</title>
@@ -18,6 +19,7 @@
     <link rel="stylesheet" href="./../libs/font-awesome/css/font-awesome.min.css" />
     <link rel="stylesheet" href="./../style/progress.css" />
     <link rel="stylesheet" href="./../style/style.css" />
+    <link rel="stylesheet" href="./../style/player.css" />
     <style>
         video {
             max-width: 100%;
@@ -38,43 +40,6 @@
             min-height: 35px;
             width:100%;
         }
-        #time
-        {
-          cursor: pointer;
-          height: 10px;
-          margin-bottom: 10px;
-          outline: thin solid #e01931;
-          overflow: hidden;
-          position: relative;
-          width: 100%;
-          vertical-align: -webkit-baseline-middle;
-          line-height: 1.42857143; height: 9px;
-          display:inline-block;
-          top: 13px;
-        }
-        #volume
-        {
-          cursor: pointer;
-          height: 10px;
-          margin-bottom: 10px;
-          outline: thin solid #e01931;
-          overflow: hidden;
-          position: relative;
-          width: 200px;
-          vertical-align: -webkit-baseline-middle;
-          line-height: 1.42857143; height: 9px;
-          display:inline-block;
-          top: 13px;
-        }
-        #time span ,#volume span
-        {
-            background-color: #e01931;
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 10px;
-            width: 0px;
-        }
         body .navbar{
             opacity: 0;
             transition: .3s all;
diff --git a/src/controller/player_onTop.js b/src/controller/player_onTop.js
index ba45e28..33b85f3 100644
--- a/src/controller/player_onTop.js
+++ b/src/controller/player_onTop.js
@@ -18,6 +18,18 @@ ipcMain
     console.log('CLOSE')
     pot.close(event);
 })
+.on('pot_run',(event,arg)=>{
+    pot_open_ev.sender.send('pot_play',arg);
+})
+
+.on('pot_real_open',(event,arg)=>{
+    console.log('POT EVENT SET')
+    pot_open_ev = event;
+})
+.on('open-pot',(event,arg)=>{
+
+    pot.open(event);
+})
 
 pot.isOpen = false;
 
@@ -28,7 +40,6 @@ pot.open = (e) => {
         win.close();
     }
     var x = new playerOnTop(e);
-    console.log('XX');
 }
 pot.close = ()=>{
     console.log('CLOSE')
@@ -42,7 +53,7 @@ class playerOnTop {
         pot.isOpen = true;
         this.win = new BrowserWindow({
             width: 320,
-            height: 500,
+            height: 180,
             show: false,
             frame: false,
             alwaysOnTop: true,
@@ -53,7 +64,6 @@ class playerOnTop {
         win.loadURL(`file://${global.dir}/app/view/pot.html`)
         win.once('ready-to-show', () => {
             win.show();
-            console.log('XX');
         })
         win.on('resize', function () {
           setTimeout(function () {
@@ -65,7 +75,6 @@ class playerOnTop {
             pot.isOpen = false;
             e.sender.send('play-in-Window',{do :false});
             win = null;
-            console.log('XX');
         });
     }
 }
diff --git a/src/controller/youtube-dl.js b/src/controller/youtube-dl.js
index df53a13..5a38d5c 100644
--- a/src/controller/youtube-dl.js
+++ b/src/controller/youtube-dl.js
@@ -13,19 +13,6 @@ var fol = null;
 
 var pot_open_ev = null;
 ipcMain
-.on('pot_run',(event,arg)=>{
-    pot_open_ev.sender.send('pot_play',arg);
-})
-
-.on('pot_real_open',(event,arg)=>{
-    console.log('POT EVENT SET')
-    pot_open_ev = event;
-})
-ipcMain
-.on('open-pot',(event,arg)=>{
-
-    pot.open(event);
-})
 .on('start-download', (event, arg)=>{
   path = orig_path
   var download = new yt_dl(arg.url,arg.id);
@@ -50,7 +37,7 @@ ipcMain
         download.download();
     });
 })
-ipcMain.on('setPath', function(event, arg) {
+.on('setPath', function(event, arg) {
   path = arg.path;
   orig_path = arg.path;
   if(fol !== null){
diff --git a/src/themes/standard/style.less b/src/themes/standard/style.less
index 02ad122..1fb83d7 100644
--- a/src/themes/standard/style.less
+++ b/src/themes/standard/style.less
@@ -5,8 +5,9 @@
 
 */
 
-@main-front-color: #E01931;
-@background-color: #1D2247;
+@main-front-color   : #f8f8f8;
+@background-color   : #111111;
+@background-2ndcolor: #232323;
 
 body {
   margin: 0;
@@ -74,3 +75,14 @@ span.input-group-btn.open > ul > li> a{
     box-shadow: 0px 0px 6px 1px @main-front-color;
     height: ~"calc(100vh - 20vw - 30px )";
 }
+.row-flex{
+    word-break: break-all;
+    width:100%;
+    display: flex;
+    .flex-btn{
+        width: 50px;
+    }
+    .cont{
+        width:100%;
+    }
+}