diff --git a/frontend/rctool/templates/rctool/base.html b/frontend/rctool/templates/rctool/base.html
index cc5be28a..185d17b8 100644
--- a/frontend/rctool/templates/rctool/base.html
+++ b/frontend/rctool/templates/rctool/base.html
@@ -39,18 +39,6 @@
       {% block content %}
       {% endblock %}
 
-
-
-
-
-
-
-
-
-
-
-
-
       {% block footer %}
       {% endblock %}
 
diff --git a/frontend/rctool/templates/rctool/components/navbar.html b/frontend/rctool/templates/rctool/components/navbar.html
index 08b65dec..219d945c 100644
--- a/frontend/rctool/templates/rctool/components/navbar.html
+++ b/frontend/rctool/templates/rctool/components/navbar.html
@@ -3,7 +3,7 @@
 <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #003466">
     <div class="header-title-div"></div>
       <a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/gov_logo.JPG' %}" class="logo"></a>
-      <p class="header-title-text">HydRA - Rating Curve Development Tool</p>
+      <p class="header-title-text">HydRA - Rating Curve Tool</p>
     </div>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -18,5 +18,5 @@
         </li>
       </ul>
     </div>
-  </nav>
-  <div class='nav-bottom'></div>
\ No newline at end of file
+</nav>
+<div class='nav-bottom'></div>
\ No newline at end of file
diff --git a/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html b/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html
index 7126c389..e2a7ba9c 100644
--- a/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html
+++ b/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html
@@ -1,10 +1,10 @@
 
 <form method="POST" action="." id="rcform">
     {% csrf_token %}
-    <p style="color: #003466; margin-bottom: 3px; font-size:13.5px; font-weight:500;">segment 1</p>
+    <small style="color: #003466; margin-bottom: 3px; font-size:11.5px; font-weight:500;">segment 1</small>
     <div style="display: flex; width: 100%; margin: 10px 0px 10px 0px;">
         <div style="flex: 1; margin-right: 10px;">
-            <p class="text-medium">end points:</p>
+            <small class="text-medium">end points:</small>
         </div>
         <div style="flex: 3;">
             <div style="display:flex">
@@ -17,7 +17,7 @@
     </div>
     <div style="display: flex; width: 100%; margin: 10px 0px 10px 0px;" id="offset1-panel">
         <div style="flex: 1; margin-right: 10px;">
-            <p class="text-medium">offset:</p>
+            <small class="text-medium">offset:</small>
         </div>
         <div style="flex: 3;">
             <input type="number" step="any" max="{{ max_offset }}" class="form-control form-control-sm" name="offset1" id="offset1" value="{{ offsets.0 }}" onchange="setOffset(0, this.value, '{{ max_offset }}')" style="font-size:12px;" onkeydown="return event.key != 'Enter';" data-toggle="tooltip" data-placement="top" title="segment 1 offset" required>
@@ -25,7 +25,7 @@
     </div>
     <div style="display: flex; width: 100%; margin: 20px 0px 5px 0px;">
         <div style="flex: 1; margin-right: 10px;">
-            <p class="text-medium">equation:</p>
+            <small class="text-medium">equation:</small>
         </div>
         <div style="flex: 3;">
             <div style="display:flex; font-size:12.5px; color:#696969;">
@@ -68,17 +68,17 @@
     {% if n_seg > 1 %}
         <div id="enter-breakpoint-field" style="display:flex; width: 100%; margin-top: 0px">
             <div style="flex: 1; margin-right: 10px;">
-                <p class="text-medium">breakpoint:</p>
+                <small class="text-medium">breakpoint:</small>
             </div>
             <div style="flex: 3;">
                 <input type="number" step="any" class="form-control form-control-sm" name="breakpoint1" id="breakpoint1" value="{{ breakpoint1 }}" max="{{ breakpoint_max }}" min="{{ breakpoint_min }}" onchange="setBreakpoint1(this.value)" onkeydown="return event.key != 'Enter';" style="font-size:12px;" data-toggle="tooltip" data-placement="top" title="breakpoint">
             </div>
         </div>
         <br>
