diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 6001574d..2362f7b6 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -20,6 +20,7 @@
         "history": "^5.3.0",
         "i18next": "^23.11.1",
         "i18next-browser-languagedetector": "^7.2.1",
+        "mdb-react-ui-kit": "^7.2.0",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -13742,6 +13743,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz",
+      "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -21407,6 +21446,40 @@
       "integrity": "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==",
       "dev": true
     },
+    "node_modules/mdb-react-ui-kit": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/mdb-react-ui-kit/-/mdb-react-ui-kit-7.2.0.tgz",
+      "integrity": "sha512-2AoW02DL2K1k4X4PoG8k1VGkWTTskykvGpKn7fLkGOmUD2eEXOKzLhSXgw3HbaYqg4ikWM2tL86M4oxRCtZdWg==",
+      "dependencies": {
+        "@popperjs/core": "2.11.5",
+        "clsx": "1.1.1",
+        "framer-motion": "^10.16.4",
+        "react-popper": "2.3.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.0.9",
+        "@types/react-dom": "^18.0.3",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0"
+      }
+    },
+    "node_modules/mdb-react-ui-kit/node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/mdb-react-ui-kit/node_modules/clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -25822,6 +25895,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-i18next": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.0.tgz",
@@ -26087,6 +26165,20 @@
         "node": ">=12"
       }
     },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -30999,6 +31091,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -42092,6 +42192,32 @@
         "map-cache": "^0.2.2"
       }
     },
+    "framer-motion": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz",
+      "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "0.8.8",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+          "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+          "optional": true,
+          "requires": {
+            "@emotion/memoize": "0.7.4"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+          "optional": true
+        }
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -47915,6 +48041,29 @@
       "integrity": "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==",
       "dev": true
     },
+    "mdb-react-ui-kit": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/mdb-react-ui-kit/-/mdb-react-ui-kit-7.2.0.tgz",
+      "integrity": "sha512-2AoW02DL2K1k4X4PoG8k1VGkWTTskykvGpKn7fLkGOmUD2eEXOKzLhSXgw3HbaYqg4ikWM2tL86M4oxRCtZdWg==",
+      "requires": {
+        "@popperjs/core": "2.11.5",
+        "clsx": "1.1.1",
+        "framer-motion": "^10.16.4",
+        "react-popper": "2.3.0"
+      },
+      "dependencies": {
+        "@popperjs/core": {
+          "version": "2.11.5",
+          "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+          "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+        },
+        "clsx": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+          "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+        }
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -51012,6 +51161,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "react-i18next": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.0.tgz",
@@ -51219,6 +51373,15 @@
         }
       }
     },
+    "react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -54994,6 +55157,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index ddb34776..c7cc6977 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -13,9 +13,13 @@
     "axios": "^1.6.5",
     "flag-icons": "^7.2.1",
     "history": "^5.3.0",
+
+    "mdb-react-ui-kit": "^7.2.0",
+
     "i18next": "^23.11.1",
     "i18next-browser-languagedetector": "^7.2.1",
     "prop-types": "^15.8.1",
+
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",
@@ -67,4 +71,4 @@
     "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.4.1"
   }
-}
+}
\ No newline at end of file
diff --git a/webapp/src/components/footer/Footer.js b/webapp/src/components/footer/Footer.js
new file mode 100644
index 00000000..b4f68f5a
--- /dev/null
+++ b/webapp/src/components/footer/Footer.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { MDBFooter } from 'mdb-react-ui-kit';
+//import './Footer.css';
+
+export const Footer= () => {
+  return (
+    
+    <MDBFooter  className='footer text-black dark:text-white bg-teal-50 dark:bg-zinc-800' style={{position: 'relative', bottom: 0, width: '100%', padding: '10px', textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
+      <div className='footer-content' style={{textAlign: 'center'}}>
+        &copy; {new Date().getFullYear()}{' '}
+        <a  href='https://github.com/Arquisoft/wiq_es1c'>
+          Wiq_es1c.
+        </a>
+        <p>All rights reserved. </p>
+      </div>
+    </MDBFooter>
+  );
+}
\ No newline at end of file
diff --git a/webapp/src/components/footer/Footer.test.js b/webapp/src/components/footer/Footer.test.js
new file mode 100644
index 00000000..6e2ebe28
--- /dev/null
+++ b/webapp/src/components/footer/Footer.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen, act, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MemoryRouter, BrowserRouter as Router  } from 'react-router-dom';
+import { Footer } from './Footer';
+
+
+describe("Footer component", () => {
+    beforeEach(() => localStorage.setItem("token", "manolineldelpino"));
+
+    test("renders component",async () => {
+        render(<MemoryRouter><Footer/></MemoryRouter>);
+        
+        await act(async () => {});
+
+        expect(screen.getByText(/All rights reserved./i)).toBeInTheDocument();
+        
+
+    });
+});
\ No newline at end of file
diff --git a/webapp/src/components/friends/Friend.js b/webapp/src/components/friends/Friend.js
index e78d628e..8b3ee5aa 100644
--- a/webapp/src/components/friends/Friend.js
+++ b/webapp/src/components/friends/Friend.js
@@ -5,6 +5,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { useTranslation } from "react-i18next";
 import { getUsers, getCurrentUser } from "../../services/user.service";
 import { acceptRequest, getFriends, getRequests, sendRequest } from "../../services/friends.service";
+import {Footer} from '../footer/Footer';
 
 export const Friends = () => {
   const { t } = useTranslation();
@@ -173,6 +174,7 @@ export const Friends = () => {
           </Container>
         </Container>
       </ThemeProvider>
+      <Footer/>
     </>
   );
 };
diff --git a/webapp/src/components/game/Game.js b/webapp/src/components/game/Game.js
index a4a0efee..9e72d9b6 100644
--- a/webapp/src/components/game/Game.js
+++ b/webapp/src/components/game/Game.js
@@ -12,6 +12,7 @@ import {
     getNumberOfQuestions
 } from "../../services/game.service";
 import { Nav } from '../nav/Nav';
+import {Footer} from '../footer/Footer';
 import {useLocation} from "react-router-dom";
 import Swal from 'sweetalert2';
 import i18n from "../../i18n";
@@ -307,6 +308,7 @@ export const Game = ({finishFunction, name, tags}) => {
             </Box>
         </Container>
     </Container>
+    <Footer/>
     </>
   )
 }
