diff --git a/package.json b/package.json
index 8947e7ed..cf0b6139 100644
--- a/package.json
+++ b/package.json
@@ -41,70 +41,70 @@
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/preset-typescript": "^7.24.1",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.2",
     "@emotion/eslint-plugin": "^11.11.0",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@floating-ui/react": "^0.26.2",
-    "@floating-ui/react-dom": "^2.0.4",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@floating-ui/react": "^0.26.12",
+    "@floating-ui/react-dom": "^2.0.8",
     "@floating-ui/react-dom-interactions": "^0.13.3",
     "@hookform/resolvers": "^3.3.4",
     "@lezer/highlight": "^1.2.0",
     "@mdx-js/react": "^2.3.0",
     "@microsoft/eslint-formatter-sarif": "^3.1.0",
-    "@opentelemetry/api": "^1.7.0",
-    "@opentelemetry/context-zone": "^1.18.1",
-    "@opentelemetry/core": "^1.18.1",
-    "@opentelemetry/instrumentation": "^0.45.1",
-    "@opentelemetry/instrumentation-fetch": "^0.45.1",
-    "@opentelemetry/instrumentation-xml-http-request": "^0.45.1",
-    "@opentelemetry/sdk-trace-base": "^1.18.1",
-    "@opentelemetry/sdk-trace-web": "^1.18.1",
+    "@opentelemetry/api": "^1.8.0",
+    "@opentelemetry/context-zone": "^1.24.0",
+    "@opentelemetry/core": "^1.24.0",
+    "@opentelemetry/instrumentation": "^0.51.0",
+    "@opentelemetry/instrumentation-fetch": "^0.51.0",
+    "@opentelemetry/instrumentation-xml-http-request": "^0.51.0",
+    "@opentelemetry/sdk-trace-base": "^1.24.0",
+    "@opentelemetry/sdk-trace-web": "^1.24.0",
     "@types/convert-units": "^2.3.9",
-    "@types/dompurify": "^3.0.2",
-    "@types/lodash": "^4.14.202",
-    "@types/mustache": "^4.2.2",
+    "@types/dompurify": "^3.0.5",
+    "@types/lodash": "^4.17.0",
+    "@types/mustache": "^4.2.5",
     "@types/node": "^18.16.17",
-    "@types/react": "^18.2.38",
-    "@types/react-color": "^3.0.10",
-    "@types/react-dom": "^18.2.17",
-    "@types/react-helmet": "^6.1.9",
-    "@types/react-table": "^7.7.18",
-    "@types/react-transition-group": "^4.4.9",
-    "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "@uiw/codemirror-extensions-langs": "^4.21.21",
-    "@uiw/codemirror-themes": "^4.21.21",
-    "@uiw/react-codemirror": "^4.21.21",
-    "axios": "^1.6.2",
+    "@types/react": "^18.3.0",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-helmet": "^6.1.11",
+    "@types/react-table": "^7.7.20",
+    "@types/react-transition-group": "^4.4.10",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@uiw/codemirror-extensions-langs": "^4.21.25",
+    "@uiw/codemirror-themes": "^4.21.25",
+    "@uiw/react-codemirror": "^4.21.25",
+    "axios": "^1.6.8",
     "babel-jest": "^29.7.0",
-    "bootstrap": "^5.3.2",
-    "classnames": "^2.3.2",
+    "bootstrap": "^5.3.3",
+    "classnames": "^2.5.1",
     "detect-browser": "^5.3.0",
-    "dompurify": "^3.0.5",
-    "framer-motion": "^10.16.5",
+    "dompurify": "^3.1.1",
+    "framer-motion": "^11.1.7",
     "jest-sonar-reporter": "^2.0.0",
-    "jsoneditor": "^9.10.4",
+    "jsoneditor": "^9.10.5",
     "lodash": "^4.17.21",
     "mustache": "^4.2.0",
     "oidc-react": "^3.2.2",
     "pkijs": "^3.0.16",
-    "random-words": "^2.0.0",
+    "random-words": "^2.0.1",
     "rc-scrollbars": "^1.1.6",
-    "react": "^18.2.0",
+    "react": "^18.3.0",
     "react-app-polyfill": "^3.0.0",
     "react-avatar": "^5.0.3",
-    "react-bootstrap": "^2.9.1",
+    "react-bootstrap": "^2.10.2",
     "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.0",
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.48.2",
+    "react-hook-form": "^7.51.3",
     "react-hook-form-persist": "^3.0.0",
     "react-intl": "^5.25.1",
     "react-merge-refs": "^2.1.1",
