Index: ReserveNGo-frontend/src/components/Project/Auth/DisabledAccountPage.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Auth/DisabledAccountPage.vue	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
+++ ReserveNGo-frontend/src/components/Project/Auth/DisabledAccountPage.vue	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
@@ -0,0 +1,54 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
+
+export default defineComponent({
+  name: 'DisabledAccountPage',
+  components: { LoadingIcon },
+  emits: ['noThankYou', 'yesPlease'],
+  props: {
+    isLoading: {
+      type: Boolean,
+      required: true,
+    }
+  },
+
+  methods: {
+
+    noThankYou(){
+      this.$emit('noThankYou')
+    },
+    yesPlease(){
+      this.$emit("yesPlease")
+    }
+  }
+
+
+})
+</script>
+
+<template>
+  <div class="container-xxl d-flex justify-content-center mt-3">
+    <div class="card shadow p-4" style="max-width: 400px; width: 100%">
+      <h3 class="text-center mb-4">Your account was disabled</h3>
+
+
+      <p>You have disabled your account.
+        <br>
+      In 30 days since you disabled your account the account will be deleted.
+      If you want to enable your account again please click "Yes" and you will be logged in and your account will be enabled again.</p>
+
+      <h4>Are you sure you want to enable your account?</h4>
+
+      <div  style="display: flex; gap: 2rem">
+        <button  @click="yesPlease" class="button-group btn btn-dark"><span v-if="!isLoading">Yes, Please</span> <LoadingIcon v-else></LoadingIcon></button>
+
+        <button @click="noThankYou" class="button-group btn btn-dark">No, Thank you</button>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
Index: ReserveNGo-frontend/src/components/Project/Auth/login_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Auth/login_.vue	(revision 7db50745e8a98b64e3259400052ce3bbaafe7022)
+++ ReserveNGo-frontend/src/components/Project/Auth/login_.vue	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
@@ -6,7 +6,10 @@
 import { useLocalManager } from '@/repository/LocalManager.ts'
 import { useAuth } from '@/repository/Authentication.ts'
+import DisabledAccountPage from '@/components/Project/Auth/DisabledAccountPage.vue'
+import disabledAccountPage from '@/components/Project/Auth/DisabledAccountPage.vue'
+import { useToasts } from '@/composables/useToast.js'
 
 export default {
-  components: { LoadingIcon },
+  components: { DisabledAccountPage, LoadingIcon },
   data() {
     return {
@@ -22,6 +25,19 @@
 
       isLoading: false,
+      isEnableingAccountLoading: false,
       errorMessage: '',
+
+      disabledAccountPage: false,
+      showToast: useToasts().showToast,
     }
+  },
+  computed: {
+
+    userDisabledAccountString(){
+      /*User with email: customer@gmail.com not found.*/
+      return `User is disabled`
+    }
+
+
   },
   methods: {
@@ -47,4 +63,10 @@
           this.errorMessage = "Oops! That password seems to be incorrect."
         }
+        if (error.status === 500 && this.userDisabledAccountString === error.response) {
+          this.disabledAccountPage = true;
+        }
+        else {
+          this.errorMessage = error.response || "Something went wrong";
+        }
 
       }
@@ -52,4 +74,19 @@
         this.isLoading = false
       }
+    },
+    async reEnableAccount(){
+      this.isEnableingAccountLoading = true;
+        try {
+         await useAuth.reEnableAccount(this.form_info.email, this.form_info.password)
+         await this.makeLogin()
+         this.showToast("Your account was successfully enabled.")
+        }
+        catch (error) {
+          this.disabledAccountPage=false
+          this.showToast(error.response || "Something went wrong, try again later", 'error')
+        }
+        finally {
+          this.isEnableingAccountLoading = false;
+        }
     },
     fetchLocalForManager() {
@@ -68,5 +105,5 @@
 <template>
   <div class="container-xxl d-flex justify-content-center mt-3">
-    <div class="card shadow p-4" style="max-width: 400px; width: 100%">
+    <div v-if="!disabledAccountPage" class="card shadow p-4" style="max-width: 400px; width: 100%">
       <h3 class="text-center mb-4">Login</h3>
       <form @submit.prevent="makeLogin">
@@ -102,4 +139,5 @@
       </form>
     </div>
+    <DisabledAccountPage :is-loading="isEnableingAccountLoading" @yesPlease="reEnableAccount" @noThankYou="disabledAccountPage = false" v-else></DisabledAccountPage>
   </div>
 </template>
Index: ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision 7db50745e8a98b64e3259400052ce3bbaafe7022)
+++ ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
@@ -5,8 +5,10 @@
 import { isValidEmail } from '@/mixins/utilFunctions.js'
 import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
