diff --git a/public/js/plugin-download.js b/public/js/plugin-download.js
index 3a846ec..9413681 100644
--- a/public/js/plugin-download.js
+++ b/public/js/plugin-download.js
@@ -15,6 +15,7 @@ const component = () => {
 		appliedFilters: [],
 		chaptersLimit: 500,
 		listManga: false,
+		subscribing: false,
 
 		init() {
 			const tableObserver = new MutationObserver(() => {
@@ -88,6 +89,10 @@ const component = () => {
 						this.mangaTitle = data.title;
 					}
 
+					data.chapters.forEach(c => {
+						c.array = ['hello', 'world', 'haha', 'wtf'].sort(() => 0.5 - Math.random()).slice(0, 2);
+					});
+
 					this.allChapters = data.chapters;
 					this.chapters = data.chapters;
 				})
@@ -268,9 +273,8 @@ const component = () => {
 		fieldType(values) {
 			if (values.every(v => !isNaN(v))) return 'number'; // display input for number range
 			if (values.every(v => !isNaN(this.parseDate(v)))) return 'date'; // display input for date range
-			if (values.every(v => Array.isArray(v))) return 'array'; // display input for contains
+			if (values.every(v => Array.isArray(v))) return 'array'; // display select
 			return 'string'; // display input for string searching.
-			// for the last two, if the number of options is small enough (say < 50), display a multi-select2
 		},
 		get filters() {
 			if (this.allChapters.length < 1) return [];
@@ -294,15 +298,17 @@ const component = () => {
 				};
 			});
 		},
-		applyFilters() {
-			const values = $('#filter-form input, #filter-form select')
+		get filterSettings() {
+			return $('#filter-form input:visible, #filter-form select:visible')
 				.get()
 				.map(i => ({
 					key: i.getAttribute('data-filter-key'),
 					value: i.value.trim(),
 					type: i.getAttribute('data-filter-type')
 				}));
-			this.appliedFilters = values;
+		},
+		applyFilters() {
+			this.appliedFilters = this.filterSettings;
 			this.chapters = this.filteredChapters;
 		},
 		clearFilters() {
@@ -321,6 +327,35 @@ const component = () => {
 			if (!regex.test(str))
 				return NaN;
 			return Date.parse(str);
+		},
+		subscribe() {
+			// TODO:
+			// 		- confirmation
+			// 		- name
+			// 		- use select2
+			this.subscribing = true;
+			fetch(`${base_url}api/admin/plugin/subscribe`, {
+					method: 'POST',
+					body: JSON.stringify({
+						filters: JSON.stringify(this.filterSettings),
+						plugin: this.pid,
+						name: 'Test Name'
+					}),
+					headers: {
+						"Content-Type": "application/json"
+					}
+				})
+				.then(res => res.json())
+				.then(data => {
+					if (!data.success)
+						throw new Error(data.error);
+				})
+				.catch(e => {
+					alert('danger', `Failed to subscribe. Error: ${e}`);
+				})
+				.finally(() => {
+					this.subscribing = false;
+				});
 		}
 	};
 };
diff --git a/src/plugin/subscriptions.cr b/src/plugin/subscriptions.cr
index a86831a..3c23848 100644
--- a/src/plugin/subscriptions.cr
+++ b/src/plugin/subscriptions.cr
@@ -43,7 +43,7 @@ struct Filter
     key = json["key"].as_s
     type = FilterType.from_string json["type"].as_s
     _value = json["value"]
-    value = _value.as_s? || _value.as_i32? || _value.as_i64? ||
+    value = _value.as_s? || _value.as_i? || _value.as_i64? ||
             _value.as_f32? || nil
     self.new key, value, type
   end
@@ -82,6 +82,6 @@ struct SubscriptionList
   end
 
   def save
-    File.write @path, @ary.to_json
+    File.write @path, @ary.to_pretty_json
   end
 end
diff --git a/src/routes/api.cr b/src/routes/api.cr
index 0e4272a..4a403e9 100644
--- a/src/routes/api.cr
+++ b/src/routes/api.cr
@@ -633,7 +633,9 @@ struct APIRouter
     post "/api/admin/plugin/subscribe" do |env|
       begin
         plugin_id = env.params.json["plugin"].as String
-        filters = Array(Filter).from_json env.params.json["filters"].to_s
+        filters = JSON.parse(env.params.json["filters"].to_s).as_a.map do |f|
+          Filter.from_json f.to_json
+        end
         name = env.params.json["name"].as String
 
         sub = Subscription.new plugin_id, name
@@ -651,6 +653,7 @@ struct APIRouter
           "success" => false,
           "error"   => e.message,
         }.to_json
+        raise e
       end
     end
 
diff --git a/src/views/plugin-download.html.ecr b/src/views/plugin-download.html.ecr
index bf68325..1e8486d 100644
--- a/src/views/plugin-download.html.ecr
+++ b/src/views/plugin-download.html.ecr
@@ -133,6 +133,8 @@
           </template>
           <button class="uk-button uk-button-primary" @click.prevent="applyFilters()">Apply</button>
           <button class="uk-button uk-button-default" @click.prevent="clearFilters()">Clear</button>
+          <span class="uk-divider-vertical uk-margin-left uk-margin-right"></span>
+          <button class="uk-button uk-button-default" @click.prevent="subscribe()" :disable="subscribing">Subscribe</button>
         </form>
 
         <p class="uk-text-meta" x-show="chapters && chapters.length > chaptersLimit" x-text="`The manga has ${chapters ? chapters.length : 0} chapters, but Mango can only list up to ${chaptersLimit}. Please use the filters to narrow down your search.`"></p>