Update UI files

V1:
    - Widen Scroll bars in IC and HVAC Page
    - Update UI to use carbon icon resources
    - Add new Dashboard page
    - Add bottom navigation bar to main window UI
    - Remove deprecated navigation page files

Bug-AGL: SPEC-4905

Signed-off-by: suchinton2001 <suchinton.2001@gmail.com>
Change-Id: Ia307d326c4bc9af9969e1d6b2a2cb4948a7ee286

6 files changed, 765 insertions, 742 deletions

diff --git a/ui/Dashboard.ui b/ui/Dashboard.ui
new file mode 100644
index 0000000..51f913a
--- /dev/null
+++ b/ui/Dashboard.ui
@@ -0,0 +1,216 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>Dashboard</class>
+ <widget class="QWidget" name="Dashboard">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>711</width>
+    <height>459</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>Form</string>
+  </property>
+  <property name="styleSheet">
+   <string notr="true">*{
+	border: none;
+	background-color: transparent;
+	background: none; 
+	padding: 0;
+	margin: 0;
+	color: #fff;
+}
+
+#scrollAreaWidgetContents{
+	background-color: #131313 ; /* black */
+}
+
+#centralwidget{
+	background-color: #131313 ; /* black */
+}
+
+QPushButton{
+	background-color: #6C6C85 ; /* pastel purple */
+	border-radius: 10px;
+	margin: 5px;
+}
+
+QPushButton:pressed {
+    background-color: #4BD7D6 ; /* light blue */
+}</string>
+  </property>
+  <layout class="QHBoxLayout" name="horizontalLayout">
+   <item>
+    <widget class="QFrame" name="centralwidget">
+     <property name="frameShape">
+      <enum>QFrame::StyledPanel</enum>
+     </property>
+     <property name="frameShadow">
+      <enum>QFrame::Raised</enum>
+     </property>
+     <layout class="QHBoxLayout" name="horizontalLayout_2">
+      <property name="spacing">
+       <number>0</number>
+      </property>
+      <property name="leftMargin">
+       <number>0</number>
+      </property>
+      <property name="topMargin">
+       <number>0</number>
+      </property>
+      <property name="rightMargin">
+       <number>0</number>
+      </property>
+      <property name="bottomMargin">
+       <number>0</number>
+      </property>
+      <item>
+       <widget class="QScrollArea" name="scrollArea">
+        <property name="layoutDirection">
+         <enum>Qt::LeftToRight</enum>
+        </property>
+        <property name="widgetResizable">
+         <bool>true</bool>
+        </property>
+        <widget class="QWidget" name="scrollAreaWidgetContents">
+         <property name="geometry">
+          <rect>
+           <x>0</x>
+           <y>0</y>
+           <width>703</width>
+           <height>451</height>
+          </rect>
+         </property>
+         <layout class="QGridLayout" name="gridLayout">
+          <item row="0" column="0">
+           <widget class="QPushButton" name="DB_IC_Tile">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="layoutDirection">
+             <enum>Qt::LeftToRight</enum>
+            </property>
+            <property name="text">
+             <string>Instrument Cluster</string>
+            </property>
+            <property name="icon">
+             <iconset resource="../assets/res.qrc">
+              <normaloff>:/Carbon_Icons/carbon_icons/meter.svg</normaloff>:/Carbon_Icons/carbon_icons/meter.svg</iconset>
+            </property>
+            <property name="iconSize">
+             <size>
+              <width>50</width>
+              <height>50</height>
+             </size>
+            </property>
+            <property name="flat">
+             <bool>false</bool>
+            </property>
+           </widget>
+          </item>
+          <item row="0" column="1">
+           <widget class="QPushButton" name="DB_HVAC_Tile">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="layoutDirection">
+             <enum>Qt::LeftToRight</enum>
+            </property>
+            <property name="text">
+             <string>HVAC</string>
+            </property>
+            <property name="icon">
+             <iconset resource="../assets/res.qrc">
+              <normaloff>:/Carbon_Icons/carbon_icons/windy--strong.svg</normaloff>:/Carbon_Icons/carbon_icons/windy--strong.svg</iconset>
+            </property>
+            <property name="iconSize">
+             <size>
+              <width>50</width>
+              <height>50</height>
+             </size>
+            </property>
+            <property name="flat">
+             <bool>false</bool>
+            </property>
+           </widget>
+          </item>
+          <item row="1" column="0">
+           <widget class="QPushButton" name="DB_Steering_Tile">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="layoutDirection">
+             <enum>Qt::LeftToRight</enum>
+            </property>
+            <property name="text">
+             <string>Steering Controls</string>
+            </property>
+            <property name="icon">
+             <iconset resource="../assets/res.qrc">
+              <normaloff>:/Images/Images/steering-wheel.svg</normaloff>:/Images/Images/steering-wheel.svg</iconset>
+            </property>
+            <property name="iconSize">
+             <size>
+              <width>50</width>
+              <height>50</height>
+             </size>
+            </property>
+            <property name="flat">
+             <bool>false</bool>
+            </property>
+           </widget>
+          </item>
+          <item row="1" column="1">
+           <widget class="QPushButton" name="DB_Settings_Tile">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="layoutDirection">
+             <enum>Qt::LeftToRight</enum>
+            </property>
+            <property name="text">
+             <string>Configure</string>
+            </property>
+            <property name="icon">
+             <iconset resource="../assets/res.qrc">
+              <normaloff>:/Carbon_Icons/carbon_icons/settings.svg</normaloff>:/Carbon_Icons/carbon_icons/settings.svg</iconset>
+            </property>
+            <property name="iconSize">
+             <size>
+              <width>50</width>
+              <height>50</height>
+             </size>
+            </property>
+            <property name="flat">
+             <bool>false</bool>
+            </property>
+           </widget>
+          </item>
+         </layout>
+        </widget>
+       </widget>
+      </item>
+     </layout>
+    </widget>
+   </item>
+  </layout>
+ </widget>
+ <resources>
+  <include location="../assets/res.qrc"/>
+ </resources>
+ <connections/>
+</ui>
diff --git a/ui/HVAC.ui b/ui/HVAC.ui
index a894b65..abee74f 100644
--- a/ui/HVAC.ui
+++ b/ui/HVAC.ui
@@ -204,53 +204,24 @@ QListWidget::item:hover {
         <property name="frameShadow">
          <enum>QFrame::Raised</enum>
         </property>
-        <layout class="QHBoxLayout" name="horizontalLayout_2">
+        <layout class="QHBoxLayout" name="horizontalLayout">
          <item>
-          <widget class="QFrame" name="frame_5">
-           <property name="frameShape">
-            <enum>QFrame::StyledPanel</enum>
+          <widget class="QLabel" name="label_2">
+           <property name="sizePolicy">
+            <sizepolicy hsizetype="MinimumExpanding" vsizetype="Fixed">
+             <horstretch>0</horstretch>
+             <verstretch>0</verstretch>
+            </sizepolicy>
            </property>
-           <property name="frameShadow">
-            <enum>QFrame::Raised</enum>
+           <property name="font">
+            <font>
+             <weight>75</weight>
+             <italic>true</italic>
+             <bold>true</bold>
+            </font>
            </property>
-           <layout class="QHBoxLayout" name="horizontalLayout_4">
-            <item>
-             <widget class="QLabel" name="label_2">
-              <property name="sizePolicy">
-               <sizepolicy hsizetype="MinimumExpanding" vsizetype="Fixed">
-                <horstretch>0</horstretch>
-                <verstretch>0</verstretch>
-               </sizepolicy>
-              </property>
-              <property name="font">
-               <font>
-                <weight>75</weight>
-                <italic>true</italic>
-                <bold>true</bold>
-               </font>
-              </property>
-              <property name="text">
-               <string>HVAC</string>
-              </property>
-             </widget>
-            </item>
-           </layout>
-          </widget>
-         </item>
-         <item>
-          <widget class="QPushButton" name="scriptBtn">
            <property name="text">
-            <string>Script</string>
-           </property>
-           <property name="icon">
-            <iconset resource="../assets/res.qrc">
-             <normaloff>:/icons/feather/play-circle.svg</normaloff>:/icons/feather/play-circle.svg</iconset>
-           </property>
-           <property name="iconSize">
-            <size>
-             <width>30</width>
-             <height>30</height>
-            </size>
+            <string>HVAC</string>
            </property>
           </widget>
          </item>
@@ -267,8 +238,8 @@ QListWidget::item:hover {
           <rect>
            <x>0</x>
            <y>0</y>
-           <width>689</width>
-           <height>415</height>
+           <width>697</width>
+           <height>409</height>
           </rect>
          </property>
          <layout class="QVBoxLayout" name="verticalLayout_3">
@@ -455,7 +426,7 @@ QListWidget::item:hover {
                    <string/>
                   </property>
                   <property name="pixmap">
-                   <pixmap resource="../assets/res.qrc">:/Images/Images/fan.svg</pixmap>
+                   <pixmap resource="../assets/res.qrc">:/Images/Images/HMI_HVAC_Fan_Icon.svg</pixmap>
                   </property>
                  </widget>
                 </item>
@@ -491,6 +462,12 @@ QListWidget::item:hover {
                 </item>
                 <item row="2" column="3" rowspan="4" alignment="Qt::AlignHCenter">
                  <widget class="QSlider" name="rightFanSpeed_slider">
+                  <property name="minimumSize">
+                   <size>
+                    <width>40</width>
+                    <height>0</height>
+                   </size>
+                  </property>
                   <property name="orientation">
                    <enum>Qt::Vertical</enum>
                   </property>
@@ -503,12 +480,12 @@ QListWidget::item:hover {
                   </property>
                   <property name="icon">
                    <iconset resource="../assets/res.qrc">
-                    <normaloff>:/Images/Images/tempDown.svg</normaloff>:/Images/Images/tempDown.svg</iconset>
+                    <normaloff>:/Carbon_Icons/carbon_icons/temperature--hot.svg</normaloff>:/Carbon_Icons/carbon_icons/temperature--hot.svg</iconset>
                   </property>
                   <property name="iconSize">
                    <size>
-                    <width>30</width>
-                    <height>30</height>
+                    <width>40</width>
+                    <height>40</height>
                    </size>
                   </property>
                  </widget>
@@ -520,12 +497,12 @@ QListWidget::item:hover {
                   </property>
                   <property name="icon">
                    <iconset resource="../assets/res.qrc">
-                    <normaloff>:/Images/Images/tempUp.svg</normaloff>:/Images/Images/tempUp.svg</iconset>
+                    <normaloff>:/Carbon_Icons/carbon_icons/temperature--frigid.svg</normaloff>:/Carbon_Icons/carbon_icons/temperature--frigid.svg</iconset>
                   </property>
                   <property name="iconSize">
                    <size>
-                    <width>30</width>
-                    <height>30</height>
+                    <width>40</width>
+                    <height>40</height>
                    </size>
                   </property>
                  </widget>
@@ -601,6 +578,12 @@ QListWidget::item:hover {
                     <verstretch>0</verstretch>
                    </sizepolicy>
                   </property>
+                  <property name="minimumSize">
+                   <size>
+                    <width>40</width>
+                    <height>0</height>
+                   </size>
+                  </property>
                   <property name="orientation">
                    <enum>Qt::Vertical</enum>
                   </property>
@@ -637,11 +620,14 @@ QListWidget::item:hover {
                    <string/>
                   </property>
                   <property name="pixmap">
-                   <pixmap resource="../assets/res.qrc">:/Images/Images/fan.svg</pixmap>
+                   <pixmap resource="../assets/res.qrc">:/Images/Images/HMI_HVAC_Fan_Icon.svg</pixmap>
                   </property>
                   <property name="scaledContents">
                    <bool>false</bool>
                   </property>
+                  <property name="alignment">
+                   <set>Qt::AlignCenter</set>
+                  </property>
                  </widget>
                 </item>
                 <item row="6" column="3">
@@ -651,12 +637,12 @@ QListWidget::item:hover {
                   </property>
                   <property name="icon">
                    <iconset resource="../assets/res.qrc">
-                    <normaloff>:/Images/Images/tempDown.svg</normaloff>:/Images/Images/tempDown.svg</iconset>
+                    <normaloff>:/Carbon_Icons/carbon_icons/temperature--hot.svg</normaloff>:/Carbon_Icons/carbon_icons/temperature--hot.svg</iconset>
                   </property>
                   <property name="iconSize">
                    <size>
-                    <width>30</width>
-                    <height>30</height>
+                    <width>40</width>
+                    <height>40</height>
                    </size>
                   </property>
                  </widget>
@@ -808,12 +794,12 @@ QListWidget::item:hover {
                   </property>
                   <property name="icon">
                    <iconset resource="../assets/res.qrc">
-                    <normaloff>:/Images/Images/tempUp.svg</normaloff>:/Images/Images/tempUp.svg</iconset>
+                    <normaloff>:/Carbon_Icons/carbon_icons/temperature--frigid.svg</normaloff>:/Carbon_Icons/carbon_icons/temperature--frigid.svg</iconset>
                   </property>
                   <property name="iconSize">
                    <size>
-                    <width>30</width>
-                    <height>30</height>
+                    <width>40</width>
+                    <height>40</height>
                    </size>
                   </property>
                  </widget>
diff --git a/ui/IC.ui b/ui/IC.ui
index 5ca9659..725a2b3 100644
--- a/ui/IC.ui
+++ b/ui/IC.ui
@@ -174,8 +174,8 @@ QLCDNumber {
           <rect>
            <x>0</x>
            <y>0</y>
-           <width>658</width>
-           <height>638</height>
+           <width>664</width>
+           <height>652</height>
           </rect>
          </property>
          <layout class="QGridLayout" name="gridLayout_4">
@@ -389,8 +389,14 @@ QLCDNumber {
                </property>
               </widget>
              </item>
-             <item row="1" column="8">
+             <item row="1" column="8" alignment="Qt::AlignHCenter">
               <widget class="QSlider" name="fuelLevel_slider">
+               <property name="minimumSize">
+                <size>
+                 <width>60</width>
+                 <height>0</height>
+                </size>
+               </property>
                <property name="font">
                 <font>
                  <kerning>true</kerning>
@@ -413,8 +419,14 @@ QLCDNumber {
                </property>
               </widget>
              </item>
-             <item row="1" column="1">
+             <item row="1" column="1" alignment="Qt::AlignHCenter">
               <widget class="QSlider" name="coolantTemp_slider">
+               <property name="minimumSize">
+                <size>
+                 <width>60</width>
+                 <height>0</height>
+                </size>
+               </property>
                <property name="orientation">
                 <enum>Qt::Vertical</enum>
                </property>
@@ -442,7 +454,7 @@ QLCDNumber {
                </property>
               </widget>
              </item>
-             <item row="3" column="8">
+             <item row="3" column="8" alignment="Qt::AlignHCenter|Qt::AlignVCenter">
               <widget class="QLabel" name="label_3">
                <property name="sizePolicy">
                 <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
@@ -462,7 +474,7 @@ QLCDNumber {
                 <string/>
                </property>
                <property name="pixmap">
-                <pixmap resource="../assets/res.qrc">:/icons/feather/droplet.svg</pixmap>
+                <pixmap resource="../assets/res.qrc">:/Carbon_Icons/carbon_icons/rain-drop.svg</pixmap>
                </property>
                <property name="scaledContents">
                 <bool>false</bool>
@@ -513,6 +525,12 @@ QLCDNumber {
              </item>
              <item row="3" column="3">
               <widget class="QSlider" name="Speed_slider">
+               <property name="minimumSize">
+                <size>
+                 <width>0</width>
+                 <height>60</height>
+                </size>
+               </property>
                <property name="font">
                 <font>
                  <weight>50</weight>
@@ -567,6 +585,12 @@ QLCDNumber {
              </item>
              <item row="3" column="6">
               <widget class="QSlider" name="RPM_slider">
+               <property name="minimumSize">
+                <size>
+                 <width>0</width>
+                 <height>60</height>
+                </size>
+               </property>
                <property name="orientation">
                 <enum>Qt::Horizontal</enum>
                </property>
@@ -588,13 +612,13 @@ QLCDNumber {
                </property>
               </spacer>
              </item>
-             <item row="3" column="1">
+             <item row="3" column="1" alignment="Qt::AlignHCenter|Qt::AlignVCenter">
               <widget class="QLabel" name="label_2">
                <property name="text">
                 <string/>
                </property>
                <property name="pixmap">
-                <pixmap resource="../assets/res.qrc">:/icons/feather/thermometer.svg</pixmap>
+                <pixmap resource="../assets/res.qrc">:/Carbon_Icons/carbon_icons/temperature--water.svg</pixmap>
                </property>
               </widget>
              </item>
@@ -911,7 +935,7 @@ QLCDNumber {
        </widget>
       </item>
       <item row="0" column="1">
-       <widget class="QFrame" name="frame">
+       <widget class="QFrame" name="header_frame">
         <property name="minimumSize">
          <size>
           <width>0</width>
@@ -959,22 +983,23 @@ QLCDNumber {
           </widget>
          </item>
          <item>
-          <widget class="QPushButton" name="scriptBtn">
-           <property name="text">
-            <string>Script</string>
-           </property>
-           <property name="icon">
-            <iconset resource="../assets/res.qrc">
-             <normaloff>:/icons/feather/play-circle.svg</normaloff>:/icons/feather/play-circle.svg</iconset>
+          <widget class="QLabel" name="label_6">
+           <property name="font">
+            <font>
+             <weight>75</weight>
+             <italic>true</italic>
+             <bold>true</bold>
+            </font>
            </property>
-           <property name="iconSize">
-            <size>
-             <width>30</width>
-             <height>30</height>
-            </size>
+           <property name="text">
+            <string>Demo Mode</string>
            </property>
-           <property name="checkable">
-            <bool>true</bool>
+          </widget>
+         </item>
+         <item>
+          <widget class="QCheckBox" name="demoToggle">
+           <property name="text">
+            <string/>
            </property>
           </widget>
          </item>
diff --git a/ui/Nav.ui b/ui/Nav.ui
deleted file mode 100644
index 6c9c551..0000000
--- a/ui/Nav.ui
+++ /dev/null
@@ -1,304 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<ui version="4.0">
- <class>Navigation</class>
- <widget class="QWidget" name="Navigation">
-  <property name="geometry">
-   <rect>
-    <x>0</x>
-    <y>0</y>
-    <width>703</width>
-    <height>712</height>
-   </rect>
-  </property>
-  <property name="windowTitle">
-   <string>Form</string>
-  </property>
-  <property name="autoFillBackground">
-   <bool>false</bool>
-  </property>
-  <property name="styleSheet">
-   <string notr="true">*{
-	border: none;
-	background-color: transparent;
-	background: none; 
-	padding: 0;
-	margin: 0;
-	color: #fff;
-}
-
-
-#centralwidget{
-	background-color: #131313 ; /* black */
-}
-
-QPushButton{
-	background-color: transparent;
-	padding: 5px 10px;
-	border: 1px solid #4BD7D6 ; /* light blue */
-	border-radius: 10px;
-}
-
-QPushButton:pressed {
-    background-color: #6C6C85 ; /* pastel purple */
-}
-
-#centralwidget QLineEdit {
-	background-color: transparent;
-	padding: 5px 10px;
-	border: 1px solid #4BD7D6 ; /* light blue */
-	border-radius: 10px;
-}
-
-#frame_3{
-	background-color: #131313 ; /* black */
-	border-radius: 10px;
-}
-
-</string>
-  </property>
-  <layout class="QVBoxLayout" name="verticalLayout_2">
-   <item>
-    <widget class="QFrame" name="centralwidget">
-     <property name="minimumSize">
-      <size>
-       <width>600</width>
-       <height>0</height>
-      </size>
-     </property>
-     <property name="frameShape">
-      <enum>QFrame::StyledPanel</enum>
-     </property>
-     <property name="frameShadow">
-      <enum>QFrame::Raised</enum>
-     </property>
-     <layout class="QGridLayout" name="gridLayout">
-      <item row="2" column="0" colspan="3" alignment="Qt::AlignHCenter|Qt::AlignVCenter">
-       <widget class="QFrame" name="frame_3">
-        <property name="frameShape">
-         <enum>QFrame::StyledPanel</enum>
-        </property>
-        <property name="frameShadow">
-         <enum>QFrame::Raised</enum>
-        </property>
-        <layout class="QVBoxLayout" name="verticalLayout">
-         <property name="spacing">
-          <number>6</number>
-         </property>
-         <property name="leftMargin">
-          <number>6</number>
-         </property>
-         <property name="topMargin">
-          <number>6</number>
-         </property>
-         <property name="rightMargin">
-          <number>6</number>
-         </property>
-         <property name="bottomMargin">
-          <number>6</number>
-         </property>
-         <item>
-          <widget class="QWebEngineView" name="map_view">
-           <property name="sizePolicy">
-            <sizepolicy hsizetype="Expanding" vsizetype="Preferred">
-             <horstretch>0</horstretch>
-             <verstretch>0</verstretch>
-            </sizepolicy>
-           </property>
-           <property name="minimumSize">
-            <size>
-             <width>600</width>
-             <height>300</height>
-            </size>
-           </property>
-           <property name="url">
-            <url>
-             <string>about:blank</string>
-            </url>
-           </property>
-          </widget>
-         </item>
-        </layout>
-       </widget>
-      </item>
-      <item row="1" column="1" alignment="Qt::AlignTop">
-       <widget class="QFrame" name="frame">
-        <property name="sizePolicy">
-         <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
-          <horstretch>0</horstretch>
-          <verstretch>0</verstretch>
-         </sizepolicy>
-        </property>
-        <property name="minimumSize">
-         <size>
-          <width>600</width>
-          <height>0</height>
-         </size>
-        </property>
-        <property name="frameShape">
-         <enum>QFrame::StyledPanel</enum>
-        </property>
-        <property name="frameShadow">
-         <enum>QFrame::Raised</enum>
-        </property>
-        <layout class="QGridLayout" name="gridLayout_3">
-         <item row="0" column="4">
-          <widget class="QPushButton" name="F_coordinates">
-           <property name="autoFillBackground">
-            <bool>false</bool>
-           </property>
-           <property name="text">
-            <string>Confirm</string>
-           </property>
-          </widget>
-         </item>
-         <item row="1" column="4">
-          <widget class="QPushButton" name="T_coordinates">
-           <property name="autoFillBackground">
-            <bool>false</bool>
-           </property>
-           <property name="text">
-            <string>Confirm</string>
-           </property>
-          </widget>
-         </item>
-         <item row="0" column="0" colspan="2">
-          <widget class="QLabel" name="From">
-           <property name="text">
-            <string>From:</string>
-           </property>
-          </widget>
-         </item>
-         <item row="1" column="2" colspan="2">
-          <widget class="QLineEdit" name="To_address">
-           <property name="autoFillBackground">
-            <bool>false</bool>
-           </property>
-          </widget>
-         </item>
-         <item row="0" column="2">
-          <widget class="QPushButton" name="CurrentLocation">
-           <property name="text">
-            <string/>
-           </property>
-           <property name="icon">
-            <iconset resource="../assets/res.qrc">
-             <normaloff>:/icons/feather/map-pin.svg</normaloff>:/icons/feather/map-pin.svg</iconset>
-           </property>
-          </widget>
-         </item>
-         <item row="1" column="0">
-          <widget class="QLabel" name="To">
-           <property name="text">
-            <string>To: </string>
-           </property>
-          </widget>
-         </item>
-         <item row="0" column="3">
-          <widget class="QLineEdit" name="From_address">
-           <property name="autoFillBackground">
-            <bool>false</bool>
-           </property>
-          </widget>
-         </item>
-        </layout>
-       </widget>
-      </item>
-      <item row="3" column="1">
-       <widget class="QPushButton" name="Start_Nav">
-        <property name="text">
-         <string>Start Navigation</string>
-        </property>
-        <property name="icon">
-         <iconset resource="../assets/res.qrc">
-          <normaloff>:/icons/feather/navigation.svg</normaloff>:/icons/feather/navigation.svg</iconset>
-        </property>
-       </widget>
-      </item>
-      <item row="0" column="1">
-       <spacer name="verticalSpacer_2">
-        <property name="orientation">
-         <enum>Qt::Vertical</enum>
-        </property>
-        <property name="sizeHint" stdset="0">
-         <size>
-          <width>20</width>
-          <height>40</height>
-         </size>
-        </property>
-       </spacer>
-      </item>
-      <item row="4" column="1">
-       <spacer name="verticalSpacer_3">
-        <property name="orientation">
-         <enum>Qt::Vertical</enum>
-        </property>
-        <property name="sizeHint" stdset="0">
-         <size>
-          <width>20</width>
-          <height>40</height>
-         </size>
-        </property>
-       </spacer>
-      </item>
-      <item row="1" column="0">
-       <spacer name="horizontalSpacer_2">
-        <property name="orientation">
-         <enum>Qt::Horizontal</enum>
-        </property>
-        <property name="sizeType">
-         <enum>QSizePolicy::MinimumExpanding</enum>
-        </property>
-        <property name="sizeHint" stdset="0">
-         <size>
-          <width>40</width>
-          <height>20</height>
-         </size>
-        </property>
-       </spacer>
-      </item>
-      <item row="1" column="2">
-       <spacer name="horizontalSpacer">
-        <property name="orientation">
-         <enum>Qt::Horizontal</enum>
-        </property>
-        <property name="sizeType">
-         <enum>QSizePolicy::MinimumExpanding</enum>
-        </property>
-        <property name="sizeHint" stdset="0">
-         <size>
-          <width>40</width>
-          <height>20</height>
-         </size>
-        </property>
-       </spacer>
-      </item>
-     </layout>
-    </widget>
-   </item>
-   <item>
-    <spacer name="verticalSpacer">
-     <property name="orientation">
-      <enum>Qt::Vertical</enum>
-     </property>
-     <property name="sizeHint" stdset="0">
-      <size>
-       <width>20</width>
-       <height>40</height>
-      </size>
-     </property>
-    </spacer>
-   </item>
-  </layout>
- </widget>
- <customwidgets>
-  <customwidget>
-   <class>QWebEngineView</class>
-   <extends>QWidget</extends>
-   <header location="global">QtWebEngineWidgets/QWebEngineView</header>
-  </customwidget>
- </customwidgets>
- <resources>
-  <include location="../assets/res.qrc"/>
- </resources>
- <connections/>
-</ui>
diff --git a/ui/Settings_Window.ui b/ui/Settings_Window.ui
index 2ff53d8..ff73614 100644
--- a/ui/Settings_Window.ui
+++ b/ui/Settings_Window.ui
@@ -6,8 +6,8 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>603</width>
-    <height>346</height>
+    <width>1105</width>
+    <height>631</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -44,103 +44,185 @@ QPushButton:pressed {
 	padding: 5px 10px;
 	border: 1px solid #4BD7D6 ; /* light blue */
 	border-radius: 10px;
+}
+
+QCheckBox {
+  background-color: transparent;
+  color: white;
+}
+
+QCheckBox::indicator:unchecked {
+  border: 2px solid white;
+  background-color: transparent;
+}
+
+QCheckBox::indicator:checked {
+  background-color: #00ffff; /* Neon blue */
+  border: 2px solid #00cccc; /* Darker neon blue */
+}
+
+QCheckBox:disabled {
+  color: #aaaaaa; /* Grayed out text color */
+}
+
+QCheckBox:indicator:disabled {
+  background-color: #cccccc; /* Grayed out background */
 }</string>
   </property>
   <widget class="QWidget" name="centralwidget">
    <layout class="QGridLayout" name="gridLayout">
-    <item row="3" column="1" colspan="3">
-     <widget class="QFrame" name="frame_3">
+    <item row="1" column="3" rowspan="4">
+     <spacer name="horizontalSpacer">
+      <property name="orientation">
+       <enum>Qt::Horizontal</enum>
+      </property>
+      <property name="sizeHint" stdset="0">
+       <size>
+        <width>40</width>
+        <height>20</height>
+       </size>
+      </property>
+     </spacer>
+    </item>
+    <item row="1" column="1" colspan="2">
+     <widget class="QFrame" name="frame_2">
+      <property name="sizePolicy">
+       <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
+        <horstretch>0</horstretch>
+        <verstretch>0</verstretch>
+       </sizepolicy>
+      </property>
       <property name="frameShape">
        <enum>QFrame::StyledPanel</enum>
       </property>
       <property name="frameShadow">
        <enum>QFrame::Raised</enum>
       </property>
-      <layout class="QGridLayout" name="gridLayout_2">
-       <item row="10" column="4" colspan="2" alignment="Qt::AlignLeft">
-        <widget class="QPushButton" name="pushButton_3">
+      <layout class="QHBoxLayout" name="horizontalLayout_2">
+       <item>
+        <widget class="QPushButton" name="startClientBtn">
          <property name="text">
-          <string/>
+          <string>Start client</string>
          </property>
          <property name="icon">
           <iconset resource="../assets/res.qrc">
-           <normaloff>:/icons/feather/eye.svg</normaloff>:/icons/feather/eye.svg</iconset>
+           <normaloff>:/Carbon_Icons/carbon_icons/play.svg</normaloff>:/Carbon_Icons/carbon_icons/play.svg</iconset>
          </property>
-        </widget>
-       </item>
-       <item row="3" column="0" colspan="3">
-        <widget class="QLabel" name="tokenPath">
-         <property name="text">
-          <string>JWT token Path *</string>
+         <property name="iconSize">
+          <size>
+           <width>30</width>
+           <height>30</height>
+          </size>
          </property>
         </widget>
        </item>
-       <item row="9" column="4" colspan="2" alignment="Qt::AlignLeft">
-        <widget class="QPushButton" name="pushButton_2">
+       <item>
+        <widget class="QPushButton" name="reconnectBtn">
          <property name="text">
-          <string/>
+          <string>Reconnect</string>
          </property>
          <property name="icon">
           <iconset resource="../assets/res.qrc">
-           <normaloff>:/icons/feather/eye.svg</normaloff>:/icons/feather/eye.svg</iconset>
+           <normaloff>:/Carbon_Icons/carbon_icons/renew.svg</normaloff>:/Carbon_Icons/carbon_icons/renew.svg</iconset>
          </property>
-        </widget>
-       </item>
-       <item row="6" column="0" colspan="6" alignment="Qt::AlignHCenter">
-        <widget class="QLabel" name="label_2">
-         <property name="text">
-          <string>Page Settings</string>
+         <property name="iconSize">
+          <size>
+           <width>30</width>
+           <height>30</height>
+          </size>
          </property>
         </widget>
        </item>
-       <item row="1" column="4">
-        <widget class="QLabel" name="connectionLogo">
-         <property name="text">
-          <string/>
+       <item>
+        <widget class="QPushButton" name="refreshBtn">
+         <property name="enabled">
+          <bool>true</bool>
          </property>
-         <property name="pixmap">
-          <pixmap resource="../assets/res.qrc">:/icons/feather/alert-triangle.svg</pixmap>
+         <property name="font">
+          <font>
+           <weight>50</weight>
+           <bold>false</bold>
+          </font>
          </property>
-        </widget>
-       </item>
-       <item row="3" column="4" colspan="2">
-        <widget class="QLineEdit" name="tokenPathInput">
-         <property name="placeholderText">
-          <string>/Path/To/Token</string>
-         </property>
-        </widget>
-       </item>
-       <item row="1" column="0" colspan="3">
-        <widget class="QLabel" name="status">
          <property name="text">
-          <string>Status</string>
+          <string>Refresh Status</string>
+         </property>
+         <property name="iconSize">
+          <size>
+           <width>30</width>
+           <height>30</height>
+          </size>
          </property>
         </widget>
        </item>
-       <item row="2" column="0" colspan="3">
-        <widget class="QLabel" name="IPAddr">
+      </layout>
+     </widget>
+    </item>
+    <item row="4" column="1" colspan="2">
+     <spacer name="verticalSpacer">
+      <property name="orientation">
+       <enum>Qt::Vertical</enum>
+      </property>
+      <property name="sizeType">
+       <enum>QSizePolicy::Expanding</enum>
+      </property>
+      <property name="sizeHint" stdset="0">
+       <size>
+        <width>20</width>
+        <height>40</height>
+       </size>
+      </property>
+     </spacer>
+    </item>
+    <item row="1" column="0" rowspan="4">
+     <spacer name="horizontalSpacer_2">
+      <property name="orientation">
+       <enum>Qt::Horizontal</enum>
+      </property>
+      <property name="sizeHint" stdset="0">
+       <size>
+        <width>40</width>
+        <height>20</height>
+       </size>
+      </property>
+     </spacer>
+    </item>
+    <item row="3" column="1" colspan="2">
+     <widget class="QFrame" name="frame_3">
+      <property name="frameShape">
+       <enum>QFrame::StyledPanel</enum>
+      </property>
+      <property name="frameShadow">
+       <enum>QFrame::Raised</enum>
+      </property>
+      <layout class="QGridLayout" name="gridLayout_2">
+       <item row="4" column="6" colspan="2">
+        <widget class="QCheckBox" name="place_holder_toggle_1">
          <property name="text">
-          <string>IP Address *</string>
+          <string/>
+         </property>
+         <property name="checked">
+          <bool>false</bool>
          </property>
         </widget>
        </item>
-       <item row="1" column="3" rowspan="4">
-        <spacer name="horizontalSpacer_3">
+       <item row="0" column="1" colspan="8">
+        <spacer name="verticalSpacer_2">
          <property name="orientation">
-          <enum>Qt::Horizontal</enum>
+          <enum>Qt::Vertical</enum>
          </property>
          <property name="sizeType">
-          <enum>QSizePolicy::Fixed</enum>
+          <enum>QSizePolicy::Maximum</enum>
          </property>
          <property name="sizeHint" stdset="0">
           <size>
            <width>20</width>
-           <height>20</height>
+           <height>40</height>
           </size>
          </property>
         </spacer>
        </item>
-       <item row="1" column="5">
+       <item row="1" column="7" colspan="4">
         <widget class="QLabel" name="connectionStatus">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Expanding" vsizetype="Preferred">
@@ -153,50 +235,171 @@ QPushButton:pressed {
          </property>
         </widget>
        </item>
-       <item row="5" column="2" colspan="4">
-        <widget class="Line" name="line">
-         <property name="orientation">
-          <enum>Qt::Horizontal</enum>
+       <item row="8" column="2" rowspan="3">
+        <widget class="QFrame" name="PageLabels">
+         <property name="frameShape">
+          <enum>QFrame::StyledPanel</enum>
+         </property>
+         <property name="frameShadow">
+          <enum>QFrame::Raised</enum>
          </property>
+         <layout class="QVBoxLayout" name="verticalLayout_2">
+          <property name="spacing">
+           <number>0</number>
+          </property>
+          <property name="leftMargin">
+           <number>0</number>
+          </property>
+          <property name="topMargin">
+           <number>0</number>
+          </property>
+          <property name="rightMargin">
+           <number>0</number>
+          </property>
+          <property name="bottomMargin">
+           <number>0</number>
+          </property>
+          <item>
+           <widget class="QLabel" name="label_3">
+            <property name="text">
+             <string>Instrument Cluster</string>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <widget class="QLabel" name="label_4">
+            <property name="text">
+             <string>HVAC</string>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <widget class="QLabel" name="label_5">
+            <property name="text">
+             <string>Steering Controls</string>
+            </property>
+           </widget>
+          </item>
+         </layout>
         </widget>
        </item>
-       <item row="2" column="4" colspan="2">
-        <widget class="QLineEdit" name="IPAddrInput">
-         <property name="placeholderText">
-          <string>Default: localhost</string>
+       <item row="2" column="0" colspan="4">
+        <widget class="QLabel" name="IPAddr">
+         <property name="text">
+          <string>IP Address *</string>
          </property>
         </widget>
        </item>
-       <item row="4" column="4" colspan="2">
-        <widget class="QCheckBox" name="SSLToggle">
+       <item row="10" column="9">
+        <widget class="QCheckBox" name="place_holder_toggle_2">
+         <property name="text">
+          <string/>
+         </property>
+        </widget>
+       </item>
+       <item row="8" column="0">
+        <widget class="QLabel" name="label_6">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Fixed" vsizetype="Ignored">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="maximumSize">
+          <size>
+           <width>25</width>
+           <height>25</height>
+          </size>
+         </property>
+         <property name="text">
+          <string/>
+         </property>
+         <property name="pixmap">
+          <pixmap resource="../assets/res.qrc">:/Carbon_Icons/carbon_icons/meter.svg</pixmap>
+         </property>
+         <property name="scaledContents">
+          <bool>true</bool>
+         </property>
+        </widget>
+       </item>
+       <item row="10" column="6" colspan="2" alignment="Qt::AlignLeft">
+        <widget class="QPushButton" name="pushButton_3">
          <property name="text">
           <string/>
          </property>
          <property name="icon">
           <iconset resource="../assets/res.qrc">
-           <normaloff>:/icons/feather/shield.svg</normaloff>
-           <normalon>:/icons/feather/shield-off.svg</normalon>:/icons/feather/shield.svg</iconset>
+           <normaloff>:/Carbon_Icons/carbon_icons/view.svg</normaloff>:/Carbon_Icons/carbon_icons/view.svg</iconset>
          </property>
-         <property name="checked">
-          <bool>false</bool>
+         <property name="iconSize">
+          <size>
+           <width>30</width>
+           <height>30</height>
+          </size>
+         </property>
+        </widget>
+       </item>
+       <item row="3" column="0" colspan="4">
+        <widget class="QLabel" name="tokenPath">
+         <property name="text">
+          <string>JWT token Path *</string>
          </property>
         </widget>
        </item>
-       <item row="4" column="0" colspan="3">
+       <item row="10" column="0">
+        <widget class="QLabel" name="label_8">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="maximumSize">
+          <size>
+           <width>25</width>
+           <height>25</height>
+          </size>
+         </property>
+         <property name="text">
+          <string/>
+         </property>
+         <property name="pixmap">
+          <pixmap resource="../assets/res.qrc">:/Images/Images/steering-wheel.svg</pixmap>
+         </property>
+         <property name="scaledContents">
+          <bool>true</bool>
+         </property>
+        </widget>
+       </item>
+       <item row="5" column="0" colspan="3">
+        <widget class="QLabel" name="label_11">
+         <property name="text">
+          <string>CA</string>
+         </property>
+        </widget>
+       </item>
+       <item row="4" column="0" colspan="4">
         <widget class="QLabel" name="label">
          <property name="text">
           <string>Insecure Mode</string>
          </property>
         </widget>
        </item>
-       <item row="0" column="2" colspan="4">
-        <spacer name="verticalSpacer_2">
+       <item row="4" column="5">
+        <widget class="QLabel" name="label_9">
+         <property name="text">
+          <string/>
+         </property>
+         <property name="pixmap">
+          <pixmap resource="../assets/res.qrc">:/Carbon_Icons/carbon_icons/security-services.svg</pixmap>
+         </property>
+        </widget>
+       </item>
+       <item row="6" column="1" colspan="7">
+        <spacer name="verticalSpacer_4">
          <property name="orientation">
           <enum>Qt::Vertical</enum>
          </property>
-         <property name="sizeType">
-          <enum>QSizePolicy::Maximum</enum>
-         </property>
          <property name="sizeHint" stdset="0">
           <size>
            <width>20</width>
@@ -205,18 +408,21 @@ QPushButton:pressed {
          </property>
         </spacer>
        </item>
-       <item row="7" column="4" colspan="2" alignment="Qt::AlignLeft">
-        <widget class="QPushButton" name="pushButton">
+       <item row="5" column="9" colspan="2">
+        <widget class="QToolButton" name="toolButton">
          <property name="text">
-          <string/>
+          <string>...</string>
          </property>
-         <property name="icon">
-          <iconset resource="../assets/res.qrc">
-           <normaloff>:/icons/feather/eye.svg</normaloff>:/icons/feather/eye.svg</iconset>
+        </widget>
+       </item>
+       <item row="7" column="0" colspan="11">
+        <widget class="QLabel" name="label_2">
+         <property name="text">
+          <string>Page Settings</string>
          </property>
         </widget>
        </item>
-       <item row="7" column="0" rowspan="4">
+       <item row="8" column="1" rowspan="3">
         <widget class="QFrame" name="PageIcons">
          <property name="frameShape">
           <enum>QFrame::StyledPanel</enum>
@@ -240,229 +446,126 @@ QPushButton:pressed {
           <property name="bottomMargin">
            <number>0</number>
           </property>
-          <item>
-           <widget class="QLabel" name="label_6">
-            <property name="sizePolicy">
-             <sizepolicy hsizetype="Fixed" vsizetype="Ignored">
-              <horstretch>0</horstretch>
-              <verstretch>0</verstretch>
-             </sizepolicy>
-            </property>
-            <property name="maximumSize">
-             <size>
-              <width>25</width>
-              <height>25</height>
-             </size>
-            </property>
-            <property name="text">
-             <string/>
-            </property>
-            <property name="pixmap">
-             <pixmap resource="../assets/res.qrc">:/Images/Images/IC.svg</pixmap>
-            </property>
-            <property name="scaledContents">
-             <bool>true</bool>
-            </property>
-           </widget>
-          </item>
-          <item>
-           <widget class="QLabel" name="label_7">
-            <property name="sizePolicy">
-             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
-              <horstretch>0</horstretch>
-              <verstretch>0</verstretch>
-             </sizepolicy>
-            </property>
-            <property name="maximumSize">
-             <size>
-              <width>25</width>
-              <height>25</height>
-             </size>
-            </property>
-            <property name="text">
-             <string/>
-            </property>
-            <property name="pixmap">
-             <pixmap resource="../assets/res.qrc">:/icons/feather/wind.svg</pixmap>
-            </property>
-            <property name="scaledContents">
-             <bool>true</bool>
-            </property>
-           </widget>
-          </item>
-          <item>
-           <widget class="QLabel" name="label_8">
-            <property name="sizePolicy">
-             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
-              <horstretch>0</horstretch>
-              <verstretch>0</verstretch>
-             </sizepolicy>
-            </property>
-            <property name="maximumSize">
-             <size>
-              <width>25</width>
-              <height>25</height>
-             </size>
-            </property>
-            <property name="text">
-             <string/>
-            </property>
-            <property name="pixmap">
-             <pixmap resource="../assets/res.qrc">:/Images/Images/steering-wheel.svg</pixmap>
-            </property>
-            <property name="scaledContents">
-             <bool>true</bool>
-            </property>
-           </widget>
-          </item>
          </layout>
         </widget>
        </item>
-       <item row="7" column="1" rowspan="4">
-        <widget class="QFrame" name="PageLabels">
-         <property name="frameShape">
-          <enum>QFrame::StyledPanel</enum>
+       <item row="1" column="4" rowspan="4">
+        <spacer name="horizontalSpacer_3">
+         <property name="orientation">
+          <enum>Qt::Horizontal</enum>
          </property>
-         <property name="frameShadow">
-          <enum>QFrame::Raised</enum>
+         <property name="sizeType">
+          <enum>QSizePolicy::Fixed</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>20</width>
+           <height>20</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+       <item row="9" column="0">
+        <widget class="QLabel" name="label_7">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="maximumSize">
+          <size>
+           <width>25</width>
+           <height>25</height>
+          </size>
+         </property>
+         <property name="text">
+          <string/>
+         </property>
+         <property name="pixmap">
+          <pixmap resource="../assets/res.qrc">:/Carbon_Icons/carbon_icons/windy--strong.svg</pixmap>
+         </property>
+         <property name="scaledContents">
+          <bool>true</bool>
          </property>
-         <layout class="QVBoxLayout" name="verticalLayout_2">
-          <property name="spacing">
-           <number>0</number>
-          </property>
-          <property name="leftMargin">
-           <number>0</number>
-          </property>
-          <property name="topMargin">
-           <number>0</number>
-          </property>
-          <property name="rightMargin">
-           <number>0</number>
-          </property>
-          <property name="bottomMargin">
-           <number>0</number>
-          </property>
-          <item>
-           <widget class="QLabel" name="label_3">
-            <property name="text">
-             <string>Instrument Cluster</string>
-            </property>
-           </widget>
-          </item>
-          <item>
-           <widget class="QLabel" name="label_4">
-            <property name="text">
-             <string>HVAC</string>
-            </property>
-           </widget>
-          </item>
-          <item>
-           <widget class="QLabel" name="label_5">
-            <property name="text">
-             <string>Steering Controls</string>
-            </property>
-           </widget>
-          </item>
-         </layout>
         </widget>
        </item>
-      </layout>
-     </widget>
-    </item>
-    <item row="1" column="4" rowspan="5">
-     <spacer name="horizontalSpacer">
-      <property name="orientation">
-       <enum>Qt::Horizontal</enum>
-      </property>
-      <property name="sizeHint" stdset="0">
-       <size>
-        <width>40</width>
-        <height>20</height>
-       </size>
-      </property>
-     </spacer>
-    </item>
-    <item row="1" column="1" colspan="3">
-     <widget class="QFrame" name="frame_2">
-      <property name="sizePolicy">
-       <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
-        <horstretch>0</horstretch>
-        <verstretch>0</verstretch>
-       </sizepolicy>
-      </property>
-      <property name="frameShape">
-       <enum>QFrame::StyledPanel</enum>
-      </property>
-      <property name="frameShadow">
-       <enum>QFrame::Raised</enum>
-      </property>
-      <layout class="QHBoxLayout" name="horizontalLayout_2">
-       <item>
-        <widget class="QPushButton" name="startClientBtn">
+       <item row="10" column="8">
+        <widget class="QLabel" name="label_10">
          <property name="text">
-          <string>Start client</string>
+          <string>CAN</string>
          </property>
-         <property name="icon">
-          <iconset resource="../assets/res.qrc">
-           <normaloff>:/icons/feather/play.svg</normaloff>:/icons/feather/play.svg</iconset>
+        </widget>
+       </item>
+       <item row="2" column="5" colspan="6">
+        <widget class="QLineEdit" name="IPAddrInput">
+         <property name="placeholderText">
+          <string>Default: localhost</string>
          </property>
         </widget>
        </item>
-       <item>
-        <widget class="QPushButton" name="reconnectBtn">
+       <item row="9" column="6" colspan="2" alignment="Qt::AlignLeft">
+        <widget class="QPushButton" name="pushButton_2">
          <property name="text">
-          <string>Reconnect</string>
+          <string/>
          </property>
          <property name="icon">
           <iconset resource="../assets/res.qrc">
-           <normaloff>:/icons/feather/refresh-cw.svg</normaloff>:/icons/feather/refresh-cw.svg</iconset>
+           <normaloff>:/Carbon_Icons/carbon_icons/view.svg</normaloff>:/Carbon_Icons/carbon_icons/view.svg</iconset>
+         </property>
+         <property name="iconSize">
+          <size>
+           <width>30</width>
+           <height>30</height>
+          </size>
          </property>
         </widget>
        </item>
-       <item>
-        <widget class="QPushButton" name="refreshBtn">
+       <item row="1" column="5" colspan="2">
+        <widget class="QLabel" name="connectionLogo">
          <property name="text">
-          <string>Refresh Status</string>
+          <string/>
+         </property>
+        </widget>
+       </item>
+       <item row="3" column="5" colspan="6">
+        <widget class="QLineEdit" name="tokenPathInput">
+         <property name="placeholderText">
+          <string>/Path/To/Token</string>
+         </property>
+        </widget>
+       </item>
+       <item row="1" column="0" colspan="4">
+        <widget class="QLabel" name="status">
+         <property name="text">
+          <string>Status</string>
+         </property>
+        </widget>
+       </item>
+       <item row="5" column="5" colspan="4">
+        <widget class="QLineEdit" name="lineEdit"/>
+       </item>
+       <item row="8" column="6" colspan="2" alignment="Qt::AlignLeft">
+        <widget class="QPushButton" name="pushButton">
+         <property name="text">
+          <string/>
+         </property>
+         <property name="icon">
+          <iconset resource="../assets/res.qrc">
+           <normaloff>:/Carbon_Icons/carbon_icons/view.svg</normaloff>:/Carbon_Icons/carbon_icons/view.svg</iconset>
+         </property>
+         <property name="iconSize">
+          <size>
+           <width>30</width>
+           <height>30</height>
+          </size>
          </property>
         </widget>
        </item>
       </layout>
      </widget>
     </item>
-    <item row="5" column="1" colspan="3">
-     <spacer name="verticalSpacer">
-      <property name="orientation">
-       <enum>Qt::Vertical</enum>
-      </property>
-      <property name="sizeType">
-       <enum>QSizePolicy::Expanding</enum>
-      </property>
-      <property name="sizeHint" stdset="0">
-       <size>
-        <width>20</width>
-        <height>40</height>
-       </size>
-      </property>
-     </spacer>
-    </item>
-    <item row="4" column="2" colspan="2">
-     <widget class="QFrame" name="frame">
-      <property name="sizePolicy">
-       <sizepolicy hsizetype="Preferred" vsizetype="Maximum">
-        <horstretch>0</horstretch>
-        <verstretch>0</verstretch>
-       </sizepolicy>
-      </property>
-      <property name="frameShape">
-       <enum>QFrame::StyledPanel</enum>
-      </property>
-      <property name="frameShadow">
-       <enum>QFrame::Raised</enum>
-      </property>
-      <layout class="QHBoxLayout" name="horizontalLayout"/>
-     </widget>
-    </item>
-    <item row="0" column="0" colspan="5">
+    <item row="0" column="0" colspan="4">
      <spacer name="verticalSpacer_3">
       <property name="orientation">
        <enum>Qt::Vertical</enum>
@@ -475,25 +578,11 @@ QPushButton:pressed {
       </property>
      </spacer>
     </item>
-    <item row="1" column="0" rowspan="5">
-     <spacer name="horizontalSpacer_2">
-      <property name="orientation">
-       <enum>Qt::Horizontal</enum>
-      </property>
-      <property name="sizeHint" stdset="0">
-       <size>
-        <width>40</width>
-        <height>20</height>
-       </size>
-      </property>
-     </spacer>
-    </item>
    </layout>
   </widget>
  </widget>
  <resources>
   <include location="../assets/res.qrc"/>
-  <include location="../../../.designer/assets/res.qrc"/>
  </resources>
  <connections/>
 </ui>
diff --git a/ui/SteeringControls.ui b/ui/SteeringControls.ui
index af8ce7b..c46a00d 100644
--- a/ui/SteeringControls.ui
+++ b/ui/SteeringControls.ui
@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>1388</width>
-    <height>711</height>
+    <height>793</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -67,7 +67,7 @@ QPushButton:checked {
   </property>
   <widget class="QWidget" name="centralwidget">
    <layout class="QGridLayout" name="gridLayout">
-    <item row="1" column="2" rowspan="3">
+    <item row="2" column="2" rowspan="3">
      <widget class="QFrame" name="frame">
       <property name="minimumSize">
        <size>
@@ -98,7 +98,7 @@ QPushButton:checked {
         <number>0</number>
        </property>
        <item row="1" column="0">
-        <widget class="QPushButton" name="HornBtn">
+        <widget class="QPushButton" name="Horn">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
            <horstretch>0</horstretch>
@@ -123,7 +123,20 @@ QPushButton:checked {
       </layout>
      </widget>
     </item>
-    <item row="1" column="4" rowspan="4" alignment="Qt::AlignVCenter">
+    <item row="2" column="5" rowspan="4">
+     <spacer name="horizontalSpacer_2">
+      <property name="orientation">
+       <enum>Qt::Horizontal</enum>
+      </property>
+      <property name="sizeHint" stdset="0">
+       <size>
+        <width>40</width>
+        <height>20</height>
+       </size>
+      </property>
+     </spacer>
+    </item>
+    <item row="2" column="4" rowspan="4" alignment="Qt::AlignVCenter">
      <widget class="QFrame" name="RightControls">
       <property name="minimumSize">
        <size>
@@ -148,7 +161,7 @@ QPushButton:checked {
          </property>
          <layout class="QGridLayout" name="gridLayout_6">
           <item row="0" column="0">
-           <widget class="QPushButton" name="CruiseLimitBtn">
+           <widget class="QPushButton" name="CruiseLimit">
             <property name="minimumSize">
              <size>
               <width>0</width>
@@ -171,7 +184,7 @@ QPushButton:checked {
            </widget>
           </item>
           <item row="0" column="1">
-           <widget class="QPushButton" name="CruiseDistanceBtn">
+           <widget class="QPushButton" name="CruiseDistance">
             <property name="font">
              <font>
               <weight>75</weight>
@@ -210,7 +223,7 @@ QPushButton:checked {
          </property>
          <layout class="QGridLayout" name="gridLayout_5">
           <item row="2" column="1" colspan="2">
-           <widget class="QPushButton" name="CruiseSetBtn">
+           <widget class="QPushButton" name="CruiseSet">
             <property name="font">
              <font>
               <weight>75</weight>
@@ -223,7 +236,7 @@ QPushButton:checked {
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/icons/feather/minus.svg</normaloff>:/icons/feather/minus.svg</iconset>
+              <normaloff>:/Carbon_Icons/carbon_icons/subtract--alt.svg</normaloff>:/Carbon_Icons/carbon_icons/subtract--alt.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -234,7 +247,7 @@ QPushButton:checked {
            </widget>
           </item>
           <item row="0" column="1" colspan="2">
-           <widget class="QPushButton" name="CruiseResumeBtn">
+           <widget class="QPushButton" name="CruiseResume">
             <property name="font">
              <font>
               <weight>75</weight>
@@ -247,7 +260,7 @@ QPushButton:checked {
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/icons/feather/plus.svg</normaloff>:/icons/feather/plus.svg</iconset>
+              <normaloff>:/Carbon_Icons/carbon_icons/add--alt.svg</normaloff>:/Carbon_Icons/carbon_icons/add--alt.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -258,13 +271,13 @@ QPushButton:checked {
            </widget>
           </item>
           <item row="1" column="1">
-           <widget class="QPushButton" name="CruiseEnableBtn">
+           <widget class="QPushButton" name="CruiseEnable">
             <property name="text">
              <string/>
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/Images/Images/cruise.png</normaloff>:/Images/Images/cruise.png</iconset>
+              <normaloff>:/Images/Images/AGL_Icons_CruiseControl_white.svg</normaloff>:/Images/Images/AGL_Icons_CruiseControl_white.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -275,7 +288,7 @@ QPushButton:checked {
            </widget>
           </item>
           <item row="1" column="2">
-           <widget class="QPushButton" name="CruiseCancelBtn">
+           <widget class="QPushButton" name="CruiseCancel">
             <property name="font">
              <font>
               <weight>75</weight>
@@ -288,7 +301,7 @@ QPushButton:checked {
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/icons/feather/x-square.svg</normaloff>:/icons/feather/x-square.svg</iconset>
+              <normaloff>:/Carbon_Icons/carbon_icons/misuse--outline.svg</normaloff>:/Carbon_Icons/carbon_icons/misuse--outline.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -320,7 +333,7 @@ QPushButton:checked {
       </layout>
      </widget>
     </item>
-    <item row="1" column="0" rowspan="4">
+    <item row="2" column="0" rowspan="4">
      <spacer name="horizontalSpacer">
       <property name="orientation">
        <enum>Qt::Horizontal</enum>
@@ -333,33 +346,7 @@ QPushButton:checked {
       </property>
      </spacer>
     </item>
-    <item row="5" column="0" colspan="6">
-     <spacer name="verticalSpacer_4">
-      <property name="orientation">
-       <enum>Qt::Vertical</enum>
-      </property>
-      <property name="sizeHint" stdset="0">
-       <size>
-        <width>20</width>
-        <height>40</height>
-       </size>
-      </property>
-     </spacer>
-    </item>
-    <item row="1" column="5" rowspan="4">
-     <spacer name="horizontalSpacer_2">
-      <property name="orientation">
-       <enum>Qt::Horizontal</enum>
-      </property>
-      <property name="sizeHint" stdset="0">
-       <size>
-        <width>40</width>
-        <height>20</height>
-       </size>
-      </property>
-     </spacer>
-    </item>
-    <item row="4" column="2">
+    <item row="5" column="2">
      <widget class="QFrame" name="ExtraControls">
       <property name="frameShape">
        <enum>QFrame::StyledPanel</enum>
@@ -369,13 +356,13 @@ QPushButton:checked {
       </property>
       <layout class="QHBoxLayout" name="horizontalLayout_2">
        <item>
-        <widget class="QPushButton" name="PhoneCallBtn">
+        <widget class="QPushButton" name="PhoneCall">
          <property name="text">
           <string/>
          </property>
          <property name="icon">
           <iconset resource="../assets/res.qrc">
-           <normaloff>:/icons/feather/phone-call.svg</normaloff>:/icons/feather/phone-call.svg</iconset>
+           <normaloff>:/Carbon_Icons/carbon_icons/phone--filled.svg</normaloff>:/Carbon_Icons/carbon_icons/phone--filled.svg</iconset>
          </property>
          <property name="iconSize">
           <size>
@@ -386,13 +373,13 @@ QPushButton:checked {
         </widget>
        </item>
        <item>
-        <widget class="QPushButton" name="PhoneHangupBtn">
+        <widget class="QPushButton" name="PhoneHangup">
          <property name="text">
           <string/>
          </property>
          <property name="icon">
           <iconset resource="../assets/res.qrc">
-           <normaloff>:/icons/feather/phone-missed.svg</normaloff>:/icons/feather/phone-missed.svg</iconset>
+           <normaloff>:/Carbon_Icons/carbon_icons/phone--off--filled.svg</normaloff>:/Carbon_Icons/carbon_icons/phone--off--filled.svg</iconset>
          </property>
          <property name="iconSize">
           <size>
@@ -403,13 +390,13 @@ QPushButton:checked {
         </widget>
        </item>
        <item>
-        <widget class="QPushButton" name="VoiceBtn">
+        <widget class="QPushButton" name="Voice">
          <property name="text">
           <string/>
          </property>
          <property name="icon">
           <iconset resource="../assets/res.qrc">
-           <normaloff>:/Images/Images/voice.svg</normaloff>:/Images/Images/voice.svg</iconset>
+           <normaloff>:/Carbon_Icons/carbon_icons/voice.svg</normaloff>:/Carbon_Icons/carbon_icons/voice.svg</iconset>
          </property>
          <property name="iconSize">
           <size>
@@ -420,13 +407,13 @@ QPushButton:checked {
         </widget>
        </item>
        <item>
-        <widget class="QPushButton" name="LaneDepartureBtn">
+        <widget class="QPushButton" name="LaneDeparture">
          <property name="text">
           <string/>
          </property>
          <property name="icon">
           <iconset resource="../assets/res.qrc">
-           <normaloff>:/Images/Images/lane.png</normaloff>:/Images/Images/lane.png</iconset>
+           <normaloff>:/Images/Images/AGL_Icons_LaneDeparture_white.svg</normaloff>:/Images/Images/AGL_Icons_LaneDeparture_white.svg</iconset>
          </property>
          <property name="iconSize">
           <size>
@@ -439,7 +426,20 @@ QPushButton:checked {
       </layout>
      </widget>
     </item>
-    <item row="1" column="1" rowspan="4" alignment="Qt::AlignVCenter">
+    <item row="1" column="1" colspan="4">
+     <spacer name="verticalSpacer_3">
+      <property name="orientation">
+       <enum>Qt::Vertical</enum>
+      </property>
+      <property name="sizeHint" stdset="0">
+       <size>
+        <width>20</width>
+        <height>40</height>
+       </size>
+      </property>
+     </spacer>
+    </item>
+    <item row="2" column="1" rowspan="4" alignment="Qt::AlignVCenter">
      <widget class="QFrame" name="LeftControls">
       <property name="frameShape">
        <enum>QFrame::StyledPanel</enum>
@@ -464,13 +464,13 @@ QPushButton:checked {
          </property>
          <layout class="QGridLayout" name="gridLayout_3">
           <item row="0" column="0" colspan="3">
-           <widget class="QPushButton" name="VolUpBtn">
+           <widget class="QPushButton" name="VolumeUp">
             <property name="text">
              <string/>
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/icons/feather/volume-2.svg</normaloff>:/icons/feather/volume-2.svg</iconset>
+              <normaloff>:/Carbon_Icons/carbon_icons/volume--up--filled--alt.svg</normaloff>:/Carbon_Icons/carbon_icons/volume--up--filled--alt.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -481,13 +481,13 @@ QPushButton:checked {
            </widget>
           </item>
           <item row="1" column="0">
-           <widget class="QPushButton" name="PrevTrackBtn">
+           <widget class="QPushButton" name="PreviousTrack">
             <property name="text">
              <string/>
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/icons/feather/skip-back.svg</normaloff>:/icons/feather/skip-back.svg</iconset>
+              <normaloff>:/Carbon_Icons/carbon_icons/skip--back--filled.svg</normaloff>:/Carbon_Icons/carbon_icons/skip--back--filled.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -498,7 +498,7 @@ QPushButton:checked {
            </widget>
           </item>
           <item row="1" column="1">
-           <widget class="QPushButton" name="ModeBtn">
+           <widget class="QPushButton" name="Mode">
             <property name="minimumSize">
              <size>
               <width>0</width>
@@ -524,13 +524,13 @@ QPushButton:checked {
            </widget>
           </item>
           <item row="1" column="2">
-           <widget class="QPushButton" name="NextTrackBtn">
+           <widget class="QPushButton" name="NextTrack">
             <property name="text">
              <string/>
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/icons/feather/skip-forward.svg</normaloff>:/icons/feather/skip-forward.svg</iconset>
+              <normaloff>:/Carbon_Icons/carbon_icons/skip--forward--filled.svg</normaloff>:/Carbon_Icons/carbon_icons/skip--forward--filled.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -541,13 +541,13 @@ QPushButton:checked {
            </widget>
           </item>
           <item row="2" column="0" colspan="3">
-           <widget class="QPushButton" name="VolDownBtn">
+           <widget class="QPushButton" name="VolumeDown">
             <property name="text">
              <string/>
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/icons/feather/volume-1.svg</normaloff>:/icons/feather/volume-1.svg</iconset>
+              <normaloff>:/Carbon_Icons/carbon_icons/volume--down--filled--alt.svg</normaloff>:/Carbon_Icons/carbon_icons/volume--down--filled--alt.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -586,13 +586,13 @@ QPushButton:checked {
          </property>
          <layout class="QHBoxLayout" name="horizontalLayout">
           <item>
-           <widget class="QPushButton" name="InfoBtn">
+           <widget class="QPushButton" name="Info">
             <property name="text">
              <string/>
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/icons/feather/info.svg</normaloff>:/icons/feather/info.svg</iconset>
+              <normaloff>:/Carbon_Icons/carbon_icons/information.svg</normaloff>:/Carbon_Icons/carbon_icons/information.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -603,13 +603,13 @@ QPushButton:checked {
            </widget>
           </item>
           <item>
-           <widget class="QPushButton" name="VolMuteBtn">
+           <widget class="QPushButton" name="VolumeMute">
             <property name="text">
              <string/>
             </property>
             <property name="icon">
              <iconset resource="../assets/res.qrc">
-              <normaloff>:/icons/feather/volume-x.svg</normaloff>:/icons/feather/volume-x.svg</iconset>
+              <normaloff>:/Carbon_Icons/carbon_icons/volume--mute--filled.svg</normaloff>:/Carbon_Icons/carbon_icons/volume--mute--filled.svg</iconset>
             </property>
             <property name="iconSize">
              <size>
@@ -625,8 +625,8 @@ QPushButton:checked {
       </layout>
      </widget>
     </item>
-    <item row="0" column="1" colspan="4">
-     <spacer name="verticalSpacer_3">
+    <item row="6" column="0" colspan="6">
+     <spacer name="verticalSpacer_4">
       <property name="orientation">
        <enum>Qt::Vertical</enum>
       </property>
@@ -638,6 +638,17 @@ QPushButton:checked {
       </property>
      </spacer>
     </item>
+    <item row="0" column="0" colspan="6">
+     <widget class="QWidget" name="Header" native="true">
+      <property name="minimumSize">
+       <size>
+        <width>0</width>
+        <height>70</height>
+       </size>
+      </property>
+      <layout class="QHBoxLayout" name="horizontalLayout_4"/>
+     </widget>
+    </item>
    </layout>
   </widget>
  </widget>