diff --git a/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap b/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
index a066e052..e6b78b2b 100644
--- a/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
+++ b/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
@@ -209,7 +209,7 @@ exports[`<ConfirmModal> renders without crashing 1`] = `
     <div
       class="emotion-1"
       role="dialog"
-      style="opacity: 1; transform: none;"
+      style="opacity: 1; transform: translateY(0) translateZ(0);"
     >
       <div
         class="emotion-2"
diff --git a/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap
index 5177b8b5..bb3ca387 100644
--- a/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap
@@ -165,7 +165,7 @@ exports[`<Modal> render correctly - snapshot 1`] = `
       <div
         class="emotion-1"
         role="dialog"
-        style="opacity: 1; transform: none;"
+        style="opacity: 1; transform: translateY(0) translateZ(0);"
       >
         <div
           class="emotion-2"
diff --git a/src/components/Atomic/SplitButton/__snapshots__/SplitButton.test.tsx.snap b/src/components/Atomic/SplitButton/__snapshots__/SplitButton.test.tsx.snap
index 5ed5c562..04fd418c 100644
--- a/src/components/Atomic/SplitButton/__snapshots__/SplitButton.test.tsx.snap
+++ b/src/components/Atomic/SplitButton/__snapshots__/SplitButton.test.tsx.snap
@@ -235,9 +235,7 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div
-            style="transform: none;"
-          >
+          <div>
             <svg
               fill="none"
               height="16"
@@ -270,9 +268,7 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div
-            style="transform: none;"
-          >
+          <div>
             <svg
               fill="none"
               height="16"
@@ -305,9 +301,7 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div
-            style="transform: none;"
-          >
+          <div>
             <svg
               fill="none"
               height="16"
@@ -340,9 +334,7 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div
-            style="transform: none;"
-          >
+          <div>
             <svg
               fill="none"
               height="16"
@@ -391,9 +383,7 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div
-            style="transform: none;"
-          >
+          <div>
             <svg
               fill="none"
               height="16"
@@ -442,9 +432,7 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div
-            style="transform: none;"
-          >
+          <div>
             <svg
               fill="none"
               height="16"
@@ -494,9 +482,7 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div
-            style="transform: none;"
-          >
+          <div>
             <svg
               fill="none"
               height="16"
@@ -546,9 +532,7 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div
-            style="transform: none;"
-          >
+          <div>
             <svg
               fill="none"
               height="16"
