diff --git a/share/tools/web_config/fishconfig.css b/share/tools/web_config/fishconfig.css
index f24f442e5..bba26b41b 100644
--- a/share/tools/web_config/fishconfig.css
+++ b/share/tools/web_config/fishconfig.css
@@ -29,6 +29,8 @@ body {
     border-right: none;
     padding-bottom: 15px;
     padding-top: 15px;
+	padding-left: 8px;
+	padding-right: 8px;
     font-size: 17pt;
     text-align: center;
     width: 15%;
@@ -232,12 +234,22 @@ body {
 	border-bottom: #444 dotted 1px;
 }
 
- .abbreviation_actions {
-	width: 5em;
+.abbreviation_actions {
+	width: 8em;
 	text-align: right;
 	border-bottom: #444 dotted 1px;
 }
 
+.abbreviation_input {
+	background-color: #111;
+	border: solid 1px #777;
+	height: 1.5em;
+	color: white;
+	font: inherit;
+	padding: 3px;
+	margin: 0;
+}
+
 /* The CSS we apply when a table row is filtered */
 .data_table_row_filtered {
 	display: none;
diff --git a/share/tools/web_config/partials/abbreviations.html b/share/tools/web_config/partials/abbreviations.html
index e56281ef6..382ebeeef 100644
--- a/share/tools/web_config/partials/abbreviations.html
+++ b/share/tools/web_config/partials/abbreviations.html
@@ -5,17 +5,17 @@
 <table class="data_table">
     <tbody>
     <tr class="data_table_row" ng-repeat="abbreviation in abbreviations | filterAbbreviations:query" ng-click="editAbbreviation(abbreviation)">
-        <td ng-class="{ data_table_cell: true }" style="text-align: right; padding-right: 30px;">
+        <td ng-class="{ data_table_cell: true }"  style="text-align: right; padding-right: 30px;">
             <span ng-hide="abbreviation.editable">{{ abbreviation.word }}</span>
-            <span ng-show="abbreviation.editable"><input ng-model="abbreviation.word"></span>
+            <span ng-show="abbreviation.editable"><input ng-model="abbreviation.word" class="abbreviation_input" style="text-align: right; 	min-width: 10em;"></span>
         </td>
         <td ng-class="{ data_table_cell: true }" style="text-align: left; padding-right: 30px;">
             <span ng-hide="abbreviation.editable">{{ abbreviation.phrase }}</span>
-            <span ng-show="abbreviation.editable"><input ng-model="abbreviation.phrase"></span>
+            <span ng-show="abbreviation.editable"><input ng-model="abbreviation.phrase" class="abbreviation_input" style="text-align: left; 	min-width: 22em;"></span>
         </td>
         <td ng-class="{ data_table_cell: true }" class="abbreviation_actions">
-            <span ng-show="abbreviation.editable && abbreviation.word && abbreviation.phrase" ng-click="saveAbbreviation(abbreviation)">Save</span>
-            <a ng-show="abbreviation.word" ng-click="removeAbbreviation(abbreviation)"><img alt="Delete" src="delete.png"></a>
+            <span ng-show="abbreviation.editable && abbreviation.word && abbreviation.phrase" ng-click="saveAbbreviation(abbreviation)"><span class="save_button" style="margin: inherit;">Save</span></span>
+            <a ng-show="abbreviation.word" ng-click="removeAbbreviation(abbreviation)"><img alt="Delete" src="delete.png" style="vertical-align: text-bottom"></a>
         </td>
     </tr>
     </tbody>