diff --git a/package-lock.json b/package-lock.json
index 7dc9dec..69bbe28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,7 @@
       "name": "tethys.viewer",
       "version": "0.1.0",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.36",
-        "@fortawesome/free-solid-svg-icons": "^5.15.4",
-        "@fortawesome/vue-fontawesome": "^3.0.0-5",
+        "@fortawesome/fontawesome-free": "^5.15.4",
         "@openfonts/open-sans_all": "^1.44.2",
         "axios": "^0.24.0",
         "class-transformer": "^0.4.0",
@@ -1692,48 +1690,15 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "0.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
-      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
-      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
+    "node_modules/@fortawesome/fontawesome-free": {
       "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==",
       "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
-      },
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/@fortawesome/vue-fontawesome": {
-      "version": "3.0.0-5",
-      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-5.tgz",
-      "integrity": "sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==",
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
-        "vue": ">= 3.0.0 < 4"
-      }
-    },
     "node_modules/@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -18310,32 +18275,10 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
-      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
-    },
-    "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
-      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
-      }
-    },
-    "@fortawesome/free-solid-svg-icons": {
+    "@fortawesome/fontawesome-free": {
       "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
-      }
-    },
-    "@fortawesome/vue-fontawesome": {
-      "version": "3.0.0-5",
-      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-5.tgz",
-      "integrity": "sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==",
-      "requires": {}
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
     },
     "@hapi/address": {
       "version": "2.1.4",
diff --git a/package.json b/package.json
index 0b92db5..4b0e25e 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,7 @@
     "format": "prettier --write 'src/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/vue-fontawesome": "^3.0.0-5",
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@openfonts/open-sans_all": "^1.44.2",
     "axios": "^0.24.0",
     "class-transformer": "^0.4.0",
diff --git a/src/App.vue b/src/App.vue
index 5b018c5..56c7469 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,14 +23,15 @@
             <ul class="navbar-start" style="flex-grow: 1; justify-content: center">
                 <li class="navbar-item">
                     <!-- <a class="navbar-link is-arrowless active" href="#">STARTSEITE</a> -->
-                    <router-link class="navbar-link is-arrowless active" to="/test/">STARTSEITE</router-link>
+                    <router-link class="navbar-link is-arrowless" to="/test/">STARTSEITE</router-link>
                 </li>
                 <li class="navbar-item">
                     <!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
-                    <router-link class="navbar-link is-arrowless active" to="/test/map">INTRO</router-link>
+                    <router-link class="navbar-link is-arrowless" to="/test/map">INTRO</router-link>
                 </li>
                 <li class="navbar-item">
-                    <a class="navbar-link is-arrowless" href="#">SEARCH</a>
+                    <!-- <a class="navbar-link is-arrowless" href="#">SEARCH</a> -->
+                    <router-link class="navbar-link is-arrowless" to="/test/search">SEARCH</router-link>
                 </li>
                 <li class="navbar-item">
                     <a class="navbar-link is-arrowless" href="#">SERVICES</a>
@@ -48,9 +49,8 @@
                 <div class="navbar-item">
                     <div class="buttons">
                         <a class="button is-primary custom-button">
-                            <!-- <span class="icon is-small"> -->
-                            <!-- <i class="fas fa-sign-in-alt"></i> -->
-                            <fa :icon="['fas', 'phone']" class="fas fa-sign-in-alt" />
+                            <i class="fas fa-sign-in-alt"></i>
+                            <!-- <fa :icon="['fas', 'phone']" class="fas fa-sign-in-alt" /> -->
                             <!-- </span> -->
                             <strong>Sign in</strong>
                         </a>
@@ -82,7 +82,7 @@ import App from "./app";
 export default App;
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 // #app {
 //   font-family: Avenir, Helvetica, Arial, sans-serif;
 //   -webkit-font-smoothing: antialiased;
diff --git a/src/app.ts b/src/app.ts
index f0da401..52ea6cf 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -2,6 +2,7 @@ import { Options, Vue } from "vue-class-component";
 import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
 import MapViewComponent from "./views/map-view/map-view-component.vue";
+import SearchViewComponent from "./views/search-view/search-view-component.vue";
 // import VsInput from "./components/vs-input/vs-input.vue";
 // import VsResult from "./components/vs-result/vs-result.vue";
 // import FacetCategory from "./components/face-category/facet-category.vue";
@@ -22,6 +23,7 @@ import MapViewComponent from "./views/map-view/map-view-component.vue";
         // FacetCategory,
         // ActiveFacetCategory,
         MapViewComponent,
+        SearchViewComponent,
     },
 })
 export default class App extends Vue {}
diff --git a/src/assets/scss/main-styles.scss b/src/assets/scss/main-styles.scss
index 114ce21..50ab4f6 100644
--- a/src/assets/scss/main-styles.scss
+++ b/src/assets/scss/main-styles.scss
@@ -26,15 +26,21 @@
         font-size: 0.9em;       
         text-decoration: none;
         border: 1px solid transparent;
+        // .fas {
+        //     margin-right: 0.6em;
+        //     // border-right: 1px solid #fff;
+        //    width: 2em;
+          
+        // };
         .fas {
             margin-right: 0.6em;
-            // border-right: 1px solid #fff;
-           width: 2em;
+            border-right: 1px solid #fff;
+            padding: 0.6em;
         };
-        strong {
-            border-left: 1px solid #fff;
-            padding-left: 0.6em;
-        }
+        // strong {
+        //     border-left: 1px solid #fff;
+        //     padding-left: 0.6em;
+        // }
     }
 }
 
