Index: ReserveNGo-frontend/src/PiniaStores/UserStore.js
===================================================================
--- ReserveNGo-frontend/src/PiniaStores/UserStore.js	(revision c7eec59c6f20bc3fdaefd43bd4fac2b050eb8650)
+++ ReserveNGo-frontend/src/PiniaStores/UserStore.js	(revision 903697b124d8379847adf185dcc1da92812e1641)
@@ -12,5 +12,7 @@
         phoneNumber: "",
         role: "UN_AUTHENTICATED",
-        token: ""
+        token: "",
+        logoUrl: null,
+        profilePictureBase64Encoded: null
       }
 
@@ -22,8 +24,36 @@
 
       this.data = jsonObject
+      //this.data.profilePictureBase64Encoded =
+
+      if (this.data.logoUrl != null) {
+        fetch('http://localhost:8080' + this.data.logoUrl, {
+          headers: {
+            Authorization: this.getToken,
+          }
+        })
+          .then(response => response.blob())
+          .then(blob => {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+              const base64data = reader.result;
+
+              this.setProfilePicturePathToLocalStorage(this.data.logoUrl, base64data)
+            };
+            reader.readAsDataURL(blob);
+          })
+          .catch(err => console.log("Error parsing the blob", err))
+
+      }
+
 
       localStorage.setItem('userData', JSON.stringify(jsonObject));
 
     },
+    removeProfilePictureFromLocaleStorage() {
+      this.data.profilePictureBase64Encoded = null;
+      this.data.logoUrl = null;
+      localStorage.setItem('userData', JSON.stringify(this.data));
+    },
+
     setNewEditedDataToLocalStorage(jsonObject) {
       const {firstName, lastName, phoneNumber} = jsonObject;
@@ -39,4 +69,9 @@
       this.data.token = jwt;
 
+      localStorage.setItem('userData', JSON.stringify(this.data));
+    },
+    setProfilePicturePathToLocalStorage(profilePicturePath, base64Encoded) {
+      this.data.logoUrl = profilePicturePath;
+      this.data.profilePictureBase64Encoded = base64Encoded;
       localStorage.setItem('userData', JSON.stringify(this.data));
     },
@@ -56,5 +91,7 @@
         phoneNumber: "",
         role: "UN_AUTHENTICATED",
-        token: ""
+        token: "",
+        logoUrl: null,
+        profilePictureBase64Encoded: null
       }
       localStorage.setItem('userData', JSON.stringify(this.data));
Index: ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision c7eec59c6f20bc3fdaefd43bd4fac2b050eb8650)
+++ ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision 903697b124d8379847adf185dcc1da92812e1641)
@@ -1,4 +1,5 @@
 <script>
 import { userStore } from '@/PiniaStores/UserStore.js'
+import blankProfile from '@/components/ectd/blank-profile.webp'
 
 export default {
@@ -16,5 +17,7 @@
 
       isProfileImageButtonDisabled: true,
-      newProfilePicture: ""
+      profileImageSrc: null,
+
+      blankProfile: blankProfile
     }
   },
@@ -88,7 +91,39 @@
       })
         .then(response => response.text())
-        .then(data => console.log("Profile Picture data returned", data))
+        .then(profileAvatarStringPath => {console.log("Profile Picture data returned", profileAvatarStringPath);
+
+
+
+            fetch('http://localhost:8080' + profileAvatarStringPath, {
+              headers: {
+                Authorization: this.userStore_.getToken,
+              }
+            })
+              .then(response => response.blob())
+              .then(blob => {
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                  const base64data = reader.result;
+
+                  this.userStore_.setProfilePicturePathToLocalStorage(profileAvatarStringPath, base64data)
+                };
+                reader.readAsDataURL(blob);
+              })
+              .catch(err => console.log("Error parsing the blob", err))
+
+        })
         .catch(err => console.log("Profile picture upload failed:", err));
+    },
+    deleteProfilePicture() {
+      fetch('http://localhost:8080/api/user/delete-avatar', {
+        method: 'DELETE',
+        headers: {
+          Authorization: this.userStore_.getToken,
+        }
+      })
+        .then(() => this.userStore_.removeProfilePictureFromLocaleStorage())
+        .catch(err => console.log("Erorr didnt remove profile picture", err))
     }
+
 
   },
@@ -140,5 +175,5 @@
               <img
                 class="rounded-circle border me-3"
-                src="../../ectd/blank-profile.webp"
+                :src=" this.userStore_.data.profilePictureBase64Encoded || blankProfile"
                 alt="Profile Picture"
                 width="100"
