diff --git a/share/tools/web_config/webconfig.js b/share/tools/web_config/fishconfig.js
similarity index 81%
rename from share/tools/web_config/webconfig.js
rename to share/tools/web_config/fishconfig.js
index da47f50a7..5234fac90 100644
--- a/share/tools/web_config/webconfig.js
+++ b/share/tools/web_config/fishconfig.js
@@ -1,6 +1,6 @@
-webconfig = angular.module("webconfig", []);
+fishconfig = angular.module("fishconfig", []);
 
-webconfig.filter("filterVariable", function() {
+fishconfig.filter("filterVariable", function() {
     return function(variables, query) {
         var result = []
         if (variables == undefined) return result;
@@ -17,12 +17,12 @@ webconfig.filter("filterVariable", function() {
     }
 });
 
-webconfig.config(
+fishconfig.config(
     ["$routeProvider", function($routeProvider) {
         $routeProvider
         .when("/colors", {
-            controller: "newColorsController",
-            templateUrl: "partials/new_colors.html"
+            controller: "colorsController",
+            templateUrl: "partials/colors.html"
         })
         .when("/prompt", {
             controller: "promptController",
@@ -45,7 +45,7 @@ webconfig.config(
         })
     }]);
 
-webconfig.controller("main", function($scope, $location) {
+fishconfig.controller("main", function($scope, $location) {
     $scope.currentTab = "colors";
 
     $scope.changeView = function(view) {
@@ -62,81 +62,8 @@ webconfig.controller("main", function($scope, $location) {
     }
 
 })
-/*
-webconfig.controller("colorsController", function($scope, $http) {
-    $scope.term256Colors = [ "ffd7d7", "d7afaf", "af8787", "875f5f", "5f0000", "870000", "af0000", "d70000", "ff0000", "ff5f5f", "d75f5f", "d78787", "ff8787", "ffafaf", "ffaf87", "ffaf5f", "ffaf00", "ff875f", "ff8700", "ff5f00", "d75f00", "af5f5f", "af5f00", "d78700", "d7875f", "af875f", "af8700", "875f00", "d7af87", "ffd7af", "ffd787", "ffd75f", "d7af00", "d7af5f", "ffd700", "ffff5f", "ffff00", "ffff87", "ffffaf", "ffffd7", "d7ff00", "afd75f", "d7d700", "d7d787", "d7d7af", "afaf87", "87875f", "5f5f00", "878700", "afaf00", "afaf5f", "d7d75f", "d7ff5f", "d7ff87", "87ff00", "afff00", "afff5f", "afd700", "87d700", "87af00", "5f8700", "87af5f", "5faf00", "afd787", "d7ffd7", "d7ffaf", "afffaf", "afff87", "5fff00", "5fd700", "87d75f", "5fd75f", "87ff5f", "5fff5f", "87ff87", "afd7af", "87d787", "87d7af", "87af87", "5f875f", "5faf5f", "005f00", "008700", "00af00", "00d700", "00ff00", "00ff5f", "5fff87", "00ff87", "87ffaf", "afffd7", "5fd787", "00d75f", "5faf87", "00af5f", "5fffaf", "00ffaf", "5fd7af", "00d787", "00875f", "00af87", "00d7af", "5fffd7", "87ffd7", "00ffd7", "d7ffff", "afd7d7", "87afaf", "5f8787", "5fafaf", "87d7d7", "5fd7d7", "5fffff", "00ffff", "87ffff", "afffff", "00d7d7", "00d7ff", "5fd7ff", "5fafd7", "00afd7", "00afff", "0087af", "00afaf", "008787", "005f5f", "005f87", "0087d7", "0087ff", "5fafff", "87afff", "5f87d7", "5f87ff", "005fd7", "005fff", "005faf", "5f87af", "87afd7", "afd7ff", "87d7ff", "d7d7ff", "afafd7", "8787af", "afafff", "8787d7", "8787ff", "5f5fff", "5f5fd7", "5f5faf", "5f5f87", "00005f", "000087", "0000af", "0000d7", "0000ff", "5f00ff", "5f00d7", "5f00af", "5f0087", "8700af", "8700d7", "8700ff", "af00ff", "af00d7", "d700ff", "d75fff", "d787ff", "ffafd7", "ffafff", "ffd7ff", "d7afff", "d7afd7", "af87af", "af87d7", "af87ff", "875fd7", "875faf", "875fff", "af5fff", "af5fd7", "af5faf", "d75fd7", "d787d7", "ff87ff", "ff5fff", "ff5fd7", "ff00ff", "ff00af", "ff00d7", "d700af", "d700d7", "af00af", "870087", "5f005f", "87005f", "af005f", "af0087", "d70087", "d7005f", "ff0087", "ff005f", "ff5f87", "d75f87", "d75faf", "ff5faf", "ff87af", "ff87d7", "d787af", "af5f87", "875f87", "000000", "080808", "121212", "1c1c1c", "262626", "303030", "3a3a3a", "444444", "4e4e4e", "585858", "5f5f5f", "626262", "6c6c6c", "767676", "808080", "878787", "8a8a8a", "949494", "9e9e9e", "a8a8a8", "afafaf", "b2b2b2", "bcbcbc", "c6c6c6", "d0d0d0", "d7d7d7", "dadada", "e4e4e4", "eeeeee", "ffffff", ];
 
-    range = function(start, end) {
-        var result = [];
-        for (var i = start; i <= end; i++) {
-            result.push(i);
-        }
-        return result;
-    };
-
-    $scope.selectedColorConfig = null;
-    $scope.itemsPerRow = range(0, 15);
-    $scope.totalRows = range(0, $scope.term256Colors.length/$scope.itemsPerRow.length);
-    $scope.selectedCell = null;
-    $scope.target = "text";
-
-    $scope.selectConfig = function(newSelection) {
-        $scope.selectedColorConfig = newSelection;
-        //console.log("Color :" + $scope.colorConfig[$scope.selectedColorConfig].color.toLowerCase() + $scope.term256Colors.indexOf($scope.colorConfig[$scope.selectedColorConfig].color.toLowerCase()));
-        if ($scope.target == "background") {
-            $scope.selectedCell = $scope.term256Colors.indexOf($scope.selectedColorConfig.background.toLowerCase());
-        }
-        else {
-            $scope.selectedCell = $scope.term256Colors.indexOf($scope.selectedColorConfig.color.toLowerCase());
-       } 
-    }
-
-    $scope.pickedColorCell = function(index) {
-        console.log("color picked" + index +  " " + $scope.term256Colors[index]);
-        $scope.selectedCell = index;
-
-        if ($scope.target == "background") {
-            $scope.selectedColorConfig.background = $scope.term256Colors[$scope.selectedCell];
-        }
-        else {
-            $scope.selectedColorConfig.color = $scope.term256Colors[$scope.selectedCell];
-        } 
-
-        $scope.setColor();
-    }
-
-    $scope.pickedColorPickerTarget = function(target) {
-        console.log("Picked " + target);
-        $scope.target = target;
-        // Update selection in color picker
-        $scope.selectConfig($scope.selectedColorConfig);
-    }
-
-    $scope.setUnderline = function() {
-        $scope.selectedColorConfig.underline = !$scope.selectedColorConfig.underline;
-        $scope.setColor();
-    }
-
-    $scope.fetchColors = function() {
-        $http.get("/colors/").success(function(data, status, headers, config) {
-        $scope.colorConfigs = data;
-        $scope.selectedColorConfig = data[0];
-        $scope.selectedCell = $scope.term256Colors.indexOf($scope.selectedColorConfig.color);
-    })};
-
-    $scope.setColor = function() {
-        var config = $scope.selectedColorConfig;
-        var postData = "what=" + config.name + "&color=" + config.color + "&background_color="+ config.background + "&bold=" + config.bold + "&underline=" + config.underline;
-        $http.post("/set_color/", postData, { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).success(function(data, status, headers, config) {
-            console.log(data);
-        })
-    };
-
-    $scope.fetchColors();
-});
-*/
-
-webconfig.controller("newColorsController", function($scope, $http) {
+fishconfig.controller("colorsController", function($scope, $http) {
     $scope.term256Colors = [ //247
     "ffd7d7",
     "d7afaf",
@@ -773,7 +700,7 @@ webconfig.controller("newColorsController", function($scope, $http) {
     $scope.fetchColors();
 });
 
-webconfig.controller("promptController", function($scope, $http) {
+fishconfig.controller("promptController", function($scope, $http) {
     $scope.selectedPrompt = null;
 
     $scope.fetchCurrentPrompt = function(currenttPrompt) {
@@ -815,7 +742,7 @@ webconfig.controller("promptController", function($scope, $http) {
     $scope.fetchSamplePrompts();
 });
 
-webconfig.controller("functionsController", function($scope, $http) {
+fishconfig.controller("functionsController", function($scope, $http) {
     $scope.selectedFunction = null;
     $scope.functionDefinition = ""; 
 
@@ -856,7 +783,7 @@ webconfig.controller("functionsController", function($scope, $http) {
     $scope.fetchFunctions();
 });
 
-webconfig.controller("variablesController", function($scope, $http) {
+fishconfig.controller("variablesController", function($scope, $http) {
     $scope.query = null;
 
     $scope.fetchVariables= function() {
@@ -867,7 +794,7 @@ webconfig.controller("variablesController", function($scope, $http) {
     $scope.fetchVariables();
 });
 
-webconfig.controller("historyController", function($scope, $http, $timeout) {
+fishconfig.controller("historyController", function($scope, $http, $timeout) {
     $scope.historyItems = [];
     $scope.historySize = 0;
     // Stores items which are yet to be added in history items
diff --git a/share/tools/web_config/index.html b/share/tools/web_config/index.html
index e927ef204..66307ebab 100644
--- a/share/tools/web_config/index.html
+++ b/share/tools/web_config/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-<html ng-app="webconfig">
+<html ng-app="fishconfig">
 <head>
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
 <title>fish shell configuration</title>
 <link rel="stylesheet" type="text/css" href="fishconfig.css"/>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="angular.js"></script>
-<script type="text/javascript" src="webconfig.js"></script>
+<script type="text/javascript" src="fishconfig.js"></script>
 
 <script type="text/javascript">
 
diff --git a/share/tools/web_config/partials/colors.html b/share/tools/web_config/partials/colors.html
index 36d06b27b..f783e95f7 100644
--- a/share/tools/web_config/partials/colors.html
+++ b/share/tools/web_config/partials/colors.html
@@ -1,39 +1,64 @@
-<div id="master_detail_table">
-    <div id="master">
-        <div ng-repeat="colorConfig in colorConfigs">
-            <div ng-class="{'master_element':true, 'selected_master_elem': colorConfig==selectedColorConfig}" style="color: {{ colorConfig.color }}" ng-click="selectConfig(colorConfig)">
-                <span class="master_element_text">{{ colorConfig.name}}</span> 
-                <span class="master_element_description" style="border-bottom-color: rgb(85, 85, 85);"> {{ colorConfig.description }}</span>
-            </div>
+<div>
+    <!-- ko with: color_picker -->
+    <span style="padding-left: 25px">Click to customize each color:</span><br>
+    <div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}">
+        <div class="color_picker_background_cells">
+            <div ng-style="{'background-color': color}" ng-repeat="color in sampleTerminalBackgroundColors" ng-click="changeTerminalBackgroundColor(color)"></div>
         </div>
-            <tbody>
-            <tr class="data_table_row">
-            <td class="data_table_cell no_overflow" onclick:"toggle_overflow(this)"="" style="text-align: left; padding-right: 30px;"></td>
+        <!-- This is the sample text -->
+        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">/bright/vixens</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.param}" ng-click="selectColorSetting('param')">jump</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.end}" ng-click="selectColorSetting('end')">|</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">dozy</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.quote}" ng-click="selectColorSetting('quote')"> "fowl" </span>
+        <span data-ng-style="{ 'color': selectedColorScheme.redirection}" ng-click="selectColorSetting('redirection')">&gt; quack</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.end}" ng-click="selectColorSetting('end')">&</span>
+        <br>
+        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">echo</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.error}" ng-click="selectColorSetting('error')">'Errors are the portals to discovery</span>
+        <br>
+        <span data-ng-style="{ 'color': selectedColorScheme.comment}" ng-click="selectColorSetting('comment')"># This is a comment</span>
+        <br>
+        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">Th</span><span data-ng-style="{ 'color': selectedColorScheme.autosuggestion }" ng-click="selectColorSetting('autosuggestion')"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
+
+        <span class="save_button" style="position: absolute; right: 5px; bottom: 5px;" data-ng-style="{'color': text_color_for_color(selectedColorScheme.preferred_background || 'white')}" ng-show="showSaveButton" ng-click="setTheme()">Apply</span>
+
+    </div>
+            
+    <table class="colorpicker_term256" style="margin: 0px 20px;">
+        <tbody>
+            <tr class="colorpicker_term256_row" data-ng-repeat="color_array in colorArraysArray"> 
+                <td class="colorpicker_term256_cell" data-ng-style="{'background-color': color, 'color': color}" ng-click="changeSelectedTextColor(color)" ng-repeat="color in color_array">
+                                <div class="colorpicker_term256_selection_indicator" ng-show="selectedColorScheme[selectedColorSetting] == color" ng-style="{'border-color': border_color_for_color(color)}"</div>
+                </td>
             </tr>
-            </tbody>
-        </table>
-    </div>
-
-    <div id="detail">
-        <div id="detail_colorpicker">
-            <div class="colorpicker_target">
-
-                <div ng-class="{'colorpicker_target_tab': true, 'tab_first colorpicker_target_selected': target == 'text'}" id="foreground" ng-click="pickedColorPickerTarget('text')">Text</div><div ng-class="{'colorpicker_target_tab tab_last': true, 'tab_first colorpicker_target_selected': target == 'background'}" id="background" ng-click="pickedColorPickerTarget('background')">Background</div>
-                </div>
-
-                <table id="colorpicker_term256">
-                    <tbody>
-                        <tr ng-repeat="row in totalRows">
-                            <td ng-repeat="item in itemsPerRow">
-                                <div ng-class="{'colorpicker_term256_cell':true, 'colorpicker_cell_selected':(row*itemsPerRow.length)+item == selectedCell}" style="background-color: {{ term256Colors[(row*itemsPerRow.length)+item] }}" ng-click="pickedColorCell((row*itemsPerRow.length)+item)">
-                                <div style="width: 100%; height: 100%"></div>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <div class="colorpicker_modifiers">
-                <div ng-class="{'colorpicker_modifier_cell': true, 'modifier_cell_selected': selectedColorConfig.underline}" id="modifier_underline" ng-style="{'text-decoration: underline': true}" ng-click="setUnderline()">Underline</div>
+        </tbody>
+        <!-- /ko -->
+    </table>
+    
+    <div class="color_scheme_choices_list">
+        <div class="color_scheme_choice_container" data-ng-repeat="color_scheme in color_schemes" ng-click="changeSelectedColorScheme(color_scheme)">
+            <div class="color_scheme_choice_label">
+                <!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
+                <span>{{color_scheme.name }}</span><!--a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></a-->
+            </div>
+            <div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': color_scheme.preferred_background}">
+                <span data-ng-style="{'color': color_scheme.command}">/bright/vixens</span>
+                <span data-ng-style="{'color': color_scheme.param}">jump</span>
+                <span data-ng-style="{'color': color_scheme.end}">|</span>
+                <span data-ng-style="{'color': color_scheme.command}">dozy</span>
+                <span data-ng-style="{'color': color_scheme.quote}"> "fowl" </span>
+                <span data-ng-style="{'color': color_scheme.redirection}">&gt; quack</span>
+                <span data-ng-style="{'color': color_scheme.end}">&</span>
+                <br>
+                <span data-ng-style="{'color': color_scheme.command}">echo</span>
+                <span data-ng-style="{'color': color_scheme.error}">'Errors are the portals to discovery</span>
+                <br>
+                <span data-ng-style="{ 'color': color_scheme.comment}"># This is a comment</span>
+                <br>
+                <span data-ng-style="{ 'color': color_scheme.command}">Th</span><span data-ng-style="{ 'color': color_scheme.autosuggestion}"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
             </div>
         </div>
     </div>
+    <!-- /ko -->
+</div>
diff --git a/share/tools/web_config/partials/new_colors.html b/share/tools/web_config/partials/new_colors.html
deleted file mode 100644
index f783e95f7..000000000
--- a/share/tools/web_config/partials/new_colors.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<div>
-    <!-- ko with: color_picker -->
-    <span style="padding-left: 25px">Click to customize each color:</span><br>
-    <div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}">
-        <div class="color_picker_background_cells">
-            <div ng-style="{'background-color': color}" ng-repeat="color in sampleTerminalBackgroundColors" ng-click="changeTerminalBackgroundColor(color)"></div>
-        </div>
-        <!-- This is the sample text -->
-        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">/bright/vixens</span>
-        <span data-ng-style="{ 'color': selectedColorScheme.param}" ng-click="selectColorSetting('param')">jump</span>
-        <span data-ng-style="{ 'color': selectedColorScheme.end}" ng-click="selectColorSetting('end')">|</span>
-        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">dozy</span>
-        <span data-ng-style="{ 'color': selectedColorScheme.quote}" ng-click="selectColorSetting('quote')"> "fowl" </span>
-        <span data-ng-style="{ 'color': selectedColorScheme.redirection}" ng-click="selectColorSetting('redirection')">&gt; quack</span>
-        <span data-ng-style="{ 'color': selectedColorScheme.end}" ng-click="selectColorSetting('end')">&</span>
-        <br>
-        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">echo</span>
-        <span data-ng-style="{ 'color': selectedColorScheme.error}" ng-click="selectColorSetting('error')">'Errors are the portals to discovery</span>
-        <br>
-        <span data-ng-style="{ 'color': selectedColorScheme.comment}" ng-click="selectColorSetting('comment')"># This is a comment</span>
-        <br>
-        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">Th</span><span data-ng-style="{ 'color': selectedColorScheme.autosuggestion }" ng-click="selectColorSetting('autosuggestion')"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
-
-        <span class="save_button" style="position: absolute; right: 5px; bottom: 5px;" data-ng-style="{'color': text_color_for_color(selectedColorScheme.preferred_background || 'white')}" ng-show="showSaveButton" ng-click="setTheme()">Apply</span>
-
-    </div>
-            
-    <table class="colorpicker_term256" style="margin: 0px 20px;">
-        <tbody>
-            <tr class="colorpicker_term256_row" data-ng-repeat="color_array in colorArraysArray"> 
-                <td class="colorpicker_term256_cell" data-ng-style="{'background-color': color, 'color': color}" ng-click="changeSelectedTextColor(color)" ng-repeat="color in color_array">
-                                <div class="colorpicker_term256_selection_indicator" ng-show="selectedColorScheme[selectedColorSetting] == color" ng-style="{'border-color': border_color_for_color(color)}"</div>
-                </td>
-            </tr>
-        </tbody>
-        <!-- /ko -->
-    </table>
-    
-    <div class="color_scheme_choices_list">
-        <div class="color_scheme_choice_container" data-ng-repeat="color_scheme in color_schemes" ng-click="changeSelectedColorScheme(color_scheme)">
-            <div class="color_scheme_choice_label">
-                <!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
-                <span>{{color_scheme.name }}</span><!--a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></a-->
-            </div>
-            <div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': color_scheme.preferred_background}">
-                <span data-ng-style="{'color': color_scheme.command}">/bright/vixens</span>
-                <span data-ng-style="{'color': color_scheme.param}">jump</span>
-                <span data-ng-style="{'color': color_scheme.end}">|</span>
-                <span data-ng-style="{'color': color_scheme.command}">dozy</span>
-                <span data-ng-style="{'color': color_scheme.quote}"> "fowl" </span>
-                <span data-ng-style="{'color': color_scheme.redirection}">&gt; quack</span>
-                <span data-ng-style="{'color': color_scheme.end}">&</span>
-                <br>
-                <span data-ng-style="{'color': color_scheme.command}">echo</span>
-                <span data-ng-style="{'color': color_scheme.error}">'Errors are the portals to discovery</span>
-                <br>
-                <span data-ng-style="{ 'color': color_scheme.comment}"># This is a comment</span>
-                <br>
-                <span data-ng-style="{ 'color': color_scheme.command}">Th</span><span data-ng-style="{ 'color': color_scheme.autosuggestion}"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
-            </div>
-        </div>
-    </div>
-    <!-- /ko -->
-</div>