-        <p style="color: #003466; margin-bottom: 3px; font-size: 13.5px; font-weight:500;">segment 2</p>
+        <p style="color: #003466; margin-bottom: 3px; font-size: 11.5px; font-weight:500;">segment 2</p>
         <div style="display: flex; width: 100%; margin: 10px 0px 10px 0px;">
             <div style="flex: 1; margin-right: 10px;">
-                <p class="text-medium">end points:</p>
+                <small class="text-medium">end points:</small>
             </div>
             <div style="flex: 3;">
                 <div style="display:flex">
@@ -91,7 +91,7 @@
         </div>
         <div style="display: flex; width: 100%; margin: 10px 0px 10px 0px;">
             <div style="flex: 1; margin-right: 10px;">
-                <p class="text-medium">offset:</p>
+                <small class="text-medium">offset:</small>
             </div>
             <div style="flex: 3;">
                 <input type="number" step="any" max="{{ max_offset }}" class="form-control form-control-sm" name="offset2" id="offset2" value="{{ offsets.1 }}" onchange="setOffset(1, this.value, '{{ max_offset }}')" onkeydown="return event.key != 'Enter';" href="#" style="font-size:12px;" data-toggle="tooltip" data-placement="top" title="segment 2 offset" required>
@@ -99,7 +99,7 @@
         </div>
         <div style="display: flex; width: 100%; margin: 20px 0px 0px 0px;">
             <div style="flex: 1; margin-right: 10px;">
-                <p class="text-medium">equation:</p>
+                <small class="text-medium">equation:</small>
             </div>
             <div style = " flex: 3;">
                 <div style="display:flex; font-size:12.5px; color:#696969;">
@@ -121,16 +121,16 @@
         {% if n_seg > 1 %}
             <div id='autofit-breakpoint-checkbox' style="display:flex; margin:0px; padding:0px;">
                 <input type="checkbox" id="toggle_breakpoint" name="toggle_breakpoint" onchange="" style="margin:0px; padding:0px;">
-                <label><p class="text-small margin-left:3px; padding-left:3px"> autofit new breakpoint</p></label>
+                <label><small class="text-small margin-left:3px; padding-left:3px"> autofit new breakpoint</small></label>
             </div>
         {% endif %}
         <div style="display: flex; margin:0px; padding:0px;">
             <input type="checkbox" id="toggle_weighted_fit" name="toggle_weighted_fit" onchange="" style="margin:0px; padding:0px;">
-            <label><p class="text-small margin-left:3px; padding-left:3px;"> autofit with weighted uncertainty</p></label>
+            <label><small class="text-small margin-left:3px; padding-left:3px;"> autofit with weighted uncertainty</small></label>
         </div>
     </div>
     <div class="d-grid gap-2">
-        <button class="btn btn-secondary btn-block" type="submit" href="{% url 'rctool_develop_autofit' %}" onkeydown="return event.key != 'Enter';">autofit new rating curve</button>
+        <button class="btn btn-secondary btn-block" type="submit" href="{% url 'rctool_develop_autofit' %}" onkeydown="return event.key != 'Enter';"><small>autofit new rating curve</small></button>
     </div>
 
 </form>