diff --git a/src/components/Organisms/CaList/index.ts b/src/components/Organisms/CaList/index.ts
new file mode 100644
index 00000000..86bc8024
--- /dev/null
+++ b/src/components/Organisms/CaList/index.ts
@@ -0,0 +1,2 @@
+export { default } from './CaList'
+export * from './CaList'
diff --git a/src/components/Templates/FullPageWizard/FullPageWizard.test.tsx b/src/components/Templates/FullPageWizard/FullPageWizard.test.tsx
new file mode 100644
index 00000000..c1a644a9
--- /dev/null
+++ b/src/components/Templates/FullPageWizard/FullPageWizard.test.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import FullPageWizard from './FullPageWizard'
+
+describe('FullPageWizard', () => {
+    const props = {
+        activeStep: 0,
+        steps: [
+            { name: 'Step 1', description: 'Description 1' },
+            { name: 'Step 2', description: 'Description 2' },
+            { name: 'Step 3', description: 'Description 3' },
+        ],
+        onStepChange: () => {},
+        title: 'Test Title',
+    }
+
+    it('renders without crashing', () => {
+        const { container, asFragment } = render(<FullPageWizard {...props} />)
+        expect(container.firstChild).toBeInTheDocument()
+        expect(asFragment()).toMatchSnapshot()
+    })
+
+    it('renders the correct number of steps', () => {
+        const { getAllByRole } = render(<FullPageWizard {...props} />)
+        const steps = getAllByRole('listitem')
+        expect(steps.length).toBe(props.steps.length)
+    })
+
+    it('calls onStepChange when a step is clicked', () => {
+        const mockOnStepChange = jest.fn()
+        const { getAllByRole } = render(<FullPageWizard {...props} activeStep={1} onStepChange={mockOnStepChange} visitedStep={0} />)
+        const steps = getAllByRole('link')
+        fireEvent.click(steps[0])
+        expect(mockOnStepChange).toHaveBeenCalledWith(0)
+    })
+
+    it('does not call onStepChange when a non-visited step is clicked', () => {
+        const mockOnStepChange = jest.fn()
+        const { getAllByRole } = render(<FullPageWizard {...props} onStepChange={mockOnStepChange} visitedStep={0} />)
+        const steps = getAllByRole('link')
+        fireEvent.click(steps[1])
+        expect(mockOnStepChange).not.toHaveBeenCalled()
+    })
+
+    it('calls onClose when close button is clicked', () => {
+        const mockOnClose = jest.fn()
+        const { getByRole } = render(<FullPageWizard {...props} onClose={mockOnClose} />)
+        const closeButton = getByRole('button')
+        fireEvent.click(closeButton)
+        expect(mockOnClose).toHaveBeenCalled()
+    })
+})
diff --git a/src/components/Templates/FullPageWizard/FullPageWizard.tsx b/src/components/Templates/FullPageWizard/FullPageWizard.tsx
index 4652b8ab..d8c91aa2 100644
--- a/src/components/Templates/FullPageWizard/FullPageWizard.tsx
+++ b/src/components/Templates/FullPageWizard/FullPageWizard.tsx
@@ -32,18 +32,22 @@ const FullPageWizard: ComponentType<Props> = (props) => {
                                 <li css={[activeStep >= key && styles.visited]} key={key}>
                                     <div css={styles.icon}>
                                         {activeStep > key ? (
-                                            <IconDone fill={theme.colorPalette.primary} />
+                                            <IconDone fill={theme?.colorPalette?.primary} />
                                         ) : (
-                                            <IconCircle fill={activeStep >= key ? theme.colorPalette.primary : theme.colorPalette.neutral300} />
+                                            <IconCircle fill={activeStep >= key ? theme?.colorPalette?.primary : theme?.colorPalette?.neutral300} />
                                         )}
                                     </div>
                                     <a
-                                        css={[styles.link, activeStep >= key && styles.visited, visitedStep && visitedStep >= key && styles.activeLink]}
+                                        css={[
+                                            styles.link,
+                                            activeStep >= key && styles.visited,
+                                            visitedStep !== undefined && visitedStep >= key && styles.activeLink,
+                                        ]}
                                         href='#'
                                         onClick={(e) => {
                                             e.preventDefault()
 
-                                            if (visitedStep && visitedStep >= key) {
+                                            if (visitedStep !== undefined && visitedStep >= key) {
                                                 isFunction(onStepChange) && onStepChange(key)
                                             }
                                         }}
@@ -64,8 +68,9 @@ const FullPageWizard: ComponentType<Props> = (props) => {
                             e.preventDefault()
                             isFunction(onClose) && onClose()
                         }}
+                        role='button'
                     >
-                        <span>{i18n.close}</span>
+                        <span>{i18n?.close}</span>
                         <IconCloseCircle {...convertSize(32)} />
                     </a>
                     <div css={styles.content}>{children}</div>
diff --git a/src/components/Templates/FullPageWizard/FullPageWizard.types.ts b/src/components/Templates/FullPageWizard/FullPageWizard.types.ts
index 42f78653..aa133c89 100644
--- a/src/components/Templates/FullPageWizard/FullPageWizard.types.ts
+++ b/src/components/Templates/FullPageWizard/FullPageWizard.types.ts
@@ -12,10 +12,10 @@ export interface ComponentType<P> extends FC<P> {
 export type Props = {
     activeStep: number
     children?: ReactNode
-    i18n: {
+    i18n?: {
         close: string
     }
-    onClose: () => void
+    onClose?: () => void
     onStepChange: (step: number) => void
     steps: { name: string; description?: string; link?: string }[]
     title: string
diff --git a/src/components/Templates/FullPageWizard/__snapshots__/FullPageWizard.test.tsx.snap b/src/components/Templates/FullPageWizard/__snapshots__/FullPageWizard.test.tsx.snap
new file mode 100644
index 00000000..fbfd3d7d
--- /dev/null
+++ b/src/components/Templates/FullPageWizard/__snapshots__/FullPageWizard.test.tsx.snap
@@ -0,0 +1,375 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FullPageWizard renders without crashing 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.emotion-2 {
+  -webkit-flex: 0 0 500px;
+  -ms-flex: 0 0 500px;
+  flex: 0 0 500px;
+}
+
+@media (max-width: 1199px) {
+  .emotion-2 {
+    -webkit-flex: 0 0 400px;
+    -ms-flex: 0 0 400px;
+    flex: 0 0 400px;
+  }
+}
+
+@media (max-width: 991px) {
+  .emotion-2 {
+    -webkit-flex: 0 0 320px;
+    -ms-flex: 0 0 320px;
+    flex: 0 0 320px;
+  }
+}
+
+.emotion-3 {
+  padding: 32px 48px;
+}
+
+@media (max-width: 991px) {
+  .emotion-3 {
+    padding: 16px;
+  }
+}
+
+.emotion-4 {
+  margin: 64px 0 0 0;
+  padding-left: 56px;
+  list-style: none;
+  position: relative;
+}
+
+.emotion-4 li {
+  display: block;
+  position: relative;
+}
+
+.emotion-4 li+li {
+  margin-top: 24px;
+}
+
+.emotion-4 li+li:after {
+  content: '';
+  display: block;
+  width: 1px;
+  height: calc(100% - 20px);
+  position: absolute;
+  left: -28px;
+  top: -20px;
+  bottom: 10px;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+.emotion-5 {
+  opacity: 1;
+}
+
+.emotion-5:after {
+  background: !important;
+}
+
+.emotion-6 {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  left: -44px;
+}
+
+.emotion-7 {
+  font-weight: 600;
+  opacity: 0.6;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  cursor: default;
+  opacity: 1;
+}
+
+.emotion-7:hover {
+  -webkit-text-decoration: none!important;
+  text-decoration: none!important;
+}
+
+.emotion-7:after {
+  background: !important;
+}
+
+.emotion-8 {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  margin: 0;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  opacity: 1;
+}
+
+.emotion-8:after {
+  background: !important;
+}
+
+.emotion-11 {
+  font-weight: 600;
+  opacity: 0.6;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  cursor: default;
+}
+
+.emotion-11:hover {
+  -webkit-text-decoration: none!important;
+  text-decoration: none!important;
+}
+
+.emotion-17 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  padding: 32px 48px;
+  position: relative;
+  overflow: auto;
+}
+
+@media (max-width: 991px) {
+  .emotion-17 {
+    padding: 16px;
+  }
+}
+
+.emotion-18 {
+  position: fixed;
+  top: 28px;
+  right: 44px;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 4px;
+  z-index: 2;
+  border-radius: 8px;
+}
+
+.emotion-18 span {
+  padding-right: 8px;
+}
+
+@media (max-width: 991px) {
+  .emotion-18 span {
+    display: none;
+  }
+}
+
+.emotion-18:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-19 {
+  max-width: 600px;
+  margin: auto;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div
+      class="emotion-1"
+    >
+      <div
+        class="emotion-2"
+      >
+        <div
+          class="emotion-3"
+        >
+          <ul
+            class="emotion-4"
+          >
+            <li
+              class="emotion-5"
+            >
+              <div
+                class="emotion-6"
+              >
+                <svg
+                  fill="none"
+                  height="32"
+                  viewBox="0 0 32 32"
+                  width="32"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="16"
+                    cy="16"
+                    r="6.25"
+                    stroke="#2261AE"
+                    stroke-width="1.5"
+                  />
+                </svg>
+              </div>
+              <a
+                class="emotion-7"
+                href="#"
+                role="link"
+              >
+                Step 1
+              </a>
+              <p
+                class="emotion-8"
+              >
+                Description 1
+              </p>
+            </li>
+            <li
+              class="emotion-9"
+            >
+              <div
+                class="emotion-6"
+              >
+                <svg
+                  fill="none"
+                  height="32"
+                  viewBox="0 0 32 32"
+                  width="32"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="16"
+                    cy="16"
+                    r="6.25"
+                    stroke="#2261AE"
+                    stroke-width="1.5"
+                  />
+                </svg>
+              </div>
+              <a
+                class="emotion-11"
+                href="#"
+                role="link"
+              >
+                Step 2
+              </a>
+              <p
+                class="emotion-8"
+              >
+                Description 2
+              </p>
+            </li>
+            <li
+              class="emotion-9"
+            >
+              <div
+                class="emotion-6"
+              >
+                <svg
+                  fill="none"
+                  height="32"
+                  viewBox="0 0 32 32"
+                  width="32"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="16"
+                    cy="16"
+                    r="6.25"
+                    stroke="#2261AE"
+                    stroke-width="1.5"
+                  />
+                </svg>
+              </div>
+              <a
+                class="emotion-11"
+                href="#"
+                role="link"
+              >
+                Step 3
+              </a>
+              <p
+                class="emotion-8"
+              >
+                Description 3
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div
+        class="emotion-17"
+      >
+        <a
+          class="emotion-18"
+          href="#"
+          role="button"
+        >
+          <span />
+          <svg
+            fill="none"
+            height="32"
+            viewBox="0 0 32 32"
+            width="32"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16 29.333c7.333 0 13.333-6 13.333-13.333S23.333 2.667 16 2.667 2.667 8.667 2.667 16s6 13.333 13.333 13.333M12.227 19.773l7.546-7.546M19.773 19.773l-7.546-7.546"
+              stroke="currentcolor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+          </svg>
+        </a>
+        <div
+          class="emotion-19"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/stories/Layout/BottomPanel.stories.tsx b/src/stories/Layout/BottomPanel.stories.tsx
new file mode 100644
index 00000000..e09eb39b
--- /dev/null
+++ b/src/stories/Layout/BottomPanel.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import BottomPanel from '../../components/Layout/BottomPanel/BottomPanel'
+import Button from '../../components/Atomic/Button'
+
+export default {
+    title: 'Layout/BottomPanel',
+    component: BottomPanel,
+    argTypes: {},
+} as Meta<typeof BottomPanel>
+
+type Story = StoryObj<typeof BottomPanel>
+
+const Template = (args: any) => (
+    <BottomPanel
+        {...args}
+        show
+        actionPrimary={<Button variant='primary'>Primary action</Button>}
+        actionSecondary={<Button>Secondary action</Button>}
+        attribute='Test Attribute'
+        leftPanelCollapsed={true}
+        value='Test Value'
+    />
+)
+
+export const Default: Story = {
+    args: {},
+    parameters: {
+        layout: 'fullscreen',
+    },
+    render: (args) => <Template {...args} activeStep={0} />,
+}
diff --git a/src/stories/Layout/FullPageWizard.stories.tsx b/src/stories/Layout/FullPageWizard.stories.tsx
new file mode 100644
index 00000000..c8700ddc
--- /dev/null
+++ b/src/stories/Layout/FullPageWizard.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import FullPageWizard from '../../components/Templates/FullPageWizard'
+import { Meta, StoryObj } from '@storybook/react'
+
+export default {
+    title: 'Layout/FullPageWizard',
+    component: FullPageWizard,
+    argTypes: {},
+} as Meta<typeof FullPageWizard>
+
+type Story = StoryObj<typeof FullPageWizard>
+
+const Template = (args: any) => (
+    <FullPageWizard
+        {...args}
+        onStepChange={() => {}}
+        steps={[
+            { name: 'Step 1', description: 'Description 1' },
+            { name: 'Step 2', description: 'Description 2' },
+            { name: 'Step 3', description: 'Description 3' },
+        ]}
+        title='Test Title'
+    />
+)
+
+export const Default: Story = {
+    args: {},
+    parameters: {
+        layout: 'fullscreen',
+    },
+    render: (args) => <Template {...args} activeStep={0} />,
+}
+
+export const ActiveStep: Story = {
+    args: {},
+    parameters: {
+        layout: 'fullscreen',
+    },
+    render: (args) => <Template {...args} activeStep={1} />,
+}
diff --git a/src/stories/Modal/AddClientModal.stories.jsx b/src/stories/Modal/AddClientModal.stories.jsx
index 0d760579..29ccab12 100644
--- a/src/stories/Modal/AddClientModal.stories.jsx
+++ b/src/stories/Modal/AddClientModal.stories.jsx
@@ -3,7 +3,7 @@ import Button from '../../components/Atomic/Button'
 import { AddClientModal } from '../../components/Atomic/Modal'
 
 export default {
-    title: 'Modal/AddClientModal',
+    title: 'Modals/AddClientModal',
     component: AddClientModal,
     argTypes: {
         layout: 'fullscreen',
diff --git a/src/stories/Modal/DeleteModal.stories.jsx b/src/stories/Modal/DeleteModal.stories.jsx
index 7ee8958a..c1656643 100644
--- a/src/stories/Modal/DeleteModal.stories.jsx
+++ b/src/stories/Modal/DeleteModal.stories.jsx
@@ -3,7 +3,7 @@ import Button from '../../components/Atomic/Button'
 import { DeleteModal } from '../../components/Atomic/Modal'
 
 export default {
-    title: 'Modal/DeleteModal',
+    title: 'Modals/DeleteModal',
     component: DeleteModal,
     argTypes: {
         layout: 'fullscreen',
diff --git a/src/stories/Modal/Modal.stories.jsx b/src/stories/Modal/Modal.stories.jsx
index 62d9aacf..88718f70 100644
--- a/src/stories/Modal/Modal.stories.jsx
+++ b/src/stories/Modal/Modal.stories.jsx
@@ -7,7 +7,7 @@ import TimeoutControl from '../../components/Atomic/TimeoutControl'
 import Editor from '../../components/Atomic/Editor'
 
 export default {
-    title: 'Modal/Default',
+    title: 'Modals/Default',
     component: Modal,
     argTypes: {
         layout: 'fullscreen',
diff --git a/src/stories/Modal/ProvisionDeviceModal.stories.jsx b/src/stories/Modal/ProvisionDeviceModal.stories.jsx
index bbc7ce2c..d8998503 100644
--- a/src/stories/Modal/ProvisionDeviceModal.stories.jsx
+++ b/src/stories/Modal/ProvisionDeviceModal.stories.jsx
@@ -3,7 +3,7 @@ import Button from '../../components/Atomic/Button'
 import { ProvisionDeviceModal } from '../../components/Atomic/Modal'
 
 export default {
-    title: 'Modal/ProvisionDeviceModal',
+    title: 'Modals/ProvisionDeviceModal',
     component: ProvisionDeviceModal,
     argTypes: {
         layout: 'fullscreen',
diff --git a/src/stories/Modal/ShareDeviceModal.stories.jsx b/src/stories/Modal/ShareDeviceModal.stories.jsx
index cfd87972..fe2a6dc4 100644
--- a/src/stories/Modal/ShareDeviceModal.stories.jsx
+++ b/src/stories/Modal/ShareDeviceModal.stories.jsx
@@ -3,7 +3,7 @@ import Button from '../../components/Atomic/Button'
 import ShareDeviceModal from '../../components/Atomic/Modal/components/ShareDeviceModal'
 
 export default {
-    title: 'Modal/ShareDeviceModal',
+    title: 'Modals/ShareDeviceModal',
     component: ShareDeviceModal,
     argTypes: {
         layout: 'fullscreen',
diff --git a/src/stories/Organism/CaList.stories.tsx b/src/stories/Organism/CaList.stories.tsx
new file mode 100644
index 00000000..db6c486d
--- /dev/null
+++ b/src/stories/Organism/CaList.stories.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import CaList from '../../components/Organisms/CaList'
+
+export default {
+    title: 'Organism/CaList',
+    component: CaList,
+    argTypes: {},
+} as Meta<typeof CaList>
+
+type Story = StoryObj<typeof CaList>
+
+export const Default: Story = {
+    args: {},
+    parameters: {
+        layout: 'fullscreen',
+    },
+    render: (args) => (
+        <div
+            style={{
+                margin: '50px',
+            }}
+        >
+            <CaList
+                {...args}
+                data={[
+                    { id: 0, name: 'ca-item-0', data: {}, dataChain: '' },
+                    { id: 1, name: 'ca-item-1', data: {}, dataChain: '' },
+                    { id: 2, name: 'ca-item-2', data: {}, dataChain: '' },
+                    { id: 3, name: 'ca-item-3', data: {}, dataChain: '' },
+                    { id: 4, name: 'ca-item-4', data: {}, dataChain: '' },
+                ]}
+                i18n={{ download: 'Download', delete: 'Delete', view: 'View' }}
+                largePadding={false}
+            />
+        </div>
+    ),
+}
diff --git a/src/stories/CaPool.stories.tsx b/src/stories/Organism/CaPool.stories.tsx
similarity index 95%
rename from src/stories/CaPool.stories.tsx
rename to src/stories/Organism/CaPool.stories.tsx
index ca671fe9..5aead099 100644
--- a/src/stories/CaPool.stories.tsx
+++ b/src/stories/Organism/CaPool.stories.tsx
@@ -1,11 +1,10 @@
 import React, { useCallback, useState } from 'react'
 import cloneDeep from 'lodash/cloneDeep'
 import { StoryFn } from '@storybook/react'
-
-import CaPool from '../components/Organisms/CaPool'
+import CaPool from '../../components/Organisms/CaPool'
 
 export default {
-    title: 'Example/CaPool',
+    title: 'Organism/CaPool',
     component: CaPool,
     argTypes: {},
 }
diff --git a/tests/components.spec.ts b/tests/components.spec.ts
index f70c0ba2..c23b7345 100644
--- a/tests/components.spec.ts
+++ b/tests/components.spec.ts
@@ -1,17 +1,10 @@
 import { test, expect, Page } from '@playwright/test'
 
-type ComponentType = {
-    name: string
-    views?: string[]
-    default?: boolean
-}
-
 const components = [
     {
         group: 'Example',
         items: [
             { name: 'Alert' },
-            { name: 'CaPool' },
             { name: 'CodeEditor' },
             { name: 'Editor' },
             { name: 'Headline' },
@@ -49,6 +42,10 @@ const components = [
             { name: 'TimeoutControl' },
         ],
     },
+    {
+        group: 'Organism',
+        items: [{ name: 'CaPool' }, { name: 'CaList' }],
+    },
     {
         group: 'Pages',
         items: [{ name: 'InitializedByDifferentUser' }],
@@ -65,9 +62,11 @@ const components = [
     {
         group: 'Layout',
         items: [
+            { name: 'BottomPanel' },
             { name: 'Content', views: ['default', 'headline-status-tag'] },
             { name: 'ContentMenu' },
             { name: 'Footer' },
+            { name: 'FullPageWizard', views: ['default', 'active-step'] },
             { name: 'Header', views: ['default', 'breadcrumb'] },
             { name: 'Layout' },
             { name: 'LeftPanel', views: ['default', 'active-item', 'new-feature', 'collapsed'] },
@@ -79,7 +78,7 @@ const components = [
         items: [{ name: 'IconLoader' }],
     },
     {
-        group: 'Modal',
+        group: 'Modals',
         items: [{ name: 'AddClientModal' }, { name: 'DeleteModal' }, { name: 'ProvisionDeviceModal' }, { name: 'ShareDeviceModal' }],
     },
     {
diff --git a/tests/components.spec.ts-snapshots/Layout-BottomPanel-default-1-Google-Chrome-darwin.png b/tests/components.spec.ts-snapshots/Layout-BottomPanel-default-1-Google-Chrome-darwin.png
new file mode 100644
index 00000000..10997099
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Layout-BottomPanel-default-1-Google-Chrome-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Layout-BottomPanel-default-1-chromium-darwin.png b/tests/components.spec.ts-snapshots/Layout-BottomPanel-default-1-chromium-darwin.png
new file mode 100644
index 00000000..10997099
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Layout-BottomPanel-default-1-chromium-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Layout-FullPageWizard-active-step-1-Google-Chrome-darwin.png b/tests/components.spec.ts-snapshots/Layout-FullPageWizard-active-step-1-Google-Chrome-darwin.png
new file mode 100644
index 00000000..9259bd51
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Layout-FullPageWizard-active-step-1-Google-Chrome-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Layout-FullPageWizard-active-step-1-chromium-darwin.png b/tests/components.spec.ts-snapshots/Layout-FullPageWizard-active-step-1-chromium-darwin.png
new file mode 100644
index 00000000..9259bd51
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Layout-FullPageWizard-active-step-1-chromium-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Layout-FullPageWizard-default-1-Google-Chrome-darwin.png b/tests/components.spec.ts-snapshots/Layout-FullPageWizard-default-1-Google-Chrome-darwin.png
new file mode 100644
index 00000000..ae36e4d0
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Layout-FullPageWizard-default-1-Google-Chrome-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Layout-FullPageWizard-default-1-chromium-darwin.png b/tests/components.spec.ts-snapshots/Layout-FullPageWizard-default-1-chromium-darwin.png
new file mode 100644
index 00000000..ae36e4d0
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Layout-FullPageWizard-default-1-chromium-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Modal-AddClientModal-default-1-Google-Chrome-darwin.png b/tests/components.spec.ts-snapshots/Modals-AddClientModal-default-1-Google-Chrome-darwin.png
similarity index 100%
rename from tests/components.spec.ts-snapshots/Modal-AddClientModal-default-1-Google-Chrome-darwin.png
rename to tests/components.spec.ts-snapshots/Modals-AddClientModal-default-1-Google-Chrome-darwin.png
diff --git a/tests/components.spec.ts-snapshots/Modals-AddClientModal-default-1-chromium-darwin.png b/tests/components.spec.ts-snapshots/Modals-AddClientModal-default-1-chromium-darwin.png
new file mode 100644
index 00000000..0951b9a8
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Modals-AddClientModal-default-1-chromium-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Modal-DeleteModal-default-1-Google-Chrome-darwin.png b/tests/components.spec.ts-snapshots/Modals-DeleteModal-default-1-Google-Chrome-darwin.png
similarity index 100%
rename from tests/components.spec.ts-snapshots/Modal-DeleteModal-default-1-Google-Chrome-darwin.png
rename to tests/components.spec.ts-snapshots/Modals-DeleteModal-default-1-Google-Chrome-darwin.png
diff --git a/tests/components.spec.ts-snapshots/Modal-DeleteModal-default-1-chromium-darwin.png b/tests/components.spec.ts-snapshots/Modals-DeleteModal-default-1-chromium-darwin.png
similarity index 75%
rename from tests/components.spec.ts-snapshots/Modal-DeleteModal-default-1-chromium-darwin.png
rename to tests/components.spec.ts-snapshots/Modals-DeleteModal-default-1-chromium-darwin.png
index aba9d70b..b4bf99f2 100644
Binary files a/tests/components.spec.ts-snapshots/Modal-DeleteModal-default-1-chromium-darwin.png and b/tests/components.spec.ts-snapshots/Modals-DeleteModal-default-1-chromium-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Modal-ProvisionDeviceModal-default-1-Google-Chrome-darwin.png b/tests/components.spec.ts-snapshots/Modals-ProvisionDeviceModal-default-1-Google-Chrome-darwin.png
similarity index 100%
rename from tests/components.spec.ts-snapshots/Modal-ProvisionDeviceModal-default-1-Google-Chrome-darwin.png
rename to tests/components.spec.ts-snapshots/Modals-ProvisionDeviceModal-default-1-Google-Chrome-darwin.png
diff --git a/tests/components.spec.ts-snapshots/Modal-ProvisionDeviceModal-default-1-chromium-darwin.png b/tests/components.spec.ts-snapshots/Modals-ProvisionDeviceModal-default-1-chromium-darwin.png
similarity index 100%
rename from tests/components.spec.ts-snapshots/Modal-ProvisionDeviceModal-default-1-chromium-darwin.png
rename to tests/components.spec.ts-snapshots/Modals-ProvisionDeviceModal-default-1-chromium-darwin.png
diff --git a/tests/components.spec.ts-snapshots/Modal-ShareDeviceModal-default-1-Google-Chrome-darwin.png b/tests/components.spec.ts-snapshots/Modals-ShareDeviceModal-default-1-Google-Chrome-darwin.png
similarity index 100%
rename from tests/components.spec.ts-snapshots/Modal-ShareDeviceModal-default-1-Google-Chrome-darwin.png
rename to tests/components.spec.ts-snapshots/Modals-ShareDeviceModal-default-1-Google-Chrome-darwin.png
diff --git a/tests/components.spec.ts-snapshots/Modal-ShareDeviceModal-default-1-chromium-darwin.png b/tests/components.spec.ts-snapshots/Modals-ShareDeviceModal-default-1-chromium-darwin.png
similarity index 100%
rename from tests/components.spec.ts-snapshots/Modal-ShareDeviceModal-default-1-chromium-darwin.png
rename to tests/components.spec.ts-snapshots/Modals-ShareDeviceModal-default-1-chromium-darwin.png
diff --git a/tests/components.spec.ts-snapshots/Organism-CaList-default-1-Google-Chrome-darwin.png b/tests/components.spec.ts-snapshots/Organism-CaList-default-1-Google-Chrome-darwin.png
new file mode 100644
index 00000000..a4cc5832
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Organism-CaList-default-1-Google-Chrome-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Organism-CaList-default-1-chromium-darwin.png b/tests/components.spec.ts-snapshots/Organism-CaList-default-1-chromium-darwin.png
new file mode 100644
index 00000000..a4cc5832
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Organism-CaList-default-1-chromium-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Organism-CaPool-default-1-Google-Chrome-darwin.png b/tests/components.spec.ts-snapshots/Organism-CaPool-default-1-Google-Chrome-darwin.png
new file mode 100644
index 00000000..6b8daf74
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Organism-CaPool-default-1-Google-Chrome-darwin.png differ
diff --git a/tests/components.spec.ts-snapshots/Organism-CaPool-default-1-chromium-darwin.png b/tests/components.spec.ts-snapshots/Organism-CaPool-default-1-chromium-darwin.png
new file mode 100644
index 00000000..6b8daf74
Binary files /dev/null and b/tests/components.spec.ts-snapshots/Organism-CaPool-default-1-chromium-darwin.png differ