diff --git a/docs/components/phase.mdx b/docs/components/phase.mdx
new file mode 100644
index 0000000..4efaddb
--- /dev/null
+++ b/docs/components/phase.mdx
@@ -0,0 +1,346 @@
+---
+product: dd360-ds
+title: React Phase component
+components: Phase
+---
+
+<br id='top' />
+<br />
+
+<Label>Components</Label>
+
+# <HeaderDocCustom title="Phase" pathUrl="components-phase--phase" />
+
+The Phase component is a user interface component that is used to display the status of a process. This component has three variants: <TagDocs text='phases' />, <TagDocs text='status' /> and <TagDocs text='quarters' />
+
+<br />
+<br />
+##### <span name="floating-nav">Imports</span>
+
+The first alternative is recommended since they can reduce the application bundle
+
+<WindowEditor codeString="import Phase from 'dd360-ds/Phase'" />
+<WindowEditor codeString="import { Phase } from 'dd360-ds'" />
+
+<br />
+##### <span name="floating-nav">Usage</span>
+
+Use the Phase component as shown below:
+
+<Playground className="gap-y-2">
+    <PhaseCustom icon="check" className="w-44 h-40" status="completed" numberPhase={1} textTag="Completed" />
+</Playground>
+
+The code snippet below shows how to use the Phase component:
+
+<WindowEditor
+codeString={`import { Phase } from 'dd360-ds'
+
+<Phase
+    className="w-44 h-40"
+    icon={CheckIcon}
+    status="completed"
+    textTag="Completed"
+    numberPhase={1}
+/>`}
+/>
+
+<br />
+##### <span name="floating-nav">Variant Phases</span>
+
+This variant <TagDocs text='phases' />, you can customize it with the following props:
+<CustomTheme>
+  <List>
+    <List.Item>icon: Specifies the icon of the Phase.</List.Item>
+    <List.Item>numberPhase: Specifies the number of the Phase.</List.Item>
+    <List.Item>title: Specifies the title of the Phase. The default value is Title.</List.Item>
+    <List.Item>textTag: Specifies the phase status text. The default value is Pending.</List.Item>
+    <List.Item>status: Specifies the state of the phase.The values they can receive are: completed, active and default. The default value is default.</List.Item>
+    <List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
+  </List>
+</CustomTheme>
+
+<Playground className="gap-y-2">
+    <Flex className="flex" gap="4">
+        <PhaseCustom title="Title" icon="check" className="w-44 h-40" status="completed" numberPhase={1} textTag="Completed" />
+        <PhaseCustom title="Title" icon="search" className="w-44 h-40" status="active" numberPhase={2} textTag="In progress" />
+        <PhaseCustom title="Title" icon="balance" className="w-44 h-40" status="default" numberPhase={3} textTag="Pending" />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Phase } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <Phase
+              title="Title"
+              className="w-44 h-40"
+              icon={CheckIcon}
+              status="completed"
+              textTag="Completed"
+              numberPhase={1}
+            />
+            <Phase
+              title="Title"
+              className="w-44 h-40"
+              icon={DocumentMagnifyingGlassIcon}
+              status="active"
+              textTag="In progress"
+              numberPhase={2}
+            />
+            <Phase
+              title="Title"
+              className="w-44 h-40"
+              icon={ScaleIcon}
+              status="default"
+              textTag="Pending"
+              numberPhase={3}
+            />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">Variant Status</span>
+
+This variant <TagDocs text='status' />, you can customize it with the following props:
+<CustomTheme>
+  <List>
+    <List.Item>title: Specifies the title of the Phase. The default value is Title.</List.Item>
+    <List.Item>subtitle: Specifies the subtitle of the Status.</List.Item>
+    <List.Item>textTag: Specifies the status text. The default value is Pending.</List.Item>
+    <List.Item>status: Specifies the status of the state. The values they can receive are: success, active and selected. The default value is selected.</List.Item>
+    <List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
+  </List>
+</CustomTheme>
+
+<Playground className="gap-y-2">
+    <Flex gap="4">
+        <Phase
+            className="w-44"
+            title="Title"
+            subtitle="Subtitle"
+            variant="status"
+            status="success"
+            textTag="Completed"
+        />
+        <Phase
+            className="w-44"
+            title="Title"
+            subtitle="Subtitle"
+            variant="status"
+            status="active"
+            textTag="Pending"
+        />
+        <Phase
+            className="w-44"
+            title="Title"
+            subtitle="Subtitle"
+            variant="status"
+            status="selected"
+            textTag="Neutral"
+        />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Phase } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <Phase
+              className="w-44"
+              title="Title"
+              subtitle="Subtitle"
+              variant="status"
+              status="success"
+              textTag="Completed"
+            />
+            <Phase
+              className="w-44"
+              title="Title"
+              subtitle="Subtitle"
+              variant="status"
+              status="active"
+              textTag="Pending"
+            />
+            <Phase
+              className="w-44"
+              title="Title"
+              subtitle="Subtitle"
+              variant="status"
+              status="selected"
+              textTag="Neutral"
+            />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">Variant Quarters</span>
+
+This variant <TagDocs text='quarters' />, you can customize it with the following props:
+<CustomTheme>
+  <List>
+    <List.Item>icon: Specifies the icon of the Quarters.</List.Item>
+    <List.Item>title: Specifies the title of the Quarter. The default value is Title.</List.Item>
+    <List.Item>status: Specifies the status of the state. The values they can receive are: success, active and selected. The default value is selected.</List.Item>
+    <List.Item>listData: Specifies the data of the Quarters.</List.Item>
+    <List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
+  </List>
+</CustomTheme>
+
+<Playground className="gap-y-2">
+    <Flex className="flex" gap="4">
+        <PhaseCustom 
+            title="2022" 
+            icon="calendar" 
+            className="w-44" 
+            status="active" 
+            variant="quarters" 
+            listData={[
+                {
+                  completed: true,
+                  label: "Annual",
+                },
+                {
+                  completed: true,
+                  label: "4° Quarter",
+                },
+                {
+                  completed: true,
+                  label: "3° Quarter",
+                },
+                {
+                  completed: true,
+                  label: "2° Quarter",
+                },
+                {
+                  completed: false,
+                  label: "1° Quarter",
+                },
+            ]} />
+        <PhaseCustom 
+            title="2022" 
+            icon="calendar" 
+            className="w-44" 
+            status="selected" 
+            variant="quarters" 
+            listData={[
+                {
+                  completed: true,
+                  label: "Annual",
+                },
+                {
+                  completed: true,
+                  label: "4° Quarter",
+                },
+                {
+                  completed: true,
+                  label: "3° Quarter",
+                },
+                {
+                  completed: true,
+                  label: "2° Quarter",
+                },
+                {
+                  completed: false,
+                  label: "1° Quarter",
+                },
+            ]} />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Phase } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <Phase
+              className="w-44"
+              variant="quarters"
+              status="active"
+              icon={CalendarIcon}
+              listData={[
+                {
+                  completed: true,
+                  label: "Annual",
+                },
+                {
+                  completed: true,
+                  label: "4° Quarter",
+                },
+                {
+                  completed: true,
+                  label: "3° Quarter",
+                },
+                {
+                  completed: true,
+                  label: "2° Quarter",
+                },
+                {
+                  completed: false,
+                  label: "1° Quarter",
+                },
+              ]}
+            />
+            <Phase
+              className="w-44"
+              variant="quarters"
+              status="selected"
+              icon={CalendarIcon}
+              listData={[
+                {
+                  completed: true,
+                  label: "Annual",
+                },
+                {
+                  completed: true,
+                  label: "4° Quarter",
+                },
+                {
+                  completed: true,
+                  label: "3° Quarter",
+                },
+                {
+                  completed: true,
+                  label: "2° Quarter",
+                },
+                {
+                  completed: false,
+                  label: "1° Quarter",
+                },
+              ]}
+            />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+    dataTable={[
+        { title: 'title', default: 'Title', types: ['string'], required: true },
+        { title: 'subtitle', default: '-', types: ['string']},
+        { title: 'icon', types: ['React.ElementType'] },
+        { title: 'variant', default: 'phases', types: ['phases', 'status', 'quarters'] },
+        { title: 'status', default: 'default', types: ['default', 'active', 'success', 'selected', 'completed'] },
+        { title: 'textTag', default: 'Pending', types: ['string'] },
+        { title: 'numberPhase', default: '-', types: ['number'] },
+        { title: 'listData', default: '-', types: ['array'] },
+        { title: 'className', default: '-', types: ['string'] }
+    ]}
+
+/>
+
+<AlertReactKnowledge />
+
+<BackAndForwardController />
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9e6eade..ddfdc6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@algolia/autocomplete-core": "^1.8.3",
         "@docsearch/react": "^3.5.1",
         "@vercel/analytics": "^1.0.1",
