diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/CurrentWeather/WeatherProperty.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/TestComponents/CurrentWeather/WeatherProperty.tsx
similarity index 100%
rename from 03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/CurrentWeather/WeatherProperty.tsx
rename to 03_source/mobile/src/pages/DemoStickyBottomSheetExample/TestComponents/CurrentWeather/WeatherProperty.tsx
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/CurrentWeather/index.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/TestComponents/CurrentWeather/index.tsx
similarity index 100%
rename from 03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/CurrentWeather/index.tsx
rename to 03_source/mobile/src/pages/DemoStickyBottomSheetExample/TestComponents/CurrentWeather/index.tsx
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/SkeletonDashboard/index.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/TestComponents/SkeletonDashboard/index.tsx
similarity index 100%
rename from 03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/SkeletonDashboard/index.tsx
rename to 03_source/mobile/src/pages/DemoStickyBottomSheetExample/TestComponents/SkeletonDashboard/index.tsx
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/BottomSheet.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/BottomSheet.tsx
new file mode 100644
index 0000000..082aa06
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/BottomSheet.tsx
@@ -0,0 +1,49 @@
+import { IonCol, IonGrid, IonModal, IonRow, IonSearchbar } from "@ionic/react";
+import { OverlayEventDetail } from "@ionic/react/dist/types/components/react-component-lib/interfaces";
+import { useState } from "react";
+import { BottomSheetContent } from "./BottomSheetContent";
+import { DummyItem } from "./DummyItem";
+
+interface BottomSheetProps {
+
+    isOpen: boolean,
+    close: (event: CustomEvent<OverlayEventDetail<any>>) => void
+}
+
+export const BottomSheet: React.FC<BottomSheetProps> = ({ isOpen, close }) => {
+
+  const amountOfDummyItems = 10;
+  const [search, setSearch] = useState<string>("")
+
+  const handleChange = (e:any)=> {
+    setSearch(e.target.value);
+  }
+
+  return (
+
+    <IonModal isOpen={isOpen} onDidDismiss={close} breakpoints={[0, 0.12, 0.5, 1]} initialBreakpoint={0.12} backdropBreakpoint={0.5}>
+      <IonGrid className="ion-padding-top">
+        <IonRow>
+          <IonCol size="12">
+            <IonSearchbar animated value={search} onIonChange={handleChange} placeholder="Search by item number" />
+          </IonCol>
+        </IonRow>
+
+        {/* Check the comments insside BottomSheetContent component */}
+        {/* Regarding the scrolling of "content" inside a sheet modal */}
+        <BottomSheetContent>
+          { [...Array(amountOfDummyItems)].map((e, i) => {
+            
+            if (search.includes(i.toString()) || search === "") {
+              return (
+                <DummyItem key={i} number={i} />
+              );
+            } else {
+              return "";
+            }
+          })}
+        </BottomSheetContent>
+      </IonGrid>
+    </IonModal>
+  );
+}
\ No newline at end of file
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/BottomSheetContent.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/BottomSheetContent.tsx
new file mode 100644
index 0000000..a1c263c
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/BottomSheetContent.tsx
@@ -0,0 +1,19 @@
+export const BottomSheetContent: React.FC = ({ children }) => {
+
+  return (
+    
+    //  Some work needed for inner content of a sheet-modal
+    //  Scroll is a bit buggy when sheet is full height
+    //  Scroll the content down, then try and scroll up
+
+    //  Maybe some functionality needed on the Sheet Modal component to keep track of inner content scroll position and only interact with modal if scroll position of inner content is back to top OR if only interacting with the modal container (edges, top, etc)
+
+    //  Applied this CSS just to make it work 50% of the way to test
+    <div style={{
+        overflow: "scroll",
+        height: "100vh"
+    }}>
+      { children }
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/DummyItem.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/DummyItem.tsx
new file mode 100644
index 0000000..0f62527
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/DummyItem.tsx
@@ -0,0 +1,20 @@
+import { IonCard, IonCardContent, IonLabel } from "@ionic/react";
+
+interface DummyItemProps {
+
+  number: number,
+}
+
+export const DummyItem: React.FC<DummyItemProps> = ({ number }) => {
+
+  return (
+    <IonCard>
+      <IonCardContent>
+        <IonLabel>
+          <h2>Item number {number}</h2>
+          <p>This is a dummy item</p>
+        </IonLabel>
+      </IonCardContent>
+    </IonCard>
+  );
+}
\ No newline at end of file
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/index.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/index.tsx
index 82337e3..c0857ff 100644
--- a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/index.tsx
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/index.tsx
@@ -3,32 +3,31 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
 import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
+import './theme/variables.scss';
+import Home from './pages/Home';
 
 function DemoStickyBottomSheetExample() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-sticky-bottom-sheet-example">
       <IonRouterOutlet>
-        <Route exact path="/demo-weather-app/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-weather-app/tab2">
-          <Tab2 />
+        <Route exact path="/demo-sticky-bottom-sheet-example/home">
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" />
+        <Redirect
+          exact
+          path="/demo-sticky-bottom-sheet-example"
+          to="/demo-sticky-bottom-sheet-example/home"
+        />
       </IonRouterOutlet>
 
       {/*  */}
       <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-weather-app/tab1">
+        <IonTabButton tab="tab1" href="/demo-sticky-bottom-sheet-example/tab1">
           <IonIcon icon={cloudOutline} />
           <IonLabel>Dashboard</IonLabel>
         </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-weather-app/tab2">
+        <IonTabButton tab="tab2" href="/demo-sticky-bottom-sheet-example/tab2">
           <IonIcon icon={searchOutline} />
           <IonLabel>Search</IonLabel>
         </IonTabButton>
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.scss b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.scss
new file mode 100644
index 0000000..e69de29
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.tsx
new file mode 100644
index 0000000..4974f2f
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.tsx
@@ -0,0 +1,66 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { useState } from 'react';
+import { BottomSheet } from '../components/BottomSheet';
+import './Home.scss';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Home: React.FC = () => {
+  const [showBottomSheet, setShowBottomSheet] = useState<boolean>(true);
+
+  const handleClose = () => {
+    setShowBottomSheet(false);
+    setTimeout(() => {
+      setShowBottomSheet(true);
+    }, 10);
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Ionic Sticky Bottom Sheet</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton shape="round" onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large" className="ion-text-wrap">
+              Sticky Bottom Sheet
+            </IonTitle>
+
+            <IonButtons slot="start">
+              <IonButton shape="round" onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        <BottomSheet isOpen={showBottomSheet} close={handleClose} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/style.scss b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/style.scss
index 37c1e1a..e69de29 100644
--- a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/style.scss
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/style.scss
@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    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;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/theme/variables.scss b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/theme/variables.scss
new file mode 100644
index 0000000..e55b962
--- /dev/null
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/theme/variables.scss
@@ -0,0 +1,237 @@
+.demo-sticky-bottom-sheet-example {
+  /* 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;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+    body {
+      --ion-color-primary: #428cff;
+      --ion-color-primary-rgb: 66, 140, 255;
+      --ion-color-primary-contrast: #ffffff;
+      --ion-color-primary-contrast-rgb: 255, 255, 255;
+      --ion-color-primary-shade: #3a7be0;
+      --ion-color-primary-tint: #5598ff;
+
+      --ion-color-secondary: #50c8ff;
+      --ion-color-secondary-rgb: 80, 200, 255;
+      --ion-color-secondary-contrast: #ffffff;
+      --ion-color-secondary-contrast-rgb: 255, 255, 255;
+      --ion-color-secondary-shade: #46b0e0;
+      --ion-color-secondary-tint: #62ceff;
+
+      --ion-color-tertiary: #6a64ff;
+      --ion-color-tertiary-rgb: 106, 100, 255;
+      --ion-color-tertiary-contrast: #ffffff;
+      --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+      --ion-color-tertiary-shade: #5d58e0;
+      --ion-color-tertiary-tint: #7974ff;
+
+      --ion-color-success: #2fdf75;
+      --ion-color-success-rgb: 47, 223, 117;
+      --ion-color-success-contrast: #000000;
+      --ion-color-success-contrast-rgb: 0, 0, 0;
+      --ion-color-success-shade: #29c467;
+      --ion-color-success-tint: #44e283;
+
+      --ion-color-warning: #ffd534;
+      --ion-color-warning-rgb: 255, 213, 52;
+      --ion-color-warning-contrast: #000000;
+      --ion-color-warning-contrast-rgb: 0, 0, 0;
+      --ion-color-warning-shade: #e0bb2e;
+      --ion-color-warning-tint: #ffd948;
+
+      --ion-color-danger: #ff4961;
+      --ion-color-danger-rgb: 255, 73, 97;
+      --ion-color-danger-contrast: #ffffff;
+      --ion-color-danger-contrast-rgb: 255, 255, 255;
+      --ion-color-danger-shade: #e04055;
+      --ion-color-danger-tint: #ff5b71;
+
+      --ion-color-dark: #f4f5f8;
+      --ion-color-dark-rgb: 244, 245, 248;
+      --ion-color-dark-contrast: #000000;
+      --ion-color-dark-contrast-rgb: 0, 0, 0;
+      --ion-color-dark-shade: #d7d8da;
+      --ion-color-dark-tint: #f5f6f9;
+
+      --ion-color-medium: #989aa2;
+      --ion-color-medium-rgb: 152, 154, 162;
+      --ion-color-medium-contrast: #000000;
+      --ion-color-medium-contrast-rgb: 0, 0, 0;
+      --ion-color-medium-shade: #86888f;
+      --ion-color-medium-tint: #a2a4ab;
+
+      --ion-color-light: #222428;
+      --ion-color-light-rgb: 34, 36, 40;
+      --ion-color-light-contrast: #ffffff;
+      --ion-color-light-contrast-rgb: 255, 255, 255;
+      --ion-color-light-shade: #1e2023;
+      --ion-color-light-tint: #383a3e;
+    }
+
+    /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+    .ios body {
+      --ion-background-color: #000000;
+      --ion-background-color-rgb: 0, 0, 0;
+
+      --ion-text-color: #ffffff;
+      --ion-text-color-rgb: 255, 255, 255;
+
+      --ion-color-step-50: #0d0d0d;
+      --ion-color-step-100: #1a1a1a;
+      --ion-color-step-150: #262626;
+      --ion-color-step-200: #333333;
+      --ion-color-step-250: #404040;
+      --ion-color-step-300: #4d4d4d;
+      --ion-color-step-350: #595959;
+      --ion-color-step-400: #666666;
+      --ion-color-step-450: #737373;
+      --ion-color-step-500: #808080;
+      --ion-color-step-550: #8c8c8c;
+      --ion-color-step-600: #999999;
+      --ion-color-step-650: #a6a6a6;
+      --ion-color-step-700: #b3b3b3;
+      --ion-color-step-750: #bfbfbf;
+      --ion-color-step-800: #cccccc;
+      --ion-color-step-850: #d9d9d9;
+      --ion-color-step-900: #e6e6e6;
+      --ion-color-step-950: #f2f2f2;
+
+      --ion-item-background: #000000;
+
+      --ion-card-background: #1c1c1d;
+    }
+
+    .ios ion-modal {
+      --ion-background-color: var(--ion-color-step-100);
+      --ion-toolbar-background: var(--ion-color-step-150);
+      --ion-toolbar-border-color: var(--ion-color-step-250);
+    }
+
+    /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+    .md body {
+      --ion-background-color: #121212;
+      --ion-background-color-rgb: 18, 18, 18;
+
+      --ion-text-color: #ffffff;
+      --ion-text-color-rgb: 255, 255, 255;
+
+      --ion-border-color: #222222;
+
+      --ion-color-step-50: #1e1e1e;
+      --ion-color-step-100: #2a2a2a;
+      --ion-color-step-150: #363636;
+      --ion-color-step-200: #414141;
+      --ion-color-step-250: #4d4d4d;
+      --ion-color-step-300: #595959;
+      --ion-color-step-350: #656565;
+      --ion-color-step-400: #717171;
+      --ion-color-step-450: #7d7d7d;
+      --ion-color-step-500: #898989;
+      --ion-color-step-550: #949494;
+      --ion-color-step-600: #a0a0a0;
+      --ion-color-step-650: #acacac;
+      --ion-color-step-700: #b8b8b8;
+      --ion-color-step-750: #c4c4c4;
+      --ion-color-step-800: #d0d0d0;
+      --ion-color-step-850: #dbdbdb;
+      --ion-color-step-900: #e7e7e7;
+      --ion-color-step-950: #f3f3f3;
+
+      --ion-item-background: #1e1e1e;
+
+      --ion-toolbar-background: #1f1f1f;
+
+      --ion-tab-bar-background: #1f1f1f;
+
+      --ion-card-background: #1e1e1e;
+    }
+  }
+}