diff --git a/frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html b/frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html
new file mode 100644
index 00000000..fcb8b7e4
--- /dev/null
+++ b/frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html
@@ -0,0 +1,58 @@
+{% load static %}
+{% load custom_tags %}
+
+<!-- <div id="field" class="tabcontent">
+    <div class="card-body px-4 py-2" style="display: flex;">
+        <table class="table" id="fieldtable">
+            <tr class="table-header">
+              {% for header in table_dict.headings %}
+                {% if forloop.counter0 != 5 %}
+                    <th class="table-cell">{{ header }}</th>
+                {% endif %}
+              {% endfor %}
+              <th class="table-cell">use point</th>
+            </tr>
+            {% for row in table_dict.data %}
+            <tr class="table-row">
+              {% for cell in row %}
+                {% if forloop.counter0 != 5 %}
+                    <td class="table-cell">{{ cell }} </td>
+                {% endif %}
+              {% endfor %}
+              <td><input type="checkbox" id="toggle_data_point" name="toggle_data_point" checked="checked" onchange="togglePoint('{{ forloop.counter0 }}', this.checked)"></td>
+            </tr>
+            {% endfor %}
+        </table>
+    </div>
+</div> -->
+
+<div id="field" class="tabcontent">
+  <div class="card-body px-4 py-2" style="display: flex;">
+      <div class="table-container">
+          <table class="table" id="fieldtable">
+              <thead>
+                  <tr class="table-header">
+                      {% for header in table_dict.headings %}
+                          {% if forloop.counter0 != 5 %}
+                              <th class="table-cell">{{ header }}</th>
+                          {% endif %}
+                      {% endfor %}
+                      <th class="table-cell">use point</th>
+                  </tr>
+              </thead>
+              <tbody>
+                  {% for row in table_dict.data %}
+                      <tr class="table-row">
+                          {% for cell in row %}
+                              {% if forloop.counter0 != 5 %}
+                                  <td class="table-cell">{{ cell }} </td>
+                              {% endif %}
+                          {% endfor %}
+                          <td><input type="checkbox" id="toggle_data_point" name="toggle_data_point" checked="checked" onchange="togglePoint('{{ forloop.counter0 }}', this.checked)"></td>
+                      </tr>
+                  {% endfor %}
+              </tbody>
+          </table>
+      </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/frontend/rctool/templates/rctool/rctool/develop/develop_table.html b/frontend/rctool/templates/rctool/rctool/develop/develop_table_rating.html
similarity index 81%
rename from frontend/rctool/templates/rctool/rctool/develop/develop_table.html
rename to frontend/rctool/templates/rctool/rctool/develop/develop_table_rating.html
index 052befcb..c282dc55 100644
--- a/frontend/rctool/templates/rctool/rctool/develop/develop_table.html
+++ b/frontend/rctool/templates/rctool/rctool/develop/develop_table_rating.html
@@ -1,41 +1,8 @@
 {% load static %}
 {% load custom_tags %}
-
-
-
-<div class="tab">
-    <a class="tablinks" onclick="openTable(event, 'field')" id="defaultOpen">field</a>
-    <a class="tablinks" onclick="openTable(event, 'rating')">rating</a>
-    <a class="tablinks" onclick="openTable(event, 'compare')">compare</a>
-</div>
-  
-<div id="field" class="tabcontent">
-    <div class="card-body py-4" style="display: flex;">
-        <table class="table" id="fieldtable">
-            <tr class="table-header">
-              {% for header in table_dict.headings %}
-                {% if forloop.counter0 != 5 %}
-                    <th class="table-cell">{{ header }}</th>
-                {% endif %}
-              {% endfor %}
-              <th class="table-cell">use point</th>
-            </tr>
-            {% for row in table_dict.data %}
-            <tr class="table-row">
-              {% for cell in row %}
-                {% if forloop.counter0 != 5 %}
-                    <td class="table-cell">{{ cell }} </td>
-                {% endif %}
-              {% endfor %}
-              <td><input type="checkbox" id="toggle_data_point" name="toggle_data_point" checked="checked" onchange="togglePoint('{{ forloop.counter0 }}', this.checked)"></td>
-            </tr>
-            {% endfor %}
-        </table>
-    </div>
-</div>
   
-<div id="rating" class="tabcontent">
-    <div class="card-body py-4" style="display: flex;">
+<!-- <div id="rating" class="tabcontent">
+    <div class="card-body px-4 py-2" style="display: flex;">
         {% if rc.parameters %}
             <table class="table">
                 <tr class="table-header">