@@ -190,5 +225,5 @@
                   id="profilePictureModal"
                   class="rounded-circle border"
-                  src="../../ectd/blank-profile.webp"
+                  :src=" this.userStore_.data.profilePictureBase64Encoded || blankProfile"
                   alt="Profile Picture"
                   width="100"
@@ -213,5 +248,6 @@
             </div>
             <div class="d-flex justify-content-center">
-            <button @click="updateProfilePicture" :class="{'disabled': this.isProfileImageButtonDisabled}" class="text-center btn btn-dark mb-3 mt-2">Save Picture</button>
+            <button v-if="userStore_.data.logoUrl == null" @click="updateProfilePicture" :class="{'disabled': this.isProfileImageButtonDisabled}" class="text-center btn btn-dark mb-3 mt-2">Save Picture</button>
+              <button v-if="userStore_.data.logoUrl != null" @click="deleteProfilePicture" class="text-center btn btn-dark mb-3 mt-2">Remove Picture</button>
             </div>
 
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision c7eec59c6f20bc3fdaefd43bd4fac2b050eb8650)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 903697b124d8379847adf185dcc1da92812e1641)
@@ -2,6 +2,11 @@
 import { userStore } from '@/PiniaStores/UserStore.js'
 import { useRouter } from 'vue-router'