diff --git a/src/assets/site/img/box-1-hover.jpg b/src/assets/site/img/box-1-hover.jpg
new file mode 100644
index 0000000..b30b166
Binary files /dev/null and b/src/assets/site/img/box-1-hover.jpg differ
diff --git a/src/assets/site/img/box-1.jpg b/src/assets/site/img/box-1.jpg
new file mode 100644
index 0000000..53271ce
Binary files /dev/null and b/src/assets/site/img/box-1.jpg differ
diff --git a/src/assets/site/img/box-2-hover.jpg b/src/assets/site/img/box-2-hover.jpg
new file mode 100644
index 0000000..4bf4cb1
Binary files /dev/null and b/src/assets/site/img/box-2-hover.jpg differ
diff --git a/src/assets/site/img/box-2.jpg b/src/assets/site/img/box-2.jpg
new file mode 100644
index 0000000..d5588b4
Binary files /dev/null and b/src/assets/site/img/box-2.jpg differ
diff --git a/src/assets/site/img/box-3-hover.jpg b/src/assets/site/img/box-3-hover.jpg
new file mode 100644
index 0000000..bec3d5a
Binary files /dev/null and b/src/assets/site/img/box-3-hover.jpg differ
diff --git a/src/assets/site/img/box-3.jpg b/src/assets/site/img/box-3.jpg
new file mode 100644
index 0000000..1311857
Binary files /dev/null and b/src/assets/site/img/box-3.jpg differ
diff --git a/src/assets/site/img/geologische-bundesanstalt-logo.jpg b/src/assets/site/img/geologische-bundesanstalt-logo.jpg
new file mode 100644
index 0000000..f298be2
Binary files /dev/null and b/src/assets/site/img/geologische-bundesanstalt-logo.jpg differ
diff --git a/src/assets/site/img/geosphere-austria-logo.jpg b/src/assets/site/img/geosphere-austria-logo.jpg
new file mode 100644
index 0000000..668865d
Binary files /dev/null and b/src/assets/site/img/geosphere-austria-logo.jpg differ
diff --git a/src/assets/site/img/placeholder-logo.jpg b/src/assets/site/img/placeholder-logo.jpg
new file mode 100644
index 0000000..48b8193
Binary files /dev/null and b/src/assets/site/img/placeholder-logo.jpg differ
diff --git a/src/assets/site/img/re3-data-logo-mono.jpg b/src/assets/site/img/re3-data-logo-mono.jpg
new file mode 100644
index 0000000..ce7d935
Binary files /dev/null and b/src/assets/site/img/re3-data-logo-mono.jpg differ
diff --git a/src/components/active-facet-category/active-facet-category.vue b/src/components/active-facet-category/active-facet-category.vue
index 35b182a..e30b278 100644
--- a/src/components/active-facet-category/active-facet-category.vue
+++ b/src/components/active-facet-category/active-facet-category.vue
@@ -13,7 +13,7 @@ import ActiveFacetCategory from "./ActiveFacetCategory";
 export default ActiveFacetCategory;
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 th,
 td {
     border-bottom: 0px solid #e1e1e1;
diff --git a/src/components/vs-input/vs-input.vue b/src/components/vs-input/vs-input.vue
index a6c4fbc..9b45084 100644
--- a/src/components/vs-input/vs-input.vue
+++ b/src/components/vs-input/vs-input.vue
@@ -55,7 +55,7 @@ import VsInput from "./vs-input";
 export default VsInput;
 </script>
 
-<style>
+<style lang="scss" scoped>
 .autocomplete-column {
     display: block;
     flex-basis: 0;
diff --git a/src/components/vs-result/vs-result.vue b/src/components/vs-result/vs-result.vue
index 94eba38..1108c28 100644
--- a/src/components/vs-result/vs-result.vue
+++ b/src/components/vs-result/vs-result.vue
@@ -59,7 +59,7 @@ import VsResults from "./vs-result";
 export default VsResults;
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 /* overflow for abstracts */
 .clamped {
     line-height: 1.5;
diff --git a/src/main.ts b/src/main.ts
index bc36390..0429315 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,9 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import "./assets/scss/main-styles.scss";
-import FontAwesomeIcon from "@/utilities/fontawesome";
+// import FontAwesomeIcon from "@/utilities/fontawesome";
 import router from "./router/index";
+import "@fortawesome/fontawesome-free/css/all.css";
 
-createApp(App).use(router).component("fa", FontAwesomeIcon).mount("#app");
+createApp(App).use(router).mount("#app");
+// .component("fa", FontAwesomeIcon)
diff --git a/src/notes.txt b/src/notes.txt
index e36490b..0b5f738 100644
--- a/src/notes.txt
+++ b/src/notes.txt
@@ -44,11 +44,17 @@ npm install --save qs
 
 npm install --save class-transformer
 
+===== font-awsome =============================================
 
 npm install --save @fortawesome/vue-fontawesome@prerelease
 npm install --save @fortawesome/fontawesome-svg-core
 npm install --save @fortawesome/free-solid-svg-icons
 
+besser:
+npm install --save @fortawesome/fontawesome-free
+inside main.ts:
+import "@fortawesome/fontawesome-free/css/all.css";
+
 
 
 ======================= router ================================
diff --git a/src/router/index.ts b/src/router/index.ts
index d7de045..80238a6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createWebHistory, createRouter } from "vue-router";
 import HomeViewComponent from "@/views/home-view/home-view-component.vue";
 import MapViewComponent from "@/views/map-view/map-view-component.vue";
+import SearchViewComponent from "@/views/search-view/search-view-component";
 
 const routes = [
     {
@@ -13,6 +14,11 @@ const routes = [
         name: "Map",
         component: MapViewComponent,
     },
+    {
+        path: "/test/search",
+        name: "Search",
+        component: SearchViewComponent,
+    },
 ];
 
 const router = createRouter({
diff --git a/src/utilities/fontawesome.ts b/src/utilities/fontawesome.ts
index 35c485b..08277bf 100644
--- a/src/utilities/fontawesome.ts
+++ b/src/utilities/fontawesome.ts
@@ -1,14 +1,13 @@
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPhone } from "@fortawesome/free-solid-svg-icons";
-// import { faUser } from "@fortawesome/free-solid-svg-icons";
-import { faFlag, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
+// import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+// import { library } from "@fortawesome/fontawesome-svg-core";
+// import { faPhone } from "@fortawesome/free-solid-svg-icons";
+// import { faFlag, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 
-// https://stackoverflow.com/questions/66389974/using-font-awesome-in-vue-3
-library.add(faSignInAlt);
-library.add(faFlag);
-library.add(faPhone);
-// import { dom } from "@fortawesome/fontawesome-svg-core";
-// dom.watch();
+// // https://stackoverflow.com/questions/66389974/using-font-awesome-in-vue-3
+// library.add(faSignInAlt);
+// library.add(faFlag);
+// library.add(faPhone);
+// // import { dom } from "@fortawesome/fontawesome-svg-core";
+// // dom.watch();
 
-export default FontAwesomeIcon;
+// export default FontAwesomeIcon;
diff --git a/src/views/home-view/home-view-component.scss b/src/views/home-view/home-view-component.scss
index e69de29..b2f0863 100644
--- a/src/views/home-view/home-view-component.scss
+++ b/src/views/home-view/home-view-component.scss
@@ -0,0 +1,183 @@
+p,
+ol,
+ul,
+li,
+dl,
+textarea,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 1.5rem;
+}
+
+.card {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.25rem;
+}
+
+.card-body {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 1rem 1rem;
+}
+
+.text-white {
+    color: #fff !important;
+}
+
+// .work-front {
+//     position: absolute;
+//     top: 5%;
+//     left: 5%;
+// }
+.work-front {
+    display: flex;
+}
+.work-front .box-1,
+.work-front .box-2,
+.work-front .box-3 {
+    position: absolute;
+    top: 85%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+// .work-back {
+//     position: absolute;
+//     top: 5%;
+//     left: 5%;
+// }
+.work-back {
+    display: none;
+}
+.work-back .box-1-hover {
+    position: absolute;
+    top: 5%;
+    left: 5%;
+    opacity: 0.9;
+    padding: 2%;
+}
+
+.custom-heading {
+    font-family: Verdana;
+    font-weight: bold;
+    font-size: 1.2em;
+    line-height: 1.9em;
+    color: #fff;
+}
+
+.work-items div:hover .work-back {
+    display: flex;
+    /* box-shadow: inset 0 0 0 10px #222; */
+}
+.work-items div:hover .work-front {
+    display: none;
+}
+
+//contact apge
+.page-breaker {
+    background-image: url(./../../assets/site/img/page-breaker.jpg);
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    padding: 6.2em;
+}
+.my-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+}
+
+// partner logos:
+.partner-logos {
+    padding: 3em 0;
+}
+
+// footer:
+footer {
+    background-image: url(./../../assets/site/img/footer-bg.jpg);
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    padding-top: 26em;
+    padding-bottom: 3.8em;
+}
+
+footer .card {
+    background: transparent;
+    border: none;
+    position: relative;
+    margin-top: 2em;
+    box-shadow: none;
+}
+
+footer .card-title {
+    font-family: Verdana;
+    color: #fff;
+    text-transform: uppercase;
+    font-weight: bold;
+}
+
+.list-group-flush {
+    border-radius: 0;
+}
+.list-group {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+    border-radius: 0.25rem;
+}
+.list-group {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+}
+.list-group-flush > .list-group-item {
+    border-width: 0 0 1px;
+}
+
+.list-group-item:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+.list-group-flush .list-group-item {
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+}
+footer .list-group-item a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.copyright-notice {
+    text-align: center;
+    color: #fff;
+    background-color: #384d6e;
+    padding: 0.3em 0;
+}
\ No newline at end of file
diff --git a/src/views/home-view/home-view-component.ts b/src/views/home-view/home-view-component.ts
index f8d25be..3ef9c24 100644
--- a/src/views/home-view/home-view-component.ts
+++ b/src/views/home-view/home-view-component.ts
@@ -1,14 +1,8 @@
 import { Options, Vue } from "vue-class-component";
-import { Prop } from "vue-property-decorator";
 import VsInput from "@/components/vs-input/vs-input.vue";
 import VsResult from "@/components/vs-result/vs-result.vue";
 import FacetCategory from "@/components/face-category/facet-category.vue";
 import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
-import { SolrSettings } from "@/models/solr";
-import { DatasetService } from "@/services/dataset.service";
-import { Suggestion } from "@/models/dataset";
-import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
-import { ActiveFilterCategories } from "@/models/solr";
 
 @Options({
     name: "HomeViewComponent",
@@ -19,227 +13,4 @@ import { ActiveFilterCategories } from "@/models/solr";
         ActiveFacetCategory,
     },
 })
-export default class HomeViewComponent extends Vue {
-    results: Array<any> = [];
-
-    // facets: FacetFields = new FacetFields();
-    facets: FacetResults = new FacetResults();
-    searchTerm!: string | Suggestion;
-    // activeFilterCategories: Object = {};
-    activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array<ActiveFilterCategory>();
-    pagination: any = {
-        total: 0,
-        per_page: 2,
-        current_page: 0,
-        // last_page: 0,
-        data: [],
-    };
-    loaded = false;
-    numFound!: number;
-    private solr: SolrSettings = {
-        core: "rdr_data", // SOLR.core;
-        host: "tethys.at",
-    };
-    private rdrAPI!: DatasetService;
-    private error = "";
-
-    mounted() {
-        this.rdrAPI = new DatasetService();
-    }
-
-    // onSearch(term: string): void {
-    onSearch(suggestion: Suggestion | string): void {
-        // let queryOperator;
-        // if (typeof suggestion === "string") {
-        //     suggestion = suggestion + "*";
-        //     queryOperator = "or";
-        // } else if (suggestion instanceof Suggestion) {
-        //     // term = suggestion.value;
-        //     queryOperator = "and";
-        // }
-
-        // if (term) {
-        //     term = term.trim();
-        // } else {
-        //     term = "*%3A*";
-        // }
-
-        this.activeFilterCategories = new ActiveFilterCategories();
-        this.facets = new FacetResults();
-
-        // this.facets = {};
-        this.searchTerm = suggestion;
-        this.rdrAPI.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
-            (res: SolrResponse) => this.dataHandler(res),
-            (error: any) => this.errorHandler(error),
-        );
-    }
-
-    private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
-        // this.results = datasets;
-        this.results = res.response.docs;
-        this.numFound = res.response.numFound;
-
-        // pagination
-        this.pagination["total"] = res.response.numFound;
-        this.pagination["per_page"] = res.responseHeader.params.rows;
-        this.pagination["current_page"] = 1;
-        this.pagination["data"] = res.response.docs;
-
-        // facets
-        // const facet_fields = res.facet_counts.facet_fields;
-        // for (const prop in facet_fields) {
-        //     const facetCategory: FacetCategory<any> = facet_fields[prop];
-        //     const facetValues = facetCategory.key.values.map((facet_value: any, i: number) => {
-        //         if (i % 2 === 0 && typeof facet_value == "string") {
-        //             //var rObj = { value: facet, count: facet_fields[prop][i + 1] };
-        //             // FiletrItem with value and count
-        //             const rObj = new FilterItem(facet_value, facetCategory.key.values[i + 1]);
-        //             return rObj;
-        //         }
-        //     });
-        //     .filter(function (el: FilterItem) {
-        //         return el != null && el.count > 0;
-        //     });
-        //     //this.facets.push({ filterName: prop, values: facetValues });
-        //     this.facets[prop] = facetValues;
-        // }
-
-        const facet_fields: FacetFields = res.facets;
-        let prop: keyof typeof facet_fields;
-        for (prop in facet_fields) {
-            const facetCategory = facet_fields[prop];
-            if (facetCategory.buckets) {
-                const facetItems: Array<FacetItem> = facetCategory.buckets;
-
-                let facetValues = facetItems.map((facetItem, index) => {
-                    let rObj: FacetItem;
-                    if (filterItem?.val == facetItem.val) {
-                        rObj = filterItem;
-                    } else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
-                        // console.log(facetValue + " is included")
-                        const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
-                        // console.log(indexOfFacetValue);
-                        rObj = this.facets[prop][indexOfFacetValue];
-                        rObj.count = facetItem.count;
-                        // rObj = new FacetItem(val, count);
-                    } else {
-                        rObj = new FacetItem(facetItem.val, facetItem.count);
-                    }
-                    return rObj;
-                });
-
-                facetValues = facetValues.filter(function (el) {
-                    return el != null && el.count > 0;
-                });
-                // this.facets[prop] = facetCategory;
-                this.facets[prop] = facetValues;
-            }
-        }
-    }
-
-    private errorHandler(err: any): void {
-        this.error = err;
-        // this.loading = false;
-    }
-
-    onFilter(facetItem: FacetItem): void {
-        // console.log(facetItem.val);
-        // if (!this.activeFilterCategories.hasOwnProperty(facetItem.category)) {
-        if (!Object.prototype.hasOwnProperty.call(this.activeFilterCategories, facetItem.category)) {
-            this.activeFilterCategories[facetItem.category] = new Array<string>();
-        }
-        // if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
-        if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
-            this.activeFilterCategories[facetItem.category].push(facetItem.val);
-
-            this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
-                (res: SolrResponse) => this.dataHandler(res, facetItem),
-                (error: any) => this.errorHandler(error),
-            );
-            // alert(this.activeFilterCategories[filter.Category]);
-            // var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
-            // this.results = res.response.docs;
-            // this.numFound = res.response.numFound;
-
-            // // pagination
-            // this.pagination['total'] = res.response.numFound;
-            // this.pagination['per_page'] = res.responseHeader.params.rows;
-            // this.pagination['current_page'] = 1;
-            // this.pagination['data'] = res.response.docs;
-
-            // var facet_fields = res.facet_counts.facet_fields;
-            // for (var prop in facet_fields) {
-            //   var facetValues = facet_fields[prop].map((facetValue, i) => {
-            //     if (i % 2 === 0) {
-            //       // var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
-            //       var rObj;
-            //       if (filter.value == facetValue) {
-            //         rObj = filter;
-            //       } else if (this.facets[prop].some(e => e.value === facetValue)) {
-            //         // console.log(facetValue + " is included")
-            //         var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
-            //         // console.log(indexOfFacetValue);
-            //         rObj = this.facets[prop][indexOfFacetValue];
-            //         rObj.count = facet_fields[prop][i + 1];
-            //       } else {
-            //         rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
-            //       }
-            //       return rObj;
-            //     }
-            //   }).filter(function (el) {
-            //     return el != null && el.count > 0;
-            //   });
-            //   // this.facets.push({ filterName: prop, values: facetValues });
-            //   this.facets[prop] = facetValues;
-        }
-    }
-
-    onClearFacetCategory(categoryName: string): void {
-        // alert(categoryName);
-        delete this.activeFilterCategories[categoryName];
-
-        this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
-            (res: SolrResponse) => {
-                this.results = res.response.docs;
-                this.numFound = res.response.numFound;
-
-                // pagination
-                this.pagination["total"] = res.response.numFound;
-                this.pagination["per_page"] = res.responseHeader.params.rows;
-                this.pagination["current_page"] = 1;
-                this.pagination["data"] = res.response.docs;
-
-                const facet_fields: FacetFields = res.facets;
-                let prop: keyof typeof facet_fields;
-                for (prop in facet_fields) {
-                    const facetCategory: FacetInstance = facet_fields[prop];
-                    if (facetCategory.buckets) {
-                        const facetItems: Array<FacetItem> = facetCategory.buckets;
-
-                        const facetValues = facetItems.map((facetItem, index) => {
-                            let rObj: FacetItem;
-                            if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
-                                // console.log(facetValue + " is included")
-                                const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
-                                // console.log(indexOfFacetValue);
-                                rObj = this.facets[prop][indexOfFacetValue];
-                                rObj.count = facetItem.count;
-                                // rObj = new FacetItem(val, count);
-                                //if facet ccategory is reactivated category, deactivate all filter items
-                                if (prop == categoryName) {
-                                    rObj.active = false;
-                                }
-                            } else {
-                                rObj = new FacetItem(facetItem.val, facetItem.count);
-                            }
-                            return rObj;
-                        });
-                        this.facets[prop] = facetValues;
-                    }
-                }
-            },
-            (error: any) => this.errorHandler(error),
-        );
-    }
-}
+export default class HomeViewComponent extends Vue {}
diff --git a/src/views/home-view/home-view-component.vue b/src/views/home-view/home-view-component.vue
index 5887dd8..633e649 100644
--- a/src/views/home-view/home-view-component.vue
+++ b/src/views/home-view/home-view-component.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
+    <div id="page_style" class="site-content page__style page__description" autocomplete="off">
         <!-- <div class="col-6 offset-6 content column is-half is-offset-6" style="text-align: right">
             <a class="button" href="/test" target="_self">
                 <img class="icon-spacing" src="./assets/fa/firefox.svg" style="width: 16px; height: 16px" />
