diff --git a/src/lib/CreateUrl.svelte b/src/lib/CreateUrl.svelte
index ae4dc91..a5b720c 100644
--- a/src/lib/CreateUrl.svelte
+++ b/src/lib/CreateUrl.svelte
@@ -1,111 +1,123 @@
 <script>
-    import Apiclient from "./Apiclient";
-    
-    
-        $: targetUrl = '';
-        $: customShortcode = '';
-        $: shortcode = '';
-        $: error = '';
-    
-        function createUrl() {
-            console.log("here")
-            Apiclient.createUrl(targetUrl, shortcode).then((res)=>{
-                console.log(res)
-                if(res.status != 200){
-                    error = res.data;
-                }
-                else{
-                    shortcode = res.data.shortcode;
-                }
-            });
-        }
-    
-        function reset() {
-            error = '';
-            shortcode = '';
-            customShortcode = '';
-            targetUrl = '';
-        }
-    </script>
-    
-    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-100 pb-3">Create new url</h2>
-    {#if error != ""}
-    <div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
-        <div class="flex">
-            <div class="flex-shrink-0">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" viewBox="0 0 20 20"
-                    fill="currentColor">
-                    <path fill-rule="evenodd"
-                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-                        clip-rule="evenodd" />
-                </svg>
-            </div>
-            <div class="ml-3">
-                <p class="text-sm font-medium text-red-800" id="error_text">
-                    {error}
-                </p>
-            </div>
-            <div class="ml-auto pl-3">
-                <div class="-mx-1.5 -my-1.5">
-                    <button
-                        on:click={()=>{
-                            error='';
-                        }}
-                        class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
-                        <span class="sr-only">Dismiss</span>
-                        <svg class="h-5 w-5" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                            <path fill-rule="evenodd"
-                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                                clip-rule="evenodd"></path>
-                        </svg>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    {/if}
-    {#if shortcode == ''}
-        <div>
-            <div class="mx-auto lg:w-1/3 w-full mt-1 flex rounded-md shadow-sm">
-                <input
-                    type="url"
-                    required
-                    class="flex-1 min-w-0 block border rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
-                    placeholder="https://target.url"
-                />
-            </div>
-            <div class="mt-1 flex rounded-md shadow-sm mx-auto lg:w-1/3 w-full">
-                <span
-                    class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 dark:bg-gray-900 dark:text-gray-300 text-gray-500 sm:text-sm dark:border-gray-600"
-                >
-                    https://kauf.es/
-                </span>
-                <input
-                    type="text"
-                    class="flex-1 min-w-0 block w-full px-3 py-2 border-t border-b border-r rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
-                    placeholder="custom_code"
-                />
-            </div>
-        </div>
-    {:else}
-        <!-- TODO: -->
-    {/if}
-    <div class="mt-3 mx-auto text-center lg:w-1/3 w-full">
-        {#if shortcode == ''}
-            <button
-            on:click={createUrl}
-                class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
-            >
-                Create shorturl
-            </button>
-        {:else}
-            <button
-            on:click={reset}
-                class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
-            >
-                Add another url
-            </button>
-        {/if}
-    </div>
-    
\ No newline at end of file
+	import Apiclient from './Apiclient';
+
+	$: targetUrl = '';
+	$: customShortcode = '';
+	$: shortcode = '';
+	$: error = '';
+
+	function createUrl() {
+		console.log('here');
+		Apiclient.createUrl(targetUrl, shortcode).then((res) => {
+			console.log(res);
+			if (res.status != 200) {
+				error = res.data;
+			} else {
+				shortcode = res.data.shortcode;
+			}
+		});
+	}
+
+	function resetInput() {
+		error = '';
+		shortcode = '';
+		customShortcode = '';
+		targetUrl = '';
+	}
+</script>
+
+<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-100 pb-3">Create new url</h2>
+{#if error != ''}
+	<div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
+		<div class="flex">
+			<div class="flex-shrink-0">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5 text-red-600"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</div>
+			<div class="ml-3">
+				<p class="text-sm font-medium text-red-800" id="error_text">
+					{error}
+				</p>
+			</div>
+			<div class="ml-auto pl-3">
+				<div class="-mx-1.5 -my-1.5">
+					<button
+						on:click={() => {
+							error = '';
+						}}
+						class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600"
+					>
+						<span class="sr-only">Dismiss</span>
+						<svg
+							class="h-5 w-5"
+							x-description="Heroicon name: x"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							aria-hidden="true"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+{#if shortcode == ''}
+	<div>
+		<div class="mx-auto lg:w-1/3 w-full mt-1 flex rounded-md shadow-sm">
+			<input
+				type="url"
+				required
+				class="flex-1 min-w-0 block border rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
+				placeholder="https://target.url"
+			/>
+		</div>
+		<div class="mt-1 flex rounded-md shadow-sm mx-auto lg:w-1/3 w-full">
+			<span
+				class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 dark:bg-gray-900 dark:text-gray-300 text-gray-500 sm:text-sm dark:border-gray-600"
+			>
+				https://kauf.es/
+			</span>
+			<input
+				type="text"
+				class="flex-1 min-w-0 block w-full px-3 py-2 border-t border-b border-r rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
+				placeholder="custom_code"
+			/>
+		</div>
+	</div>
+{:else}
+	<!-- TODO: -->
+{/if}
+<div class="mt-3 mx-auto text-center lg:w-1/3 w-full">
+	{#if shortcode == ''}
+		<button
+			on:click={createUrl}
+			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
+		>
+			Create shorturl
+		</button>
+	{:else}
+		<button
+			on:click={resetInput}
+			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
+		>
+			Add another url
+		</button>
+	{/if}
+</div>