diff --git a/resources/web/deployment.yaml b/resources/web/deployment.yaml
index 37b6eb12de..7f791a4e30 100644
--- a/resources/web/deployment.yaml
+++ b/resources/web/deployment.yaml
@@ -16,7 +16,7 @@ spec:
     spec:
       containers:
         - name: busola
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2590
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2585
           imagePullPolicy: Always
           resources:
             requests:
diff --git a/src/components/BusolaExtensions/ColumnsInput.js b/src/components/BusolaExtensions/ColumnsInput.js
index 9cf7497c3a..0adf9c2d58 100644
--- a/src/components/BusolaExtensions/ColumnsInput.js
+++ b/src/components/BusolaExtensions/ColumnsInput.js
@@ -1,7 +1,6 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { MessageStrip } from '@ui5/webcomponents-react';
-import { FormInput, Checkbox } from 'fundamental-react';
+import { CheckBox, MessageStrip } from '@ui5/webcomponents-react';
+import { FormInput } from 'fundamental-react';
 
 export function ColumnsInput({ value: columns, setValue: setColumns }) {
   const { t } = useTranslation();
@@ -17,7 +16,7 @@ export function ColumnsInput({ value: columns, setValue: setColumns }) {
   return columns.map(value => {
     return (
       <div key={value.path} className="columns-input">
-        <Checkbox
+        <CheckBox
           checked={value.isSelected}
           onChange={e => {
             value.isSelected = e.target.checked;
diff --git a/src/components/BusolaExtensions/ExtensibilityStarterForm.scss b/src/components/BusolaExtensions/ExtensibilityStarterForm.scss
index 2ba1957af4..df19c2d43b 100644
--- a/src/components/BusolaExtensions/ExtensibilityStarterForm.scss
+++ b/src/components/BusolaExtensions/ExtensibilityStarterForm.scss
@@ -3,8 +3,8 @@
   grid-template-columns: 1fr 8fr 8fr 3fr;
   column-gap: 20px;
 
-  .fd-checkbox__label {
-    padding: 6px;
+  ui5-checkbox {
+    margin-top: -6.75px;
   }
 }
 
diff --git a/src/components/Extensibility/components-form/Modules/Modules.js b/src/components/Extensibility/components-form/Modules/Modules.js
index 3c9a770ce5..42ce964ad7 100644
--- a/src/components/Extensibility/components-form/Modules/Modules.js
+++ b/src/components/Extensibility/components-form/Modules/Modules.js
@@ -1,11 +1,9 @@
-import React from 'react';
 import { useUIStore } from '@ui-schema/ui-schema';
 
 import { useJsonata } from '../../hooks/useJsonata';
 import { useVariables } from '../../hooks/useVariables';
 import { fromJS } from 'immutable';
-import { Icon, Link, MessageStrip } from '@ui5/webcomponents-react';
-import { Checkbox } from 'fundamental-react';
+import { CheckBox, Icon, Link, MessageStrip } from '@ui5/webcomponents-react';
 
 import './Modules.scss';
 import { useGetTranslation } from 'components/Extensibility/helpers';
@@ -18,7 +16,7 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
   const { t } = useTranslation();
   const sectionName = schema.get('name');
 
-  const setCheckbox = (fullValue, key, entryValue, checked, index) => {
+  const setCheckbox = (key, entryValue, checked, index) => {
     if (checked) {
       onChange({
         storeKeys,
@@ -140,13 +138,11 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
     return (
       <>
         <div className="gridbox fd-margin-bottom--sm">
-          <div className="fd-align-vertical-center-ignor-checkbox-label">
+          <div className="fd-margin-top--sm">
             {index === 0 ? `${sectionName}:` : ''}
           </div>
-          <Checkbox
-            className="fd-align-vertical-center-ignor-checkbox-label"
-            key={name}
-            value={name}
+          <CheckBox
+            className="fd-margin-top--sm"
             checked={isChecked}
             onChange={e => {
               setCheckbox(
@@ -161,10 +157,10 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
                   : index,
               );
             }}
-          >
-            {name}
-          </Checkbox>
+            text={name}
+          />
           <Dropdown
+            className="fd-margin-top--tiny"
             label={t('extensibility.widgets.modules.module-channel-label')}
             compact
             disabled={!isChecked}
@@ -213,7 +209,7 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
               href={link}
               target="_blank"
               rel="noopener noreferrer"
-              className="fd-align-vertical-center-ignor-checkbox-label"
+              className="fd-margin-top--md"
             >
               {t('extensibility.widgets.modules.documentation')}
               <Icon
diff --git a/src/resources/Namespaces/NamespaceCreate.js b/src/resources/Namespaces/NamespaceCreate.js
index ecf150f8b7..a14cdc04da 100644
--- a/src/resources/Namespaces/NamespaceCreate.js
+++ b/src/resources/Namespaces/NamespaceCreate.js
@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as jp from 'jsonpath';
 import { cloneDeep } from 'lodash';
-import { Checkbox, FormFieldset } from 'fundamental-react';
+import { CheckBox } from '@ui5/webcomponents-react';
+import { FormFieldset } from 'fundamental-react';
 
 import * as Inputs from 'shared/ResourceForm/inputs';
 import { ResourceForm } from 'shared/ResourceForm';
@@ -237,14 +238,12 @@ export function NamespaceCreate({
           title={t('namespaces.create-modal.apply-memory-quotas')}
           actions={() => (
             <div className="additional-resource">
-              <Checkbox
-                compact
+              <CheckBox
                 checked={withMemory}
                 onChange={() => setWithMemory(!withMemory)}
                 dir="rtl"
-              >
-                {t('namespaces.create-modal.create-resource-quota')}
-              </Checkbox>
+                text={t('namespaces.create-modal.create-resource-quota')}
+              />
               <MemoryPresets
                 presets={CONFIG.NS_MEMORY_QUOTAS_PRESET}
                 setValue={val => {
@@ -282,14 +281,12 @@ export function NamespaceCreate({
           title={t('namespaces.create-modal.apply-limits')}
           actions={() => (
             <div className="additional-resource">
-              <Checkbox
-                compact
+              <CheckBox
                 checked={withLimits}
                 onChange={() => setWithLimits(!withLimits)}
                 dir="rtl"
-              >
-                {t('namespaces.create-modal.create-limit-range')}
-              </Checkbox>
+                text={t('namespaces.create-modal.create-limit-range')}
+              />
               <LimitPresets
                 presets={CONFIG.NS_CONTAINER_LIMITS_PRESET}
                 setValue={val => {
diff --git a/src/shared/ResourceForm/inputs/Checkboxes.js b/src/shared/ResourceForm/inputs/Checkboxes.js
index 4484739c7f..a2253bfc9b 100644
--- a/src/shared/ResourceForm/inputs/Checkboxes.js
+++ b/src/shared/ResourceForm/inputs/Checkboxes.js
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Checkbox, FormRadioGroup } from 'fundamental-react';
+import { FormRadioGroup } from 'fundamental-react';
 
 import { Tooltip } from 'shared/components/Tooltip/Tooltip';
-import { Icon } from '@ui5/webcomponents-react';
+import { CheckBox, Icon } from '@ui5/webcomponents-react';
 
 export function Checkboxes({
   value = [],
@@ -30,20 +29,14 @@ export function Checkboxes({
         ref={inputRef}
         style={{ opacity: 0, position: 'absolute', left: '-1000px' }}
       />
-      {options.map(({ key, text, description }, index) => (
+      {options.map(({ key, text, description }) => (
         <div key={key} className="fd-row">
-          <div>
-            <Checkbox
-              data-testid={`${dataTestID}.${key}`}
-              compact
-              key={key}
-              value={key}
-              checked={value?.includes(key)}
-              onChange={e => updateValue(key, e.target.checked)}
-            >
-              {text}
-            </Checkbox>
-          </div>
+          <CheckBox
+            data-testid={`${dataTestID}.${key}`}
+            checked={value?.includes(key)}
+            onChange={e => updateValue(key, e.target.checked)}
+            text={text}
+          />
           <div className="fd-col fd-col-md--1 tooltip-column">
             {description && (
               <Tooltip className="has-tooltip" delay={0} content={description}>
diff --git a/src/shared/components/Checkbox/Checkbox.js b/src/shared/components/Checkbox/Checkbox.js
deleted file mode 100644
index 42b280b2cd..0000000000
--- a/src/shared/components/Checkbox/Checkbox.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import { FormItem, FormLabel } from 'fundamental-react';
-import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react';
-
-const getCheckStatus = (checked, indeterminate) => {
-  if (indeterminate) {
-    return 'mixed';
-  } else if (checked) {
-    return 'true';
-  } else {
-    return 'false';
-  }
-};
-
-export const Checkbox = React.forwardRef(
-  (
-    {
-      className,
-      initialChecked = false,
-      disabled,
-      disableStyles,
-      id,
-      indeterminate,
-      inline,
-      inputProps,
-      labelProps,
-      name,
-      onChange,
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const [checked, setChecked] = useState(initialChecked);
-    const inputEl = useRef();
-
-    useEffect(() => {
-      inputEl && (inputEl.current.indeterminate = indeterminate);
-    });
-
-    useEffect(() => {
-      setChecked(initialChecked);
-    }, [initialChecked]);
-
-    return (
-      <FormItem {...props} disabled={disabled} isInline={inline} ref={ref}>
-        <input
-          {...inputProps}
-          aria-checked={getCheckStatus(checked, indeterminate)}
-          checked={checked}
-          className="fd-checkbox"
-          disabled={disabled}
-          id={name}
-          name={name}
-          onChange={e => {
-            const newChecked = !checked;
-            setChecked(newChecked);
-            onChange(e, newChecked);
-          }}
-          ref={inputEl}
-          type="checkbox"
-        />
-        <FormLabel
-          {...labelProps}
-          disabled={disabled}
-          className="fd-checkbox__label"
-          htmlFor={name}
-        >
-          {value}
-        </FormLabel>
-      </FormItem>
-    );
-  },
-);
-
-Checkbox.displayName = 'Checkbox';
-
-Checkbox.propTypes = {
-  className: PropTypes.string,
-
-  initialChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  disableStyles: PropTypes.bool,
-  id: PropTypes.string,
-  indeterminate: PropTypes.bool,
-  inline: PropTypes.bool,
-  inputProps: PropTypes.object,
-  labelProps: PropTypes.object,
-  name: PropTypes.string,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-};
-
-Checkbox.defaultProps = {
-  onChange: () => void 0,
-};
-
-Checkbox.propDescriptions = {
-  checked:
-    'Set to **true** when checkbox input is checked and a controlled component.',
-  defaultChecked:
-    'Set to **true** when the checkbox input is checked and an uncontrolled component.',
-  indeterminate: 'When true, the checkbox renders a "mixed" state.',
-  inline: '_INTERNAL USE ONLY._',
-  inputProps: 'Props to be spread to the component `<input>` element.',
-  labelProps: 'Props to be spread to the component `<label>` element.',
-  name: 'Sets the `name` for the checkbox input.',
-  value: 'Sets the `value` for the checkbox input.',
-};
diff --git a/src/shared/hooks/useDeleteResource.js b/src/shared/hooks/useDeleteResource.js
index ac991f6bb9..d7d6e67d34 100644
--- a/src/shared/hooks/useDeleteResource.js
+++ b/src/shared/hooks/useDeleteResource.js
@@ -1,10 +1,10 @@
 import {
   Button,
+  CheckBox,
   MessageBox,
   MessageStrip,
   Text,
 } from '@ui5/webcomponents-react';
-import { Checkbox } from 'fundamental-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRecoilState } from 'recoil';
@@ -123,14 +123,12 @@ export function useDeleteResource({
           name: resourceTitle || resource?.metadata?.name,
         })}
       </Text>
-
-      <Checkbox
+      <CheckBox
+        className="fd-margin-top--sm"
         checked={dontConfirmDelete}
         onChange={() => setDontConfirmDelete(prevState => !prevState)}
-      >
-        {t('common.delete-dialog.delete-confirm')}
-      </Checkbox>
-
+        text={t('common.delete-dialog.delete-confirm')}
+      />
       {dontConfirmDelete && (
         <MessageStrip
           design="Information"
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5102f97377..47fe788185 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -54,19 +54,10 @@ body {
   background-color: transparent;
 }
 
-.fd-checkbox:focus + .fd-checkbox__label,
 .fd-radio:focus + .fd-radio__label {
   outline: none; // disable a weird outline on clicked checkbox
 }
 
-.fd-checkbox__text {
-  margin-left: 0.1rem;
-}
-
-.fd-checkbox__label:before {
-  margin-right: 0.2rem;
-}
-
 .fd-panel,
 .fd-action-bar {
   &__actions {
@@ -152,9 +143,8 @@ li {
   display: table;
 }
 
-// override fd-styles for Safari
-input[type='checkbox'] {
-  -webkit-appearance: checkbox !important;
+ui5-checkbox {
+  -webkit-appearance: checkbox;
 }
 
 @font-face {
@@ -264,11 +254,6 @@ input[type='checkbox'] {
   align-items: center;
 }
 
-.fd-align-vertical-center-ignor-checkbox-label {
-  margin-top: auto;
-  margin-bottom: 0.3vh;
-}
-
 .fd-margin-0 {
   margin: 0;
 }
diff --git a/tests/integration/tests/cluster/test-cluster-validation.spec.js b/tests/integration/tests/cluster/test-cluster-validation.spec.js
index 616dce8acf..38604a5ccd 100644
--- a/tests/integration/tests/cluster/test-cluster-validation.spec.js
+++ b/tests/integration/tests/cluster/test-cluster-validation.spec.js
@@ -23,12 +23,13 @@ function testAndSelectOptions(section, selection) {
   cy.get(`@${section}Header`)
     .contains('Remove all')
     .click();
+
   cy.get(`@${section}FormField`)
     .find('[type="checkbox"]')
     .should('not.be.checked');
 
   cy.get(`@${section}FormField`)
-    .contains(selection)
+    .get(`ui5-checkbox[text="${selection}"][data-testid*="${selection}"]`)
     .click();
 }
 
diff --git a/tests/integration/tests/extensibility/ext-test-variables.spec.js b/tests/integration/tests/extensibility/ext-test-variables.spec.js
index b8209baba0..bdee6a0663 100644
--- a/tests/integration/tests/extensibility/ext-test-variables.spec.js
+++ b/tests/integration/tests/extensibility/ext-test-variables.spec.js
@@ -241,21 +241,18 @@ context('Test extensibility variables', () => {
     cy.get('ui5-dialog').as('form');
 
     cy.get('@form')
-      .find('[data-testid="spec.arrayOfStrings.value_1"]:visible')
-      .find('input')
+      .get('ui5-checkbox[data-testid="spec.arrayOfStrings.value_1"]:visible')
       .should('not.be.checked');
 
     cy.get('@form')
-      .find('[data-testid="spec.arrayOfStrings.value_1"]:visible')
-      .find('label')
+      .get('ui5-checkbox[data-testid="spec.arrayOfStrings.value_1"]:visible')
       .click();
 
     cy.get('@form')
-      .find('[data-testid="spec.arrayOfStrings.value_3"]:visible')
-      .find('label')
+      .get('ui5-checkbox[data-testid="spec.arrayOfStrings.value_3"]:visible')
       .click();
 
-    cy.get('[ariaLabel="TestResource name"]:visible', { log: false })
+    cy.get('[ariaLabel="TestResource name"]', { log: false })
       .type(NAME)
       .click();
 
diff --git a/tests/integration/tests/namespace/a-run-before.spec.js b/tests/integration/tests/namespace/a-run-before.spec.js
index d300bd3656..53122e1c25 100644
--- a/tests/integration/tests/namespace/a-run-before.spec.js
+++ b/tests/integration/tests/namespace/a-run-before.spec.js
@@ -14,9 +14,9 @@ context('Create Namespace', () => {
 
     cy.contains('Advanced').click();
 
-    cy.contains('Create Resource Quota').click();
+    cy.get('ui5-checkbox[text="Create Resource Quota"]').click();
 
-    cy.contains('Create Limit Range').click();
+    cy.get('ui5-checkbox[text="Create Limit Range"]').click();
 
     cy.get('[aria-label="expand Apply Total Memory Quotas"]')
       .contains('Choose preset')