@@ -64,10 +31,10 @@
         <p>Please set offset and select generate curve</p>
         {% endif %}
     </div>
-</div>
+</div> -->
   
 <div id="compare" class="tabcontent">
-    <div class="card-body py-4">
+    <div class="card-body px-4 py-2">
         <table class="table">
             <tr class="table-header">
                 <th class="table-cell">segment</th>
@@ -76,6 +43,7 @@
                 <th class="table-cell">offset</th>
                 <th class="table-cell">start point</th>
                 <th class="table-cell">end point</th>
+                <th class="table-cell">RMSE</th>
                 <th class="table-cell"><p style="color:#9ec1a3">add curve</p></th>
                 <!-- <th class="table-cell">edit rating</th> -->
             </tr>
@@ -87,6 +55,7 @@
                     <td class="table-cell"><p id="table2-segment1-offset">{{rc.parameters.0.offset}}</p></td>
                     <td class="table-cell"><p id="table2-endpoint-Seg1H0">{{rc.parameters.0.seg_bounds.0.0}}</p></td>
                     <td class="table-cell"><p id="table2-endpoint-Seg1H1">{{rc.parameters.0.seg_bounds.1.0}}</p></td>
+                    <td class="table-cell"><p id="table1-segment1-rmse">{{rc.parameters.0.rmse}}</p></td>
                     <td class="table-cell"><p></p></td>
                 </tr>
             {% endif %}
@@ -98,6 +67,7 @@
                     <td class="table-cell"><p id="table2-segment2-offset"> {{rc.parameters.1.offset}}</p></td>
                     <td class="table-cell"><p id="table2-endpoint-Seg2H0">{{rc.parameters.1.seg_bounds.0.0}}</p></td>
                     <td class="table-cell"><p id="table2-endpoint-Seg2H1">{{rc.parameters.1.seg_bounds.1.0}}</p></td>
+                    <td class="table-cell"><p id="table1-segment2-rmse">{{rc.parameters.1.rmse}}</p></td>
                     <td class="table-cell"><p></p></td>
                 </tr>
             {% endif %}
@@ -132,6 +102,11 @@
                         <input type="number" step="0.01" class="form-control form-control-sm" name="compareEndBounds" id="compareEndBounds" style="font-size: 12px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
                     </div>
                 </td>
+                <td class="table-cell">
+                    <div style="width: 40px;">
+                        <p></p>
+                    </div>
+                </td>
                 <td class="table-cell">
                     <button class="btn btn-success btn-sm" type="submit" href="#" onclick="addCompareCurve()" style="background-color: #9ec1a3 !important; border-color: #FFFFFF; width: 40px;" onkeydown="return event.key != 'Enter';"> + </button>
                 </td>
@@ -139,11 +114,3 @@
         </table>
     </div>
 </div>
-
-
-<!--
-<script>
-    // Get the element with id="defaultOpen" and click on it
-    document.getElementById("defaultOpen").click();
-</script>
--->
diff --git a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html
index 68af80b1..6d207ddd 100644
--- a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html
+++ b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html
@@ -7,9 +7,8 @@
 
 
 {% block content %}
-</br>
 
-<div class="container">
+<div class="container-xl mt-1 mr-5 ml-5">
     <div class="tab-bar-container" style="display:flex;">
         <ul class="tab-bar-list" style="flex:1">
             <li class="tab-bar-item"><a href="{% url 'rctool_import' 0 %}">import</a></li>
@@ -20,20 +19,20 @@
         {% if filename %}
             <div class="tab-bar-filename-title">
                 <div style="display:flex; margin:0; padding:0;">
-                    <p style="color:grey; font-size:12px; font-weight:700; margin-right:5px; margin-bottom:0">filename: </p>
-                    <p style="color:grey; font-size:12px; margin-bottom:0">{{ filename|safe }}</p>
+                    <p style="color:grey; font-size:11.5px; font-weight:700; margin-right:5px; margin-bottom:0">filename: </p>
+                    <p style="color:grey; font-size:11.5px; margin-bottom:0">{{ filename|safe }}</p>
                 </div>
             </div>
         {% endif %}
     </div>
 
