diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx
index 597f597b..5c7d8a9c 100644
--- a/src/Components/Gaming/Quests.tsx
+++ b/src/Components/Gaming/Quests.tsx
@@ -1,3 +1,4 @@
+import QuestionMarkCircleIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
 import { useEffect, useState } from 'react'
 
 import { useAuth } from '#components/Auth/useAuth'
@@ -50,20 +51,7 @@ export function Quests() {
             </div>
             <h2 className='tw-card-title tw-m-auto '>
               Level 1
-              <svg
-                xmlns='http://www.w3.org/2000/svg'
-                fill='none'
-                viewBox='0 0 24 24'
-                strokeWidth={1.5}
-                stroke='#aaa'
-                className='tw-w-5 tw-h-5 tw-cursor-pointer'
-              >
-                <path
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                  d='M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z'
-                />
-              </svg>
+              <QuestionMarkCircleIcon />
             </h2>
             <ul className='tw-flex-row'>
               <li>