diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 2fa93f8a..65773fac 100755
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -822,7 +822,7 @@
         "message": "Please read receiver chapter of the documentation.  Configure serial port (if required), receiver mode (serial/ppm/pwm), provider (for serial receivers), bind receiver, set channel map, configure channel endpoints/range on TX so that all channels go from ~1000 to ~2000.  Set midpoint (default 1500), trim channels to 1500, configure stick deadband, verify behaviour when TX is off or out of range.<br /><span style=\"color: red\">IMPORTANT:</span> Before flying read failsafe chapter of documentation and configure failsafe."
     },
     "tuningHelp": {
-        "message": "<b>Tuning tips</b><br><i>Derivative from Error</i> provides more direct stick response and is mostly prefered for Racing.<br><i>Derivative from Measurement</i> provides smoother stick response what is more usefull for freestyling<br><br /><span style=\"color: red\">IMPORTANT:</span> It is important to verify motor temperatures during first flights. The higher the filter value gets the better it may fly, but you do to get more noise into the motors. <br>Default value of 100hz is optimal, but for noiser setups you can try lowering Dterm filter to 50hz and possibly also the gyro filter."
+        "message": "<b>Tuning tips</b><br /><span style=\"color: red\">IMPORTANT:</span> It is important to verify motor temperatures during first flights. The higher the filter value gets the better it may fly, but you do to get more noise into the motors. <br>Default value of 100hz is optimal, but for noiser setups you can try lowering Dterm filter to 50hz and possibly also the gyro filter."
     },
     "receiverThrottleMid": {
         "message": "Throttle MID"
@@ -1674,6 +1674,13 @@
     },
     "configurationMagHardware": {
         "message": "Magnetometer (if supported)"
-    }
+    },
+      "PIDTip": {
+        "message": "<strong><i>Derivative from Error</i></strong> provides more direct stick response and is mostly prefered for Racing.<br><strong><i>Derivative from Measurement</i></strong> provides smoother stick response what is more usefull for freestyling"
+    }  
+    
+
+    
+    
 
 }
diff --git a/tabs/pid_tuning.css b/tabs/pid_tuning.css
index 26473408..ab982015 100644
--- a/tabs/pid_tuning.css
+++ b/tabs/pid_tuning.css
@@ -29,6 +29,7 @@
 .tab-pid_tuning .cf td:last-child {
     border-bottom-right-radius: 3px;
     border-right: 0px;
+    padding-bottom: 0px;
 }
 
 .tab-pid_tuning .cf input {
@@ -52,7 +53,7 @@
 .tab-pid_tuning .throttle_curve {
     float: right;
     width: calc(100% - 2px); /* - ( "virtual" margin) */
-    margin: 0 0px 0px 0;
+    margin: 0 2px 0px 0;
     border: 1px solid silver;
     border-radius: 3px;
     background-image: url(../images/paper.jpg);
@@ -201,8 +202,7 @@
 }
 
 .tab-pid_tuning .pitch_roll_curve {
-    margin: 0 0px 0px 0;
-    width: 100%;
+    margin: 0 4px 0px 0;
     height: 100%;
     border: 1px solid silver;
     border-radius: 3px;
@@ -235,8 +235,7 @@
 }
 
 .tab-pid_tuning .yaw_curve {
-    margin: 0 0px 0px 0;
-    width: 100%;
+    margin: 0 4px 0px 0;
     height: 100%;
     border: 1px solid silver;
     border-radius: 3px;
@@ -318,8 +317,9 @@
 }
 
 .tab-pid_tuning .single-field {
-  display: inline-block;
-  margin-bottom: 10px;
+    display: inline-block;
+    margin-bottom: 10px;
+    margin-right: 5px;
 }
 
 .tab-pid_tuning .single-field .head {
@@ -415,6 +415,13 @@
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent);
 }
 
+.fancy.header th {
+    padding-bottom: 4px;
+    padding-top: 4px;
+    padding-left: 5px;
+}
+
+
 .pid_mode {
     width: calc(100% - 5px);
     height: 20px;
@@ -566,6 +573,41 @@
     margin-top:15px;
 }
 