-    <div class="container" style="background-color: #FFFFFF;">
+    <div style="background-color: #FFFFFF; padding-left:10px; padding-right:10px;">
         
         <div id="warning-message-div" style="display:none;">
-            <div class="row" style="padding: 10px 10px 0px 10px;">
-                <div class="col-12" style="padding: 10px 10px 0px 10px">
+            <div class="row" style="padding: 5px 10px 0px 10px;">
+                <div class="col-12" style="padding: 5px 10px 0px 10px">
                     <div class="card" style="background-color:#ae2029; padding: 0px;" id="side-panel-card">
-                        <div class="card-body" style="padding:10px 20px 0px 20px;">
+                        <div class="card-body p-2" style="padding:10px 20px 0px 20px;">
                             <strong id='error-title' style="color:#FFFFFF">
                                 {% if sidepanel_message %}
                                     {{sidepanel_message.error_title|safe}}
@@ -50,21 +49,20 @@
             </div>
         </div>
         
-        <div class="row" style="padding: 10px 10px 0px 10px;">
-            <div class="col" style="padding: 10px;">
+        <div class="row" style="padding: 5px 10px 0px 10px;">
+            <div class="col-3" style="padding: 5px;">
                 <div class="card" id="input-settings-card">
-                    <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:13.5px; padding-top:7px;">Input Settings</h6>
-                    <div class="card-body" style="display: flex; padding-bottom:15px;">
+                    <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Input Settings</h6>
+                    <div class="card-body px-4 py-2" style="display: flex; padding-bottom:15px;">
                         {% include 'rctool/rctool/develop/develop_input_settings.html' %}
                     </div>
                 </div>
             </div>
-
             {% if messages %}
-                <div class="col-8" style="padding: 10px;">
+                <div class="col-6" style="padding: 5px;">
                     <div class="card">
-                        <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:13.5px; padding-top:7px;">Error</h6>
-                        <div class="card-body py-4" style="display: flex;">
+                        <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Error</h6>
+                        <div class="card-body p-2" style="display: flex;">
                             {% for message in messages %}
                             <div>
                                 <strong class="error-text">Error autofitting rating curve.</strong><br>
@@ -74,13 +72,11 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
                         </div>
                     </div>
                 </div>
-
             {% else %}
-                <div class="col-8" style="padding: 10px;">
+                <div class="col-6" style="padding: 5px;">
                     <div class="card" id="rcchart-card">
-                        <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:13.5px; padding-top:7px;">Rating Curve</h6>
-
-                        <div class="card-body" style="margin:15px 0px 0px 0px; padding-bottom:0px;">
+                        <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Rating Curve</h6>
+                        <div class="card-body px-1 pt-1 pb-0">
                             <div class="rc-chart-container">
                                 <canvas id="rcChart">
                                 </canvas>
@@ -92,18 +88,12 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
                         </div>
                     </div>
                 </div>
-            
             {% endif %}
-
-        </div>
-    
-        <div class="row" style="padding: 0px 10px 10px 10px;">
-
-            <div class="col-4" style="padding: 10px;">
+            <div class="col-3" style="padding: 5px;">
                 {% if not messages %}
                     <div class="card" id="regression-residuals-card">
-                        <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:13.5px; padding-top:7px;">Rating Error</h6>
-                        <div class="card-body py-4">
+                        <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Rating Error</h6>
+                        <div class="card-body p-1">
                             <div class="rc-chart-container">
                                 {% if rc.data %}
                                     <canvas id="residualChart">
@@ -114,14 +104,21 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
                     </div>
                 {% endif %}
             </div>
