diff --git a/admin-ui/src/components/ServicesProvider/info.vue b/admin-ui/src/components/ServicesProvider/info.vue
index c4afa8e85..30bbfc97d 100644
--- a/admin-ui/src/components/ServicesProvider/info.vue
+++ b/admin-ui/src/components/ServicesProvider/info.vue
@@ -224,6 +224,10 @@ const plansParams = computed(() => {
     type.push("ione-vpn");
   }
 
+  if (provider.value.type === "empty") {
+    type.push("vpn");
+  }
+
   return {
     showDeleted: false,
     excludeUuids: relatedPlans.value?.map((p) => p.uuid) || [],
diff --git a/admin-ui/src/components/showcases_table.vue b/admin-ui/src/components/showcases_table.vue
index 6dc3f7444..f46fb4902 100644
--- a/admin-ui/src/components/showcases_table.vue
+++ b/admin-ui/src/components/showcases_table.vue
@@ -12,6 +12,7 @@
       <icon-title-preview
         type="nocloud"
         :icon="item.icon"
+        :color="item.meta.iconColor"
         :title="item.title"
       />
     </template>
diff --git a/admin-ui/src/components/ui/iconTitlePreview.vue b/admin-ui/src/components/ui/iconTitlePreview.vue
index f8f56a7ce..d42981346 100644
--- a/admin-ui/src/components/ui/iconTitlePreview.vue
+++ b/admin-ui/src/components/ui/iconTitlePreview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex justify-space-between" style="width: 100%">
     <span>{{ title }}</span>
-    <nocloud-icon :type="type" :icon="icon" />
+    <nocloud-icon :color="color" :type="type" :icon="icon" />
   </div>
 </template>
 
@@ -15,6 +15,7 @@ export default {
     type: {},
     title: { type: String, default: "none" },
     icon: { type: String, default: "" },
+    color: { type: String, default: "" },
   },
 };
 </script>
diff --git a/admin-ui/src/components/ui/nocloudIcon.vue b/admin-ui/src/components/ui/nocloudIcon.vue
index 239a34411..866fee64e 100644
--- a/admin-ui/src/components/ui/nocloudIcon.vue
+++ b/admin-ui/src/components/ui/nocloudIcon.vue
@@ -1,13 +1,20 @@
 <template>
-  <v-icon class="ml-2" v-if="isMdi">{{ `mdi-${iconName}` }}</v-icon>
-  <ant-icon v-else-if="isAnt" class="ml-2" :name="iconName" />
+  <v-icon :style="{ fill: color }" :color="color" class="ml-2" v-if="isMdi">{{
+    `mdi-${iconName}`
+  }}</v-icon>
+  <ant-icon
+    :style="{ fill: color }"
+    v-else-if="isAnt"
+    class="ml-2"
+    :name="iconName"
+  />
   <img
     v-else-if="iconName && !loadedError"
     width="22px"
     height="22px"
     :src="iconName"
   />
-  <ant-icon v-else class="ml-2" :name="icon" />
+  <ant-icon :style="{ fill: color }" v-else class="ml-2" :name="icon" />
 </template>
 
 <script setup>
@@ -18,6 +25,7 @@ const props = defineProps({
   type: { type: String, default: "mdi" },
   title: { type: String, default: "none" },
   icon: { type: String, default: "" },
+  color: { type: String, default: "" },
 });
 const { type, icon } = toRefs(props);
 
diff --git a/admin-ui/src/views/ShowcaseCreate.vue b/admin-ui/src/views/ShowcaseCreate.vue
index 15ce6a062..0e465cb6b 100644
--- a/admin-ui/src/views/ShowcaseCreate.vue
+++ b/admin-ui/src/views/ShowcaseCreate.vue
@@ -35,6 +35,9 @@
             @input:value="showcase.icon = $event"
           />
         </v-col>
+        <v-col cols="2">
+          <color-picker label="Color" v-model="showcase.meta.iconColor" />
+        </v-col>
         <v-col cols="3">
           <v-autocomplete
             clearable
@@ -128,6 +131,7 @@ import { useStore } from "@/store";
 import api from "@/api";
 import { useRouter } from "vue-router/composables";
 import LocationsAutocomplete from "@/components/ui/locationsAutocomplete.vue";
+import ColorPicker from "@/components/ui/colorPicker.vue";
 
 const props = defineProps({
   realShowcase: {},
@@ -167,6 +171,7 @@ const showcase = ref({
   public: true,
   meta: {
     type: "",
+    iconColor: "",
   },
 });
 
@@ -371,7 +376,9 @@ const fetchPlans = async () => {
 
   try {
     await Promise.all(
-      showcase.value.items.map(async ({ servicesProvider: sp }) => {
+      showcase.value.items.map(async (item) => {
+        let sp = item.servicesProvider;
+
         try {
           if (sp && !plansBySpMap.value.has(sp)) {
             plansBySpMap.value.set(
@@ -396,7 +403,7 @@ const fetchPlans = async () => {
   }
 };
 
-watch(showcase.value.items, fetchPlans);
+watch(() => showcase.value.items, fetchPlans,{deep:true});
 </script>
 
 <style scoped lang="scss">