-        "dd360-ds": "6.20.1",
+        "dd360-ds": "6.22.0",
         "dd360-utils": "18.1.0",
         "gray-matter": "^4.0.3",
         "i18next": "^22.4.9",
@@ -1525,9 +1525,9 @@
       "dev": true
     },
     "node_modules/dd360-ds": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz",
-      "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==",
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.22.0.tgz",
+      "integrity": "sha512-KgQIlsLZyx90iYT73rY8c+y+73EC4X8JCeMaWOCMMkREvX7Wd3HMsNf0yQ/oo0K0lmV8Kg77DpGM3vzmvEPmlQ==",
       "dependencies": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
@@ -8005,9 +8005,9 @@
       "dev": true
     },
     "dd360-ds": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz",
-      "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==",
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.22.0.tgz",
+      "integrity": "sha512-KgQIlsLZyx90iYT73rY8c+y+73EC4X8JCeMaWOCMMkREvX7Wd3HMsNf0yQ/oo0K0lmV8Kg77DpGM3vzmvEPmlQ==",
       "requires": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
diff --git a/package.json b/package.json
index c6cb680..7d57312 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "6.20.1",
+    "dd360-ds": "6.22.0",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",
diff --git a/src/components/Layout/SideBarDocs.tsx b/src/components/Layout/SideBarDocs.tsx
index 2d23a54..4730c6f 100644
--- a/src/components/Layout/SideBarDocs.tsx
+++ b/src/components/Layout/SideBarDocs.tsx
@@ -356,6 +356,11 @@ export const components: ComponentObjectProps = {
         label: 'Portal',
         pathname: 'portal'
       },
