diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index e29a95b88..f087316a3 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -216,74 +216,86 @@
                 const:name="reminderList"
                 const:id="reminderList"
                 string="itemReminderText" var:selection="reminder"/></dd>
-              <dt><var:string label:value="Appointments invitations:"/></dt>
-              <dd><input type="checkbox"
-                const:name="preventInvitations"
-                const:id="preventInvitations"
-                var:checked="preventInvitations" />
-                <var:string label:value="Prevent from being invited to appointments"/></dd>
             </dl>
-            <label id="whiteListLabel"><var:string label:value="White list for appointments invitations:"/></label>
-            <div id="appointmentsWhiteListWrapper" class="listWrapper">
-              <table class="tableview" id="tableViewWhiteList">
-                <thead>
-                  <tr class="tableview">
-                    <th const:class="tbtv_headercell" const:id="whiteListTableHeader">
-                      <var:string label:value="Contacts names"/></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <var:foreach list="appointmentsWhiteList" item="contact">
-                    <tr const:class="whiteListRow">
-                      <td const:class="whiteListCell">
-                        <var:string var:value="contact"/></td>
-                    </tr>
-                  </var:foreach>
-                </tbody>
-              </table>
-            </div>
-            <div id="whiteListToolbar">
-              <a const:id="appointmentsWhiteListAdd" href="#">
-                <img rsrc:src="add-icon.png" label:title="Add" id="WhiteListAdd"/></a>
-              <a const:id="appointmentsWhiteListDelete" href="#">
-                <img rsrc:src="remove-icon.png" label:title="Delete" id="WhiteListDelete" /></a>
-            </div>
-            <input type="hidden" const:id="whiteList"
-            const:name="whiteList" var:value="whiteList"/>
-            
-            <label id="calendarCategoriesLabel"><var:string label:value="Categories"/></label>
-            <div id="calendarCategoriesListWrapper" class="listWrapper">
-              <table class="categoriesList" cellspacing="0">
-                <thead>
-                  <tr class="tableview">
-                    <th const:class="tbtv_headercell" const:id="nameTableHeader">
-                      <var:string label:value="Name"/></th>
-                    <th const:class="tbtv_headercell" const:id="colorTableHeader">
-                      <var:string label:value="Color"/></th>
-                  </tr></thead>
-                <tbody>
-                  <var:foreach list="calendarCategoryList" item="category">
-                    <tr const:class="categoryListRow">
-                      <td const:class="categoryListCell">
-                        <var:string var:value="category"/></td>
-                      <td const:class="categoryListCell">
-                        <div const:class="colorBox" var:data-color="categoryColor"><entity name="nbsp"/></div></td>
-                    </tr>
-                  </var:foreach>
-                </tbody>
-              </table>
-            </div>
-            <div class="bottomToolbar">
-              <a const:id="calendarCategoryAdd" class="bottomButton" href="#">
-                <span><img rsrc:src="add-icon.png" label:title="Add" />
-                </span></a>
-              <a const:id="calendarCategoryDelete" class="bottomButton" href="#">
-                <span><img rsrc:src="remove-icon.png" label:title="Delete" />
-                </span></a>
-            </div>
-            <input type="hidden" const:id="calendarCategoriesValue"
-            const:name="calendarCategoriesValue" var:value="calendarCategoriesValue"/>
-          </div>
+            <div class="tabsContainer" id="calendarOptionsTabs">
+              <ul>
+                <li target="calendarCategoriesView">
+                  <span><var:string label:value="Categories"/></span></li>
+                <li target="calendarAppointmentsInvitationsView">
+                  <span><var:string label:value="Appointments invitations"/></span></li>
+              </ul>
+              <div class="tabs">
+                <div id="calendarCategoriesView" class="tab">
+                  <div id="calendarCategoriesListWrapper" class="listWrapper">
+                    <table class="categoriesList" cellspacing="0">
+                      <thead>
+                        <tr class="tableview">
+                          <th const:class="tbtv_headercell" const:id="nameTableHeader">
+                            <var:string label:value="Name"/></th>
+                          <th const:class="tbtv_headercell" const:id="colorTableHeader">
+                            <var:string label:value="Color"/></th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <var:foreach list="calendarCategoryList" item="category">
+                          <tr const:class="categoryListRow">
+                            <td const:class="categoryListCell">
+                              <var:string var:value="category"/></td>
+                            <td const:class="categoryListCell">
+                              <div const:class="colorBox" var:data-color="categoryColor"><entity name="nbsp"/></div></td>
+                          </tr>
+                        </var:foreach>
+                      </tbody>
+                    </table>
+                  </div><!-- #calendarCategoriesListWrapper -->
+                  <div class="bottomToolbar">
+                    <a const:id="calendarCategoryAdd" class="bottomButton" href="#">
+                      <span><img rsrc:src="add-icon.png" label:title="Add" /></span></a>
+                    <a const:id="calendarCategoryDelete" class="bottomButton" href="#">
+                      <span><img rsrc:src="remove-icon.png" label:title="Delete" /> </span></a>
+                  </div><!-- .bottomToolbar -->
+                  <input type="hidden" const:id="calendarCategoriesValue"
+                         const:name="calendarCategoriesValue" var:value="calendarCategoriesValue"/>
+                </div><!-- #calendarCategoriesView -->
+                
+                <div id="calendarAppointmentsInvitationsView" class="tab">
+                  <div><input type="checkbox"
+                              const:name="preventInvitations"
+                              const:id="preventInvitations"
+                              var:checked="preventInvitations" />
+                  <var:string label:value="Prevent from being invited to appointments"/></div>
+                  <hr />
+                  <var:string label:value="White list for appointments invitations:"/>
+                  <div id="appointmentsWhiteListWrapper" class="listWrapper">
+                    <table id="tableViewWhiteList" cellspacing="0">
+                      <thead>
+                        <tr class="tableview">
+                          <th const:class="tbtv_headercell" const:id="whiteListTableHeader">
+                            <var:string label:value="Contacts names"/></th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <var:foreach list="appointmentsWhiteList" item="contact">
+                          <tr const:class="whiteListRow">
+                            <td const:class="whiteListCell">
+                              <var:string var:value="contact"/></td>
+                          </tr>
+                        </var:foreach>
+                      </tbody>
+                    </table>
+                  </div><!-- #appointmentsWhiteListWrapper -->
+                  <div class="bottomToolbar">
+                    <a const:id="appointmentsWhiteListAdd" class="bottomButton" href="#">
+                      <span><img rsrc:src="add-icon.png" label:title="Add" /></span></a>
+                    <a const:id="appointmentsWhiteListDelete" class="bottomButton" href="#">
+                      <span><img rsrc:src="remove-icon.png" label:title="Delete" /></span></a>
+                  </div><!-- .bottomToolbar -->
+                  <input type="hidden" const:id="whiteList"
+                         const:name="whiteList" var:value="whiteList"/>
+                </div><!-- #calendarAppointmentsInvitationsView -->
+              </div><!-- .tabs -->
+            </div><!-- #calendarOptionsTabs -->
+          </div><!-- #calendarOptionsView -->
         </var:if>
         <div id="contactsOptionsView" class="tab">
           <label><var:string label:value="Categories"/></label>
