diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 6119917f226a5a16fd4103165beb5861724de6a1..0b0f2817d1009eaeab8193384b307caa94d17d3b 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,9 +1,92 @@
+#include:
+#  - project: "e/infra/ecloud/nextcloud-apps/ci-templates"
+#    ref: main
+#    file: "nc-apps-lint-build-frontend.yml"
+#  - project: "e/infra/ecloud/nextcloud-apps/ci-templates"
+#    ref: main
+#    file: "nc-apps-deploy.yml"
+
 variables:
-    TO_PACKAGE: 'appinfo l10n lib templates js img'
-include:
-  - project: "e/infra/ecloud/nextcloud-apps/ci-templates"
-    ref: main
-    file: "nc-apps-lint-build-frontend.yml"
-  - project: "e/infra/ecloud/nextcloud-apps/ci-templates"
-    ref: main
-    file: "nc-apps-deploy.yml"
+  APP_NAME: $CI_PROJECT_NAME
+  TO_PACKAGE: 'appinfo js css l10n lib img templates'
+  CONTAINER_IMAGE: ubuntu
+  CONTAINER_TAG: focal
+  CONTAINER_NAME: nextcloud
+  APP_ENABLE_ARGS: ''
+
+.frontend:base:
+  image: node:15.14.0-stretch
+  before_script:
+    - npm set cache .npm
+    - npm install --prefer-offline --no-audit
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - .npm/
+      - node_modules/
+
+install-node-deps:
+  extends: .frontend:base
+  stage: .pre
+  before_script:
+      - node --version
+      - npm --version
+  script:
+      - npm ci --cache .npm --prefer-offline
+  only:
+      changes:
+          - package*.json
+
+build-frontend:
+  extends: .frontend:base
+  stage: build
+  script:
+    - npm run build
+    - mkdir -p dist/${APP_NAME}
+    - rm -f dist/js/*.map
+    - echo "packaging ${TO_PACKAGE}" && cp -a ${TO_PACKAGE} dist/${APP_NAME} && rm -rf dist/js
+    - find dist/${APP_NAME} -type d -exec chmod 755 {} \;
+    - find dist/${APP_NAME} -type f -exec chmod 644 {} \;
+  artifacts:
+    paths:
+      - dist/
+
+.deploy:nextcloud-app:
+  stage: deploy
+  # assuming all deployment will happen with sames image
+  image: $CONTAINER_IMAGE:$CONTAINER_TAG
+  # assuming we will need to add SSH for all deployment
+  before_script:
+    - echo "FAIL" > .job_status
+    - mkdir $HOME/.ssh
+    - chmod 700 ~/.ssh
+    - echo "$SSH_PRIVATE_KEY_ED" > $HOME/.ssh/id_ed25519
+    - echo "$SSH_PUBKEY_ED" > $HOME/.ssh/id_ed25519.pub
+    - echo "$SSH_KNOWN_HOSTS" > $HOME/.ssh/known_hosts
+    - chmod 600 ~/.ssh/id_ed25519
+    - chmod 644 ~/.ssh/known_hosts ~/.ssh/id_ed25519.pub
+    - apt-get update && apt-get install -y openssh-client rsync
+  script:
+    - echo "Deploying ${APP_NAME} to $CI_ENVIRONMENT_NAME ($DEPLOYMENT_HOST)"
+    - rsync -avzh dist/ $SSH_USER@$DEPLOYMENT_HOST:/tmp/${CI_JOB_ID}
+    - ssh $SSH_USER@$DEPLOYMENT_HOST "sudo docker exec -u www-data $CONTAINER_NAME /usr/local/bin/php /var/www/html/occ app:disable ${APP_NAME} && 
+      sudo rsync -avzh --chown www-data:www-data --delete /tmp/${CI_JOB_ID}/${APP_NAME} ${DEPLOYMENT_PATH}/html/custom_apps/ && 
+      sudo docker exec -u www-data $CONTAINER_NAME /usr/local/bin/php /var/www/html/occ app:enable ${APP_ENABLE_ARGS} ${APP_NAME}"
+    - echo "SUCCESS" > .job_status
+  after_script:
+    # reading job status, checking it and implementing additional steps
+    # are not handled here as rm -rf /tmp/${CI_JOB_ID} will always execute
+    - ssh $SSH_USER@$DEPLOYMENT_HOST "rm -rf /tmp/${CI_JOB_ID}"
+
+deploy:staging:
+  extends: .deploy:nextcloud-app
+  when: manual
+  only:
+    - main
+    - murena-main
+    - production
+    - tags
+    - dev/checkbox-issue-drop-account
+  environment:
+    name: staging/01
+    url: https://eeo.one
diff --git a/src/DeleteShopAccountSetting.vue b/src/DeleteShopAccountSetting.vue
index 63bd381863ac8dfb575fc642598d452265e7b386..03c7d4fa55c5a449acc87acaaf06b6ddc32c6928 100644
--- a/src/DeleteShopAccountSetting.vue
+++ b/src/DeleteShopAccountSetting.vue
@@ -24,19 +24,17 @@
 			<form @submit.prevent>
 				<div v-if="!onlyUser && !onlyAdmin" id="delete-shop-account-settings">
 					<div class="delete-shop-input">
-						<input id="shop-accounts_confirm"
-							v-model="deleteShopAccount"
-							type="checkbox"
-							name="shop-accounts_confirm"
-							class="checkbox"
+						<CheckboxRadioSwitch id="shop-accounts_confirm"
+							:checked.sync="deleteShopAccount"
 							:disabled="hasActiveSubscription || !allowDelete"
-							@change="updateDeleteShopPreference()">
-						<label for="shop-accounts_confirm">{{
-							t(
-								appName,
-								"I also want to delete my shop account"
-							)
-						}}</label>
+							@update:checked="updateDeleteShopPreference">
+							{{
+								t(
+									appName,
+									"I also want to delete my shop account"
+								)
+							}}
+						</CheckboxRadioSwitch>
 					</div>
 					<div v-if="!deleteShopAccount" class="delete-shop-input">
 						<label for="shop-alternate-email">
@@ -68,6 +66,7 @@ import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection.js'
 import Axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
 
 const APPLICATION_NAME = 'ecloud-accounts'
 
@@ -75,6 +74,7 @@ export default {
 	name: 'DeleteShopAccountSetting',
 	components: {
 		SettingsSection,
+		CheckboxRadioSwitch,
 	},
 	data() {
 		return {
@@ -85,7 +85,7 @@ export default {
 			userEmail: loadState(APPLICATION_NAME, 'email'),
 			showError: false,
 			allowDelete: true,
-			ordersDescription: ''
+			ordersDescription: '',
 		}
 	},
 	computed: {
@@ -101,7 +101,7 @@ export default {
 			return this.shopUsers.reduce((accumulator, user) => {
 				return accumulator + user.order_count
 			}, 0)
-		}
+		},
 	},
 	mounted() {
 		this.getShopUsers()
@@ -274,4 +274,13 @@ input#shop-alternate-email:disabled {
 .delete-shop-input {
 	margin-bottom: 1em;
 }
+#delete-account-settings .checkbox-radio-switch--disabled .checkbox-radio-switch__label .checkbox-radio-switch__icon{
+	color: var(--color-text-light);
+}
+#delete-account-settings .checkbox-radio-switch--disabled .checkbox-radio-switch__label{
+	opacity: 0.5;
+}
+#delete-account-settings .checkbox-radio-switch--disabled .checkbox-radio-switch__label:hover{
+	background-color: unset;
+}
 </style>
diff --git a/src/delete-account-listeners.js b/src/delete-account-listeners.js
index a8a190b83c9493afcb9b2760df29a3b2d42a4fb1..4b786556397fdd4c93e05ded154681d5d52ba47e 100644
--- a/src/delete-account-listeners.js
+++ b/src/delete-account-listeners.js
@@ -1,19 +1,24 @@
 document.addEventListener('DOMContentLoaded', function() {
 	const checkboxSelector = '#delete-account-settings .checkbox-radio-switch__input'
 	const buttonSelector = '#delete-account-settings .delete-button-wrapper .button-vue'
+	const checkboxSpanSelector = '#delete-account-settings span.checkbox-radio-switch'
+	const disabledClass = 'checkbox-radio-switch--disabled'
 	// Disable initially
 	document.querySelector(checkboxSelector).disabled = true
 	document.querySelector(buttonSelector).disabled = true
+	document.querySelector(checkboxSpanSelector).classList.add(disabledClass)
 
 	const elem = document.getElementById('body-settings')
 	elem.addEventListener('disable-delete-account', function() {
 	  document.querySelector(checkboxSelector).disabled = true
 	  document.querySelector(buttonSelector).disabled = true
+	  document.querySelector(checkboxSpanSelector).classList.add(disabledClass)
 	})
 
 	elem.addEventListener('enable-delete-account', function() {
 	  document.querySelector(checkboxSelector).disabled = false
 	  const enableDeleteAccount = document.querySelector(checkboxSelector).checked
 	  document.querySelector(buttonSelector).disabled = !enableDeleteAccount
+	  document.querySelector(checkboxSpanSelector).classList.remove(disabledClass)
 	})
 })