diff --git a/src/pages/articles/_article.css b/src/pages/articles/_article.css
index 783a5946..1cfd084b 100644
--- a/src/pages/articles/_article.css
+++ b/src/pages/articles/_article.css
@@ -23,7 +23,7 @@
 	}
 
 	@media (width <= 960px) {
-		gap: 2rem 0;
+		gap: 0;
 		padding-inline: 1rem;
 	}
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c355d542..6c16f754 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,10 @@
 ---
-import { Picture } from "astro:assets";
 import BaseLayout from "@modules/core/components/baseLayout/BaseLayout.astro";
 import LatestArticles from "@modules/core/components/latestArticles/LatestArticles.astro";
 import MyWork from "@modules/home/components/myWork/MyWork.astro";
 import Testimonials from "@modules/home/components/testimonials/Testimonials.astro";
 import Welcome from "@modules/home/components/welcome/Welcome.astro";
 
-// table of contents (details on mobile)
 // check responsive
 // todo: add signature email
 // todo: add small transitions & animations
diff --git a/src/ui/assets/images/svg-components/cookie/Cookie.tsx b/src/ui/assets/images/svg-components/cookie/Cookie.tsx
index ca3184ab..80df66aa 100644
--- a/src/ui/assets/images/svg-components/cookie/Cookie.tsx
+++ b/src/ui/assets/images/svg-components/cookie/Cookie.tsx
@@ -18,6 +18,7 @@ export const Cookie = ({ fill = "currentColor", title = "Cookie", classNames, ..
 			y="0px"
 			viewBox="0 0 120.23 122.88"
 			xmlSpace="preserve"
+			role="img"
 			fill={fill}
 			{...props}
 		>
diff --git a/src/ui/assets/images/svg-components/infinite/Infinite.tsx b/src/ui/assets/images/svg-components/infinite/Infinite.tsx
index 71ddafe0..de1b0210 100644
--- a/src/ui/assets/images/svg-components/infinite/Infinite.tsx
+++ b/src/ui/assets/images/svg-components/infinite/Infinite.tsx
@@ -16,6 +16,7 @@ export const Infinite = ({ fill = "currentColor", title = "Loading...", classNam
 			height="23.1"
 			width="55"
 			preserveAspectRatio="xMidYMid meet"
+			role="img"
 			fill={fill}
 			{...props}
 		>
diff --git a/src/ui/assets/images/svg-components/leftArrow/LeftArrow.tsx b/src/ui/assets/images/svg-components/leftArrow/LeftArrow.tsx
index 4fd9d7e3..9a44764d 100644
--- a/src/ui/assets/images/svg-components/leftArrow/LeftArrow.tsx
+++ b/src/ui/assets/images/svg-components/leftArrow/LeftArrow.tsx
@@ -8,7 +8,7 @@ interface LeftArrowProps extends SVGProps<SVGSVGElement> {
 
 export const LeftArrow = ({ fill = "currentColor", title = "Arrow", classNames, ...props }: LeftArrowProps) => {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" className={clsx(classNames)} {...props}>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" role="img" className={clsx(classNames)} {...props}>
 			<title>{title}</title>
 			<g id="Left">
 				<polygon
diff --git a/src/ui/assets/images/svg-components/pin/Pin.tsx b/src/ui/assets/images/svg-components/pin/Pin.tsx
index f3e16ea3..e87e106d 100644
--- a/src/ui/assets/images/svg-components/pin/Pin.tsx
+++ b/src/ui/assets/images/svg-components/pin/Pin.tsx
@@ -9,7 +9,7 @@ interface PinProps extends SVGProps<SVGSVGElement> {
 
 export const Pin = ({ fill, title = "Pin", classNames, ...props }: PinProps) => {
 	return (
-		<svg viewBox="-4 0 36 36" className={clsx(classNames)} {...props}>
+		<svg viewBox="-4 0 36 36" role="img" className={clsx(classNames)} {...props}>
 			<title>{title}</title>
 			<path
 				fill={fill}
diff --git a/src/ui/assets/images/svg/chevron-down.svg b/src/ui/assets/images/svg/chevron-down.svg
new file mode 100644
index 00000000..092597fe
--- /dev/null
+++ b/src/ui/assets/images/svg/chevron-down.svg
@@ -0,0 +1,5 @@
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 407.437 407.437" xml:space="preserve">
+	<title>Chevron</title>
+<polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
+</svg>
\ No newline at end of file
diff --git a/src/ui/assets/images/svg/double-quote.svg b/src/ui/assets/images/svg/double-quote.svg
index 241fe636..0039ade3 100644
--- a/src/ui/assets/images/svg/double-quote.svg
+++ b/src/ui/assets/images/svg/double-quote.svg
@@ -1,5 +1,4 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
-     xmlns="http://www.w3.org/2000/svg">
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
     <title>Double Quote</title>
     <rect width="48" height="48" fill="white" fill-opacity="0.01"/>
     <path fill-rule="evenodd" clip-rule="evenodd"
diff --git a/src/ui/assets/images/svg/left-arrow.svg b/src/ui/assets/images/svg/left-arrow.svg
index a81f84ac..b45db10b 100644
--- a/src/ui/assets/images/svg/left-arrow.svg
+++ b/src/ui/assets/images/svg/left-arrow.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" role="img">
     <title>Arrow</title>
     <g id="Left">
         <polygon
diff --git a/src/ui/assets/images/svg/logo.svg b/src/ui/assets/images/svg/logo.svg
index f1bebfd0..77bd65c7 100644
--- a/src/ui/assets/images/svg/logo.svg
+++ b/src/ui/assets/images/svg/logo.svg
@@ -1,4 +1,4 @@
-<svg class="logo --is-clickable" width="81.148mm" height="8.9535mm" version="1.1" viewBox="0 0 81.148 8.9535">
+<svg class="logo --is-clickable" width="81.148mm" height="8.9535mm" version="1.1" viewBox="0 0 81.148 8.9535" role="img">
     <title>Logo</title>
     <g transform="translate(-17.097 -22.174)">
         <g transform="scale(.26458)" aria-label="Bianca" style="white-space: pre;">
diff --git a/src/ui/assets/images/svg/zoom-in.svg b/src/ui/assets/images/svg/zoom-in.svg
index 1f3dbc0a..bd0ba860 100644
--- a/src/ui/assets/images/svg/zoom-in.svg
+++ b/src/ui/assets/images/svg/zoom-in.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" id="zoom-in">
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" id="zoom-in" role="img">
     <title>Zoom in</title>
     <g fill="none" fill-rule="evenodd" stroke="#232326" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
        transform="translate(1 1)">
diff --git a/src/ui/assets/images/svg/zoom-out.svg b/src/ui/assets/images/svg/zoom-out.svg
index 95bfa717..48075f15 100644
--- a/src/ui/assets/images/svg/zoom-out.svg
+++ b/src/ui/assets/images/svg/zoom-out.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" id="zoom-out">
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" id="zoom-out" role="img">
     <title>Zoom out</title>
     <g fill="none" fill-rule="evenodd" stroke="#232326" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
        transform="translate(1 1)">
diff --git a/src/ui/modules/article/components/tableOfContents/TableOfContents.astro b/src/ui/modules/article/components/tableOfContents/TableOfContents.astro
index 33222f90..d9d26efe 100644
--- a/src/ui/modules/article/components/tableOfContents/TableOfContents.astro
+++ b/src/ui/modules/article/components/tableOfContents/TableOfContents.astro
@@ -10,14 +10,17 @@ const { tableOfContents } = Astro.props as TableOfContentsProps;
 ---
 <aside class="article__table-of-contents__wrapper" role="complementary">
     <nav class="article__table-of-contents__nav">
-        <h5>Table of Contents</h5>
-        <ul class="article__table-of-contents__list flex column-nowrap">
-            {tableOfContents.map(({ id, heading, level}, index) => (
-                <li class="article__table-of-contents__item" style={`--inline-level: ${level};`}>
-                    <a class="article__table-of-contents__item__link flex align-center --underline-on-hover --is-clickable" href={`#${id}`} style={`--for: --section-${index + 1}`}>{heading}</a>
-                </li>
-            ))}
-        </ul>
+        <details class="article__table-of-contents__details" open>
+            <summary class="article__table-of-contents__summary">
+                <h5>Table of Contents</h5></summary>
+                <ul class="article__table-of-contents__list flex column-nowrap">
+                    {tableOfContents.map(({ id, heading, level}, index) => (
+                        <li class="article__table-of-contents__item" style={`--inline-level: ${level};`}>
+                            <a class="article__table-of-contents__item__link flex align-center --underline-on-hover --is-clickable" href={`#${id}`} style={`--for: --section-${index + 1}`}>{heading}</a>
+                        </li>
+                    ))}
+                </ul>
+        </details>
     </nav>
 </aside>
 
diff --git a/src/ui/modules/article/components/tableOfContents/table-of-contents.css b/src/ui/modules/article/components/tableOfContents/table-of-contents.css
index b7c22319..473347a1 100644
--- a/src/ui/modules/article/components/tableOfContents/table-of-contents.css
+++ b/src/ui/modules/article/components/tableOfContents/table-of-contents.css
@@ -1,4 +1,5 @@
 .article__table-of-contents__nav {
+	--animation-range: entry 70cqh;
 	animation: fade-in linear forwards;
 	animation-range: var(--animation-range);
 	animation-timeline: view();
@@ -8,22 +9,82 @@
 	opacity: 0;
 	padding: 0.25rem 1rem;
 	position: absolute;
-	--animation-range: entry 70cqh;
 	translate: calc(-50% + 1rem) 0;
 	width: max-content;
 
 	&.--is-visible .article__table-of-contents__item {
 		translate: 0 0;
 	}
+
+	@media (width <= 960px) {
+		position: relative;
+		translate: 0;
+		left: auto;
+		opacity: 1;
+		width: 100%;
+	}
 }
 
 .article__table-of-contents__wrapper {
 	position: sticky;
 	top: calc(var(--header-height) + 2rem);
+
+	@media (width <= 960px) {
+		position: relative;
+		top: 0;
+		width: 100%;
+		margin-block: 1rem;
+	}
+}
+
+.article__table-of-contents__summary {
+	margin-block-end: 0.5rem;
+	position: relative;
+	transition: background-position .2s;
+
+	&::before {
+		content: "";
+		background: url("/src/ui/assets/images/svg/chevron-down.svg") no-repeat right center / 1rem;
+		position: absolute;
+		right: 0;
+		top: 50%;
+		translate: 0 -50%;
+		transition: transform .2s;
+		width: 1rem;
+		height: 1rem;
+		visibility: hidden;
+	}
+
+	@media (width <= 960px) {
+		&::before {
+			visibility: visible;
+		}
+	}
+}
+
+.article__table-of-contents__details {
+	height: 1.5rem;
+	transition: height 0.2s;
+
+	&[open] {
+		height: auto;
+
+		@media (width <= 960px) {
+			overflow: clip;
+		}
+	}
+}
+
+.article__table-of-contents__details[open] .article__table-of-contents__summary::before {
+	transform: translateY(-50%) rotate(0.5turn);
 }
 
 .article__table-of-contents__list {
 	gap: 0.25rem 0;
+
+	@media (width <= 960px) {
+		justify-content: flex-start;
+	}
 }
 
 .article__table-of-contents__item {
@@ -32,6 +93,11 @@
 	transition: translate calc(0.25s * var(--inline-level));
 	translate: 100px 0;
 	width: fit-content;
+
+	@media (width <= 960px) {
+		transition: none;
+		translate: 0;
+	}
 }
 
 .article__table-of-contents__item__link {
diff --git a/src/ui/styles/base/base.css b/src/ui/styles/base/base.css
index 74fa6da5..0e2f5ca9 100644
--- a/src/ui/styles/base/base.css
+++ b/src/ui/styles/base/base.css
@@ -49,8 +49,12 @@
 		min-height: 100dvh;
 		width: 100%;
 
-		&:not(.--is-projects) {
+		&:not(.--is-projects, .--is-article) {
 			margin: calc(var(--header-height)) auto 0;
+
+			@media (width <= 960px) {
+				margin: 0 auto;
+			}
 		}
 	}
 
@@ -74,6 +78,13 @@
 
 	summary {
 		-webkit-tap-highlight-color: transparent;
+		list-style: none;
+		pointer-events: none;
+
+		@media (width <= 960px) {
+			cursor: pointer;
+			pointer-events: auto;
+		}
 	}
 
 	mark {