diff --git a/src/components/ArticlesList.astro b/src/components/ArticlesList.astro
new file mode 100644
index 0000000..896999a
--- /dev/null
+++ b/src/components/ArticlesList.astro
@@ -0,0 +1,13 @@
+---
+import { useTranslation, getLanguageFromURL } from "@i18n/utils";
+import { filterArticlesByPageLang, formatToArticleBlocks } from "@utils/article";
+import List from "@components/ArticlesList";
+import { getArticleList } from "@root/queries/article";
+
+const t = useTranslation(Astro);
+const pageLang = getLanguageFromURL(Astro.url.pathname);
+const articles = (await getArticleList()).flatMap((a) => filterArticlesByPageLang(a.translations, pageLang));
+const articleBlocks = formatToArticleBlocks(articles);
+---
+
+<List client:load i18n={{ "articles.empty": t("articles.empty") }} articles={articleBlocks} pageLang={pageLang} />
diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx
index 9779986..a1be08a 100644
--- a/src/components/ArticlesList/ArticlesList.tsx
+++ b/src/components/ArticlesList/ArticlesList.tsx
@@ -1,19 +1,16 @@
 import type { Component } from "solid-js";
 import { createSignal, createEffect, For } from "solid-js";
 import { search, selectedTags, setCount } from "@stores/searchStore";
-import SearchInput from "./SearchInput";
-import TagsList from "./TagsList";
 import ArticleItem from "@components/ArticleItem";
-import "./ArticlesList.scss";
 import { ArticleQuery } from "@/src/graphql/graphql";
+import "./ArticlesList.scss";
 
-type UiStringsType = { "articles.empty": string; "input.search": string };
+type UiStringsType = { "articles.empty": string };
 
 type ArticlesBlockType = Record<string, ArticleQuery["article"][0]["translations"]>;
 
 type ArticlesListProps = {
 	articles: ArticlesBlockType;
-	tags: string[];
 	pageLang: string;
 	i18n: UiStringsType;
 };
@@ -35,9 +32,7 @@ const ArticlesList: Component<ArticlesListProps> = (props) => {
 		params: { search: string; tags?: string[] };
 	}): ArticlesBlockType => {
 		const filter = (
-			cb: (
-				articles: ArticleQuery["article"][0]["translations"]
-			) => ArticleQuery["article"][0]["translations"]
+			cb: (articles: ArticleQuery["article"][0]["translations"]) => ArticleQuery["article"][0]["translations"]
 		) => {
 			return Object.fromEntries(
 				Object.keys(props.articles)
@@ -69,8 +64,6 @@ const ArticlesList: Component<ArticlesListProps> = (props) => {
 
 	return (
 		<>
-			<SearchInput i18n={{ "input.search": props.i18n["input.search"] }} />
-			<TagsList tags={props.tags} />
 			<div itemscope itemtype="http://schema.org/Blog" class="articles-list">
 				{!isEmpty() ? (
 					<For each={sortByYears(articles())}>
diff --git a/src/components/ProjectsList.astro b/src/components/ProjectsList.astro
index 39e5e13..14400c1 100644
--- a/src/components/ProjectsList.astro
+++ b/src/components/ProjectsList.astro
@@ -1,8 +1,14 @@
 ---
+import ProjectItem from "@components/ProjectItem.astro";
+import { getLanguageFromURL } from "../i18n/utils";
+import { getProjectList } from "../queries";
+
+const pageLang = getLanguageFromURL(Astro.url.pathname);
+const projects = await getProjectList(pageLang);
 ---
 
 <div>
-	<slot />
+	{projects.map((data) => <ProjectItem data={data} />)}
 </div>
 
 <style>
diff --git a/src/components/TagsList.astro b/src/components/TagsList.astro
new file mode 100644
index 0000000..c67a362
--- /dev/null
+++ b/src/components/TagsList.astro
@@ -0,0 +1,8 @@
+---
+import { getTagList } from "@root/queries/tag";
+import List from "@components/ArticlesList/TagsList";
+
+const tags = (await getTagList()).map((t) => t.title);
+---
+
+<List client:load tags={tags} />
diff --git a/src/templates/Articles.astro b/src/templates/Articles.astro
index 11a9802..1361ff8 100644
--- a/src/templates/Articles.astro
+++ b/src/templates/Articles.astro
@@ -1,18 +1,14 @@
 ---
 import { useTranslation, getLanguageFromURL } from "@i18n/utils";
-import { filterArticlesByPageLang, formatToArticleBlocks } from "@utils/article";
 import PageLayout from "@layouts/default.astro";
 import PageHeading from "@components/PageHeading.astro";
-import ArticlesList from "@root/components/ArticlesList";
-import { getTagList } from "@root/queries/tag";
-import { getArticleList } from "@root/queries/article";
+import TagsList from "@components/TagsList.astro";
+import SearchInput from "@components/ArticlesList/SearchInput";
+import ArticlesList from "@components/ArticlesList.astro";
 
 const t = useTranslation(Astro);
 const pageLang = getLanguageFromURL(Astro.url.pathname);
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
-const tags = (await getTagList()).map((t) => t.title);
-const articles = (await getArticleList()).flatMap((a) => filterArticlesByPageLang(a.translations, pageLang));
-const articleBlocks = formatToArticleBlocks(articles);
 ---
 
 <PageLayout
@@ -23,12 +19,8 @@ const articleBlocks = formatToArticleBlocks(articles);
 >
 	<PageHeading heading={t("pageTitle.articles")} description={t("pageDescription.articles")} />
 	<section>
-		<ArticlesList
-			client:load
-			i18n={{ "articles.empty": t("articles.empty"), "input.search": t("input.search") }}
-			articles={articleBlocks}
-			tags={tags}
-			pageLang={pageLang}
-		/>
+		<SearchInput i18n={{ "input.search": t("input.search") }} client:load />
+		<TagsList />
+		<ArticlesList />
 	</section>
 </PageLayout>
diff --git a/src/templates/Projects.astro b/src/templates/Projects.astro
index 6bca3fd..a82c44b 100644
--- a/src/templates/Projects.astro
+++ b/src/templates/Projects.astro
@@ -1,21 +1,16 @@
 ---
 import PageLayout from "@layouts/default.astro";
 import ProjectsList from "@components/ProjectsList.astro";
-import ProjectItem from "@components/ProjectItem.astro";
 import PageHeading from "@components/PageHeading.astro";
 import { getLanguageFromURL, useTranslation } from "@i18n/utils";
-import { getProjectList } from "../queries/project";
 
 const t = useTranslation(Astro);
 const pageLang = getLanguageFromURL(Astro.url.pathname);
-const projects = await getProjectList(pageLang);
 ---
 
 <PageLayout noIndex lang={pageLang} title={t("pageTitle.projects")} description={t("pageDescription.projects")}>
 	<PageHeading heading={t("pageTitle.projects")} description={t("pageDescription.projects")} />
 	<section>
-		<ProjectsList>
-			{projects.map((data) => <ProjectItem data={data} />)}
-		</ProjectsList>
+		<ProjectsList />
 	</section>
 </PageLayout>