diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro
index 7e3df49..1dedf6d 100644
--- a/src/pages/recipe/[recipeid].astro
+++ b/src/pages/recipe/[recipeid].astro
@@ -41,24 +41,24 @@ const waitTime = formatTime(re.waittime)
 
 <SiteLayout>
     <div class="flex flex-col md:flex-row">
-        <div class="flex flex-col ">
+        <div class="flex flex-col mt-2 md:mt-4 sticky">
             <ImageCarousel class="w-full" recipe={re} />
             <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
 
             <!-- Details -->
             <p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
-            <div class="flex pt-1">
+            <div class="flex pt-1 items-center">
                 {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
-                {workTime && (<p class="border-r px-2">{workTime} work</p>)}
-                {waitTime && (<p class="border-r px-2">{waitTime} wait</p>)}
-                {re.rating !== 0 && (<p class="pl-2">{re.rating}⭐️</p>)}
+                {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
+                {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
+                {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
             </div>
 
             <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
             <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
         </div>
         
-        <div class="flex flex-col">
+        <div class="flex w-full flex-col">
             <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
 
             <!-- Steps -->