diff --git a/UI/WebServerResources/UIxPreferences.css b/UI/WebServerResources/UIxPreferences.css
index 0e525dad5..d9ab197ee 100644
--- a/UI/WebServerResources/UIxPreferences.css
+++ b/UI/WebServerResources/UIxPreferences.css
@@ -13,17 +13,6 @@ DIV.bottomToolbar
   left: 2em;
   right: 2em;
   bottom: 8px; }
-  
-#whiteListToolbar
-{ position: absolute;
-  height: 20px;
-  top: 286px;
-  width: 275px;
-  left: 235px;
-  background-image: url("thead_bg.png");
-  border: 1px solid #9B9B9B;
-  background-color: #E6E7E6;
-}
 
 #WhiteListAdd, #WhiteListDelete
 {
@@ -70,40 +59,27 @@ DIV.listWrapper
 .listWrapper TABLE TD
 { height: 22px; }
 
-#whiteListLabel 
-{
-  position: absolute;
-  left: 12px;
-}
-
-#calendarCategoriesLabel
-{
-  position: absolute;
-  top: 305px;
-  left:0;
-}
-
 #calendarCategoriesListWrapper
-{ top: 320px;
+{ top:1em;
   bottom: 30px;
   right: 2em;
   left: 2em; }
 
 #appointmentsWhiteListWrapper
-{ top: 230px;
-  height: 54px;
-  left:235px;
-  width:275px;
+{ top:4.5em;
+  bottom: 30px;
+  right: 2em;
+  left: 2em; }
 
- }
- 
-#tableViewWhiteList
-{
-  width: 100%;
-}
- 
-#whiteListTableHeader
-{
+#tableViewWhiteList 
+{ width:100%; }
+
+DIV#calendarOptionsTabs 
+{ position: absolute;
+  top: 225px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
 }
 
 #contactsCategoriesListWrapper
diff --git a/UI/WebServerResources/UIxPreferences.js b/UI/WebServerResources/UIxPreferences.js
index f4a6d65ec..996e3a502 100644
--- a/UI/WebServerResources/UIxPreferences.js
+++ b/UI/WebServerResources/UIxPreferences.js
@@ -215,6 +215,13 @@ function initPreferences() {
     mailController.attachToTabsContainer(tabsContainer);
   }
   
+  // Inner tabs on the calendar module tab
+  tabsContainer = $('calendarOptionsTabs');
+  if (tabsContainer) {
+    var mailController = new SOGoTabsController();
+    mailController.attachToTabsContainer(tabsContainer);
+  }
+  
   _setupEvents();
   
   // Optional function called when initializing the preferences
diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css
index 64dd2dd35..1564af868 100644
--- a/UI/WebServerResources/generic.css
+++ b/UI/WebServerResources/generic.css
@@ -374,7 +374,7 @@ TH.tbtv_navcell
   text-align: left;
   font-weight: normal;
   background-color: #E7E7E7;
-  height: 20px; }
+  height: 20px;}
 
 TD.sortableTableHeader:active,
 TH.sortableTableHeader:active
@@ -410,7 +410,8 @@ TH.tbtv_headercell IMG.tbtv_sortcell
   text-align: right;
   border: 0px;
   width: 12px;
-  height: 12px; }
+  height: 12px; 
+  top:0;}
 
 .tableview
 { cursor: default;