diff --git a/sandbox/grommet-app/src/App.jsx b/sandbox/grommet-app/src/App.jsx
index e06aabb43..a481578bc 100644
--- a/sandbox/grommet-app/src/App.jsx
+++ b/sandbox/grommet-app/src/App.jsx
@@ -7,6 +7,7 @@ import Home from './pages/index';
 import NextDashboard from './pages/next/index';
 import { Login } from './Login';
 import { GlobalHeader } from './components/GlobalHeader';
+import { FloatingActionButton } from './components';
 
 export const BackgroundContext = createContext({});
 
@@ -39,6 +40,7 @@ const App = () => {
           cssGap: true,
         },
       }}
+      style={{ display: 'relative' }}
     >
       {authenticated ? (
         <BackgroundContext.Provider value={contextValue}>
@@ -56,6 +58,9 @@ const App = () => {
               <Route path="/next" element={<NextDashboard />} />
             </Routes>
           </BrowserRouter>
+          {window.location.pathname === '/next' ? (
+            <FloatingActionButton label="Ask HPE" />
+          ) : undefined}
         </BackgroundContext.Provider>
       ) : (
         <Login setAuthenticated={setAuthenticated} />
diff --git a/sandbox/grommet-app/src/components/FloatingActionButton/FloatingActionButton.jsx b/sandbox/grommet-app/src/components/FloatingActionButton/FloatingActionButton.jsx
new file mode 100644
index 000000000..b6a753e22
--- /dev/null
+++ b/sandbox/grommet-app/src/components/FloatingActionButton/FloatingActionButton.jsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { Box, Button } from 'grommet';
+
+const PositionedBox = styled(Box)`
+  position: fixed;
+  bottom: 0px;
+  border-radius: 2em;
+  right: 0px;
+  z-index: 10;
+`;
+
+export const FloatingActionButton = ({ ...rest }) => {
+  return (
+    <PositionedBox elevation="large" margin="medium">
+      <Button {...rest} kind="fab" size="large" />
+    </PositionedBox>
+  );
+};
diff --git a/sandbox/grommet-app/src/components/FloatingActionButton/index.js b/sandbox/grommet-app/src/components/FloatingActionButton/index.js
new file mode 100644
index 000000000..8615ac429
--- /dev/null
+++ b/sandbox/grommet-app/src/components/FloatingActionButton/index.js
@@ -0,0 +1 @@
+export * from './FloatingActionButton';
diff --git a/sandbox/grommet-app/src/components/index.js b/sandbox/grommet-app/src/components/index.js
index 0c51a97c6..204711ca4 100644
--- a/sandbox/grommet-app/src/components/index.js
+++ b/sandbox/grommet-app/src/components/index.js
@@ -6,3 +6,4 @@ export * from './NotificationMetric';
 export * from './ContentPane';
 export * from './GlobalHeader';
 export * from './ToggleGroup';
+export * from './FloatingActionButton';
diff --git a/sandbox/grommet-app/src/theme.js b/sandbox/grommet-app/src/theme.js
index 8d25dfee1..456cc5dbf 100644
--- a/sandbox/grommet-app/src/theme.js
+++ b/sandbox/grommet-app/src/theme.js
@@ -268,6 +268,10 @@ const buildTheme = tokens => {
           light: light.color.chart.qualitative['70-secondary'].$value,
           dark: dark.color.chart.qualitative['70-secondary'].$value,
         },
+        'background-brand-default': {
+          light: light.color.background.brand.default.$value,
+          dark: dark.color.background.brand.default.$value,
+        },
         'background-brand-weak': {
           light: light.color.background.brand.weak.$value,
           dark: dark.color.background.brand.weak.$value,
@@ -292,6 +296,11 @@ const buildTheme = tokens => {
           light: light.color.foreground.status.info.$value,
           dark: dark.color.foreground.status.info.$value,
         },
+
+        'foreground-onBrand': {
+          light: light.color.foreground.onBrand.$value,
+          dark: dark.color.foreground.onBrand.$value,
+        },
         'button-secondary-border-default': {
           light: light.color.button.secondary.border.default.$value,
           dark: dark.color.button.secondary.border.default.$value,
@@ -329,6 +338,13 @@ const buildTheme = tokens => {
           weight: 600,
         },
       },
+      fab: {
+        background: 'background-brand-default',
+        color: 'foreground-onBrand',
+        font: {
+          weight: 600,
+        },
+      },
       tab: {
         color: 'text-strong',
         font: {