diff --git a/app.vue b/app.vue
index ad2d11159..16ff71561 100644
--- a/app.vue
+++ b/app.vue
@@ -15,7 +15,7 @@ export default {
         $route: {
             handler(to) {
                 if (to.name === 'index') {
-                    this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal', dark: this.$appState.darkTheme });
+                    this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-green' : 'lara-light-green', dark: this.$appState.darkTheme });
                 }
             }
         }
diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js
index 06367e259..b857d2685 100644
--- a/components/doc/codeeditor/templates.js
+++ b/components/doc/codeeditor/templates.js
@@ -79,7 +79,7 @@ import ThemeSwitcher from './components/ThemeSwitcher.vue';`;
     } else {
         // main.js
         pvTheme += `import "primeflex/primeflex.css";
-import "primevue/resources/themes/lara-light-teal/theme.css";`;
+import "primevue/resources/themes/lara-light-green/theme.css";`;
 
         // package.json
         dependencies['primeflex'] = app_dependencies['primeflex'] || 'latest';
diff --git a/doc/installation/StyledModeDoc.vue b/doc/installation/StyledModeDoc.vue
index 8928300c5..d87b40aae 100644
--- a/doc/installation/StyledModeDoc.vue
+++ b/doc/installation/StyledModeDoc.vue
@@ -13,7 +13,7 @@ export default {
     data() {
         return {
             code: {
-                basic: "\nimport 'primevue/resources/themes/lara-light-teal/theme.css'\n"
+                basic: "\nimport 'primevue/resources/themes/lara-light-green/theme.css'\n"
             }
         };
     }
diff --git a/doc/nuxt/StyleDoc.vue b/doc/nuxt/StyleDoc.vue
index 47adc8c6a..c9360103b 100644
--- a/doc/nuxt/StyleDoc.vue
+++ b/doc/nuxt/StyleDoc.vue
@@ -19,7 +19,7 @@ export default {
             code1: {
                 basic: `
 export default defineNuxtConfig({
-    css: ['primevue/resources/themes/lara-dark-teal/theme.css']
+    css: ['primevue/resources/themes/lara-dark-green/theme.css']
 })
 `
             }
diff --git a/doc/theming/BuiltInThemesDoc.vue b/doc/theming/BuiltInThemesDoc.vue
index 56b5db9f3..50105cf85 100644
--- a/doc/theming/BuiltInThemesDoc.vue
+++ b/doc/theming/BuiltInThemesDoc.vue
@@ -31,10 +31,18 @@ primevue/resources/themes/lara-light-blue/theme.css
 primevue/resources/themes/lara-light-indigo/theme.css
 primevue/resources/themes/lara-light-purple/theme.css
 primevue/resources/themes/lara-light-teal/theme.css
+primevue/resources/themes/lara-light-green/theme.css
+primevue/resources/themes/lara-light-amber/theme.css
+primevue/resources/themes/lara-light-cyan/theme.css
+primevue/resources/themes/lara-light-pink/theme.css
 primevue/resources/themes/lara-dark-blue/theme.css
 primevue/resources/themes/lara-dark-indigo/theme.css
 primevue/resources/themes/lara-dark-purple/theme.css
 primevue/resources/themes/lara-dark-teal/theme.css
+primevue/resources/themes/lara-dark-green/theme.css
+primevue/resources/themes/lara-dark-amber/theme.css
+primevue/resources/themes/lara-dark-cyan/theme.css
+primevue/resources/themes/lara-dark-pink/theme.css
 primevue/resources/themes/soho-light/theme.css
 primevue/resources/themes/soho-dark/theme.css
 primevue/resources/themes/viva-light/theme.css
diff --git a/doc/theming/SwitchThemesDoc.vue b/doc/theming/SwitchThemesDoc.vue
index 3a5de50ae..f955ad3ad 100644
--- a/doc/theming/SwitchThemesDoc.vue
+++ b/doc/theming/SwitchThemesDoc.vue
@@ -47,7 +47,7 @@ PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {}
             },
             code4: {
                 basic: `
-<link id="theme-link" rel="stylesheet" href="/themes/lara-light-teal/theme.css">
+<link id="theme-link" rel="stylesheet" href="/themes/lara-light-green/theme.css">
 `
             },
             code5: {
@@ -59,7 +59,7 @@ export default defineNuxtConfig({
                 {
                     id: 'theme-link',
                     rel: 'stylesheet',
-                    href: baseUrl + 'themes/lara-light-teal/theme.css'
+                    href: baseUrl + 'themes/lara-light-green/theme.css'
                 }
             ]
         }
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 14cb3b29a..9ac6e3d1d 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -36,13 +36,23 @@
                     <button
                         :class="[
                             'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'teal'), 'hover:border-500 surface-border': !isThemeActive('lara', 'teal') }
+                            { 'border-primary': isThemeActive('lara', 'green'), 'hover:border-500 surface-border': !isThemeActive('lara', 'green') }
                         ]"
                         style="border-radius: 30px"
-                        @click="changeTheme('lara', 'teal')"
+                        @click="changeTheme('lara', 'green')"
                     >
                         <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
                     </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('lara', 'cyan') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'cyan')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
+                    </button>
                     <button
                         :class="[
                             'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
@@ -63,6 +73,8 @@
                     >
                         <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
                     </button>
+                </div>
+                <div class="flex align-items-center justify-content-between gap-3">
                     <button
                         :class="[
                             'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
@@ -73,8 +85,6 @@
                     >
                         <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
                     </button>
-                </div>
-                <div class="flex align-items-center justify-content-between gap-3">
                     <button
                         :class="[
                             'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
@@ -85,6 +95,16 @@
                     >
                         <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
                     </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'teal'), 'hover:border-500 surface-border': !isThemeActive('lara', 'teal') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'teal')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