-import {useUser} from '@/repository/user.ts'
+import { useUser } from '@/repository/user.ts'
+import PopUpAlertIcon from '@/components/Project/Utility/PopUpAlertIcon.vue'
+import PopUpWindow from '@/components/Project/Utility/PopUpWindow.vue'
 
 export default {
-  components: { LoadingIcon },
+  components: { PopUpWindow, PopUpAlertIcon, LoadingIcon },
   data() {
     return {
@@ -24,4 +26,8 @@
       isUpdatingPassword: false,
       isUpdatingPicture: false,
+      isDisableingAcccount: false,
+      disableAccountAreYouSurePrompt: false,
+
+      isHoveringAlert: false,
     }
   },
@@ -52,5 +58,5 @@
       try {
         const payload = { newEmail: this.profileData.email }
-        const updatedTokenData = (await useUser.changeEmail(payload))
+        const updatedTokenData = await useUser.changeEmail(payload)
         this.userStore_.setNewEmailToLocalStorage(updatedTokenData) // Assumes this updates the token with new email info
         this.showToast(
@@ -124,4 +130,20 @@
       }
     },
+    async disableAccount() {
+      this.isDisableingAcccount = true;
+      try {
+       await useUser.disableUserAccount()
+       this.showToast('Account disabled successfully! You have 30 days to log in before its deletion.', 'success')
+       this.userStore_.clearLocalStorage();
+       this.$router.push('/login');
+      }
+      catch (error) {
+        console.log(error);
+       this.showToast(error.response || 'Failed to disable account.', 'error')
+      }
+      finally {
+        this.isDisableingAcccount = false
+      }
+    }
   },
   async beforeMount() {
@@ -231,5 +253,4 @@
             </div>
             <div class="d-flex justify-content-center">
-              <!-- --- MODIFIED: Added loading states to picture buttons --- -->
               <button
                 v-if="!userStore_.data.profilePictureBase64Encoded"
@@ -349,4 +370,40 @@
               {{ isUpdatingPassword ? 'Changing...' : 'Change Password' }}
             </button>
+
+            <h1 style="color: red">Danger Zone</h1>
+
+            <div
+              style="
+                font-weight: bold;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              "
+            >
+              <span
+                >Disable Account
+                <span @mouseleave="isHoveringAlert=false" @mouseenter="isHoveringAlert=true" style="position: relative;">
+                  <PopUpAlertIcon></PopUpAlertIcon> <PopUpWindow :isHoveringAlert="isHoveringAlert">Account will be disabled, it can be re-enabled after 30 days of disablement. After the
+              30 day period the account will be permanently deleted. You can re-enable your account
+              by logging in again before the 30 day period expires. </PopUpWindow>
+                </span>
+              </span>
+
+
+              <button v-if="!disableAccountAreYouSurePrompt" @click="disableAccountAreYouSurePrompt=true" class="custom-secondary-button">Disable Account</button>
+
+              <div v-else>
+                <p>Are you absolutely sure you want to disable your account ?</p>
+              <div  style="display: flex; gap: 2rem">
+                <button data-bs-dismiss="modal" @click="() => {disableAccount(); disableAccountAreYouSurePrompt = false}" class="custom-secondary-button">Yes</button>
+                <button @click="disableAccountAreYouSurePrompt=false" class="custom-secondary-button">No</button>
+              </div>
+              </div>
+            </div>
+            <p>
+              Account will be disabled, it can be re-enabled after 30 days of disablement. After the
+              30 day period the account will be permanently deleted. You can re-enable your account
+              by logging in again before the 30 day period expires.
+            </p>
           </div>
         </div>
@@ -356,3 +413,15 @@
 </template>
 
-<style scoped></style>
+<style scoped>
+.custom-secondary-button {
+  color: white;
+  background-color: #6c757d;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 4px;
+}
+
+.custom-secondary-button:hover {
+  background-color: #5c636a;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue	(revision 7db50745e8a98b64e3259400052ce3bbaafe7022)
+++ ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
@@ -54,23 +54,11 @@
     updateItemsPerSlide() {
       const width = window.innerWidth
-      // Using standard Bootstrap breakpoints
-      if (width < 992) {
-        // Small devices (phones)
+      if (width < 1200) {
         this.itemsPerSlide = 1
-      } else if (width < 1100) {
-        // Medium devices (tablets/laptops)
+      } else if (width < 1300) {
         this.itemsPerSlide = 2
-      } else {
-        // Large devices (desktops)
-        this.itemsPerSlide = 3
       }
     },
 
-    getImageLogo(imageLogo: string): any {
-      if (!imageLogo || !imageLogo.startsWith('/')) {
-        return pankake
-      }
-      return config.API_BASE_URL + imageLogo
-    },
     deleteEvent(eventId){
       useLocalManager.deleteEvent(eventId)
Index: ReserveNGo-frontend/src/components/Project/Utility/PopUpAlertIcon.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/PopUpAlertIcon.vue	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
+++ ReserveNGo-frontend/src/components/Project/Utility/PopUpAlertIcon.vue	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
+    <path fill="currentColor" fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2m0 5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1m1 9a1 1 0 1 0-2 0a1 1 0 1 0 2 0" clip-rule="evenodd" />
+  </svg>
+</template>
Index: ReserveNGo-frontend/src/components/Project/Utility/PopUpWindow.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/PopUpWindow.vue	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
+++ ReserveNGo-frontend/src/components/Project/Utility/PopUpWindow.vue	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
@@ -0,0 +1,44 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'PopUpWindow',
+  props: {
+    isHoveringAlert: {
+      type: Boolean,
+    }
+  }
+})
+</script>
+
+<template>
+
+  <div :class="isHoveringAlert ? 'displayed' : 'hidden'" id="component"><slot></slot></div>
+
+</template>
+
+<style scoped>
+
+#component {
+  color: black;
+  position: absolute;
+  padding: 12px;
+  border: 1px solid #838282;
+  background-color: whitesmoke;
+  bottom: 0;
+  left: 100%;
+  box-shadow: 0 0 10px whitesmoke;
+  width: 300px;
+}
+#component.displayed {
+  display: block;
+}
+.displayed {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+
+
+</style>
Index: ReserveNGo-frontend/src/repository/Authentication.ts
===================================================================
--- ReserveNGo-frontend/src/repository/Authentication.ts	(revision 7db50745e8a98b64e3259400052ce3bbaafe7022)
+++ ReserveNGo-frontend/src/repository/Authentication.ts	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
@@ -26,4 +26,7 @@
     return this.httpClient.post("register/" + role, { firstName, lastName, email, phoneNumber, password }, {headers: {'Invite-Token': inviteToken} })
   }
