diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 7f0782c..5bedb04 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -31,7 +31,8 @@ The React application leverages a modern technology stack to ensure optimal perf
 - **HTTP Client**: Axios
 - **Styling**: TailwindCSS
 - **Component Library**: shadcn/ui
-- **Font Awesome**: icons
+- **Icons**: Font Awesome and Lucide
+- **Fonts**: Fontsource
 - **Utility Library**: Lodash
 - **Date Library**: date-fns
 - **Unit Testing**: Vitest
@@ -53,7 +54,7 @@ src
       useGetCurrentUser.ts              # API hook for fetching current user
       useGetCurrentUser.test.ts         # Unit test for useGetCurrentUser
     /components
-      /ui                               # shadcn/ui components
+      /shadcn                           # shadcn/ui components
         button.tsx                      # Reusable button component from shadcn/ui
         input.tsx                       # Reusable input component from shadcn/ui
         label.tsx                       # Reusable label component from shadcn/ui
@@ -142,8 +143,8 @@ package.json                            # Project dependencies and scripts
 
 - Use **functional components** with hooks.
 - Use **TypeScript** for type safety.
-- Return **JSX.Element** or **false** from components.
 - Use arrow functions for components.
+- Return JSX or `null` from components.
 - Use the `data-testid` attribute to assist with testing.
 - Use default exports for components.
 - Use a **testId** prop for components that need to be tested, defaulting to the component name in kebab-case.
@@ -157,6 +158,7 @@ package.json                            # Project dependencies and scripts
 - Use **Tailwind CSS** for styling.
 - Apply base styles in `src/index.css`
 - Use CSS variables for theming (index.css).
+- Use class-variance-authority (CVA) for reusable component styles and variants, see: `src/common/utils/css.ts`.
 
 ### Configuration
 
@@ -195,8 +197,9 @@ package.json                            # Project dependencies and scripts
 
 After installing shadcn/ui:
 
-- Reusable UI components like `<Button />`, `<Input />`, `<Label />` live in `src/common/components/ui/`
-- You can override and customize each component’s styles with Tailwind and variants
+- Reusable UI components like `<Button />`, `<Input />`, `<Label />` live in `src/common/components/shadcn/`
+- DO override and customize each component’s styles with Tailwind and variants.
+- DO NOT modify shadcn/ui underlying component logic or structure, as this will make it difficult to maintain and update in the future. Instead create wrapper components if you need to add additional functionality or logic.
 - Recommended: use the CLI to scaffold new components:
 
   ```bash
diff --git a/README.md b/README.md
index b632000..281d3b1 100644
--- a/README.md
+++ b/README.md
@@ -169,14 +169,21 @@ The page will reload when source files are saved.
 
 ### `npm test`
 
+Executes the unit tests once. See the Vitest documentation about [running tests](https://vitest.dev/guide/cli.html) for more information.
+
+### `npm run test:coverage`
+
+Executes the unit tests once, producing a code coverage report.
+
+### `npm run test:watch`
+
 Launches the test runner in the interactive watch mode.
-See the section about [running tests](https://vitest.dev/guide/cli.html) for more information.
 
 ### `npm run test:ci`
 
-Executes the test runner in `CI` mode and produces a coverage report. With `CI` mode enabled, the test runner executes all tests one time and prints a summary report to the console. A code coverage report is printed to the console immediately following the test summary.
+Executes the test runner in `CI` mode and produces a coverage report. With `CI` mode enabled, the test runner executes all tests one time silently and prints a summary report to the console. A code coverage report is printed to the console immediately following the test summary.
 
-A detailed test coverage report is created in the `./coverage` directory.
+A detailed test coverage report is created in the `./coverage` directory. Additional report formats, for example a JSON summary report, are produced which may be injested by external reporting tools.
 
 > **NOTE:** This is the command which should be utilized by CI/CD platforms.
 
@@ -191,10 +198,22 @@ It correctly bundles React in production mode and optimizes the build for the be
 
 See the official guide for more information about [building for production](https://vitejs.dev/guide/build.html) and [deploying a static site](https://vitejs.dev/guide/static-deploy.html).
 
+### `npm run format`
+
+Runs the Prettier static code analysis and fixes problems identified to comply with Prettier formatting rules. See `.prettierrc` and `.prettierignore`.
+
+### `npm run format:check`
+
+Runs the Prettier static code analysis and prints the results to the console.
+
 ### `npm run lint`
 
 Runs the eslint static code analysis and prints the results to the console.
 
+### `npm run lint:fix`
+
+Runs the eslint static code analysis and updates source code to fix problems.
+
 ## `npm run storybook`
 
 Starts the [Storybook][storybook] UI. Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
diff --git a/docs/SHADCN_GUIDE.md b/docs/SHADCN_GUIDE.md
index c63b612..e292497 100644
--- a/docs/SHADCN_GUIDE.md
+++ b/docs/SHADCN_GUIDE.md
@@ -245,25 +245,59 @@ Dependencies: clsx, class-variance-authority
 
 ### Wrapping shadcn Components
 
-Create wrapper components to standardize usage across your application:
+**Only wrap shadcn components when you need to adjust their behavior.** For style, variant, or CVA configuration changes, modify the component directly in `src/common/components/shadcn/` instead. This keeps base components clean and centralizes visual variants in one place.
+
+#### Example: Alert Components
+
+The project provides a great example of this pattern with the Alert components:
+
+**When NOT to Wrap — Modify Variants/Styles Directly:**
+
+The base [shadcn Alert component](src/common/components/shadcn/alert.tsx) defines all visual variants (default, destructive, success, warning) and style configurations directly using CVA:
 
 ```typescript
