diff --git a/fe/src/components/SitesFab.tsx b/fe/src/components/SitesFab.tsx
index 9a5a169..5502bef 100644
--- a/fe/src/components/SitesFab.tsx
+++ b/fe/src/components/SitesFab.tsx
@@ -1,14 +1,15 @@
-import Avatar from "@mui/material/Avatar";
-import Stack from "@mui/material/Stack";
-import Popover from "@mui/material/Popover";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
+import Avatar from '@mui/material/Avatar';
+import Stack from '@mui/material/Stack';
+import Popover from '@mui/material/Popover';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
 import { useTranslation } from 'react-i18next';
 
-import React from "react";
+import React from 'react';
+import Title from './Title';
 
-export default function SitesIcon (){
+export default function SitesIcon() {
   const { t } = useTranslation();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [isOpen, setIsOpen] = React.useState<any>(null);
@@ -24,11 +25,11 @@ export default function SitesIcon (){
     setIsOpen(null);
   };
   const toBiggerIcon = {
-    "&:hover": {
-      transform: "scale(1.5)",
+    '&:hover': {
+      transform: 'scale(1.5)',
     },
-    "&": {
-      transition: "all 0.3s ease-in-out",
+    '&': {
+      transition: 'all 0.3s ease-in-out',
     },
   };
 
@@ -38,172 +39,191 @@ export default function SitesIcon (){
   };
 
   return (
-    <Stack
-      ref={anchor}
-      id="sitesIcon"
-      direction="row"
-      spacing={2}
-    >
-    <Box sx={toBiggerIcon}>
+    <Stack ref={anchor} id='sitesIcon' direction='row' spacing={2}>
+      <Box sx={toBiggerIcon}>
         <Link
-        href="https://depremyardim.com/"
-        target="_blank"
-        rel="noopener noreferrer"
-        onMouseEnter={() => handlePopoverOpen("depremYardim")}
-        onMouseLeave={handlePopoverClose}
+          href='https://depremyardim.com/'
+          target='_blank'
+          rel='noopener noreferrer'
+          onMouseEnter={() => handlePopoverOpen('depremYardim')}
+          onMouseLeave={handlePopoverClose}
         >
-        <Avatar
+          <Avatar
             sx={littleIcon}
-            alt="deprem yardim icon"
-            src="/icons/depremYardımIcon.svg"
-        />
+            alt='deprem yardim icon'
+            src='/icons/depremYardımIcon.svg'
+          />
         </Link>
 
         <Popover
-          anchorReference="anchorEl"
+          anchorReference='anchorEl'
           anchorEl={anchorEl}
-          open={isOpen === "depremYardim"}
+          open={isOpen === 'depremYardim'}
           anchorOrigin={{
-              vertical: "bottom",
-              horizontal: "right",
+            vertical: 'bottom',
+            horizontal: 'right',
           }}
           transformOrigin={{
-              vertical: "top",
-              horizontal: "right",
+            vertical: 'top',
+            horizontal: 'right',
           }}
           sx={{
-            background: "rgba(0, 0, 0, 0.1)",
-            pointerEvents: "none",
+            background: 'rgba(0, 0, 0, 0.1)',
+            pointerEvents: 'none',
             zIndex: 600,
           }}
           onClose={handlePopoverClose}
         >
-          <Typography sx={{ padding: "10px", width: "450px" }}>
-              {t("page.tooltip.depremyardim")}
-          </Typography>
+          <Box
+            sx={{
+              width: 450,
+              padding: '10px',
+            }}
+          >
+            <Title title={t('page.tooltip.depremyardim.title')} />
+            <Typography>{t('page.tooltip.depremyardim.desc')}</Typography>
+          </Box>
         </Popover>
-    </Box>
-    <Box sx={toBiggerIcon}>
-      <Link
-      href="https://afetharita.com/"
-      target="_blank"
-      rel="noopener noreferrer"
-      onMouseEnter={() => handlePopoverOpen("afetBilgi")}
-      onMouseLeave={handlePopoverClose}
-      style={{
-          textDecoration: "none",
-      }}
-      >
-        <Avatar
+      </Box>
+      <Box sx={toBiggerIcon}>
+        <Link
+          href='https://afetharita.com/'
+          target='_blank'
+          rel='noopener noreferrer'
+          onMouseEnter={() => handlePopoverOpen('afetBilgi')}
+          onMouseLeave={handlePopoverClose}
+          style={{
+            textDecoration: 'none',
+          }}
+        >
+          <Avatar
             sx={littleIcon}
-            alt="deprem yardim icon"
-            src="/icons/afetHaritaIcon.svg"
-        />
-      </Link>
-      <Popover
-        anchorReference="anchorEl"
-        anchorEl={anchorEl}
-        open={isOpen  === "afetBilgi" }
-        anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-        }}
-        transformOrigin={{
-            vertical: "top",
-            horizontal: "right",
-        }}
-        sx={{
-            background: "rgba(0, 0, 0, 0.1)",
-            pointerEvents: "none",
+            alt='deprem yardim icon'
+            src='/icons/afetHaritaIcon.svg'
+          />
+        </Link>
+        <Popover
+          anchorReference='anchorEl'
+          anchorEl={anchorEl}
+          open={isOpen === 'afetBilgi'}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          sx={{
+            background: 'rgba(0, 0, 0, 0.1)',
+            pointerEvents: 'none',
             zIndex: 600,
-        }}
-        onClose={handlePopoverClose}
+          }}
+          onClose={handlePopoverClose}
         >
-        <Typography sx={{ padding: "10px", width: "450px" }}>
-            {t("page.tooltip.afetharita")}
-        </Typography>
-      </Popover>
-    </Box>
+          <Box
+            sx={{
+              width: 450,
+              padding: '10px',
+            }}
+          >
+            <Title title={t('page.tooltip.afetharita.title')} />
+            <Typography>{t('page.tooltip.afetharita.desc')}</Typography>
+          </Box>
+        </Popover>
+      </Box>
 
-    <Box sx={toBiggerIcon}>
-      <Link
-        href="https://deprem.io/"
-        target="_blank"
-        rel="noopener noreferrer"
-        onMouseEnter={() => handlePopoverOpen("depremIO")}
-        onMouseLeave={handlePopoverClose}
+      <Box sx={toBiggerIcon}>
+        <Link
+          href='https://deprem.io/'
+          target='_blank'
+          rel='noopener noreferrer'
+          onMouseEnter={() => handlePopoverOpen('depremIO')}
+          onMouseLeave={handlePopoverClose}
         >
-        <Avatar
+          <Avatar
             sx={littleIcon}
-            alt="deprem io icon"
-            src="/icons/depremIOIcon.svg"
-        />
+            alt='deprem io icon'
+            src='/icons/depremIOIcon.svg'
+          />
         </Link>
 
         <Popover
-        anchorReference="anchorEl"
-        anchorEl={anchorEl}
-        open={isOpen === "depremIO" }
-        anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-        }}
-        transformOrigin={{
-            vertical: "top",
-            horizontal: "right",
-        }}
-        sx={{
-          background: "rgba(0, 0, 0, 0.1)",
-          pointerEvents: "none",
-          zIndex: 600,
-        }}
-        onClose={handlePopoverClose}
+          anchorReference='anchorEl'
+          anchorEl={anchorEl}
+          open={isOpen === 'depremIO'}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          sx={{
+            background: 'rgba(0, 0, 0, 0.1)',
+            pointerEvents: 'none',
+            zIndex: 600,
+          }}
+          onClose={handlePopoverClose}
         >
-        <Typography sx={{ padding: "10px", width: "450px" }}>
-            {t("page.tooltip.depremio")}
-        </Typography>
-      </Popover>
-    </Box>
+          <Box
+            sx={{
+              width: 450,
+              padding: '10px',
+            }}
+          >
+            <Title title={t('page.tooltip.depremio.title')} />
+            <Typography>{t('page.tooltip.depremio.desc')}</Typography>
+          </Box>
+        </Popover>
+      </Box>
 
       <Box sx={toBiggerIcon}>
         <Link
-        href="https://discord.gg/itdepremyardim"
-        target="_blank"
-        onMouseEnter={() => handlePopoverOpen("depremDiscord")}
-        rel="noopener noreferrer"
-        onMouseLeave={handlePopoverClose}
+          href='https://discord.gg/itdepremyardim'
+          target='_blank'
+          onMouseEnter={() => handlePopoverOpen('depremDiscord')}
+          rel='noopener noreferrer'
+          onMouseLeave={handlePopoverClose}
         >
-        <Avatar
+          <Avatar
             sx={littleIcon}
-            alt="discord icon"
-            src="/icons/discordIcon.svg"
-        />
+            alt='discord icon'
+            src='/icons/discordIcon.svg'
+          />
         </Link>
 
         <Popover
-        anchorReference="anchorEl"
-        anchorEl={anchorEl}
-        open={isOpen === "depremDiscord"}
-        anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-        }}
-        transformOrigin={{
-            vertical: "top",
-            horizontal: "right",
-        }}
-        sx={{
-          background: "rgba(0, 0, 0, 0.1)",
-          pointerEvents: "none",
-          zIndex: 600,
-        }}
-        onClose={handlePopoverClose}
+          anchorReference='anchorEl'
+          anchorEl={anchorEl}
+          open={isOpen === 'depremDiscord'}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          sx={{
+            background: 'rgba(0, 0, 0, 0.1)',
+            pointerEvents: 'none',
+            zIndex: 600,
+          }}
+          onClose={handlePopoverClose}
         >
