diff --git a/invokeai/frontend/web/src/common/components/InvButton/theme.ts b/invokeai/frontend/web/src/common/components/InvButton/theme.ts
index afd9aa4e98..5b54c36f97 100644
--- a/invokeai/frontend/web/src/common/components/InvButton/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvButton/theme.ts
@@ -204,7 +204,7 @@ export const buttonTheme = defineStyleConfig({
         _hover: {
           bg: 'none',
           svg: {
-            fill: 'base.500',
+            fill: 'base.400',
           },
         },
         '&[data-selected="true"]': {
diff --git a/invokeai/frontend/web/src/common/components/InvProgress/theme.ts b/invokeai/frontend/web/src/common/components/InvProgress/theme.ts
index 7b9ecea23a..4ca58154cb 100644
--- a/invokeai/frontend/web/src/common/components/InvProgress/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvProgress/theme.ts
@@ -1,35 +1,57 @@
 import { progressAnatomy as parts } from '@chakra-ui/anatomy';
-import {
-  createMultiStyleConfigHelpers,
-  defineStyle,
-} from '@chakra-ui/styled-system';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { generateStripe, getColorVar } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const invokeAIFilledTrack = defineStyle((_props) => ({
-  bg: 'blue.500',
-}));
-
-const invokeAITrack = defineStyle((_props) => {
-  return {
-    bg: 'base.800',
-  };
-});
-
-const invokeAI = definePartsStyle((props) => ({
-  filledTrack: invokeAIFilledTrack(props),
-  track: invokeAITrack(props),
-}));
-
 export const progressTheme = defineMultiStyleConfig({
-  baseStyle: {
-    track: { borderRadius: '2px' },
-  },
-  variants: {
-    invokeAI,
-  },
-  defaultProps: {
-    variant: 'invokeAI',
-  },
+  baseStyle: definePartsStyle(
+    ({ theme: t, colorScheme: c, hasStripe, isIndeterminate }) => {
+      const bgColor = `${c}.300`;
+      const addStripe = !isIndeterminate && hasStripe;
+      const gradient = `linear-gradient(
+      to right,
+      transparent 0%,
+      ${getColorVar(t, bgColor)} 50%,
+      transparent 100%
+    )`;
+      return {
+        track: {
+          borderRadius: '2px',
+          bg: 'base.800',
+        },
+        filledTrack: {
+          borderRadius: '2px',
+          ...(addStripe && generateStripe()),
+          ...(isIndeterminate ? { bgImage: gradient } : { bgColor }),
+        },
+      };
+    }
+  ),
 });
+// export const progressTheme = defineMultiStyleConfig({
+//   baseStyle: definePartsStyle(
+//     ({ theme: t, colorScheme: c, hasStripe, isIndeterminate }) => {
+//       const bgColor = `${c}.500`;
+//       const addStripe = !isIndeterminate && hasStripe;
+//       const gradient = `linear-gradient(
+//       to right,
+//       transparent 0%,
+//       ${getColorVar(t, bgColor)} 50%,
+//       transparent 100%
+//     )`;
+//       return {
+//         track: {
+//           borderRadius: '2px',
+//           bg: 'base.800',
+//         },
+//         filledTrack: {
+//           borderRadius: '2px',
+//           ...(addStripe && generateStripe("xs")),
+//           ...(isIndeterminate ? { bgImage: gradient } : { bgColor }),
+//         },
+//       };
+//     }
+//   ),
+// });
diff --git a/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.tsx b/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.tsx
index 226681e4b0..684490fc24 100644
--- a/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.tsx
+++ b/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.tsx
@@ -12,6 +12,7 @@ export const InvTooltip = memo(
           ref={ref}
           hasArrow={hasArrow}
           placement={placement}
+          arrowSize={8}
           {...rest}
         >
           {children}
diff --git a/invokeai/frontend/web/src/common/components/InvTooltip/theme.ts b/invokeai/frontend/web/src/common/components/InvTooltip/theme.ts
index 42f7d83c48..2e7f2190aa 100644
--- a/invokeai/frontend/web/src/common/components/InvTooltip/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvTooltip/theme.ts
@@ -3,14 +3,15 @@ import { cssVar } from '@chakra-ui/theme-tools';
 
 const $arrowBg = cssVar('popper-arrow-bg');
 
-// define the base component styles
 const baseStyle = defineStyle(() => ({
   borderRadius: 'md',
   shadow: 'dark-lg',
   bg: 'base.200',
   color: 'base.800',
   [$arrowBg.variable]: 'colors.base.200',
-  pb: 1.5,
+  pt: 1,
+  px: 2,
+  pb: 1,
 }));
 
 // export the component theme
diff --git a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
index a8b56c91ad..155a77858f 100644
--- a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
@@ -28,6 +28,7 @@ const selector = createMemoizedSelector([stateSelector], (state) => {
   const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
     state.config.sd.iterations;
   const { iterations } = state.generation;
+  const isLoadingDynamicPrompts = state.dynamicPrompts.isLoading;
 
   return {
     iterations,
@@ -37,15 +38,14 @@ const selector = createMemoizedSelector([stateSelector], (state) => {
     inputMax,
     step: coarseStep,
     fineStep,
+    isLoadingDynamicPrompts,
   };
 });
 
 export const InvokeQueueBackButton = memo(() => {
-  const isLoadingDynamicPrompts = useAppSelector(
-    (state) => state.dynamicPrompts.isLoading
-  );
   const { queueBack, isLoading, isDisabled } = useQueueBack();
-  const { iterations, step, fineStep } = useAppSelector(selector);
+  const { iterations, step, fineStep, isLoadingDynamicPrompts } =
+    useAppSelector(selector);
   const dispatch = useAppDispatch();
   const handleChange = useCallback(
     (v: number) => {
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
index e5ce3a30d9..61dd0f5473 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
@@ -3,7 +3,6 @@ import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'
 import ClearQueueButton from 'features/queue/components/ClearQueueButton';
 import QueueFrontButton from 'features/queue/components/QueueFrontButton';
 import ProgressBar from 'features/system/components/ProgressBar';
-import StatusIndicator from 'features/system/components/StatusIndicator';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 
@@ -31,10 +30,7 @@ const QueueControls = () => {
         {isPauseEnabled && <PauseProcessorButton asIconButton />} */}
         <ClearQueueButton asIconButton />
       </InvButtonGroup>
-      <Flex h={5} w="full" alignItems="center">
-        <StatusIndicator />
-        <ProgressBar height={2} />
-      </Flex>
+      <ProgressBar />
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
index ceee058a62..9e8fd6db1e 100644
--- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
@@ -16,12 +16,7 @@ const progressBarSelector = createMemoizedSelector(
   }
 );
 
-type ProgressBarProps = {
-  height?: number | string;
-};
-
-const ProgressBar = (props: ProgressBarProps) => {
-  const { height = 'full' } = props;
+const ProgressBar = () => {
   const { t } = useTranslation();
   const { data: queueStatus } = useGetQueueStatusQuery();
   const { hasSteps, value, isConnected } = useAppSelector(progressBarSelector);
@@ -30,13 +25,12 @@ const ProgressBar = (props: ProgressBarProps) => {
     <Progress
       value={value}
       aria-label={t('accessibility.invokeProgressBar')}
-      hasStripe
       isIndeterminate={
         isConnected && Boolean(queueStatus?.queue.in_progress) && !hasSteps
       }
-      h={height}
+      h={2}
       w="full"
-      colorScheme="invokeYellow"
+      colorScheme="blue"
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
index fc137274dc..5d7d375cd7 100644
--- a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
+++ b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
@@ -1,81 +1,28 @@
-import { Flex, Icon } from '@chakra-ui/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
+import { Icon } from '@chakra-ui/react';
 import { useAppSelector } from 'app/store/storeHooks';
-import { InvText } from 'common/components/InvText/wrapper';
 import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
-import { STATUS_TRANSLATION_KEYS } from 'features/system/store/types';
-import type { ResourceKey } from 'i18next';
-import { memo, useMemo, useRef } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaCircle } from 'react-icons/fa';
-import { useHoverDirty } from 'react-use';
-import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
-
-const statusIndicatorSelector = createMemoizedSelector(
-  stateSelector,
-  ({ system }) => {
-    const { isConnected, status } = system;
-
-    return {
-      isConnected,
-      statusTranslationKey: STATUS_TRANSLATION_KEYS[status],
-    };
-  }
-);
-
-const COLOR_MAP = {
-  ok: 'invokeYellow.500',
-  working: 'blue.500',
-  error: 'red.500',
-};
+import { FaExclamationTriangle } from 'react-icons/fa';
 
 const StatusIndicator = () => {
-  const { isConnected, statusTranslationKey } = useAppSelector(
-    statusIndicatorSelector
-  );
+  const isConnected = useAppSelector((state) => state.system.isConnected);
   const { t } = useTranslation();
-  const ref = useRef(null);
-  const { data: queueStatus } = useGetQueueStatusQuery();
 
-  const statusColor = useMemo(() => {
-    if (!isConnected) {
-      return 'error';
-    }
-
-    if (queueStatus?.queue.in_progress) {
-      return 'working';
-    }
-
-    return 'ok';
-  }, [queueStatus?.queue.in_progress, isConnected]);
-
-  const isHovered = useHoverDirty(ref);
-
-  return (
-    <Flex ref={ref} alignItems="center" p={2} pl={0}>
+  if (!isConnected) {
+    return (
       <InvTooltip
-        left={10}
-        bottom={-24}
-        background="base.800"
-        label={
-          isHovered && (
-            <InvText
-              fontSize="sm"
-              fontWeight="semibold"
-              pb="1px"
-              userSelect="none"
-              color={COLOR_MAP[statusColor]}
-            >
-              {t(statusTranslationKey as ResourceKey)}
-            </InvText>
-          )
-        }
+        label={t('common.statusDisconnected')}
+        placement="end"
+        shouldWrapChildren
+        gutter={10}
       >
-        <Icon as={FaCircle} boxSize="0.6rem" color={COLOR_MAP[statusColor]} />
+        <Icon as={FaExclamationTriangle} color="error.300" />
       </InvTooltip>
-    </Flex>
-  );
+    );
+  }
+
+  return null;
 };
 
 export default memo(StatusIndicator);
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index b7176260b8..07c4167709 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -15,6 +15,7 @@ import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent
 import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
 import SettingsMenu from 'features/system/components/SettingsModal/SettingsMenu';
+import StatusIndicator from 'features/system/components/StatusIndicator';
 import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
 import { usePanel } from 'features/ui/hooks/usePanel';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
@@ -125,17 +126,17 @@ const InvokeTabs = () => {
     () =>
       enabledTabs.map((tab) => (
         <InvTooltip key={tab.id} label={t(tab.translationKey)} placement="end">
-          <InvTab
-            as={InvIconButton}
-            p={0}
-            onClick={handleClickTab}
-            icon={tab.icon}
-            size="md"
-            fontSize="24px"
-            variant="appTab"
-            data-selected={activeTabName === tab.id}
-            aria-label={t(tab.translationKey)}
-          ></InvTab>
+          <InvTab p={0}>
+            <InvIconButton
+              onClick={handleClickTab}
+              icon={tab.icon}
+              size="md"
+              fontSize="24px"
+              variant="appTab"
+              data-selected={activeTabName === tab.id}
+              aria-label={t(tab.translationKey)}
+            />
+          </InvTab>
         </InvTooltip>
       )),
     [enabledTabs, t, handleClickTab, activeTabName]
@@ -254,13 +255,14 @@ const InvokeTabs = () => {
       p={4}
       isLazy
     >
-      <Flex flexDir="column" alignItems="center" pt={4}>
+      <Flex flexDir="column" alignItems="center" pt={4} pb={2} gap={4}>
         <InvokeAILogoComponent />
-        <InvTabList gap={4} pt={12} pb={4} h="full" flexDir="column">
+        <InvTabList gap={4} pt={6} h="full" flexDir="column">
           {tabs}
-          <Spacer />
-          <SettingsMenu />
         </InvTabList>
+        <Spacer />
+        <StatusIndicator />
+        <SettingsMenu />
       </Flex>
       <PanelGroup
         ref={panelGroupRef}
diff --git a/invokeai/frontend/web/src/theme/animations.ts b/invokeai/frontend/web/src/theme/animations.ts
index f5a1b897ec..c92c88e115 100644
--- a/invokeai/frontend/web/src/theme/animations.ts
+++ b/invokeai/frontend/web/src/theme/animations.ts
@@ -10,3 +10,5 @@ export const spinKeyframes = keyframes`
 `;
 
 export const spinAnimation = `${spinKeyframes} 0.45s linear infinite`;
+
+export const spinAnimationSlow = `${spinKeyframes} 1s linear infinite`;