diff --git a/app/dashboard/src/components/ListCheckBox/index.tsx b/app/dashboard/src/components/ListCheckBox/index.tsx
index aec2fe4..2096cc1 100644
--- a/app/dashboard/src/components/ListCheckBox/index.tsx
+++ b/app/dashboard/src/components/ListCheckBox/index.tsx
@@ -3,23 +3,27 @@
 import {
   Box,
 } from '@chakra-ui/react';
-import { forwardRef, ReactNode, Ref } from 'react';
+import { ReactNode, Ref } from 'react';
 
 type ListCheckboxProps = {
     isChecked: boolean;
     onChange: () => void;
     renderContent: () => ReactNode;
     value: string;
+    ref?: Ref<HTMLDivElement>;
 }
 
-export const ListCheckBox = forwardRef(
-  (
-    { isChecked, onChange, renderContent, ...props }: ListCheckboxProps,
-    ref: Ref<HTMLDivElement>
-  ) => (
+
+export const ListCheckBox = (
+  { isChecked, onChange, renderContent, ref, ...props }: ListCheckboxProps,
+
+) => {
+  const darkStyle = { bg: isChecked ? 'gray.800' : 'transparent' };
+
+  return (
     <Box
       ref={ref}
-      border={isChecked ? '5px' : '2px'}
+      border={isChecked ? '5px' : '3px'}
       w="full"
       borderColor={isChecked ? 'primary.500' : 'gray.600'}
       boxShadow={
@@ -27,7 +31,8 @@ export const ListCheckBox = forwardRef(
           ? '0 0 0 3px rgba(102, 126, 234, 0.6)'
           : '0 0 0 1px rgba(102, 126, 234, 0.6)'
       }
-      bg={isChecked ? 'gray.100' : 'white'}
+      bg={isChecked ? 'gray.100' : 'transparent'}
+      _dark={darkStyle}
       py="4px"
       px="8px"
       borderRadius="md"
@@ -43,5 +48,5 @@ export const ListCheckBox = forwardRef(
     >
       {renderContent()}
     </Box>
-  )
-);
+  );
+}
diff --git a/app/dashboard/src/components/ServiceDialog/InboundsField.tsx b/app/dashboard/src/components/ServiceDialog/InboundsField.tsx
index e627c68..2ce782e 100644
--- a/app/dashboard/src/components/ServiceDialog/InboundsField.tsx
+++ b/app/dashboard/src/components/ServiceDialog/InboundsField.tsx
@@ -30,7 +30,7 @@ export const InboundsField = ({ form, t, inbounds }: InboundsFieldProps) => {
               list={inbounds}
               renderCheckboxContent={(inbound: InboundType) => (
                 <>
-                  <Text fontSize="sm" color="gray.700" fontWeight="medium">
+                  <Text fontSize="sm" color="gray.700" _dark={{ color: 'gray.100' }} fontWeight="medium">
                     {inbound.tag} {inbound.protocol}
                   </Text>
                   <Spacer />
diff --git a/app/dashboard/src/components/UserDialog/ServicesField.tsx b/app/dashboard/src/components/UserDialog/ServicesField.tsx
index c1b5d96..56a6746 100644
--- a/app/dashboard/src/components/UserDialog/ServicesField.tsx
+++ b/app/dashboard/src/components/UserDialog/ServicesField.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, FormErrorMessage, Center, Spinner, Text, Spacer, Flex, chakra } from '@chakra-ui/react';
+import { FormControl, FormLabel, FormErrorMessage, Center, Spinner, Text, Flex, chakra } from '@chakra-ui/react';
 import { UsersIcon, ServerStackIcon } from '@heroicons/react/24/outline';
 import { IconBaseStyle } from 'constants/IconBaseStyle';
 import { TFunction } from 'i18next';
@@ -11,9 +11,9 @@ const UsersServiceIcon = chakra(UsersIcon, IconBaseStyle);
 const InboundsServiceIcon = chakra(ServerStackIcon, IconBaseStyle);
 
 interface ServicesFieldProps {
-  form: any;
-  services: Service[];
-  t: TFunction<'translation', undefined, 'translation'>;
+    form: any;
+    services: Service[];
+    t: TFunction<'translation', undefined, 'translation'>;
 }
 
 export const ServicesField = ({ form, t, services }: ServicesFieldProps) => {
@@ -34,17 +34,16 @@ export const ServicesField = ({ form, t, services }: ServicesFieldProps) => {
             <ServicesSelectList
               list={services}
               renderCheckboxContent={(service) => (
-                <>
-                  <Text fontSize="sm" color="gray.700" fontWeight="medium">
+                <Flex alignItems="center" justifyContent="space-between" flexDir="row" w="full">
+                  <Text fontSize="sm" color="gray.700" _dark={{ color: 'gray.100' }} fontWeight="medium">
                     {service.name}
                   </Text>
-                  <Spacer />
                   <Flex flexDirection="row" alignItems="center">
                     <ServicePropertyStatus value={service.users.length} StatusIcon={UsersServiceIcon} />
-                    <Text color="primary.600" mx="8px">/</Text>
+                    <Text color="primary.600" _dark={{ color: 'gray.100' }} mx="8px" fontSize="sm">/</Text>
                     <ServicePropertyStatus value={service.inbounds.length} StatusIcon={InboundsServiceIcon} />
                   </Flex>
-                </>
+                </Flex>
               )}
             />
           );
@@ -52,8 +51,8 @@ export const ServicesField = ({ form, t, services }: ServicesFieldProps) => {
       />
       <FormErrorMessage>
         {t(
-          form.formState.errors.services
-            ?.message as string
+                    form.formState.errors.services
+                      ?.message as string
         )}
       </FormErrorMessage>
     </FormControl>
diff --git a/config.py b/config.py
index 1c5418a..4afe0b8 100755
--- a/config.py
+++ b/config.py
@@ -50,7 +50,11 @@ CUSTOM_TEMPLATES_DIRECTORY = config("CUSTOM_TEMPLATES_DIRECTORY", default=None)
 CLASH_SUBSCRIPTION_TEMPLATE = config("CLASH_SUBSCRIPTION_TEMPLATE", default="clash/default.yml")
 SUBSCRIPTION_PAGE_TEMPLATE = config("SUBSCRIPTION_PAGE_TEMPLATE", default="subscription/index.html")
 HOME_PAGE_TEMPLATE = config("HOME_PAGE_TEMPLATE", default="home/index.html")
-SINGBOX_SUBSCRIPTION_TEMPLATE = config("SINGBOX_SUBSCRIPTION_TEMPLATE", default="singbox/default.json")
+
+SINGBOX_SUBSCRIPTION_TEMPLATE = config(
+    "SINGBOX_SUBSCRIPTION_TEMPLATE",
+    default="singbox/default.json"
+)
 
 
 # USERNAME: PASSWORD