diff --git a/src/ui/templates/home.html b/src/ui/templates/home.html
index 12b085d9c..827dabbaf 100644
--- a/src/ui/templates/home.html
+++ b/src/ui/templates/home.html
@@ -6,7 +6,7 @@
   {'name' : 'Instances', 'title' : instances_number, 'link' : 'loading?next=' + url_for('instances')  , 'subtitle' : instance_health_count|string + ' / ' + instances_number|string + ' is working'  , 'subtitle_color' : "emerald-500", 'svg_color' : 'gray-500'},
   {'name' : 'Services', 'title' : services_number, 'link' : 'loading?next=' + url_for('services')  , 'subtitle' : services_ui_count|string + ' ui, ' + services_scheduler_count|string + ' scheduler, ' + services_autoconf_count|string + ' autoconf ' , 'subtitle_color' : "sky-500", 'svg_color' : 'orange-500'},
   {'name' : 'Plugins', 'title' : config["CONFIG"].get_plugins()|length, 'link' : 'loading?next=' + url_for('plugins')  , 'subtitle' : plugins_errors|string + ' errors' if plugins_errors > 0 else 'no error' , 'subtitle_color' : "red-500" if plugins_errors > 0 else 'green-500', 'svg_color' : 'yellow-400' }
-  ] 
+  ]
 %}
 
 <div class="col-span-12 grid grid-cols-12 justify-start items-start gap-4">
@@ -26,7 +26,7 @@
       </p>
       <!-- version of user -->
       <h5 class="mb-1 font-bold dark:text-white/90">{{card['title']}}</h5>
-  
+
       <p class="font-bold leading-normal text-sm mb-0 text-{{card['subtitle_color']}} mx-0.5 dark:text-white dark:opacity-60">
         {{card['subtitle']}}</span
         >
diff --git a/src/ui/templates/services.html b/src/ui/templates/services.html
index 5bd854a53..16b58e506 100644
--- a/src/ui/templates/services.html
+++ b/src/ui/templates/services.html
@@ -63,278 +63,39 @@
     </div>
     <h6 class="text-center sm:text-left mb-2 font-semibold text-gray-600 dark:text-white/80">{{ service["SERVER_NAME"]['method'] }}</h5>
 
+      {% set details = [
+        {"name" : "Reverse proxy", "settings" : ["USE_REVERSE_PROXY"]},
+        {"name" : "Serve files", "settings" : ["SERVE_FILES"]},
+        {"name" : "Remote PHP", "settings" : ["REMOTE_PHP"]},
+        {"name" : "HTTPS", "settings" : ["AUTO_LETS_ENCRYPT", "USE_CUSTOM_SSL", "GENERATE_SELF_SIGNED_SSL"]},
+        {"name" : "ModSecurity", "settings" : ["USE_MODSECURITY"]},
+        {"name" : "Bad behavior", "settings" : ["USE_BAD_BEHAVIOR"]},
+        {"name" : "Limit req", "settings" : ["USE_LIMIT_REQ"]},
+        {"name" : "DNSBL", "settings" : ["USE_DNSBL"]},
+        ]
+       %}
     <!-- detail list -->
     <div role="grid"
       class="w-full grid grid-cols-12 justify-items-center sm:justify-items-start gap-2 mt-4 mb-6 ml-3 sm:ml-1"
     >
+      {% for detail in details %}
+      {% set use = [] %}
+        {% for setting in detail['settings'] %}
+          {% if service[setting]['value'] == 'yes'%}
+            {% if use.append(1)%}{%endif%}
+          {% endif %}
+      {% endfor %}
       <!-- detail -->
       <div role="row" class="flex items-center col-span-12 sm:col-span-6">
         <p role="gridcell"
           class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
         >
-          Reverse proxy
+          {{ detail['name'] }}
         </p>
         <p role="gridcell"
           class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
         >
