diff --git a/src/Components/Buttons/CommanderDamage.tsx b/src/Components/Buttons/CommanderDamage.tsx
index 16077eb..3333a15 100644
--- a/src/Components/Buttons/CommanderDamage.tsx
+++ b/src/Components/Buttons/CommanderDamage.tsx
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components/macro';
 import { Player, Rotation } from '../../Types/Player';
 import { useRef, useState } from 'react';
-import { OutlinedText } from '../Text/OutlinedText';
+import { OutlinedText } from '../Misc/OutlinedText';
 
 const CommanderDamageContainer = styled.div<{
   rotation: number;
diff --git a/src/Components/Buttons/ExtraCounter.tsx b/src/Components/Buttons/ExtraCounter.tsx
index bf5f141..39fe32e 100644
--- a/src/Components/Buttons/ExtraCounter.tsx
+++ b/src/Components/Buttons/ExtraCounter.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, useRef, useState } from 'react';
 import styled, { css } from 'styled-components/macro';
 import { CounterType, Rotation } from '../../Types/Player';
-import { OutlinedText } from '../Text/OutlinedText';
+import { OutlinedText } from '../Misc/OutlinedText';
 
 const ExtraCounterContainer = styled.div`
   display: flex;
diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx
index 4f3e5a9..32efc11 100644
--- a/src/Components/LifeCounter/LifeCounter.tsx
+++ b/src/Components/LifeCounter/LifeCounter.tsx
@@ -6,7 +6,7 @@ import SettingsButton from '../Buttons/SettingsButton';
 import CommanderDamageBar from '../Counters/CommanderDamageBar';
 import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import PlayerMenu from '../PlayerMenu/PlayerMenu';
-import { OutlinedText } from '../Text/OutlinedText';
+import { OutlinedText } from '../Misc/OutlinedText';
 
 const LifeCounterContentWrapper = styled.div<{
   backgroundColor: string;
diff --git a/src/Components/Text/OutlinedText.tsx b/src/Components/Misc/OutlinedText.tsx
similarity index 100%
rename from src/Components/Text/OutlinedText.tsx
rename to src/Components/Misc/OutlinedText.tsx
diff --git a/src/Components/Misc/SupportMe.tsx b/src/Components/Misc/SupportMe.tsx
index 04a8441..1116591 100644
--- a/src/Components/Misc/SupportMe.tsx
+++ b/src/Components/Misc/SupportMe.tsx
@@ -1,23 +1,65 @@
 import styled from 'styled-components';
-import { theme } from '../../Data/theme';
 import { Paragraph } from './TextComponents';
+import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
+import { theme } from '../../Data/theme';
+import { ButtonBase } from '@mui/material';
 
-const Footer = styled.div`
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 58px;
-  background-color: ${theme.palette.primary.main};
+const SupportContainer = styled.div`
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 0 16px;
+  margin: 16px 0;
+`;
+
+const SupportButton = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  background-color: ${theme.palette.primary.main};
+  border-radius: 4px;
+  margin: 0 1rem;
+  padding: 0 1rem;
+  transition: background-color 0.2s ease-in-out;
+  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.3);
+  &:hover {
+    background-color: ${theme.palette.primary.dark};
+  }
 `;
 
 export const SupportMe = () => {
+  const handleOpenBuyMeCoffee = () => {
+    window.open('https://www.buymeacoffee.com/vikeo');
+  };
+
+  const handleOpenKoFi = () => {
+    window.open('https://ko-fi.com/vikeo');
+  };
+
   return (
-    <Footer>
-      <Paragraph>Support me</Paragraph>
-    </Footer>
+    <SupportContainer>
+      <SupportButton onClick={handleOpenBuyMeCoffee}>
+        <BuyMeCoffee
+          height={'24px'}
+          width={'24px'}
+          style={{ marginRight: '0.5rem' }}
+        />
+        <Paragraph>Buy me a tea</Paragraph>
+      </SupportButton>
+      <SupportButton onClick={handleOpenKoFi}>
+        <KoFi
+          height={'24px'}
+          width={'24px'}
+          style={{ marginRight: '0.5rem' }}
+        />
+        <Paragraph>Buy me a ko-fi</Paragraph>
+      </SupportButton>
+    </SupportContainer>
   );
 };
diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx
index eee8c19..956c50c 100644
--- a/src/Components/Views/StartMenu/StartMenu.tsx
+++ b/src/Components/Views/StartMenu/StartMenu.tsx
@@ -206,7 +206,7 @@ const Start = ({
           Start Game
         </Button>
       </FormControl>
-      {/* <SupportMe /> */}
+      <SupportMe />
     </MainWrapper>
   );
 };
diff --git a/src/Icons/generated/Support/BmcLogo.tsx b/src/Icons/generated/Support/BuyMeCoffee.tsx
similarity index 98%
rename from src/Icons/generated/Support/BmcLogo.tsx
rename to src/Icons/generated/Support/BuyMeCoffee.tsx
index 59148eb..5cbb6ad 100644
--- a/src/Icons/generated/Support/BmcLogo.tsx
+++ b/src/Icons/generated/Support/BuyMeCoffee.tsx
@@ -6,7 +6,7 @@ interface SVGRProps {
   titleId?: string;
   size?: string;
 }
-const BmcLogo = ({
+const BuyMeCoffee = ({
   title,
   titleId,
   ...props
@@ -17,6 +17,7 @@ const BmcLogo = ({
       width={props.size || 16}
       height={props.size || 16}
       fill="none"
+      viewBox="0 0 884 1279"
       aria-labelledby={titleId}
       {...props}
     >
@@ -44,7 +45,7 @@ const BmcLogo = ({
     </svg>
   );
 };
-BmcLogo.propTypes = {
+BuyMeCoffee.propTypes = {
   title: PropTypes.string,
 };
-export default BmcLogo;
+export default BuyMeCoffee;
diff --git a/src/Icons/generated/Support/KoFi.tsx b/src/Icons/generated/Support/KoFi.tsx
new file mode 100644
index 0000000..245030c
--- /dev/null
+++ b/src/Icons/generated/Support/KoFi.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import PropTypes from 'prop-types';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const KoFi = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 1239 853"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M107.5 53c-25.3 5.3-45.4 25.5-52.6 52.8-2 7.5-2.1 10.6-2.6 149.2-.5 140.1.9 363.3 2.7 402 1.3 29.3 5.6 47.7 16.2 68.3 17.5 34.1 50.2 58.8 91.3 69 21.9 5.5 8.6 5.2 239.5 4.9 251.4-.4 344.2-1.3 354.1-3.6 20.2-4.7 42.5-14.1 58.8-25 38.2-25.4 63.6-70.1 70.7-124.1.9-6.6 1.7-13 2-14.1.3-2 1.2-2.2 11.6-2.8 72.5-4.4 136.5-27.3 188.8-67.6 13.5-10.4 38.9-36.3 49.4-50.2 28-37.6 45-78.9 52.3-127.3 2.7-18.2 2.5-63.7-.5-83.2-8.6-56.9-28.2-104.6-59.2-143.8-9-11.4-30.8-32.7-42.5-41.6-43.6-33.2-86.9-51.6-143.5-61.2l-12.5-2.1-410-.2c-225.5-.1-411.8.2-414 .6zM929 111.5c39.9 4.7 72.9 16.6 106 38.2 16.2 10.7 22.1 15.3 33.9 26.7 33.5 32.6 54.1 75.5 62.6 130.6 2.2 14.3 3.1 46.8 1.6 61.1-5.1 49.5-24.8 92.7-57.6 126.8-39.7 41.3-91.1 65.8-156 74.7-7 .9-23.6 1.9-40 2.3l-28 .6-5.4 3c-10.1 5.6-15.1 14.9-15.1 28 0 12.5-2 32.4-4.5 45.1-9.3 46.3-33 74.7-73.5 87.9l-8.5 2.8-62 .8c-34.1.4-159.2.9-278 1.1l-216 .3-8.8-2.3c-34.2-8.7-54.5-26.9-63.2-56.7-2.1-7.2-2.8-12.5-3.5-26-1.7-31.5-3.2-252.8-2.8-395.5.4-150.5.2-143.4 5.1-148.8l2-2.2h399.6c344.8 0 401.3.2 412.1 1.5z" />
+      <path d="M855.3 184.5c-10.8 3-18 10.3-20.8 21.1-2.3 8.8-2.3 261 0 269.8 3 11.3 11.3 19.4 22.3 21.7 7 1.4 64 .7 78.1-1.1 11.3-1.4 22.7-5.2 38.6-13 44.8-21.9 70.7-55.3 81.3-105 5-22.8 5.5-59.4 1.3-79.1-5.8-26.7-15.8-46.9-33.4-67-21.5-24.6-49.7-40.4-83.2-46.5-13-2.4-76.6-3.1-84.2-.9zM925 242c26.5 3.2 48.2 16.8 62.7 39.2 9.6 14.8 13.3 29.8 13.3 53.7 0 51.6-18.4 82.3-59.5 99.2-7.8 3.2-11.1 4-20.6 4.9-6.3.5-15.6 1-20.6 1H891V241h12.8c7 0 16.6.5 21.2 1z" />
+      <path
+        fill="#FF504F"
+        d="M561.8 245.6c-28.7 5.2-60.3 22.1-83.5 44.7l-6.2 6-9.8-9.4c-20.6-19.7-46.1-33.2-74.3-39.4-11.6-2.5-36.4-3.1-49-1.1-41.8 6.6-73 31-84.8 66.1-6 17.6-7.4 42.4-3.8 63 4.9 27.5 17.3 56.3 32.4 75.3C302 475 359.3 531.2 433 598c37.5 34 35.1 32.4 42 29.3 7.5-3.4 96.9-88.3 144.9-137.7 38.7-39.7 49.3-52.6 59-71.7 11.8-23.2 16.7-44.3 15.8-68.7-.7-22.4-6.3-40.4-17.7-57.1-16.1-23.8-44.3-41.1-75.7-46.6-10.5-1.8-29.2-1.8-39.5.1z"
+      />
+    </svg>
+  );
+};
+KoFi.propTypes = {
+  title: PropTypes.string,
+};
+export default KoFi;
diff --git a/src/Icons/generated/Support/index.ts b/src/Icons/generated/Support/index.ts
index 6a74678..0cca453 100644
--- a/src/Icons/generated/Support/index.ts
+++ b/src/Icons/generated/Support/index.ts
@@ -1 +1,2 @@
-export { default as BmcLogo } from './BmcLogo';
+export { default as BuyMeCoffee } from './BuyMeCoffee';
+export { default as KoFi } from './KoFi';
diff --git a/src/Icons/svgs/Support/bmc-logo.svg b/src/Icons/svgs/Support/BuyMeCoffee.svg
similarity index 98%
rename from src/Icons/svgs/Support/bmc-logo.svg
rename to src/Icons/svgs/Support/BuyMeCoffee.svg
index 5ba6db9..5e75247 100644
--- a/src/Icons/svgs/Support/bmc-logo.svg
+++ b/src/Icons/svgs/Support/BuyMeCoffee.svg
@@ -1,4 +1,4 @@
-<svg width="884" height="1279" viewBox="0 0 884 1279" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="20" height="20" viewBox="0 0 884 1279" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M791.109 297.518L790.231 297.002L788.201 296.383C789.018 297.072 790.04 297.472 791.109 297.518V297.518Z" fill="#0D0C22"/>
 <path d="M803.896 388.891L802.916 389.166L803.896 388.891Z" fill="#0D0C22"/>
 <path d="M791.484 297.377C791.359 297.361 791.237 297.332 791.118 297.29C791.111 297.371 791.111 297.453 791.118 297.534C791.252 297.516 791.379 297.462 791.484 297.377V297.377Z" fill="#0D0C22"/>
diff --git a/src/Icons/svgs/Support/KoFi.svg b/src/Icons/svgs/Support/KoFi.svg
new file mode 100644
index 0000000..51ee306
--- /dev/null
+++ b/src/Icons/svgs/Support/KoFi.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1239.000000pt" height="853.000000pt" viewBox="0 0 1239.000000 853.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,853.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none"
+>
+<path d="M1075 8000 c-253 -53 -454 -255 -526 -528 -20 -75 -21 -106 -26
+-1492 -5 -1401 9 -3633 27 -4020 13 -293 56 -477 162 -683 175 -341 502 -588
+913 -690 219 -55 86 -52 2395 -49 2514 4 3442 13 3541 36 202 47 425 141 588
+250 382 254 636 701 707 1241 9 66 17 130 20 141 3 20 12 22 116 28 725 44
+1365 273 1888 676 135 104 389 363 494 502 280 376 450 789 523 1273 27 182
+25 637 -5 832 -86 569 -282 1046 -592 1438 -90 114 -308 327 -425 416 -436
+332 -869 516 -1435 612 l-125 21 -4100 2 c-2255 1 -4118 -2 -4140 -6z m8215
+-585 c399 -47 729 -166 1060 -382 162 -107 221 -153 339 -267 335 -326 541
+-755 626 -1306 22 -143 31 -468 16 -611 -51 -495 -248 -927 -576 -1268 -397
+-413 -911 -658 -1560 -747 -70 -9 -236 -19 -400 -23 l-280 -6 -54 -30 c-101
+-56 -151 -149 -151 -280 0 -125 -20 -324 -45 -451 -93 -463 -330 -747 -735
+-879 l-85 -28 -620 -8 c-341 -4 -1592 -9 -2780 -11 l-2160 -3 -88 23 c-342 87
+-545 269 -632 567 -21 72 -28 125 -35 260 -17 315 -32 2528 -28 3955 4 1505 2
+1434 51 1488 l20 22 3996 0 c3448 0 4013 -2 4121 -15z"/>
+<path d="M8553 6685 c-108 -30 -180 -103 -208 -211 -23 -88 -23 -2610 0 -2698
+30 -113 113 -194 223 -217 70 -14 640 -7 781 11 113 14 227 52 386 130 448
+219 707 553 813 1050 50 228 55 594 13 791 -58 267 -158 469 -334 670 -215
+246 -497 404 -832 465 -130 24 -766 31 -842 9z m697 -575 c265 -32 482 -168
+627 -392 96 -148 133 -298 133 -537 0 -516 -184 -823 -595 -992 -78 -32 -111
+-40 -206 -49 -63 -5 -156 -10 -206 -10 l-93 0 0 995 0 995 128 0 c70 0 166 -5
+212 -10z" />
+<path d="M5618 6074 c-287 -52 -603 -221 -835 -447 l-62 -60 -98 94 c-206 197
+-461 332 -743 394 -116 25 -364 31 -490 11 -418 -66 -730 -310 -848 -661 -60
+-176 -74 -424 -38 -630 49 -275 173 -563 324 -753 192 -242 765 -804 1502
+-1472 375 -340 351 -324 420 -293 75 34 969 883 1449 1377 387 397 493 526
+590 717 118 232 167 443 158 687 -7 224 -63 404 -177 571 -161 238 -443 411
+-757 466 -105 18 -292 18 -395 -1z" fill="#FF504F"/>
+</g>
+</svg>
diff --git a/svgr.config.js b/svgr.config.js
index f5df7bf..b451414 100644
--- a/svgr.config.js
+++ b/svgr.config.js
@@ -15,7 +15,8 @@ module.exports = {
               onlyMatchedOnce: false,
             },
             removeDoctype: false,
-            removeViewBox: true,
+            removeViewBox: false,
+            mergePaths: true,
           },
         },
       },