diff --git a/README.md b/README.md
index e39f8a24f..724209409 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ Styled mode is based on pre-skinned components with opinionated themes like Mate
 
 ```javascript
 // theme
-import 'primevue/resources/themes/lara-light-blue/theme.css';
+import 'primevue/resources/themes/lara-light-teal/theme.css';
 ```
 
 **Unstyled Mode**
@@ -91,7 +91,7 @@ Open the nuxt configuration file and add the css dependencies.
 
 ```javascript
 export default defineNuxtConfig({
-    css: ['primevue/resources/themes/lara-light-blue/theme.css'],
+    css: ['primevue/resources/themes/lara-light-teal/theme.css'],
     build: {
         transpile: ['primevue']
     }
diff --git a/app.vue b/app.vue
index 5a1e520f8..5517136da 100644
--- a/app.vue
+++ b/app.vue
@@ -12,6 +12,15 @@ export default {
     themeChangeListener: null,
     newsActivate: null,
     newsService: null,
+    watch: {
+        $route: {
+            handler(to) {
+                if (to.name === 'index') {
+                    this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal', dark: this.$appState.darkTheme });
+                }
+            }
+        }
+    },
     mounted() {
         this.newsActivate = () => {
             this.$appState.announcement = News;
diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js
index 3a7c6fcdf..d303acb2e 100644
--- a/components/doc/codeeditor/templates.js
+++ b/components/doc/codeeditor/templates.js
@@ -77,7 +77,7 @@ import ThemeSwitcher from './components/ThemeSwitcher.vue';`;
     } else {
         // main.js
         pvTheme += `import "primeflex/primeflex.css";
-import "primevue/resources/themes/lara-light-blue/theme.css";`;
+import "primevue/resources/themes/lara-light-teal/theme.css";`;
 
         // package.json
         dependencies['primeflex'] = app_dependencies['primeflex'] || 'latest';
diff --git a/doc/installation/NuxtIntegrationDoc.vue b/doc/installation/NuxtIntegrationDoc.vue
index 03fa3c5c1..80db67358 100644
--- a/doc/installation/NuxtIntegrationDoc.vue
+++ b/doc/installation/NuxtIntegrationDoc.vue
@@ -22,7 +22,7 @@ export default {
                 basic: `
 export default defineNuxtConfig({
     css: [
-        "primevue/resources/themes/lara-light-blue/theme.css"
+        "primevue/resources/themes/lara-light-teal/theme.css"
     ],
 	build: {
 		transpile: ["primevue"]
diff --git a/doc/theming/SwitchThemesDoc.vue b/doc/theming/SwitchThemesDoc.vue
index 5e6db2b2c..7f4f104a2 100644
--- a/doc/theming/SwitchThemesDoc.vue
+++ b/doc/theming/SwitchThemesDoc.vue
@@ -46,7 +46,7 @@ PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {}
         `
             },
             code4: {
-                basic: `<link id="theme-link" rel="stylesheet" href="/themes/lara-light-blue/theme.css">`
+                basic: `<link id="theme-link" rel="stylesheet" href="/themes/lara-light-teal/theme.css">`
             },
             code5: {
                 basic: `
@@ -60,7 +60,7 @@ export default defineNuxtConfig({
                 {
                     id: 'theme-link',
                     rel: 'stylesheet',
-                    href: baseUrl + 'themes/lara-light-blue/theme.css'
+                    href: baseUrl + 'themes/lara-light-teal/theme.css'
                 }
             ],
                 `
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 044c1354a..bec2a123b 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -34,6 +34,12 @@
                 <h3>Themes</h3>
                 <h4>PrimeOne Design</h4>
                 <div class="grid">
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('lara-light-teal')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Lara Teal</span>
+                    </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
                         <button class="px-link h-2rem" @click="changeTheme('lara-light-indigo')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-2rem border-round" />
@@ -53,8 +59,8 @@
                         <span class="white-space-nowrap text-sm">Lara Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-2rem" @click="changeTheme('lara-light-teal')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-2rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('lara-dark-teal', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-2rem border-round" />
                         </button>
                         <span class="white-space-nowrap text-sm">Lara Teal</span>
                     </div>
@@ -76,40 +82,6 @@
                         </button>
                         <span class="white-space-nowrap text-sm">Lara Purple</span>
                     </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-2rem" @click="changeTheme('lara-dark-teal', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-2rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap text-sm">Lara Teal</span>
-                    </div>
-                </div>
-
-                <h4>Bootstrap</h4>
-                <div class="grid">
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-blue')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap text-sm">Blue</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-purple')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap text-sm">Purple</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-blue', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap text-sm">Blue</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-purple', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap text-sm">Purple</span>
-                    </div>
                 </div>
 
                 <h4>Material Design</h4>
@@ -168,6 +140,34 @@
                     </div>
                 </div>
 
+                <h4>Bootstrap</h4>
+                <div class="grid">
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-blue')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Blue</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-purple')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Purple</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-blue', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Blue</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-purple', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Purple</span>
+                    </div>
+                </div>
+
                 <h4>Misc</h4>
                 <div class="grid">
                     <div class="col-3 flex flex-column align-items-center gap-2">
diff --git a/nuxt.config.js b/nuxt.config.js
index f24e07a01..e292db328 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -48,7 +48,7 @@ export default defineNuxtConfig({
                 {
                     id: 'home-table-link',
                     rel: 'stylesheet',
-                    href: baseUrl + 'styles/landing/themes/lara-light-blue/theme.css'
+                    href: baseUrl + 'styles/landing/themes/lara-light-teal/theme.css'
                 },
                 {
                     id: 'theme-link',