-// src/common/components/Button/Button.tsx
-import { Button as ShadcnButton, ButtonProps } from 'common/components/shadcn/button';
+const alertVariants = cva('group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 ...', {
+  variants: {
+    variant: {
+      default: 'bg-card text-card-foreground',
+      destructive: 'bg-card text-destructive *:[svg]:text-current',
+      success: 'bg-card text-success *:[svg]:text-current',
+      warning: 'bg-card text-warning *:[svg]:text-current',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+```
 
-export interface CustomButtonProps extends ButtonProps {
-  isLoading?: boolean;
-}
+Style and variant adjustments stay here, not in wrapper components.
 
-export const Button = ({ isLoading, children, ...props }: CustomButtonProps) => {
+**When to Wrap — Add Behavior/Functionality:**
+
+The [ErrorAlert wrapper](src/common/components/Alert/ErrorAlert.tsx) extends the Alert for a specific use case by adding optional title handling and structured error presentation:
+
+```typescript
+const ErrorAlert = ({ className, description, testId = 'alert-error', title, ...props }: ErrorAlertProps) => {
   return (
-    <ShadcnButton disabled={isLoading} {...props}>
-      {isLoading ? 'Loading...' : children}
-    </ShadcnButton>
+    <Alert variant="destructive" className={cn(className)} data-testId={testId} {...props}>
+      <AlertCircleIcon />
+      {title && <AlertTitle data-testId={`${testId}-title`}>{title}</AlertTitle>}
+      <AlertDescription data-testId={`${testId}-description`}>{description}</AlertDescription>
+    </Alert>
   );
 };
 ```
 
+This wrapper adds behavior-specific logic while reusing the base Alert's styles and CVA configuration.
+
+#### General Pattern
+
+Follow this approach for all shadcn components:
+
+- **Modify the shadcn component** (`src/common/components/shadcn/*.tsx`) for all visual customizations, variants, and CVA configuration
+- **Create a wrapper** (`src/common/components/ComponentName/*.tsx`) only when adding behavior, functionality, or context-specific logic
+
 ### Testing shadcn Components
 
 When testing components that use shadcn:
diff --git a/package.json b/package.json
index 4c45f97..ec38520 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,11 @@
     "prepare": "husky",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "test": "vitest",
-    "test:coverage": "vitest --coverage --coverage.all=false",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "test:ci": "vitest run --coverage --silent",
-    "test:ui": "vitest --ui --coverage --silent"
+    "test:ui": "vitest --ui --coverage --silent",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@fontsource-variable/noto-sans": "5.2.10",
diff --git a/src/common/components/Alert/Alert.tsx b/src/common/components/Alert/Alert.tsx
deleted file mode 100644
index 0e2f602..0000000
--- a/src/common/components/Alert/Alert.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { cva, VariantProps } from 'class-variance-authority';
-
-import { BaseComponentProps } from 'common/utils/types';
-import { cn } from 'common/utils/css';
-import FAIcon, { FAIconProps } from '../Icon/FAIcon';
-
-/**
- * Define the `Alert` component base and variant styles.
- */
-const alertVariants = cva('relative rounded-md p-3 *:data-icon:absolute [&>svg~*]:ps-8', {
-  variants: {
-    variant: {
-      danger: 'bg-red-800/90 text-white/80',
-      info: 'bg-neutral-200/90 text-slate-900',
-      success: 'bg-green-800/90 text-white/80',
-      warning: 'bg-amber-400/90 text-slate-900',
-    },
-  },
-  defaultVariants: { variant: 'info' },
-});
-
-/**
- * Properties for the `Alert` component.
- */
-export interface AlertProps extends BaseComponentProps, PropsWithChildren, VariantProps<typeof alertVariants> {}
-
-/**
- * The `Alert` component formats and renders a styled message. Use the
- * `variant` property to apply predefined styles.
- *
- * Compose an Alert using of combinations of: `Icon`, `Title`, and `Description`.
- *
- * **Example:**
- * ```
-  <Alert variant="danger" className="my-4" testId="task-create-alert">
-    <Alert.Icon icon="circleExclamation" />
-    <Alert.Title>Unable to create task</Alert.Title>
-    <Alert.Description>{error.message}</Alert.Description>
-  </Alert>
- * ```
- */
-const Alert = ({ children, className, variant = 'info', testId = 'alert' }: AlertProps) => {
-  return (
-    <div className={cn(alertVariants({ variant, className }))} role="alert" data-testid={testId}>
-      {children}
-    </div>
-  );
-};
-
-/**
- * The `Title` component renders the styled title text for an `Alert`.
- */
-const Title = ({ children, className, testId = 'alert-title' }: BaseComponentProps & PropsWithChildren) => {
-  return (
-    <div className={cn('mb-1 text-xl leading-none font-bold', className)} data-testid={testId}>
-      {children}
-    </div>
-  );
-};
-Alert.Title = Title;
-
-/**
- * The `Description` component renders the styled description text for an `Alert`.
- */
-const Description = ({ children, className, testId = 'alert-description' }: BaseComponentProps & PropsWithChildren) => {
-  return (
-    <div className={cn('leading-tight', className)} data-testid={testId}>
-      {children}
-    </div>
-  );
-};
-Alert.Description = Description;
-
-/**
- * The `Icon` component renders the styled icon for an `Alert`.
- */
-const Icon = ({ size = 'lg', testId = 'alert-icon', ...props }: FAIconProps) => {
-  return <FAIcon size={size} testId={testId} {...props} />;
-};
-Alert.Icon = Icon;
-
-export default Alert;
diff --git a/src/common/components/Alert/ErrorAlert.tsx b/src/common/components/Alert/ErrorAlert.tsx
index 2d8b853..272f397 100644
--- a/src/common/components/Alert/ErrorAlert.tsx
+++ b/src/common/components/Alert/ErrorAlert.tsx
@@ -1,11 +1,13 @@
+import { AlertCircleIcon } from 'lucide-react';
+
 import { cn } from 'common/utils/css';
-import { FAIconProps } from '../Icon/FAIcon';
-import Alert, { AlertProps } from './Alert';
+import { Alert, AlertDescription, AlertTitle } from '../shadcn/alert';
+import { BaseComponentProps } from 'common/utils/types';
 
 /**
  * Properties for the `ErrorAlert` component.
  */
-export interface ErrorAlertProps extends Omit<AlertProps, 'variant'>, Partial<Pick<FAIconProps, 'icon'>> {
+export interface ErrorAlertProps extends BaseComponentProps {
   title?: string;
   description: string;
 }
@@ -14,19 +16,12 @@ export interface ErrorAlertProps extends Omit<AlertProps, 'variant'>, Partial<Pi
  * The `ErrorAlert` component renders a bespoke `Alert` layout for error
  * messages.
  */
-const ErrorAlert = ({
-  className,
-  description,
-  icon = 'circleExclamation',
-  testId = 'alert-error',
-  title,
-  ...props
-}: ErrorAlertProps) => {
+const ErrorAlert = ({ className, description, testId = 'alert-error', title, ...props }: ErrorAlertProps) => {
   return (
-    <Alert variant="danger" className={cn(className)} testId={testId} {...props}>
-      <Alert.Icon icon={icon} testId={`${testId}-icon`} />
-      {title && <Alert.Title testId={`${testId}-title`}>{title}</Alert.Title>}
-      <Alert.Description testId={`${testId}-description`}>{description}</Alert.Description>
+    <Alert variant="destructive" className={cn(className)} data-testid={testId} {...props}>
+      <AlertCircleIcon />
+      {title && <AlertTitle data-testid={`${testId}-title`}>{title}</AlertTitle>}
+      <AlertDescription data-testid={`${testId}-description`}>{description}</AlertDescription>
     </Alert>
   );
 };
diff --git a/src/common/components/Alert/__stories__/ErrorAlert.stories.tsx b/src/common/components/Alert/__stories__/ErrorAlert.stories.tsx
index cadf6d8..5de36b5 100644
--- a/src/common/components/Alert/__stories__/ErrorAlert.stories.tsx
+++ b/src/common/components/Alert/__stories__/ErrorAlert.stories.tsx
@@ -7,10 +7,8 @@ const meta = {
   component: ErrorAlert,
   tags: ['autodocs'],
   argTypes: {
-    children: { description: 'The content.' },
     className: { description: 'Additional CSS classes.' },
     description: { description: 'The detailed description.' },
-    icon: { description: 'The icon name.', type: 'string' },
     testId: { description: 'The test identifier.', type: 'string' },
     title: { description: 'The title.' },
   },
@@ -33,11 +31,3 @@ export const DescriptionOnly: Story = {
     description: 'Some problem has occurred. Please check your work and try again.',
   },
 };
-
-export const WithAlternateIcon: Story = {
-  args: {
-    icon: 'phone',
-    title: 'This is bad!',
-    description: 'You probably need to call customer support.',
-  },
-};
diff --git a/src/common/components/Alert/__tests__/Alert.test.tsx b/src/common/components/Alert/__tests__/Alert.test.tsx
deleted file mode 100644
index 56e5a88..0000000
--- a/src/common/components/Alert/__tests__/Alert.test.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen } from 'test/test-utils';
-
-import Alert from '../Alert';
-
-describe('Alert', () => {
-  it('should render successfully', async () => {
-    // ARRANGE
-    render(<Alert />);
-    await screen.findByTestId('alert');
-
-    // ASSERT
-    expect(screen.getByTestId('alert')).toBeDefined();
-  });
-
-  it('should use custom test ID', async () => {
-    // ARRANGE
-    render(<Alert testId="custom-testid" />);
-    await screen.findByTestId('custom-testid');
-
-    expect(screen.queryByTestId('alert')).toBeNull();
-    expect(screen.getByTestId('custom-testid')).toBeDefined();
-  });
-
-  it('should use classes from className property', async () => {
-    // ARRANGE
-    render(<Alert className="custom-class" />);
-    await screen.findByTestId('alert');
-
-    // ASSERT
-    expect(screen.getByTestId('alert').classList).toContain('custom-class');
-  });
-
-  it('should render the info variant', async () => {
-    // ARRANGE
-    render(<Alert variant="info" />);
-    await screen.findByTestId('alert');
-
-    // ASSERT
-    expect(screen.getByTestId('alert').classList).toContain('bg-neutral-200/90');
-  });
-
-  it('should render the warning variant', async () => {
-    // ARRANGE
-    render(<Alert variant="warning" />);
-    await screen.findByTestId('alert');
-
-    // ASSERT
-    expect(screen.getByTestId('alert').classList).toContain('bg-amber-400/90');
-  });
-
-  it('should render the danger variant', async () => {
-    // ARRANGE
-    render(<Alert variant="danger" />);
-    await screen.findByTestId('alert');
-
-    // ASSERT
-    expect(screen.getByTestId('alert').classList).toContain('bg-red-800/90');
-  });
-
-  it('should render the success variant', async () => {
-    // ARRANGE
-    render(<Alert variant="success" />);
-    await screen.findByTestId('alert');
-
-    // ASSERT
-    expect(screen.getByTestId('alert').classList).toContain('bg-green-800/90');
-  });
-
-  it('should render the default variant when variant not specified', async () => {
-    // ARRANGE
-    render(<Alert />);
-    await screen.findByTestId('alert');
-
-    // ASSERT
-    expect(screen.getByTestId('alert').classList).toContain('bg-neutral-200/90');
-  });
-
-  it('should have role=alert', async () => {
-    // ARRANGE
-    render(<Alert />);
-    await screen.findByTestId('alert');
-
-    // ASSERT
-    expect(screen.getByTestId('alert').getAttribute('role')).toBe('alert');
-  });
-});
diff --git a/src/common/components/Alert/__stories__/Alert.stories.tsx b/src/common/components/shadcn/__stories__/Alert.stories.tsx
similarity index 65%
rename from src/common/components/Alert/__stories__/Alert.stories.tsx
rename to src/common/components/shadcn/__stories__/Alert.stories.tsx
index d82f921..140e67b 100644
--- a/src/common/components/Alert/__stories__/Alert.stories.tsx
+++ b/src/common/components/shadcn/__stories__/Alert.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CircleAlertIcon, Info } from 'lucide-react';
 
-import Alert from '../Alert';
+import { Alert, AlertDescription, AlertTitle } from '../alert';
 
 const meta = {
   title: 'Common/Alert/Alert',
@@ -12,9 +13,8 @@ const meta = {
     variant: {
       description: 'Optional. The style variant.',
       control: { type: 'select' },
-      options: ['danger', 'info', 'success', 'warning'],
+      options: ['default', 'destructive', 'info', 'success', 'warning'],
     },
-    testId: { description: 'The test identifier.' },
   },
 } satisfies Meta<typeof Alert>;
 
@@ -25,93 +25,109 @@ type Story = StoryObj<typeof meta>;
 export const WithIcon: Story = {
   render: (args) => (
     <Alert {...args}>
-      <Alert.Icon icon="circleExclamation" />
-      <Alert.Title>Something unexpected has happened!</Alert.Title>
-      <Alert.Description>
+      <CircleAlertIcon />
+      <AlertTitle>Something unexpected has happened!</AlertTitle>
+      <AlertDescription>
         Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
         Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
         Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
         incididunt.
-      </Alert.Description>
+      </AlertDescription>
     </Alert>
   ),
   args: {
-    variant: 'danger',
+    variant: 'destructive',
   },
 };
 
 export const NoIcon: Story = {
   render: (args) => (
     <Alert {...args}>
-      <Alert.Title>Something unexpected has happened!</Alert.Title>
-      <Alert.Description>
+      <AlertTitle>Something unexpected has happened!</AlertTitle>
+      <AlertDescription>
         Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
         Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
         Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
         incididunt.
-      </Alert.Description>
+      </AlertDescription>
     </Alert>
   ),
   args: {
-    variant: 'danger',
+    variant: 'destructive',
   },
 };
 
 export const DescriptionOnly: Story = {
   render: (args) => (
     <Alert {...args}>
-      <Alert.Description>
+      <AlertDescription>
         Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
         Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
         Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
         incididunt.
-      </Alert.Description>
+      </AlertDescription>
     </Alert>
   ),
   args: {
-    variant: 'danger',
+    variant: 'destructive',
   },
 };
 
 export const TitleOnly: Story = {
   render: (args) => (
     <Alert {...args}>
-      <Alert.Icon icon="circleExclamation" />
-      <Alert.Title>Something unexpected has happened!</Alert.Title>
+      <CircleAlertIcon />
+      <AlertTitle>Something unexpected has happened!</AlertTitle>
     </Alert>
   ),
   args: {
-    variant: 'danger',
+    variant: 'destructive',
   },
 };
 
-export const Info: Story = {
+export const DefaultVariant: Story = {
   render: (args) => (
     <Alert {...args}>
-      <Alert.Title>Something you should know...</Alert.Title>
-      <Alert.Description>
+      <Info />
+      <AlertTitle>Something you should know...</AlertTitle>
+      <AlertDescription>
         Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
         Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
         Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
         incididunt.
-      </Alert.Description>
+      </AlertDescription>
+    </Alert>
+  ),
+};
+
+export const DestructiveVariant: Story = {
+  render: (args) => (
+    <Alert {...args}>
+      <CircleAlertIcon />
+      <AlertTitle>Something unexpected has happened!</AlertTitle>
+      <AlertDescription>
+        Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
+        Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
+        Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
+        incididunt.
+      </AlertDescription>
     </Alert>
   ),
   args: {
-    variant: 'info',
+    variant: 'destructive',
   },
 };
 
-export const Warning: Story = {
+export const WarningVariant: Story = {
   render: (args) => (
     <Alert {...args}>
-      <Alert.Title>Proceed with caution!</Alert.Title>
-      <Alert.Description>
+      <AlertTitle>Proceed with caution!</AlertTitle>
+      <AlertDescription>
         Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
         Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
         Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
         incididunt.
-      </Alert.Description>
+      </AlertDescription>
     </Alert>
   ),
   args: {
@@ -119,16 +135,16 @@ export const Warning: Story = {
   },
 };
 
-export const Success: Story = {
+export const SuccessVariant: Story = {
   render: (args) => (
     <Alert {...args}>
-      <Alert.Title>You did it!</Alert.Title>
-      <Alert.Description>
+      <AlertTitle>You did it!</AlertTitle>
+      <AlertDescription>
         Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
         Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
         Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
         incididunt.
-      </Alert.Description>
+      </AlertDescription>
     </Alert>
   ),
   args: {
diff --git a/src/common/components/shadcn/__tests__/Alert.test.tsx b/src/common/components/shadcn/__tests__/Alert.test.tsx
new file mode 100644
index 0000000..953b3d0
--- /dev/null
+++ b/src/common/components/shadcn/__tests__/Alert.test.tsx
@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from 'test/test-utils';
+
+import { Alert } from '../alert';
+
+describe('Alert', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<Alert />);
+    const alert = await screen.findByRole('alert');
+
+    // ASSERT
+    expect(alert).toBeDefined();
+  });
+
+  it('should use custom test ID', async () => {
+    // ARRANGE
+    render(<Alert data-testid="custom-testid" />);
+    await screen.findByTestId('custom-testid');
+
+    expect(screen.queryByTestId('alert')).toBeNull();
+    expect(screen.getByTestId('custom-testid')).toBeDefined();
+  });
+
+  it('should use classes from className property', async () => {
+    // ARRANGE
+    render(<Alert className="custom-class" />);
+    const alert = await screen.findByRole('alert');
+
+    // ASSERT
+    expect(alert.classList).toContain('custom-class');
+  });
+
+  it('should render the warning variant', async () => {
+    // ARRANGE
+    render(<Alert variant="warning" />);
+    const alert = await screen.findByRole('alert');
+
+    // ASSERT
+    expect(alert.classList).toContain('text-warning');
+  });
+
+  it('should render the destructive variant', async () => {
+    // ARRANGE
+    render(<Alert variant="destructive" />);
+    const alert = await screen.findByRole('alert');
+
+    // ASSERT
+    expect(alert.classList).toContain('text-destructive');
+  });
+
+  it('should render the success variant', async () => {
+    // ARRANGE
+    render(<Alert variant="success" />);
+    const alert = await screen.findByRole('alert');
+
+    // ASSERT
+    expect(alert.classList).toContain('text-success');
+  });
+
+  it('should render the default variant when variant not specified', async () => {
+    // ARRANGE
+    render(<Alert />);
+    const alert = await screen.findByRole('alert');
+
+    // ASSERT
+    expect(alert.classList).toContain('bg-card');
+  });
+
+  it('should have role=alert', async () => {
+    // ARRANGE
+    render(<Alert />);
+    const alert = await screen.findByRole('alert');
+
+    // ASSERT
+    expect(alert.getAttribute('role')).toBe('alert');
+  });
+});
diff --git a/src/common/components/shadcn/alert.tsx b/src/common/components/shadcn/alert.tsx
new file mode 100644
index 0000000..de712c3
--- /dev/null
+++ b/src/common/components/shadcn/alert.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from 'common/utils/css';
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+        success: 'bg-card text-success *:data-[slot=alert-description]:text-success/90 *:[svg]:text-current',
+        warning: 'bg-card text-warning *:data-[slot=alert-description]:text-warning/90 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        '[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="alert-action" className={cn('absolute top-2 right-2', className)} {...props} />;
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };
diff --git a/src/index.css b/src/index.css
index ae3dfdd..9a129a1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,6 +21,12 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
+  --info: oklch(0.922 0 0 / 90%);
+  --info-foreground: oklch(0.205 0 0);
+  --success: oklch(0.448 0.119 151.328 / 90%);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.666 0.179 58.318);
+  --warning-foreground: oklch(0.205 0 0);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -56,6 +62,12 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --info: oklch(0.922 0 0 / 90%);
+  --info-foreground: oklch(0.205 0 0);
+  --success: oklch(52.7% 0.154 150.069);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.828 0.189 84.429 / 90%);
+  --warning-foreground: oklch(0.205 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
@@ -75,7 +87,7 @@
 }
 
 @theme inline {
-  --font-sans: 'Noto Sans', sans-serif;
+  --font-sans: 'Noto Sans Variable', sans-serif;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -101,6 +113,12 @@
   --color-secondary: var(--secondary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary: var(--primary);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --color-popover-foreground: var(--popover-foreground);
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
diff --git a/src/pages/Components/components/AlertComponents.tsx b/src/pages/Components/components/AlertComponents.tsx
index 3bf5574..4c8cc70 100644
--- a/src/pages/Components/components/AlertComponents.tsx
+++ b/src/pages/Components/components/AlertComponents.tsx
@@ -1,11 +1,12 @@
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
+import { AlertCircleIcon, HeartHandshake } from 'lucide-react';
 
 import { BaseComponentProps } from 'common/utils/types';
 import { ComponentProperty } from '../model/components';
 import Table from 'common/components/Table/Table';
 import CodeSnippet from 'common/components/Text/CodeSnippet';
 import Heading from 'common/components/Text/Heading';
-import Alert from 'common/components/Alert/Alert';
+import { Alert, AlertDescription, AlertTitle } from 'common/components/shadcn/alert';
 
 /**
  * The `AlertComponents` React component renders a set of examples illustrating
@@ -64,47 +65,42 @@ const AlertComponents = ({ className, testId = 'components-alert' }: BaseCompone
       <Heading level={3}>Examples</Heading>
       <div className="my-8">
         <div className="mb-2 flex place-content-center rounded-sm border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
-          <Alert variant="danger">
-            <Alert.Icon icon="circleExclamation" />
-            <Alert.Title>Uh oh!</Alert.Title>
-            <Alert.Description>Something unexpected has occurred. Please excuse our mess.</Alert.Description>
+          <Alert>
+            <HeartHandshake />
+            <AlertTitle>Tip</AlertTitle>
+            <AlertDescription>
+              Use a default alert for general information. This may be useful in various scenarios such as providing
+              helpful tips or guidance.
+            </AlertDescription>
           </Alert>
         </div>
         <CodeSnippet className="my-2" language="tsx">
-          {`<Alert variant="danger">
-  <Alert.Icon icon="circleExclamation" />
-  <Alert.Title>Uh oh!</Alert.Title>
-  <Alert.Description>
-    Something unexpected has occurred. Please excuse our mess.
-  </Alert.Description>
+          {`<Alert>
+  <HeartHandshake />
+  <AlertTitle>Tip</AlertTitle>
+  <AlertDescription>
+    Use a default alert for general information. This may be useful in various scenarios such as providing
+    helpful tips or guidance.
+  </AlertDescription>
 </Alert>`}
         </CodeSnippet>
       </div>
 
       <div className="my-8">
         <div className="mb-2 flex place-content-center rounded-sm border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
-          <Alert variant="info">
-            <Alert.Icon icon="circleInfo" />
-            <Alert.Title>Something you should know...</Alert.Title>
-            <Alert.Description>
-              Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore
-              a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est
-              justo veniam. Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet
-              qui labore a neque incididunt.
-            </Alert.Description>
+          <Alert variant="destructive">
+            <AlertCircleIcon />
+            <AlertTitle>Uh oh!</AlertTitle>
+            <AlertDescription>Something unexpected has occurred. Please excuse our mess.</AlertDescription>
           </Alert>
         </div>
         <CodeSnippet className="my-2" language="tsx">
-          {`<Alert variant="info">
-  <Alert.Icon icon="circleInfo" />
-  <Alert.Title>Something you should know...</Alert.Title>
-  <Alert.Description>
-    Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero
-    exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum
-    exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit
-    qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
-    incididunt.
-  </Alert.Description>
+          {`<Alert variant="destructive">
+  <AlertCircleIcon />
+  <AlertTitle>Uh oh!</AlertTitle>
+  <AlertDescription>
+    Something unexpected has occurred. Please excuse our mess.
+  </AlertDescription>
 </Alert>`}
         </CodeSnippet>
       </div>
@@ -112,25 +108,25 @@ const AlertComponents = ({ className, testId = 'components-alert' }: BaseCompone
       <div className="my-8">
         <div className="mb-2 flex place-content-center rounded-sm border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
           <Alert variant="warning">
-            <Alert.Title>Proceed with caution!</Alert.Title>
-            <Alert.Description>
+            <AlertTitle>Proceed with caution!</AlertTitle>
+            <AlertDescription>
               Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore
               a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est
               justo veniam. Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet
               qui labore a neque incididunt.
-            </Alert.Description>
+            </AlertDescription>
           </Alert>
         </div>
         <CodeSnippet className="my-2" language="tsx">
           {`<Alert variant="warning">
-  <Alert.Title>Proceed with caution!</Alert.Title>
-  <Alert.Description>
+  <AlertTitle>Proceed with caution!</AlertTitle>
+  <AlertDescription>
     Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero
     exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum
     exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit
     qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
     incididunt.
-  </Alert.Description>
+  </AlertDescription>
 </Alert>`}
         </CodeSnippet>
       </div>
@@ -138,25 +134,25 @@ const AlertComponents = ({ className, testId = 'components-alert' }: BaseCompone
       <div className="my-8">
         <div className="mb-2 flex place-content-center rounded-sm border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
           <Alert variant="success">
-            <Alert.Title>You did it!</Alert.Title>
-            <Alert.Description>
+            <AlertTitle>You did it!</AlertTitle>
+            <AlertDescription>
               Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore
               a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est
               justo veniam. Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet
               qui labore a neque incididunt.
-            </Alert.Description>
+            </AlertDescription>
           </Alert>
         </div>
         <CodeSnippet className="my-2" language="tsx">
           {`<Alert variant="success">
-  <Alert.Title>You did it!</Alert.Title>
-  <Alert.Description>
+  <AlertTitle>You did it!</AlertTitle>
+  <AlertDescription>
     Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero
     exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum
     exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit
     qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
     incididunt.
-  </Alert.Description>
+  </AlertDescription>
 </Alert>`}
         </CodeSnippet>
       </div>