diff --git a/frontend/src/app/golfbaner/[slug]/CourseDisplay.tsx b/frontend/src/app/golfbaner/[slug]/CourseDisplay.tsx
index 8e1423d..a3a6219 100644
--- a/frontend/src/app/golfbaner/[slug]/CourseDisplay.tsx
+++ b/frontend/src/app/golfbaner/[slug]/CourseDisplay.tsx
@@ -5,7 +5,6 @@ import { STATUS_MAP } from "@/config/constants";
 // Designerens definisjon av fargetemaer - Nå med kraftigere tints for kolonnene
 const getTeeTheme = (label: string) => {
   const name = label.toLowerCase();
-  
   if (name.includes("svart") || name.includes("black")) {
     return { header: "bg-gray-900 text-white", col: "bg-gray-100", text: "text-gray-900" };
   }
@@ -53,6 +52,7 @@ export default function CourseDisplay({ course }: { course: any }) {
   // Kalkulering av SpH
   const activeTee = availableTees[selectedTeeIndex];
   let playingHandicap = 0;
+
   if (activeTee && hcp) {
     const exactHcp = Number(hcp.replace(',', '.'));
     const slope = Number(activeTee.slopeverdi || activeTee.slopeverdi_damer || 113);
@@ -69,6 +69,11 @@ export default function CourseDisplay({ course }: { course: any }) {
 
   const sumPar = (holes: any[]) => holes.reduce((acc, h) => acc + (h.par || 0), 0);
   const sumLen = (holes: any[], key: string) => holes.reduce((acc, h) => acc + (h.lengths?.[key] || 0), 0);
+  
+  // Formater utløpsdato
+  const slopeExpiry = course.slope_valid_until 
+    ? new Date(course.slope_valid_until).toLocaleDateString('nb-NO', { year: 'numeric', month: 'short', day: 'numeric' })
+    : 'Ukjent';
 
   return (
     <div className="bg-white rounded-[3rem] shadow-sm border border-gray-200 overflow-hidden mb-12">
@@ -77,14 +82,19 @@ export default function CourseDisplay({ course }: { course: any }) {
       <div className="p-8 md:p-12 flex flex-col md:flex-row justify-between items-center gap-8 border-b border-gray-100 bg-white">
         <div className="text-center md:text-left">
            <h2 className="text-5xl font-black text-[#11280f] tracking-tighter">{course.name}</h2>
-           <p className="text-[#7ca982] font-black uppercase text-xs tracking-[0.2em] mt-2">Par {course.par} • {course.length_meters || '--'} meter</p>
-        </div>
+           <p className="text-[#7ca982] font-black uppercase text-xs tracking-[0.2em] mt-2 mb-1">
+             Par {course.par} • {course.length_meters || '--'} meter
+           </p>
+           <p className="text-gray-400 text-[10px] font-bold uppercase tracking-widest">
+             Rating utløper: {slopeExpiry}
+           </p>
+         </div>
         
         <div className="flex items-center gap-6 bg-gray-50 p-6 rounded-[2.5rem] border border-gray-100">
             <div className="flex flex-col"><span className="text-[9px] font-black text-[#7ca982] uppercase ml-1">Kjønn</span>
                 <select value={gender} onChange={e => { setGender(e.target.value as any); setSelectedTeeIndex(0); }} className="bg-transparent text-[#11280f] font-black outline-none border-b-2 border-[#7ca982]/30 pb-1 cursor-pointer">
                     <option value="herrer">HERRER</option><option value="damer">DAMER</option>
-                </select>
+                 </select>
             </div>
             <div className="flex flex-col"><span className="text-[9px] font-black text-[#7ca982] uppercase ml-1">Utslag</span>
                 <select value={selectedTeeIndex} onChange={e => setSelectedTeeIndex(Number(e.target.value))} className="bg-transparent text-[#11280f] font-black outline-none border-b-2 border-[#7ca982]/30 pb-1 cursor-pointer">
@@ -125,7 +135,7 @@ export default function CourseDisplay({ course }: { course: any }) {
                   <td className="p-4 text-left pl-10 font-black text-lg text-gray-800">{h.hole_number}</td>
                   <td className="p-4 border-l border-gray-100 bg-white">{h.par}</td>
                   <td className="p-4 border-l border-gray-100 text-gray-300 text-xs font-mono">{h.hcp_index}</td>
-                  <td className="p-4 border-l border-gray-100 bg-[#7ca982]/5 text-[#7ca982] font-mono">{extra > 0 ? `+${extra}` : '-'}</td>
+                   <td className="p-4 border-l border-gray-100 bg-[#7ca982]/5 text-[#7ca982] font-mono">{extra > 0 ? `+${extra}` : '-'}</td>
                   <td className="p-4 border-l border-gray-100 bg-[#7ca982]/10 text-lg font-mono">{h.par + extra}</td>
                   {activeColumns.map((col, i) => (
                      <td key={i} className={`p-4 border-l border-white font-mono transition-all ${col.theme.col} ${col.theme.text}`}>
@@ -158,7 +168,7 @@ export default function CourseDisplay({ course }: { course: any }) {
                   <td className="p-4 border-l border-gray-100 bg-[#7ca982]/10 text-lg font-mono">{h.par + extra}</td>
                   {activeColumns.map((col, i) => (
                      <td key={i} className={`p-4 border-l border-white font-mono transition-all ${col.theme.col} ${col.theme.text}`}>
-                        {h.lengths?.[col.key] || '--'}
+                         {h.lengths?.[col.key] || '--'}
                      </td>
                   ))}
                 </tr>
@@ -193,4 +203,4 @@ export default function CourseDisplay({ course }: { course: any }) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file