diff --git a/webapp/src/components/history/History.js b/webapp/src/components/history/History.js
index 020f25a4..46a0c2d8 100644
--- a/webapp/src/components/history/History.js
+++ b/webapp/src/components/history/History.js
@@ -18,6 +18,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { getHistory } from "../../services/user.service"
 import { Nav } from '../nav/Nav';
+import {Footer} from '../footer/Footer';
 import { CssBaseline } from '@mui/material';
 import StringColorChip from './ColorChip';
 import { useTranslation } from "react-i18next";
@@ -134,6 +135,7 @@ export const History = () => {
                     </Table>
                 </TableContainer>
             </Container>
+            <Footer/>
         </>
     )
 }
\ No newline at end of file
diff --git a/webapp/src/components/home/Home.css b/webapp/src/components/home/Home.css
index 676732e4..a604f33d 100644
--- a/webapp/src/components/home/Home.css
+++ b/webapp/src/components/home/Home.css
@@ -1,7 +1,7 @@
 
 p,h1,h2,h3,h4,h5,h6,span {
   font-family: Consolas, monaco, serif;
-  color:#FFFFFF;
+  /*color:#FFFFFF;*/
 }
 
 .buttonGradient {
@@ -55,13 +55,11 @@ p,h1,h2,h3,h4,h5,h6,span {
 
 div.tagChip {
   border-width: 2px;
-
   margin:0.5em;
-  border-color: #c08f49;
 }
 
 div.tagChip[data-active="true"]{
-  background: rgb(49, 5, 87);
+  background: #ebd3b2;
 }
 
 
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index 3443fce6..98d08c5c 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -10,6 +10,7 @@ import {getTags} from "../../services/question.service";
 import {useNavigate} from "react-router-dom";
 import bannerDark from '../../media/wiq_banner.png';
 import bannerLight from '../../media/wiq_banner.light.png';
+import {Footer} from '../footer/Footer';
 
 export const Home = () => 
 {
@@ -228,6 +229,7 @@ export const Home = () =>
 
             </Container>
         )}
+        <Footer/>
         </>
     )
-}
+}
\ No newline at end of file
diff --git a/webapp/src/components/nav/Nav.js b/webapp/src/components/nav/Nav.js
index 4a76c162..5cbbece6 100644
--- a/webapp/src/components/nav/Nav.js
+++ b/webapp/src/components/nav/Nav.js
@@ -172,6 +172,14 @@ export const Nav = () => {
             WIQ
           </Typography>
 
+          <Typography
+            variant="p"
+            component="div"
+            style={{ color: color, marginLeft: 15 }}
+          >
+          <a href="https://github.com/Arquisoft/wiq_es1c" target="_blank" rel="noopener noreferrer"> Sobre nosotros</a>
+          </Typography>
+          
           <IconButton
             onClick={changeTheme}
             size="large"
@@ -179,6 +187,7 @@ export const Nav = () => {
             data-testid="change-color"
           >
             <NightlightIcon style={{ color: color }} />
+
           </IconButton>
 
           {/** Lang Icon */}
diff --git a/webapp/src/components/profile/Profile.js b/webapp/src/components/profile/Profile.js
index 418cfac9..d26c1daa 100644
--- a/webapp/src/components/profile/Profile.js
+++ b/webapp/src/components/profile/Profile.js
@@ -4,6 +4,7 @@ import {Box, Container, CssBaseline,Typography,Icon, CircularProgress } from "@m
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import { Nav } from '../nav/Nav';
 import { useTranslation } from "react-i18next";
+import {Footer} from '../footer/Footer';
 
 export const Profile = () =>{
     const { t } = useTranslation();
@@ -181,7 +182,7 @@ export const Profile = () =>{
             <CssBaseline />
             </Container>
         </Container>
-        
+        <Footer/>
         </>
     )
 }
\ No newline at end of file
diff --git a/webapp/src/components/settings/Settings.js b/webapp/src/components/settings/Settings.js
index 007a2d45..618db69d 100644
--- a/webapp/src/components/settings/Settings.js
+++ b/webapp/src/components/settings/Settings.js
@@ -6,6 +6,7 @@ import Grid from '@mui/material/Grid';
 import { useTranslation } from "react-i18next";
 
 import { getGameSettings, setGameSettings} from "../../services/game.service";
+import {Footer} from '../footer/Footer';
 
 export const Settings = () => {
     const { t } = useTranslation();
@@ -122,6 +123,7 @@ export const Settings = () => {
                 </Container>
             </Container>
         )}
+        <Footer/>
         </>
     )
 }
diff --git a/webapp/tailwind.config.js b/webapp/tailwind.config.js
index 447314c3..d6f84818 100644
--- a/webapp/tailwind.config.js
+++ b/webapp/tailwind.config.js
@@ -7,7 +7,9 @@ module.exports = {
   theme: {
     extend: {
       backgroundColor: {
-        'dark-mode': '#171717'
+        'dark-mode': '#171717',
+        'dark-purple': '#2A153E',
+        'light-blue': '#88d5f1',
       },
       backgroundImage: {
         'light': "url('/src/media/wiq_banner.light.png')",