diff --git a/app/assets/components/NavBar.vue b/app/assets/components/NavBar.vue
index b47d6b1..bc75a14 100644
--- a/app/assets/components/NavBar.vue
+++ b/app/assets/components/NavBar.vue
@@ -11,6 +11,7 @@ const { logout } = useLogoutApi(auth)
     <UFNavBar title="Userfrosting">
         <UFNavBarItem :to="{ name: 'home' }" label="Home" />
         <UFNavBarItem :to="{ name: 'about' }" label="About" />
+        <UFNavBarItem to="/alert" label="Alert" />
         <UFNavBarItem to="/resources" label="Api Test" />
         <UFNavBarItem to="/auth" label="Login Test" />
         <UFNavBarUserCard
diff --git a/app/assets/router/index.js b/app/assets/router/index.js
index 6b6c991..0b3e751 100644
--- a/app/assets/router/index.js
+++ b/app/assets/router/index.js
@@ -18,6 +18,11 @@ const router = createRouter({
                     name: 'about',
                     component: () => import('../views/AboutView.vue')
                 },
+                {
+                    path: '/alert',
+                    name: 'alert',
+                    component: () => import('@userfrosting/theme-pink-cupcake-example/src/views/DashboardAlerts.vue')
+                },
                 {
                     path: '/resources',
                     name: 'api',
diff --git a/package-lock.json b/package-lock.json
index 4a2cdd4..0353a04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
             "version": "0.0.0",
             "dependencies": {
                 "@userfrosting/theme-pink-cupcake": "^0.2.0",
+                "@userfrosting/theme-pink-cupcake-example": "git+https://github.com/userfrosting/theme-pink-cupcake-example.git",
                 "axios": "^1.5.0",
                 "pinia": "^2.1.6",
                 "pinia-plugin-persistedstate": "^3.2.0",
@@ -3860,6 +3861,37 @@
                 "vue-router": "^4.2.4"
             }
         },
+        "node_modules/@userfrosting/theme-pink-cupcake-example": {
+            "version": "0.0.0",
+            "resolved": "git+ssh://git@github.com/userfrosting/theme-pink-cupcake-example.git#6ef242bae1464934e3f9888cdf493327ced1dd6a",
+            "dependencies": {
+                "@userfrosting/theme-pink-cupcake": "^0.1.0",
+                "vue": "^3.4.21",
+                "vue-router": "^4.3.0"
+            }
+        },
+        "node_modules/@userfrosting/theme-pink-cupcake-example/node_modules/@userfrosting/theme-pink-cupcake": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/@userfrosting/theme-pink-cupcake/-/theme-pink-cupcake-0.1.3.tgz",
+            "integrity": "sha512-GhorltUY1d0f2X7UVAYAnRupoZDCET9gM8dEewOa83otSmE+vyvKP7Q/cpUbqIbHxd8HXEIC5SHSDy/7Izyd6Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@fontsource/montserrat": "^5.0.8",
+                "@fortawesome/fontawesome-svg-core": "^6.4.2",
+                "@fortawesome/free-brands-svg-icons": "^6.4.2",
+                "@fortawesome/free-regular-svg-icons": "^6.4.2",
+                "@fortawesome/free-solid-svg-icons": "^6.4.2",
+                "@fortawesome/vue-fontawesome": "^3.0.3",
+                "uikit": "^3.16.26"
+            },
+            "funding": {
+                "url": "https://opencollective.com/userfrosting"
+            },
+            "peerDependencies": {
+                "vue": "^3.4.21",
+                "vue-router": "^4.2.4"
+            }
+        },
         "node_modules/@vitejs/plugin-vue": {
             "version": "5.0.5",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz",
@@ -8285,9 +8317,9 @@
             }
         },
         "node_modules/lilconfig": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
-            "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+            "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
             "dev": true,
             "license": "MIT",
             "engines": {
diff --git a/package.json b/package.json
index f4612bd..79b962b 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "description": "UserFrosting Vue Demo",
     "dependencies": {
         "@userfrosting/theme-pink-cupcake": "^0.2.0",
+        "@userfrosting/theme-pink-cupcake-example": "git+https://github.com/userfrosting/theme-pink-cupcake-example.git",
         "axios": "^1.5.0",
         "pinia": "^2.1.6",
         "pinia-plugin-persistedstate": "^3.2.0",
diff --git a/webpack.config.js b/webpack.config.js
index 5b5466c..c06a7e0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,6 +17,11 @@ Encore
     .cleanupOutputBeforeBuild()
     .enableBuildNotifications()
     .enableTypeScriptLoader()
+    // Allow typescript to parse vue components imported from source
+    // eg.: @userfrosting/theme-pink-cupcake-example/src/views/DashboardAlerts.vue
+    .configureLoaderRule('typescript', loaderRule => {
+        loaderRule.exclude = undefined
+    })
     .enableSourceMaps(!Encore.isProduction())
     .enableVersioning(Encore.isProduction())
     .enableVueLoader(() => {}, {