+      {
+        label: 'Phase',
+        pathname: 'phase',
+        badge: BADGE_TYPES.new
+      },
       {
         label: 'Progress',
         pathname: 'progress',
diff --git a/src/hooks/useGetComponents.tsx b/src/hooks/useGetComponents.tsx
index b9a3e50..4768113 100644
--- a/src/hooks/useGetComponents.tsx
+++ b/src/hooks/useGetComponents.tsx
@@ -29,7 +29,8 @@ import {
   SwitchCustom,
   AlertReactKnowledge,
   HeaderDocCustom,
-  TagCustom
+  TagCustom,
+  PhaseCustom
 } from '@/modules/docs'
 import { TransitionCustom } from '@/components/Layout'
 import { useTheme } from '@/store/theme-store'
@@ -153,6 +154,7 @@ export function useGetComponents() {
     AlertReactKnowledge,
     HeaderDocCustom,
     TagCustom,
+    PhaseCustom,
     ...Components,
     SideBar
     // Add other custom components here as needed ---| Here |---
diff --git a/src/modules/docs/components/PhaseCustom.tsx b/src/modules/docs/components/PhaseCustom.tsx
new file mode 100644
index 0000000..bd12eae
--- /dev/null
+++ b/src/modules/docs/components/PhaseCustom.tsx
@@ -0,0 +1,29 @@
+import { Phase, IPhaseProps } from 'dd360-ds'
+import { InformationCircleIcon } from '@heroicons/react/solid'
+import {
+  CalendarIcon,
+  ScaleIcon,
+  DocumentAddIcon,
+  CheckIcon
+} from '@heroicons/react/outline'
+
+interface CustomTagProps {
+  icon?: 'check' | 'search' | 'balance' | 'calendar'
+  variant?: IPhaseProps['variant']
+  status: 'default' | 'active' | 'success' | 'selected' | 'completed'
+}
+
+const availableIcons = {
+  check: CheckIcon,
+  search: DocumentAddIcon,
+  balance: ScaleIcon,
+  calendar: CalendarIcon
+}
+
+const PhaseCustom = ({ icon, variant, ...otherProps }: CustomTagProps) => {
+  const customIcon = icon ? availableIcons[icon] : undefined
+
+  return <Phase {...otherProps} icon={customIcon} variant={variant} />
+}
+
+export default PhaseCustom
diff --git a/src/modules/docs/components/index.ts b/src/modules/docs/components/index.ts
index 41abd74..dace953 100644
--- a/src/modules/docs/components/index.ts
+++ b/src/modules/docs/components/index.ts
@@ -10,3 +10,4 @@ export { default as DropdownCustom } from './DropdownCustom'
 export { default as AlertReactKnowledge } from './AlertReactKnowledge'
 export { default as HeaderDocCustom } from './HeaderDocCustom'
 export { default as TagCustom } from './TagCustom'
+export { default as PhaseCustom } from './PhaseCustom'
diff --git a/src/theme/global.css b/src/theme/global.css
index cf22c64..28edfb1 100644
--- a/src/theme/global.css
+++ b/src/theme/global.css
@@ -327,3 +327,18 @@ div ::-webkit-scrollbar-corner {
 .container-cmpnt-doc span.success-filled-tag-class {
   color: #ecfdf5 !important;
 }
+div[role="container-phase"] .text-blue-50 {
+  color: #eff6ff !important;
+}
+div[role="container-phase"] .text-gray-600 {
+  color: #4b5563 !important;
+}
+div[role="container-phase"] .bg-green-500 {
+  color: #ecfdf5 !important;
+}
+div[role="container-phase"] .text-blue-700 {
+  color: #1d4ed8 !important;
+}
+div[role="container-phase"] hr {
+  border-color: #d1d5db !important;
+}