diff --git a/UI/PreferencesUI/UIxPreferences.m b/UI/PreferencesUI/UIxPreferences.m
index 57a44b76c..5fdf859c2 100644
--- a/UI/PreferencesUI/UIxPreferences.m
+++ b/UI/PreferencesUI/UIxPreferences.m
@@ -190,11 +190,11 @@ static NSArray *reminderValues = nil;
 }
 
 //
-// Used by wox template
+// Used by wox template, as a var.
 //
-- (NSArray *) timeZonesList
+- (NSString *) timeZonesList
 {
-  return [[iCalTimeZone knownTimeZoneNames] sortedArrayUsingSelector: @selector (localizedCaseInsensitiveCompare:)];
+  return [[[iCalTimeZone knownTimeZoneNames] sortedArrayUsingSelector: @selector (localizedCaseInsensitiveCompare:)] jsonRepresentation];
 }
 
 // - (NSString *) userTimeZone
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 9050b931f..dc61a659b 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -16,6 +16,7 @@
 
   <script type="text/javascript">
     var mailCustomFromEnabled = <var:string value="mailCustomFromEnabled" const:escapeHTML="NO"/>;
+    var timeZonesList = <var:string value="timeZonesList" const:escapeHTML="NO"/>;
   </script>
 
   <script type="text/ng-template" id="preferences.html">
@@ -99,17 +100,17 @@
                   </var:foreach>
                 </md-select>
               </md-input-container>
-              
-              <md-input-container>
-                <label><var:string label:value="Current Time Zone :"/></label>
-                <md-select ng-model="app.preferences.defaults.SOGoTimeZone">
-                  <var:foreach list="timeZonesList" item="item">
-                    <md-option var:value="item">
-                      <var:string value="item"/>
-                    </md-option>
-                  </var:foreach>
-                </md-select>
-              </md-input-container>
+
+              <md-autocomplete
+                  md-search-text="app.timeZonesSearchText"
+                  md-selected-item="app.preferences.defaults.SOGoTimeZone"
+                  md-items="timezone in app.timeZonesListFilter(app.timeZonesSearchText)"
+                  md-item-text="timezone"
+                  md-min-length="3"
+                  md-no-cache="true"
+                  label:md-floating-label="Current Time Zone :">
+                <span md-highlight-text="app.timeZonesSearchText">{{timezone}}</span>
+              </md-autocomplete>
               
               <md-input-container>
                 <label><var:string label:value="Short Date Format :"/></label>
diff --git a/UI/WebServerResources/js/Preferences/PreferencesController.js b/UI/WebServerResources/js/Preferences/PreferencesController.js
index 4017f0e11..a947a642f 100644
--- a/UI/WebServerResources/js/Preferences/PreferencesController.js
+++ b/UI/WebServerResources/js/Preferences/PreferencesController.js
@@ -30,6 +30,9 @@
     vm.save = save;
     vm.canChangePassword = canChangePassword;
     vm.changePassword = changePassword;
+    vm.timeZonesList = window.timeZonesList;
+    vm.timeZonesListFilter = timeZonesListFilter;
+    vm.timeZonesSearchText = '';
     
     function addCalendarCategory() {
       vm.preferences.defaults.SOGoCalendarCategoriesColors["New category"] = "#aaa";
@@ -181,6 +184,12 @@
           });
       });
     }
+
+    function timeZonesListFilter(filter) {
+      return _.filter(vm.timeZonesList, function(value) {
+        return value.toUpperCase().indexOf(filter.toUpperCase()) >= 0;
+      });
+    }
   }
 
   angular