diff --git a/web/Cargo.toml b/web/Cargo.toml
index ab9deaad..eacdf4ea 100644
--- a/web/Cargo.toml
+++ b/web/Cargo.toml
@@ -24,7 +24,6 @@ dashmap = "5.5"
 leptos = { version = "0.6", features = ["csr", "tracing"] }
 leptos_router = { version = "0.6", features = ["csr"] }
 leptos-use = { version = "0.10", features = ["serde"] }
-web-sys = { version = "0.3", features = ["Screen"] }
 reqwest = { version = "0.12", features = ["json"] }
 apb = { path = "../apb", features = ["unstructured", "activitypub-fe", "activitypub-counters", "litepub"] }
 uriproxy = { path = "../utils/uriproxy/" }
@@ -34,3 +33,5 @@ lazy_static = "1.4"
 chrono = { version = "0.4", features = ["serde"] }
 jrd = "0.1"
 tld = "2.35"
+web-sys = { version = "0.3", features = ["Screen"] }
+regex = "1.10.5"
diff --git a/web/index.html b/web/index.html
index d37d447a..f6a25e56 100644
--- a/web/index.html
+++ b/web/index.html
@@ -39,6 +39,10 @@
 		* {
 			font-family: 'Fira Code', Menlo, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
 		}
+		html {
+			overflow-y: scroll;
+			height: 100vh;
+		}
 
 		body {
 			margin: 0;
@@ -76,14 +80,23 @@
 			hyphens: auto;
 			border-left: solid 3px var(--background-secondary);
 		}