-        <Typography sx={{ padding: "10px", width: "450px" }}>
-            {t("page.tooltip.discord")}
-        </Typography>
+          <Box
+            sx={{
+              width: 450,
+              padding: '10px',
+            }}
+          >
+            <Title title={t('page.tooltip.discord.title')} />
+            <Typography>{t('page.tooltip.discord.desc')}</Typography>
+          </Box>
         </Popover>
       </Box>
     </Stack>
   );
-};
+}
diff --git a/fe/src/utils/locales/ar/translation.json b/fe/src/utils/locales/ar/translation.json
index d0085dc..a3b7eeb 100644
--- a/fe/src/utils/locales/ar/translation.json
+++ b/fe/src/utils/locales/ar/translation.json
@@ -6,10 +6,14 @@
   "page.about.body.1": "http://afetbilgi.com/ is a website created by a group of METU students and graduates to verify and deliver important information to fight against February 6, 2023, Pazarcık Earthquake.",
   "page.about.body.2": "This website is based on a completely human-made database and works with accuracy, speed, and simplicity principles. When contacting us, we strongly ask you to deliver only verified information and cooperate with us to prevent disinformation.",
 
-  "page.tooltip.depremyardim": "موقع يمكنك استخدامه للبحث عن ضحايا الزلزال ومساعدتهم.",
-  "page.tooltip.afetharita": "موقع يمكنك استخدامه لعرض إشعارات المساعدة على الخريطة.",
-  "page.tooltip.depremio": "موقع يمكنك استخدامه لمساعدة ضحايا الزلزال بالطعام.",
-  "page.tooltip.discord": "خادم Discord الذي نستخدمه لتطوير مشاريعنا والتواصل مع بعضنا البعض.",
+  "page.tooltip.depremyardim.title": "depremyardim.com",
+  "page.tooltip.depremyardim.desc": "موقع يمكنك استخدامه للبحث عن ضحايا الزلزال ومساعدتهم.",
+  "page.tooltip.afetharita.title": "afetharita.com",
+  "page.tooltip.afetharita.desc": "موقع يمكنك استخدامه لعرض إشعارات المساعدة على الخريطة.",
+  "page.tooltip.depremio.title": "deprem.io",
+  "page.tooltip.depremio.desc": "موقع يمكنك استخدامه لمساعدة ضحايا الزلزال بالطعام.",
+  "page.tooltip.discord.title": "Discord",
+  "page.tooltip.discord.desc": "خادم Discord الذي نستخدمه لتطوير مشاريعنا والتواصل مع بعضنا البعض.", 
   "page.tooltip.twitter": "حسابنا لتتمكن من التواصل معنا على تويتر",
 
   "category.victim.name": "الحاجات العامة",
