diff --git a/client/src/components/slideshow/RecipeSlideshow.tsx b/client/src/components/slideshow/RecipeSlideshow.tsx
index 93333bd..893ef40 100644
--- a/client/src/components/slideshow/RecipeSlideshow.tsx
+++ b/client/src/components/slideshow/RecipeSlideshow.tsx
@@ -19,7 +19,7 @@ type RecipeSlideshowProps = {
 export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
     // emblaRef kobler Embla opp til vinduet, også brukes emblaAPI til å styre slideshowet.
     const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
-        Autoplay({ delay: 5000, stopOnMouseEnter: true, stopOnFocusIn: true}),
+        Autoplay({ delay: 5000, stopOnMouseEnter: true, stopOnFocusIn: true, stopOnInteraction: false}),
     ]);
     // Husker hvilken av sidene i slideshowet som vises, sånn at riktig prikk blir farget inn.
     const [selectedIndex, setSelectedIndex] = useState(0);
@@ -51,7 +51,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
     }, [emblaApi]);
 
     return (
-        <section aria-label="Utvalgte oppskrifter" className="relative px-16">
+        <section aria-label="Utvalgte oppskrifter" className="relative md:px-16">
             {/* Vinduet: det skjuler slidene som ikke vises */}
             <div className="overflow-hidden" ref={emblaRef}>
                 {/* Raden med alle slidene som Embla flytter sidelengs */}
@@ -59,24 +59,31 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
                     {recipes.map((recipe) => (
                         // Én slide som bruker hele bredden i vinduet
                         <div key={recipe.id} className="min-w-0 flex-[0_0_100%]">
-                            <div className="grid md:grid-cols-2 gap-8">
-                                <div className="py-8 pr-8 flex flex-col justify-center gap-4 text-olive-dark">
-                                    <div className="flex items-center gap-4 text-sm tracking-widest">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
+                                <div className="md:hidden order-first flex items-center gap-4 text-sm tracking-widest text-olive-dark">
                                         <span>UKENS OPPSKRIFT</span>
                                         <span aria-hidden="true" className="h-px flex-1 bg-olive-dark opacity-40" />
                                         <span>
                                             {String(selectedIndex + 1).padStart(2, '0')} / {String(recipes.length).padStart(2, '0')}
                                         </span>
                                     </div>
-                                    <h3 className="font-heading text-4xl md:text-5xl">{recipe.title}</h3>
-                                    <p>{recipe.description}</p>
-                                    <div className="flex gap-6">
-                                        <p className="flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} min</p>
-                                        <p className="flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
+                                <div className="py-4 md:py-8 pr-8 flex flex-col justify-center gap-4 text-olive-dark">
+                                    <div className="hidden md:flex items-center gap-4 text-sm tracking-widest">
+                                        <span>UKENS OPPSKRIFT</span>
+                                        <span aria-hidden="true" className="h-px flex-1 bg-olive-dark opacity-40" />
+                                        <span>
+                                            {String(selectedIndex + 1).padStart(2, '0')} / {String(recipes.length).padStart(2, '0')}
+                                        </span>
+                                    </div>
+                                    <h3 className="order-first md:order-0 font-heading text-4xl md:text-5xl">{recipe.title}</h3>
+                                    <p className="hidden md:block">{recipe.description}</p>
+                                    <div className="flex gap-2 md:gap-6">
+                                        <p className="flex items-center gap-1 whitespace-nowrap"><AccessTimeIcon/>{recipe.prepTimeMinutes} min</p>
+                                        <p className="flex items-center gap-1 whitespace-nowrap"><RestaurantIcon/>{recipe.servings} porsjoner</p>
                                     </div>
-                                    <ul className="flex flex-wrap gap-2 mb-4">
+                                    <ul className="flex flex-wrap gap-2 md:mb-4">
                                         {recipe.tags.map((tag) => (
-                                            <li className="rounded-full border border-olive-dark text-olive-dark px-3 py-1 text-sm" key={tag.id}>
+                                            <li className="hidden md:block rounded-full border border-olive-dark text-olive-dark px-3 py-1 text-sm" key={tag.id}>
                                                 {tag.name}
                                             </li>
                                         ))}
@@ -84,7 +91,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
                                     <Link to={`/recipes/${recipe.id}`} className="self-start rounded-full bg-olive-dark text-background px-6 py-3 hover:opacity-90 flex items-center gap-1">Se oppskrift<ArrowForwardIcon/></Link>
                                 </div>
                                 {/* Tomt alternativ for bildet, ettersom tittelen allerede står rett ved siden av bildet. */}
-                                <img className="w-full h-80 md:h-full object-cover rounded-lg" src={recipe.imageUrl ?? '/images/placeholder.webp'} alt=""/>
+                                <img className="bg-olive-dark/10 order-first md:order-0 w-full h-80 md:h-full object-cover rounded-lg " src={recipe.imageUrl ?? '/images/placeholder.webp'} alt=""/>
                             </div>
                         </div>
                     ))}
@@ -96,7 +103,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
                 type="button"
                 aria-label="Forrige oppskrift"
                 onClick={() => emblaApi?.scrollPrev()}
-                className="absolute left-0 top-1/2 -translate-y-1/2 flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
+                className="absolute left-0 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
             >
                <ArrowBackIcon/>
             </button>
@@ -104,7 +111,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
                 type="button"
                 aria-label="Neste oppskrift"
                 onClick={() => emblaApi?.scrollNext()}
-                className="absolute right-0 top-1/2 -translate-y-1/2 flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
+                className="absolute right-0 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
             >
                 <ArrowForwardIcon/>
             </button>