diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css b/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css
new file mode 100644
index 0000000..e99f514
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css
@@ -0,0 +1,24 @@
+.container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.container p {
+  font-size: 16px;
+  line-height: 22px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+.container a {
+  text-decoration: none;
+}
\ No newline at end of file
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx
new file mode 100644
index 0000000..093861b
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx
@@ -0,0 +1,12 @@
+import './ExploreContainer.css';
+
+const ExploreContainer = ({ name }) => {
+  return (
+    <div className="container">
+      <strong>{name}</strong>
+      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+    </div>
+  );
+};
+
+export default ExploreContainer;
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/index.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/index.tsx
index 8509111..4408f97 100644
--- a/03_source/mobile/src/pages/DemoFloatingTabs/index.tsx
+++ b/03_source/mobile/src/pages/DemoFloatingTabs/index.tsx
@@ -1,29 +1,45 @@
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
+import { cloudOutline, cogOutline, homeOutline, listOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
+
+import Tab1 from './pages/Tab1';
+import Tab2 from './pages/Tab2';
+import Tab3 from './pages/Tab3';
 
 import './style.scss';
+import './theme/floating-tab-bar.css';
 
 function DemoFloatingTabs() {
   return (
     <IonTabs>
       <IonRouterOutlet>
+        {/*
         <Route exact path="/demo-floating-tabs/tab1">
           <Tab1 />
         </Route>
         <Route exact path="/demo-floating-tabs/tab2">
           <Tab2 />
         </Route>
-
+        */}
+        <Route exact path="/demo-floating-tabs/tab1">
+          <Tab1 />
+        </Route>
+        <Route exact path="/demo-floating-tabs/tab2">
+          <Tab2 />
+        </Route>
+        <Route path="/demo-floating-tabs/tab3">
+          <Tab3 />
+        </Route>
         <Redirect exact path="/demo-floating-tabs" to="/demo-floating-tabs/tab1" />
       </IonRouterOutlet>
 
       {/*  */}
       <IonTabBar slot="bottom">
+        {/*
         <IonTabButton tab="tab1" href="/demo-floating-tabs/tab1">
           <IonIcon icon={cloudOutline} />
           <IonLabel>Dashboard</IonLabel>
@@ -32,6 +48,20 @@ function DemoFloatingTabs() {
           <IonIcon icon={searchOutline} />
           <IonLabel>Search</IonLabel>
         </IonTabButton>
+         */}
+        {/*  */}
+        <IonTabButton tab="tab1" href="/demo-floating-tabs/tab1">
+          <IonIcon icon={homeOutline} />
+          {/* <IonLabel>Tab 1</IonLabel> */}
+        </IonTabButton>
+        <IonTabButton tab="tab2" href="/demo-floating-tabs/tab2">
+          <IonIcon icon={listOutline} />
+          {/* <IonLabel>Tab 2</IonLabel> */}
+        </IonTabButton>
+        <IonTabButton tab="tab3" href="/demo-floating-tabs/tab3">
+          <IonIcon icon={cogOutline} />
+          {/* <IonLabel>Tab 3</IonLabel> */}
+        </IonTabButton>{' '}
       </IonTabBar>
     </IonTabs>
   );
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.css b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.css
new file mode 100644
index 0000000..e69de29
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx
new file mode 100644
index 0000000..ef9aa18
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx
@@ -0,0 +1,26 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Tab1.css';
+import React from 'react';
+
+const Tab1 = (): React.JSX.Element => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Floating Tab Bar</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Floating Tab Bar</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ExploreContainer name="Tab 1 page" />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab1;
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.css b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.css
new file mode 100644
index 0000000..e69de29
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.tsx
new file mode 100644
index 0000000..048ff80
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.tsx
@@ -0,0 +1,25 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Tab2.css';
+
+const Tab2 = (): React.JSX.Element => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Floating Tab Bar</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Floating Tab Bar</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ExploreContainer name="Tab 2 page" />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab2;
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.css b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.css
new file mode 100644
index 0000000..e69de29
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.tsx
new file mode 100644
index 0000000..54cfd9e
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.tsx
@@ -0,0 +1,25 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import ExploreContainer from '../components/ExploreContainer';
+import './Tab3.css';
+
+const Tab3 = (): React.JSX.Element => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Floating Tab Bar</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Floating Tab Bar</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ExploreContainer name="Tab 3 page" />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab3;
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/style.scss b/03_source/mobile/src/pages/DemoFloatingTabs/style.scss
index 37c1e1a..d202499 100644
--- a/03_source/mobile/src/pages/DemoFloatingTabs/style.scss
+++ b/03_source/mobile/src/pages/DemoFloatingTabs/style.scss
@@ -1,103 +1,82 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
+/*
+Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/
+*/
 
-    top: 0;
-    left: 0;
-    right: 0;
+/** Ionic CSS Variables **/
 
-    --background: transparent;
-    --color: white;
-  }
+.floating-tab-bar {
+  * {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
 
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
 
-  .about-header {
-    position: relative;
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
 
-    width: 100%;
-    height: 30%;
-  }
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
 
-  .about-header .about-image {
-    position: absolute;
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
 
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
 
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
 
-    opacity: 0;
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
 
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
   }
 }
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.css b/03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.css
new file mode 100644
index 0000000..2c3e05e
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.css
@@ -0,0 +1,25 @@
+:root {
+  --ion-background-color: white;
+  --ion-tab-bar-color: rgb(92, 123, 207);
+  --ion-tab-bar-color-selected: rgb(255, 255, 255);
+}
+
+ion-tab-bar {
+  --background: rgb(44, 83, 192);
+  box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.4);
+  border-radius: 16px !important;
+
+  height: 50px;
+  width: 90%;
+  padding-top: 5px;
+  padding-bottom: 5px;
+
+  bottom: 20px;
+  position: relative;
+  margin: 0 auto !important;
+  border-top: none;
+}
+
+ion-tab-button {
+  border-radius: 16px !important;
+}
diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/theme/variables.css b/03_source/mobile/src/pages/DemoFloatingTabs/theme/variables.css
new file mode 100644
index 0000000..088e83c
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoFloatingTabs/theme/variables.css
@@ -0,0 +1,77 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
\ No newline at end of file