-
-            <div class="col-8" style="padding: 10px;">
+        </div>
+    
+        <div class="row" style="padding: 0px 10px 10px 10px;">
+            <div class="col-6" style="padding: 5px;">
                 <div class="card" id="summary-card">
-                    <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:13.5px; padding-top:7px;">Summary</h6>
-                    {% include 'rctool/rctool/develop/develop_table.html' %}
+                    <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Measurements Summary</h6>
+                    {% include 'rctool/rctool/develop/develop_table_measurents.html' %}
+                </div>
+            </div>
+            <div class="col-6" style="padding: 5px;">
+                <div class="card" id="summary-card">
+                    <h6 class="card-header text-center" style="background-color: #758fa8; color: #FFFFFF; height:30px; font-size:12.5px; padding-top:7px;">Rating Summary</h6>
+                    {% include 'rctool/rctool/develop/develop_table_rating.html' %}
                 </div>
             </div>
-
         </div>
     </div>
 </div>
diff --git a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html
index 0f323832..e4ce21a0 100644
--- a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html
+++ b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html
@@ -754,7 +754,9 @@
 
     // STYLING PARAMETERS
     var pallet = ['#9ec1a3', '#fe5f55', '#003466', '#FFD97D', '#9bc1bc', '#002A5C', '#bdd5ea', '#9ec1a3', '#ffa400', '#89d2a3', '#c08497', '#4281a4', '#aa7bc3', '#8daa91', '#60D394', '#EE6055', '#FFD97D', '#AAF683', '#FF9B85'];
+    Chart.defaults.font.size = 11.5;
 
+    // var pallet = ['#009E73', '#D55E00', '#003466', '#FFD97D', '#9bc1bc', '#002A5C', '#bdd5ea', '#9ec1a3', '#ffa400', '#89d2a3', '#c08497', '#4281a4', '#aa7bc3', '#8daa91', '#60D394', '#EE6055', '#FFD97D', '#AAF683', '#FF9B85'];
 
     // RATING CURVE CHART
     var rcChart = new Chart(document.getElementById('rcChart'), {
@@ -1061,33 +1063,7 @@
 
 
     /*-----------------------------------------------------------------------------------------------------------------------------------------------
-    C.3) SUMMARY TABLE
-    ------------------------------------------------------------------------------------------------------------------------------------------------*/
-
-    function openTable(evt, tableName) {
-        // Declare all variables
-        var i, tabcontent, tablinks;
-        // Get all elements with class="tabcontent" and hide them
-        tabcontent = document.getElementsByClassName("tabcontent");
-        for (i = 0; i < tabcontent.length; i++) {
-            tabcontent[i].style.display = "none";
-        }
-        // Get all elements with class="tablinks" and remove the class "active"
-        tablinks = document.getElementsByClassName("tablinks");
-        for (i = 0; i < tablinks.length; i++) {
-            tablinks[i].className = tablinks[i].className.replace(" active", "");
-        }
-        // Show the current tab, and add an "active" class to the button that opened the tab
-        document.getElementById(tableName).style.display = "block";
-        evt.currentTarget.className += " active";
-        };
-
-    // Get the element with id="defaultOpen" and click on it
-    document.getElementById("defaultOpen").click();
-
-
-    /*-----------------------------------------------------------------------------------------------------------------------------------------------
-    C.4) FORMS
+    C.3) FORMS
     ------------------------------------------------------------------------------------------------------------------------------------------------*/
 
     // Pass data to export page
@@ -1098,7 +1074,7 @@
     };
 
     /*-----------------------------------------------------------------------------------------------------------------------------------------------
-    C.5) UPDATE WARNING MESSAGE
+    C.4) UPDATE WARNING MESSAGE
     ------------------------------------------------------------------------------------------------------------------------------------------------*/
 
     function checkExponent() {
diff --git a/frontend/static/css/main.css b/frontend/static/css/main.css
index d1107b2b..d6163881 100644
--- a/frontend/static/css/main.css
+++ b/frontend/static/css/main.css
@@ -1,10 +1,14 @@
+.main-container {
+    width: 90%;
+}
+
 .text-small {
-    font-size: 11.5px;
+    font-size: 10.5px;
     color: #A9A9A9;
 }
 
 .text-medium {
-    font-size: 12.5px;
+    font-size: 11.5px;
     color: #A9A9A9;
 }
 
@@ -12,7 +16,7 @@
     background: none;
     border: none;
     padding: 0;
-    font-size: 11.5px;
+    font-size: 10.5px;
     color: #ad2e24;
     cursor: pointer;
 }
@@ -21,13 +25,13 @@
     background: none;
     border: none;
     padding: 0;
-    font-size: 11.5px;
+    font-size: 10.5px;
     color: #9ec1a3;
     cursor: pointer;
 }
 
 .autofit-settings-text {
-    font-size: 11.5px;
+    font-size: 10.5px;
     color: #A9A9A9;
     text-decoration: none;
 }