+  reEnableAccount(email: String, password: String) : Promise<any> {
+    return this.httpClient.patch('enable', { email, password })
+  }
 }
 
Index: ReserveNGo-frontend/src/repository/user.ts
===================================================================
--- ReserveNGo-frontend/src/repository/user.ts	(revision 7db50745e8a98b64e3259400052ce3bbaafe7022)
+++ ReserveNGo-frontend/src/repository/user.ts	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
@@ -1,3 +1,2 @@
-// src/repository/user.ts (or wherever you keep the file)
 import { config } from '@/constants/Api_config'
 import { HttpClient } from '@/Api_Classes/HttpClient'
@@ -5,5 +4,5 @@
 const BASE_API_URL = config.API_BASE_URL
 
-class UserManager { // Renamed for clarity, but you can keep LocalManager
+class UserManager {
   private readonly httpClient: HttpClient
 
@@ -12,5 +11,4 @@
   }
 
-  // --- NEW METHODS BASED ON YOUR COMPONENT'S FETCH CALLS ---
 
   getProfile(): Promise<any> {
@@ -37,4 +35,7 @@
     return this.httpClient.delete('delete-avatar');
   }
+  disableUserAccount(): Promise<any> {
+    return this.httpClient.patch('disable');
+  }
 }
 
Index: ReserveNGo-frontend/src/router/index.js
===================================================================
--- ReserveNGo-frontend/src/router/index.js	(revision 7db50745e8a98b64e3259400052ce3bbaafe7022)
+++ ReserveNGo-frontend/src/router/index.js	(revision 6c14611b1aca506ec9ec85e1bed4d963fd699b83)
@@ -12,4 +12,5 @@
 import ManagerDashboard from '@/components/Project/Manager/ManagerDashboard.vue'
 import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
+import DisabledAccountPage from '@/components/Project/Auth/DisabledAccountPage.vue'
 
 const router = createRouter({
@@ -67,4 +68,9 @@
       name: 'manager-dashboard',
       component: ManagerDashboard,
+    },
+    {
+      path: '/disabledAccountPage',
+      name: 'disabledAccountPage',
+      component: DisabledAccountPage,
     }
   ],