diff --git a/src/universal/partials/Welcome/PartialCards.js b/src/universal/partials/Welcome/PartialCards.js
new file mode 100644
index 0000000..b679102
--- /dev/null
+++ b/src/universal/partials/Welcome/PartialCards.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import groupBy from 'lodash/groupBy';
+import ReactDOMServer from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+
+import partials from './partials';
+const STATUS_COLOR = {
+  live: '#8dc63f',
+  dev: '#FF6000',
+  page: '#00abff',
+  1: '#9b59b6',
+  2: '#c0392b',
+  3: '#16a085'
+};
+
+const sheet = new ServerStyleSheet();
+
+const Welcome = () => {
+  const { live = [], dev = [], page = [], ...others } = groupBy(partials, item => item.status);
+
+  const renderItem = ({ item, status, title }) => (
+    <a
+      href={item.previewUrl ? item.previewUrl : `${item.url}?preview`}
+      target="_blank"
+      className="link"
+    >
+      <div className="card">
+        <div className="card-header">
+          <div className="badge" style={{ backgroundColor: STATUS_COLOR[status] }}>
+            {title}
+          </div>
+        </div>
+        <div className="card-title">{item.name}</div>
+        <div className="card-subtitle">
+          {status === 'page' ? 'Multiple partials' : 'Single partial'}
+        </div>
+        <button className="url-button detail-button">{item.previewUrl || item.url}</button>
+      </div>
+    </a>
+  );
+
+  const renderGroup = ({ title, data, status }) => {
+    return (
+      <div className="group">
+        <div className="group-content">
+          <div className="group-title">
+            {title.toUpperCase()} ({data.length})
+          </div>
+        </div>
+        <div className="cards">{data.map(item => renderItem({ item, status, title }))}</div>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      {page.length > 0 && renderGroup({ title: 'page', data: page, status: 'page' })}
+      {live.length > 0 && renderGroup({ title: 'live', data: live, status: 'live' })}
+      {dev.length > 0 && renderGroup({ title: 'dev', data: dev, status: 'dev' })}
+      {Object.entries(others).map((entity, index) => {
+        const [key, data] = entity;
+        return renderGroup({ title: key, data, status: index + 1 });
+      })}
+    </div>
+  );
+};
+export default ReactDOMServer.renderToString(sheet.collectStyles(<Welcome />));
+const styleTags = sheet.getStyleTags();
+
+export { styleTags };
diff --git a/src/universal/partials/Welcome/PartialList.js b/src/universal/partials/Welcome/PartialList.js
deleted file mode 100644
index fd90e8b..0000000
--- a/src/universal/partials/Welcome/PartialList.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import groupBy from 'lodash/groupBy';
-import ReactDOMServer from 'react-dom/server';
-import { ServerStyleSheet } from 'styled-components';
-
-import { List, ListItem, Name, Url, Footer, Label, Dot, Link, HeaderName } from './styled';
-import partials from './partials';
-
-const sheet = new ServerStyleSheet();
-
-const Welcome = () => {
-  const { live = [], dev = [], page = [], ...others } = groupBy(partials, item => item.status);
-
-  const renderItem = ({ item, status }) => (
-    <ListItem status={item.status}>
-      <Link href={item.previewUrl ? item.previewUrl : `${item.url}?preview`} target="_blank">
-        <Name>{item.name}</Name>
-        <Url>{item.url}</Url>
-        <Footer status={status}>
-          <Label status={status}>
-            {item.status} <Dot status={status} />
-          </Label>
-        </Footer>
-      </Link>
-    </ListItem>
-  );
-
-  const renderGroup = ({ title, value, status }) => {
-    return (
-      <>
-        <HeaderName>{title}</HeaderName>
-        {value.map(item => renderItem({ item, status }))}
-      </>
-    );
-  };
-
-  return (
-    <List>
-      {page.length > 0 && renderGroup({ title: 'page', value: page, status: 'page' })}
-      {live.length > 0 && renderGroup({ title: 'live', value: live, status: 'live' })}
-      {dev.length > 0 && renderGroup({ title: 'dev', value: dev, status: 'dev' })}
-      {Object.entries(others).map((entity, index) => {
-        const [key, value] = entity;
-        return renderGroup({ title: key, value, status: index + 1 });
-      })}
-    </List>
-  );
-};
-export default ReactDOMServer.renderToString(sheet.collectStyles(<Welcome />));
-const styleTags = sheet.getStyleTags();
-
-export { styleTags };
diff --git a/src/universal/partials/Welcome/Welcome.js b/src/universal/partials/Welcome/Welcome.js
index 173aff5..97413c4 100644
--- a/src/universal/partials/Welcome/Welcome.js
+++ b/src/universal/partials/Welcome/Welcome.js
@@ -1,4 +1,7 @@
-import PartialList, { styleTags } from './PartialList';
+import PartialCards from './PartialCards';
+import welcomeStyle from './welcomeStyle';
+
+import voltranConfig from '../../../../voltran.config';
 
 export default () => {
   return `
@@ -6,23 +9,69 @@ export default () => {
       <head>
         <title>Welcome</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
-          * {
-            box-sizing: border-box;
-          }
-          body {
-            background: #f5f5f5;
-            margin: 0 auto;
-            padding: 10px;
-            font-family: 'Lato', sans-serif;
-            text-shadow: 0 0 1px rgba(255, 255, 255, 0.004);
-            font-size: 100%;
-            font-weight: 400;
-          }
-        </style>
-        ${styleTags}
+        ${welcomeStyle()}
       </head>
-      <body>${PartialList}</body>
+      <body>
+        <div class="container">
+            <div class="header">
+              <div class="logo">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="transform: rotate(180deg);">
+                  <path
+                    xmlns="http://www.w3.org/2000/svg"
+                    d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z"
+                    fill="#0473ff"
+                    data-original="#28b446"
+                  />
+                  <path
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="#0473ff"
+                    data-original="#219b38"
+                    d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z"
+                  />
+                  <path
+                    xmlns="http://www.w3.org/2000/svg"
+                    d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z"
+                    fill="#0473ff"
+                    data-original="#518ef8"
+                  />
+                </svg>
+               ${voltranConfig.prefix} MikroFrontend Interface
+              <div class="settings">
+                <div class="dark-light">
+                  <svg
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            </div>
+            <div class="wrapper">
+              <div class="main-container">
+                ${PartialCards}
+              </div>
+            </div>
+        </div>
+        <script>
+        const toggleButton = document.querySelector(".dark-light");
+        let theme = localStorage.getItem("voltran-welcome-theme");
+
+        if(theme === 'dark-mode'){
+           document.body.classList.toggle("dark-mode");
+        }
+
+        toggleButton.addEventListener("click", () => {
+          document.body.classList.toggle("dark-mode");
+          localStorage.setItem("voltran-welcome-theme", document.body.classList.value);
+        });
+        </script>
+      </body>
     </html>
   `;
 };
diff --git a/src/universal/partials/Welcome/styled.js b/src/universal/partials/Welcome/styled.js
deleted file mode 100644
index 0f55d4f..0000000
--- a/src/universal/partials/Welcome/styled.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import styled from 'styled-components';
-
-const STATUS_COLOR = {
-  live: '#8dc63f',
-  dev: '#FF6000',
-  page: '#00abff',
-  1: '#9b59b6',
-  2: '#c0392b',
-  3: '#16a085'
-};
-
-export const List = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  margin-bottom: 20px;
-`;
-
-export const HeaderName = styled.div`
-  font-size: 36px;
-  font-weight: bold;
-  margin: 10px;
-`;
-
-export const ListItem = styled.li`
-  padding: 20px;
-  display: inline-block;
-  vertical-align: top;
-  height: 120px;
-  width: 240px;
-  margin: 10px;
-  cursor: pointer;
-  border-radius: 10px;
-
-  position: relative;
-  background-color: #fff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-
-  :after {
-    content: '';
-    border-radius: 10px;
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    opacity: 0;
-    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  }
-
-  &:hover {
-    transform: scale(1.02, 1.02);
-    :after {
-      opacity: 1;
-    }
-  }
-
-  @media screen and (max-width: 600px) {
-    display: block;
-    width: auto;
-    height: 150px;
-    margin: 10px auto;
-  }
-`;
-
-export const Link = styled.a`
-  text-decoration: none;
-  color: #49494a;
-
-  &:before {
-    position: absolute;
-    z-index: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    content: '';
-  }
-`;
-
-export const Name = styled.span`
-  font-weight: 800;
-  display: block;
-  max-width: 80%;
-  font-size: 16px;
-  line-height: 18px;
-`;
-
-export const Url = styled.span`
-  font-size: 11px;
-  line-height: 16px;
-  color: #a1a1a4;
-`;
-
-export const Footer = styled.span`
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  padding: 20px;
-  border-top: 1px solid ${({ status }) => (status && STATUS_COLOR[status]) || '#eeeeee'}50;
-  font-size: 13px;
-`;
-
-export const Label = styled.span`
-  font-size: 13px;
-  align-items: center;
-  font-weight: bold;
-  display: flex;
-  position: absolute;
-  right: 20px;
-  top: 0;
-  line-height: 40px;
-  margin: 0 10px;
-
-  @media screen and (max-width: 200px) {
-    right: auto;
-    left: 10px;
-  }
-
-  color: ${({ status }) => (status && STATUS_COLOR[status]) || '#8dc63f'};
-`;
-
-export const Dot = styled.span`
-  display: inline-block;
-  vertical-align: middle;
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-  border-radius: 50%;
-  padding: 0;
-  text-indent: -9999px;
-  color: transparent;
-  line-height: 16px;
-  margin-left: 10px;
-  background: ${({ status }) => (status && STATUS_COLOR[status]) || '#8dc63f'};
-`;
diff --git a/src/universal/partials/Welcome/welcomeStyle.js b/src/universal/partials/Welcome/welcomeStyle.js
new file mode 100644
index 0000000..9b09e2b
--- /dev/null
+++ b/src/universal/partials/Welcome/welcomeStyle.js
@@ -0,0 +1,322 @@
+const welcomeStyle = () => {
+  return `<style>
+          @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
+          * {
+            outline: none;
+            box-sizing: border-box;
+          }
+          :root {
+            --body-bg-color: #e5ecef;
+            --theme-bg-color: #fafafb;
+            --body-font: "Poppins", sans-serif;
+            --body-color: #2f2f33;
+            --active-color: #0162ff;
+            --active-light-color: #e1ebfb;
+            --header-bg-color: #fff;
+            --border-color: #d8d8d8;
+            --alert-bg-color: #e8f2ff;
+            --subtitle-color: #83838e;
+            --inactive-color: #f0f0f0;
+            --button-color: #fff;
+          }
+          .dark-mode {
+            --body-bg-color: #1d1d1d;
+            --theme-bg-color: #13131a;
+            --header-bg-color: #1c1c24;
+            --body-color: #fff;
+            --inactive-color: #292932;
+            --active-light-color: #263d63;
+            --border-color: #26262f;
+          }
+
+          html {
+            box-sizing: border-box;
+            -webkit-font-smoothing: antialiased;
+          }
+
+          body {
+            background-color: var(--body-bg-color);
+            font-family: var(--body-font);
+            font-size: 15px;
+            color: var(--body-color);
+            margin:0;
+            padding:0;
+          }
+          .dark-light {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .dark-light svg {
+            margin-right: 8px;
+            width: 22px;
+            cursor: pointer;
+            fill: transparent;
+            transition: 0.5s;
+          }
+          .dark-mode .dark-light svg {
+            fill: #ffce45;
+            stroke: #ffce45;
+          }
+
+          .dark-mode .detail-button {
+            background-color: var(--inactive-color);
+            color: var(--subtitle-color);
+          }
+
+          .container {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            margin: 0 auto;
+            overflow: hidden;
+            background-color: var(--theme-bg-color);
+          }
+
+          .logo {
+            display: flex;
+            align-items: center;
+            font-weight: 600;
+            font-size: 18px;
+            cursor: pointer;
+            justify-content: center;
+          }
+          .logo svg {
+            width: 24px;
+            margin-right: 12px;
+          }
+
+          .header {
+            display: flex;
+            align-items: center;
+            transition: box-shadow 0.3s;
+            flex-shrink: 0;
+            padding: 0 40px;
+            white-space: nowrap;
+            background-color: var(--header-bg-color);
+            height: 60px;
+            width: 100%;
+            font-size: 14px;
+            justify-content: space-between;
+          }
+          .settings {
+            display: flex;
+            align-items: center;
+            font-weight: 500;
+            margin-left: 20px;
+          }
+          .settings svg {
+            width: 20px;
+            color: #94949f;
+          }
+
+          .wrapper {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            scroll-behavior: smooth;
+            padding: 30px 40px;
+            overflow: auto;
+          }
+          .main-container {
+            display: flex;
+            flex-grow: 1;
+          }
+
+          .url-button {
+            border: none;
+            color: var(--button-color);
+            background-color: var(--active-color);
+            padding: 8px 10px;
+            border-radius: 6px;
+            font-size: 13px;
+            font-weight: 600;
+            margin-top: 14px;
+          }
+
+          @-webkit-keyframes slideY {
+            0% {
+              opacity: 0;
+              transform: translateY(200px);
+            }
+          }
+
+          @keyframes slideY {
+            0% {
+              opacity: 0;
+              transform: translateY(200px);
+            }
+          }
+          .group-content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            -webkit-animation: slideY 0.6s both;
+                    animation: slideY 0.6s both;
+          }
+          .group-title {
+            font-size: 24px;
+            font-weight: 600;
+          }
+          .link {
+            color: inherit;
+            text-decoration: inherit;
+          }
+
+          .cards {
+            padding-top: 20px;
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            grid-column-gap: 25px;
+            grid-row-gap: 25px;
+            -webkit-animation: slideY 0.6s both;
+            animation: slideY 0.6s both;
+          }
+          @media screen and (max-width: 1600px) {
+            .cards {
+              grid-template-columns: repeat(4, 1fr);
+            }
+          }
+          @media screen and (max-width: 1500px) {
+            .cards {
+              grid-template-columns: repeat(3, 1fr);
+            }
+          }
+          @media screen and (max-width: 1212px) {
+            .cards {
+              grid-template-columns: repeat(2, 1fr);
+            }
+          }
+
+          .card {
+            padding: 20px 16px;
+            background-color: var(--header-bg-color);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: 0.2s;
+            text-decoration: none;
+          }
+          .card:hover {
+            transform: scale(1.02);
+          }
+          .card svg {
+            width: 46px;
+            padding: 10px;
+            border-radius: 8px;
+          }
+          .card-title {
+            font-weight: 600;
+            margin-top: 16px;
+            font-size: 14px;
+          }
+          .card-subtitle {
+            color: var(--subtitle-color);
+            font-size: 13px;
+            margin-top: 14px;
+            line-height: 1.6em;
+          }
+          .card-header {
+            display: flex;
+            align-items: flex-start;
+          }
+          .badge{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #f50;
+            font-weight: 600;
+            margin-top: 16px;
+            font-size: 14px;
+            padding: 5px 10px;
+            color: white;
+            border-radius: 5px;
+          }
+          .detail-button {
+            background-color: var(--active-light-color);
+            color: var(--active-color);
+            font-size: 11px;
+            font-weight: 500;
+            padding: 6px 8px;
+            border-radius: 4px;
+            text-align: start;
+          }
+          .detail-button + .detail-button {
+            margin-left: 4px;
+          }
+
+          .card-buttons {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            margin-top: 4px;
+          }
+          .card-buttons,
+          .card-buttons {
+            margin-right: 12px;
+          }
+          .header-shadow {
+            box-shadow: 0 4px 20px rgba(88, 99, 148, 0.17);
+            z-index: 1;
+          }
+          .group {
+            padding-top: 20px;
+          }
+          @-webkit-keyframes slide {
+            0% {
+              opacity: 0;
+              transform: translateX(300px);
+            }
+          }
+
+          @keyframes slide {
+            0% {
+              opacity: 0;
+              transform: translateX(300px);
+            }
+          }
+
+
+          @media screen and (max-width: 730px) {
+            .group {
+              padding-left: 0;
+            }
+            .cards {
+              grid-template-columns: repeat(2, 1fr);
+            }
+          }
+
+
+          @media screen and (max-width: 620px) {
+            .cards {
+              grid-template-columns: repeat(1, 1fr);
+            }
+          }
+          @media screen and (max-width: 590px) {
+            .header-menu {
+              display: none;
+            }
+          }
+          @media screen and (max-width: 520px) {
+            .group-content {
+              flex-direction: column;
+              align-items: flex-start;
+            }
+            .main-container {
+            }
+          }
+          @media screen and (max-width: 380px) {
+
+            .wrapper {
+              padding: 20px;
+            }
+
+            .header {
+              padding: 0 20px;
+            }
+          }
+        </style>`;
+};
+
+export default welcomeStyle;