diff --git a/package-lock.json b/package-lock.json
index bb94620ca75f87ac991eb3a206f0108e2fce6e98..9303be07ef36c6edee36a8f1e6d314f9200ea643 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "@popperjs/core": "^2.11.8",
         "axios": "^1.6.8",
         "bootstrap": "^5.3.3",
@@ -1212,6 +1213,15 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
+      "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
diff --git a/package.json b/package.json
index b2e39c70e704005bcb9df67abde381ed84f37868..ee0ef7c14e8afbcf90d5bd4d3df2b11e13cb8278 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.2",
     "@popperjs/core": "^2.11.8",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
diff --git a/src/components/BaseComponents/FooterAlternative.vue b/src/components/BaseComponents/FooterAlternative.vue
new file mode 100644
index 0000000000000000000000000000000000000000..28824a1455ea2ee665ee0a7de42ecb36e76dfdeb
--- /dev/null
+++ b/src/components/BaseComponents/FooterAlternative.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import '@fortawesome/fontawesome-free/css/all.css'
+import { RouterLink } from 'vue-router'
+import {logDOM} from "@testing-library/vue";
+
+
+
+
+const ifNotLoggedInLogin  = () => {
+ /* if (useUserInfoStore.isActive) {
+    return '/discover'
+  }
+  return '/login'*/
+  return '/login'
+}
+
+const ifLoggedInDiscover = () => {
+  /*if (store.isActive) {
+    return '/discover'
+  }
+  return '/'*/
+  return '/'
+}
+
+const ifLoggedInReset = () => {
+  /*if (store.isActive) {
+    store.resetAll()
+  }*/
+  return '/login'
+}
+</script>
+
+<template>
+  <div class="footer-wrapper" style="background-color: #3B71CA">
+
+    <div class="links-wrapper">
+      <p class="links-header">Links</p>
+      <div class="links-container">
+        <RouterLink class="router" id="home" :to="ifLoggedInDiscover">Home</RouterLink>
+        <RouterLink class="router" id="discover" :to="ifNotLoggedInLogin()">Discover</RouterLink>
+        <RouterLink class="router" id="login" to="/login" @click="ifLoggedInReset()">Login</RouterLink>
+      </div>
+    </div>
+
+    <div class="support-wrapper">
+      <p class="support-header">Support us</p>
+      <div class="support-container">
+        <a href="https://twitter.com" target="_blank">
+          <i class="fab fa-twitter"></i>
+          Twitter
+        </a>
+        <a href="https://instagram.com" target="_blank">
+          <i class="fab fa-instagram"></i>
+           Instagram
+        </a>
+        <a href="https://facebook.com" target="_blank">
+          <i class="fab fa-facebook"></i>
+           Facebook
+        </a>
+        <a href="https://discord.gg" target="_blank">
+          <i class="fab fa-discord"></i>
+           Discord
+        </a>
+      </div>
+    </div>
+
+    <div class="info-wrapper">
+      <p class="info-header">Company</p>
+      <div class="info-container">
+        <RouterLink class="router" to="/about-us">About us</RouterLink>
+        <RouterLink class="router" to="/privacy-policy">Privacy</RouterLink>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+:root {
+  --footer-margin: 2rem
+}
+
+.footer-wrapper {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  background-size: cover;
+  justify-content: center;
+}
+
+.links-header, .support-header, .info-header {
+  font-family: Inter,sans-serif;
+  font-size: 26px;
+  font-weight: 600;
+  color: #FFFFFF;
+  margin: var(--footer-margin);
+  padding-left: 10px;
+}
+
+.links-container, .support-container, .info-container {
+  display: flex;
+  flex-direction: column;
+  margin: var(--footer-margin);
+}
+
+.support-container a i {
+  margin-right: 0.7rem;
+}
+
+.router, .support-container a {
+  width: 100%;
+  height: 39px;
+  font-family: 'Inter', serif;
+  font-weight: 500;
+  font-size: 18px;
+  text-decoration: none;
+  border-radius: 10px;
+  align-content: center;
+  color: #FFFFFF;
+  border: 1px solid #3B71CA;
+  padding-left: 10px;
+}
+
+.router:hover, .support-container a:hover {
+  background-color: #FFFFFF;
+  color: #3B71CA;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+@media (max-width: 588px) {
+  .footer-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/src/components/Budget/ExpenseBox.vue b/src/components/Budget/ExpenseBox.vue
index 82967ad9d07667c91b045874887487629b3fd6a8..082172a504595be0fb6f9ebd0553e9e94206b375 100644
--- a/src/components/Budget/ExpenseBox.vue
+++ b/src/components/Budget/ExpenseBox.vue
@@ -55,7 +55,7 @@ const emitEditEvent = () => {
     </button>
   </div>
 
-  <div class="collapse" id=index>
+  <div class="collapse" :id=String(index)>
     <div class="container collapse-container">
       <form @submit.prevent="emitEditEvent">
         <div class="input-group">
diff --git a/src/views/BasePageView.vue b/src/views/BasePageView.vue
index 07af9953b1384c894b42a476b9bccecd9012526e..73bb277a8386fb9b2a82e7f139d0a8237eb41bc2 100644
--- a/src/views/BasePageView.vue
+++ b/src/views/BasePageView.vue
@@ -2,6 +2,7 @@
 import { RouterView } from 'vue-router'
 import Footer from '@/components/BaseComponents/Footer.vue'
 import Menu from '@/components/BaseComponents/Menu.vue'
+import FooterAlternative from "@/components/BaseComponents/FooterAlternative.vue";
 </script>
 
 <template>
@@ -16,5 +17,5 @@ import Menu from '@/components/BaseComponents/Menu.vue'
     <div style="display: flex; flex-direction: row;">
       <img v-for="item in 7" src="@/assets/coca.webp" style="width: 100%; height: 100px; margin: 5px; border-radius: 1rem;" alt="picture">
     </div>
-    <Footer></Footer>
+    <FooterAlternative></FooterAlternative>
 </template>
\ No newline at end of file