diff --git a/public/icons/cross.png b/public/icons/cross.png
new file mode 100755
index 0000000..6a5c057
Binary files /dev/null and b/public/icons/cross.png differ
diff --git a/src/components/design/index.ts b/src/components/design/index.ts
new file mode 100644
index 0000000..4e20d2b
--- /dev/null
+++ b/src/components/design/index.ts
@@ -0,0 +1 @@
+export * from './Loader'
diff --git a/src/components/layout/Downloaders/Downloaders.tsx b/src/components/layout/Downloaders/Downloaders.tsx
index c665a6c..4d0fccb 100644
--- a/src/components/layout/Downloaders/Downloaders.tsx
+++ b/src/components/layout/Downloaders/Downloaders.tsx
@@ -1,4 +1,5 @@
 import { Fragment, useState } from 'react'
+import classNames from 'classnames'
 
 import { Image, Popup } from '../../system'
 import { Button } from '../Button'
@@ -6,10 +7,13 @@ import { GameAssetsDownloader, GameDataDownloader } from '../../../config/GameDo
 import { handleConvertion } from '../../../tools/handleConvertion'
 import { Downloader } from './Downloader'
 import type { ConvertionHandler } from '../../../types/global'
+import { Loader } from '../../design'
 
 export const Downloaders: React.FC = () => {
   const [message, setMessage] = useState('')
-  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+  const [popup, setPopup] = useState(false)
+  const [loading, setLoading] = useState(true)
 
   const callback: ConvertionHandler = (message, state = 'idle') => {
     switch (state) {
@@ -21,13 +25,47 @@ export const Downloaders: React.FC = () => {
         return setLoading(false)
       case 'error':
         setMessage(message)
+        setError(true)
         return setLoading(false)
     }
   }
 
+  const downloadGameData = async (): Promise<void> => {
+    setPopup(true)
+    setLoading(true)
+
+    const startTime = new Date()
+    await handleConvertion('com', callback)
+
+    const endTime = new Date()
+    const seconds = ((endTime.getTime() - startTime.getTime()) / 1000).toFixed(2)
+
+    return callback(`Completed in: ${seconds} seconds`, 'success')
+  }
+
   return (
     <Fragment>
-      <Popup condition={false}>xd</Popup>
+      <Popup condition={popup}>
+        <span
+          className={classNames('', {
+            'text-red-600': error
+          })}>
+          {message}
+        </span>
+
+        <Loader active={loading} className='mt-10' />
+
+        <Button
+          value='Close'
+          icon={<Image src='/icons/cross.png' />}
+          className={classNames('bg-red-600 mt-6 opacity-0 p-2 px-4 active:opacity-40 invisible text-white', {
+            '!opacity-100 !visible': !loading
+          })}
+          handler={() => {
+            return setPopup(!popup)
+          }}
+        />
+      </Popup>
 
       <ul className='flex gap-x-8'>
         <Downloader content={GameDataDownloader}>
@@ -37,9 +75,7 @@ export const Downloaders: React.FC = () => {
             value='Download Gamedata'
             icon={<Image src='/icons/game.png' size={22} />}
             className='download-button border-gamedata-secondary bg-gamedata-primary shadow-gamedata-primary/20'
-            handler={async () => {
-              return await handleConvertion('com', callback)
-            }}
+            handler={downloadGameData}
           />
         </Downloader>
 
diff --git a/src/components/system/Popup/Popup.tsx b/src/components/system/Popup/Popup.tsx
index 67ca7a6..1c3f4c3 100644
--- a/src/components/system/Popup/Popup.tsx
+++ b/src/components/system/Popup/Popup.tsx
@@ -8,7 +8,7 @@ interface PopupProps {
 export const Popup: React.FC<PopupProps> = ({ condition, children }) => {
   return (
     <AnimateView
-      className='absolute z-20 top-0 left-0 w-screen h-screen bg-black/50 backdrop-blur-xl'
+      className='absolute flex text-white items-center flex-col transition-all justify-center z-20 top-0 left-0 w-screen h-screen bg-black/40 backdrop-blur-xl'
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}