diff --git a/dashboard/src/views/AppsView.vue b/dashboard/src/views/AppsView.vue
index f4f3357f4..dc805fe1c 100644
--- a/dashboard/src/views/AppsView.vue
+++ b/dashboard/src/views/AppsView.vue
@@ -301,7 +301,7 @@ onDeactivated(() => {
       </div>
 
       <TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
-        <a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" :style="{ width: itemWidth }">
+        <a v-for="app in filteredApps" :key="app.id" class="grid-item" :class="{ 'item-inactive': app.runState === RSTATES.STOPPED }" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" :style="{ width: itemWidth }">
           <img :alt="app.label || app.subdomain || app.fqdn" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
           <div class="grid-item-label" v-fit-text>{{ app.label || app.subdomain || app.fqdn }}</div>
           <div class="grid-item-task-label" v-if="app.type === APP_TYPES.LINK">{{ $t('app.appLink.title') }}</div>
@@ -322,7 +322,7 @@ onDeactivated(() => {
         <TableView :columns="listColumns" :model="filteredApps">
           <template #icon="app">
             <a :href="'https://' + app.fqdn" target="_blank">
-              <img :alt="app.label || app.subdomain || app.fqdn" class="list-icon" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
+              <img :alt="app.label || app.subdomain || app.fqdn" class="list-icon" :class="{ 'item-inactive': app.runState === RSTATES.STOPPED }" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
             </a>
           </template>
           <template #label="app">
@@ -407,6 +407,10 @@ tr:hover .action-button {
   transform: translateY(-30px);
 }
 
+.item-inactive {
+  filter: grayscale(1);
+}
+
 .list-icon {
   width: 32px;
   height: 32px;