diff --git a/assets/css/file-type-icons.css b/assets/css/file-type-icons.css
index ba9a031..1fd378d 100644
--- a/assets/css/file-type-icons.css
+++ b/assets/css/file-type-icons.css
@@ -1,29 +1,29 @@
 /* Additional file types */
-.fileManager LI.ext-c:before {background-position: -48px 0}
-.fileManager LI.ext-cpp:before, .fileManager LI.ext-ino:before {background-position: -64px 0}
-.fileManager LI.ext-cs:before {background-position: -80px 0}
-.fileManager LI.ext-coffee:before {background-position: -96px 0}
-.fileManager LI.ext-css:before {background-position: -112px 0}
-.fileManager LI.ext-erl:before {background-position: -128px 0}
-.fileManager LI.ext-gif:before {background-position: -144px 0}
-.fileManager LI.ext-go:before {background-position: -160px 0}
-.fileManager LI.ext-htm:before, .fileManager LI.ext-html:before {background-position: -176px 0}
-.fileManager LI.ext-jpg:before, .fileManager LI.ext-jpeg:before {background-position: -192px 0}
-.fileManager LI.ext-java:before {background-position: -208px 0}
-.fileManager LI.ext-js:before, .fileManager LI.ext-json:before {background-position: -224px 0}
-.fileManager LI.ext-jl:before {background-position: -240px 0}
-.fileManager LI.ext-less:before {background-position: -256px 0}
-.fileManager LI.ext-lua:before {background-position: -272px 0}
-.fileManager LI.ext-md:before {background-position: -288px 0}
-.fileManager LI.ext-pl:before {background-position: -304px 0}
-.fileManager LI.ext-php:before {background-position: -320px 0}
-.fileManager LI.ext-png:before {background-position: -336px 0}
-.fileManager LI.ext-py:before, .fileManager LI.ext-mpy:before {background-position: -352px 0}
-.fileManager LI.ext-rb:before, .fileManager LI.ext-ruby:before {background-position: -368px 0}
-.fileManager LI.ext-scss:before {background-position: -384px 0}
-.fileManager LI.ext-sql:before {background-position: -400px 0}
-.fileManager LI.ext-txt:before {background-position: -416px 0}
-.fileManager LI.ext-ts:before {background-position: -432px 0}
-.fileManager LI.ext-xml:before {background-position: -448px 0}
-.fileManager LI.ext-yaml:before {background-position: -464px 0}
-.fileManager LI.ext-zip:before {background-position: -480px 0}
+.ext-c:before {background-position: -48px 0 !important;}
+.ext-cpp:before, .ext-ino:before {background-position: -64px 0 !important;}
+.ext-cs:before {background-position: -80px 0 !important;}
+.ext-coffee:before {background-position: -96px 0 !important;}
+.ext-css:before {background-position: -112px 0 !important;}
+.ext-erl:before {background-position: -128px 0 !important;}
+.ext-gif:before {background-position: -144px 0 !important;}
+.ext-go:before {background-position: -160px 0 !important;}
+.ext-htm:before, .ext-html:before {background-position: -176px 0 !important;}
+.ext-jpg:before, .ext-jpeg:before {background-position: -192px 0 !important;}
+.ext-java:before {background-position: -208px 0 !important;}
+.ext-js:before, .ext-json:before {background-position: -224px 0 !important;}
+.ext-jl:before {background-position: -240px 0 !important;}
+.ext-less:before {background-position: -256px 0 !important;}
+.ext-lua:before {background-position: -272px 0 !important;}
+.ext-md:before {background-position: -288px 0 !important;}
+.ext-pl:before {background-position: -304px 0 !important;}
+.ext-php:before {background-position: -320px 0 !important;}
+.ext-png:before {background-position: -336px 0 !important;}
+.ext-py:before, .ext-mpy:before {background-position: -352px 0 !important;}
+.ext-rb:before, .ext-ruby:before {background-position: -368px 0 !important;}
+.ext-scss:before {background-position: -384px 0 !important;}
+.ext-sql:before {background-position: -400px 0 !important;}
+.ext-txt:before {background-position: -416px 0 !important;}
+.ext-ts:before {background-position: -432px 0 !important;}
+.ext-xml:before {background-position: -448px 0 !important;}
+.ext-yaml:before {background-position: -464px 0 !important;}
+.ext-zip:before {background-position: -480px 0 !important;}
diff --git a/assets/css/icecoder.css b/assets/css/icecoder.css
index b8d66ce..7892f63 100644
--- a/assets/css/icecoder.css
+++ b/assets/css/icecoder.css
@@ -83,6 +83,9 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
     transition: width 0.15s ease-in-out;
     transition: left 0.15s ease-in-out;
 }
