diff --git a/app/dashboard/public/locales/en.json b/app/dashboard/public/locales/en.json
index 22616c4..b73a0b4 100644
--- a/app/dashboard/public/locales/en.json
+++ b/app/dashboard/public/locales/en.json
@@ -196,6 +196,9 @@
   "deleteNode.title": "Delete Node",
   "deleteNode.prompt": "Are you sure you want to delete the <b>{{name}}</b> node?",
   "deleteNode.deleteSuccess": "Node {{name}} removed successfully",
+  "deleteService.title": "Delete Service",
+  "deleteService.prompt": "Are you sure you want to delete the <b>{{name}}</b> node?",
+  "deleteService.deleteSuccess": "Service {{name}} removed successfully",
   "users": "Users",
   "active": "active",
   "disabled": "disabled",
diff --git a/app/dashboard/src/components/DeleteServiceModal.tsx b/app/dashboard/src/components/DeleteServiceModal.tsx
new file mode 100644
index 0000000..3932e15
--- /dev/null
+++ b/app/dashboard/src/components/DeleteServiceModal.tsx
@@ -0,0 +1,92 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Spinner,
+  Text,
+  useToast,
+} from '@chakra-ui/react';
+import { useServices } from 'contexts/ServicesContext';
+import { FC, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { DeleteIcon } from './Dialog/Icons';
+import { Icon } from './Icon';
+
+export const DeleteServiceModal: FC = () => {
+  const { deleteService, refetchServices, deletingService, onDeletingService } = useServices();
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [loading, setLoading] = useState(false);
+  const onClose = () => {
+    onDeletingService(null);
+  };
+
+  const onDelete = () => {
+    if (deletingService) {
+      setLoading(true);
+      deleteService(deletingService)
+        .then(() => {
+          refetchServices();
+          toast({
+            title: t('deleteService.deleteSuccess', { name: deletingService.name }),
+            status: 'success',
+            isClosable: true,
+            position: 'top',
+            duration: 3000,
+          });
+        })
+        .then(onClose)
+        .finally(setLoading.bind(null, false));
+    }
+  };
+
+  return (
+    <Modal isCentered isOpen={!!deletingService} onClose={onClose} size="sm">
+      <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
+      <ModalContent mx="3">
+        <ModalHeader pt={6}>
+          <Icon color="red">
+            <DeleteIcon />
+          </Icon>
+        </ModalHeader>
+        <ModalCloseButton mt={3} />
+        <ModalBody>
+          <Text fontWeight="semibold" fontSize="lg">
+            {t('deleteService.title')}
+          </Text>
+          {deletingService && (
+            <Text
+              mt={1}
+              fontSize="sm"
+              _dark={{ color: 'gray.400' }}
+              color="gray.600"
+            >
+              <Trans components={{ b: <b /> }}>
+                {t('deleteService.prompt', { name: deletingService.name })}
+              </Trans>
+            </Text>
+          )}
+        </ModalBody>
+        <ModalFooter display="flex">
+          <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
+            {t('cancel')}
+          </Button>
+          <Button
+            size="sm"
+            w="full"
+            colorScheme="red"
+            onClick={() => onDelete()}
+            leftIcon={loading ? <Spinner size="xs" /> : undefined}
+          >
+            {t('delete')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/app/dashboard/src/components/NodesModal.tsx b/app/dashboard/src/components/NodesModal.tsx
index 7ddf46c..0ecbcf5 100644
--- a/app/dashboard/src/components/NodesModal.tsx
+++ b/app/dashboard/src/components/NodesModal.tsx
@@ -31,7 +31,6 @@ import 'slick-carousel/slick/slick.css';
 import { DeleteIcon, AddIcon, EditIcon } from './Dialog/Icons';
 import { Input } from './Input';
 import { DialogModalHeader } from './Dialog/ModalHeader';
-import { DevTool } from '@hookform/devtools';
 
 const CustomInput = chakra(Input, {
   baseStyle: {
@@ -235,7 +234,6 @@ export const NodesDialog: FC = () => {
                   </HStack>
                 </VStack>
               </form>
-              <DevTool control={form.control} />
             </VStack>
           </ModalBody>
         </ModalContent>
diff --git a/app/dashboard/src/components/ServiceDialog/NameField.tsx b/app/dashboard/src/components/ServiceDialog/NameField.tsx
index cbfbf26..240d677 100644
--- a/app/dashboard/src/components/ServiceDialog/NameField.tsx
+++ b/app/dashboard/src/components/ServiceDialog/NameField.tsx
@@ -4,10 +4,10 @@ import { TFunction } from 'i18next';
 import { Controller } from 'react-hook-form';
 
 interface NameFieldProps {
-    form: any;
-    isEditing: boolean;
-    t: TFunction<'translation', undefined, 'translation'>;
-    disabled: boolean;
+  form: any;
+  isEditing: boolean;
+  t: TFunction<'translation', undefined, 'translation'>;
+  disabled: boolean;
 }
 
 export const NameField = ({ form, isEditing, t, disabled }: NameFieldProps) => {
@@ -20,7 +20,7 @@ export const NameField = ({ form, isEditing, t, disabled }: NameFieldProps) => {
           type="text"
           borderRadius="6px"
           error={form.formState.errors.name?.message}
-          disabled={disabled || isEditing}
+          disabled={disabled}
           {...form.register('name')}
         />
         {isEditing && (
@@ -40,7 +40,7 @@ export const NameField = ({ form, isEditing, t, disabled }: NameFieldProps) => {
                         colorScheme="primary"
                         disabled={
                           field.value !== 'active' &&
-                                                    field.value !== 'disabled'
+                          field.value !== 'disabled'
                         }
                         isChecked={field.value === 'active'}
                         onChange={(e) => {
diff --git a/app/dashboard/src/components/ServiceDialog/index.tsx b/app/dashboard/src/components/ServiceDialog/index.tsx
index 54cef44..4a79cf3 100644
--- a/app/dashboard/src/components/ServiceDialog/index.tsx
+++ b/app/dashboard/src/components/ServiceDialog/index.tsx
@@ -73,6 +73,7 @@ export const ServiceDialog: FC<ServiceDialogProps> = () => {
   useEffect(() => {
     if (isOpen) {
       refetchInbounds();
+      form.reset();
     }
   }, [isOpen]);
 
diff --git a/app/dashboard/src/pages/Services.tsx b/app/dashboard/src/pages/Services.tsx
index 281b3aa..2c1fd28 100644
--- a/app/dashboard/src/pages/Services.tsx
+++ b/app/dashboard/src/pages/Services.tsx
@@ -6,6 +6,7 @@ import { pages } from 'constants/Pages';
 import { ServiceDialog } from 'components/ServiceDialog';
 import { useServices } from 'contexts/ServicesContext';
 import { useDashboard } from 'contexts/DashboardContext';
+import { DeleteServiceModal } from 'components/DeleteServiceModal';
 
 
 export const ServicesPage: FC = () => {
@@ -17,7 +18,7 @@ export const ServicesPage: FC = () => {
     <VStack justifyContent="space-between" maxH="100vh" p="2rem" rowGap={4}>
       <Box w="full" >
         <ServiceDialog />
-        {/* <DeleteServiceModal /> */}
+        <DeleteServiceModal />
         <ServicesFilters />
         <ServicesTable />
       </Box>