diff --git a/frontend/src/stories/design/status-indicators.mdx b/frontend/src/stories/design/status-indicators.mdx
index 5400e852..e23fd051 100644
--- a/frontend/src/stories/design/status-indicators.mdx
+++ b/frontend/src/stories/design/status-indicators.mdx
@@ -37,13 +37,15 @@ further clarity as to what they indicate.
 
 ## Intended Implementation
 
-| Status                                                                                                                                                                             | Color                                                                                            | Description                                                                                                                         | Icons                                                                                                                                                                                                                                                                                              | Examples                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <span className="whitespace-nowrap text-neutral-400"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> Empty</span>                                               | Shoelace <ColorSwatch color="var(--sl-color-neutral-400)">`--sl-color-neutral-400`</ColorSwatch> | Used for empty states where no data is present                                                                                      | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> `slash-circle`</span>                                                                                                                                                                       | <span className="whitespace-nowrap text-neutral-400"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> No Crawls Yet</span>                                                                                                                                                                                                                                                                                                                                                                                            |
-| <span className="whitespace-nowrap text-violet-600"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> Pending</span>                                           | Shoelace <ColorSwatch color="var(--sl-color-violet-600)">`--sl-color-violet-600`</ColorSwatch>   | Used when a process is queued or starting but is not yet running. Should be animated when indicating the status of a single object. | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> `hourglass-split`</span>, or the icon of the next state being transitioned to (pulsing)                                                                                                  | <span className="whitespace-nowrap text-violet-600"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> 1 Crawl Workflow Waiting</span> <br /> <span className="whitespace-nowrap text-violet-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Starting</span> <br /> <span className="whitespace-nowrap text-violet-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon></span> Resuming</span> |
-| <span className="whitespace-nowrap text-success-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Running</span> | Shoelace <ColorSwatch color="var(--sl-color-green-600)">`--sl-color-green-600`</ColorSwatch>     | Used when a process is actively running. Should be animated when indicating the status of a single object.                          | <sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon> `dot`                                                                                                                                                                                                                      | <span className="whitespace-nowrap text-success-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Running</span>                                                                                                                                                                                                                                                                                                                                                      |
-| <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> Paused</span>                                              | Shoelace <ColorSwatch color="var(--sl-color-neutral-600)">`--sl-color-neutral-600`</ColorSwatch> | Used for paused states                                                                                                              | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> `pause-circle`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon> `play-circle`</span>                                         | <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> Pause</span> <br/> <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon> Resume</span>                                                                                                                                                                                                                                                         |
-| <span className="whitespace-nowrap text-success-600"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> Success</span>                                        | Shoelace <ColorSwatch color="var(--sl-color-green-600)">`--sl-color-green-600`</ColorSwatch>     | Used for positive / successful states                                                                                               | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> `check-circle-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="check2-circle"></sl-icon> `check2-circle`</span>                           | <span className="whitespace-nowrap text-success-600"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> Complete</span>                                                                                                                                                                                                                                                                                                                                                                                            |
-| <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> Neutral</span>                                         | Shoelace <ColorSwatch color="var(--sl-color-amber-600)">`--sl-color-amber-600`</ColorSwatch>     | Used for ambiguous states, generally good but could be better                                                                       | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> `dash-square-fill`</span>                                                                                                                                                               | <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> Stopped</span>                                                                                                                                                                                                                                                                                                                                                                                              |
-| <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> Warning</span>                                 | Shoelace <ColorSwatch color="var(--sl-color-amber-600)">`--sl-color-amber-600`</ColorSwatch>     | Used for warning states, something is wrong but not critically                                                                      | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> `exclamation-diamond-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond"></sl-icon> `exclamation-diamond`</span> | <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> Warning</span>                                                                                                                                                                                                                                                                                                                                                                                      |
-| <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> Danger</span>                                             | Shoelace <ColorSwatch color="var(--sl-color-orange-600)">`--sl-color-orange-600`</ColorSwatch>   | Used for serious errors and actions that should be taken with extreme care                                                          | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> `x-octagon-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="x-octagon"></sl-icon> `x-octagon`</span>                                         | <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> Error</span>                                                                                                                                                                                                                                                                                                                                                                                                   |
+| Status                                                                                                                                                                             | Color                                                                                            | Description                                                                                                                         | Icons                                                                                                                                                                                                                                                                                                  | Examples                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <span className="whitespace-nowrap text-neutral-400"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> Empty</span>                                               | Shoelace <ColorSwatch color="var(--sl-color-neutral-400)">`--sl-color-neutral-400`</ColorSwatch> | Used for empty states where no data is present                                                                                      | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> `slash-circle`</span>                                                                                                                                                                           | <span className="whitespace-nowrap text-neutral-400"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> No Crawls Yet</span>                                                                                                                                                                                                                                                                                                                                                                                                  |
+| <span className="whitespace-nowrap text-violet-600"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> Pending</span>                                         | Shoelace <ColorSwatch color="var(--sl-color-violet-600)">`--sl-color-violet-600`</ColorSwatch>   | Used when a process is queued or starting but is not yet running. Should be animated when indicating the status of a single object. | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> `hourglass-split`</span>, or the icon of the next state being transitioned to (pulsing)                                                                                                      | <span className="whitespace-nowrap text-violet-600"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> 1 Crawl Workflow Waiting</span> <br /> <span className="whitespace-nowrap text-violet-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Starting</span> <br /> <span className="whitespace-nowrap text-violet-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon></span> Resuming</span> |
+| <span className="whitespace-nowrap text-success-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Running</span> | Shoelace <ColorSwatch color="var(--sl-color-success-600)">`--sl-color-success-600`</ColorSwatch>     | Used when a process is actively running. Should be animated when indicating the status of a single object.                          | <sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon> `dot`                                                                                                                                                                                                                          | <span className="whitespace-nowrap text-success-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Running</span>                                                                                                                                                                                                                                                                                                                                                            |
+| <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> Paused</span>                                              | Shoelace <ColorSwatch color="var(--sl-color-neutral-600)">`--sl-color-neutral-600`</ColorSwatch> | Used for paused states                                                                                                              | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> `pause-circle`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon> `play-circle`</span>                                             | <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> Pause</span> <br/> <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon> Resume</span>                                                                                                                                                                                                                                                               |
+| <span className="whitespace-nowrap text-success-600"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> Success</span>                                        | Shoelace <ColorSwatch color="var(--sl-color-success-600)">`--sl-color-success-600`</ColorSwatch>     | Used for positive / successful states                                                                                               | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> `check-circle-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="check2-circle"></sl-icon> `check2-circle`</span>                               | <span className="whitespace-nowrap text-success-600"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> Complete</span>                                                                                                                                                                                                                                                                                                                                                                                                  |
+| <span className="whitespace-nowrap text-neutral-500"><sl-icon style={{verticalAlign:-2}} name="info-circle-fill"></sl-icon> Info</span>                                            | Shoelace <ColorSwatch color="var(--sl-color-neutral-500)">`--sl-color-neutral-500`</ColorSwatch> | Used for neutral, informational states                                                                                              | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="info-circle-fill"></sl-icon> `info-circle-fill`</span>                                                                                                                                                                   | <span className="whitespace-nowrap text-neutral-500"><sl-icon style={{verticalAlign:-2}} name="info-circle-fill"></sl-icon> Behavior Log</span>                                                                                                                                                                                                                                                                                                                                                                                               |
+| <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> Incomplete</span>                                      | Shoelace <ColorSwatch color="var(--sl-color-warning-600)">`--sl-color-warning-600`</ColorSwatch>     | Used for states that are ambiguous or partially satisfied, but no longer running                                                    | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> `dash-square-fill`</span>                                                                                                                                                                   | <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> Stopped</span>                                                                                                                                                                                                                                                                                                                                                                                                    |
+| <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> Warning</span>                                 | Shoelace <ColorSwatch color="var(--sl-color-warning-600)">`--sl-color-warning-600`</ColorSwatch>     | Used for warning states, something is wrong but not critically                                                                      | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> `exclamation-diamond-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond"></sl-icon> `exclamation-diamond`</span>     | <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> Warning</span>                                                                                                                                                                                                                                                                                                                                                                                            |
+| <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-triangle-fill"></sl-icon> Danger</span>                                  | Shoelace <ColorSwatch color="var(--sl-color-danger-600)">`--sl-color-danger-600`</ColorSwatch>   | Used for non-fatal errors that may be addressed by the user                                                                         | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-triangle-fill"></sl-icon> `exclamation-triangle-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-triangle"></sl-icon> `exclamation-triangle`</span> | <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-triangle-fill"></sl-icon> Payment Failed</span>                                                                                                                                                                                                                                                                                                                                                                                              |
+| <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> Fatal</span>                                              | Shoelace <ColorSwatch color="var(--sl-color-danger-600)">`--sl-color-danger-600`</ColorSwatch>   | Used for fatal errors and actions that result in data loss                                                                          | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> `x-octagon-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="x-octagon"></sl-icon> `x-octagon`</span>                                             | <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> Canceled</span>                                                                                                                                                                                                                                                                                                                                                                                                      |