-          {% if service['USE_REVERSE_PROXY']['value'] == 'yes' %}
-          <span class="sr-only">yes</span>
-          <svg
-            class="h-4 w-4 fill-green-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-          >
-            <path
-              d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-            />
-          </svg>
-          {% else %}
-          <span class="sr-only">no</span>
-          <svg
-            class="h-4 w-4 fill-red-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512"
-          >
-            <path
-              d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
-            />
-          </svg>
-
-          {% endif %}
-        </p>
-      </div>
-      <!-- end detail -->
-      <!-- detail -->
-      <div role="row" class="flex items-center col-span-12 sm:col-span-6">
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
-        >
-          Serve files
-        </p>
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
-        >
-          {% if service['SERVE_FILES']['value'] == 'yes' %}
-          <span class="sr-only">yes</span>
-
-          <svg
-            class="h-4 w-4 fill-green-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-          >
-            <path
-              d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-            />
-          </svg>
-          {% else %}
-          <span class="sr-only">no</span>
-
-          <svg
-            class="h-4 w-4 fill-red-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512"
-          >
-            <path
-              d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
-            />
-          </svg>
-          {% endif %}
-        </p>
-      </div>
-      <!-- end detail -->
-      <!-- detail -->
-      <div role="row" class="flex items-center col-span-12 sm:col-span-6">
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
-        >
-          Remote PHP
-        </p>
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
-        >
-          {% if service['REMOTE_PHP']['value'] != '' %}
-          <span class="sr-only">yes</span>
-          <svg
-            class="h-4 w-4 fill-green-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-          >
-            <path
-              d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-            />
-          </svg>
-          {% else %}
-          <span class="sr-only">no</span>
-          <svg
-            class="h-4 w-4 fill-red-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512"
-          >
-            <path
-              d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
-            />
-          </svg>
-          {% endif %}
-        </p>
-      </div>
-      <!-- end detail -->
-      <!-- detail -->
-      <div role="row" class="flex items-center col-span-12 sm:col-span-6">
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
-        >
-          HTTPS
-        </p>
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
-        >
-          {% if service['AUTO_LETS_ENCRYPT']['value'] == 'yes' or service['USE_CUSTOM_SSL']['value'] == 'yes' or service['GENERATE_SELF_SIGNED_SSL']['value'] == 'yes' %}
-          <span class="sr-only">yes</span>
-          <svg
-            class="h-4 w-4 fill-green-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-          >
-            <path
-              d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-            />
-          </svg>
-          {% else %}
-          <span class="sr-only">no</span>
-          <svg
-            class="h-4 w-4 fill-red-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512"
-          >
-            <path
-              d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
-            />
-          </svg>
-          {% endif %}
-        </p>
-      </div>
-      <!-- end detail -->
-      <!-- detail -->
-      <div role="row" class="flex items-center col-span-12 sm:col-span-6">
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
-        >
-          ModSecurity
-        </p>
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
-        >
-          {% if service['USE_MODSECURITY']['value'] == 'yes' %}
-          <span class="sr-only">yes</span>
-          <svg
-            class="h-4 w-4 fill-green-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-          >
-            <path
-              d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-            />
-          </svg>
-          {% else %}
-          <span class="sr-only">no</span>
-          <svg
-            class="h-4 w-4 fill-red-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512"
-          >
-            <path
-              d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
-            />
-          </svg>
-          {% endif %}
-        </p>
-      </div>
-      <!-- end detail -->
-      <!-- detail -->
-      <div role="row" class="flex items-center col-span-12 sm:col-span-6">
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
-        >
-          Bad Behavior
-        </p>
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
-        >
-          {% if service['USE_BAD_BEHAVIOR']['value'] == 'yes' %}
-          <span class="sr-only">yes</span>
-          <svg
-            class="h-4 w-4 fill-green-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-          >
-            <path
-              d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-            />
-          </svg>
-          {% else %}
-          <span class="sr-only">no</span>
-          <svg
-            class="h-4 w-4 fill-red-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512"
-          >
-            <path
-              d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
-            />
-          </svg>
-          {% endif %}
-        </p>
-      </div>
-      <!-- end detail -->
-      <!-- detail -->
-      <div role="row" class="flex items-center col-span-12 sm:col-span-6">
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
-        >
-          Limit req
-        </p>
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
-        >
-          {% if service['USE_LIMIT_REQ']['value'] == 'yes' %}
-          <span class="sr-only">yes</span>
-
-          <svg
-            class="h-4 w-4 fill-green-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-          >
-            <path
-              d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-            />
-          </svg>
-          {% else %}
-          <span class="sr-only">no</span>
-
-          <svg
-            class="h-4 w-4 fill-red-500"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512"
-          >
-            <path
-              d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
-            />
-          </svg>
-          {% endif %}
-        </p>
-      </div>
-      <!-- end detail -->
-      <!-- detail -->
-      <div role="row" class="flex items-center col-span-12 sm:col-span-6">
-        <p role="gridcell"
-          class="font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500"
-        >
-          DNSBL
-        </p>
-        <p role="gridcell"
-          class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
-        >
-          {% if service['USE_DNSBL']['value'] == 'yes' %}
+          {% if use %}
           <span class="sr-only">yes</span>
           <svg
             class="h-4 w-4 fill-green-500"
@@ -360,6 +121,7 @@
         </p>
       </div>
       <!-- end detail -->
+      {% endfor %}
     </div>
     <!-- end detail list-->
 
@@ -380,53 +142,49 @@
         </svg>
       </a>
 