diff --git a/fe/src/utils/locales/en/translation.json b/fe/src/utils/locales/en/translation.json
index 194d97f..6f8c531 100644
--- a/fe/src/utils/locales/en/translation.json
+++ b/fe/src/utils/locales/en/translation.json
@@ -6,10 +6,14 @@
   "page.about.body.1": "http://afetbilgi.com/ is a website created by a group of METU students and graduates to verify and deliver important information to fight against February 6, 2023, Pazarcık Earthquake.",
   "page.about.body.2": "This website is based on a completely human-made database and works with accuracy, speed, and simplicity principles. When contacting us, we strongly ask you to deliver only verified information and cooperate with us to prevent disinformation.",
 
-  "page.tooltip.depremyardim": "Website that you can use to search for earthquake victims and help them.",
-  "page.tooltip.afetharita": "Website that you can use to show help notifications on the map.",
-  "page.tooltip.depremio": "Website that you can use to help earthquake victims with food.",
-  "page.tooltip.discord": "Discord server that we use to develop our projects and communicate with each other.",
+  "page.tooltip.depremyardim.title": "depremyardim.com",
+  "page.tooltip.depremyardim.desc": "Website that you can use to search for earthquake victims and help them.",
+  "page.tooltip.afetharita.title": "afetharita.com",
+  "page.tooltip.afetharita.desc": "Website that you can use to show help notifications on the map.",
+  "page.tooltip.depremio.title": "deprem.io",
+  "page.tooltip.depremio.desc": "Website that you can use to help earthquake victims with food.",
+  "page.tooltip.discord.title": "Discord",
+  "page.tooltip.discord.desc": "Discord server that we use to develop our projects and communicate with each other.", 
   "page.tooltip.twitter": "Our Twitter account to reach us via Twitter",
 
   "category.victim.name": "General Needs",
