diff --git a/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx b/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx
index ecf33a2ce..4667baa84 100644
--- a/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx
+++ b/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx
@@ -1,9 +1,10 @@
 import type { ThemeMode, VuuUser } from "@finos/vuu-utils";
 import { createContext } from "react";
+import { SettingsSchema } from "../application-settings/SettingsForm";
 
-export interface CoreSettings {
-  themeMode: ThemeMode;
-}
+// export interface CoreSettings {
+//   themeMode: ThemeMode;
+// }
 
 const Guest: VuuUser = {
   username: "unknown",
@@ -11,18 +12,57 @@ const Guest: VuuUser = {
 };
 
 export interface ApplicationContextProps {
-  changeSetting: (propertyName: string, value: unknown) => void;
-  settings: CoreSettings;
+  onApplicationSettingChanged: (propertyName: string, value: unknown) => void;
+  applicationSettings: Record<string, string | number | boolean>;
+  applicationSettingsSchema: SettingsSchema;
   user: VuuUser;
 }
 
 export const ApplicationContext = createContext<ApplicationContextProps>({
-  changeSetting: (propertyName: string) =>
+  onApplicationSettingChanged: (propertyName: string) =>
     console.log(
       `Cannot change setting '${propertyName}'.\nDid you forget to declare an ApplicationProvider ?`
     ),
-  settings: {
+  applicationSettings: {
     themeMode: "light",
+    dateFormatPattern: "dd MMMM yyyy",
+    region: "apac",
+    greyscale: false,
+  },
+  applicationSettingsSchema: {
+    properties: [
+      {
+        name: "themeMode",
+        label: "Mode",
+        values: ["light", "dark"],
+        defaultValue: "light",
+        type: "string",
+      },
+      {
+        name: "dateFormatPattern",
+        label: "Date Formatting",
+        values: ["dd/mm/yyyy", "mm/dd/yyyy", "dd MMMM yyyy"],
+        defaultValue: "dd/mm/yyyy",
+        type: "string",
+      },
+      {
+        name: "region",
+        label: "Region",
+        values: [
+          { value: "us", label: "US" },
+          { value: "apac", label: "Asia Pacific" },
+          { value: "emea", label: "Europe, Middle East & Africa" },
+        ],
+        defaultValue: "apac",
+        type: "string",
+      },
+      {
+        name: "greyscale",
+        label: "Greyscale",
+        defaultValue: false,
+        type: "boolean",
+      },
+    ],
   },
   user: Guest,
 });
diff --git a/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationProvider.tsx b/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationProvider.tsx
index 33281ad1b..6b8bebebb 100644
--- a/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationProvider.tsx
+++ b/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationProvider.tsx
@@ -18,26 +18,37 @@ export interface ApplicationProviderProps
 
 export const ApplicationProvider = ({
   children,
-  settings: settingsProp,
+  applicationSettings: settingsProp,
+  applicationSettingsSchema,
   user,
 }: ApplicationProviderProps): ReactElement => {
   const context = useContext(ApplicationContext);
-  const [settings, setSettings] = useState(settingsProp ?? context.settings);
+  const [applicationSettings, setSettings] = useState(
+    settingsProp ?? context.applicationSettings
+  );
 
-  const changeSetting = useCallback((propertyName: string, value: unknown) => {
-    setSettings((s) => ({ ...s, [propertyName]: value }));
-  }, []);
+  const onApplicationSettingChanged = useCallback(
+    (propertyName: string, value: unknown) => {
+      setSettings((s) => ({ ...s, [propertyName]: value }));
+    },
+    []
+  );
 
   return (
     <ApplicationContext.Provider
       value={{
         ...context,
-        changeSetting,
-        settings,
+        onApplicationSettingChanged,
+        applicationSettings,
+        applicationSettingsSchema,
         user: user ?? context.user,
       }}
     >
-      <SaltProvider theme="vuu-theme" density="high" mode={settings.themeMode}>
+      <SaltProvider
+        theme="vuu-theme"
+        density="high"
+        mode={applicationSettings.themeMode}
+      >
         {children}
       </SaltProvider>
     </ApplicationContext.Provider>
@@ -49,7 +60,22 @@ export const useApplicationUser = () => {
   return user;
 };
 
+//Setter method (only used within the shell)
 export const useApplicationSettings = () => {
-  const { changeSetting, settings } = useContext(ApplicationContext);
-  return { changeSetting, settings };
+  const {
+    onApplicationSettingChanged,
+    applicationSettings,
+    applicationSettingsSchema,
+  } = useContext(ApplicationContext);
+  return {
+    onApplicationSettingChanged,
+    applicationSettings,
+    applicationSettingsSchema,
+  };
+};
+
+//Getter method (read only access to applicationSetting)
+export const useApplicationSetting = () => {
+  const { applicationSettings } = useContext(ApplicationContext);
+  return { applicationSettings };
 };
diff --git a/vuu-ui/packages/vuu-shell/src/application-settings/ApplicationSettingsPanel.tsx b/vuu-ui/packages/vuu-shell/src/application-settings/ApplicationSettingsPanel.tsx
index ceff7138f..5122df23b 100644
--- a/vuu-ui/packages/vuu-shell/src/application-settings/ApplicationSettingsPanel.tsx
+++ b/vuu-ui/packages/vuu-shell/src/application-settings/ApplicationSettingsPanel.tsx
@@ -1,211 +1,28 @@
-import { queryClosest } from "@finos/vuu-utils";
-import {
-  Dropdown,
-  DropdownProps,
-  FormField,
-  FormFieldLabel,
-  Input,
-  Option,
-  Switch,
-  ToggleButton,
-  ToggleButtonGroup,
-  ToggleButtonGroupProps,
-} from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import {
-  FormEventHandler,
-  HTMLAttributes,
-  SyntheticEvent,
-  useCallback,
-} from "react";
+import { HTMLAttributes } from "react";
+import { SettingsForm, SettingsSchema } from "./SettingsForm";
 
 import applicationSettingsPanelCss from "./ApplicationSettingsPanel.css";
-
-export type Option<T> = { label: string; value: T };
-// Schema type definitions
-export const isOption = (
-  value: Option<number | string> | number | string
-): value is Option<number | string> =>
-  typeof value === "object" && "label" in value && "label" in value;
-
-export interface BaseProperty {
-  name: string;
-  label: string;
-}
-
-export interface StringProperty extends BaseProperty {
-  values?: string[] | Option<string>[];
-  defaultValue?: string;
-  type: "string";
-}
-export interface NumericProperty extends BaseProperty {
-  values?: number[] | Option<number>[];
-  defaultValue?: number;
-  type: "number";
-}
-export interface BooleanProperty extends BaseProperty {
-  defaultValue?: boolean;
-  type: "boolean";
-}
-
-export type SettingsProperty =
-  | StringProperty
-  | NumericProperty
-  | BooleanProperty;
-
-export const isBooleanProperty = (
-  property: SettingsProperty
-): property is BooleanProperty => property.type === "boolean";
-
-export const isStringOrNumber = (value: unknown): value is string | number =>
-  typeof value === "string" || typeof value === "number";
-
-export interface SettingsSchema {
-  properties: SettingsProperty[];
-}
-
-const getValueAndLabel = (value: string | number | Option<string | number>) =>
-  isOption(value) ? [value.value, value.label] : [value, value];
-
-// Determine the form control type to be displayed
-export function getFormControl(
-  property: SettingsProperty,
-  changeHandler: FormEventHandler,
-  selectHandler: DropdownProps["onSelectionChange"],
-  currentValue?: string | boolean | number
-) {
-  if (isBooleanProperty(property)) {
-    const checked =
-      typeof currentValue === "boolean"
-        ? currentValue
-        : property.defaultValue ?? false;
-
-    return (
-      <Switch
-        checked={checked}
-        label={property.label}
-        onChange={changeHandler}
-      ></Switch>
-    );
-  }
-  // Toggle Box for 1 or 2 values
-  if (Array.isArray(property.values)) {
-    if (property.values.length <= 2) {
-      return (
-        <ToggleButtonGroup
-          value={currentValue as ToggleButtonGroupProps["value"]}
-          onChange={changeHandler}
-        >
-          {property.values.map((valueOrOption) => {
-            const [value, label] = getValueAndLabel(valueOrOption);
-            return (
-              <ToggleButton key={value} value={value}>
-                {label}
-              </ToggleButton>
-            );
-          })}
-        </ToggleButtonGroup>
-      );
-    } else if (property.values.length > 2) {
-      return (
-        <Dropdown
-          value={currentValue as DropdownProps["value"]}
-          onSelectionChange={selectHandler}
-        >
-          {property.values.map((valueOrOption) => {
-            const [value, label] = getValueAndLabel(valueOrOption);
-            return (
-              <Option value={value} key={value} data-field={property.name}>
-                {label}
-              </Option>
-            );
-          })}
-        </Dropdown>
-      );
-    }
-  } else {
-    const value = isStringOrNumber(currentValue)
-      ? currentValue
-      : isStringOrNumber(property.defaultValue)
-      ? property.defaultValue
-      : "";
-    return <Input value={value} />;
-  }
-}
+import { useApplicationSettings } from "../application-provider";
 
 // Props for Panel
 export interface ApplicatonSettingsPanelProps
-  extends HTMLAttributes<HTMLDivElement> {
-  applicationSettingsSchema: SettingsSchema;
-  applicationSettings: Record<string, string | number | boolean>;
-  onApplicationSettingChanged: (
-    propertyName: string,
-    value: string | number | boolean
-  ) => void;
-}
-
-// Generates application settings form component
-export const SettingsForm = ({
-  applicationSettingsSchema,
-  applicationSettings,
-  onApplicationSettingChanged,
-}: ApplicatonSettingsPanelProps) => {
-  const getFieldNameFromEventTarget = (evt: SyntheticEvent) => {
-    const fieldElement = queryClosest(evt.target, "[data-field]");
-    if (fieldElement && fieldElement.dataset.field) {
-      return fieldElement.dataset.field;
-    } else {
-      throw Error("data-field attribute not defined");
-    }
-  };
-
-  // Change Handler for toggle and input buttons
-  const changeHandler = useCallback<FormEventHandler>(
-    (event) => {
-      const fieldName = getFieldNameFromEventTarget(event);
-      const { checked, value } = event.target as HTMLInputElement;
-      onApplicationSettingChanged(fieldName, checked ?? value);
-    },
-    [onApplicationSettingChanged]
-  );
-
-  // Change handler for selection form controls
-  const selectHandler = useCallback(
-    (event: SyntheticEvent, [selected]: string[]) => {
-      const fieldName = getFieldNameFromEventTarget(event);
-      onApplicationSettingChanged(fieldName, selected);
-    },
-    [onApplicationSettingChanged]
-  );
-
-  return (
-    <div>
-      {applicationSettingsSchema.properties.map((property) => (
-        <FormField data-field={property.name} key={property.name}>
-          <FormFieldLabel>{property.label}</FormFieldLabel>
-          {getFormControl(
-            property,
-            changeHandler,
-            selectHandler,
-            applicationSettings[property.name]
-          )}
-        </FormField>
-      ))}
-    </div>
-  );
-};
+  extends HTMLAttributes<HTMLDivElement> {}
 
 const classBase = "vuuApplicationSettingsPanel";
 
 export const ApplicationSettingsPanel = ({
-  applicationSettingsSchema,
-  applicationSettings,
-  onApplicationSettingChanged,
   ...htmlAttributes
 }: ApplicatonSettingsPanelProps) => {
   const targetWindow = useWindow();
 
+  const {
+    onApplicationSettingChanged,
+    applicationSettings,
+    applicationSettingsSchema,
+  } = useApplicationSettings();
+
   useComponentCssInjection({
     testId: "vuu-application-settings-panel",
     css: applicationSettingsPanelCss,
@@ -222,5 +39,3 @@ export const ApplicationSettingsPanel = ({
     </div>
   );
 };
-
-export default ApplicationSettingsPanel;
diff --git a/vuu-ui/packages/vuu-shell/src/application-settings/SettingsForm.tsx b/vuu-ui/packages/vuu-shell/src/application-settings/SettingsForm.tsx
new file mode 100644
index 000000000..3e03aea75
--- /dev/null
+++ b/vuu-ui/packages/vuu-shell/src/application-settings/SettingsForm.tsx
@@ -0,0 +1,190 @@
+import { queryClosest } from "@finos/vuu-utils";
+import {
+  Dropdown,
+  DropdownProps,
+  FormField,
+  FormFieldLabel,
+  Input,
+  Option,
+  Switch,
+  ToggleButton,
+  ToggleButtonGroup,
+  ToggleButtonGroupProps,
+} from "@salt-ds/core";
+import {
+  FormEventHandler,
+  HTMLAttributes,
+  SyntheticEvent,
+  useCallback,
+} from "react";
+// import { ApplicatonSettingsPanelProps } from "./ApplicationSettingsPanel";
+
+//Props for Form
+export interface ApplicatonSettingsPanelProps
+  extends HTMLAttributes<HTMLDivElement> {
+  applicationSettingsSchema: SettingsSchema;
+  applicationSettings: Record<string, string | number | boolean>;
+  onApplicationSettingChanged: (
+    propertyName: string,
+    value: string | number | boolean
+  ) => void;
+}
+
+export type Option<T> = { label: string; value: T };
+// Schema type definitions
+export const isOption = (
+  value: Option<number | string> | number | string
+): value is Option<number | string> =>
+  typeof value === "object" && "label" in value && "label" in value;
+
+export interface BaseProperty {
+  name: string;
+  label: string;
+}
+
+export interface StringProperty extends BaseProperty {
+  values?: string[] | Option<string>[];
+  defaultValue?: string;
+  type: "string";
+}
+export interface NumericProperty extends BaseProperty {
+  values?: number[] | Option<number>[];
+  defaultValue?: number;
+  type: "number";
+}
+export interface BooleanProperty extends BaseProperty {
+  defaultValue?: boolean;
+  type: "boolean";
+}
+
+export type SettingsProperty =
+  | StringProperty
+  | NumericProperty
+  | BooleanProperty;
+
+export const isBooleanProperty = (
+  property: SettingsProperty
+): property is BooleanProperty => property.type === "boolean";
+
+export const isStringOrNumber = (value: unknown): value is string | number =>
+  typeof value === "string" || typeof value === "number";
+
+export interface SettingsSchema {
+  properties: SettingsProperty[];
+}
+
+const getValueAndLabel = (value: string | number | Option<string | number>) =>
+  isOption(value) ? [value.value, value.label] : [value, value];
+
+// Determine the form control type to be displayed
+export function getFormControl(
+  property: SettingsProperty,
+  changeHandler: FormEventHandler,
+  selectHandler: DropdownProps["onSelectionChange"],
+  currentValue?: string | boolean | number
+) {
+  if (isBooleanProperty(property)) {
+    const checked =
+      typeof currentValue === "boolean"
+        ? currentValue
+        : property.defaultValue ?? false;
+
+    return <Switch checked={checked} onChange={changeHandler}></Switch>;
+  }
+  // Toggle Box for 1 or 2 values
+  if (Array.isArray(property.values)) {
+    if (property.values.length <= 2) {
+      return (
+        <ToggleButtonGroup
+          value={currentValue as ToggleButtonGroupProps["value"]}
+          onChange={changeHandler}
+        >
+          {property.values.map((valueOrOption) => {
+            const [value, label] = getValueAndLabel(valueOrOption);
+            return (
+              <ToggleButton key={value} value={value}>
+                {label}
+              </ToggleButton>
+            );
+          })}
+        </ToggleButtonGroup>
+      );
+    } else if (property.values.length > 2) {
+      return (
+        <Dropdown
+          value={currentValue as DropdownProps["value"]}
+          onSelectionChange={selectHandler}
+        >
+          {property.values.map((valueOrOption) => {
+            const [value, label] = getValueAndLabel(valueOrOption);
+            return (
+              <Option
+                value={label}
+                key={value}
+                data-field={property.name}
+              ></Option>
+            );
+          })}
+        </Dropdown>
+      );
+    }
+  } else {
+    const value = isStringOrNumber(currentValue)
+      ? currentValue
+      : isStringOrNumber(property.defaultValue)
+      ? property.defaultValue
+      : "";
+    return <Input value={value} />;
+  }
+}
+
+// Generates application settings form component
+export const SettingsForm = ({
+  applicationSettingsSchema,
+  applicationSettings,
+  onApplicationSettingChanged,
+}: ApplicatonSettingsPanelProps) => {
+  const getFieldNameFromEventTarget = (evt: SyntheticEvent) => {
+    const fieldElement = queryClosest(evt.target, "[data-field]");
+    if (fieldElement && fieldElement.dataset.field) {
+      return fieldElement.dataset.field;
+    } else {
+      throw Error("data-field attribute not defined");
+    }
+  };
+
+  // Change Handler for toggle and input buttons
+  const changeHandler = useCallback<FormEventHandler>(
+    (event) => {
+      const fieldName = getFieldNameFromEventTarget(event);
+      const { checked, value } = event.target as HTMLInputElement;
+      onApplicationSettingChanged(fieldName, checked ?? value);
+    },
+    [onApplicationSettingChanged]
+  );
+
+  // Change handler for selection form controls
+  const selectHandler = useCallback(
+    (event: SyntheticEvent, [selected]: string[]) => {
+      const fieldName = getFieldNameFromEventTarget(event);
+      onApplicationSettingChanged(fieldName, selected);
+    },
+    [onApplicationSettingChanged]
+  );
+
+  return (
+    <div>
+      {applicationSettingsSchema.properties.map((property) => (
+        <FormField data-field={property.name} key={property.name}>
+          <FormFieldLabel>{property.label}</FormFieldLabel>
+          {getFormControl(
+            property,
+            changeHandler,
+            selectHandler,
+            applicationSettings[property.name]
+          )}
+        </FormField>
+      ))}
+    </div>
+  );
+};
diff --git a/vuu-ui/packages/vuu-shell/src/application-settings/applicationsettingsSchema.tsx b/vuu-ui/packages/vuu-shell/src/application-settings/applicationsettingsSchema.tsx
deleted file mode 100644
index 7004c68ff..000000000
--- a/vuu-ui/packages/vuu-shell/src/application-settings/applicationsettingsSchema.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { SettingsSchema } from "@finos/vuu-shell";
-
-export const applicationSettingsSchema: SettingsSchema = {
-  properties: [
-    {
-      name: "themeMode",
-      label: "Mode",
-      values: ["light", "dark"],
-      defaultValue: "light",
-      type: "string",
-    },
-    {
-      name: "dateFormatPattern",
-      label: "Date Formatting",
-      values: ["dd/mm/yyyy", "mm/dd/yyyy", "dd MMMM yyyy"],
-      defaultValue: "dd/mm/yyyy",
-      type: "string",
-    },
-    {
-      name: "region",
-      label: "Region",
-      values: [
-        { value: "us", label: "US" },
-        { value: "apac", label: "apac (Asia Pacific)" },
-        { value: "emea", label: "emea (Europe, Middle East & Africa)" },
-      ],
-      defaultValue: "apac",
-      type: "string",
-    },
-    {
-      name: "greyscale",
-      label: "Greyscale",
-      defaultValue: false,
-      type: "boolean",
-    },
-  ],
-};
-
-export default applicationSettingsSchema;
diff --git a/vuu-ui/packages/vuu-shell/src/index.ts b/vuu-ui/packages/vuu-shell/src/index.ts
index b3d414cf8..f4c466df5 100644
--- a/vuu-ui/packages/vuu-shell/src/index.ts
+++ b/vuu-ui/packages/vuu-shell/src/index.ts
@@ -12,4 +12,5 @@ export * from "./shell-layouts/side-panel";
 export * from "./ShellContextProvider";
 export * from "./feature-list";
 export * from "./theme-switch";
-export * from "./application-settings";
\ No newline at end of file
+export * from "./application-settings";
+export * from "./application-provider"
\ No newline at end of file
diff --git a/vuu-ui/showcase/index.html b/vuu-ui/showcase/index.html
index e8b8b2dc8..93aa3315c 100644
--- a/vuu-ui/showcase/index.html
+++ b/vuu-ui/showcase/index.html
@@ -11,10 +11,5 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script>
-      if (window.parent !== window) {
-        window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-      }
-    </script>
   </body>
 </html>
diff --git a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsForm/ApplicationSettingsForm.examples.css b/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsForm/ApplicationSettingsForm.examples.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsForm/index.ts b/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsForm/index.ts
deleted file mode 100644
index e277371b6..000000000
--- a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsForm/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * as ApplicationSettingsForm from "./ApplicationSettingsForm.examples";
diff --git a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsPanel/ApplicationSettingsPanel.examples.css b/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsPanel/ApplicationSettingsPanel.examples.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsPanel/ApplicationSettingsPanel.examples.tsx b/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsPanel/ApplicationSettingsPanel.examples.tsx
deleted file mode 100644
index 3463e22d2..000000000
--- a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsPanel/ApplicationSettingsPanel.examples.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Shell } from "@finos/vuu-shell";
-import { CSSProperties } from "react";
-
-const user = { username: "test-user", token: "test-token" };
-
-let displaySequence = 1;
-
-export const ApplicationSettingsPanel = () => {
-  return (
-    <Shell
-      LeftSidePanelProps={{
-        open: false,
-        sizeOpen: 200,
-        sizeClosed: 60,
-      }}
-      leftSidePanelLayout="full-height"
-      loginUrl={window.location.toString()}
-      user={user}
-      style={
-        {
-          "--vuuShell-height": "100%",
-          "--vuuShell-width": "100%",
-        } as CSSProperties
-      }
-    />
-  );
-};
-
-ApplicationSettingsPanel.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsPanel/index.ts b/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsPanel/index.ts
deleted file mode 100644
index e37020f47..000000000
--- a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsPanel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * as ApplicationSettingsPanel from "./ApplicationSettingsPanel.examples";
\ No newline at end of file
diff --git a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsSchemaExample.json b/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsSchemaExample.json
deleted file mode 100644
index 5af012f54..000000000
--- a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsSchemaExample.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-    "properties": [
-    {
-       "name": "themeMode",
-       "label": "Mode",
-       "values": ["light","dark"],
-       "defaultValue": "light",
-       "type": "string"
-    },
-    {
-       "name": "dateFormatPattern",
-       "label": "Date Formatting",
-       "values": ["dd/mm/yyyy", "mm/dd/yyyy", "dd MMMM yyyy"],
-       "defaultValue": "dd/mm/yyyy",
-       "type": "string"
-    },
-    {
-       "name": "region",
-       "label": "Region",
-       "values": [{"value": "us", "label":"US"},{"value": "apac", "label": "Asia Pacific"},{"value": "emea", "label": "Europe, Middle East & Africa"}],
-       "defaultValue": "light",
-       "type": "string"
-    },
-    {
-      "name": "greyscale",
-      "label": "Greyscale",
-      "values": ["true", "false"],
-      "defaultValue": "false",
-      "type": "boolean"
-   }
- ]
- }
- 
\ No newline at end of file
diff --git a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsTypesExamples.d.ts b/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsTypesExamples.d.ts
deleted file mode 100644
index 15eaeabf2..000000000
--- a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsTypesExamples.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-type SettingsProperty <T extends string | number | boolean | object = string> = {
-    name: string;
-    label: string;
-    values?: T[];
-    defaultValue: T;
-    type: 'string' | 'boolean' | 'number';
-}
-
-export interface SettingsSchema {
-    properties: SettingsProperty[];
-}
diff --git a/vuu-ui/showcase/src/examples/ApplicationSettings/index.ts b/vuu-ui/showcase/src/examples/ApplicationSettings/index.ts
deleted file mode 100644
index 43dac19ab..000000000
--- a/vuu-ui/showcase/src/examples/ApplicationSettings/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./ApplicationSettingsForm";
-export * from "./ApplicationSettingsPanel";
\ No newline at end of file
diff --git a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsForm/ApplicationSettingsForm.examples.tsx b/vuu-ui/showcase/src/examples/Shell/ApplicationSettings.examples.tsx
similarity index 54%
rename from vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsForm/ApplicationSettingsForm.examples.tsx
rename to vuu-ui/showcase/src/examples/Shell/ApplicationSettings.examples.tsx
index c3a433df0..79c001e73 100644
--- a/vuu-ui/showcase/src/examples/ApplicationSettings/ApplicationSettingsForm/ApplicationSettingsForm.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Shell/ApplicationSettings.examples.tsx
@@ -1,12 +1,55 @@
 import {
   ApplicationSettingsPanel,
-  type SettingsSchema,
+  ApplicationProvider,
 } from "@finos/vuu-shell";
+import { SettingsSchema } from "packages/vuu-shell/src/application-settings/SettingsForm";
+
 import { useState } from "react";
 
 let displaySequence = 1;
 
+// Showcase example showing the current default settings form
 export const DefaultApplicationSettingsForm = () => {
+  const initialSettings = {
+    themeMode: "light",
+  };
+
+  const applicationSettingsSchema: SettingsSchema = {
+    properties: [
+      {
+        name: "themeMode",
+        label: "Mode",
+        values: ["light", "dark"],
+        defaultValue: "light",
+        type: "string",
+      },
+    ],
+  };
+  const [applicationSettings, setApplicationSettings] =
+    useState(initialSettings);
+
+  const handlePropertyChanged = (propertyName: string, value: unknown) => {
+    setApplicationSettings((currentSettings) => ({
+      ...currentSettings,
+      [propertyName]: value,
+    }));
+  };
+
+  return (
+    <ApplicationProvider
+      onApplicationSettingChanged={handlePropertyChanged}
+      applicationSettings={applicationSettings}
+      applicationSettingsSchema={applicationSettingsSchema}
+    >
+      <ApplicationSettingsPanel />
+    </ApplicationProvider>
+  );
+};
+DefaultApplicationSettingsForm.displaySequence = displaySequence++;
+
+
+// Showcase example showing different form controls
+export const VariedFormControlApplicationSettingsForm = () => {
   const initialSettings = {
     themeMode: "light",
     dateFormatPattern: "dd/mm/yyyy",
@@ -52,10 +95,7 @@ export const DefaultApplicationSettingsForm = () => {
   const [applicationSettings, setApplicationSettings] =
     useState(initialSettings);
 
-  const handlePropertyChanged = (
-    propertyName: string,
-    value: string | boolean | number
-  ) => {
+  const handlePropertyChanged = (propertyName: string, value: unknown) => {
     setApplicationSettings((currentSettings) => ({
       ...currentSettings,
       [propertyName]: value,
@@ -63,11 +103,14 @@ export const DefaultApplicationSettingsForm = () => {
   };
 
   return (
-    <ApplicationSettingsPanel
-      applicationSettingsSchema={applicationSettingsSchema}
-      applicationSettings={applicationSettings}
+    <ApplicationProvider
       onApplicationSettingChanged={handlePropertyChanged}
-    />
+      applicationSettings={applicationSettings}
+      applicationSettingsSchema={applicationSettingsSchema}
+    >
+      <ApplicationSettingsPanel />
+    </ApplicationProvider>
   );
 };
-DefaultApplicationSettingsForm.displaySequence = displaySequence++;
+VariedFormControlApplicationSettingsForm.displaySequence = displaySequence++;
+
diff --git a/vuu-ui/showcase/src/examples/Shell/index.ts b/vuu-ui/showcase/src/examples/Shell/index.ts
index 4e247149f..250a3b05a 100644
--- a/vuu-ui/showcase/src/examples/Shell/index.ts
+++ b/vuu-ui/showcase/src/examples/Shell/index.ts
@@ -1,4 +1,5 @@
 export * as AppHeader from "./AppHeader.examples";
+export * as ApplicationSettings from "./ApplicationSettings.examples";
 export * as ConnectionStatus from "./ConnectionStatus.examples";
 export * as ConnectionMetrics from "./ConnectionMetrics.examples";
 export * as Feature from "./Feature.examples";
diff --git a/vuu-ui/showcase/src/examples/index.ts b/vuu-ui/showcase/src/examples/index.ts
index dfaae8d79..826fbcb7a 100644
--- a/vuu-ui/showcase/src/examples/index.ts
+++ b/vuu-ui/showcase/src/examples/index.ts
@@ -13,5 +13,4 @@ export * as Table from "./Table";
 export * as UiControls from "./UiControls";
 export * as VUU from "./VUU";
 export * as VuuFeatures from "./VuuFeatures";
-export * as Performance from "./Performance";
-export * as ApplicationSettings from "./ApplicationSettings";
+export * as Performance from "./Performance";
\ No newline at end of file