diff --git a/web/src/lib/posts/timeline-item.svelte b/web/src/lib/posts/timeline-item.svelte
index 7d1766c..c084957 100644
--- a/web/src/lib/posts/timeline-item.svelte
+++ b/web/src/lib/posts/timeline-item.svelte
@@ -87,15 +87,14 @@
 	{/if}
 
 	{#if order !== "default"}
-		<div class="font-light text-sm text-slate-500">
+		<div class="font-light text-sm text-slate-500 flex gap-2">
 			<span>{post.feed.name}</span> |
 			{#if post.authors?.length}
 				{#each post.authors as author}
-					<div class="author">
+					<div class="flex gap-1 items-center">
 						<QuillPenLine />
 						<span>{author}</span>
-					</div>
-					|
+					</div> |
 				{/each}
 			{/if}
 			<Time
diff --git a/web/src/lib/server/api.ts b/web/src/lib/server/api.ts
index 098edf7..122c19a 100644
--- a/web/src/lib/server/api.ts
+++ b/web/src/lib/server/api.ts
@@ -25,14 +25,12 @@ export async function register(email: string, username: string, password: string
 	return j.token as string;
 }
 
-export async function getPosts(token?: string) {
-	const opts = {
+export async function getPosts(token: string) {
+	const r = await fetch(env.API_URL + '/entries', {
 		headers: {
 			Authorization: `Bearer ${token}`
 		}
-	}
-	const r = await fetch(env.API_URL + '/entries', token ? opts : undefined);
+	});
 	const j = await r.json();
-	console.log(j);
 	return j as Post[];
 }
\ No newline at end of file
diff --git a/web/src/routes/+page.server.ts b/web/src/routes/+page.server.ts
index 013f9e9..886defb 100644
--- a/web/src/routes/+page.server.ts
+++ b/web/src/routes/+page.server.ts
@@ -60,10 +60,11 @@ const posts: Post[] = [
 	}
 ];
 
-export async function load() {
-	return { 
-		posts: await getPosts(),
+export async function load({ cookies }) {
+	const token = cookies.get("token");
+	return {
+		posts: await getPosts(token),
 		feeds
-	 };
+	};
 }
 
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index e70a023..1fc41b9 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -6,7 +6,10 @@
 		Skeleton,
 		ImagePlaceholder,
 		Avatar,
+		Button,
 		P,
+		Search,
+		MultiSelect,
 	} from "flowbite-svelte";
 	import List from "$lib/posts/list.svelte";
 	import { CalendarWeekSolid } from "flowbite-svelte-icons";
@@ -35,12 +38,24 @@
 			dateStr,
 		};
 	});
+	let selected: string[] = [];
+	let countries = [
+		{ value: "us", name: "United States" },
+		{ value: "ca", name: "Canada" },
+		{ value: "fr", name: "France" },
+		{ value: "jp", name: "Japan" },
+		{ value: "en", name: "England" },
+	];
 </script>
 
+<MultiSelect items={countries} bind:value={selected} size="lg" />
+<Search>
+	<Button>Search</Button>
+</Search>
 <main>
 	<Timeline order="vertical" class="max-w-3xl">
 		{#each displayPosts as post}
-			<TimelineItem title={post.title} date={post.dateStr} post={post}>
+			<TimelineItem title={post.title} date={post.dateStr} {post}>
 				<svelte:fragment slot="icon">
 					<span
 						class="flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900"