diff --git a/src/components/widgets/linking/openShareLinkModal.vue b/src/components/widgets/linking/openShareLinkModal.vue
new file mode 100644
index 0000000..4cdedff
--- /dev/null
+++ b/src/components/widgets/linking/openShareLinkModal.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+      <ImageModal
+        :show-modal="modalId !== null"
+        :modal-content="modalContent"
+        @close="modalId = null"
+      />
+    </div>
+  </template>
+  
+  <script>
+  import ImageModal from '@/components/widgets/modals/UploadModal.vue';
+  import axiosService from '@/services/axiosService';
+  
+  export default {
+    components: {
+      ImageModal,
+    },
+    data() {
+      return {
+        images: [],
+        showInfoBox: false,
+        modalId: null,
+        page: 1,
+        loading: false,
+        hasMore: true,
+        imageType: 'pfp',
+        userid: '',
+        modalContent: {},
+      };
+    },
+    mounted() {
+      try {
+        this.imgId = this.$route.params.imgId;
+        if (this.imgId) {
+          this.openModal(this.imgId);
+        }
+      } catch (error) {
+        console.log("Error while mounting:", error);
+      }
+    },
+    methods: {
+      async openModal(imgId) {
+        this.modalId = imgId;
+        try {
+          const modalupload = await axiosService.getImageDetails(this.modalId);
+          if (!modalupload) {
+            console.log("image not found")
+            return;
+          }
+          const newModalContent = modalupload.upload;
+          let authorInfo = null;
+          try {
+            authorInfo = await axiosService.getUser('userId', newModalContent.authorId);
+          } catch (error) {
+            console.error("Error fetching author with id:", newModalContent.authorId);
+          }
+  
+          this.modalContent = {
+            id: newModalContent.id,
+            title: newModalContent.title,
+            description: newModalContent.description,
+            type: newModalContent.type,
+            tags: newModalContent.tags,
+            imgId: imgId,
+            authorId: newModalContent.authorId || null,
+            username: authorInfo?.user?.username || null,
+            uploadedDate: newModalContent.uploadedDate,
+          };
+        } catch (error) {
+          console.error("Error fetching image details:", error);
+          this.$router.push('/');
+        }
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/components/widgets/modals/UploadModal.vue b/src/components/widgets/modals/UploadModal.vue
index 984ec5e..0303ee2 100644
--- a/src/components/widgets/modals/UploadModal.vue
+++ b/src/components/widgets/modals/UploadModal.vue
@@ -30,7 +30,11 @@
 
 
                 <div class="information-box">
-                    <h3 class="img-title text-set-large">{{ modalContent.title }}</h3>
+                    <div class="title-container">
+                        <h3 class="img-title text-set-large title-ctn-item">{{ modalContent.title }}</h3>
+                        <div @click="shareClick" class="share-container"><span
+                                class="material-symbols-outlined title-ctn-item share noselect">share</span></div>
+                    </div>
                     <h3 class="img-id text-set-middle-sub">{{ modalContent.imgId }}</h3>
                 </div>
                 <hr>
@@ -58,7 +62,10 @@
             <button v-if="canDelete" id="delete-button" @click="handleDelete">Delete</button>
             <button id="downloadButton" @click="downloadImage">Download</button>
         </div>
+        <div id="snackbar">Copied to Clipboard</div>
+
     </div>
+
 </template>
 
 <script>
@@ -94,6 +101,7 @@ export default {
             isImageMagnified: false,
             isRounded: false,
             isAdmin: false,
+            imgId: '',
 
 
         };
@@ -142,12 +150,20 @@ export default {
             handler(newVal) {
                 if (newVal && newVal.imgId) {
                     this.imageURL = `${baseURL}/image/view/${newVal.imgId}`;
+                    this.imgId = newVal.imgId
                 }
             }
         }
     },
 
     methods: {
+        shareClick() {
+            var x = document.getElementById("snackbar");
+            navigator.clipboard.writeText(`${window.location}uploads/${this.imgId}`);
+            x.className = "show";
+
+            setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
+        },
         toggleImageSize() {
             this.isImageMagnified = !this.isImageMagnified;
         },
@@ -158,65 +174,76 @@ export default {
             };
         },
         closeModal() {
-            this.$emit('close');
-        },
+    this.imgId = this.$route.params.imgId;
+    
+    if (this.imgId) {
+        this.$router.push('/');
+    }
+    
 
-        async handleDelete() {
-            let confirmMessage = '';
-            if (this.modalContent.type === 'pfp') {
-                confirmMessage = 'Are you sure you want to delete this Profile Picture?';
-            } else if (this.modalContent.type === 'wallpaper') {
-                confirmMessage = 'Are you sure you want to delete this Wallpaper?';
-            } else {
-                confirmMessage = 'Are you sure you want to delete this upload?';
-            }
+    this.imageURL = '';
+    this.imgId = '';
+    this.authorId = '';
+    this.authorUsername = '';
+    this.$emit('close');
+},
 
-            if (window.confirm(confirmMessage)) {
-                try {
-                    await axiosService.deleteUpload(this.modalContent.imgId);
-                    this.$emit('delete-success', this.modalContent.imgId);
-                    this.closeModal();
-                } catch (error) {
-                    console.error('Error deleting upload:', error.message);
-                    this.$emit('error', 'Failed to delete the image.');
+        async handleDelete() {
+                let confirmMessage = '';
+                if (this.modalContent.type === 'pfp') {
+                    confirmMessage = 'Are you sure you want to delete this Profile Picture?';
+                } else if (this.modalContent.type === 'wallpaper') {
+                    confirmMessage = 'Are you sure you want to delete this Wallpaper?';
+                } else {
+                    confirmMessage = 'Are you sure you want to delete this upload?';
                 }
-            }
-        },
 
-        downloadImage() {
-            fetch(this.imageURL)
-                .then(response => response.blob())
-                .then(blob => {
-                    const url = URL.createObjectURL(blob);
-                    const link = document.createElement('a');
-                    link.href = url;
-
-                    const filename = `${this.modalContent.title}-${this.modalContent.imgId}`.replace(/\s+/g, '_') + '.jpg';
-                    link.download = filename || 'download';
-
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-
-                    URL.revokeObjectURL(url);
-                })
-                .catch(error => {
-                    console.error('Error downloading image:', error);
-                });
-        },
-        toggleRoundImage() {
-            this.isRounded = !this.isRounded;
-            localStorage.setItem("isRounded", this.isRounded.toString());
+                if (window.confirm(confirmMessage)) {
+                    try {
+                        await axiosService.deleteUpload(this.modalContent.imgId);
+                        this.$emit('delete-success', this.modalContent.imgId);
+                        this.closeModal();
+                    } catch (error) {
+                        console.error('Error deleting upload:', error.message);
+                        this.$emit('error', 'Failed to delete the image.');
+                    }
+                }
+            },
+
+            downloadImage() {
+                fetch(this.imageURL)
+                    .then(response => response.blob())
+                    .then(blob => {
+                        const url = URL.createObjectURL(blob);
+                        const link = document.createElement('a');
+                        link.href = url;
+
+                        const filename = `${this.modalContent.title}-${this.modalContent.imgId}`.replace(/\s+/g, '_') + '.jpg';
+                        link.download = filename || 'download';
+
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+
+                        URL.revokeObjectURL(url);
+                    })
+                    .catch(error => {
+                        console.error('Error downloading image:', error);
+                    });
+            },
+            toggleRoundImage() {
+                this.isRounded = !this.isRounded;
+                localStorage.setItem("isRounded", this.isRounded.toString());
+
+            },
+            redirectToAuthorMyScape() {
+
+                window.location.href = '/myscape/' + this.modalContent.authorId;
 
-        },
-        redirectToAuthorMyScape(){
-            
-            window.location.href = '/myscape/' + this.modalContent.authorId;
+            }
 
         }
-
-    }
-};
+    };
 </script>
 <style scoped>
 .image-group {
@@ -224,7 +251,27 @@ export default {
     display: inline-block;
 }
 
+.title-container {
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+    width: 100%;
+
+}
+
+.share-container {
+    align-items: center;
+    margin-left: auto;
+}
 
+.share {
+    margin-left: auto;
+
+}
+
+.share:hover {
+    cursor: pointer;
+}
 
 .overlay-button {
     background-color: rgba(0, 0, 0, 0.281);
@@ -240,6 +287,11 @@ export default {
 
 }
 
+.title-ctn-item {
+    flex: auto;
+    margin: 0 !important;
+}
+
 
 .overlay-button-group {
     display: flex;
@@ -257,6 +309,16 @@ export default {
     opacity: 1;
 }
 
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 .overlay-button-group:hover {
     opacity: 1;
 }
@@ -306,14 +368,14 @@ export default {
     margin: auto;
 }
 
-.img-author{
-    cursor:pointer;
+.img-author {
+    cursor: pointer;
 
 }
 
-.img-author:hover{
+.img-author:hover {
     text-decoration: underline;
-    
+
 }
 
 .modal-image-pfp {
@@ -555,4 +617,75 @@ img-tag {
     margin-right: 6px;
     margin-top: 6px;
 }
+
+
+
+#snackbar {
+    visibility: hidden;
+    min-width: 250px;
+    margin-left: -125px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 1;
+    left: 50%;
+    bottom: 30px;
+}
+
+#snackbar.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}
+
+@keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/widgets/myscape/MyScapeGrid.vue b/src/components/widgets/myscape/MyScapeGrid.vue
index 81680da..2151c60 100644
--- a/src/components/widgets/myscape/MyScapeGrid.vue
+++ b/src/components/widgets/myscape/MyScapeGrid.vue
@@ -7,7 +7,8 @@
 
     <div id="images-pre">
       <div id="images">
-        <div v-for="(image, index) in images" :key="index" :class="['image-container', { pfp: imageType === 'pfp', wallpaper: imageType === 'wallpaper' }]">
+        <div v-for="(image, index) in images" :key="index"
+          :class="['image-container', { pfp: imageType === 'pfp', wallpaper: imageType === 'wallpaper' }]">
           <img :src="image.url" :alt="image.title" />
           <div class="overlay">
             <button @click="openModal(image)">View</button>
@@ -21,8 +22,12 @@
     </div>
 
     <!-- Modal component usage -->
-    <ImageModal :show-modal="modalId !== null" :modal-content="findImageById(modalId)" @close="modalId = null"
-      @delete-success="fetchNewestImages" />
+    <ImageModal
+      :show-modal="modalId !== null"
+      :modal-content="findImageById(modalId)"
+      @close="modalId = null"
+      @delete-success="handleDeleteSuccess"
+    />
   </div>
 </template>
 
@@ -67,58 +72,65 @@ export default {
     this.fetchNewestImages();
     this.setupScrollListener();
   },
-    
-    methods: {
+
+  methods: {
     async fetchNewestImages() {
-        if (!this.hasMore || this.loading) return;
-
-        this.loading = true;
-
-        try {
-          const response = await axiosService.getUploadsFromUser(this.imageType, this.page, this.userid);
-          const newImages = response.uploads.map(image => ({
-            ...image,
-            url: `${baseURL}/image/view/${image.imgId}?lowRes=true`,
-          }));
-
-          this.images = [...this.images, ...newImages];
-          this.page++;
-          this.loading = false;
-
-          this.hasMore = newImages.length > 0;
-
-          this.checkScrollEnd();
-        } catch (error) {
-          console.error('Error fetching images:', error);
-          this.showInfoBox = true;
-          this.loading = false;
-        }
-      },
-      checkScrollEnd() {
-        if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
-          this.fetchNewestImages();
-        }
-      },
-      openModal(image) {
-        this.modalId = image.imgId;
-      },
-      findImageById(id) {
-        return this.images.find(image => image.imgId === id);
-      },
-      setupScrollListener() {
-        window.addEventListener('scroll', () => {
-          this.checkScrollEnd();
-        });
-      },
-      setType(type) {
-        this.imageType = type;
-        this.images = [];
-        this.page = 1;
-        this.hasMore = true;
+      if (!this.hasMore || this.loading) return;
+
+      this.loading = true;
+
+      try {
+        const response = await axiosService.getUploadsFromUser(this.imageType, this.page, this.userid);
+        const newImages = response.uploads.map(image => ({
+          ...image,
+          url: `${baseURL}/image/view/${image.imgId}?lowRes=true`,
+        }));
+
+        this.images = [...this.images, ...newImages];
+        this.page++;
+        this.loading = false;
+
+        this.hasMore = newImages.length > 0;
+
+        this.checkScrollEnd();
+      } catch (error) {
+        console.error('Error fetching images:', error);
+        this.showInfoBox = true;
+        this.loading = false;
+      }
+    },
+    checkScrollEnd() {
+      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
         this.fetchNewestImages();
-      },
+      }
+    },
+    openModal(image) {
+      this.modalId = image.imgId;
+    },
+    findImageById(id) {
+      return this.images.find(image => image.imgId === id);
+    },
+    setupScrollListener() {
+      window.addEventListener('scroll', () => {
+        this.checkScrollEnd();
+      });
     },
-  };
+    setType(type) {
+      this.imageType = type;
+      this.images = [];
+      this.page = 1;
+      this.hasMore = true;
+      this.fetchNewestImages();
+    },
+    handleDeleteSuccess() {
+      this.modalId = null;
+      this.page = 1;
+      this.images = [];
+      this.hasMore = true;
+      this.fetchNewestImages();
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -135,11 +147,21 @@ export default {
     width: calc(100% - 20px);
 
   }
+
   .image-container.wallpaper {
-  width: 40% !important;
-  height: 130px;
+    width: 40% !important;
+    height: 130px;
+  }
 }
 
+@media (max-width: 400px) {
+
+
+  .image-container.wallpaper {
+    height: 90px !important;
+  }
+
+
 }
 
 #toggle-buttons.tabs {
@@ -194,6 +216,7 @@ export default {
   padding-top: 40px;
   padding: auto;
   justify-content: center;
+  width: 100%;
 
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index 2a3b6db..eb07de2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,6 +15,8 @@ const routes = [
   { path: '/login', component: Login },
   { path: '/settings', component: Settings },
   { path: '/myscape/:userid', component: MyScape },
+  { path: '/uploads/:imgId', component: Home },
+
   { path: '/myscape', component: MyScape },
   { path: '/account/activate', component: ActivateAccount, props: route => ({ activationToken: route.query.activationToken }) }
 ];
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6af6e2e..fba2170 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,22 +1,25 @@
 <template>
-    <MainHeroPfp/>
-    <ListPfpSlide/>
-    <ListWallpaperSlide/>
+  <openShareLinkModal />
+  <MainHeroPfp />
+  <ListPfpSlide />
+  <ListWallpaperSlide />
 </template>
-  
-  <script>
-  import MainHeroPfp from '@/components/decorations/MainHeroPfp.vue';
-  import ListPfpSlide from '@/components/widgets/galleries/ListPfpSlide.vue';
-  import ListWallpaperSlide from '@/components/widgets/galleries/ListWallpaperSlide.vue';
-  
-  
-  
-  export default {
-    components: {
-        MainHeroPfp,
-        ListPfpSlide,
-        ListWallpaperSlide,
-    },
+
+<script>
+import openShareLinkModal from '@/components/widgets/linking/openShareLinkModal.vue'
+import MainHeroPfp from '@/components/decorations/MainHeroPfp.vue';
+import ListPfpSlide from '@/components/widgets/galleries/ListPfpSlide.vue';
+import ListWallpaperSlide from '@/components/widgets/galleries/ListWallpaperSlide.vue';
+
+
+
+export default {
+  components: {
+    openShareLinkModal,
+    MainHeroPfp,
+    ListPfpSlide,
+    ListWallpaperSlide,
+  },
 
 };
-  </script>
\ No newline at end of file
+</script>
\ No newline at end of file