Index: ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision f9f6a902043eb450f425ea82261266513ec15a78)
+++ ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision 6102d84fe86c57d44f32c7132dd561cc228026d1)
@@ -1,4 +1,4 @@
 <script>
-import { userStore } from '@/PiniaStores/UserStore.js';
+import { userStore } from '@/PiniaStores/UserStore.js'
 
 export default {
@@ -6,68 +6,127 @@
     return {
       userStore_: userStore(),
-      newFirstName: "",
-      newLastName: "",
-      newPhoneNumber: "",
-      newEmail: "",
-      newPassword: "",
-      currentPassword: "",
-    };
+      newFirstName: '',
+      newLastName: '',
+      newPhoneNumber: '',
+      newEmail: '',
+      newPassword: '',
+      currentPassword: '',
+
+      profileData: {},
+
+      isProfileImageButtonDisabled: true,
+      newProfilePicture: ""
+    }
   },
   methods: {
     async updateProfileSettings() {
       try {
-        const response = await fetch("http://localhost:8080/api/user/edit", {
+        const response = await fetch('http://localhost:8080/api/user/edit', {
           method: 'PUT',
           headers: {
             'Content-Type': 'application/json',
-            'Authorization': this.userStore_.getToken
+            Authorization: this.userStore_.getToken,
           },
           body: JSON.stringify({
             firstName: this.newFirstName,
             lastName: this.newLastName,
-            phoneNumber: this.newPhoneNumber
-          })
-        });
-        const json = await response.json();
-        this.userStore_.setNewEditedDataToLocalStorage(json);
+            phoneNumber: this.newPhoneNumber,
+          }),
+        })
+        const json = await response.json()
+        this.userStore_.setNewEditedDataToLocalStorage(json)
       } catch (err) {
-        console.log(err);
+        console.log(err)
       }
     },
     async updateEmail() {
       try {
-        const response = await fetch("http://localhost:8080/api/user/change-email", {
+        const response = await fetch('http://localhost:8080/api/user/change-email', {
           method: 'PATCH',
           headers: {
             'Content-Type': 'application/json',
-            'Authorization': this.userStore_.getToken
+            Authorization: this.userStore_.getToken,
           },
-          body: JSON.stringify({ newEmail: this.newEmail })
-        });
-        const json = await response.json();
-        this.userStore_.setNewEmailToLocalStorage(json);
+          body: JSON.stringify({ newEmail: this.newEmail }),
+        })
+        const json = await response.json()
+        this.userStore_.setNewEmailToLocalStorage(json)
       } catch (err) {
-        console.log(err);
+        console.log(err)
       }
     },
     async updatePassword() {
       try {
-        await fetch("http://localhost:8080/api/user/change-password", {
+        await fetch('http://localhost:8080/api/user/change-password', {
           method: 'PATCH',
           headers: {
             'Content-Type': 'application/json',
-            'Authorization': this.userStore_.getToken
+            Authorization: this.userStore_.getToken,
           },
           body: JSON.stringify({
             currentPassword: this.currentPassword,
             newPassword: this.newPassword,
-          })
-        });
+          }),
+        })
       } catch (err) {
-        console.log(err);
+        console.log(err)
       }
+    },
+    updateProfilePicture() {
+      const profilePictureFile = document.getElementById('profilePhotoInput').files[0];
+      if (!profilePictureFile) return;
+
+      const formData = new FormData();
+      formData.append('avatar', profilePictureFile);
+
+      fetch('http://localhost:8080/api/user/upload-avatar', {
+        method: 'POST',
+        headers: {
+          Authorization: this.userStore_.getToken,
+        },
+        body: formData
+      })
+        .then(response => response.text())
+        .then(data => console.log("Profile Picture data returned", data))
+        .catch(err => console.log("Profile picture upload failed:", err));
     }
-  }
-};
+
+  },
+  beforeMount() {
+    fetch('http://localhost:8080/api/user/profile', {
+      method: 'GET',
+      headers: {
+        Authorization: this.userStore_.getToken,
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        this.profileData = data
+        console.log('Priting response from profile api', this.profileData)
+      })
+      .catch((error) => {
+        console.log('Error fetching profile settings', error)
+      })
+  },
+  mounted() {
+    this.isProfileImageButtonDisabled = true;
+    const profilePictureImage = document.getElementById('profilePictureModal');
+    const inputProfilePicture = document.getElementById('profilePhotoInput');
+
+    inputProfilePicture.addEventListener('change', (event) => {
+      this.isProfileImageButtonDisabled = false;
+
+      const file = event.target.files[0];
+      if (file && file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          profilePictureImage.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+      }
+    });
+
+  },
+}
 </script>
 
@@ -79,18 +138,17 @@
           <div class="d-flex align-items-center justify-content-center mb-4">
             <div class="d-flex align-items-center justify-content-center">
-            <img
-              class="rounded-circle border me-3 "
-              src="../../ectd/easy-american-pancake-recipe.jpg"
-              alt="Profile Picture"
-              width="100"
-              height="100"
-            />
-            </div>
-
+              <img
+                class="rounded-circle border me-3"
+                src="../../ectd/blank-profile.webp"
+                alt="Profile Picture"
+                width="100"
+                height="100"
+              />
+            </div>
           </div>
 
