diff --git a/src/assets/datacite/testLogo.vue b/src/assets/datacite/testLogo.vue
index d0cc6e1..dbc4a1e 100644
--- a/src/assets/datacite/testLogo.vue
+++ b/src/assets/datacite/testLogo.vue
@@ -1,8 +1,8 @@
 <template>
     <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
     <svg
-        version="1.1"
         id="Layer_1"
+        version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0px"
diff --git a/src/components/vs-input/vs-input.vue b/src/components/vs-input/vs-input.vue
index 7980aed..6bc6067 100644
--- a/src/components/vs-input/vs-input.vue
+++ b/src/components/vs-input/vs-input.vue
@@ -1,45 +1,33 @@
 <template>
     <div class="is-multiline">
-        <!-- <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> -->
         <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
             <div class="search-box mx-auto">
                 <div class="field has-addons main-search-from-bg">
                     <div class="control is-expanded">
                         <input
                             id="search_query"
-                            v-model="display"
+                            v-model="searchTerm"
                             class="input is-medium"
                             type="text"
                             name="q"
                             autocomplete="off"
                             v-bind:placeholder="placeholder"
                             @input="searchChanged"
-                            @keydown.down="onArrowDown"
-                            @keydown.up="onArrowUp"
-                            @keydown.enter="onEnter"
-                            @keydown.tab="close"
-                            @focus="focus"
                         />
-                        <!-- <p>Display is: {{ display }}</p> -->
-                        <!-- v-on:input="searchChanged" -->
                     </div>
-
                     <div class="control">
                         <button class="button input is-medium search-button-icon" @click="search()">
-                            <!-- <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" /> -->
                             <i class="fas fa-search text-white"></i>
                         </button>
                     </div>
                 </div>
             </div>
         </div>
-        <!-- <div class="column is-half is-offset-one-quarter"> -->
         <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
             <ul v-show="showResults" class="autocomplete-results pure-u-23-24">
                 <li v-if="isLoading" class="loading">Loading results...</li>
-
                 <li
-                    v-for="(result, i) in suggestions"
+                    v-for="(result, i) in searchResults"
                     v-else
                     v-bind:key="i"
                     v-bind:ref="setItemRef"
@@ -48,7 +36,7 @@
                     @click.prevent="select(result)"
                 >
                     <div class="small-label">
-                        <label>{{ result.value }} ({{ result.type }})</label>
+                        <label>{{ result.title }}</label>
                     </div>
                 </li>
             </ul>
@@ -56,6 +44,22 @@
     </div>
 </template>
 
+<script lang="ts">
+export default {
+    data() {
+        return {
+            searchTerm: "",
+            searchResults: [],
+        };
+    },
+    methods: {
+        searchChanged() {
+            //...
+        },
+    },
+};
+</script>
+
 <script lang="ts">
 import VsInput from "./vs-input";
 export default VsInput;
diff --git a/vue.config.js b/vue.config.js
index 95413bf..c8ce3aa 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,24 +2,24 @@
 const webpack = require("webpack");
 // const { defineConfig } = require("@vue/cli-service");
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
-const { VueLoaderPlugin } = require('vue-loader');
+const { VueLoaderPlugin } = require("vue-loader");
 
 module.exports = {
-    publicPath: "/",    
-    chainWebpack: config => {
+    publicPath: "/",
+    chainWebpack: (config) => {
         const vueRule = config.module.rule("vue");
         vueRule.uses.clear();
         // const tsRule = config.module.rule("ts");
         // tsRule.uses.clear();
-    //       .plugin('define')
-    //       .tap(args => {
-    //           args[0] = {
-    //              ...args[0],
-    //              VUE_APP_PORTAL: JSON.stringify(process.env.PORTAL),
-    //              // other stuff
-    //           }
-    //           return args
-    //        })
+        //       .plugin('define')
+        //       .tap(args => {
+        //           args[0] = {
+        //              ...args[0],
+        //              VUE_APP_PORTAL: JSON.stringify(process.env.PORTAL),
+        //              // other stuff
+        //           }
+        //           return args
+        //        })
     },
     pages: {
         index: {
@@ -37,14 +37,14 @@ module.exports = {
             rules: [
                 {
                     test: /\.vue$/,
-                    loader: 'vue-loader',
+                    loader: "vue-loader",
                     options: {
                         // loaders: {
                         // 	ts: 'ts-loader',
-                        // },                       
-                        cacheDirectory: 'C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader',
-                        cacheIdentifier: '39baf1b4',
-                        babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
+                        // },
+                        cacheDirectory: "C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader",
+                        cacheIdentifier: "39baf1b4",
+                        babelParserPlugins: ["jsx", "classProperties", "decorators-legacy"],
                     },
                 },
                 // {
@@ -58,7 +58,7 @@ module.exports = {
                 //     use: {
                 //         loader: "babel-loader",
                 //         options: {
-                //             presets: [                               
+                //             presets: [
                 //                 ["@babel/preset-env", {}],
                 //                 "babel-preset-typescript-vue3", //because of new vue setup method
                 //                 // "@babel/preset-typescript"
@@ -76,11 +76,11 @@ module.exports = {
         },
         resolve: {
             alias: {
-                vue$: 'vue/dist/vue.runtime.esm-bundler.js'
+                vue$: "vue/dist/vue.runtime.esm-bundler.js",
             },
-            extensions : ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'],
+            extensions: [".tsx", ".ts", ".mjs", ".js", ".jsx", ".vue", ".json", ".wasm"],
         },
-        plugins: [           
+        plugins: [
             // new VueLoaderPlugin(),
             new webpack.DefinePlugin({
                 APP_URL: JSON.stringify(process.env.APP_URL),