diff --git a/fe/src/utils/locales/ku/translation.json b/fe/src/utils/locales/ku/translation.json
index 6a77c50..e5ae453 100644
--- a/fe/src/utils/locales/ku/translation.json
+++ b/fe/src/utils/locales/ku/translation.json
@@ -6,10 +6,15 @@
   "page.about.body.1": "afetbilgi.com malperek e ku ji aliyê komek xwendekar û mezûnên ODTU ve hatiye amadekirin da ku di têkoşîna li dijî Erdheja 6ê Sibata 2023-an a Bazarcixê de agahiyên girîng verast bike û ewan bi mexdûrên karesatê û yên ku dixwazin alîkariyê bidin re parve bike.",
   "page.about.body.2": "Prensîbên bingehîn ên malperê, ku li ser bingehek bi tevahî ji hêla mirovan ve hatî çêkirin, rastbûn, bilez û sadebûn in. Dema ku bi me re têkilî daynin, em ji we daxwaz dikin ku hûn tenê agahdariyên pejirandî bidin û bi me re bixebitin da ku em pêşî li belavbûna agahdariyê derewîn bigirin.",
 
-  "page.tooltip.depremyardim": "Site ku hewceyê depremê xwe û bişopînin.",
-  "page.tooltip.afetharita": "Site ku hewceyê pêşniyarên bişopînê li ser pêşniyarê bikî.",
-  "page.tooltip.depremio": "Site ku hewceyê depremê xwe bi erzakê bişopînin.",
-  "page.tooltip.discord": "Discord server ku hewceyê projeyên xwe ve bi xweyê din bike.",
+
+  "page.tooltip.depremyardim.title": "depremyardim.com",
+  "page.tooltip.depremyardim.desc": "Site ku hewceyê depremê xwe û bişopînin.",
+  "page.tooltip.afetharita.title": "afetharita.com",
+  "page.tooltip.afetharita.desc": "Site ku hewceyê pêşniyarên bişopînê li ser pêşniyarê bikî.",
+  "page.tooltip.depremio.title": "deprem.io",
+  "page.tooltip.depremio.desc": "Site ku hewceyê depremê xwe bi erzakê bişopînin.",
+  "page.tooltip.discord.title": "Discord",
+  "page.tooltip.discord.desc": "Discord server ku hewceyê projeyên xwe ve bi xweyê din bike.",
   "page.tooltip.twitter": "Hesabê me yê Twitterê bo têkiliyê",
 
   "category.victim.name": "Pêdiviyên gelemperî",