-      <button
-      data-services-action="clone"
-      aria-label="clone service settings"
-      data-services-name="{{service["SERVER_NAME"]['value']}}"
-
-        class="dark:brightness-90 z-20 mx-1 bg-emerald-500 hover:bg-emerald-500/80 focus:bg-emerald-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25  active:opacity-85 hover:shadow-md"
-      >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"  class="w-6 h-6 fill-white">
-        <path fill-rule="evenodd" d="M17.663 3.118c.225.015.45.032.673.05C19.876 3.298 21 4.604 21 6.109v9.642a3 3 0 0 1-3 3V16.5c0-5.922-4.576-10.775-10.384-11.217.324-1.132 1.3-2.01 2.548-2.114.224-.019.448-.036.673-.051A3 3 0 0 1 13.5 1.5H15a3 3 0 0 1 2.663 1.618ZM12 4.5A1.5 1.5 0 0 1 13.5 3H15a1.5 1.5 0 0 1 1.5 1.5H12Z" clip-rule="evenodd" />
-        <path d="M3 8.625c0-1.036.84-1.875 1.875-1.875h.375A3.75 3.75 0 0 1 9 10.5v1.875c0 1.036.84 1.875 1.875 1.875h1.875A3.75 3.75 0 0 1 16.5 18v2.625c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625v-12Z" />
-        <path d="M10.5 10.5a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963 5.23 5.23 0 0 0-3.434-1.279h-1.875a.375.375 0 0 1-.375-.375V10.5Z" />
-      </svg>
-      </button>
-
-
-      <button
-      data-services-action="edit"
-      aria-label="edit service settings"
-      data-services-name="{{service["SERVER_NAME"]['value']}}"
-
-        class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25  active:opacity-85 hover:shadow-md"
-      >
-      <svg  class="h-6 w-6 fill-white"
-      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-      <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80z"/></svg>
-
-      </button>
-
+      {% set action_buttons = [
+        {"name" : "clone", "label" : "clone service settings", "color" : "emerald-500"},
+        {"name" : "edit", "label" : "edit service settings", "color" : "yellow-500"}
+      ]
+      %}
 
       {% if service["SERVER_NAME"]['method'] == "ui" %}
-      <button
-      data-services-action="delete"
-      aria-label="delete service"
-      data-services-name="{{service["SERVER_NAME"]['value']}}"
-        class="dark:brightness-90 z-20 mx-1 bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25  active:opacity-85 hover:shadow-md"
-      >
+        {% set action_buttons = action_buttons.append({"name" : "delete", "label" : "delete service settings", "color" : "red-500"}) %}
+      {% endif %}
+
+      {% for button in action_buttons %}
+        <button
+        data-services-action="{{button['name']}}"
+        aria-label="{{button['label']}}"
+        data-services-name="{{service["SERVER_NAME"]['value']}}"
+          class="dark:brightness-90 z-20 mx-1 bg-{{button['color']}} hover:bg-{{button['color']}}/80 focus:bg-{{button['color']}}/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25  active:opacity-85 hover:shadow-md"
+        >
+        {% if button['name'] == "clone" %}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"  class="w-6 h-6 fill-white">
+          <path fill-rule="evenodd" d="M17.663 3.118c.225.015.45.032.673.05C19.876 3.298 21 4.604 21 6.109v9.642a3 3 0 0 1-3 3V16.5c0-5.922-4.576-10.775-10.384-11.217.324-1.132 1.3-2.01 2.548-2.114.224-.019.448-.036.673-.051A3 3 0 0 1 13.5 1.5H15a3 3 0 0 1 2.663 1.618ZM12 4.5A1.5 1.5 0 0 1 13.5 3H15a1.5 1.5 0 0 1 1.5 1.5H12Z" clip-rule="evenodd" />
+          <path d="M3 8.625c0-1.036.84-1.875 1.875-1.875h.375A3.75 3.75 0 0 1 9 10.5v1.875c0 1.036.84 1.875 1.875 1.875h1.875A3.75 3.75 0 0 1 16.5 18v2.625c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625v-12Z" />
+          <path d="M10.5 10.5a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963 5.23 5.23 0 0 0-3.434-1.279h-1.875a.375.375 0 0 1-.375-.375V10.5Z" />
+        </svg>
+        {% endif %}
+        {% if button['name'] == "edit" %}
+        <svg  class="h-6 w-6 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80z"/>
+        </svg>
+        {% endif %}
+        {% if button['name'] == "delete" %}
         <svg
-          class="h-6 w-6 fill-white"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512"
+        class="h-6 w-6 fill-white"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
         >
           <path
             d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"
           />
         </svg>
-      </button>
-      {% endif %}
+        {% endif %}
+        </button>
+      {% endfor %}
+
     </div>
     <!-- end button list-->
   </div>