diff --git a/src/app/om-oss/page.tsx b/src/app/om-oss/page.tsx
index d3aae31..3e1e9c5 100644
--- a/src/app/om-oss/page.tsx
+++ b/src/app/om-oss/page.tsx
@@ -9,7 +9,7 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 export default function AboutPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="none"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="background-highlight"
         borderRadius="pill"
         contentWidth="smallMedium"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 977f8c8..1e6d4bc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,7 +14,7 @@ import { Award, Calendar, Scissors, UserCheck } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="none"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="background-highlight"
         borderRadius="pill"
         contentWidth="smallMedium"
diff --git a/src/app/pink-store/page.tsx b/src/app/pink-store/page.tsx
index 4f00957..ff37add 100644
--- a/src/app/pink-store/page.tsx
+++ b/src/app/pink-store/page.tsx
@@ -10,7 +10,7 @@ import ProductCardFour from '@/components/sections/product/ProductCardFour';
 export default function PinkStorePage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="none"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="background-highlight"
         borderRadius="pill"
         contentWidth="smallMedium"
diff --git a/src/app/tjänster/page.tsx b/src/app/tjänster/page.tsx
index bdc34ff..ec823db 100644
--- a/src/app/tjänster/page.tsx
+++ b/src/app/tjänster/page.tsx
@@ -2,15 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import { Palette, Scissors } from "lucide-react";
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 
-export default function TjänsterPage() {
+export default function ServicesPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="none"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="background-highlight"
         borderRadius="pill"
         contentWidth="smallMedium"
@@ -34,27 +33,29 @@ export default function TjänsterPage() {
     />
   </div>
 
-  <div id="tjänster-list" data-section="tjänster-list">
-      <FeatureCardTen
+  <div id="pricing" data-section="pricing">
+      <PricingCardFive
       animationType="slide-up"
-      textboxLayout="split"
+      textboxLayout="default"
       useInvertedBackground={false}
-      features={[
+      title="Våra Tjänster"
+      description="Vi erbjuder allt från klassisk klippning till färg och styling."
+      plans={[
         {
-          id: "f1", title: "Klippning", description: "Från snagg till avancerad långhårsklippning.", 
-          media: { imageSrc: "https://img.b2bpic.net/free-photo/hair-salon-professional_23-2148705035.jpg" },
-          items: [{ icon: Scissors, text: "Herrklippning" }, { icon: Scissors, text: "Damklippning" }],
-          reverse: false
+          id: "p1", tag: "Hår", price: "650 kr", period: "från", description: "Klassisk klippning och styling.",          button: { text: "Boka tid", href: "https://www.bokadirekt.se/" },
+          featuresTitle: "Ingår", features: ["Tvätt", "Klippning", "Styling"]
+        },
+        {
+          id: "p2", tag: "Behandling", price: "1200 kr", period: "från", description: "Färgbehandlingar för ett friskt hår.",          button: { text: "Boka tid", href: "https://www.bokadirekt.se/" },
+          featuresTitle: "Ingår", features: ["Färg", "Inpackning", "Fön"]
         },
       ]}
-      title="Våra Tjänster"
-      description="Vi erbjuder ett brett utbud av hår- och skönhetstjänster."
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterMedia
-      imageSrc="https://img.b2bpic.net/free-photo/hair-salon-interior_23-2148705040.jpg"
+      imageSrc="https://img.b2bpic.net/free-photo/hairdresser-salon-interior_23-2148705018.jpg"
       columns={[
         { title: "Söderlings", items: [{ label: "Vällingbyplan 3", href: "#" }, { label: "08-87 06 05", href: "tel:08870605" }] },
         { title: "Länkar", items: [{ label: "Start", href: "/" }, { label: "Boka tid", href: "https://www.bokadirekt.se/places/sderlings-pinkstore-8591" }] },