diff --git a/fe/src/utils/locales/tr/translation.json b/fe/src/utils/locales/tr/translation.json
index df413db..6107951 100644
--- a/fe/src/utils/locales/tr/translation.json
+++ b/fe/src/utils/locales/tr/translation.json
@@ -6,11 +6,14 @@
   "page.about.body.1": "afetbilgi.com 6 Şubat 2023 Pazarcık Depremi ile mücadelede önemli bilgilerin doğrulanarak hem afetzedelere hem de yardımcı olmak isteyenlere ulaştırılması için bir grup ODTÜ öğrencisi ve mezunu tarafından kurulmuş bir internet sitesidir.",
   "page.about.body.2": "Gönüllüler tarafından tamamen insan eliyle oluşturulan bir veri tabanı ile insanlara hızlı, teyitli ve faydalı bilgileri sağlama prensibiyle çalışıyoruz. Sadece doğru bilgileri iletmek ve yanlış haberlerin yayılmasını önlemek için bizimle iletişime geçerken sadece teyitli bilgilerin iletilmesini önemle rica ederiz.",
 
-  "page.tooltip.depremyardim": "Depremzedeleri aramak ve yardım etmek için kullanabileceğiniz site.",
-  "page.tooltip.afetharita": "Yardım bildirimlerinin haritada gösterilmesi için kullanabileceğiniz site.",
-  "page.tooltip.depremio": "Depremzedelere erzak yardımı için kullanabileceğiniz site.",
-  "page.tooltip.discord": "Projelerimizi geliştirmek ve birbirimizle iletişim kurmak için kullandığımız Discord sunucusu.",
-  "page.tooltip.twitter": "Bize Twitter'dan ulaşabilmeniz için hesabımız",
+  "page.tooltip.depremyardim.title": "depremyardim.com",
+  "page.tooltip.depremyardim.desc": "Depremzedeleri aramak ve yardım etmek için kullanabileceğiniz site.",
+  "page.tooltip.afetharita.title": "afetharita.com",
+  "page.tooltip.afetharita.desc": "Yardım bildirimlerinin haritada gösterilmesi için kullanabileceğiniz site.",
+  "page.tooltip.depremio.title": "deprem.io",
+  "page.tooltip.depremio.desc": "Depremzedelere erzak yardımı için kullanabileceğiniz site.",
+  "page.tooltip.discord.title": "Discord",
+  "page.tooltip.discord.desc": "Projelerimizi geliştirmek ve birbirimizle iletişim kurmak için kullandığımız Discord sunucusu.",
 
   "category.victim.name": "Genel İhtiyaçlar",
   "category.helper.name": "Yardım Etmek İsteyenler İçin",