diff --git a/.storybook/preview.js b/.storybook/preview.js
index 05817b2e..f3e41f38 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -35,6 +35,7 @@ const preview = {
     },
     options: {
       storySort: {
+        method: 'alphabetical',
         order: ['Foundations', 'Components'],
       },
     },
diff --git a/src/CardStack/CardStack.stories.tsx b/src/CardStack/CardStack.stories.tsx
index 2fe4c05f..d19d9dae 100644
--- a/src/CardStack/CardStack.stories.tsx
+++ b/src/CardStack/CardStack.stories.tsx
@@ -7,7 +7,7 @@ import CardStack from './CardStack';
 import mdx from './CardStack.mdx';
 
 export default {
-  title: 'Layouts/CardStack',
+  title: 'Components/CardStack',
   component: CardStack,
   parameters: {
     docs: {
diff --git a/src/Container/Col.tsx b/src/Container/Col.tsx
index 5bad4603..fc768a2a 100644
--- a/src/Container/Col.tsx
+++ b/src/Container/Col.tsx
@@ -4,6 +4,8 @@ import {
   type ColProps as ReactBootstrapColProps,
 } from 'react-bootstrap';
 
+import { useDeprecationWarning } from 'src/utils';
+
 export type ColProps = {
   /**
    You can use a custom element for this component
@@ -66,6 +68,8 @@ export function Col({
   bsPrefix = 'col',
   ...props
 }: ColProps) {
+  useDeprecationWarning({ componentName: 'Col', message: 'Please use FlexContainer instead.' });
+
   return (
     <ReactBootstrapCol
       as={as}
diff --git a/src/Container/Container.mdx b/src/Container/Container.mdx
index 34d6704a..7fca7d91 100644
--- a/src/Container/Container.mdx
+++ b/src/Container/Container.mdx
@@ -1,8 +1,10 @@
-import { ArgTypes,  Canvas } from '@storybook/blocks';
+import { Canvas } from '@storybook/blocks';
 import Container from './Container';
 import * as ComponentStories from './Container.stories';
 
-# Container
+# Container (Deprecated)
+
+<b>⚠️ Deprecated: please use <code>FlexContainer</code> instead</b>
 
 <h4>
   A high level grid system to help create responsive application layouts. 
@@ -25,8 +27,6 @@ There are six default breakpoints, sometimes referred to as grid tiers, for buil
 
 <Canvas of={ComponentStories.Default} />
 
-<ArgTypes of={Container} />
-
 ## Stories
 
 ### Default
diff --git a/src/Container/Container.stories.tsx b/src/Container/Container.stories.tsx
index 287b0fa5..7ca27ed2 100644
--- a/src/Container/Container.stories.tsx
+++ b/src/Container/Container.stories.tsx
@@ -5,7 +5,7 @@ import { Col, Container, Row } from '.';
 import mdx from './Container.mdx';
 
 export default {
-  title: 'Layouts/Container',
+  title: 'Deprecated/Container',
   component: Container,
   parameters: {
     docs: {
diff --git a/src/Container/Container.tsx b/src/Container/Container.tsx
index fb4b6245..6e4b71d3 100644
--- a/src/Container/Container.tsx
+++ b/src/Container/Container.tsx
@@ -4,6 +4,8 @@ import {
   type ContainerProps as ReactBootstrapContainerProps,
 } from 'react-bootstrap';
 
+import { useDeprecationWarning } from 'src/utils';
+
 export type ContainerProps = {
   /**
    You can use a custom element for this component
@@ -30,6 +32,8 @@ export function Container({
   bsPrefix = 'container',
   ...props
 }: ContainerProps) {
+  useDeprecationWarning({ componentName: 'Container', message: 'Please use FlexContainer instead.' });
+
   return (
     <ReactBootstrapContainer
       as={as}
diff --git a/src/Container/Row.tsx b/src/Container/Row.tsx
index 744525ea..8ae74de3 100644
--- a/src/Container/Row.tsx
+++ b/src/Container/Row.tsx
@@ -4,6 +4,8 @@ import {
   type RowProps as ReactBootstrapRowProps,
 } from 'react-bootstrap';
 
+import { useDeprecationWarning } from 'src/utils';
+
 export type RowProps = {
   /**
    You can use a custom element for this component
@@ -66,6 +68,8 @@ export function Row({
   bsPrefix = 'row',
   ...props
 }: RowProps) {
+  useDeprecationWarning({ componentName: 'Row', message: 'Please use FlexContainer instead.' });
+
   return (
     <ReactBootstrapRow
       as={as}
diff --git a/src/Flex/Flex.mdx b/src/Flex/Flex.mdx
index 6c029c54..984d9668 100644
--- a/src/Flex/Flex.mdx
+++ b/src/Flex/Flex.mdx
@@ -1,10 +1,10 @@
-import { ArgTypes,  Canvas } from '@storybook/blocks';
+import { Canvas } from '@storybook/blocks';
 import Flex from './Flex';
 import * as ComponentStories from './Flex.stories';
 
-# Flex
+# Flex (Deprecated)
 
-##
+<b>⚠️ Deprecated: please use <code>FlexContainer</code> instead</b>
 
 <h4>
   Flex is a utility component for creating consistent spacing between items. Use this for quick alignment and spacing in your layouts.
@@ -19,21 +19,3 @@ Flexbox CSS properties in the following documentation:
 </ul>
 
 <Canvas of={ComponentStories.Default} />
-
-## Props
-
-<ArgTypes of={Flex} />
-
-## Stories
-
-### Default
-
-<Canvas of={ComponentStories.Default} />
-
-### Flex Container
-
-<Canvas of={ComponentStories.FlexContainer} />
-
-### Flex Item
-
-<Canvas of={ComponentStories.FlexItem} />
diff --git a/src/Flex/Flex.stories.tsx b/src/Flex/Flex.stories.tsx
index cfbe3a37..df28a614 100644
--- a/src/Flex/Flex.stories.tsx
+++ b/src/Flex/Flex.stories.tsx
@@ -4,16 +4,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Card from '../Card';
 import Flex from './Flex';
 
+import mdx from './Flex.mdx';
+
 const meta: Meta<typeof Flex> = {
   component: Flex,
   parameters: {
     docs: {
-      description: {
-        component: 'Flex is a utility component for creating consistent spacing between items. Use this for quick alignment and spacing in your layouts.',
-      },
+      page: mdx,
     },
   },
-  title: 'Layouts/Flex',
+  title: 'Deprecated/Flex',
 };
 
 export default meta;
diff --git a/src/Flex/Flex.tsx b/src/Flex/Flex.tsx
index 037e37cc..3e3616be 100644
--- a/src/Flex/Flex.tsx
+++ b/src/Flex/Flex.tsx
@@ -1,6 +1,8 @@
 import { ReactNode, ElementType, createElement } from 'react';
 import classNames from 'classnames';
 
+import { useDeprecationWarning } from 'src/utils';
+
 import styles from './Flex.module.scss';
 
 export interface FlexProps {
@@ -63,6 +65,8 @@ function Flex({
   width,
   ...props
 }: FlexProps) {
+  useDeprecationWarning({ componentName: 'Flex', message: 'Please use FlexContainer instead.' });
+
   // Defined flex properties as strings
   const flexClasses = [
     container ? styles[`flex-container`] : styles.container,
diff --git a/src/IconCell/IconCell.mdx b/src/IconCell/IconCell.mdx
index be74d86d..4d0c5358 100644
--- a/src/IconCell/IconCell.mdx
+++ b/src/IconCell/IconCell.mdx
@@ -2,9 +2,7 @@ import { ArgTypes,  Canvas } from '@storybook/blocks';
 import IconCell from './IconCell';
 import * as ComponentStories from './IconCell.stories';
 
-# Icon Cell
-
-##
+# Icon Cell (Deprecated)
 
 <h4>
   An icon with a colored background used to draw more attention to surrounding elements.
diff --git a/src/IconCell/IconCell.stories.tsx b/src/IconCell/IconCell.stories.tsx
index 1dfa0a3c..44232093 100644
--- a/src/IconCell/IconCell.stories.tsx
+++ b/src/IconCell/IconCell.stories.tsx
@@ -8,7 +8,7 @@ import IconCell from '.';
 import mdx from './IconCell.mdx';
 
 export default {
-  title: 'Components/IconCell',
+  title: 'Deprecated/IconCell',
   component: IconCell,
   parameters: {
     docs: {
diff --git a/src/IconCell/IconCell.tsx b/src/IconCell/IconCell.tsx
index c0c43b9e..7897337d 100644
--- a/src/IconCell/IconCell.tsx
+++ b/src/IconCell/IconCell.tsx
@@ -3,6 +3,8 @@ import React from 'react';
 import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { useDeprecationWarning } from 'src/utils';
+
 import './IconCell.scss';
 
 export type IconCellProps = {
@@ -12,6 +14,8 @@ export type IconCellProps = {
 function IconCell({
   icon,
 }: IconCellProps) {
+  useDeprecationWarning({ componentName: 'IconCell' });
+
   return (
     <div className="IconCell">
       <FontAwesomeIcon icon={icon} />
diff --git a/src/Main/Main.stories.tsx b/src/Main/Main.stories.tsx
index 81a1a74e..e31fafbc 100644
--- a/src/Main/Main.stories.tsx
+++ b/src/Main/Main.stories.tsx
@@ -6,7 +6,7 @@ import Main from './Main';
 import mdx from './Main.mdx';
 
 export default {
-  title: 'Layouts/Main',
+  title: 'Components/Main',
   component: Main,
   parameters: {
     docs: {
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 00000000..e641b7cb
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './useDeprecationWarning';
diff --git a/src/utils/useDeprecationWarning.ts b/src/utils/useDeprecationWarning.ts
new file mode 100644
index 00000000..6b782b81
--- /dev/null
+++ b/src/utils/useDeprecationWarning.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+type useDeprecationWarningProps = {
+  componentName: string,
+  message?: string,
+}
+
+export function useDeprecationWarning({
+  componentName,
+  message = '',
+} : useDeprecationWarningProps) {
+  useEffect(() => {
+    const warningMessage = `Warning: ${componentName} is deprecated and will be removed in a future release.${
+      message ? ` ${message}` : ''}`;
+
+    if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.warn(warningMessage);
+    }
+  }, [componentName, message]);
+}