diff --git a/forms-flow-components/src/components/CustomComponents/BuildModal.tsx b/forms-flow-components/src/components/CustomComponents/BuildModal.tsx
index bccced82..41f41a29 100644
--- a/forms-flow-components/src/components/CustomComponents/BuildModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/BuildModal.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Modal from "react-bootstrap/Modal";
 import { CloseIcon } from "../SvgIcons/index";
+import { useTranslation } from "react-i18next";
 
 interface BuildModalProps {
   show: boolean;
@@ -20,7 +21,8 @@ const buildModalContent = (
     heading: string;
     body: string;
     onClick?: () => void;
-  }[]
+  }[],
+  t: (key: string) => string
 ) => {
   const handleKeyDown = (event, onClick) => {
     if (event.key === "Enter" || event.key === " ") {
@@ -39,8 +41,8 @@ const buildModalContent = (
           aria-label={`Button for ${heading}`} 
           data-testid={`button-${id}`}
         >
-          <span className="mb-3 content-heading">{heading}</span>
-          <span className="content-body">{body}</span>
+          <span className="mb-3 content-heading">{t(heading)}</span>
+          <span className="content-body">{t(body)}</span>
         </button>
       ))}
     </>
@@ -49,6 +51,7 @@ const buildModalContent = (
 
 export const BuildModal: React.FC<BuildModalProps> = React.memo(
   ({ show, onClose, title, contents }) => {
+    const { t } = useTranslation();
     return (
       <Modal
         show={show}
@@ -62,14 +65,14 @@ export const BuildModal: React.FC<BuildModalProps> = React.memo(
       >
         <Modal.Header>
           <Modal.Title id="build-modal-title">
-            <b>{title}</b>
+            <b>{t(title)}</b>
           </Modal.Title>
           <div className="d-flex align-items-center">
             <CloseIcon onClick={onClose} />
           </div>
         </Modal.Header>
         <Modal.Body className="d-flex">
-          {buildModalContent(contents)}
+        {buildModalContent(contents, t)}
         </Modal.Body>
       </Modal>
     );
diff --git a/forms-flow-components/src/components/CustomComponents/Button.tsx b/forms-flow-components/src/components/CustomComponents/Button.tsx
index 8e9be450..9f03c5da 100644
--- a/forms-flow-components/src/components/CustomComponents/Button.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Button.tsx
@@ -3,6 +3,7 @@ import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import Dropdown from "react-bootstrap/Dropdown";
 import { ChevronIcon } from "../SvgIcons/index";
+import { useTranslation } from "react-i18next";
 
 interface DropdownItem {
   label: string;
@@ -46,6 +47,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
   const toggleRef = useRef<HTMLButtonElement>(null);
   const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({});
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+  const { t } = useTranslation();
 
   const updateMenuStyle = () => {
     if (buttonRef.current && toggleRef.current) {
@@ -85,7 +87,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
           name={name}
           className={`${size !== 'md' ? className : `btn-md ${className}`}`}
         >
-          {label}
+          {t(label)}
         </Button>
 
         <Dropdown.Toggle
@@ -106,7 +108,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
               data-testid={item.dataTestid}
               aria-label={item.ariaLabel}
             >
-              {item.label}
+              {t(item.label)}
             </Dropdown.Item>
           ))}
         </Dropdown.Menu>
@@ -131,7 +133,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
         }`}
       >
         {icon && <span className="me-2">{icon}</span>}
-        {label}
+        {t(label)}
       </div>
       {buttonLoading && <span className="dotted-spinner"></span>}
     </Button>
diff --git a/forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx b/forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx
index 8748ac80..7cc82e2f 100644
--- a/forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Modal from "react-bootstrap/Modal";
 import {CustomButton} from "./Button";
 import { CloseIcon } from "../SvgIcons/index";
+import { useTranslation } from "react-i18next";
 
 interface ConfirmModalProps {
   show: boolean;
@@ -42,6 +43,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
   secondoryBtnariaLabel = 'Cancel Button',
   secondaryBtnLoading= false
 }) => {
+  const { t } = useTranslation();
   return (
     <>
       <Modal
@@ -56,7 +58,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
         <Modal.Header>
           <Modal.Title id="confirm-modal-title">
             <b>
-              {title}
+              {t(title)}
             </b>
           </Modal.Title>
           <div className="d-flex align-items-center">
@@ -73,7 +75,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
               data-testid="confirm-modal-primary-message"
               aria-label="Primary message"
             >
-              {message}
+              {t(message)}
             </div>
             {messageSecondary && (
               <div
@@ -81,7 +83,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
                 data-testid="confirm-modal-secondary-message"
                 aria-label="Secondary message"
               >
-                {messageSecondary}
+                {t(messageSecondary)}
               </div>
             )}
           </div>
diff --git a/forms-flow-components/src/components/CustomComponents/ErrorModal.tsx b/forms-flow-components/src/components/CustomComponents/ErrorModal.tsx
index 582ee418..2f949795 100644
--- a/forms-flow-components/src/components/CustomComponents/ErrorModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/ErrorModal.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Modal from "react-bootstrap/Modal";
 import {CustomButton} from "./Button";
 import { CloseIcon } from "../SvgIcons/index";
+import { useTranslation } from "react-i18next";
 
 interface ErrorModalProps {
   show: boolean;
@@ -25,6 +26,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = React.memo(({
   primaryBtndataTestid = 'Dismiss-button',
   primaryBtnariaLabel = 'Dismiss',
 }) => {
+  const { t } = useTranslation();
   return (
       <Modal
         show={show}
@@ -38,7 +40,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = React.memo(({
         <Modal.Header>
           <Modal.Title id="error-modal-title" className="text-danger">
             <b>
-              {title}
+              {t(title)}
             </b>
           </Modal.Title>
           <div className="d-flex align-items-center">
@@ -55,7 +57,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = React.memo(({
               data-testid="error-modal-primary-message"
               aria-label="Primary message"
             >
-              {message}
+              {t(message)}
             </div>
           </div>
         </Modal.Body>
diff --git a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
index 08b40565..549e1e87 100644
--- a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
@@ -126,7 +126,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
         >
           <Modal.Header>
             <Modal.Title>
-              <b>{modalHeader}</b>
+              <b>{t(modalHeader)}</b>
             </Modal.Title>
             <div className="d-flex align-items-center">
               <CloseIcon onClick={onClose} />
@@ -136,7 +136,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
             <FormInput
               name="title"
               type="text"
-              placeholder={placeholderForForm}
+              placeholder={t(placeholderForForm)}
               label={nameLabel}
               aria-label={t("Name of the form")}
               data-testid={nameInputDataTestid}
@@ -155,7 +155,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
             />
            <FormTextArea
               name="description"
-              placeholder={placeholderForDescription}
+              placeholder={t(placeholderForDescription)}
               label={descriptionLabel}
               className="form-input"
               aria-label={t("Description of the new form")}
diff --git a/forms-flow-components/src/components/CustomComponents/FormInput.tsx b/forms-flow-components/src/components/CustomComponents/FormInput.tsx
index ab732d48..3eec3d01 100644
--- a/forms-flow-components/src/components/CustomComponents/FormInput.tsx
+++ b/forms-flow-components/src/components/CustomComponents/FormInput.tsx
@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FocusEvent, KeyboardEvent, useEffect, useRef } from 'react';
 import { Form, InputGroup } from 'react-bootstrap';
+import { useTranslation } from "react-i18next";
 
 interface FormInputProps {
   type?: string;
@@ -52,7 +53,7 @@ export const FormInput: React.FC<FormInputProps> = ({
   minLength,
   maxLength, 
 }) => {
-
+  const { t } = useTranslation();
   const inputClassNames = `form-control-input ${icon ? 'with-icon' : ''} ${className}`;
   const inputRef = useRef(null);
   useEffect(()=>{ 
@@ -71,7 +72,7 @@ export const FormInput: React.FC<FormInputProps> = ({
     <Form.Group controlId={id}>
       {label && (
         <Form.Label className='custom-form-control-label'>
-          {label} {required && <span className='required-icon'>*</span>}
+          {t(label)}{required && <span className='required-icon'>*</span>}
         </Form.Label>
       )}
       <InputGroup className="custom-form-input-group">
@@ -109,7 +110,7 @@ export const FormInput: React.FC<FormInputProps> = ({
         </InputGroup>
         {isInvalid && (
             <Form.Control.Feedback className='custom-feedback' type="invalid">
-              {feedback}
+              {t(feedback)}
             </Form.Control.Feedback>
           )}
       </Form.Group>
diff --git a/forms-flow-components/src/components/CustomComponents/FormTextArea.tsx b/forms-flow-components/src/components/CustomComponents/FormTextArea.tsx
index c5f04693..1f7f7e63 100644
--- a/forms-flow-components/src/components/CustomComponents/FormTextArea.tsx
+++ b/forms-flow-components/src/components/CustomComponents/FormTextArea.tsx
@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FocusEvent, KeyboardEvent, useRef, forwardRef, useEffect } from 'react';
 import { Form, InputGroup } from 'react-bootstrap';
+import { useTranslation } from "react-i18next";
 
 interface FormTextAreaProps {
     type?: string;
@@ -51,6 +52,7 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>((
     minLength, 
     maxLength, 
 }, ref) => {
+    const { t } = useTranslation();
     const internalRef = useRef<HTMLTextAreaElement>(null);
     const combinedRef = (ref || internalRef) as React.RefObject<HTMLTextAreaElement>;
 
@@ -80,7 +82,7 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>((
             <Form.Group controlId={id}>
                 {label && (
                     <Form.Label className="custom-form-control-label">
-                        {label} {required && <span className="required-icon">*</span>}
+                        {t(label)} {required && <span className="required-icon">*</span>}
                     </Form.Label>
                 )}
                 <InputGroup className="custom-form-input-group">
@@ -91,7 +93,7 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>((
                         value={value}
                         onChange={onChange}
                         onBlur={onBlur}
-                        placeholder={placeholder}
+                        placeholder={t(placeholder)}
                         isInvalid={isInvalid}
                         disabled={disabled}
                         size={size}
@@ -115,7 +117,7 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>((
                     )}
                     {isInvalid && (
                         <Form.Control.Feedback className="custom-feedback" type="invalid">
-                            {feedback}
+                            {t(feedback)}
                         </Form.Control.Feedback>
                     )}
                 </InputGroup>
diff --git a/forms-flow-components/src/components/CustomComponents/HistoryModal.tsx b/forms-flow-components/src/components/CustomComponents/HistoryModal.tsx
index 58e9d33a..b6575c3b 100644
--- a/forms-flow-components/src/components/CustomComponents/HistoryModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/HistoryModal.tsx
@@ -290,7 +290,7 @@ export const HistoryModal: React.FC<HistoryModalProps> = React.memo(
         >
           <Modal.Header>
             <Modal.Title id="history-modal-title">
-              <b>{title}</b>
+              <b>{t(title)}</b>
             </Modal.Title>
             <div className="d-flex align-items-center ">
               <CloseIcon onClick={handleClose} />
diff --git a/forms-flow-components/src/components/CustomComponents/ImportModal.tsx b/forms-flow-components/src/components/CustomComponents/ImportModal.tsx
index 1795cdc3..8ce57b2a 100644
--- a/forms-flow-components/src/components/CustomComponents/ImportModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/ImportModal.tsx
@@ -76,7 +76,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
     const redColor = computedStyle.getPropertyValue("--ff-red-000");
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
     const [uploadProgress, setUploadProgress] = useState(0);
-    const skipImport = "Skip, do not import";
+    const skipImport = t("Skip, do not import");
     const [selectedLayoutVersion, setSelectedLayoutVersion] = useState<{
       value: any;
       label: string;
@@ -96,28 +96,28 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
     const [inprogress, setInprogress] = useState(true);
 
     const layoutOptions = [
-      { value: true, label: "Skip, do not import" },
+      { value: true, label: t("Skip, do not import") },
       {
         value: "major",
-        label: `import as version ${
+        label: t(`import as version ${
           fileItems?.form?.majorVersion + 1
-        }.0 (only impacts new submissions)`,
+        }.0 (only impacts new submissions)`),
       },
       {
         value: "minor",
-        label: `import as version ${fileItems?.form?.majorVersion}.${
+        label: t(`import as version ${fileItems?.form?.majorVersion}.${
           fileItems?.form?.minorVersion + 1
-        }  (impacts previous and new submissions)`,
+        }  (impacts previous and new submissions)`),
       },
     ];
 
     const flowOptions = [
-      { value: true, label: "Skip, do not import" },
+      { value: true, label:  t("Skip, do not import") },
       {
         value: "major",
-        label: `import as version ${fileItems?.workflow?.majorVersion ?? 1}.${
+        label: t(`import as version ${fileItems?.workflow?.majorVersion ?? 1}.${
           fileItems?.workflow?.minorVersion ?? 0
-        } (only impacts new submissions)`,
+        } (only impacts new submissions)`),
       },
     ];
 
@@ -369,7 +369,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
                     <div className="text-truncate">
                       {selectedLayoutVersion
                         ? selectedLayoutVersion.label
-                        : "Skip, do not import"}
+                        : t("Skip, do not import")}
                     </div>
                     <DropdownIcon />
                   </div>
@@ -404,7 +404,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
                     <div className="text-truncate">
                       {selectedFlowVersion
                         ? selectedFlowVersion.label
-                        : "Skip, do not import"}
+                        : t("Skip, do not import")}
                     </div>
                     <DropdownIcon />
                   </div>
diff --git a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx
index eb7e9a50..c3d0fd0a 100644
--- a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx
+++ b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx
@@ -3,6 +3,7 @@ import { InputGroup } from 'react-bootstrap';
 import ListGroup from 'react-bootstrap/ListGroup';
 import { FormInput } from './FormInput';
 import { CloseIcon , ChevronIcon } from "../SvgIcons/index";
+import { useTranslation } from "react-i18next";
 import { StyleServices } from "@formsflow/service";
 
 interface DropdownItem {
@@ -47,6 +48,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
   inputClassName='',
   onBlurDropDown
 }) => {
+  const { t } = useTranslation();
   const primaryColor = StyleServices.getCSSVariable('primary');
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>(selectedOption || ''); 
@@ -127,14 +129,14 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
                       isInvalid={isInvalid}
                       icon={<CloseIcon onClick={handleClose} color={primaryColor} data-testid="close-input" aria-label="Close input "/>} 
                       className="input-with-close"
-                      label={dropdownLabel}
-                      feedback={feedback}
+                      label={t(dropdownLabel)}
+                      feedback={t(feedback)}
                   />
               </InputGroup>
           ) : (
               <InputGroup>
                   <FormInput
-                      placeholder={placeholder}
+                      placeholder={t(placeholder)}
                       value={inputValue}
                       onChange={handleInputDropdownChange}
                       onClick={toggleDropdown}
@@ -143,11 +145,11 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
                       icon={<ChevronIcon data-testid="dropdown-input" aria-label="dropdown input"/>}
                       className={`${inputClassName} ${isDropdownOpen ? 'border-input collapsed' : ''}`}
                       onIconClick={toggleDropdown}
-                      label={dropdownLabel}
+                      label={t(dropdownLabel)}
                       required={required}
                       onBlur={onBlurDropDown}
                       isInvalid={!(isDropdownOpen || selectedOption) && isInvalid}
-                      feedback={feedback}
+                      feedback={t(feedback)}
                   />
               </InputGroup>
           )}
@@ -160,7 +162,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
                           className="list-first-item-btn"
                           data-testid="list-first-item"
                       >
-                          {firstItemLabel}
+                          {t(firstItemLabel)}
                       </ListGroup.Item>
                   )}
                   {(filteredItems.length > 0 ? filteredItems : Options).map((item, index) => (
@@ -170,7 +172,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
                           data-testid={`list-${index}-item`}
                           aria-label={`list-${item.label}-item`}
                       >
-                          {item.label}
+                          {t(item.label)}
                       </ListGroup.Item>
                   ))}
               </ListGroup>
diff --git a/forms-flow-components/src/components/CustomComponents/Pills.tsx b/forms-flow-components/src/components/CustomComponents/Pills.tsx
index b7df7e5a..9e47245f 100644
--- a/forms-flow-components/src/components/CustomComponents/Pills.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Pills.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import Badge from "react-bootstrap/Badge";
+import { useTranslation } from "react-i18next";
+
 
 interface CustomPillProps {
   label: string;
@@ -20,11 +22,12 @@ export const CustomPill: React.FC<CustomPillProps> = ({
   secondaryLabel="",
   onClick,
 }) => {
+  const { t } = useTranslation();
   return (
     <div>
       <Badge pill variant={bg} data-testid={dataTestid} aria-label={ariaLabel}>
-        <span className="primary-label">{label}</span> 
-        { secondaryLabel && (<span className="secondary-label" >{secondaryLabel}</span>)}
+        <span className="primary-label">{t(label)}</span> 
+        { secondaryLabel && (<span className="secondary-label" >{t(secondaryLabel)}</span>)}
         {icon && 
         <button 
         className="button-as-div"
diff --git a/forms-flow-components/src/components/CustomComponents/Radio.tsx b/forms-flow-components/src/components/CustomComponents/Radio.tsx
index e4c09c45..42676940 100644
--- a/forms-flow-components/src/components/CustomComponents/Radio.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Radio.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import Form from "react-bootstrap/Form";
+import { useTranslation } from "react-i18next";
+
 
 
 interface RadioOption {
@@ -25,12 +27,13 @@ interface RadioOption {
     selectedValue = "",
     onChange = () => {}
   }) => {
+    const { t } = useTranslation();
     return (
       <Form className="custom-radio-button" aria-label={ariaLabel}>
         {items.map((option, index) => (
           <Form.Check
             inline
-            label={option.label}
+            label={t(option.label)}
             value={option.value}
             name="group1"
             type="radio"
diff --git a/forms-flow-components/src/components/CustomComponents/Search.tsx b/forms-flow-components/src/components/CustomComponents/Search.tsx
index eeb3106f..029ad6fc 100644
--- a/forms-flow-components/src/components/CustomComponents/Search.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Search.tsx
@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
 import { InputGroup, FormControl } from 'react-bootstrap';
 import { CloseIcon } from "../SvgIcons/index";
+import { useTranslation } from "react-i18next";
+
 
 interface CustomSearchProps {
     searchLoading: boolean;
@@ -23,6 +25,7 @@ export const CustomSearch: FC<CustomSearchProps> = ({
     title = "Search",
     dataTestId
 }) => {
+    const { t } = useTranslation();
     const inputClassNames = `d-flex align-items-center search-box-input ${searchLoading ? 'is-searching' : search ? 'has-value' : ''
         }`;
 
@@ -34,8 +37,8 @@ export const CustomSearch: FC<CustomSearchProps> = ({
                     value={search}
                     onChange={(e) => setSearch(e.target.value)}
                     onKeyDown={(e) => (e.key === 'Enter' && handleSearch())}
-                    placeholder={placeholder}
-                    title={title}
+                    placeholder={t(placeholder)}
+                    title={t(title)}
                     data-testid={dataTestId}
                     aria-label={placeholder}
                 />
diff --git a/forms-flow-components/src/components/CustomComponents/Tabs.tsx b/forms-flow-components/src/components/CustomComponents/Tabs.tsx
index 51217522..23369120 100644
--- a/forms-flow-components/src/components/CustomComponents/Tabs.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Tabs.tsx
@@ -1,11 +1,13 @@
 import React from "react";
 import Tab from "react-bootstrap/Tab";
 import Tabs from "react-bootstrap/Tabs";
+import { useTranslation } from "react-i18next";
+
 
 interface TabItem {
   eventKey: string;
   title: string;
-  content: React.ReactNode;
+  content: string | React.ReactNode;
 }
 
 interface CustomTabsProps {
@@ -27,6 +29,7 @@ export const CustomTabs: React.FC<CustomTabsProps> = ({
   onSelect,
   className ,
 }) => {
+  const { t } = useTranslation();
   return (
     <Tabs
       defaultActiveKey={defaultActiveKey}
@@ -38,7 +41,7 @@ export const CustomTabs: React.FC<CustomTabsProps> = ({
     >
       {tabs.map((tab, index) => (
         <Tab key={index} eventKey={tab.eventKey} title={tab.title} data-testid={`${dataTestid}-tab-${tab.eventKey}`} >
-          {tab.content}
+          {typeof tab.content === "string" ? t(tab.content) : tab.content}
         </Tab>
       ))}
     </Tabs>