diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index 5e4402459..df2a26b3c 100644
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -103,6 +103,11 @@
                                 <img alt="Apollo" src="./assets/images/layouts/apollo.jpg">
                             </a>
                         </div>
+                        <div class="p-col-12">
+                            <a href="https://www.primefaces.org/layouts/roma-vue">
+                                <img alt="Roma" src="./assets/images/layouts/roma.jpg">
+                            </a>
+                        </div>
                     </div>
                 </div>
 
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index 2bfeebaf1..8b6aa9fc3 100644
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -40,6 +40,7 @@
                         <li><a href="https://www.primefaces.org/avalon-vue"><img src="./assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a></li>
                         <li><a href="https://www.primefaces.org/babylon-vue"><img src="./assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></a></li>
                         <li><a href="https://www.primefaces.org/apollo-vue"><img src="./assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></a></li>
+                        <li><a href="https://www.primefaces.org/roma-vue"><img src="./assets/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></a></li>
                     </ul>
                 </transition>
             </li>
diff --git a/src/assets/images/layouts/roma.jpg b/src/assets/images/layouts/roma.jpg
new file mode 100644
index 000000000..357413cb1
Binary files /dev/null and b/src/assets/images/layouts/roma.jpg differ
diff --git a/src/assets/images/layouts/themeswitcher-roma.jpg b/src/assets/images/layouts/themeswitcher-roma.jpg
new file mode 100755
index 000000000..ce9b2b286
Binary files /dev/null and b/src/assets/images/layouts/themeswitcher-roma.jpg differ
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 043f28a8d..e7cdeb463 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -129,21 +129,26 @@
                         <img alt="Sapphire" src="../assets/images/layouts/sapphire.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-6">
-                    <a href="https://www.primefaces.org/layouts/babylon-vue">
-                        <img alt="Babylon" src="../assets/images/layouts/babylon.jpg">
-                    </a>
-                </div>
                 <div class="p-col-12 p-md-6">
                     <a href="https://www.primefaces.org/layouts/avalon-vue">
                         <img alt="Avalon" src="../assets/images/layouts/avalon.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
+                    <a href="https://www.primefaces.org/layouts/babylon-vue">
+                        <img alt="Babylon" src="../assets/images/layouts/babylon.jpg">
+                    </a>
+                </div>
+                <div class="p-col-12 p-md-4">
                     <a href="https://www.primefaces.org/layouts/apollo-vue">
                         <img alt="Apollo" src="../assets/images/layouts/apollo.jpg">
                     </a>
                 </div>
+                <div class="p-col-12 p-md-4">
+                    <a href="https://www.primefaces.org/layouts/roma-vue">
+                        <img alt="Roma" src="../assets/images/layouts/roma.jpg">
+                    </a>
+                </div>
             </div>
         </div>
         <div class="templates">