diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 156a9a9..34bc7fd 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -6,7 +6,7 @@
       <div class="popup-set" id="add-profile" style="display: none">
         <div class="popup-header">
           <div class="user-photo common_color">
-            <img src="../assets/images/m-user.svg" />
+            <img :src="userData.profilePic" />
           </div>
           <!-- header user -->
 
@@ -20,7 +20,7 @@
             </li>
             <li>
               <a href="javasript:void(0);"
-                ><img src="../assets/images/randomise.svg" /><span
+                @click="getRandomAvatar()"><img src="../assets/images/randomise.svg" /><span
                   >Randomise Avatar</span
                 ></a
               >
@@ -331,7 +331,7 @@
           <a href="javasript:void(0);" class="update_profile"><span></span> Update Profile</a>
         <div class="">
         
-          <a href="javascript:void(0);" class="user-profile-photo common_color" @click="userprofileshowDialog"><img src="../assets/images/m-user.svg" /></a>
+          <a href="javascript:void(0);" class="user-profile-photo common_color" @click="userprofileshowDialog"><img :src="userData.profilePic" /></a>
           <div class="sub-menu-user" id="userprofileshow" style="display: none">
             <ul>
               <li>
@@ -348,7 +348,7 @@
       <div class="row profile-tab-spc-top">
         <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
           <div class="inner-profile-ps common_color">
-            <img src="../assets/images/m-user.svg" class="" />
+            <img :src="userData.profilePic" class="" />
           </div>
           <!-- user profile -->
 
@@ -430,8 +430,8 @@
         <div class="container-fluid data-wrp" id="case-study-0">
           <div class="row" v-if="caseStudies.length == 0">
              <div class="col-6 col-lg-6">
-               <div class="full-w-height-profile ex-light seats_bg">
-                   <a href="javasript:void(0);" class="profile-md-bt center-and-spc bt-spc-top">Explore Spotlights</a>
+               <div class="full-w-height-profile ex-light seats_bg" >
+                   <a href="javasript:void(0);" class="profile-md-bt center-and-spc bt-spc-top" @click="openUrl('https://www.productgrowth.org/spotlight')">Explore Spotlights</a>
   <p>Explore the spotlights others has put together</p>
                  </div><!-- full width -->
              </div><!-- col 6 -->
@@ -439,7 +439,7 @@
                <div class="full-w-height-profile ex-light spotlight_bg">
                  <img src="../assets/images/add-role.svg" class="add-role" />
                  <div class="clearfix"></div><!-- clearfix -->
-                   <a href="javasript:void(0);" class="profile-md-bt center-and-spc">Publish Spotlight</a>
+                   <a href="javasript:void(0);" class="profile-md-bt center-and-spc" @click="openUrl('https://www.productgrowth.org/spotlight#typeform-spotlight')">Publish Spotlight</a>
   <p>Share your own insights through Spotlight</p>
                  </div><!-- full width -->
              </div><!-- col 6 -->
@@ -640,6 +640,19 @@ export default {
         })
         .catch((error) => console.log(error));
     },
+    getRandomAvatar() {
+      axios
+        .get("/randomAvatar", {
+          headers: {
+            Authorization: "Bearer " + this.usertoken,
+          },
+        })
+        .then((response) => {
+         this.userData.profilePic = response.data.imageURL;
+          console.log(response.data.imageURL);
+        })
+        .catch((error) => console.log(error));
+    },
     getCaseStudies() {
       axios
         .get("/caseStudy/all", {
@@ -830,6 +843,9 @@ export default {
     userprofileshowDialog() {
       $("#userprofileshow").toggle();
     },
+    openUrl(url){
+      window.open(url);
+    },
   },
 };
 </script>