-          <h4>{{ userStore_.data.firstName }} {{ userStore_.data.lastName }}</h4>
-          <p><strong>Email:</strong> {{ userStore_.data.email }}</p>
-          <p><strong>Phone Number:</strong> {{ userStore_.data.phoneNumber }}</p>
+          <h4>{{ profileData.firstName }} {{ profileData.lastName }}</h4>
+          <p><strong>Email:</strong> {{ profileData.email }}</p>
+          <p><strong>Phone Number:</strong> {{ profileData.phoneNumber }}</p>
 
           <button
@@ -118,8 +176,44 @@
           <div class="modal-header">
             <h5 class="modal-title" id="editProfileModalLabel">Edit Profile</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
           </div>
 
           <div class="modal-body">
+            <div class="d-flex justify-content-center">
+              <div class="position-relative">
+                <img
+                  id="profilePictureModal"
+                  class="rounded-circle border"
+                  src="../../ectd/blank-profile.webp"
+                  alt="Profile Picture"
+                  width="100"
+                  height="100"
+                />
+                <input
+                  type="file"
+                  id="profilePhotoInput"
+                  class="visually-hidden"
+                  accept="image/*"
+                />
+
+                <label
+                  for="profilePhotoInput"
+                  style="bottom: 0; right: 0.4rem; cursor: pointer"
+                  class="position-absolute rounded-full"
+                >
+                  <i style="font-size: 1.7rem" class="fa-solid fa-square-plus"></i>
+                </label>
+              </div>
+
+            </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>
+            </div>
+
             <!-- Edit Name and Phone -->
             <h6>Personal Details</h6>
@@ -169,10 +263,5 @@
             <h6>Change Email</h6>
             <div class="input-group mb-3">
-              <input
-                v-model="newEmail"
-                type="text"
-                class="form-control"
-                placeholder="New Email"
-              />
+              <input v-model="newEmail" type="text" class="form-control" placeholder="New Email" />
               <button
                 @click="updateEmail()"
@@ -199,10 +288,5 @@
             <div class="mb-3">
               <label for="newPassword" class="form-label">New Password</label>
-              <input
-                v-model="newPassword"
-                type="password"
-                id="newPassword"
-                class="form-control"
-              />
+              <input v-model="newPassword" type="password" id="newPassword" class="form-control" />
             </div>
 
@@ -222,6 +306,3 @@
 </template>
 
-<style scoped>
-
-
-</style>
+<style scoped></style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision f9f6a902043eb450f425ea82261266513ec15a78)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision 6102d84fe86c57d44f32c7132dd561cc228026d1)
@@ -3,5 +3,5 @@
 import { userStore } from '@/PiniaStores/UserStore.js'
 
-function transformDate(dateTime) {
+/*function transformDate(dateTime) {
   let [date, time] = dateTime.split('T')
   let timeSplit = time.split(':')
@@ -24,15 +24,15 @@
   return newArray;
 
-}
+}*/
 
 export default {
   data() {
     return {
-      allEvents: [],
       userStore_: userStore()
     }
   },
+  props: ['allEvents'],
 
-  beforeMount() {
+ /* beforeMount() {
     //Events ne bi trebalo da bara authorisation. !!!!
     fetch('http://localhost:8080/api/events',
@@ -46,7 +46,7 @@
       })
     .then(res => res.json())
-    .then(data => { this.allEvents = transformArray(data); console.log("Currently Reading here", this.allEvents) })
+    .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))
-  }
+  }*/
 
 }
@@ -87,5 +87,5 @@
                 <h5 class="card-title fw-bold">{{event.name}}</h5>
                 <div class="card-text d-flex justify-content-between">
-                  <div class="text-muted"> {{event.eventStatus}}</div>
+                  <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>
@@ -104,5 +104,5 @@
                 <h5 class="card-title fw-bold">{{event.name}}</h5>
                 <div class="card-text d-flex justify-content-between">
-                  <div class="text-muted"> {{event.eventStatus}}</div>
+                  <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>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision f9f6a902043eb450f425ea82261266513ec15a78)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 6102d84fe86c57d44f32c7132dd561cc228026d1)
@@ -1,6 +1,60 @@
-<script setup>
+<script>
 import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
 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;
+
+}
+
+
+export default {
+  components: {
+    Locale_listing_container,
+    SearchFilterPanel,
+    Events_carousel,
+  },
+
+  data() {
+    return {
+      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>
 
@@ -8,11 +62,8 @@
   <div class="container-fluid px-0">
     <div class="row justify-content-center">
+      <!-- Sticky Search and Filter Bar outside scroll area -->
+      <SearchFilterPanel />
 
-      <!-- Sticky Search and Filter Bar outside scroll area -->
-      <SearchFilterPanel/>
-
-
-      <Events_carousel/>
-
+      <Events_carousel :all-events="allEvents" />
 
       <!-- Scrollable List Below Sticky Filter Bar -->