+.tab-pid_tuning .bottomarea {
+    float: left;
+    width: calc(100% - 2px);
+    border-bottom: 1px solid silver;
+    border-left: 1px solid silver;
+    border-right: 1px solid silver;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+
+.tab-pid_tuning .controller {
+    width: 100px; 
+}
+
+.tab-pid_tuning .controller select {
+    border: 1px solid silver;
+    margin-left: 5px;
+    width: calc(100% - 10px);
+}
+
+
+.tab-pid_tuning .delta {
+    width: 150px; 
+}
+
+.tab-pid_tuning .delta select {
+    border: 1px solid silver;
+    margin-left: 5px;
+    width: calc(100% - 10px);
+}
+
+
 .tab-pid_tuning .bracket {
     position: absolute;
     background-image: url(/images/icons/icon_bracket.svg);
@@ -592,4 +634,9 @@
     background-image: url(../images/paper.jpg);
     background-size: 100%;
     background-position: center;
+    border: 1px solid silver;
+    margin-top: -1px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    height: 260px;
 }
diff --git a/tabs/pid_tuning.html b/tabs/pid_tuning.html
index acdae162..1c5c3ecf 100755
--- a/tabs/pid_tuning.html
+++ b/tabs/pid_tuning.html
@@ -4,24 +4,29 @@
         <div class="cf_doc_version_bt">
             <a id="button-documentation" href="https://github.com/betaflight/betaflight/releases" target="_blank"></a>
         </div>
-        <div class="note">
-        <div class="note_spacer">
-            <p i18n="tuningHelp"></p>
-        </div>
+        <div class="note" style="margin-bottom: 25px;">
+            <div class="note_spacer">
+                <p i18n="tuningHelp"></p>
+            </div>
         </div>
         <div class="cf_column twothird">
             <div class="controller single-field">
                 <div class="head" i18n="pidTuningControllerHead"></div>
-                <select name="controller">
-                    <!-- list generated here -->
-                </select>
+                <div class="bottomarea">
+                    <select name="controller">
+                        <!-- list generated here -->
+                    </select>
+                </div>
             </div>
             <div class="delta single-field">
+                <div class="helpicon cf_tip" i18n_title="PIDTip" style="margin-top: 5px;"></div>
                 <div class="head">Derivative Method</div>
-                <select name="delta">
-                    <option value="0">Error</option>
-                    <option value="1">Measurement</option>
-                </select>
+                <div class="bottomarea">
+                    <select name="delta">
+                        <option value="0">Error</option>
+                        <option value="1">Measurement</option>
+                    </select>
+                </div>
             </div>
             <div class="cf_column right">
                 <div class="default_btn show">
@@ -30,8 +35,6 @@
                 <div class="default_btn resetbt">
                     <a href="#" id="resetPIDs">Reset PID Controller</a>
                 </div>
-
-
             </div>
         </div>
         <form name="pid-tuning" id="pid-tuning">
@@ -44,9 +47,9 @@
                             <th class="proportional" i18n="pidTuningProportional"></th>
                             <th class="integral" i18n="pidTuningIntegral"></th>
                             <th class="derivative" i18n="pidTuningDerivative"></th>
-			    <th class="rc_rate" i18n="pidTuningRcRate"></th>
+                            <th class="rc_rate" i18n="pidTuningRcRate"></th>
                             <th class="rate" i18n="pidTuningRate"></th>
-			    <th class="rc_expo" i18n="pidTuningRcExpo"></th>
+                            <th class="rc_expo" i18n="pidTuningRcExpo"></th>
                         </tr>
                     </table>
                     <table id="pid_main" class="pid_tuning">
@@ -61,11 +64,16 @@
                             <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                             <td><input type="number" name="i" step="1" min="0" max="255" /></td>
                             <td><input type="number" name="d" step="1" min="0" max="255" /></td>
-			    <td rowspan="2" style="background-color:white;"><input type="number" name="rc_rate" step="0.01" min="0" max="2.5" /><div class="bracket"></div></td>
-			    <td class="roll_rate"><input type="number" name="roll_rate" step="0.01" min="0" max="1.00" /></td>
-			    <td class="roll_pitch_rate" rowspan="2"><input type="number" name="roll_pitch_rate" step="0.01" min="0" max="1.00" /></td>
-                            <td rowspan="2" style="background-color:white;"><input type="number" name="rc_expo" step="0.01" min="0" max="1" /><div class="bracket"></div></td>
-
+                            <td rowspan="2" style="background-color:white;">
+                                <input type="number" name="rc_rate" step="0.01" min="0" max="2.5" />
+                                <div class="bracket"></div>
+                            </td>
+                            <td class="roll_rate"><input type="number" name="roll_rate" step="0.01" min="0" max="1.00" /></td>
+                            <td class="roll_pitch_rate" rowspan="2"><input type="number" name="roll_pitch_rate" step="0.01" min="0" max="1.00" /></td>
+                            <td rowspan="2" style="background-color:white;">
+                                <input type="number" name="rc_expo" step="0.01" min="0" max="1" />
+                                <div class="bracket"></div>
+                            </td>
                         </tr>
                         <tr class="PITCH">
                             <!-- 1 -->
@@ -81,12 +89,12 @@
                             <td><input type="number" name="p" step="1" min="0" max="255" /></td>
                             <td><input type="number" name="i" step="1" min="0" max="255" /></td>
                             <td><input type="number" name="d" step="1" min="0" max="255" /></td>
-				<td rowspan="1"><input type="number" name="rc_rate_yaw" step="0.01" min="0" max="2.5" /></td>
-			    <td><input type="number" name="yaw_rate" step="0.01" min="0" max="2.55" /></td>
-			    <td><input type="number" name="rc_yaw_expo" step="0.01" min="0" max="1" /></td>
+                            <td rowspan="1"><input type="number" name="rc_rate_yaw" step="0.01" min="0" max="2.5" /></td>
+                            <td><input type="number" name="yaw_rate" step="0.01" min="0" max="2.55" /></td>
+                            <td><input type="number" name="rc_yaw_expo" step="0.01" min="0" max="1" /></td>
                         </tr>
                     </table>
-		</div>
+                </div>
                 <div class="gui_box grey topspacer">
                     <table class="pid_titlebar">
                         <tr>
@@ -161,7 +169,6 @@
                         </tr>
                     </table>
                 </div>
-
                 <div class="gui_box grey topspacer">
                     <table id="pid_accel" class="pid_tuning">
                         <tr class="fancy header">
@@ -182,7 +189,6 @@
                         </tr>
                     </table>
                 </div>
-
                 <div class="gui_box grey topspacer">
                     <table class="pid_filter" class="pid_tuning">
                         <tr class="fancy header">
@@ -199,91 +205,90 @@
                         </tr>
                     </table>
                 </div>
-
                 <div class="cf_column half topspacer">
-                        <div>
-                            <table class="rc_curve cf">
-                                <thead>
-                                    <tr>
-                                        <th i18n="rcCurve"></th>
-                                    </tr>
-                                </thead>
-                                </tbody>
-                                    <tr>
-                                        <td>
-                                            <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
-                                                <div class="pitch_roll_curve">
-                                                    <canvas height="120px" style="width: 100%; height: 100%"></canvas>
-                                                </div>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                            <div class="clear-both"></div>
-                        </div>
-                        <div class="topspacer">
-                            <table class="rc_yaw_curve cf">
-                                <thead>
-                                    <tr>
-                                        <th i18n="rcYawCurve"></th>
-                                    </tr>
-                                </thead>
-                                </tbody>
-                                    <tr>
-                                        <td>
-                                            <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
-                                                <div class="yaw_curve">
-                                                    <canvas height="120px" style="width: 100%; height: 100%"></canvas>
-                                                </div>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                            <div class="clear-both"></div>
-                        </div>
-                </div>
-
-                <div class="cf_column half topspacer">
-                    <table class="tpa cf">
-                        <thead>
+                    <div>
+                        <table class="rc_curve cf">
+                            <thead>
+                                <tr>
+                                    <th i18n="rcCurve"></th>
+                                </tr>
+                            </thead>
+                            </tbody>
                             <tr>
-                                <th i18n="pidTuningRatesPreview"></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td class="rates_preview_cell">
-                                    <div class="rates_preview">
-                                        <canvas id="canvas"></canvas>
+                                <td>
+                                    <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
+                                        <div class="pitch_roll_curve">
+                                            <canvas height="120px" style="width: 100%; height: 100%"></canvas>
+                                        </div>
                                     </div>
                                 </td>
                             </tr>
-                        </tbody>
-                    </table>
+                            </tbody>
+                        </table>
+                        <div class="clear-both"></div>
+                    </div>
+                    <div class="topspacer">
+                        <table class="rc_yaw_curve cf">
+                            <thead>
+                                <tr>
+                                    <th i18n="rcYawCurve"></th>
+                                </tr>
+                            </thead>
+                            </tbody>
+                            <tr>
+                                <td>
+                                    <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
+                                        <div class="yaw_curve">
+                                            <canvas height="120px" style="width: 100%; height: 100%"></canvas>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                        <div class="clear-both"></div>
+                    </div>
+                </div>
+                <div class="cf_column half topspacer">
+                    <div class="spacer_left">
+                        <table class="tpa cf">
+                            <thead>
+                                <tr>
+                                    <th i18n="pidTuningRatesPreview" style="font-weight: bold;"></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td class="rates_preview_cell">
+                                        <div class="rates_preview">
+                                            <canvas id="canvas"></canvas>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
-
             <div class="cf_column third_right">
                 <div class="spacer_left throttle">
                     <table class="cf">
                         <thead>
                             <tr>
                                 <th colspan=2 i18n="throttle"></th>
-			    </tr>
-		        </thead>
-			</tbody>
-			    <tr>
-			        <td colspan=2>
-                                    <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
-                                        <div class="throttle_curve">
-                                            <canvas height="120px" style="width: 100%; height: 100%"></canvas>
-                                        </div>
+                            </tr>
+                        </thead>
+                        </tbody>
+                        <tr>
+                            <td colspan=2>
+                                <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
+                                    <div class="throttle_curve">
+                                        <canvas height="120px" style="width: 100%; height: 100%"></canvas>
                                     </div>
-			        </td>
-		            </tr>
-			</tbody>
+                                </div>
+                            </td>
+                        </tr>
+                        </tbody>
                     </table>
                 </div>
                 <div class="spacer_left topspacer">
@@ -310,7 +315,7 @@
                                 <th class="tpa-breakpoint" i18n="pidTuningTPABreakPoint"></th>
                             </tr>
                         </thead>
-			<tbody>
+                        <tbody>
                             <tr>
                                 <td class="leftzero"><input type="number" name="tpa" step="0.01" min="0"
                                     max="1.00" /></td>
@@ -331,4 +336,4 @@
             <a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file