-		blockquote.tl {
+		article.tl {
 			color: var(--text);
 			border-left: solid 3px var(--accent);
+			margin-left: 1.25em;
+			margin-right: 1em;
 			margin-top: 0;
 			margin-bottom: 0;
+			word-wrap: break-word;
 		}
-		blockquote.tl p {
-			margin: 0 .5em;
+		article p {
+			margin: 0 0 0 .5em;
+		}
+		b.displayname {
+			overflow-wrap: break-word;
+		}
+		table.align {
+			max-width: 100%;
 		}
 		span.footer {
 			padding: .1em;
@@ -257,10 +270,10 @@
 			color: var(--background);
 			cursor: pointer;
 		}
-		.ml-1-l {
+		.ml-1-r {
 			margin-left: 1em;
 		}
-		.ml-1-r {
+		.mr-1-r {
 			margin-right: 1em;
 		}
 		.ml-3-r {
@@ -282,7 +295,7 @@
 			.ml-1-l {
 				margin-left: 0;
 			}
-			.ml-1-r {
+			.mr-1-r {
 				margin-right: 0;
 			}
 			.ml-3-r {
diff --git a/web/src/actors/view.rs b/web/src/actors/header.rs
similarity index 98%
rename from web/src/actors/view.rs
rename to web/src/actors/header.rs
index 29726da1..a0998709 100644
--- a/web/src/actors/view.rs
+++ b/web/src/actors/header.rs
@@ -27,7 +27,7 @@ pub fn ActorHeader() -> impl IntoView {
 		}
 	);
 	move || match actor.get() {
-		None => view! { <Loader margin=true /> }.into_view(),
+		None => view! { <Loader /> }.into_view(),
 		Some(Err(e)) => view! { <code class="center cw color">"could not resolve user: "{e}</code> }.into_view(),
 		Some(Ok(actor)) => {
 			let avatar_url = actor.icon().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
diff --git a/web/src/actors/mod.rs b/web/src/actors/mod.rs
index d6621713..9b947c05 100644
--- a/web/src/actors/mod.rs
+++ b/web/src/actors/mod.rs
@@ -1,6 +1,6 @@
 pub mod follow;
-pub mod view;
 pub mod posts;
+pub mod header;
 
 use leptos_router::Params; // TODO can i remove this?
 #[derive(Clone, leptos::Params, PartialEq)]
diff --git a/web/src/actors/posts.rs b/web/src/actors/posts.rs
index 004d3337..d9c453f7 100644
--- a/web/src/actors/posts.rs
+++ b/web/src/actors/posts.rs
@@ -7,14 +7,15 @@ pub fn ActorPosts() -> impl IntoView {
 	let feeds = use_context::<Feeds>().expect("missing feeds context");
 	let params = use_params::<super::IdParam>();
 	Signal::derive(move || {
-		let id = params.get().ok().and_then(|x| x.id).unwrap_or_default();
+		let id = params.get_untracked().ok().and_then(|x| x.id).unwrap_or_default();
 		let tl_url = format!("{}/outbox/page", Uri::api(U::Actor, &id, false));
 		if !feeds.user.next.get_untracked().starts_with(&tl_url) {
 			feeds.user.reset(Some(tl_url));
 		}
+		id
 	}).track();
 	view! {
 		<code class="cw color center mt-1 mb-1 ml-3 mr-3"><span class="emoji">"🖂"</span>" "<b>posts</b></code>
-		<TimelineFeed tl=feeds.user />
+		<Feed tl=feeds.user />
 	}
 }
diff --git a/web/src/app.rs b/web/src/app.rs
index a20dca03..3f4159fb 100644
--- a/web/src/app.rs
+++ b/web/src/app.rs
@@ -2,7 +2,7 @@ use leptos::*;
 use leptos_router::*;
 use crate::prelude::*;
 
-use leptos_use::{storage::use_local_storage, use_cookie, utils::{FromToStringCodec, JsonCodec}};
+use leptos_use::{signal_throttled, storage::use_local_storage, use_cookie, use_element_size, use_window_scroll, utils::{FromToStringCodec, JsonCodec}, UseElementSizeReturn};
 
 #[derive(Clone, Copy)]
 pub struct Feeds {
@@ -64,29 +64,18 @@ pub fn App() -> impl IntoView {
 	let reply_controls = ReplyControls::default();
 	provide_context(reply_controls);
 
-	let screen_width = window().screen().map(|x| x.avail_width().unwrap_or_default()).unwrap_or_default();
+	let screen_width = document().body().map(|x| x.client_width()).unwrap_or_default();
+	tracing::info!("detected width of {screen_width}");
 
-	let (menu, set_menu) = create_signal(screen_width <= 786);
+	let (menu, set_menu) = create_signal(screen_width < 768);
 	let (advanced, set_advanced) = create_signal(false);
 
 	let title_target = move || if auth.present() { "/web/home" } else { "/web/server" };
 
-	spawn_local(async move {
-		// refresh token first, or verify that we're still authed
-		if Auth::refresh(auth.token, set_token, set_userid).await {
-			feeds.home.more(auth); // home inbox requires auth to be read
-			feeds.private.more(auth);
-		}
-		feeds.global.more(auth);
-		feeds.public.more(auth); // server inbox may contain private posts
-	});
-
-
-	// refresh token every hour
-	set_interval(
-		move || spawn_local(async move { Auth::refresh(auth.token, set_token, set_userid).await; }),
-		std::time::Duration::from_secs(3600)
-	);
+	// refresh token immediately and  every hour
+	let refresh = move || spawn_local(async move { Auth::refresh(auth.token, set_token, set_userid).await; });
+	refresh();
+	set_interval(refresh, std::time::Duration::from_secs(3600));
 
 	view! {
 		<nav class="w-100 mt-1 mb-1 pb-s">
@@ -98,7 +87,7 @@ pub fn App() -> impl IntoView {
 		<hr class="sep sticky" />
 		<div class="container mt-2 pt-2" >
 			<div class="two-col" >
-				<div class="col-side sticky pb-s" class:hidden=move || menu.get() >
+				<div class="col-side sticky pb-s" class:hidden=menu >
 					<Navigator />
 					<hr class="mt-1 mb-1" />
 					<LoginBox
@@ -115,7 +104,7 @@ pub fn App() -> impl IntoView {
 						<hr class="only-on-mobile sep mb-0 pb-0" />
 					</div>
 				</div>
-				<div class="col-main" class:w-100=move || menu.get() >
+				<div class="col-main" class:w-100=menu >
 					<Router // TODO maybe set base="/web" ?
 						trailing_slash=TrailingSlash::Redirect
 						fallback=|| view! { <NotFound /> }
@@ -123,7 +112,7 @@ pub fn App() -> impl IntoView {
 						<main>
 								<Routes>
 									<Route path="/" view=move || view! { <Redirect path="/web" /> } />
-									<Route path="/web" view=Navigable >
+									<Route path="/web" view=Scrollable >
 										<Route path="" view=move ||
 											if auth.present() {
 												view! { <Redirect path="home" /> }
@@ -131,25 +120,22 @@ pub fn App() -> impl IntoView {
 												view! { <Redirect path="server" /> }
 											}
 										/>
-										<Route path="home" view=move || view! { <TimelinePage name="home" tl=feeds.home /> } />
-										<Route path="server" view=move || view! { <TimelinePage name="server" tl=feeds.global /> } />
-										<Route path="local" view=move || view! { <TimelinePage name="local" tl=feeds.server /> } />
-										<Route path="inbox" view=move || view! { <TimelinePage name="inbox" tl=feeds.private /> } />
+										<Route path="home" view=move || view! { <Feed tl=feeds.home /> } />
+										<Route path="server" view=move || view! { <Feed tl=feeds.global /> } />
+										<Route path="local" view=move || view! { <Feed tl=feeds.server /> } />
+										<Route path="inbox" view=move || view! { <Feed tl=feeds.private /> } />
 
 										<Route path="about" view=AboutPage />
 										<Route path="config" view=move || view! { <ConfigPage setter=set_config /> } />
 										<Route path="dev" view=DebugPage />
 
-										<Route path="actors" view=Outlet > // TODO can we avoid this?
-											<Route path=":id" view=ActorHeader >
-												<Route path="" view=ActorPosts />
-												<Route path="following" view=move || view! { <FollowList outgoing=true /> } />
-												<Route path="followers" view=move || view! { <FollowList outgoing=false /> } />
-											</Route>
-											<Route path="" view=NotFound />
+										<Route path="actors/:id" view=ActorHeader > // TODO can we avoid this?
+											<Route path="" view=ActorPosts />
+											<Route path="following" view=move || view! { <FollowList outgoing=true /> } />
+											<Route path="followers" view=move || view! { <FollowList outgoing=false /> } />
 										</Route>
 
-										<Route path="objects/:id" view=ObjectPage />
+										<Route path="objects/:id" view=ObjectView />
 										// <Route path="/web/activities/:id" view=move || view! { <ActivityPage tl=context_tl /> } />
 
 										<Route path="search" view=SearchPage />
@@ -170,11 +156,11 @@ pub fn App() -> impl IntoView {
 }
 
 #[component]
-fn Navigable() -> impl IntoView {
+fn Scrollable() -> impl IntoView {
 	let location = use_location();
 	let breadcrumb = Signal::derive(move || {
 		let path = location.pathname.get();
-		let mut path_iter = path.split('/').skip(1);
+		let mut path_iter = path.split('/').skip(2);
 		// TODO wow this breadcrumb logic really isnt nice can we make it better??
 		match path_iter.next() {
 			Some("actors") => match path_iter.next() {
@@ -197,12 +183,17 @@ fn Navigable() -> impl IntoView {
 			None => "?".to_string(),
 		}
 	});
+	let element = create_node_ref();
+	let should_load = use_scroll_limit(element, 1750.0);
+	provide_context(should_load);
 	view! {
-		<div class="tl-header w-100 center" >
-			<a class="breadcrumb mr-1" href="javascript:history.back()" ><b>"<<"</b></a>
-			<b>{crate::NAME}</b>" :: "{breadcrumb}
+		<div class="mb-1" node_ref=element>
+			<div class="tl-header w-100 center mb-1">
+				<a class="breadcrumb mr-1" href="javascript:history.back()" ><b>"<<"</b></a>
+				<b>{crate::NAME}</b>" :: "{breadcrumb}
+			</div>
+			<Outlet />
 		</div>
-		<Outlet />
 	}
 }
 
@@ -217,10 +208,32 @@ pub fn NotFound() -> impl IntoView {
 }
 
 #[component]
-pub fn Loader(#[prop(optional)] margin: bool) -> impl IntoView {
+pub fn Loader() -> impl IntoView {
 	view! {
-		<div class="center" class:mt-1={margin}>
+		<div class="center mt-1 mb-1" >
 			<button type="button" disabled>"loading "<span class="dots"></span></button>
 		</div>
 	}
 }
+
+pub fn use_scroll_limit<El, T>(el: El, offset: f64) -> Signal<bool>
+where 
+	El: Into<leptos_use::core::ElementMaybeSignal<T, web_sys::Element>> + Clone + 'static,
+	T: Into<web_sys::Element> + Clone + 'static,
+{
+	let (load, set_load) = create_signal(false);
+	let (_x, y) = use_window_scroll();
+	let UseElementSizeReturn { height, .. } = use_element_size(el);
+	let scroll_state = Signal::derive(move || (y.get(), height.get()));
+	let scroll_state_throttled = signal_throttled(scroll_state, 200.);
+	let _ = watch(
+		move || scroll_state_throttled.get(),
+		move |(y, height), _, _| {
+			let before = load.get();
+			let after = y + offset >= *height;
+			if after != before { set_load.set(after) };
+		},
+		false,
+	);
+	load.into()
+}
diff --git a/web/src/components/login.rs b/web/src/components/login.rs
index ce2a6d10..48353c6c 100644
--- a/web/src/components/login.rs
+++ b/web/src/components/login.rs
@@ -17,8 +17,8 @@ pub fn LoginBox(
 				<input style="float:right" type="submit" value="logout" on:click=move |_| {
 					token_tx.set(None);
 					feeds.reset();
-					feeds.global.more(auth);
-					feeds.public.more(auth);
+					feeds.global.spawn_more(auth);
+					feeds.public.spawn_more(auth);
 				} />
 			</div>
 			<div class:hidden=move || auth.present() >
@@ -45,14 +45,14 @@ pub fn LoginBox(
 						token_tx.set(Some(auth_response.token));
 						// reset home feed and point it to our user's inbox
 						feeds.home.reset(Some(format!("{URL_BASE}/actors/{username}/feed/page")));
-						feeds.home.more(auth);
+						feeds.home.spawn_more(auth);
 						feeds.private.reset(Some(format!("{URL_BASE}/actors/{username}/inbox/page")));
-						feeds.private.more(auth);
+						feeds.private.spawn_more(auth);
 						// reset server feed: there may be more content now that we're authed
 						feeds.global.reset(Some(format!("{URL_BASE}/feed/page")));
-						feeds.global.more(auth);
+						feeds.global.spawn_more(auth);
 						feeds.server.reset(Some(format!("{URL_BASE}/inbox/page")));
-						feeds.server.more(auth);
+						feeds.server.spawn_more(auth);
 					});
 				} >
 					<table class="w-100 align">
diff --git a/web/src/components/mod.rs b/web/src/components/mod.rs
index 76155aa3..c4301994 100644
--- a/web/src/components/mod.rs
+++ b/web/src/components/mod.rs
@@ -16,9 +16,6 @@ pub use user::*;
 mod post;
 pub use post::*;
 
-mod timeline;
-pub use timeline::*;
-
 use leptos::*;
 
 #[component]
diff --git a/web/src/components/object.rs b/web/src/components/object.rs
index ed95f184..e0c55a8f 100644
--- a/web/src/components/object.rs
+++ b/web/src/components/object.rs
@@ -157,7 +157,7 @@ pub fn Object(object: crate::Object) -> impl IntoView {
 	let post = match object.object_type() {
 		// mastodon, pleroma, misskey
 		Ok(apb::ObjectType::Note) => view! {
-			<blockquote class="tl">{post_inner}</blockquote>
+			<article class="tl">{post_inner}</article>
 		}.into_view(),
 		// lemmy with Page, peertube with Video
 		Ok(apb::ObjectType::Document(t)) => view! {
diff --git a/web/src/components/user.rs b/web/src/components/user.rs
index 5252f66d..399702d2 100644
--- a/web/src/components/user.rs
+++ b/web/src/components/user.rs
@@ -26,15 +26,15 @@ pub fn ActorBanner(object: crate::Object) -> impl IntoView {
 			let uid = object.id().unwrap_or_default().to_string();
 			let uri = Uri::web(U::Actor, &uid);
 			let avatar_url = object.icon().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
-			let display_name = object.name().unwrap_or_default().to_string();
 			let username = object.preferred_username().unwrap_or_default().to_string();
 			let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
+			let display_name = object.name().unwrap_or_default().to_string();
 			view! {
 				<div>
 					<table class="align" >
 					<tr>
 						<td rowspan="2" ><a href={uri.clone()} ><img class="avatar avatar-actor" src={avatar_url} /></a></td>
-						<td><b>{display_name}</b></td>
+						<td><b class="displayname"><DisplayName name=display_name /></b></td>
 					</tr>
 					<tr>
 						<td class="top" ><a class="hover" href={uri} ><small>{username}@{domain}</small></a></td>
@@ -49,6 +49,18 @@ pub fn ActorBanner(object: crate::Object) -> impl IntoView {
 	}
 }
 
+#[component]
+fn DisplayName(mut name: String) -> impl IntoView {
+	let custom_emoji_regex = regex::Regex::new(r":\w+:").expect("failed compiling regex pattern");
+	for m in custom_emoji_regex.find_iter(&name.clone()) {
+		// TODO this is a clear unmitigated unsanitized html injection ahahahahaha but accounts 
+		//      with many custom emojis in their names mess with my frontend and i dont want to 
+		//      deal with it rn
+		name = name.replace(m.as_str(), &format!("<u class=\"moreinfo\" title=\"{}\">[::]</u>", m.as_str()));
+	}
+	view! { <span inner_html=name></span> }
+}
+
 #[component]
 pub fn FollowRequestButtons(activity_id: String, actor_id: String) -> impl IntoView {
 	let auth = use_context::<Auth>().expect("missing auth context");
@@ -104,79 +116,6 @@ async fn send_follow_response(kind: apb::ActivityType, target: String, to: Strin
 	}
 }
 
-#[component]
-pub fn ActorHeader(object: crate::Object) -> impl IntoView {
-	let auth = use_context::<Auth>().expect("missing auth context");
-	let avatar_url = object.icon().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
-	let background_url = object.image().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
-	let display_name = object.name().unwrap_or_default().to_string();
-	let username = object.preferred_username().unwrap_or_default().to_string();
-	let created = object.published().ok();
-	let following = object.following_count().unwrap_or(0);
-	let followers = object.followers_count().unwrap_or(0);
-	let statuses = object.statuses_count().unwrap_or(0);
-	let following_me = object.following_me().unwrap_or(false);
-	let followed_by_me = object.followed_by_me().unwrap_or(false);
-	let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
-	let actor_type = object.actor_type().unwrap_or(apb::ActorType::Person);
-	let actor_type_tag = if actor_type == apb::ActorType::Person { None } else {
-		Some(view! { <sup class="ml-s"><small>"["{actor_type.as_ref().to_lowercase()}"]"</small></sup> } )
-	};
-	let uid = object.id().unwrap_or_default().to_string();
-	let web_path = Uri::web(U::Actor, &uid);
-	let _uid = uid.clone();
-	view! {
-			<div 
-				class="banner"
-				style={format!("background: center / cover url({background_url});")}
-			>
-				<div style="height: 10em"></div> // TODO bad way to have it fixed height ewwww
-			</div>
-			<div class="overlap">
-				<table class="pl-2 pr-2 align w-100" style="table-layout: fixed">
-					<tr>
-						<td rowspan=4 style="width: 8em">
-							<img class="avatar avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em"/>
-						</td>
-						<td rowspan=2 class="bottom">
-							<b class="big">{display_name}</b>{actor_type_tag}
-						</td>
-						<td rowspan=2 class="bottom rev" title="statuses">{statuses}" "<span class="emoji">"\u{1f582}"</span></td>
-					</tr>
-					<tr></tr>
-					<tr>
-						<td class="top">
-							<small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small>
-						</td>
-						<td class="rev" title="following">
-							<a class="clean" href={format!("{web_path}/following")}>{following}" "<span class="emoji">"👥"</span></a>
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<DateTime t=created />
-						</td>
-						<td class="rev" title="followers">
-							<a class="clean" href={format!("{web_path}/followers")}>{followers}" "<span class="emoji">"📢"</span></a>
-						</td>
-					</tr>
-				</table>
-				<div class="rev mr-1" class:hidden=move || !auth.present() || auth.user_id() == uid>
-					{if followed_by_me {
-						view! { <code class="color">following</code> }.into_view()
-					} else {
-						view! { <input type="submit" value="follow" on:click=move |_| send_follow_request(_uid.clone()) /> }.into_view()
-					}}
-					{if following_me {
-						Some(view! { <code class="ml-1 color">follows you</code> })
-					} else {
-						None
-					}}
-				</div>
-			</div>
-	}.into_view()
-}
-
 fn send_follow_request(target: String) {
 	let auth = use_context::<Auth>().expect("missing auth context");
 	spawn_local(async move {
diff --git a/web/src/getters.rs b/web/src/getters.rs
new file mode 100644
index 00000000..5b341f89
--- /dev/null
+++ b/web/src/getters.rs
@@ -0,0 +1,11 @@
+
+pub trait Getter<T: Default> {
+	/// .ok().unwrap_or_default()
+	fn want(self) -> T;
+}
+
+impl<T: Default> Getter<T> for apb::Field<T> {
+	fn want(self) -> T {
+		self.ok().unwrap_or_default()
+	}
+}
diff --git a/web/src/lib.rs b/web/src/lib.rs
index 478d0223..18e7dfa8 100644
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -3,8 +3,12 @@ mod app;
 mod components;
 mod page;
 mod config;
+mod objects;
+
+mod actors;
+mod getters;
+mod timeline;
 
-pub mod actors;
 pub use app::App;
 pub use config::Config;
 pub use auth::Auth;
diff --git a/web/src/objects/mod.rs b/web/src/objects/mod.rs
new file mode 100644
index 00000000..1bedf719
--- /dev/null
+++ b/web/src/objects/mod.rs
@@ -0,0 +1 @@
+pub mod view;
diff --git a/web/src/page/object.rs b/web/src/objects/view.rs
similarity index 53%
rename from web/src/page/object.rs
rename to web/src/objects/view.rs
index ea000efd..c126ea16 100644
--- a/web/src/page/object.rs
+++ b/web/src/objects/view.rs
@@ -7,7 +7,7 @@ use crate::prelude::*;
 use apb::{Base, Object};
 
 #[component]
-pub fn ObjectPage() -> impl IntoView {
+pub fn ObjectView() -> impl IntoView {
 	let params = use_params_map();
 	let auth = use_context::<Auth>().expect("missing auth context");
 	let feeds = use_context::<Feeds>().expect("missing feeds context");
@@ -45,39 +45,23 @@ pub fn ObjectPage() -> impl IntoView {
 			Some(obj)
 		}
 	);
-	view! {
-		<div>
-			<Breadcrumb back=true >
-				objects::view
-				<a
-					class="clean ml-1" href="#"
-					class:hidden=move || feeds.context.is_empty()
-					on:click=move |_| {
-						feeds.context.reset(Some(feeds.context.next.get().split('?').next().unwrap_or_default().to_string()));
-						feeds.context.more(auth);
-				}><span class="emoji">
-					"\u{1f5d8}"
-				</span></a>
-			</Breadcrumb>
-			<div class="ma-2" >
-				{move || match object.get() {
-					None => view! { <p class="center"> loading ... </p> }.into_view(),
-					Some(None) => {
-						let raw_id = params.get().get("id").cloned().unwrap_or_default();
-						let uid =  uriproxy::uri(URL_BASE, uriproxy::UriClass::Object, &raw_id);
-						view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
-					},
-					Some(Some(o)) => {
-						let object = o.clone();
-						view!{
-							<Object object=object />
-							<div class="ml-1 mr-1 mt-2">
-								<TimelineReplies tl=feeds.context root=o.id().unwrap_or_default().to_string() />
-							</div>
-						}.into_view()
-					},
-				}}
-			</div>
-		</div>
-	}
+
+	{move || match object.get() {
+		None => view! { <Loader /> }.into_view(),
+		Some(None) => {
+			let raw_id = params.get().get("id").cloned().unwrap_or_default();
+			let uid =  uriproxy::uri(URL_BASE, uriproxy::UriClass::Object, &raw_id);
+			view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
+		},
+		Some(Some(o)) => {
+			let object = o.clone();
+			view!{
+				<Object object=object />
+				<hr class="color ma-2" />
+				<div class="mr-1-r ml-1-r">
+					<Thread tl=feeds.context root=o.id().unwrap_or_default().to_string() />
+				</div>
+			}.into_view()
+		},
+	}}
 }
diff --git a/web/src/page/about.rs b/web/src/page/about.rs
index 9ca5fc22..19f9ab1d 100644
--- a/web/src/page/about.rs
+++ b/web/src/page/about.rs
@@ -5,7 +5,6 @@ use crate::prelude::*;
 pub fn AboutPage() -> impl IntoView {
 	view! {
 		<div>
-			<Breadcrumb>about</Breadcrumb>
 			<div class="mt-s mb-s" >
 				<p><code>μpub</code>" is a micro social network powered by "<a href="">ActivityPub</a></p>
 				<p><i>"the "<a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>" is an ensemble of social networks, which, while independently hosted, can communicate with each other"</i></p>
diff --git a/web/src/page/config.rs b/web/src/page/config.rs
index 22e2feec..8095e088 100644
--- a/web/src/page/config.rs
+++ b/web/src/page/config.rs
@@ -53,7 +53,6 @@ pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
 
 	view! {
 		<div>
-			<Breadcrumb>config</Breadcrumb>
 			<p class="center mt-0"><small>config is saved in your browser local storage</small></p>
 			<p>
 				<span title="embedded video attachments will loop like gifs if this option is enabled">
diff --git a/web/src/page/debug.rs b/web/src/page/debug.rs
index 37bce1bf..455418f9 100644
--- a/web/src/page/debug.rs
+++ b/web/src/page/debug.rs
@@ -40,7 +40,6 @@ pub fn DebugPage() -> impl IntoView {
 
 	view! {
 		<div>
-			<Breadcrumb back=true>devtools</Breadcrumb>
 			<div class="mt-1" >
 				<form on:submit=move|ev| {
 					ev.prevent_default();
diff --git a/web/src/page/mod.rs b/web/src/page/mod.rs
index ee4253ec..8323a807 100644
--- a/web/src/page/mod.rs
+++ b/web/src/page/mod.rs
@@ -7,14 +7,8 @@ pub use config::ConfigPage;
 mod debug;
 pub use debug::DebugPage;
 
-mod object;
-pub use object::ObjectPage;
-
 mod register;
 pub use register::RegisterPage;
 
 mod search;
 pub use search::SearchPage;
-
-mod timeline;
-pub use timeline::TimelinePage;
diff --git a/web/src/page/register.rs b/web/src/page/register.rs
index 9ff13198..076b2e3e 100644
--- a/web/src/page/register.rs
+++ b/web/src/page/register.rs
@@ -14,7 +14,6 @@ pub fn RegisterPage() -> impl IntoView {
 	let (error, set_error) = create_signal(None);
 	view! {
 		<div class="two-col">
-			<Breadcrumb>register</Breadcrumb>
 			<div class="border ma-2 pa-1">
 				<form on:submit=move|ev| {
 					ev.prevent_default();
diff --git a/web/src/page/search.rs b/web/src/page/search.rs
index 8596b79e..e32444ef 100644
--- a/web/src/page/search.rs
+++ b/web/src/page/search.rs
@@ -25,7 +25,6 @@ pub fn SearchPage() -> impl IntoView {
 	);
 
 	view! {
-		<Breadcrumb>search</Breadcrumb>
 		<blockquote class="mt-3 mb-3">
 			<details open>
 				<summary class="mb-2">
diff --git a/web/src/page/timeline.rs b/web/src/page/timeline.rs
deleted file mode 100644
index 7934251e..00000000
--- a/web/src/page/timeline.rs
+++ /dev/null
@@ -1,23 +0,0 @@
-use leptos::*;
-use crate::prelude::*;
-
-#[component]
-pub fn TimelinePage(name: &'static str, tl: Timeline) -> impl IntoView {
-	let auth = use_context::<Auth>().expect("missing auth context");
-	view! {
-		<div>
-			<Breadcrumb back=false>
-				{name}
-				<a class="clean ml-1" href="#" on:click=move |_| {
-					tl.reset(Some(tl.next.get().split('?').next().unwrap_or_default().to_string()));
-					tl.more(auth);
-				}><span class="emoji">
-					"\u{1f5d8}"
-				</span></a>
-			</Breadcrumb>
-			<div class="mt-s mb-s" >
-				<TimelineFeed tl=tl />
-			</div>
-		</div>
-	}
-}
diff --git a/web/src/prelude.rs b/web/src/prelude.rs
index b81aabd2..71288ba3 100644
--- a/web/src/prelude.rs
+++ b/web/src/prelude.rs
@@ -1,14 +1,22 @@
 pub use crate::{
 	Http, Uri,
 	CACHE, URL_BASE,
-	app::Feeds,
+	app::{Feeds, Loader},
 	auth::Auth,
 	page::*,
 	components::*,
 	actors::{
-		view::ActorHeader,
+		header::ActorHeader,
 		follow::FollowList,
 		posts::ActorPosts,
+	},
+	timeline::{
+		Timeline,
+		feed::Feed,
+		thread::Thread,
+	},
+	objects::{
+		view::ObjectView,
 	}
 };
 
diff --git a/web/src/timeline/feed.rs b/web/src/timeline/feed.rs
new file mode 100644
index 00000000..9f636fcc
--- /dev/null
+++ b/web/src/timeline/feed.rs
@@ -0,0 +1,42 @@
+use leptos::*;
+use crate::prelude::*;
+use super::Timeline;
+
+#[component]
+pub fn Feed(tl: Timeline) -> impl IntoView {
+	let auth = use_context::<Auth>().expect("missing auth context");
+	if let Some(auto_scroll) = use_context::<Signal<bool>>() {
+		let _ = leptos::watch(
+			move || auto_scroll.get(),
+			move |new, old, _| {
+				match old {
+					None => tl.spawn_more(auth), // always do it first time
+					Some(old) => if *new && new != old {
+						tl.spawn_more(auth);
+					},
+				}
+			},
+			true,
+		);
+	}
+	view! {
+		<div>
+			<For
+				each=move || tl.feed.get()
+				key=|k| k.to_string()
+				let:id
+			>
+				{match CACHE.get(&id) {
+					Some(i) => view! {
+						<Item item=i sep=true />
+					}.into_view(),
+					None => view! {
+						<p><code>{id}</code>" "[<a href={uri}>go</a>]</p>
+						<hr />
+					}.into_view(),
+				}}
+			</For>
+		</div>
+		{move || if tl.loading.get() { Some(view! { <Loader /> }) } else { None }}
+	}
+}
diff --git a/web/src/components/timeline.rs b/web/src/timeline/mod.rs
similarity index 55%
rename from web/src/components/timeline.rs
rename to web/src/timeline/mod.rs
index 122e2e57..294fc072 100644
--- a/web/src/components/timeline.rs
+++ b/web/src/timeline/mod.rs
@@ -1,8 +1,10 @@
+pub mod feed;
+pub mod thread;
+
 use std::{collections::BTreeSet, pin::Pin, sync::Arc};
 
 use apb::{field::OptionalString, Activity, ActivityMut, Base, Object};
 use leptos::*;
-use leptos_use::{signal_throttled, use_element_size, use_window_scroll, UseElementSizeReturn};
 use crate::prelude::*;
 
 #[derive(Debug, Clone, Copy)]
@@ -38,20 +40,28 @@ impl Timeline {
 		}
 	}
 
-	pub fn more(&self, auth: Auth) {
-		if self.loading.get_untracked() { return }
-		if self.over.get_untracked() { return }
+	pub fn spawn_more(&self, auth: Auth) {
 		let _self = *self;
 		spawn_local(async move {
-			_self.loading.set(true);
-			let res = _self.load_more(auth).await;
-			_self.loading.set(false);
-			if let Err(e) = res {
-				tracing::error!("failed loading posts for timeline: {e}");
-			}
+			_self.more(auth).await
 		});
 	}
 
+	pub fn loading(&self) -> bool {
+		self.loading.get_untracked()
+	}
+
+	pub async fn more(&self, auth: Auth) {
+		if self.loading.get_untracked() { return }
+		if self.over.get_untracked() { return }
+		self.loading.set(true);
+		let res = self.load_more(auth).await;
+		self.loading.set(false);
+		if let Err(e) = res {
+			tracing::error!("failed loading posts for timeline: {e}");
+		}
+	}
+
 	pub async fn load_more(&self, auth: Auth) -> reqwest::Result<()> {
 		use apb::{Collection, CollectionPage};
 
@@ -80,124 +90,6 @@ impl Timeline {
 	}
 }
 
-#[component]
-pub fn TimelineRepliesRecursive(tl: Timeline, root: String) -> impl IntoView {
-	let root_values = move || tl.feed
-		.get()
-		.into_iter()
-		.filter_map(|x| {
-			let document = CACHE.get(&x)?;
-			let (oid, reply) = match document.object_type().ok()? {
-				// if it's a create, get and check created object: does it reply to root?
-				apb::ObjectType::Activity(apb::ActivityType::Create) => {
-					let object = CACHE.get(document.object().id().ok()?)?;
-					(object.id().str()?, object.in_reply_to().id().str()?)
-				},
-
-				// if it's a raw note, directly check if it replies to root
-				apb::ObjectType::Note => (document.id().str()?, document.in_reply_to().id().str()?),
-
-				// if it's anything else, check if it relates to root, maybe like or announce?
-				_ => (document.id().str()?, document.object().id().str()?),
-			};
-			if reply == root {
-				Some((oid, document))
-			} else {
-				None
-			}
-		})
-		.collect::<Vec<(String, crate::Object)>>();
-
-	view! {
-		<For
-			each=root_values
-			key=|(id, _obj)| id.clone()
-			children=move |(id, obj)|
-				view! {
-					<div class="context depth-r">
-						<Item item=obj replies=true />
-						<div class="depth-r">
-							<TimelineRepliesRecursive tl=tl root=id />
-						</div>
-					</div>
-				}
-		/ >
-	}
-}
-
-#[component]
-pub fn TimelineReplies(tl: Timeline, root: String) -> impl IntoView {
-	let auth = use_context::<Auth>().expect("missing auth context");
-
-	view! {
-		<div>
-			<TimelineRepliesRecursive tl=tl root=root />
-		</div>
-		<div class="center mt-1 mb-1" class:hidden=tl.over >
-			<button type="button"
-				prop:disabled=tl.loading 
-				on:click=move |_| tl.more(auth)
-			>
-				{move || if tl.loading.get() {
-					view! { "loading"<span class="dots"></span> }.into_view()
-				} else { "more".into_view() }}
-			</button>
-		</div>
-	}
-}
-
-#[component]
-pub fn TimelineFeed(tl: Timeline) -> impl IntoView {
-	let auth = use_context::<Auth>().expect("missing auth context");
-	let config = use_context::<Signal<crate::Config>>().expect("missing config context");
-	// double view height: preload when 1 screen away
-	let view_height = 2.0 * window()
-		.inner_height()
-		.map_or(500.0, |v| v.as_f64().unwrap_or_default());
-	let scroll_ref = create_node_ref();
-	let UseElementSizeReturn { width: _w, height } = use_element_size(scroll_ref);
-	let (_x, scroll) = use_window_scroll();
-	let scroll_debounced = signal_throttled(scroll, 500.0);
-	let _auto_loader = create_local_resource(
-		move || (scroll_debounced.get(), height.get()),
-		move |(s, h)| async move {
-			if !config.get_untracked().infinite_scroll { return }
-			if h - s < view_height {
-				tl.more(auth);
-			}
-		},
-	);
-	view! {
-		<div ref=scroll_ref>
-			<For
-				each=move || tl.feed.get()
-				key=|k| k.to_string()
-				children=move |id: String| {
-					match CACHE.get(&id) {
-						Some(i) => view! {
-							<Item item=i sep=true />
-						}.into_view(),
-						None => view! {
-							<p><code>{id}</code>" "[<a href={uri}>go</a>]</p>
-							<hr />
-						}.into_view(),
-					}
-				}
-			/ >
-		</div>
-		<div class="center mt-1 mb-1" class:hidden=tl.over >
-			<button type="button"
-				prop:disabled=tl.loading 
-				on:click=move |_| tl.more(auth)
-			>
-				{move || if tl.loading.get() {
-					view! { "loading "<span class="dots"></span> }.into_view()
-				} else { "more".into_view() }}
-			</button>
-		</div>
-	}
-}
-
 async fn process_activities(activities: Vec<serde_json::Value>, auth: Auth) -> Vec<String> {
 	let mut sub_tasks : Vec<Pin<Box<dyn futures::Future<Output = ()>>>> = Vec::new();
 	let mut gonna_fetch = BTreeSet::new();
diff --git a/web/src/timeline/thread.rs b/web/src/timeline/thread.rs
new file mode 100644
index 00000000..cea0177d
--- /dev/null
+++ b/web/src/timeline/thread.rs
@@ -0,0 +1,75 @@
+use apb::{field::OptionalString, Activity, Base, Object};
+use leptos::*;
+use crate::prelude::*;
+use super::Timeline;
+
+#[component]
+pub fn Thread(tl: Timeline, root: String) -> impl IntoView {
+	let auth = use_context::<Auth>().expect("missing auth context");
+	if let Some(auto_scroll) = use_context::<Signal<bool>>() {
+		let _ = leptos::watch(
+			move || auto_scroll.get(),
+			move |new, old, _| {
+				match old {
+					None => tl.spawn_more(auth), // always do it first time
+					Some(old) => if *new && new != old {
+						tl.spawn_more(auth);
+					},
+				}
+			},
+			true,
+		);
+	}
+
+	view! {
+		<div>
+			<FeedRecursive tl=tl root=root />
+		</div>
+		{move || if tl.loading.get() { Some(view! { <Loader /> }) } else { None }}
+	}
+}
+
+#[component]
+fn FeedRecursive(tl: Timeline, root: String) -> impl IntoView {
+	let root_values = move || tl.feed
+		.get()
+		.into_iter()
+		.filter_map(|x| {
+			let document = CACHE.get(&x)?;
+			let (oid, reply) = match document.object_type().ok()? {
+				// if it's a create, get and check created object: does it reply to root?
+				apb::ObjectType::Activity(apb::ActivityType::Create) => {
+					let object = CACHE.get(document.object().id().ok()?)?;
+					(object.id().str()?, object.in_reply_to().id().str()?)
+				},
+
+				// if it's a raw note, directly check if it replies to root
+				apb::ObjectType::Note => (document.id().str()?, document.in_reply_to().id().str()?),
+
+				// if it's anything else, check if it relates to root, maybe like or announce?
+				_ => (document.id().str()?, document.object().id().str()?),
+			};
+			if reply == root {
+				Some((oid, document))
+			} else {
+				None
+			}
+		})
+		.collect::<Vec<(String, crate::Object)>>();
+
+	view! {
+		<For
+			each=root_values
+			key=|(id, _obj)| id.clone()
+			children=move |(id, obj)|
+				view! {
+					<div class="context depth-r">
+						<Item item=obj replies=true />
+						<div class="depth-r">
+							<FeedRecursive tl=tl root=id />
+						</div>
+					</div>
+				}
+		/ >
+	}
+}