@@ -55,150 +55,185 @@
                 <hr class="center-line" />
             </div>
         </div> -->
-        <section class="section">
-            <div class="column is-full text-center">
-                <h1>ÜBER TETHYS</h1>
-                <p class="lead">Was sind unsere Schwerpunkte</p>
-                <hr class="center-line" />
-            </div>
-            <div class="column is-full text-left">
-                <p>
-                    TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowisse nschaftliche
-                    Forschungsdaten veröffentlicht.
-                </p>
-                <p>
-                    Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls zur
-                    Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR hat den
-                    Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das ein
-                    permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
-                </p>
-                <p>
-                    Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard Suess
-                    (1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
-                </p>
-            </div>
-        </section>
 
-        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
-
-        <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
-            <!-- <div class="tabs is-centered">
-                <ul id="id-results-tabs">
-                    <li class="search_tab is-active">
-                        <a target="_self">Web</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Images</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Videos</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Homepages</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Food</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Books</a>
-                    </li>
-                </ul>
-            </div> -->
-            <div v-if="results.length > 0" class="result-list-info">
-                <div class="resultheader">
-                    Your search yielded
-                    <strong>{{ numFound }}</strong> results:
+        <div class="container">
+            <section class="section">
+                <div class="column is-full text-center">
+                    <h1>ÜBER TETHYS</h1>
+                    <p class="lead">Was sind unsere Schwerpunkte</p>
+                    <hr class="center-line" />
                 </div>
-            </div>
-            <div v-else-if="results.length == 0">
-                <div class="resultheader">
-                    Your search yielded
-                    <strong> 0</strong> results:
+                <div class="column is-full text-left">
+                    <p>
+                        TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowissenschaftliche
+                        Forschungsdaten veröffentlicht.
+                    </p>
+                    <p>
+                        Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls
+                        zur Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR
+                        hat den Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das
+                        ein permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
+                    </p>
+                    <p>
+                        Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard
+                        Suess (1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
+                    </p>
                 </div>
-            </div>
+            </section>
 
-            <!-- <div id="id-pro-sign-in" class="notification" style="">
-                    <button
-                        class="delete"
-                        onclick="dismissProNotification();"
-                    ></button>
-                    It appears that you're not signed in. You'll need to
-                    <a href="/pro" target="_self">signup for Pro</a> or become a
-                    <a
-                        href="https://coil.com/?ref=InfinitySearch2229"
-                        target="_self"
-                        >Coil member</a
-                    >
-                    to access our results.
-                </div> -->
+            <section class="section">
+                <div class="column is-full text-center">
+                    <h1>TETHYS SERVICES</h1>
+                    <p class="lead">Eine Übersicht unserer Dienstleistungen</p>
+                    <hr class="center-line" />
+                </div>
+                <div class="columns is-desktop work-items">
+                    <div class="column col-sm overlay-boxes">
+                        <div class="card overlay work-back">
+                            <img src="@/assets/site/img/box-1-hover.jpg" alt="Datenarchivierung" />
+                            <div class="card-body box-1-hover">
+                                <p class="text-white">
+                                    Tethys RDR publiziert und archiviert nach den FAIR Prinzipien* nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei
+                                    lesbaren Formaten. * FAIR data
+                                </p>
+                            </div>
+                        </div>
+                        <div class="card green work-front">
+                            <img src="@/assets/site/img/box-1.jpg" alt="Datenarchivierung" />
+                            <div class="card-body box-1">
+                                <div class="custom-heading">DATENARCHIVIERUNG</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="column col-sm overlay-boxes">
+                        <div class="card overlay work-back">
+                            <img src="@/assets/site/img/box-2-hover.jpg" alt="DATENPUBLIKATION" />
+                            <div class="card-body box-1-hover">
+                                <p class="text-white">
+                                    Die Datensätze werden mit standardisierten Metadatenschemen publiziert und sind somit nicht nur auffindbar, wiederverwendbar und auch
+                                    maschinenlesbar, sondern können dadurch auch einfach zitiert werden.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="card green work-front">
+                            <img src="@/assets/site/img/box-2.jpg" alt="Datenpublikation" />
+                            <div class="card-body box-2">
+                                <div class="custom-heading">DATENPUBLIKATION</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="column col-sm overlay-boxes">
+                        <div class="card overlay work-back">
+                            <img src="@/assets/site/img/box-3-hover.jpg" alt="BEGUTACHTUNG" />
+                            <div class="card-body box-1-hover">
+                                <p class="text-white">
+                                    Alle im Tethys RDR publizierten Datensätze werden auf technische sowie inhaltliche Vollständigkeit geprüft und werden bei Bedarf auch einer
+                                    fachlichen Begutachtung unterworfen. Ein klassischer Peer Review-Prozess ist in Vorbereitung.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="card green work-front">
+                            <img src="@/assets/site/img/box-3.jpg" alt="BEGUTACHTUNG" />
+                            <div class="card-body box-3">
+                                <div class="custom-heading">BEGUTACHTUNG</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
         </div>
 
-        <div class="columns">
-            <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem">
-                <div id="externals" class="">
-                    <div class="card" v-for="(facetItems, key, index) in facets" :key="index" name="external_card" style="margin-bottom: 0px">
-                        <facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
-                    </div>
-                    <!-- <div class="card" name="external_card" style="margin-bottom: 0px">
-                        <header class="card-header">
-                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                                <a
-                                    id="https://en.wikipedia.org/w/index.php?search="
-                                    href="https://en.wikipedia.org/w/index.php?search=test"
-                                    name="external_link_0"
-                                    style="display: block"
-                                    rel="noreferrer noopener"
-                                    target="_self"
-                                >
-                                    <img src="/static/images/favicons/wikipedia.ico" name="external_icon_0'" class="external-icon" />
-                                    <span hidden="" class="external-text" name="external_text_0" style="font-size: 0.95rem; display: inline"> Wikipedia Results </span>
-                                </a>
-                            </p>
-                        </header>
-                    </div>
-                    <div class="card" name="external_card" style="margin-bottom: 0px">
-                        <header class="card-header">
-                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
-                                <a
-                                    id="https://duckduckgo.com/?q="
-                                    href="https://duckduckgo.com/?q=test"
-                                    name="external_link_1"
-                                    style="display: block"
-                                    rel="noreferrer noopener"
-                                    target="_self"
-                                >
-                                    <img src="/static/images/favicons/duckduckgo.ico" name="external_icon_1'" class="external-icon" />
-                                    <span hidden="" class="external-text" name="external_text_1" style="font-size: 0.95rem; display: inline"> DuckDuckGo Results </span>
-                                </a>
-                            </p>
-                            <span
-                                class="clickableIcon"
-                                onclick="removeExternalClickable(this)"
-                                style="cursor: pointer; display: block; margin: auto; margin-right: 6px; min-width: 0.5em"
-                            >
-                                <img
-                                    class="handle fa-ellipsis-v"
-                                    src="/static/images/fa/ellipsis-v.svg"
-                                    style="cursor: pointer; display: block; margin: auto; margin-right: 12px; min-width: 0.5em; width: 16px; height: 16px"
-                                />
-                            </span>
-                        </header>
-                    </div> -->
-                </div>
-            </div>
+        <div class="clearfix mt-3"></div>
 
-            <div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
-                <div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
-                    <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
-                        <active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
-                    </span>
-                </div>
-                <div class="results">
-                    <!-- Results section -->
-                    <vs-result v-bind:datasets="results"></vs-result>
+        <div class="container-fluid page-breaker my-5">
+            <div class="container">
+                <div class="column col-sm text-center my-5">
+                    <h1 class="text-white">HABEN SIE FRAGEN?</h1>
+
+                    <p class="text-white text center p-5">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices
+                        gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
+                    </p>
+
+                    <div class="mx-auto my-5" style="width: 170px">
+                        <a class="button is-primary custom-button">
+                            <i class="fas fa-sign-in-alt"></i>
+                            <strong>KONTAKT</strong>
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
+
+        <div class="container-fluid">
+            <div class="columns is-mobile partner-logos">
+                <div class="column col-sm text-center">
+                    <img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" />
+                </div>
+                <div class="column col-sm text-center mobile-space">
+                    <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
+                </div>
+                <div class="column col-sm text-center">
+                    <img src="@/assets/site/img/placeholder-logo.jpg" alt="logo placeholder" />
+                </div>
+            </div>
+        </div>
+
+        <footer class="container-fluid">
+            <div class="columns">
+                <div class="column col-sm">
+                    <div class="card mx-auto" style="width: 18rem">
+                        <div class="card-body">
+                            <h5 class="card-title">About TETHYS</h5>
+                            <ul class="list-group list-group-flush">
+                                <li class="list-group-item"><a href="#">OAI</a></li>
+                                <li class="list-group-item"><a href="#">About GBA</a></li>
+                                <li class="list-group-item"><a href="#">News</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="column col-sm">
+                    <div class="card mx-auto" style="width: 18rem">
+                        <div class="card-body">
+                            <h5 class="card-title">Tools and Support</h5>
+                            <ul class="list-group list-group-flush">
+                                <li class="list-group-item"><a href="#">Contact</a></li>
+                                <li class="list-group-item"><a href="#">Impressum</a></li>
+                                <li class="list-group-item"><a href="#">Sitelinks</a></li>
+                                <li class="list-group-item"><a href="#">Terms &amp; Conditions</a></li>
+                                <li class="list-group-item"><a href="#">rdr bei GitHub</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="column col-sm">
+                    <div class="card mx-auto" style="width: 18rem">
+                        <div class="card-body">
+                            <h5 class="card-title">Connect with us</h5>
+                            <ul class="list-group list-group-flush">
+                                <li class="list-group-item">
+                                    <a href="#"><i class="fas fa-home pr-2"></i>GBA</a>
+                                </li>
+                                <li class="list-group-item">
+                                    <a href="#"><i class="fas fa-phone-alt pr-2"></i> +43-1-7125674</a>
+                                </li>
+                                <li class="list-group-item">
+                                    <a href="mailto:repository@geologie.ac.at"><i class="fas fa-envelope pr-2"></i> repository(at)geologie.ac.at </a>
+                                </li>
+                            </ul>
+                            <img class="img-fluid pt-4" src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <div class="container-fluid">
+            <div class="copyright-notice">Copyright 2021 TETHYS RDR</div>
+        </div>
     </div>
 </template>
 
@@ -209,5 +244,5 @@ export default HomeViewComponent;
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-@import "./home-view-component.scss"; // $text-primary would be defined in that file
+@import "./home-view-component.scss";
 </style>
diff --git a/src/views/search-view/search-view-component.ts b/src/views/search-view/search-view-component.ts
new file mode 100644
index 0000000..4fb2331
--- /dev/null
+++ b/src/views/search-view/search-view-component.ts
@@ -0,0 +1,244 @@
+import { Options, Vue } from "vue-class-component";
+import VsInput from "@/components/vs-input/vs-input.vue";
+import VsResult from "@/components/vs-result/vs-result.vue";
+import FacetCategory from "@/components/face-category/facet-category.vue";
+import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
+import { SolrSettings } from "@/models/solr";
+import { DatasetService } from "@/services/dataset.service";
+import { Suggestion, Dataset } from "@/models/dataset";
+import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
+import { ActiveFilterCategories } from "@/models/solr";
+
+@Options({
+    name: "SearchViewComponent",
+    components: {
+        VsInput,
+        VsResult,
+        FacetCategory,
+        ActiveFacetCategory,
+    },
+})
+export default class SearchViewComponent extends Vue {
+    results: Array<Dataset> = [];
+
+    // facets: FacetFields = new FacetFields();
+    facets: FacetResults = new FacetResults();
+    searchTerm!: string | Suggestion;
+    // activeFilterCategories: Object = {};
+    activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array<ActiveFilterCategory>();
+    pagination: any = {
+        total: 0,
+        per_page: 2,
+        current_page: 0,
+        // last_page: 0,
+        data: [],
+    };
+    loaded = false;
+    numFound!: number;
+    private solr: SolrSettings = {
+        core: "rdr_data", // SOLR.core;
+        host: "tethys.at",
+    };
+    private rdrAPI!: DatasetService;
+    private error = "";
+
+    mounted(): void {
+        this.rdrAPI = new DatasetService();
+    }
+
+    // onSearch(term: string): void {
+    onSearch(suggestion: Suggestion | string): void {
+        // let queryOperator;
+        // if (typeof suggestion === "string") {
+        //     suggestion = suggestion + "*";
+        //     queryOperator = "or";
+        // } else if (suggestion instanceof Suggestion) {
+        //     // term = suggestion.value;
+        //     queryOperator = "and";
+        // }
+
+        // if (term) {
+        //     term = term.trim();
+        // } else {
+        //     term = "*%3A*";
+        // }
+
+        this.activeFilterCategories = new ActiveFilterCategories();
+        this.facets = new FacetResults();
+
+        // this.facets = {};
+        this.searchTerm = suggestion;
+        this.rdrAPI.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+            (res: SolrResponse) => this.dataHandler(res),
+            (error: any) => this.errorHandler(error),
+        );
+    }
+
+    private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
+        // this.results = datasets;
+        this.results = res.response.docs;
+        this.numFound = res.response.numFound;
+
+        // pagination
+        this.pagination["total"] = res.response.numFound;
+        this.pagination["per_page"] = res.responseHeader.params.rows;
+        this.pagination["current_page"] = 1;
+        this.pagination["data"] = res.response.docs;
+
+        // facets
+        // const facet_fields = res.facet_counts.facet_fields;
+        // for (const prop in facet_fields) {
+        //     const facetCategory: FacetCategory<any> = facet_fields[prop];
+        //     const facetValues = facetCategory.key.values.map((facet_value: any, i: number) => {
+        //         if (i % 2 === 0 && typeof facet_value == "string") {
+        //             //var rObj = { value: facet, count: facet_fields[prop][i + 1] };
+        //             // FiletrItem with value and count
+        //             const rObj = new FilterItem(facet_value, facetCategory.key.values[i + 1]);
+        //             return rObj;
+        //         }
+        //     });
+        //     .filter(function (el: FilterItem) {
+        //         return el != null && el.count > 0;
+        //     });
+        //     //this.facets.push({ filterName: prop, values: facetValues });
+        //     this.facets[prop] = facetValues;
+        // }
+
+        const facet_fields: FacetFields = res.facets;
+        let prop: keyof typeof facet_fields;
+        for (prop in facet_fields) {
+            const facetCategory = facet_fields[prop];
+            if (facetCategory.buckets) {
+                const facetItems: Array<FacetItem> = facetCategory.buckets;
+
+                let facetValues = facetItems.map((facetItem, index) => {
+                    let rObj: FacetItem;
+                    if (filterItem?.val == facetItem.val) {
+                        rObj = filterItem;
+                    } else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
+                        // console.log(facetValue + " is included")
+                        const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
+                        // console.log(indexOfFacetValue);
+                        rObj = this.facets[prop][indexOfFacetValue];
+                        rObj.count = facetItem.count;
+                        // rObj = new FacetItem(val, count);
+                    } else {
+                        rObj = new FacetItem(facetItem.val, facetItem.count);
+                    }
+                    return rObj;
+                });
+
+                facetValues = facetValues.filter(function (el) {
+                    return el != null && el.count > 0;
+                });
+                // this.facets[prop] = facetCategory;
+                this.facets[prop] = facetValues;
+            }
+        }
+    }
+
+    private errorHandler(err: any): void {
+        this.error = err;
+        // this.loading = false;
+    }
+
+    onFilter(facetItem: FacetItem): void {
+        // console.log(facetItem.val);
+        // if (!this.activeFilterCategories.hasOwnProperty(facetItem.category)) {
+        if (!Object.prototype.hasOwnProperty.call(this.activeFilterCategories, facetItem.category)) {
+            this.activeFilterCategories[facetItem.category] = new Array<string>();
+        }
+        // if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
+        if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
+            this.activeFilterCategories[facetItem.category].push(facetItem.val);
+
+            this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+                (res: SolrResponse) => this.dataHandler(res, facetItem),
+                (error: any) => this.errorHandler(error),
+            );
+            // alert(this.activeFilterCategories[filter.Category]);
+            // var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
+            // this.results = res.response.docs;
+            // this.numFound = res.response.numFound;
+
+            // // pagination
+            // this.pagination['total'] = res.response.numFound;
+            // this.pagination['per_page'] = res.responseHeader.params.rows;
+            // this.pagination['current_page'] = 1;
+            // this.pagination['data'] = res.response.docs;
+
+            // var facet_fields = res.facet_counts.facet_fields;
+            // for (var prop in facet_fields) {
+            //   var facetValues = facet_fields[prop].map((facetValue, i) => {
+            //     if (i % 2 === 0) {
+            //       // var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
+            //       var rObj;
+            //       if (filter.value == facetValue) {
+            //         rObj = filter;
+            //       } else if (this.facets[prop].some(e => e.value === facetValue)) {
+            //         // console.log(facetValue + " is included")
+            //         var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
+            //         // console.log(indexOfFacetValue);
+            //         rObj = this.facets[prop][indexOfFacetValue];
+            //         rObj.count = facet_fields[prop][i + 1];
+            //       } else {
+            //         rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
+            //       }
+            //       return rObj;
+            //     }
+            //   }).filter(function (el) {
+            //     return el != null && el.count > 0;
+            //   });
+            //   // this.facets.push({ filterName: prop, values: facetValues });
+            //   this.facets[prop] = facetValues;
+        }
+    }
+
+    onClearFacetCategory(categoryName: string): void {
+        // alert(categoryName);
+        delete this.activeFilterCategories[categoryName];
+
+        this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+            (res: SolrResponse) => {
+                this.results = res.response.docs;
+                this.numFound = res.response.numFound;
+
+                // pagination
+                this.pagination["total"] = res.response.numFound;
+                this.pagination["per_page"] = res.responseHeader.params.rows;
+                this.pagination["current_page"] = 1;
+                this.pagination["data"] = res.response.docs;
+
+                const facet_fields: FacetFields = res.facets;
+                let prop: keyof typeof facet_fields;
+                for (prop in facet_fields) {
+                    const facetCategory: FacetInstance = facet_fields[prop];
+                    if (facetCategory.buckets) {
+                        const facetItems: Array<FacetItem> = facetCategory.buckets;
+
+                        const facetValues = facetItems.map((facetItem, index) => {
+                            let rObj: FacetItem;
+                            if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
+                                // console.log(facetValue + " is included")
+                                const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
+                                // console.log(indexOfFacetValue);
+                                rObj = this.facets[prop][indexOfFacetValue];
+                                rObj.count = facetItem.count;
+                                // rObj = new FacetItem(val, count);
+                                //if facet ccategory is reactivated category, deactivate all filter items
+                                if (prop == categoryName) {
+                                    rObj.active = false;
+                                }
+                            } else {
+                                rObj = new FacetItem(facetItem.val, facetItem.count);
+                            }
+                            return rObj;
+                        });
+                        this.facets[prop] = facetValues;
+                    }
+                }
+            },
+            (error: any) => this.errorHandler(error),
+        );
+    }
+}
diff --git a/src/views/search-view/search-view-component.vue b/src/views/search-view/search-view-component.vue
new file mode 100644
index 0000000..72a927b
--- /dev/null
+++ b/src/views/search-view/search-view-component.vue
@@ -0,0 +1,129 @@
+<template>
+    <div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
+        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
+
+        <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
+            <!-- <div class="tabs is-centered">
+                <ul id="id-results-tabs">
+                    <li class="search_tab is-active">
+                        <a target="_self">Web</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Images</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Videos</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Homepages</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Food</a>
+                    </li>
+                    <li class="search_tab">
+                        <a target="_self">Books</a>
+                    </li>
+                </ul>
+            </div> -->
+            <div v-if="results.length > 0" class="result-list-info">
+                <div class="resultheader">
+                    Your search yielded
+                    <strong>{{ numFound }}</strong> results:
+                </div>
+            </div>
+            <div v-else-if="results.length == 0">
+                <div class="resultheader">
+                    Your search yielded
+                    <strong> 0</strong> results:
+                </div>
+            </div>
+
+            <!-- <div id="id-pro-sign-in" class="notification" style="">
+                    <button
+                        class="delete"
+                        onclick="dismissProNotification();"
+                    ></button>
+                    It appears that you're not signed in. You'll need to
+                    <a href="/pro" target="_self">signup for Pro</a> or become a
+                    <a
+                        href="https://coil.com/?ref=InfinitySearch2229"
+                        target="_self"
+                        >Coil member</a
+                    >
+                    to access our results.
+                </div> -->
+        </div>
+
+        <div class="columns">
+            <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem">
+                <div id="externals" class="">
+                    <div class="card" v-for="(facetItems, key, index) in facets" :key="index" name="external_card" style="margin-bottom: 0px">
+                        <facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
+                    </div>
+                    <!-- <div class="card" name="external_card" style="margin-bottom: 0px">
+                        <header class="card-header">
+                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
+                                <a
+                                    id="https://en.wikipedia.org/w/index.php?search="
+                                    href="https://en.wikipedia.org/w/index.php?search=test"
+                                    name="external_link_0"
+                                    style="display: block"
+                                    rel="noreferrer noopener"
+                                    target="_self"
+                                >
+                                    <img src="/static/images/favicons/wikipedia.ico" name="external_icon_0'" class="external-icon" />
+                                    <span hidden="" class="external-text" name="external_text_0" style="font-size: 0.95rem; display: inline"> Wikipedia Results </span>
+                                </a>
+                            </p>
+                        </header>
+                    </div>
+                    <div class="card" name="external_card" style="margin-bottom: 0px">
+                        <header class="card-header">
+                            <p class="card-header-title" style="font-weight: normal; padding-right: 5px">
+                                <a
+                                    id="https://duckduckgo.com/?q="
+                                    href="https://duckduckgo.com/?q=test"
+                                    name="external_link_1"
+                                    style="display: block"
+                                    rel="noreferrer noopener"
+                                    target="_self"
+                                >
+                                    <img src="/static/images/favicons/duckduckgo.ico" name="external_icon_1'" class="external-icon" />
+                                    <span hidden="" class="external-text" name="external_text_1" style="font-size: 0.95rem; display: inline"> DuckDuckGo Results </span>
+                                </a>
+                            </p>
+                            <span
+                                class="clickableIcon"
+                                onclick="removeExternalClickable(this)"
+                                style="cursor: pointer; display: block; margin: auto; margin-right: 6px; min-width: 0.5em"
+                            >
+                                <img
+                                    class="handle fa-ellipsis-v"
+                                    src="/static/images/fa/ellipsis-v.svg"
+                                    style="cursor: pointer; display: block; margin: auto; margin-right: 12px; min-width: 0.5em; width: 16px; height: 16px"
+                                />
+                            </span>
+                        </header>
+                    </div> -->
+                </div>
+            </div>
+
+            <div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
+                <div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
+                    <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
+                        <active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
+                    </span>
+                </div>
+                <div class="results">
+                    <!-- Results section -->
+                    <vs-result v-bind:datasets="results"></vs-result>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import SearchViewComponent from "./search-view-component";
+export default SearchViewComponent;
+</script>