diff --git a/src/components/listOrGrid.svelte b/src/components/listOrGrid.svelte
new file mode 100644
index 0000000..94fd270
--- /dev/null
+++ b/src/components/listOrGrid.svelte
@@ -0,0 +1,30 @@
+<script>
+    export var list = false;
+</script>
+
+<div>
+    <button on:click={() => list = !list} class:active={list == false}>Grid</button><!--
+    --><button on:click={() => list = !list} class:active={list == true}>List</button>
+</div>
+
+<style>
+    div {
+        margin-left: auto;
+        width: max-content;
+    }
+    button {
+        border-radius: 0;
+        margin: 0;
+    }
+    button:first-child {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+    }
+    button:last-child {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+    button.active {
+        background: rgb(202, 202, 202);
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.svelte b/src/pages/index.svelte
index 6c7798a..36d3cdb 100644
--- a/src/pages/index.svelte
+++ b/src/pages/index.svelte
@@ -3,6 +3,7 @@
     import { goto } from '@roxi/routify/runtime/helpers';
 	import { getUserDetails, getUserManga, isLogedIn } from "../util/anilist";
 	import Items from "../components/items.svelte";
+	import ListOrGrid from "../components/listOrGrid.svelte";
     
 	var name = "";
 
@@ -61,11 +62,7 @@
 		<a href="https://mangadex.org">Mangadex.org</a>
 	</div>
 
-	<div>
-		<label for="list-style">Show as list</label>
-		<input type="checkbox" name="list-style" id="list-style" bind:checked={listStyle}>
-	</div>
-
+	<ListOrGrid bind:list={listStyle} />
 		
 	{#if isLogedIn()}
 		<div>