diff --git a/package-lock.json b/package-lock.json
index ffc8afe..d465f46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "homepage",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.0.4"
+        "vue": "^3.0.4",
+        "wave-ui": "^2.30.0"
       },
       "devDependencies": {
         "@vue/compiler-sfc": "^3.0.4",
@@ -3049,6 +3050,11 @@
         "@vue/shared": "3.2.26"
       }
     },
+    "node_modules/wave-ui": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/wave-ui/-/wave-ui-2.30.0.tgz",
+      "integrity": "sha512-FbsFVZuXwE3A05sABh9EGm6GQxrDTMXm4wWS1tzrPDT3J90AlS6wYMSppLNTx2fHVI3aiKUQcTYjByIO/CwpKQ=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -5473,6 +5479,11 @@
         "@vue/shared": "3.2.26"
       }
     },
+    "wave-ui": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/wave-ui/-/wave-ui-2.30.0.tgz",
+      "integrity": "sha512-FbsFVZuXwE3A05sABh9EGm6GQxrDTMXm4wWS1tzrPDT3J90AlS6wYMSppLNTx2fHVI3aiKUQcTYjByIO/CwpKQ=="
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index 26b8a26..f8f5eb2 100644
--- a/package.json
+++ b/package.json
@@ -6,10 +6,11 @@
     "build": "vite build"
   },
   "dependencies": {
-    "vue": "^3.0.4"
+    "vue": "^3.0.4",
+    "wave-ui": "^2.30.0"
   },
   "devDependencies": {
-    "vite": "^1.0.0-rc.13",
-    "@vue/compiler-sfc": "^3.0.4"
+    "@vue/compiler-sfc": "^3.0.4",
+    "vite": "^1.0.0-rc.13"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index cd6ef46..a24d155 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,18 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Welcome to Gourav's Homepage" />
+  <w-app>
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <HelloWorld msg="Welcome to Gourav's Homepage" />
+    <w-button>My Button</w-button>
+  </w-app> 
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+//import WaveTest from './components/WaveTest.vue'
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
-    HelloWorld
-  }
-}
+    WaveTest,
+  },
+};
 </script>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index a7f3310..99ee13e 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -4,19 +4,22 @@
     <input type="text" placeholder="Filter Search" v-model="query" />
     <button @click="reset">Reset</button>
   </div>
-  <div>
+  <!--div>
     {{ query }}
     <search-results :query='query' />
-  </div>
+  </div-->
+  <wave-test />
 </template>
 
 <script>
 import { ref } from "vue";
 import SearchResults from './SearchResults.vue';
+import WaveTest from './WaveTest.Vue'
 
 export default {
   components: {
     SearchResults,
+    WaveTest
   },
 
   setup() {
diff --git a/src/components/WaveTest.Vue b/src/components/WaveTest.Vue
new file mode 100644
index 0000000..2a50952
--- /dev/null
+++ b/src/components/WaveTest.Vue
@@ -0,0 +1,14 @@
+<template>
+<!--w-app>
+  <!-- All your app content goes here. -->
+
+  <!-- Also try to add a button! -->
+  <!--w-button>My Button</w-button>
+</w-app-->
+</template> 
+
+<script>
+export default {
+    
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 50a4dab..1f225c6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,11 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import WaveUI from 'wave-ui'
+import 'wave-ui/dist/wave-ui.css'
 import './index.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+new WaveUI(app, {
+
+})
+app.mount('#app')