diff --git a/src/ui/static/js/global.js b/src/ui/static/js/global.js
index 6421826cb..e42945138 100644
--- a/src/ui/static/js/global.js
+++ b/src/ui/static/js/global.js
@@ -21,21 +21,107 @@ class Menu {
 
 class News {
   constructor() {
-    this.sidebarEl = document.querySelector("[sidebar-info]");
-    this.openBtn = document.querySelector("[sidebar-info-open]");
-    this.closeBtn = document.querySelector("[sidebar-info-close]");
-    this.openBtn.addEventListener("click", this.open.bind(this));
-    this.closeBtn.addEventListener("click", this.close.bind(this));
+    this.BASE_URL = "https://www.staging.bunkerweb.io/";
+    this.init();
   }
 
-  open() {
-    this.sidebarEl.classList.add("translate-x-0");
-    this.sidebarEl.classList.remove("translate-x-90");
+  init() {
+    window.addEventListener("load", async () => {
+      try {
+        const res = await fetch(
+          "https://www.staging.bunkerweb.io/api/posts/0/2",
+          {
+            headers: {
+              method: "GET",
+            },
+          }
+        );
+        return await this.render(res);
+      } catch (err) {
+        console.log(err);
+      }
+    });
   }
 
-  close() {
-    this.sidebarEl.classList.add("translate-x-90");
-    this.sidebarEl.classList.remove("translate-x-0");
+  async render(lastNews) {
+    const newsContainer = document.querySelector("[news-container]");
+    //remove default message
+    newsContainer.textContent = "";
+    //render last news
+    lastNews.forEach((news) => {
+      //get info
+      const slug = news.slug;
+      const img = news.photo.url;
+      const excerpt = news.excerpt;
+      const tags = news.tags;
+      const date = news.date;
+      const lastUpdate = news.lastUpdate;
+      //create html card from  infos
+      const cardHTML = this.template(
+        slug,
+        img,
+        excerpt,
+        tags,
+        date,
+        lastUpdate
+      );
+      //add to DOM
+      document
+        .querySelector("[news-container]")
+        .insertAdjacentHTML("afterbegin", cardHTML);
+    });
+  }
+
+  template(slug, img, excerpt, tags, date, lastUpdate) {
+    //loop on tags to get list
+    let tagList = "";
+    tags.forEach((tag) => {
+      tagList += ` <a
+      href="${this.BASE_URL}/blog/tag/${tag.slug}"
+      class="my-0 mr-1 rounded bg-secondary hover:brightness-90 hover:-translate-y-0.4 text-white py-1 px-2 text-sm"
+      >
+      ${tag.name}
+      </a>`;
+    });
+    //create card
+    const card = `  
+      <div
+        class="min-h-[400px] w-full col-span-12 transition hover:-translate-y-2  bg-gray-100 dark:bg-slate-900 rounded px-6 py-4 m-2  flex flex-col justify-between"
+      >
+        <div>
+            <img  role="link"
+                onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
+                class="cursor-pointer rounded w-full  h-40 m-0 object-cover"
+                src="${img}"
+                alt="image"
+            />
+            <h3 role="link"                     
+            onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
+            class="cursor-pointer mt-3 mb-1  text-3xl dark:text-white tracking-wide">{{ post['title'] }}</h3>            
+        </div>
+        <div>
+            <div  role="link"                     
+            onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
+            class="cursor-pointer min-h-[130px] mb-3 text-lg dark:text-gray-300 text-gray-600 pt-3">
+                ${excerpt}
+            </div>
+            <div class="min-h-[75px] mt-2 flex flex-wrap justify-start items-end align-bottom">
+                ${tagList}
+            </div>
+
+            <div class="mt-2 flex flex-col justify-start items-start">
+                <span class="text-xs  dark:text-gray-300 text-gray-600"
+                >Posted on : ${date}</span
+                >
+                {% if post["updatedAt"] %}
+                <span class="text-xs  dark:text-gray-300 text-gray-600"
+                >Last update : ${lastUpdate}</span
+                >
+                {%endif%}
+            </div>
+        </div>
+      </div>  `;
+    return card;
   }
 }
 
@@ -102,7 +188,6 @@ class darkMode {
 
 class FlashMsg {
   constructor() {
-    this.delayBeforeRemove = 8000;
     this.openBtn = document.querySelector("[flash-sidebar-open]");
     this.flashCount = document.querySelector("[flash-count]");
     this.isMsgCheck = false;
@@ -112,7 +197,7 @@ class FlashMsg {
   init() {
     //animate message button if message + never opened
     window.addEventListener("load", (e) => {
-      if (this.flashCount.textContent > 0) this.animeBtn();
+      if (Number(this.flashCount.textContent) > 0) this.animeBtn();
     });
     //stop animate if clicked once
     this.openBtn.addEventListener("click", (e) => {
@@ -193,12 +278,17 @@ class Loader {
 
 const setLoader = new Loader();
 const setMenu = new Menu();
-const setNews = new News();
+const setNewsSidebar = new Sidebar(
+  "[sidebar-info]",
+  "[sidebar-info-open]",
+  "[sidebar-info-close]"
+);
 const setFlashSidebar = new Sidebar(
   "[flash-sidebar]",
   "[flash-sidebar-open]",
   "[flash-sidebar-close]"
 );
+const setNews = new News();
 const setDarkM = new darkMode();
 const setCheckbox = new Checkbox("[sidebar-info]");
 const setFlash = new FlashMsg();
diff --git a/src/ui/templates/news.html b/src/ui/templates/news.html
index ef50a4e1e..76f62d195 100644
--- a/src/ui/templates/news.html
+++ b/src/ui/templates/news.html
@@ -56,43 +56,12 @@
   />
   <!-- end header -->
   <!-- news-->
-  <div class="flex-auto overflow-auto">
-    {% if posts %} {% for post in posts %}
-
-    <a
-      class="transition hover:scale-102 bg-gray-100 dark:bg-slate-900 rounded px-6 py-4 m-2 col-span-12 md:col-span-6 flex flex-col justify-between"
-      href="{{ post['link'] }}"
-      target="_blank"
-    >
-      <div>
-        <h3 class="title text-base dark:text-white">{{ post['title'] }}</h3>
-
-        <img
-          class="rounded w-full h-30 m-0 object-cover"
-          src="{{ post['image_url'] }}"
-          alt="image"
-        />
-        <div class="text-sm dark:text-gray-300 pt-3">
-          {{ post['description'] }}
-        </div>
-      </div>
-
-      <div class="mt-4 flex justify-between items-center">
-        <span class="text-xs font-semibold dark:text-gray-300"
-          >{{ post['date'] }}</span
-        ><span class="ml-3 text-xs italic dark:text-gray-300"
-          >{{ post['reading_time'] }} read</span
-        >
-      </div>
-    </a>
-
-    {% endfor %} {% else %}
+  <div news-container class="flex-auto overflow-auto">
     <p
       class="text-center col-span-12 relative w-full p-4 text-blue-500 rounded-lg"
     >
       Impossible to connect to blog news.
     </p>
-    {% endif %}
   </div>
   <!-- end news-->
 
diff --git a/src/ui/templates/settings_plugins.html b/src/ui/templates/settings_plugins.html
index 17fa4d071..4f92eb1c7 100644
--- a/src/ui/templates/settings_plugins.html
+++ b/src/ui/templates/settings_plugins.html
@@ -221,25 +221,38 @@
     <!-- end plugin settings -->
   </div>
   <!-- end plugin settings not multiple -->
+
+  {# get number of multiple groups for the plugin #}
+  {%set multList = []%}
+  {% for setting, value in plugin["settings"].items() %}
+    {% if current_endpoint
+    == "global-config" and value['context'] == "global" and value['multiple'] and not value['multiple'] in multList or current_endpoint ==
+    "services" and value['context'] == "multisite" and value['multiple']  and not value['multiple'] in multList %}
+      {% set multList = multList.append(value['multiple']) %}
+    {%endif%}
+  {%endfor%}
   
-  <!-- plugin multiple -->
-  {% if not plugin['multiple'] %}
+  {%for multiple in multList %}
+  <!-- plugin multiple handler -->
   <div multiple-handler class="flex items-center mx-0 sm:mx-4 md:mx-6 md:my-3 my-2 2xl:mx-6 2xl:my-3  col-span-12 ">
     <h5
     class="transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
     >
-      {{plugin['name']}}
+      {{multiple}}
     </h5>
-    <button {{current_endpoint}}-multiple-add="{{plugin['name']}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
+    <button {{current_endpoint}}-multiple-add="{{multiple}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
       Add
     </button>
   </div>
-  <div {{current_endpoint}}-settings-multiple="{{plugin['name']}}_SCHEMA" class="hidden w-full mb-8 grid-cols-12 border dark:border-gray-700">
+  <!-- end plugin multiple handler-->
 
+  <!-- multiple settings -->
+  <div {{current_endpoint}}-settings-multiple="{{multiple}}_SCHEMA" class="hidden w-full mb-8 grid-cols-12 border dark:border-gray-700">
     {% for setting, value in plugin["settings"].items() %}
+    {# render only setting that match the multiple id and context #}
     {% if current_endpoint
-      == "global-config" and value['context'] == "global" and value['multiple'] or current_endpoint ==
-      "services" and value['context'] == "multisite" and value['multiple'] %}
+      == "global-config" and value['context'] == "global" and value['multiple'] == multiple or current_endpoint ==
+      "services" and value['context'] == "multisite" and value['multiple'] == multiple %}
     <div  setting-container="{{setting}}_SCHEMA"
       class="    
       mx-0 sm:mx-4  my-2 col-span-12 md:mx-6 md:my-3 md:col-span-6 2xl:mx-6 2xl:my-3 2xl:col-span-4"
@@ -416,8 +429,8 @@
     </div>
     <!-- end plugin settings -->
   </div>
-  {%endif %}
-  <!-- end plugin multiple -->
+  {% endfor %}
+  <!-- end multiple settings -->
 </div>
 {% endfor %}
 <!-- end plugin item -->