diff --git a/client/src/components/favorites/FavoriteButton.tsx b/client/src/components/favorites/FavoriteButton.tsx
index 018b632..2e52459 100644
--- a/client/src/components/favorites/FavoriteButton.tsx
+++ b/client/src/components/favorites/FavoriteButton.tsx
@@ -4,6 +4,9 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import { useCurrentUser } from '../../lib/useCurrentUser';
 import { LoginRequiredDialog } from '../layout/LoginRequiredDialog';
 import { MY_FAVORITES, TOGGLE_FAVORITE } from '../../graphql/favorites';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { quick } from '../../lib/motion';
 
 type FavoriteButtonProps = {
   recipeId: string;
@@ -24,6 +27,8 @@ export function FavoriteButton({ recipeId, title }: FavoriteButtonProps) {
     // henter favorittene på nytt så hjertene og favorittsiden blir riktige
     refetchQueries: [MY_FAVORITES],
   });
+  // teller trykk så ringen spilles av på nytt hver gang
+  const [burst, setBurst] = useState(0);
 
   // ikke innlogget så hjertet åpner innloggingspopupen
   if (!user) {
@@ -47,19 +52,39 @@ export function FavoriteButton({ recipeId, title }: FavoriteButtonProps) {
     data?.myFavorites.some((recipe) => recipe.id === recipeId) ?? false;
 
   return (
-    <button
+    <motion.button
       type="button"
-      onClick={() => toggleFavorite()}
+      // hjertet spretter når det blir favoritt og krymper litt når man trykker
+      initial={false}
+      animate={{ scale: isFavorite ? [1, 1.25, 1] : 1 }}
+      whileTap={{ scale: 0.85 }}
+      transition={quick}
+      onClick={() => {
+        if (!isFavorite) setBurst((b) => b + 1);
+        toggleFavorite();
+      }}
       disabled={loading}
       aria-pressed={isFavorite}
       aria-label={`Lagre ${title} som favoritt`}
-      className={BUTTON}
+      className={`relative ${BUTTON}`}
     >
+      {/* egen AnimatePresence så ringen alltid animeres også inne i lister */}
+      <AnimatePresence>
+        {burst > 0 && (
+          <motion.span
+            key={burst}
+            initial={{ scale: 0.6, opacity: 1 }}
+            animate={{ scale: 1.7, opacity: 0 }}
+            transition={{ duration: 0.45, ease: 'easeOut' }}
+            className="pointer-events-none absolute inset-0 rounded-full border-2 border-primary"
+          />
+        )}
+      </AnimatePresence>
       {isFavorite ? (
         <FavoriteIcon aria-hidden="true" />
       ) : (
         <FavoriteBorderIcon aria-hidden="true" />
       )}
-    </button>
+    </motion.button>
   );
 }
diff --git a/client/src/components/layout/LoginRequiredDialog.tsx b/client/src/components/layout/LoginRequiredDialog.tsx
index e2c74d0..b2a53bc 100644
--- a/client/src/components/layout/LoginRequiredDialog.tsx
+++ b/client/src/components/layout/LoginRequiredDialog.tsx
@@ -20,9 +20,9 @@ export function LoginRequiredDialog({
       {/* knappene som åpner popupen */}
       <RadixDialog.Trigger asChild>{trigger}</RadixDialog.Trigger>
       <RadixDialog.Portal>
-        <RadixDialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        <RadixDialog.Overlay className="fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out motion-reduce:animate-none" />
         {/* popup */}
-        <RadixDialog.Content className="fixed top-1/2 left-1/2 z-50 w-[94%] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-large bg-background p-6 text-text shadow-lg focus:outline-none">
+        <RadixDialog.Content className="fixed top-1/2 left-1/2 z-50 w-[94%] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-large bg-background p-6 text-text shadow-lg focus:outline-none data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out motion-reduce:animate-none">
           <RadixDialog.Title className="font-heading text-3xl">
             Du må logge inn for å bruke dette
           </RadixDialog.Title>
diff --git a/client/src/components/profile/DeleteRecipesDialog.tsx b/client/src/components/profile/DeleteRecipesDialog.tsx
index 7a9da18..7acf6e9 100644
--- a/client/src/components/profile/DeleteRecipesDialog.tsx
+++ b/client/src/components/profile/DeleteRecipesDialog.tsx
@@ -55,8 +55,8 @@ export function DeleteRecipesDialog({
         </Button>
       </RadixDialog.Trigger>
       <RadixDialog.Portal>
-        <RadixDialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
-        <RadixDialog.Content className="fixed top-1/2 left-1/2 z-50 max-h-[92vh] w-[94%] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-large bg-background p-6 text-text shadow-lg focus:outline-none">
+        <RadixDialog.Overlay className="fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out motion-reduce:animate-none" />
+        <RadixDialog.Content className="fixed top-1/2 left-1/2 z-50 max-h-[92vh] w-[94%] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-large bg-background p-6 text-text shadow-lg focus:outline-none  data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out motion-reduce:animate-none">
           <RadixDialog.Title className="font-display text-3xl lining-nums">
             {count === 1
               ? 'Vil du slette 1 oppskrift?'
diff --git a/client/src/components/profile/EditProfileDialog.tsx b/client/src/components/profile/EditProfileDialog.tsx
index cd3988b..405c74f 100644
--- a/client/src/components/profile/EditProfileDialog.tsx
+++ b/client/src/components/profile/EditProfileDialog.tsx
@@ -1,11 +1,13 @@
 import { useState, type ReactNode, type SubmitEvent } from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { useMutation } from '@apollo/client/react';
+import { AnimatePresence, motion } from 'motion/react';
 import { Button } from '../ui/Button';
 import { Field } from '../ui/Field';
 import { Input } from '../ui/Input';
 import { useCurrentUser } from '../../lib/useCurrentUser';
 import { CHANGE_PASSWORD, UPDATE_PROFILE } from '../../graphql/auth';
+import { fadeUp, quick } from '../../lib/motion';
 
 // passordet må være minst så mange tegn
 const MIN_PASSWORD_LENGTH = 6;
@@ -54,6 +56,11 @@ export function EditProfileDialog({ trigger }: EditProfileDialogProps) {
     try {
       await updateProfile({ variables: { name: name.trim() } });
       setNameMessage('Navnet er lagret.');
+      // skjuler meldingen etter litt men bare hvis den ikke er byttet ut
+      setTimeout(
+        () => setNameMessage((m) => (m === 'Navnet er lagret.' ? '' : m)),
+        2500,
+      );
     } catch (error) {
       setNameMessage(
         error instanceof Error ? error.message : 'Kunne ikke lagre navnet.',
@@ -87,6 +94,12 @@ export function EditProfileDialog({ trigger }: EditProfileDialogProps) {
       setNewPassword('');
       setRepeatPassword('');
       setPasswordMessage('Passordet er byttet.');
+      // skjuler meldingen etter litt men bare hvis den ikke er byttet ut
+      setTimeout(
+        () =>
+          setPasswordMessage((m) => (m === 'Passordet er byttet.' ? '' : m)),
+        2500,
+      );
     } catch (error) {
       setPasswordMessage(
         error instanceof Error ? error.message : 'Kunne ikke bytte passord.',
@@ -98,10 +111,10 @@ export function EditProfileDialog({ trigger }: EditProfileDialogProps) {
     <RadixDialog.Root onOpenChange={handleOpenChange}>
       <RadixDialog.Trigger asChild>{trigger}</RadixDialog.Trigger>
       <RadixDialog.Portal>
-        <RadixDialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        <RadixDialog.Overlay className="fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out motion-reduce:animate-none" />
         {/* popup som kan scrolles på små skjermer */}
-        <RadixDialog.Content className="fixed top-1/2 left-1/2 z-50 max-h-[92vh] w-[94%] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-large bg-background p-6 text-text shadow-lg focus:outline-none">
-          <RadixDialog.Title className="font-heading text-3xl">
+        <RadixDialog.Content className="fixed top-1/2 left-1/2 z-50 max-h-[92vh] w-[94%] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-large bg-background p-6 text-text shadow-lg focus:outline-none data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out motion-reduce:animate-none">
+          <RadixDialog.Title className="font-display text-3xl">
             Rediger profil
           </RadixDialog.Title>
           <RadixDialog.Description className="mt-2">
@@ -119,11 +132,23 @@ export function EditProfileDialog({ trigger }: EditProfileDialogProps) {
                 autoComplete="name"
               />
             </Field>
-            {nameMessage && (
-              <p role="status" className="font-bold text-primary">
-                {nameMessage}
-              </p>
-            )}
+            {/* meldingen tones inn hver gang teksten endres */}
+            <AnimatePresence mode="wait">
+              {nameMessage && (
+                <motion.p
+                  key={nameMessage}
+                  role="status"
+                  className="font-bold text-primary"
+                  variants={fadeUp}
+                  initial="hidden"
+                  animate="visible"
+                  exit="hidden"
+                  transition={quick}
+                >
+                  {nameMessage}
+                </motion.p>
+              )}
+            </AnimatePresence>
             <Button
               type="submit"
               variant="primary"
@@ -139,7 +164,7 @@ export function EditProfileDialog({ trigger }: EditProfileDialogProps) {
             onSubmit={savePassword}
             className="mt-8 flex flex-col gap-4 border-t border-peach pt-6"
           >
-            <h3 className="font-heading text-2xl">Bytt passord</h3>
+            <h3 className="font-display text-2xl">Bytt passord</h3>
             <Field label="Nåværende passord" htmlFor="current-password">
               <Input
                 id="current-password"
@@ -168,11 +193,23 @@ export function EditProfileDialog({ trigger }: EditProfileDialogProps) {
                 autoComplete="new-password"
               />
             </Field>
-            {passwordMessage && (
-              <p role="status" className="font-bold text-primary">
-                {passwordMessage}
-              </p>
-            )}
+            {/* meldingen tones inn hver gang teksten endres */}
+            <AnimatePresence mode="wait">
+              {passwordMessage && (
+                <motion.p
+                  key={passwordMessage}
+                  role="status"
+                  className="font-bold text-primary"
+                  variants={fadeUp}
+                  initial="hidden"
+                  animate="visible"
+                  exit="hidden"
+                  transition={quick}
+                >
+                  {passwordMessage}
+                </motion.p>
+              )}
+            </AnimatePresence>
             <Button
               type="submit"
               variant="primary"
diff --git a/client/src/components/profile/PreferencesForm.tsx b/client/src/components/profile/PreferencesForm.tsx
index 715bef1..16af25d 100644
--- a/client/src/components/profile/PreferencesForm.tsx
+++ b/client/src/components/profile/PreferencesForm.tsx
@@ -110,7 +110,7 @@ export function PreferencesForm() {
           Preferanser
         </h2>
         <p className="text-sm text-text/70">
-          Brukes til å tilpasse oppskriftene til deg.
+          Preferansene er ikke i bruk ennå.
         </p>
       </div>
 
@@ -139,7 +139,7 @@ export function PreferencesForm() {
       <fieldset>
         <legend className="text-sm font-medium">Allergier</legend>
         <p className="text-xs text-text/70">
-          Oppskrifter med disse blir markert.
+          Oppskrifter med disse blir markert (ikke aktiv ennå).
         </p>
         <div className="mt-3 flex flex-wrap gap-2">
           {ALLERGIES.map((name) => {
diff --git a/client/src/index.css b/client/src/index.css
index 0c3e02a..46007b1 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -33,6 +33,36 @@
 
   /* bredde der pc header tar over fra mobil header */
   --breakpoint-desktop: 35rem;
+
+
+  /* popup tones inn og glir inn */
+  --animate-dialog-in: dialog-in 200ms ease-out;
+  --animate-dialog-out: dialog-out 150ms ease-in;
+  --animate-overlay-in: overlay-in 200ms ease-out;
+  --animate-overlay-out: overlay-out 150ms ease-in;
+
+  @keyframes dialog-in {
+    from {
+      opacity: 0;
+      transform: translateY(12px);
+    }
+  }
+  @keyframes dialog-out {
+    to {
+      opacity: 0;
+      transform: translateY(12px);
+    }
+  }
+  @keyframes overlay-in {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes overlay-out {
+    to {
+      opacity: 0;
+    }
+  }
 }
 
 /* Grunnleggende styling */
diff --git a/client/src/lib/motion.ts b/client/src/lib/motion.ts
index 6032a35..a4e3f18 100644
--- a/client/src/lib/motion.ts
+++ b/client/src/lib/motion.ts
@@ -4,6 +4,8 @@ import type { Transition, Variants } from 'motion/react';
 
 // felles fart så alle animasjoner føles like
 export const quick: Transition = { duration: 0.2, ease: 'easeOut' };
+// rolig gli for ting som flytter seg
+export const glide: Transition = { duration: 0.3, ease: 'easeOut' };
 
 // spring for ting som skal gli eller sprette
 export const spring: Transition = {
diff --git a/client/src/routes/FavoritesPage.tsx b/client/src/routes/FavoritesPage.tsx
index 4e33c48..f893998 100644
--- a/client/src/routes/FavoritesPage.tsx
+++ b/client/src/routes/FavoritesPage.tsx
@@ -1,7 +1,6 @@
 import { Link } from 'react-router';
 import { useQuery } from '@apollo/client/react';
 import { RecipeCard } from '../components/recipe/RecipeCard';
-import { FavoriteButton } from '../components/favorites/FavoriteButton';
 import { MY_FAVORITES } from '../graphql/favorites';
 
 // oppskriftene brukeren har lagret som favoritter
@@ -39,10 +38,6 @@ export default function FavoritesPage() {
         {favorites.map((recipe) => (
           <li key={recipe.id} className="relative h-full">
             <RecipeCard recipe={recipe} />
-            {/* hjertet åpner ikke oppskriften */}
-            <div className="absolute top-3 right-3">
-              <FavoriteButton recipeId={recipe.id} title={recipe.title} />
-            </div>
           </li>
         ))}
       </ul>
diff --git a/client/src/routes/ProfilePage.tsx b/client/src/routes/ProfilePage.tsx
index 889979b..ccaf320 100644
--- a/client/src/routes/ProfilePage.tsx
+++ b/client/src/routes/ProfilePage.tsx
@@ -11,8 +11,9 @@ import { useCurrentUser } from '../lib/useCurrentUser';
 import { useQuery } from '@apollo/client/react';
 import { MY_RECIPES } from '../graphql/profile';
 import { RecipeCard } from '../components/recipe/RecipeCard';
-import { FavoriteButton } from '../components/favorites/FavoriteButton';
 import { MY_FAVORITES } from '../graphql/favorites';
+import { AnimatePresence, motion } from 'motion/react';
+import { fadeUp, quick, glide } from '../lib/motion';
 
 type Tab = 'preferences' | 'favorites' | 'shared' | 'sharedWithMe';
 type RecipeTab = Exclude<Tab, 'preferences'>;
@@ -195,8 +196,9 @@ export default function ProfilePage() {
           </section>
         )}
 
-        {/* mobilmeny som kan sveipes */}
-        <nav
+        {/* mobil og smal skjerm meny som kan sveipes */}
+        <motion.nav
+          layoutScroll
           aria-label="Min side"
           className="-mx-5 overflow-x-auto px-5 md:hidden"
         >
@@ -207,17 +209,25 @@ export default function ProfilePage() {
                 type="button"
                 aria-pressed={activeTab === tab.value}
                 onClick={() => setActiveTab(tab.value)}
-                className={`cursor-pointer rounded-full border px-4 py-2 text-sm whitespace-nowrap transition-colors ${FOCUS_RING} ${
+                className={`relative cursor-pointer rounded-full border px-4 py-2 text-sm whitespace-nowrap transition-colors ${FOCUS_RING} ${
                   activeTab === tab.value
-                    ? 'border-transparent bg-primary font-bold text-background'
+                    ? 'border-transparent font-bold text-background'
                     : 'border-secondary/60 text-text/70 hover:border-secondary hover:bg-[#ebedde] hover:text-text'
                 }`}
               >
-                {tab.label}
+                {/* burgunder bakgrunn som glir til valgt pille */}
+                {activeTab === tab.value && (
+                  <motion.span
+                    layoutId="pille"
+                    transition={glide}
+                    className="absolute inset-0 rounded-full bg-primary"
+                  />
+                )}
+                <span className="relative">{tab.label}</span>
               </button>
             ))}
           </div>
-        </nav>
+        </motion.nav>
 
         {/* preferanser på mobil bare når fanen er valgt */}
         <div
@@ -242,13 +252,19 @@ export default function ProfilePage() {
               role="tab"
               aria-selected={desktopTab === tab}
               onClick={() => setActiveTab(tab)}
-              className={`-mb-px cursor-pointer border-b-2 pb-2 font-display text-2xl transition-colors ${FOCUS_RING} ${
-                desktopTab === tab
-                  ? 'border-primary text-primary'
-                  : 'border-transparent hover:text-primary'
+              className={`relative cursor-pointer pb-2 font-display text-2xl transition-colors ${FOCUS_RING} ${
+                desktopTab === tab ? 'text-primary' : 'hover:text-primary'
               }`}
             >
               {RECIPE_TABS[tab].label}
+              {/* streken glir til fanen som er valgt */}
+              {desktopTab === tab && (
+                <motion.span
+                  layoutId="fane-strek"
+                  transition={glide}
+                  className="absolute inset-x-0 -bottom-px h-0.5 bg-primary"
+                />
+              )}
             </button>
           ))}
         </div>
@@ -256,19 +272,29 @@ export default function ProfilePage() {
         {/* søppelbøtte som slår på valg av egne oppskrifter */}
         {desktopTab === 'shared' && myRecipes.length > 0 && (
           <div className="mb-4 flex items-center justify-end gap-3">
-            {isSelecting && (
-              <>
-                <span className="text-sm" aria-live="polite">
-                  {selectedIds.length} valgt
-                </span>
-                <DeleteRecipesDialog
-                  recipes={myRecipes.filter((recipe) =>
-                    selectedIds.includes(recipe.id),
-                  )}
-                  onDeleted={toggleSelecting}
-                />
-              </>
-            )}
+            {/* teksten og slett knappen vokser ut fra søppelbøtta */}
+            <AnimatePresence>
+              {isSelecting && (
+                <motion.div
+                  key="valgt"
+                  className="flex origin-right items-center gap-3"
+                  initial={{ opacity: 0, scale: 0.6 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.6 }}
+                  transition={quick}
+                >
+                  <span className="text-sm" aria-live="polite">
+                    {selectedIds.length} valgt
+                  </span>
+                  <DeleteRecipesDialog
+                    recipes={myRecipes.filter((recipe) =>
+                      selectedIds.includes(recipe.id),
+                    )}
+                    onDeleted={toggleSelecting}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
             <button
               type="button"
               onClick={toggleSelecting}
@@ -288,39 +314,52 @@ export default function ProfilePage() {
         )}
 
         {tabRecipes.length > 0 ? (
-          <ul className="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-4">
-            {tabRecipes.map((recipe) => (
-              <li key={recipe.id} className="relative">
-                <RecipeCard recipe={recipe} />
-                {isSelecting ? (
-                  // dekker kortet så trykk velger i stedet for å åpne oppskriften
-                  <button
-                    type="button"
-                    onClick={() => toggleSelected(recipe.id)}
-                    aria-pressed={selectedIds.includes(recipe.id)}
-                    aria-label={`Velg ${recipe.title}`}
-                    className={`absolute inset-0 flex cursor-pointer items-start rounded-lg p-3 ${FOCUS_RING} ${
-                      selectedIds.includes(recipe.id)
-                        ? 'bg-primary/10 ring-2 ring-primary'
-                        : ''
-                    }`}
-                  >
-                    <span className="flex rounded-full bg-background text-primary shadow-sm">
-                      {selectedIds.includes(recipe.id) ? (
-                        <CheckCircleIcon />
-                      ) : (
-                        <RadioButtonUncheckedIcon />
-                      )}
-                    </span>
-                  </button>
-                ) : (
-                  <div className="absolute top-3 right-3">
-                    <FavoriteButton recipeId={recipe.id} title={recipe.title} />
-                  </div>
-                )}
-              </li>
-            ))}
-          </ul>
+          // key gjør at listen tones inn på nytt når fanen byttes
+          <motion.ul
+            key={desktopTab}
+            variants={fadeUp}
+            initial="hidden"
+            animate="visible"
+            transition={{ duration: 0.15, ease: 'easeOut' }}
+            className="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-4"
+          >
+            {/* kort som fjernes tones ut og resten glir på plass */}
+            <AnimatePresence initial={false}>
+              {tabRecipes.map((recipe) => (
+                <motion.li
+                  key={recipe.id}
+                  className="relative"
+                  layout
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={quick}
+                >
+                  <RecipeCard recipe={recipe} />
+                  {isSelecting && (
+                    // dekker kortet så trykk velger i stedet for å åpne oppskriften
+                    <button
+                      type="button"
+                      onClick={() => toggleSelected(recipe.id)}
+                      aria-pressed={selectedIds.includes(recipe.id)}
+                      aria-label={`Velg ${recipe.title}`}
+                      className={`absolute inset-0 flex cursor-pointer items-start rounded-lg p-3 ${FOCUS_RING} ${
+                        selectedIds.includes(recipe.id)
+                          ? 'bg-primary/10 ring-2 ring-primary'
+                          : ''
+                      }`}
+                    >
+                      <span className="flex rounded-full bg-background text-primary shadow-sm">
+                        {selectedIds.includes(recipe.id) ? (
+                          <CheckCircleIcon />
+                        ) : (
+                          <RadioButtonUncheckedIcon />
+                        )}
+                      </span>
+                    </button>
+                  )}
+                </motion.li>
+              ))}
+            </AnimatePresence>
+          </motion.ul>
         ) : (
           <section className="rounded-large border border-dashed border-peach p-8 text-center">
             <p>{RECIPE_TABS[desktopTab].empty}</p>