diff --git a/dist/vue3-code-block.cjs.js b/dist/vue3-code-block.cjs.js
index 5138dac..9306929 100644
--- a/dist/vue3-code-block.cjs.js
+++ b/dist/vue3-code-block.cjs.js
@@ -1,5 +1,5 @@
 "use strict";var sn=Object.create;var I=Object.defineProperty;var rn=Object.getOwnPropertyDescriptor;var tn=Object.getOwnPropertyNames;var un=Object.getPrototypeOf,gn=Object.prototype.hasOwnProperty;var hn=(l,r,a,j)=>{if(r&&typeof r=="object"||typeof r=="function")for(let c of tn(r))!gn.call(l,c)&&c!==a&&I(l,c,{get:()=>r[c],enumerable:!(j=rn(r,c))||j.enumerable});return l};var G=(l,r,a)=>(a=l!=null?sn(un(l)):{},hn(r||!l||!l.__esModule?I(a,"default",{value:l,enumerable:!0}):a,l));/**
- * @name vue3-code-block
+ * @name @wdns/vue3-code-block
  * @version 2.2.13
  * @description Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.
  * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)
diff --git a/dist/vue3-code-block.es.js b/dist/vue3-code-block.es.js
index 2231445..fdcb2f3 100644
--- a/dist/vue3-code-block.es.js
+++ b/dist/vue3-code-block.es.js
@@ -1,7 +1,7 @@
 import { unref as a, defineComponent as tn, openBlock as u, createElementBlock as i, mergeProps as H, createCommentVNode as w, createElementVNode as v, mergeDefaults as kn, useSlots as fn, ref as c, toRefs as _n, computed as y, watch as en, onBeforeMount as wn, onMounted as xn, normalizeClass as d, normalizeStyle as S, renderSlot as F, Fragment as I, createTextVNode as M, toDisplayString as N, createBlock as an } from "vue";
 import Tn from "ua-parser-js";
 /**
- * @name vue3-code-block
+ * @name @wdns/vue3-code-block
  * @version 2.2.13
  * @description Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.
  * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)
diff --git a/package.json b/package.json
index 283cc8d..504a6e8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wdns/vue3-code-block",
-	"version": "2.2.13",
+	"version": "2.2.14",
 	"description": "Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.",
 	"private": false,
 	"publishConfig": {
diff --git a/src/components/Sections/InstallationSection.vue b/src/components/Sections/InstallationSection.vue
index d392959..14f0a99 100644
--- a/src/components/Sections/InstallationSection.vue
+++ b/src/components/Sections/InstallationSection.vue
@@ -39,6 +39,6 @@ const selectedLibrary = inject('selectedLibrary');
 const selectedTheme = inject('selectedTheme');
 const styleData = inject('styleData');
 
-const pnpmCode = 'pnpm add vue3-code-block';
-const npmCode = 'npm i vue3-code-block';
+const pnpmCode = 'pnpm add @wdns/vue3-code-block';
+const npmCode = 'npm i @wdns/vue3-code-block';
 </script>
diff --git a/vite.build.config.ts b/vite.build.config.ts
index 753563c..862f39d 100644
--- a/vite.build.config.ts
+++ b/vite.build.config.ts
@@ -11,9 +11,11 @@ import typescript from 'rollup-plugin-typescript2';
 import vue from '@vitejs/plugin-vue';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
+const scopedPackageName = pkg.name;
+const packageName = scopedPackageName.split('/')[1];
 
 const banner = `/**
- * @name ${pkg.name}
+ * @name ${scopedPackageName}
  * @version ${pkg.version}
  * @description ${pkg.description}
  * @author ${pkg.author}
@@ -24,14 +26,16 @@ const banner = `/**
  */
 `;
 
+
+
 export default defineConfig({
 	publicDir: false,
 	build: {
 		lib: {
 			entry: './src/plugin/index.ts',
-			name: pkg.name,
+			name: packageName,
 			formats: ['es', 'cjs'],
-			fileName: format => `${pkg.name}.${format}.js`,
+			fileName: format => `${packageName}.${format}.js`,
 		},
 		rollupOptions: {
 			input: {