diff --git a/js/logicConditionsCollection.js b/js/logicConditionsCollection.js
index f22db142..f968615f 100644
--- a/js/logicConditionsCollection.js
+++ b/js/logicConditionsCollection.js
@@ -22,6 +22,16 @@ let LogicConditionsCollection = function () {
         return data.length
     };
 
+    self.open = function () {
+
+        if (semver.lt(CONFIG.flightControllerVersion, "2.2.0")) {
+            return;
+        }
+
+        self.render();
+        $container.show();
+    };
+
     self.render = function () {
         let $table = $container.find(".logic__table")
         $table.find("tbody tr").remove();
@@ -31,6 +41,8 @@ let LogicConditionsCollection = function () {
                 self.get()[k].render(k, $table);
             }
         }
+
+        GUI.switchery();
     };
 
     self.onSave = function () {
@@ -49,6 +61,11 @@ let LogicConditionsCollection = function () {
     };
 
     self.init = function ($element) {
+
+        if (semver.lt(CONFIG.flightControllerVersion, "2.2.0")) {
+            return;
+        }
+
         $container = $element;
 
         $container.find('.logic__save').click(self.onSave);
diff --git a/src/css/logic.css b/src/css/logic.css
index 47af6123..24d8f04d 100644
--- a/src/css/logic.css
+++ b/src/css/logic.css
@@ -1,23 +1,23 @@
 .logic__background {
-    position: absolute;
+    position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: black;
     opacity: 0.75;
-    z-index: 2000;
+    z-index: 2001;
 }
 
 .logic__content {
-    position: absolute;
+    position: fixed;
     top: 2em;
     bottom: 2em;
     left: 4em;
     right: 4em;
     background-color: #efefef;
     border-radius: 2px;
-    z-index: 2001;
+    z-index: 2002;
     padding: 2em;
 }
 
diff --git a/tabs/mixer.html b/tabs/mixer.html
index 4326e82a..f0816762 100644
--- a/tabs/mixer.html
+++ b/tabs/mixer.html
@@ -70,8 +70,8 @@
         <!-- middle roew -->
         <div class="clear-both"></div>
         <!-- bottom row -->
-        <div>
-            <div class="leftWrapper">
+        <!-- <div> -->
+            <!-- <div class="leftWrapper"> -->
                 <div class="motor-mixer gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" data-i18n="motorMixer"></div>
@@ -97,8 +97,8 @@
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="rightWrapper">
+            <!-- </div> -->
+            <!-- <div class="rightWrapper"> -->
                 <div class="motor-mixer gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" data-i18n="servoMixer"></div>
@@ -118,15 +118,18 @@
             
                             </tbody>
                         </table>
+                        <div class="btn default_btn narrow pull-left mixer_btn_add">
+                            <a href="#" data-role="role-logic-conditions-open" data-i18n="tabLogicConditions"></a>
+                        </div>
                         <div class="btn default_btn narrow pull-right green mixer_btn_add">
                             <a href="#" data-role="role-servo-add" data-i18n="servoMixerAdd"></a>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
+            <!-- </div> -->
+        <!-- </div> -->
 
-        <div id="logic-wrapper">
+        <div id="logic-wrapper" style="display: none">
             <div class="logic__background"></div>
             <div class="logic__content">
                 <div class="tab_title" data-i18n="tabLogicConditions"></div>
diff --git a/tabs/mixer.js b/tabs/mixer.js
index 071ed9eb..e7188059 100644
--- a/tabs/mixer.js
+++ b/tabs/mixer.js
@@ -369,6 +369,10 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
             }
         });
 
+        $("[data-role='role-logic-conditions-open']").click(function () {
+            LOGIC_CONDITIONS.open();
+        });
+        
         $('#save-button').click(saveAndReboot);
 
         renderServoMixRules();
@@ -377,11 +381,10 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
         renderOutputTable();
         renderOutputMapping();
 
-        localize();
-
         LOGIC_CONDITIONS.init($('#logic-wrapper'));
-        LOGIC_CONDITIONS.render();
 
+        localize();
+        
         GUI.content_ready(callback);
     }