diff --git a/frontend/__tests__/unit/components/ModeToggle.test.tsx b/frontend/__tests__/unit/components/ModeToggle.test.tsx
index 6156d3a63a..b5fd4fdff1 100644
--- a/frontend/__tests__/unit/components/ModeToggle.test.tsx
+++ b/frontend/__tests__/unit/components/ModeToggle.test.tsx
@@ -23,6 +23,23 @@ jest.mock('@heroui/tooltip', () => ({
   Tooltip: ({ children }: React.PropsWithChildren) => <>{children}</>,
 }))
 
+jest.mock('@fortawesome/react-fontawesome', () => ({
+  FontAwesomeIcon: ({ icon, className }: { icon: { iconName?: string }; className?: string }) => (
+    <svg
+      data-icon={icon?.iconName || 'moon'}
+      className={className}
+      data-testid="font-awesome-icon"
+    />
+  ),
+}))
+
+jest.mock('components/icons/Sun', () => ({
+  __esModule: true,
+  default: ({ className }: { className?: string }) => (
+    <svg data-testid="sun-icon" data-icon="sun" className={className} viewBox="0 0 48 48" />
+  ),
+}))
+
 const useThemeMock = useTheme as jest.Mock
 
 describe('ModeToggle Component', () => {
diff --git a/frontend/jest.config.ts b/frontend/jest.config.ts
index 23048d8e9b..d3adbeeccf 100644
--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -8,6 +8,7 @@ const config: Config = {
     '!src/app/**/layout.tsx',
     '!src/app/api/**',
     '!src/app/board/**',
+    '!src/components/icons/**',
     '!src/app/my/**',
     '!src/app/settings/**',
     '!src/components/Mentee*.tsx',
diff --git a/frontend/src/components/ModeToggle.tsx b/frontend/src/components/ModeToggle.tsx
index 65965c56e0..a6c8b6fde1 100644
--- a/frontend/src/components/ModeToggle.tsx
+++ b/frontend/src/components/ModeToggle.tsx
@@ -1,9 +1,11 @@
-import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons'
+import { faMoon } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { Tooltip } from '@heroui/tooltip'
 import { useTheme } from 'next-themes'
 import { useState, useEffect } from 'react'
+import Sun from 'components/icons/Sun'
+
 export default function ModeToggle() {
   const [mounted, setMounted] = useState(false)
   const { theme, setTheme } = useTheme()
@@ -27,11 +29,15 @@ export default function ModeToggle() {
           aria-label={theme === 'dark' ? 'Enable light mode' : 'Enable dark mode'}
         >
           <div className="absolute inset-0 flex items-center justify-center">
-            <FontAwesomeIcon
-              icon={theme === 'dark' ? faSun : faMoon}
-              className="h-5 w-5 transform text-gray-900 transition-all duration-300 hover:rotate-12 dark:text-gray-100"
-              fixedWidth
-            />
+            {theme === 'dark' ? (
+              <Sun variant="regular" className="h-5 w-5 text-white transition-all duration-300" />
+            ) : (
+              <FontAwesomeIcon
+                icon={faMoon}
+                className="h-5 w-5 transform text-white transition-all duration-300 hover:rotate-12"
+                fixedWidth
+              />
+            )}
           </div>
         </Button>
       </Tooltip>
diff --git a/frontend/src/components/icons/Sun.tsx b/frontend/src/components/icons/Sun.tsx
new file mode 100644
index 0000000000..a853309344
--- /dev/null
+++ b/frontend/src/components/icons/Sun.tsx
@@ -0,0 +1,25 @@
+interface SunProps {
+  readonly className?: string
+  readonly variant?: 'regular' | 'solid'
+}
+
+export default function Sun({ className, variant = 'regular' }: Readonly<SunProps>) {
+  const paths = {
+    solid:
+      'M 11 0 L 11 3 L 13 3 L 13 0 L 11 0 z M 4.2226562 2.8085938 L 2.8085938 4.2226562 L 4.9296875 6.34375 L 6.34375 4.9296875 L 4.2226562 2.8085938 z M 19.777344 2.8085938 L 17.65625 4.9296875 L 19.070312 6.34375 L 21.191406 4.2226562 L 19.777344 2.8085938 z M 12 5 A 7 7 0 0 0 5 12 A 7 7 0 0 0 12 19 A 7 7 0 0 0 19 12 A 7 7 0 0 0 12 5 z M 0 11 L 0 13 L 3 13 L 3 11 L 0 11 z M 21 11 L 21 13 L 24 13 L 24 11 L 21 11 z M 4.9296875 17.65625 L 2.8085938 19.777344 L 4.2226562 21.191406 L 6.34375 19.070312 L 4.9296875 17.65625 z M 19.070312 17.65625 L 17.65625 19.070312 L 19.777344 21.191406 L 21.191406 19.777344 L 19.070312 17.65625 z M 11 21 L 11 24 L 13 24 L 13 21 L 11 21 z',
+
+    regular:
+      'M 11 0 L 11 3 L 13 3 L 13 0 L 11 0 z M 4.2226562 2.8085938 L 2.8085938 4.2226562 L 4.9296875 6.34375 L 6.34375 4.9296875 L 4.2226562 2.8085938 z M 19.777344 2.8085938 L 17.65625 4.9296875 L 19.070312 6.34375 L 21.191406 4.2226562 L 19.777344 2.8085938 z M 12 5 C 8.1458514 5 5 8.1458514 5 12 C 5 15.854149 8.1458514 19 12 19 C 15.854149 19 19 15.854149 19 12 C 19 8.1458514 15.854149 5 12 5 z M 12 7 C 14.773268 7 17 9.2267316 17 12 C 17 14.773268 14.773268 17 12 17 C 9.2267316 17 7 14.773268 7 12 C 7 9.2267316 9.2267316 7 12 7 z M 0 11 L 0 13 L 3 13 L 3 11 L 0 11 z M 21 11 L 21 13 L 24 13 L 24 11 L 21 11 z M 4.9296875 17.65625 L 2.8085938 19.777344 L 4.2226562 21.191406 L 6.34375 19.070312 L 4.9296875 17.65625 z M 19.070312 17.65625 L 17.65625 19.070312 L 19.777344 21.191406 L 21.191406 19.777344 L 19.070312 17.65625 z M 11 21 L 11 24 L 13 24 L 13 21 L 11 21 z',
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className={className}
+      fill="currentColor"
+    >
+      <path d={paths[variant]} />
+    </svg>
+  )
+}