diff --git a/src/App.svelte b/src/App.svelte
index 7fa9e89..d6c5de9 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,15 +1,9 @@
 <script>
-	var name = "overlord";
-	const base = "https://api.mangadex.org/";
-
-	function request(endpoint, query, type = "GET", body) {
-		return fetch(base + endpoint + "?" + query, {
-			method: type,
-			body: body ? JSON.stringify(body) : undefined
-		}).then(resp => resp.json());
-	}
+	import request from "./request";
+	var name = "";
 
 	var result = request("manga", "title=" + name + "&contentRating[]=safe&contentRating[]=suggestive");
+	$: result = request("manga", "title=" + name + "&contentRating[]=safe&contentRating[]=suggestive");
 	result.then(console.log);
 </script>
 
@@ -38,8 +32,10 @@
 <style>
 	main
 	{
-		max-width: 720px;
+		max-width: 450px;
 		margin: auto;
 	}
-	
+	input {
+		width: 100%;
+	}
 </style>
\ No newline at end of file
diff --git a/src/request.js b/src/request.js
new file mode 100644
index 0000000..f25f1ef
--- /dev/null
+++ b/src/request.js
@@ -0,0 +1,10 @@
+const base = "https://api.mangadex.org/";
+
+function request(endpoint, query, type = "GET", body) {
+    return fetch(base + endpoint + "?" + query, {
+        method: type,
+        body: body ? JSON.stringify(body) : undefined
+    }).then(resp => resp.json());
+}
+
+export default request;
\ No newline at end of file