diff --git a/components/Navigation.js b/components/Navigation.js
index 8b7ff1f..d6bcf29 100644
--- a/components/Navigation.js
+++ b/components/Navigation.js
@@ -101,10 +101,14 @@ const DownloadPopupTrigger = ({ setShowPopup }) => {
 
 export const DownloadPopup = ({ showPopup, setShowPopup }) => {
   const popupFirstFocus = useRef(null)
+  const [baseUrl, setBaseUrl] = useState("")
 
   useEffect(() => {
     // on popup open, focus on the first link
     popupFirstFocus.current.focus()
+    if (typeof window !== "undefined") {
+      setBaseUrl(window.location.origin)
+    }
   }, [showPopup])
 
   return (
@@ -138,14 +142,14 @@ export const DownloadPopup = ({ showPopup, setShowPopup }) => {
             <a href={ANDROID_URL} ref={popupFirstFocus} tabIndex={1}>
               <img
                 className="object-contain w-full"
-                src="images/other/google-play-fr.png"
+                src={`${baseUrl}/images/other/google-play-fr.png`}
                 alt="télécharger dans Google Play"
               />
             </a>
             <a href={IOS_URL} tabIndex={1}>
               <img
                 className="object-contain w-full"
-                src="images/other/app-store-fr.png"
+                src={`${baseUrl}/images/other/app-store-fr.png`}
                 alt="télécharger dans l'App Store"
               />
             </a>
diff --git a/pages/blog/[blog].js b/pages/blog/[blog].js
index f7cf1ac..8d4f5ef 100644
--- a/pages/blog/[blog].js
+++ b/pages/blog/[blog].js
@@ -1,5 +1,5 @@
-import React from "react"
-import Navigation from "../../components/Navigation"
+import React, { useState } from "react"
+import Navigation, { DownloadPopup } from "../../components/Navigation"
 import Footer from "../../components/Footer"
 import { serialize } from "next-mdx-remote/serialize"
 import { MDXRemote } from "next-mdx-remote"
@@ -11,6 +11,7 @@ import { HiChevronLeft } from "react-icons/hi"
 import styles from "../../style/bloga.module.css"
 
 const Blog = ({ mdxSource, data }) => {
+  const [showPopup, setShowPopup] = useState(false)
   return (
     <>
       <Head>
@@ -20,7 +21,8 @@ const Blog = ({ mdxSource, data }) => {
         <meta property="og:description" content={data.description} />
         <meta property="og:image" content={data.image} />
       </Head>
-      <Navigation />
+      <DownloadPopup showPopup={showPopup} setShowPopup={setShowPopup} />
+      <Navigation showPopup={showPopup} setShowPopup={setShowPopup} />
       <div className="p-4 lg:pt-16 sm:mx-20 xl:mx-auto xl:w-[1100px]">
         <div className="mb-6 text-oz-pink">
           <a
diff --git a/pages/blog/index.js b/pages/blog/index.js
index 75b8465..21fff7e 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -1,22 +1,24 @@
-import React from "react"
+import React, { useState } from "react"
 import fs from "fs"
 import path from "path"
 import matter from "gray-matter"
 import { serialize } from "next-mdx-remote/serialize"
 import Head from "next/head"
-import Navigation from "../../components/Navigation"
+import Navigation, { DownloadPopup } from "../../components/Navigation"
 import Footer from "../../components/Footer"
 import BlogCard from "../../components/BlogCard"
 
 const Index = ({ posts }) => {
+  const [showPopup, setShowPopup] = useState(false)
   return (
     <>
       <Head>
         <title>Blog | Oz Ensemble</title>
         <meta property="og:title" content="Blog | Oz EEnsemble" />
       </Head>
+      <DownloadPopup showPopup={showPopup} setShowPopup={setShowPopup} />
       <div className="flex flex-col min-h-screen">
-        <Navigation />
+        <Navigation showPopup={showPopup} setShowPopup={setShowPopup} />
         <div className="flex-grow py-16 mx-[10%] sm:mx-20 h-auto">
           <div className="w-full mx-auto xl:w-[1100px]">
             <h3 className="mb-16 text-4xl xl:text-5xl font-bold text-center lg:text-4xl text-oz-blue">
