diff --git a/frontend/src/lib/components/projects-popup.svelte b/frontend/src/lib/components/projects-popup.svelte
index 015a113..4395c10 100644
--- a/frontend/src/lib/components/projects-popup.svelte
+++ b/frontend/src/lib/components/projects-popup.svelte
@@ -112,7 +112,7 @@
 
   <div class="project-popup-container">
     <!-- Information -->
-    <div class="prout">
+    <div>
       <h1 class="slide-title">{title}</h1>
       <div class="project-popup-img-container">
         <img class="project-popup-img" src={picture} alt="Project Popup" />
@@ -132,9 +132,16 @@
           <p class="project-popup-subtitle slide-aftericon">{type_project}</p>
         </div>
       </div>
+      <div class="popup-mobile">
+        <div class="popup-subtitle-container">
+          <SvgIcon size="35" path={mdiTextBox} type="mdi" />
+          <p class="slide-subtitle slide-aftericon">Description</p>
+        </div>
+        <p class="slide-subtitle project-popup-text">{description}</p>
+      </div>
       <!-- Links -->
       {#if report_link != null || github_link != null || archive_link != null || application_link != null}
-        <div class="slide-subtitle-container">
+        <div class="popup-subtitle-container">
           <SvgIcon size="35" path={mdiLink} type="mdi" />
           <p class="slide-subtitle slide-aftericon">Links</p>
         </div>
@@ -183,11 +190,11 @@
       {/if}
       <!-- Tags -->
       {#if filteredTags.length != 0}
-        <div class="slide-subtitle-container">
+        <div class="popup-subtitle-container">
           <SvgIcon size="35" path={mdiTag} type="mdi" />
           <p class="slide-subtitle slide-aftericon">Tags</p>
         </div>
-        <div class="project-popup-link-container">
+        <div class="project-popup-link-container project-popup-tag-container">
           {#each filteredTags as tag}
             <Pill
               name={tag.lang}
@@ -201,8 +208,8 @@
       {/if}
     </div>
     <!-- Text -->
-    <div>
-      <div class="slide-subtitle-container">
+    <div class="popup-desktop">
+      <div class="popup-subtitle-container">
         <SvgIcon size="35" path={mdiTextBox} type="mdi" />
         <p class="slide-subtitle slide-aftericon">Description</p>
       </div>
diff --git a/frontend/src/lib/components/projects.svelte b/frontend/src/lib/components/projects.svelte
index 83ae3b4..257c929 100644
--- a/frontend/src/lib/components/projects.svelte
+++ b/frontend/src/lib/components/projects.svelte
@@ -15,7 +15,6 @@
     formatMonth(data.date_done).charAt(0).toUpperCase() +
     formatMonth(data.date_done).slice(1);
   const project_type = data.type_project;
-  let picture;
 
   onMount(async () => {
     popupDatas.update((value) => {
@@ -33,7 +32,7 @@
     <div class="slide-text-container">
       <h1 class="slide-title">{title}</h1>
       <div class="slide-img-mobile-container">
-        <img class="slide-img-mobile" src={picture} alt="Projects" />
+        <img class="slide-img-mobile" src={data.picture_name} alt="Projects" />
       </div>
       <div class="slide-subtitle-container">
         <SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
diff --git a/frontend/src/lib/css/project-popup.css b/frontend/src/lib/css/project-popup.css
index 5b5b3f6..d3bb1aa 100644
--- a/frontend/src/lib/css/project-popup.css
+++ b/frontend/src/lib/css/project-popup.css
@@ -1,17 +1,139 @@
-#project-popup-main {
-    height: 80dvh;
-    /* 100-height/2 */
-    top: calc(10vh - 1.5rem);
-    width: 60dvw;
-    /* 100-width/2 */
-    left: calc(20vw - 1.5rem);
-    border-radius: 0.4rem;
-    box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
-    position: fixed;
-    background-color: var(--color-background);
-    z-index: 5;
-    padding: 1.5rem;
-    visibility: hidden;
+@media screen and (min-width: 1000px) {
+    #project-popup-main {
+        height: 80dvh;
+        /* 100-height/2 */
+        top: calc(10vh - 1.5rem);
+        width: 60dvw;
+        /* 100-width/2 */
+        left: calc(20vw - 1.5rem);
+        border-radius: 0.4rem;
+        box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
+        position: fixed;
+        background-color: var(--color-background);
+        z-index: 5;
+        padding: 1.5rem;
+        visibility: hidden;
+    }
+
+    .project-popup-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    /* style for child of container */
+    .project-popup-container>div {
+        width: 50%;
+        margin: 0.5rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 80dvh;
+    }
+
+    .project-popup-img {
+        max-height: 16rem;
+        max-width: 40dvh;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        object-fit: cover;
+    }
+
+    .popup-mobile {
+        display: none;
+    }
+
+    .project-popup-subinfo-container {
+        display: flex;
+        flex-direction: row;
+        border-radius: 0.4rem;
+        box-shadow: rgba(50, 50, 93, 0.15) 0px 13px 27px -2px, rgba(0, 0, 0, 0.2) 0px 8px 16px -4px;
+        padding: 0.4rem;
+        justify-content: center;
+        width: fit-content;
+        margin-bottom: 1rem;
+    }
+
+    .popup-subtitle-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    #project-popup-main {
+        height: 87dvh;
+        top: calc(13dvh - 1.5rem);
+        width: 100dvw;
+        border-top-left-radius: 1rem;
+        border-top-right-radius: 1rem;
+        box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
+        position: fixed;
+        background-color: var(--color-background);
+        z-index: 5;
+        padding-top: 1.5rem;
+        visibility: hidden;
+    }
+
+    .project-popup-container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* style for child of container */
+    .project-popup-container>div {
+        /* 100% - paddingMain - paddingDiv - marginDiv*/
+        width: calc(100dvw - 2*(3rem));
+        padding-left: 3rem;
+        padding-right: 3rem;
+        height: 87dvh;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .project-popup-img {
+        max-width: 76dvw;
+        max-height: 100%;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        object-fit: cover;
+    }
+
+    .popup-desktop {
+        display: none;
+    }
+
+    .project-popup-subinfo-container {
+        display: flex;
+        flex-direction: row;
+        border-radius: 0.4rem;
+        box-shadow: rgba(50, 50, 93, 0.15) 0px 13px 27px -2px, rgba(0, 0, 0, 0.2) 0px 8px 16px -4px;
+        padding: 0.4rem;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+
+    .popup-subtitle-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-top: 0.8rem;
+        padding-bottom: 0.4rem;
+    }
+
+    .project-popup-tag-container {
+        margin-bottom: 3rem !important;
+    }
+}
+
+.project-popup-link-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 0.25rem;
 }
 
 #project-popup-background {
@@ -56,43 +178,6 @@
 .project-popup-img-container {
     display: flex;
     justify-content: center;
-    height: 30dvh;
-}
-
-.project-popup-img {
-    max-width: 20dvw;
-    /* Because the width of the popup is 50dvw and the picture has to take maximum half of the popup*/
-    max-height: 100%;
-    margin-top: 1.5rem;
-    margin-bottom: 1rem;
-    object-fit: cover;
-}
-
-.project-popup-container {
-    display: flex;
-    flex-direction: row;
-}
-
-/* style for child of container */
-.project-popup-container>div {
-    width: 50%;
-    margin: 0.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    overflow-y : scroll;
-    overflow-x: hidden;
-    height: 80dvh;
-}
-
-.project-popup-subinfo-container {
-    display: flex;
-    flex-direction: row;
-    border-radius: 0.4rem;
-    box-shadow: rgba(50, 50, 93, 0.15) 0px 13px 27px -2px, rgba(0, 0, 0, 0.2) 0px 8px 16px -4px;
-    padding: 0.4rem;
-    justify-content: center;
-    width: fit-content;
-    margin-bottom: 1rem;
 }
 
 .project-popup-subinfo-container>div {
@@ -105,13 +190,6 @@
     text-align: justify;
 }
 
-.project-popup-link-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-bottom: 0.25rem;
-}
-
 .project-popup-subtitle {
     color: var(--color-text);
     font-family: 'Gabarito', sans-serif;