diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 21f6b89..11f5df4 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -156,5 +156,23 @@
   },
   "slope": "Neigung",
   "azimuth": "Azimuth",
-  "yieldPerYear": "Ertrag pro Jahr"
+  "yieldPerYear": "Ertrag pro Jahr",
+  "cardinal": {
+    "N": "Nord",
+    "NNE": "NNO",
+    "NE": "NO",
+    "ENE": "ONO",
+    "E": "Ost",
+    "ESE": "OSO",
+    "SE": "SO",
+    "SSE": "SSO",
+    "S": "Süd",
+    "SSW": "SSW",
+    "SW": "SW",
+    "WSW": "WSW",
+    "W": "West",
+    "WNW": "WNW",
+    "NW": "NW",
+    "NNW": "NNW"
+  }
 }
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 0edebbe..ddc92b6 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -135,5 +135,23 @@
   },
   "slope": "Slope",
   "azimuth": "Azimuth",
-  "yieldPerYear": "Yield per year"
+  "yieldPerYear": "Yield per year",
+  "cardinal": {
+    "N": "North",
+    "NNE": "NNE",
+    "NE": "NE",
+    "ENE": "ENE",
+    "E": "East",
+    "ESE": "ESE",
+    "SE": "SE",
+    "SSE": "SSE",
+    "S": "South",
+    "SSW": "SSW",
+    "SW": "SW",
+    "WSW": "WSW",
+    "W": "West",
+    "WNW": "WNW",
+    "NW": "NW",
+    "NNW": "NNW"
+  }
 }
diff --git a/src/features/three-viewer/components/MouseHoverInfo.jsx b/src/features/three-viewer/components/MouseHoverInfo.jsx
index 802cc1a..523c60d 100644
--- a/src/features/three-viewer/components/MouseHoverInfo.jsx
+++ b/src/features/three-viewer/components/MouseHoverInfo.jsx
@@ -2,6 +2,30 @@ import { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SceneContext } from '@/features/three-viewer/context/SceneContext'
 
+const CARDINAL_DIRECTIONS = [
+  'N',
+  'NNE',
+  'NE',
+  'ENE',
+  'E',
+  'ESE',
+  'SE',
+  'SSE',
+  'S',
+  'SSW',
+  'SW',
+  'WSW',
+  'W',
+  'WNW',
+  'NW',
+  'NNW',
+]
+
+function azimuthToCardinal(azimuth) {
+  const index = Math.round(azimuth / 22.5) % 16
+  return CARDINAL_DIRECTIONS[index]
+}
+
 /**
  * Displays mouse hover information for slope, azimuth, and yield.
  * Only shown on non-touch devices.
@@ -10,11 +34,16 @@ export const MouseHoverInfo = () => {
   const { t } = useTranslation()
   const { slope, azimuth, yieldPerKWP } = useContext(SceneContext)
 
+  const cardinalDirection =
+    azimuth !== null && azimuth !== undefined
+      ? t(`cardinal.${azimuthToCardinal(azimuth)}`)
+      : null
+
   return (
     <div className='attribution' id='footer-on-hover'>
       {t('slope')}: {slope}°
       <br />
-      {t('azimuth')}: {azimuth}°
+      {t('azimuth')}: {cardinalDirection}
       {yieldPerKWP ? (
         <p>
           {t('yieldPerYear')}: {Math.round(yieldPerKWP / 100) * 100} kWh/kWp