+                    </button>
                     <button
                         :class="[
                             'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
@@ -95,26 +115,6 @@
                     >
                         <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
                     </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('lara', 'cyan') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'cyan')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('lara', 'turquoise'), 'hover:border-500 surface-border': !isThemeActive('lara', 'turquoise') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('lara', 'turquoise')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
-                    </button>
                 </div>
             </section>
             <section class="py-4 border-bottom-1 surface-border">
diff --git a/layouts/default.vue b/layouts/default.vue
index 2ac9ab98b..c92dc3448 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -94,7 +94,7 @@ export default {
                 newTheme = currentTheme.replace('dark', 'light');
             } else {
                 if (currentTheme.includes('light') && currentTheme !== 'fluent-light') newTheme = currentTheme.replace('light', 'dark');
-                else newTheme = 'lara-dark-teal'; //fallback
+                else newTheme = 'lara-dark-green'; //fallback
             }
 
             EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
diff --git a/nuxt.config.js b/nuxt.config.js
index 01868b113..ee9386ec8 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -52,12 +52,12 @@ export default defineNuxtConfig({
                 {
                     id: 'home-table-link',
                     rel: 'stylesheet',
-                    href: baseUrl + 'styles/landing/themes/lara-light-teal/theme.css'
+                    href: baseUrl + 'styles/landing/themes/lara-light-green/theme.css'
                 },
                 {
                     id: 'theme-link',
                     rel: 'stylesheet',
-                    href: baseUrl + 'themes/lara-light-teal/theme.css'
+                    href: baseUrl + 'themes/lara-light-green/theme.css'
                 },
                 { rel: 'icon', href: baseUrl + 'favicon.ico' }
             ],
diff --git a/pages/index.vue b/pages/index.vue
index 218b89c8b..58ba1d022 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -38,7 +38,7 @@ export default {
     },
     data() {
         return {
-            tableTheme: 'lara-light-teal'
+            tableTheme: 'lara-light-green'
         };
     },
     themeChangeListener: null,
@@ -53,11 +53,11 @@ export default {
             document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
         }
 
-        this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal');
+        this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-green' : 'lara-light-green');
     },
     methods: {
         onDarkModeToggle() {
-            const newTheme = this.$appState.darkTheme ? 'lara-light-teal' : 'lara-dark-teal';
+            const newTheme = this.$appState.darkTheme ? 'lara-light-green' : 'lara-dark-green';
             const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
 
             EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue
index 76a5784bf..e149b0c9e 100644
--- a/pages/landing/ThemeSection.vue
+++ b/pages/landing/ThemeSection.vue
@@ -3,7 +3,7 @@
         <div class="section-header">Themes</div>
         <p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.</p>
         <div class="flex flex-wrap justify-content-center px-5">
-            <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'teal')">PrimeOne</button>
+            <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'green')">PrimeOne</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
             <a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
diff --git a/plugins/app-state.js b/plugins/app-state.js
index 19922f580..90afbf7b8 100644
--- a/plugins/app-state.js
+++ b/plugins/app-state.js
@@ -1,6 +1,6 @@
 const $appState = {
     install: (Vue, options) => {
-        Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' });
+        Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-green', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' });
     }
 };