diff --git a/package-lock.json b/package-lock.json
index cb032baa215fec7d633f69842664a8690454334c..dbf5f9de0a1d20297cd28d732de29ab81aa5bb28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "vue-project-poc",
       "version": "0.0.0",
       "dependencies": {
+        "@sangarajuguptanisum/vue-custom-components": "^0.0.1",
         "axios": "^1.6.2",
         "vue": "^3.3.10",
         "vue-router": "^4.2.5",
@@ -3155,6 +3156,66 @@
       "integrity": "sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA==",
       "dev": true
     },
+    "node_modules/@sangarajuguptanisum/vue-custom-components": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@sangarajuguptanisum/vue-custom-components/-/vue-custom-components-0.0.1.tgz",
+      "integrity": "sha512-R3T/F1KKwVvDPOjYM6k/kCxBLygOz2vjmGWaEbpwV9+jE/RSPhZlVt9kxofjrip/LhDoSRz348o2J69xHcJDUg==",
+      "dependencies": {
+        "pinia": "^2.1.7",
+        "vue": "^3.3.11",
+        "vue-router": "^4.2.5"
+      }
+    },
+    "node_modules/@sangarajuguptanisum/vue-custom-components/node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@sangarajuguptanisum/vue-custom-components/node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
diff --git a/package.json b/package.json
index 05c797e22b6aa2dfb1aedc05beb4b096cb23e092..265a104f3f2b254543ec8aabc11ccc7442c86318 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@sangarajuguptanisum/vue-custom-components": "^0.0.1",
     "axios": "^1.6.2",
     "vue": "^3.3.10",
     "vue-router": "^4.2.5",
diff --git a/src/Views/About/About.vue b/src/Views/About/About.vue
index f20d5ff859e48bd0136ca587b9c14ca5384a4670..5c42997e4cec5e0e15209e0847b7e4219247a9f1 100644
--- a/src/Views/About/About.vue
+++ b/src/Views/About/About.vue
@@ -1,10 +1,16 @@
 <template>
     <h1>About page loaded</h1>
+    <SButton isLoading="true"></SButton>
 </template>
 
 <script>
+  import {SButton} from '@sangarajuguptanisum/vue-custom-components';
+
 
 export default {
+
+  
+    
     name: "About",
     components: {
 
diff --git a/src/main.js b/src/main.js
index 7e6d7faec55cd8a13d146fea41a4e23aeddc910f..ba65056e16c18866200f2fdadf84fb9303b25065 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,6 @@
+
+import '@sangarajuguptanisum/vue-custom-components/dist/index.css';
+import vueComponents from '@sangarajuguptanisum/vue-custom-components'
 import './assets/main.css'
 
 
@@ -30,6 +33,7 @@ const router = createRouter({
 
 })
 
+app.use(vueComponents)
 app.use(router)
 app.use(store)
 app.mount('#app')