diff --git a/extensions/cache/deployment/src/main/resources/dev-templates/caches.html b/extensions/cache/deployment/src/main/resources/dev-templates/caches.html
index 6a10705f6a4d9..2336f7685a186 100644
--- a/extensions/cache/deployment/src/main/resources/dev-templates/caches.html
+++ b/extensions/cache/deployment/src/main/resources/dev-templates/caches.html
@@ -1,9 +1,65 @@
 {#include main}
 {#style}
-.annotation {
-color: gray;
+.clearCacheIcon:hover {
+    color: #3366ac !important;
+    cursor: pointer;
+}
+.refreshCacheIcon:hover {
+    color: #3366ac !important;
+    cursor: pointer;
 }
 {/style}
+
+{#script}
+
+function refreshCache(cacheName){
+    $.post("",
+        {
+          name: cacheName,
+          action: "refresh"
+        },
+        function(data, status){
+            if(status === "success"){
+                updateSize(data,cacheName);
+            }
+        });
+}
+
+function clearCache(cacheName){
+    $.post("",
+        {
+          name: cacheName,
+          action: "clearCache"
+        },
+        function(data, status){
+            if(status === "success"){
+                updateSize(data,cacheName);
+                changeBackgroundColor("#76be6b", cacheName);
+            }else{
+                changeBackgroundColor("#ff6366", cacheName);
+            }
+        });
+}
+
+function updateSize(data, cacheName){
+    var r = JSON.parse(data);
+    var spanId = 'size-' + cacheName;
+    $('#' + spanId).html(r.size);
+}
+
+function changeBackgroundColor(color, cacheName){
+    var className = 'tr-' + cacheName;
+    var element = $('#' + className);
+    
+    var x = 3000;
+    var originalColor = element.css("background-color");
+
+    element.css("background", color);
+        setTimeout(function(){
+        element.css("background", originalColor);
+    }, x);
+}
+{/script}
 {#title}Caches{/title}
 {#body}
 <table class="table table-striped">
@@ -15,18 +71,13 @@
     </thead>
     <tbody>
     {#for cacheInfo in info:cacheInfos}
-    <tr>
+    <tr id="tr-{cacheInfo.name}">
         <td>
-            {cacheInfo.name}
+            <i class="fas fa-sync-alt text-success refreshCacheIcon align-middle" onclick="refreshCache('{cacheInfo.name}');" title="Refresh"></i> {cacheInfo.name}
         </td>
         <td>
-            <form method="post"  enctype="application/x-www-form-urlencoded">
-                <label class="form-check-label" for="clear">
-                    {cacheInfo.size}
-                </label>
-                <input type="hidden" name="name" value="{cacheInfo.name}">
-                <input id="clear" type="submit" class="btn btn-primary btn-sm" value="Clear" >
-            </form>
+            <span id="size-{cacheInfo.name}">{cacheInfo.size}</span>
+            <i class="fas fa-trash-alt float-right text-danger clearCacheIcon align-middle" onclick="clearCache('{cacheInfo.name}');" title="Clear"></i>    
         </td>
     {/for}
     </tbody>
diff --git a/extensions/cache/runtime/src/main/java/io/quarkus/cache/runtime/devconsole/CacheDevConsoleRecorder.java b/extensions/cache/runtime/src/main/java/io/quarkus/cache/runtime/devconsole/CacheDevConsoleRecorder.java
index c8d1058f50983..4df295c0400d8 100644
--- a/extensions/cache/runtime/src/main/java/io/quarkus/cache/runtime/devconsole/CacheDevConsoleRecorder.java
+++ b/extensions/cache/runtime/src/main/java/io/quarkus/cache/runtime/devconsole/CacheDevConsoleRecorder.java
@@ -2,32 +2,63 @@
 
 import java.util.Optional;
 
+import io.netty.handler.codec.http.HttpResponseStatus;
 import io.quarkus.cache.Cache;
 import io.quarkus.cache.runtime.CaffeineCacheSupplier;
 import io.quarkus.cache.runtime.caffeine.CaffeineCache;
 import io.quarkus.devconsole.runtime.spi.DevConsolePostHandler;
-import io.quarkus.devconsole.runtime.spi.FlashScopeUtil.FlashMessageStatus;
 import io.quarkus.runtime.annotations.Recorder;
+import io.quarkus.vertx.http.runtime.devmode.Json;
 import io.vertx.core.Handler;
 import io.vertx.core.MultiMap;
 import io.vertx.ext.web.RoutingContext;
 
 @Recorder
 public class CacheDevConsoleRecorder {
-
     public Handler<RoutingContext> clearCacheHandler() {
         return new DevConsolePostHandler() {
+            int code;
+            String message = "";
+
             @Override
             protected void handlePost(RoutingContext event, MultiMap form) throws Exception {
                 String cacheName = form.get("name");
                 Optional<Cache> cache = CaffeineCacheSupplier.cacheManager().getCache(cacheName);
                 if (cache.isPresent() && cache.get() instanceof CaffeineCache) {
-                    ((CaffeineCache) cache.get()).invalidateAll();
-                    // redirect to the same page so we can make sure we see the updated results
-                    flashMessage(event, "Cache for " + cacheName + " cleared");
+                    CaffeineCache caffeineCache = (CaffeineCache) cache.get();
+
+                    String action = form.get("action");
+                    if (action.equalsIgnoreCase("clearCache")) {
+                        caffeineCache.invalidateAll();
+                    }
+                    this.code = HttpResponseStatus.OK.code();
+                    this.message = createResponseMessage(caffeineCache);
                     return;
+                } else {
+                    String errorMessage = "Cache for " + cacheName + " not found";
+                    this.code = HttpResponseStatus.NOT_FOUND.code();
+                    this.message = createResponseError(cacheName, errorMessage);
                 }
-                flashMessage(event, "Cache for " + cacheName + " not found", FlashMessageStatus.ERROR);
+            }
+
+            @Override
+            protected void actionSuccess(RoutingContext event) {
+                event.response().setStatusCode(this.code);
+                event.response().end(this.message);
+            }
+
+            private String createResponseMessage(CaffeineCache cache) {
+                Json.JsonObjectBuilder object = Json.object();
+                object.put("name", cache.getName());
+                object.put("size", cache.getSize());
+                return object.build();
+            }
+
+            private String createResponseError(String name, String error) {
+                Json.JsonObjectBuilder object = Json.object();
+                object.put("name", name);
+                object.put("error", error);
+                return object.build();
             }
         };
     }
diff --git a/extensions/vertx-http/dev-console-runtime-spi/src/main/java/io/quarkus/devconsole/runtime/spi/DevConsolePostHandler.java b/extensions/vertx-http/dev-console-runtime-spi/src/main/java/io/quarkus/devconsole/runtime/spi/DevConsolePostHandler.java
index 058820a7a253d..b97a15b81901f 100644
--- a/extensions/vertx-http/dev-console-runtime-spi/src/main/java/io/quarkus/devconsole/runtime/spi/DevConsolePostHandler.java
+++ b/extensions/vertx-http/dev-console-runtime-spi/src/main/java/io/quarkus/devconsole/runtime/spi/DevConsolePostHandler.java
@@ -72,7 +72,7 @@ public void run() {
         }
     }
 
-    private void actionSuccess(RoutingContext event) {
+    protected void actionSuccess(RoutingContext event) {
         event.response().setStatusCode(HttpResponseStatus.SEE_OTHER.code()).headers()
                 .set(HttpHeaderNames.LOCATION, event.request().absoluteURI());
         event.response().end();