+.tabsBar .tab:before {
+    position: absolute; width: 16px; height: 16px; content: ""; margin-left: -2px; background:url('../images/file-folder-icons.png') no-repeat 0 0; background-position: -32px 0;
+}
 .tabsBar .tabSlide {
     transition: left 0.15s ease-in-out;
 }
diff --git a/assets/js/icecoder.js b/assets/js/icecoder.js
index c49699a..9ec3ead 100644
--- a/assets/js/icecoder.js
+++ b/assets/js/icecoder.js
@@ -3995,7 +3995,7 @@ var ICEcoder = {
 
     // Create a new tab for a file
     createNewTab: function(isNew) {
-        var closeTabLink, fileName;
+        var closeTabLink, fileName, fileExt;
 
         // Push new file into array
         this.openFiles.push(this.shortURL);
@@ -4004,8 +4004,10 @@ var ICEcoder = {
         closeTabLink = '<a nohref onClick="ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="'+iceLoc+'/assets/images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'; this.overCloseLink=true" onMouseOut="this.style.backgroundColor=prevBG; this.overCloseLink=false"></a>';
         get('tab'+(this.openFiles.length)).style.display = "inline-block";
         fileName = this.openFiles[this.openFiles.length-1];
-        get('tab'+(this.openFiles.length)).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
+        fileExt = fileName.substr(fileName.lastIndexOf(".") + 1);
+        get('tab'+(this.openFiles.length)).innerHTML = closeTabLink + "<span style=\"display: inline-block; width: 19px\"></span>" + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
         get('tab'+(this.openFiles.length)).title = "/" + this.openFiles[this.openFiles.length-1].replace(/\//,"");
+        get('tab'+(this.openFiles.length)).className = "tab ext-" + fileExt;
 
         // Set the widths
         this.setTabWidths();
@@ -4041,7 +4043,7 @@ var ICEcoder = {
 
     // Create a new tab for a file
     renameTab: function(tabNum,newName) {
-        var closeTabLink, fileName;
+        var closeTabLink, fileName, fileExt;
 
         // Push new file into array
         this.openFiles[tabNum-1] = newName;
@@ -4049,8 +4051,10 @@ var ICEcoder = {
         // Setup a new tab
         closeTabLink = '<a nohref onClick="ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="'+iceLoc+'/assets/images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'; this.overCloseLink=true" onMouseOut="this.style.backgroundColor=prevBG; this.overCloseLink=false"></a>';
         fileName = this.openFiles[tabNum-1];
-        get('tab'+tabNum).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
+        fileExt = fileName.substr(fileName.lastIndexOf(".") + 1);
+        get('tab'+tabNum).innerHTML = closeTabLink + "<span style=\"display: inline-block; width: 19px\"></span>" + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
         get('tab'+tabNum).title = "/" + this.openFiles[tabNum-1].replace(/\//,"");
+        get('tab'+tabNum).className = "tab ext-" + fileExt;
     },
 
     // Reset all tabs to be without a highlight and then highlight the selected
@@ -4235,6 +4239,7 @@ var ICEcoder = {
 
     // Tab dragging start
     tabDragStart: function(tab) {
+        var fileName, fileExt;
         this.draggingTab = tab;
         this.diffStartX = this.mouseX;
         this.tabDragMouseXStart = (this.mouseX - (parseInt(this.files.style.width,10)+53+18)) % 150;
@@ -4242,9 +4247,11 @@ var ICEcoder = {
         get('tab'+tab).style.zIndex = 2;
         // Set classes for other tabs (tabSlide) and the one we're dragging (tabDrag)
         for (var i=1; i<=this.openFiles.length; i++) {
+            fileName = this.openFiles[i - 1];
+            fileExt = fileName.substr(fileName.lastIndexOf(".") + 1);
             get('tab'+i).className = i!==tab
-                ? "tab tabSlide"
-                : "tab tabDrag";
+                ? "tab ext-" + fileExt + " tabSlide"
+                : "tab ext-" + fileExt + " tabDrag";
         }
     },
 
@@ -4283,23 +4290,25 @@ var ICEcoder = {
 
     // Tab dragging end
     tabDragEnd: function() {
-        var swapWith, tempArray;
+        var swapWith, fileName, fileExt, tempArray;
 
         // Set the tab widths
         this.setTabWidths();
-        // Determin what tabs we've swapped and reset classname, opacity & z-index for all
+        // Determine what tabs we've swapped and reset classname, opacity & z-index for all
         for (var i=1; i<=this.openFiles.length; i++) {
             if (this.thisLeft >= this.tabLeftPos[i-1]) {
                 swapWith = this.thisLeft == this.tabLeftPos[0] ? 1 : this.dragTabNo > i ? i+1 : i;
             }
-            get('tab'+i).className = "tab";
+            fileName = this.openFiles[i - 1];
+            fileExt = fileName.substr(fileName.lastIndexOf(".") + 1);
+            get('tab'+i).className = "tab ext-" + fileExt;
             get('tab'+i).style.opacity = 1;
             if (i!=this.dragTabNo) {
                 get('tab'+i).style.zIndex = 1;
             } else {
-                setTimeout(function() {
-                    get('tab'+i).style.zIndex = 1;
-                },150);
+                setTimeout(function(num) {
+                    get('tab' + num).style.zIndex = 1;
+                }, 150, swapWith);
             }
         }
         if (this.thisLeft && this.thisLeft!==false) {
@@ -4326,6 +4335,7 @@ var ICEcoder = {
         // Setup an array of our actual arrays and the blank ones
         a = [this.savedPoints, this.savedContents, this.openFiles, this.openFileMDTs, this.openFileVersions, this.cMInstances];
         b = [savedPoints, savedContents, openFiles, openFileMDTs, openFileVersions, cMInstances];
+
         // Push the new order values into array b then set into array a
         for (var i=0;i<a.length;i++) {
             for (var j=0;j<a[i].length;j++) {
@@ -4333,6 +4343,7 @@ var ICEcoder = {
             }
             a[i] = b[i];
         }
+
         // Begin swapping tab id's around to an ascending order and work out new selectedTab
         for (var i=0;i<newOrder.length;i++) {
             get('tab'+newOrder[i]).id = "tab" + (i+1) + ".temp";
@@ -4340,27 +4351,28 @@ var ICEcoder = {
                 selectedTabWillBe = (i+1);
             }
         }
+
         // Now remove the .temp part from all tabs to get new ascending order
         for (var i=0;i<newOrder.length;i++) {
             get('tab'+(i+1)+'.temp').id = "tab"+(i+1);
         }
-        // Set the classname for sliding
-        if (get('tab'+selectedTabWillBe)) {
-            get('tab'+selectedTabWillBe).className = "tab tabSlide";
-        }
-        // Finally, set the array values, tab widths and switch tab
+
+        // Set the array values, tab widths and switch tab
         this.savedPoints = a[0];
         this.savedContents = a[1];
         this.openFiles = a[2];
         this.openFileMDTs = a[3];
         this.openFileVersions = a[4];
         this.cMInstances = a[5];
+
+        // Set tab widths and switch to this tab
         this.setTabWidths();
         this.switchTab(selectedTabWillBe);
     },
 
     // Alphabetize tabs
     alphaTabs: function() {
+        var fileName, fileExt;
         if (this.openFiles.length>0) {
             var currentArray, currentArrayFull, alphaArray, nextValue, nextPos;
 
@@ -4371,7 +4383,9 @@ var ICEcoder = {
             for (var i=0;i<this.openFiles.length;i++) {
                 currentArray.push(this.openFiles[i].slice(this.openFiles[i].lastIndexOf('/')+1));
                 currentArrayFull.push(this.openFiles[i]);
-                get('tab'+(i+1)).className = "tab tabSlide";
+                fileName = this.openFiles[i];
+                fileExt = fileName.substr(fileName.lastIndexOf(".") + 1);
+                get('tab'+(i+1)).className = "tab ext-" + fileExt + " tabSlide";
             }
             // Get our next value, which is the next filename alpha lowest value and full path
             while (currentArray.length>0) {
diff --git a/index.php b/index.php
index b55daf5..a874a5c 100644
--- a/index.php
+++ b/index.php
@@ -49,6 +49,7 @@ $isMac = false !== strpos($_SERVER['HTTP_USER_AGENT'], "Macintosh") ? true : fal
 <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
 <link rel="stylesheet" type="text/css" href="<?php echo $iceURLPath;?>/assets/css/resets.css?microtime=<?php echo microtime(true);?>">
 <link rel="stylesheet" type="text/css" href="<?php echo $iceURLPath;?>/assets/css/icecoder.css?microtime=<?php echo microtime(true);?>">
+<link rel="stylesheet" type="text/css" href="<?php echo $iceURLPath;?>/assets/css/file-type-icons.css?microtime=<?php echo microtime(true);?>">
 <link rel="stylesheet" href="<?php echo $iceURLPath . "/";
 echo "default" === $ICEcoder["theme"]
     ? 'assets/css/editor.css'