diff --git a/public/assets/logos/BlueCube.avif b/public/assets/logos/BlueCube.avif
new file mode 100644
index 0000000..8079a03
Binary files /dev/null and b/public/assets/logos/BlueCube.avif differ
diff --git a/public/assets/logos/FeathersStudio.avif b/public/assets/logos/FeathersStudio.avif
new file mode 100644
index 0000000..7043950
Binary files /dev/null and b/public/assets/logos/FeathersStudio.avif differ
diff --git a/public/assets/logos/Hugosway.avif b/public/assets/logos/Hugosway.avif
new file mode 100644
index 0000000..a0b3d6b
Binary files /dev/null and b/public/assets/logos/Hugosway.avif differ
diff --git a/public/assets/logos/Klenty.avif b/public/assets/logos/Klenty.avif
new file mode 100644
index 0000000..1d40269
Binary files /dev/null and b/public/assets/logos/Klenty.avif differ
diff --git a/public/assets/logos/ManojExports.avif b/public/assets/logos/ManojExports.avif
new file mode 100644
index 0000000..b0a3903
Binary files /dev/null and b/public/assets/logos/ManojExports.avif differ
diff --git a/public/assets/logos/NavanaTech.avif b/public/assets/logos/NavanaTech.avif
new file mode 100644
index 0000000..055d5d1
Binary files /dev/null and b/public/assets/logos/NavanaTech.avif differ
diff --git a/public/assets/logos/OutFocus.avif b/public/assets/logos/OutFocus.avif
new file mode 100644
index 0000000..30e21dd
Binary files /dev/null and b/public/assets/logos/OutFocus.avif differ
diff --git a/public/assets/logos/StudioFlicks.avif b/public/assets/logos/StudioFlicks.avif
new file mode 100644
index 0000000..843dba0
Binary files /dev/null and b/public/assets/logos/StudioFlicks.avif differ
diff --git a/public/assets/logos/TheFeathers.avif b/public/assets/logos/TheFeathers.avif
new file mode 100644
index 0000000..6d74e49
Binary files /dev/null and b/public/assets/logos/TheFeathers.avif differ
diff --git a/public/assets/logos/Vinzas.avif b/public/assets/logos/Vinzas.avif
new file mode 100644
index 0000000..c67346b
Binary files /dev/null and b/public/assets/logos/Vinzas.avif differ
diff --git a/public/assets/logos/Zoho.avif b/public/assets/logos/Zoho.avif
new file mode 100644
index 0000000..353bd22
Binary files /dev/null and b/public/assets/logos/Zoho.avif differ
diff --git a/src/components/Exp/Story.tsx b/src/components/Exp/Story.tsx
index cabe429..1971e0c 100644
--- a/src/components/Exp/Story.tsx
+++ b/src/components/Exp/Story.tsx
@@ -138,15 +138,14 @@ const story = css`
 	}
 `;
 
-export const Story = ({ description, logo, active }: Experience) => {
+export const Story = ({ title, description, logo, active }: Experience) => {
 	return (
 		<div
 			className={cx(story, "story")}
 			id={active ? "active-story" : undefined}>
 			<div aria-hidden className="story-handle" />
 			<div className="story-content">
-				<img
-					src={`/assets/logos/` + logo}
+				<picture
 					className={cx(
 						"story-logo",
 						css`
@@ -155,10 +154,18 @@ export const Story = ({ description, logo, active }: Experience) => {
 
 							background: rgba(40, 40, 40);
 							border-radius: 100%;
+
+							& img {
+								height: 100%;
+								border-radius: 100%;
+							}
 						`,
-					)}
-				/>
+					)}>
+					<source srcSet={`/assets/logos/` + logo + ".avif"} />
+					<img alt={title + " logo"} src={`/assets/logos/` + logo + ".png"} />
+				</picture>
 				<button
+					title="Close story"
 					className={cx(
 						"closer",
 						css`
diff --git a/src/pages/main/data/experience.tsx b/src/pages/main/data/experience.tsx
index aa7b888..7d6088f 100644
--- a/src/pages/main/data/experience.tsx
+++ b/src/pages/main/data/experience.tsx
@@ -31,7 +31,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "TheFeathers.png",
+		logo: "TheFeathers",
 	},
 	{
 		title: "StudioFlicks",
@@ -57,7 +57,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "StudioFlicks.png",
+		logo: "StudioFlicks",
 	},
 	{
 		title: "Vinzas",
@@ -91,7 +91,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "Vinzas.png",
+		logo: "Vinzas",
 	},
 	{
 		title: "Blue Cube",
@@ -123,7 +123,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "BlueCube.png",
+		logo: "BlueCube",
 	},
 	{
 		title: "OutFocus Magazine",
@@ -153,7 +153,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "OutFocus.png",
+		logo: "OutFocus",
 	},
 	{
 		title: "Zoho",
@@ -183,7 +183,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "Zoho.png",
+		logo: "Zoho",
 	},
 	{
 		title: "Manoj Exports",
@@ -210,7 +210,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "ManojExports.png",
+		logo: "ManojExports",
 	},
 	{
 		title: "Klenty",
@@ -243,7 +243,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "Klenty.png",
+		logo: "Klenty",
 	},
 	{
 		title: "Hugo's Way",
@@ -274,7 +274,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "Hugosway.png",
+		logo: "Hugosway",
 	},
 	{
 		title: "Navana Tech",
@@ -304,7 +304,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "NavanaTech.png",
+		logo: "NavanaTech",
 	},
 	{
 		title: "Feathers Studio",
@@ -332,7 +332,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "FeathersStudio.png",
+		logo: "FeathersStudio",
 	},
 ].reverse();