diff --git a/src/components/archiveList.vue b/src/components/archiveList.vue
index 9da9d5b..9723818 100644
--- a/src/components/archiveList.vue
+++ b/src/components/archiveList.vue
@@ -7,6 +7,8 @@ This file is part of ArciveList.
 
 
 <template>
+<div>
+  <Search></Search>
 
   <section class="collections-list">
 
@@ -63,7 +65,8 @@ This file is part of ArciveList.
               <figure>
                 <img :src="site.thumbnail" />
               </figure>
-              <p :html="site.summary">
+              <p>
+                <span v-html="site.summary"></span>
                 <a class="button small"
                    :href="site.url">
                   View
@@ -80,16 +83,17 @@ This file is part of ArciveList.
       </nav>
     </aside>
   </section>
-
+</div>
 </template>
 
 
 <script>
 import axios from 'axios';
-
+import Search from './search.vue';
 export default {
+  name: "List",
   components: {
-
+    'Search': Search
   },
   data() {
     return {
diff --git a/src/components/search.vue b/src/components/search.vue
new file mode 100644
index 0000000..10a8c22
--- /dev/null
+++ b/src/components/search.vue
@@ -0,0 +1,82 @@
+<!--
+This file is part of ArciveList.
+
+# SPDX-FileCopyrightText: 2021 Hangar.org
+# SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+
+<template>
+
+  <form class="search" action="">
+    <div class="input-group">
+      <input type="text"
+             name="fulltext_search" value=""
+             placeholder="Search"
+             aria-label="Search"
+             class="input-group-field button hollow" />
+      <button class="appear button"
+              type="submit">
+        Search
+      </button>
+    </div>
+  </form>
+
+
+</template>
+
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: "Search",
+  components: {
+
+  },
+  data() {
+    return {
+
+    };
+  },
+  created() {
+
+  },
+  ready: function () {
+
+  },
+  mounted() {
+    /*
+    var self = this;
+    axios.get(this.api_endpoint +'/sites', {
+    })
+    .then(function (response) {
+      console.log(response.data)
+      self.sites = response.data
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+    */
+  },
+  methods: {
+    /*
+    site_url: function(slug) {
+      return this.base_url + '/s/' + slug
+    }
+    */
+  },
+  watched: {
+
+  },
+  computed: {
+    api_endpoint: function() {
+      return this.base_url + '/api'
+    },
+  }
+};
+</script>
+
+<style>
+
+</style>