+import {transformArray} from '@/mixins/utilFunctions.js'
+import events_carousel from '@/components/Project/Restaurant/events_carousel_in_locale.vue'
 
 export default {
+  components: {
+    events_carousel
+  },
   data() {
     return {
@@ -35,5 +40,7 @@
       .then(res => res.json())
       .then(data => {
-        this.locale = data
+        this.locale = data;
+        console.log("FIXING PERSONAL EVENTS", this.locale.events);
+        this.locale.events = transformArray(this.locale.events, 2);
       })
       .catch(err => console.log("Error in Locale_", err))
@@ -120,5 +127,5 @@
 
             <!-- Events -->
-            <div class="mb-4">
+<!--            <div class="mb-4">
               <h6 class="fw-bold">Events</h6>
               <div class="d-flex flex-wrap gap-2">
@@ -131,6 +138,9 @@
                 </span>
               </div>
+            </div>-->
+            <h6 class="fw-bold">Events</h6>
+            <div class="mb-3 row">
+            <events_carousel :all-events="this.locale.events" />
             </div>
-
             <!-- Main Action Buttons -->
             <div class="d-flex flex-wrap gap-2 mb-4">
Index: ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel_in_locale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel_in_locale.vue	(revision 903697b124d8379847adf185dcc1da92812e1641)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel_in_locale.vue	(revision 903697b124d8379847adf185dcc1da92812e1641)
@@ -0,0 +1,129 @@
+<script lang="ts">
+
+import { userStore } from '@/PiniaStores/UserStore.js'
+
+/*function transformDate(dateTime) {
+  let [date, time] = dateTime.split('T')
+  let timeSplit = time.split(':')
+  time = timeSplit[0] + ":" + timeSplit[1]
+  return {date: date, time: time}
+}
+
+
+function transformArray(arr) {
+
+  arr.forEach(item => {
+    item.eventEnd = transformDate(item.eventEnd)
+    item.eventStart = transformDate(item.eventStart)
+  })
+
+  let newArray = []
+  for (let i = 0; i<arr.length; i+=3) {
+    newArray.push(arr.slice(i, i + 3))
+  }
+  return newArray;
+
+}*/
+
+export default {
+  data() {
+    return {
+      userStore_: userStore()
+    }
+  },
+  props: ['allEvents'],
+
+  /* beforeMount() {
+     //Events ne bi trebalo da bara authorisation. !!!!
+     fetch('http://localhost:8080/api/events',
+       {
+         method: 'GET',
+         headers: {
+
+           Authorization: this.userStore_.getToken,
+
+         }
+       })
+     .then(res => res.json())
+     .then(data => { this.allEvents = transformArray(data.events); console.log("Currently Reading here", this.allEvents) })
+       .catch(error => console.log("Probobly failed fetching events because of login",error))
+   }*/
+
+}
+
+</script>
+
+<template>
+
+  <!--
+    <div id="carouselExampleControls" class="col-6 carousel slide" data-bs-ride="carousel">
+      <div class="carousel-inner">
+        <div class="carousel-item active">
+          <img height="200" src="../../ectd/easy-american-pancake-recipe.jpg" data-bs-interval="5000" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img height="200" src="../../ectd/easy-american-pancake-recipe.jpg" data-bs-interval="5000" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img height="200" src="../../ectd/easy-american-pancake-recipe.jpg" data-bs-interval="5000" class="d-block w-100" alt="...">
+        </div>
+      </div>
+      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      </button>
+    </div>-->
+
+  <div id="carouselMulti3" class="carousel slide col-12" data-bs-ride="carousel">
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <div style="gap: 0.2rem" class="d-flex">
+          <div class="" v-for="event in allEvents[0]" :key="event.id">
+            <div class="card" style="width: 18rem;">
+              <img height="100" src="../../ectd/easy-american-pancake-recipe.jpg" class="card-img-top" alt="...">
+              <div class="card-body">
+                <h5 class="card-title fw-bold">{{event.name}}</h5>
+                <div class="card-text d-flex justify-content-between">
+                  <div class="text-muted"> {{event.eventType}}</div>
+                  <div class="text-muted">{{event.eventStart.date}} <br> <i class="fas fa-clock me-2 text-secondary"></i>{{event.eventStart.time}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--      Sto Ako listata e pomala od 3 !!!!!!! -->
+      <div class="carousel-item" v-for="eventGroup in allEvents.slice(1)" :key="eventGroup">
+        <div style="gap: 0.2rem" class="d-flex">
+          <div class="" v-for="event in eventGroup" :key="event.id">
+            <div class="card" style="width: 18rem;">
+              <img height="100" src="../../ectd/easy-american-pancake-recipe.jpg" class="card-img-top" alt="...">
+              <div class="card-body">
+                <h5 class="card-title fw-bold">{{event.name}}</h5>
+                <div class="card-text d-flex justify-content-between">
+                  <div class="text-muted"> {{event.eventType}}</div>
+                  <div class="text-muted" >{{event.eventStart.date}} <br> <i class="fas fa-clock me-2 text-secondary"></i> {{event.eventStart.time}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselMulti3" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon"></span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carouselMulti3" data-bs-slide="next">
+      <span class="carousel-control-next-icon"></span>
+    </button>
+  </div>
+
+
+</template>
+
+<style scoped>
+
+</style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision c7eec59c6f20bc3fdaefd43bd4fac2b050eb8650)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 903697b124d8379847adf185dcc1da92812e1641)
@@ -3,28 +3,5 @@
 import SearchFilterPanel from '@/components/Project/Restaurant/search_filter_panel.vue'
 import Events_carousel from '@/components/Project/Restaurant/events_carousel.vue'
-
-function transformDate(dateTime) {
-  let [date, time] = dateTime.split('T')
-  let timeSplit = time.split(':')
-  time = timeSplit[0] + ":" + timeSplit[1]
-  return {date: date, time: time}
-}
-
-
-function transformArray(arr) {
-
-  arr.forEach(item => {
-    item.eventEnd = transformDate(item.eventEnd)
-    item.eventStart = transformDate(item.eventStart)
-  })
-
-  let newArray = []
-  for (let i = 0; i<arr.length; i+=3) {
-    newArray.push(arr.slice(i, i + 3))
-  }
-  return newArray;
-
-}
-
+import {transformArray} from '@/mixins/utilFunctions.js'
 
 export default {
@@ -53,5 +30,5 @@
       })
       .then(res => res.json())
-      .then(data => { this.allEvents = transformArray(data.events); console.log("Currently Reading here", this.allEvents) })
+      .then(data => { this.allEvents = transformArray(data.events, 3); console.log("Currently Reading here", this.allEvents) })
       .catch(error => console.log("Probobly failed fetching events because of login",error))
   }
Index: ReserveNGo-frontend/src/mixins/utilFunctions.js
===================================================================
--- ReserveNGo-frontend/src/mixins/utilFunctions.js	(revision 903697b124d8379847adf185dcc1da92812e1641)
+++ ReserveNGo-frontend/src/mixins/utilFunctions.js	(revision 903697b124d8379847adf185dcc1da92812e1641)
@@ -0,0 +1,22 @@
+export function transformDate(dateTime) {
+  let [date, time] = dateTime.split('T')
+  let timeSplit = time.split(':')
+  time = timeSplit[0] + ":" + timeSplit[1]
+  return {date: date, time: time}
+}
+
+
+export function transformArray(arr, howMany) {
+
+  arr.forEach(item => {
+    item.eventEnd = transformDate(item.eventEnd)
+    item.eventStart = transformDate(item.eventStart)
+  })
+
+  let newArray = []
+  for (let i = 0; i<arr.length; i+=howMany) {
+    newArray.push(arr.slice(i, i + howMany))
+  }
+  return newArray;
+
+}