diff --git a/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx b/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx
index dea7350..d1d11c3 100644
--- a/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx
+++ b/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx
@@ -1,5 +1,7 @@
 import Image from 'next/image'
 import { useState } from 'react'
+import useTranslation from 'next-translate/useTranslation'
+import classNames from 'classnames'
 
 import { Loader } from '../../design/Loader'
 
@@ -9,47 +11,58 @@ export interface ConfirmGuildJoinProps {
   handleNo: () => void | Promise<void>
 }
 
-export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = (props) => {
-  const { className, handleYes, handleNo } = props
-
+export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
+  ...props
+}) => {
+  const { t } = useTranslation()
   const [isLoading, setIsLoading] = useState(false)
 
   const handleYesLoading = async (): Promise<void> => {
     setIsLoading((isLoading) => !isLoading)
-    await handleYes()
+    await props.handleYes()
   }
 
   return (
-    <div className={className}>
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <>
-          <Image
-            src='/images/svg/design/join-guild.svg'
-            alt='Join Guild Illustration'
-            height={150}
-            width={150}
-          />
-          <div className='mt-8 flex flex-col'>
-            <h1 className='mb-6 text-center text-xl'>Rejoindre la guild ?</h1>
-            <div className='flex gap-7'>
-              <button
-                className='rounded-3xl bg-success px-8 py-2 transition hover:opacity-50'
-                onClick={handleYesLoading}
-              >
-                Oui
-              </button>
-              <button
-                className='rounded-3xl bg-error px-8 py-2 transition hover:opacity-50'
-                onClick={handleNo}
-              >
-                Non
-              </button>
-            </div>
+    <div className={props.className}>
+      <Loader
+        className={classNames('absolute scale-0 transition', {
+          'scale-100': isLoading
+        })}
+      />
+      <div
+        className={classNames(
+          'visible flex flex-col items-center opacity-100 transition-all',
+          {
+            'invisible opacity-0': isLoading
+          }
+        )}
+      >
+        <Image
+          src='/images/svg/design/join-guild.svg'
+          alt='Join Guild Illustration'
+          height={150}
+          width={150}
+        />
+        <div className='mt-8 flex flex-col'>
+          <h1 className='mb-6 text-center text-xl'>
+            {t('application:join-the-guild')} ?
+          </h1>
+          <div className='flex gap-7'>
+            <button
+              className='rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
+              onClick={handleYesLoading}
+            >
+              {t('common:yes')}
+            </button>
+            <button
+              className='rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
+              onClick={props.handleNo}
+            >
+              {t('common:no')}
+            </button>
           </div>
-        </>
-      )}
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx b/components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx
index 5a96fc2..3b41ba3 100644
--- a/components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx
+++ b/components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx
@@ -53,7 +53,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
   }
 
   return (
-    <div className='relative overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700'>
+    <div className='relative h-80 overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700'>
       <div
         className={classNames(
           'flex h-full cursor-pointer flex-col items-center justify-center p-4 pt-8 transition duration-200 ease-in-out',
@@ -83,9 +83,9 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
             {guild.description != null ? (
               guild.description
             ) : (
-              <span className='flex h-full items-center justify-center opacity-25'>
+              <span className='flex h-full items-center justify-center opacity-40 dark:opacity-20'>
                 <Emoji value=':eyes:' size={25} />
-                <span className='ml-2'>Nothing&apos;s here...</span>
+                <span className='ml-2'>{t('application:nothing-here')}</span>
               </span>
             )}
           </p>
diff --git a/components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx b/components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx
index 54dcbaf..f3f9c87 100644
--- a/components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx
+++ b/components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx
@@ -52,12 +52,12 @@ export const JoinGuildsPublic: React.FC = () => {
       />
       <div className='w-full p-12'>
         <InfiniteScroll
-          className='guilds-public-list mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible'
+          className='guilds-public-list relative mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible'
           dataLength={items.length}
           next={nextPage}
           scrollableTarget='application-page-content'
           hasMore={hasMore}
-          loader={<Loader />}
+          loader={<Loader className='absolute left-1/2 -translate-x-1/2' />}
         >
           {items.map((guild) => {
             return <GuildPublic guild={guild} key={guild.id} />
diff --git a/components/Application/SendMessage/SendMessage.tsx b/components/Application/SendMessage/SendMessage.tsx
index 76455a0..8939876 100644
--- a/components/Application/SendMessage/SendMessage.tsx
+++ b/components/Application/SendMessage/SendMessage.tsx
@@ -1,6 +1,7 @@
 import { useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import TextareaAutosize from 'react-textarea-autosize'
+import classNames from 'classnames'
 
 import { GuildsChannelsPath } from '..'
 import { useAuthentication } from '../../../tools/authentication'
@@ -77,50 +78,57 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
   }
 
   return (
-    <>
-      {isVisibleEmojiPicker && <EmojiPicker onClick={handleEmojiPicker} />}
-      <div className='p-6 pb-4'>
-        <div className='flex h-full w-full rounded-lg bg-gray-200 py-1 text-gray-600 dark:bg-gray-800 dark:text-gray-200'>
-          <form
-            className='flex h-full w-full items-center'
-            onSubmit={handleSubmit}
-            onKeyDown={handleTextareaKeyDown}
+    <div className='relative p-6 pb-4'>
+      <div
+        className={classNames(
+          'absolute bottom-24 right-20 z-50 w-fit transition-all duration-100',
+          {
+            'invisible translate-y-5 opacity-0': !isVisibleEmojiPicker
+          }
+        )}
+      >
+        <EmojiPicker onClick={handleEmojiPicker} />
+      </div>
+      <div className='flex h-full w-full rounded-lg bg-gray-200 py-1 text-gray-600 dark:bg-gray-800 dark:text-gray-200'>
+        <form
+          className='flex h-full w-full items-center'
+          onSubmit={handleSubmit}
+          onKeyDown={handleTextareaKeyDown}
+        >
+          <TextareaAutosize
+            className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 font-paragraph tracking-wide outline-none'
+            placeholder={t('application:write-a-message')}
+            wrap='soft'
+            maxRows={6}
+            name='message'
+            onChange={handleTextareaChange}
+            value={message}
+            ref={textareaReference}
+            autoFocus
+          />
+        </form>
+        <div className='flex h-full items-center justify-around pr-6'>
+          <button
+            className='flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1'
+            onClick={handleVisibleEmojiPicker}
           >
-            <TextareaAutosize
-              className='scrollbar-firefox-support my-2 w-full resize-none bg-transparent p-2 px-6 font-paragraph tracking-wide outline-none'
-              placeholder={t('application:write-a-message')}
-              wrap='soft'
-              maxRows={6}
-              name='message'
-              onChange={handleTextareaChange}
-              value={message}
-              ref={textareaReference}
-              autoFocus
+            🙂
+          </button>
+          <button className='relative flex h-full w-full cursor-pointer items-center justify-center p-1 text-green-800 transition hover:-translate-y-1 dark:text-green-400'>
+            <input
+              type='file'
+              className='absolute h-full w-full cursor-pointer opacity-0'
+              onChange={handleFileChange}
             />
-          </form>
-          <div className='flex h-full items-center justify-around pr-6'>
-            <button
-              className='flex h-full w-full items-center justify-center p-1 text-2xl transition hover:-translate-y-1'
-              onClick={handleVisibleEmojiPicker}
-            >
-              🙂
-            </button>
-            <button className='relative flex h-full w-full cursor-pointer items-center justify-center p-1 text-green-800 transition hover:-translate-y-1 dark:text-green-400'>
-              <input
-                type='file'
-                className='absolute h-full w-full cursor-pointer opacity-0'
-                onChange={handleFileChange}
+            <svg width='25' height='25' viewBox='0 0 22 22'>
+              <path
+                d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z'
+                fill='currentColor'
               />
-              <svg width='25' height='25' viewBox='0 0 22 22'>
-                <path
-                  d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z'
-                  fill='currentColor'
-                />
-              </svg>
-            </button>
-          </div>
+            </svg>
+          </button>
         </div>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/components/Application/UserProfile/UserProfile.tsx b/components/Application/UserProfile/UserProfile.tsx
index adf41d6..91ded51 100644
--- a/components/Application/UserProfile/UserProfile.tsx
+++ b/components/Application/UserProfile/UserProfile.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import classNames from 'classnames'
 import date from 'date-and-time'
 import useTranslation from 'next-translate/useTranslation'
@@ -22,8 +22,8 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
   const { user, guilds } = props
   const { t } = useTranslation()
 
-  const [showPopup, setShowPopup] = useState<boolean>(false)
-  const [confirmation, setConfirmation] = useState<boolean>(false)
+  const [showPopup, setShowPopup] = useState(false)
+  const [confirmation, setConfirmation] = useState(false)
 
   const handleConfirmationState = (): void => {
     setConfirmation((confirmation) => !confirmation)
@@ -60,7 +60,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
               <div className='ml-10 flex flex-col'>
                 <div className='mb-2 flex items-center'>
                   <p
-                    className='space text-3xl font-bold tracking-wide text-white'
+                    className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
                     data-cy='user-name'
                   >
                     {user.name}
@@ -125,12 +125,11 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
         </div>
       </div>
 
-      {/* TODO: We might want to remove this code */}
       <div
         className={classNames(
-          'pointer-events-none absolute top-0 flex h-full w-full items-center justify-center bg-zinc-900/75 opacity-0 transition',
+          'pointer-events-none invisible absolute top-0 flex h-full w-full items-center justify-center bg-zinc-900/75 opacity-0 transition',
           {
-            'pointer-events-auto visible opacity-100': showPopup
+            'pointer-events-auto !visible !opacity-100': showPopup
           }
         )}
       >
@@ -161,8 +160,8 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
         </div>
         <XIcon
           height={40}
-          onClick={() => setShowPopup(false)}
-          className='absolute top-8 right-8 cursor-pointer transition hover:rotate-180'
+          onClick={handlePopupVisibility}
+          className='absolute top-8 right-8 cursor-pointer text-white transition hover:rotate-90'
         />
       </div>
     </div>
diff --git a/components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx b/components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx
index b5c4d41..e7ea65c 100644
--- a/components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx
+++ b/components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx
@@ -1,18 +1,22 @@
 import Image from 'next/image'
 import { LoginIcon } from '@heroicons/react/solid'
+import classNames from 'classnames'
 
 export interface UserProfileGuildProps {
   className?: string
   handleConfirmationState: () => void
 }
 
-export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
-  const { handleConfirmationState } = props
-
+export const UserProfileGuild: React.FC<UserProfileGuildProps> = ({
+  ...props
+}) => {
   return (
     <div
-      className='group relative flex w-full cursor-pointer transition'
-      onClick={handleConfirmationState}
+      className={classNames(
+        'group relative flex w-full cursor-pointer transition',
+        props.className
+      )}
+      onClick={props.handleConfirmationState}
     >
       <div className='relative w-full px-8 py-5 transition group-hover:-translate-x-20'>
         <div className='flex transition group-hover:opacity-40'>
@@ -28,7 +32,7 @@ export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
           </div>
           <div className='flex flex-col'>
             <h1 className='text-xl font-bold'>Guild Name</h1>
-            <p className='mt-2 text-gray-300'>
+            <p className='mt-2 text-gray-900 dark:text-gray-300'>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
               nam.
             </p>
diff --git a/components/design/Loader/Loader.tsx b/components/design/Loader/Loader.tsx
index 6224d11..814790b 100644
--- a/components/design/Loader/Loader.tsx
+++ b/components/design/Loader/Loader.tsx
@@ -1,13 +1,14 @@
 export interface LoaderProps {
   width?: number
   height?: number
+  className?: string
 }
 
 export const Loader: React.FC<LoaderProps> = (props) => {
   const { width = 50, height = 50 } = props
 
   return (
-    <>
+    <div className={props.className}>
       <div data-testid='progress-spinner' className='progress-spinner'>
         <svg className='progress-spinner-svg' viewBox='25 25 50 50'>
           <circle
@@ -29,7 +30,6 @@ export const Loader: React.FC<LoaderProps> = (props) => {
             margin: 0 auto;
             width: ${width}px;
             height: ${height}px;
-            display: inline-block;
           }
           .progress-spinner::before {
             content: '';
@@ -76,6 +76,6 @@ export const Loader: React.FC<LoaderProps> = (props) => {
           }
         `}
       </style>
-    </>
+    </div>
   )
 }
diff --git a/locales/en/application.json b/locales/en/application.json
index 916394d..620b585 100644
--- a/locales/en/application.json
+++ b/locales/en/application.json
@@ -5,6 +5,7 @@
   "create-a-guild": "Create a Guild",
   "create-a-guild-description": "Create your own guild and manage everything.",
   "join-a-guild": "Join a Guild",
+  "join-the-guild": "Join the guild",
   "join-a-guild-description": "Talk, collaborate, share and have fun with your friends by joining an already existing guild!",
   "members": "member(s)",
   "search": "Search",
@@ -12,5 +13,6 @@
   "biography": "Biography",
   "label-checkbox-email": "Show your email to everyone.",
   "label-checkbox-guilds": "Show the list of guilds to everyone.",
-  "private-user-guilds-list": "List of private guilds"
+  "private-user-guilds-list": "List of private guilds",
+  "nothing-here": "Nothing's here..."
 }
diff --git a/locales/en/common.json b/locales/en/common.json
index 95b71f3..0a6553c 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -3,5 +3,7 @@
   "french": "French",
   "all-rights-reserved": "All rights reserved",
   "description": "Stay close with your friends and communities, talk, chat, collaborate, share, and have fun.",
-  "name": "Name"
+  "name": "Name",
+  "yes": "Yes",
+  "no": "No"
 }
diff --git a/locales/fr/application.json b/locales/fr/application.json
index 4a1ef4c..45190fc 100644
--- a/locales/fr/application.json
+++ b/locales/fr/application.json
@@ -5,6 +5,7 @@
   "create-a-guild": "Créer une Guilde",
   "create-a-guild-description": "Créez votre propre guilde et gérez tout.",
   "join-a-guild": "Rejoindre une Guilde",
+  "join-the-guild": "Rejoindre la guilde",
   "join-a-guild-description": "Discutez, collaborez, partagez et amusez-vous avec vos amis en rejoignant une guilde déjà existante!",
   "members": "membre(s)",
   "search": "Rechercher",
@@ -12,5 +13,6 @@
   "biography": "Biographie",
   "label-checkbox-email": "Afficher votre email au public.",
   "label-checkbox-guilds": "Afficher la liste des guildes au public.",
-  "private-user-guilds-list": "Liste des guildes privées"
+  "private-user-guilds-list": "Liste des guildes privées",
+  "nothing-here": "Il n'y a rien ici..."
 }
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 0c3eae3..191beb8 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -3,5 +3,7 @@
   "french": "Français",
   "all-rights-reserved": "Tous droits réservés",
   "description": "Restez proche de vos amis et de vos communautés, parlez, collaborez, partagez et amusez-vous.",
-  "name": "Nom"
+  "name": "Nom",
+  "yes": "Yes",
+  "no": "Non"
 }
diff --git a/styles/global.css b/styles/global.css
index 5608e48..2beae2e 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -45,5 +45,5 @@ body,
 .scrollbar-firefox-support {
   scrollbar-width: thin;
   scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
-  z-index: 1000;
+  z-index: 0;
 }