diff --git a/frontend/static/css/rctool_develop.css b/frontend/static/css/rctool_develop.css
index ff442257..8437b3ac 100644
--- a/frontend/static/css/rctool_develop.css
+++ b/frontend/static/css/rctool_develop.css
@@ -32,8 +32,7 @@
 }
   
 .tabcontent {
-    display: none;
-    padding: 3px 6px;
+    padding: 0px 6px;
     border: 1px solid #ccc;
     border-top: none;
   }
diff --git a/frontend/static/css/rctool_intro.css b/frontend/static/css/rctool_intro.css
index 032949a5..169db199 100644
--- a/frontend/static/css/rctool_intro.css
+++ b/frontend/static/css/rctool_intro.css
@@ -3,17 +3,22 @@
 
     .card-body-left {
         flex: 1;
-        padding: 20px;
+        padding: 5px;
     }
 
 
     .card-body-right {
         flex: 2;
-        padding: 20px;
+        padding: 5px;
         border-left: 1.5px solid #F0F0F0;
     }
 }
 
+
+#fieldtable {
+    width: 100%;
+}
+
 .table {
     border-spacing: 0;
     font-style: sans-serif;
@@ -24,14 +29,23 @@ tr:nth-child(even) {
     background-color: #F8F8F8;
 }
 
+.table-container {
+    max-height: 300px;
+    overflow-y: auto;
+    width: 100%;
+}
+
 .table-header {
     text-align: left;
-    font-size: 13px;
+    font-size: 11.5px;
+    position: sticky;
+    top: 0;
+    background-color: #F8F8F8;
 }
 
 .table-cell {
     padding: 0px;
-    font-size: 12px;
+    font-size: 10.5px;
 }
 
 .error-text {
diff --git a/frontend/static/css/rctool_main.css b/frontend/static/css/rctool_main.css
index a83b78cf..b8897ff2 100644
--- a/frontend/static/css/rctool_main.css
+++ b/frontend/static/css/rctool_main.css
@@ -18,9 +18,9 @@ body {
 .tab-bar-item a {
     display: block;
     text-align: center;
-    padding: 9px 13.5px;
+    padding: 6px 13.5px;
     color: #003466;
-    font-size: 12.5px;
+    font-size: 11.5px;
     text-decoration: none;
   }
   
@@ -36,9 +36,9 @@ body {
   .tab-bar-item-current a {
     display: block;
     text-align: center;
-    padding: 9px 13.5px;
+    padding: 6px 13.5px;
     color: grey;
-    font-size: 12.5px;
+    font-size: 11.5px;
     text-decoration: none;
     border-radius: 8px 8px 0px 0px;
     border-top: 1.5px solid #F0F0F0;
@@ -54,7 +54,7 @@ body {
   overflow: hidden;
   display: block;
   text-align: center;
-  padding: 9px 13.5px 0px;
+  padding: 6px 13.5px 0px;
   text-decoration: none;
   border-radius: 8px 8px 0px 0px;
   border-top: 1.5px solid #F0F0F0;