diff --git a/app/[locale]/[[...slug]]/category-page-preview.tsx b/...[[...slug]]/category-page-preview.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/category-page-preview.tsx
rename to ...[[...slug]]/category-page-preview.tsx
diff --git a/app/[locale]/[[...slug]]/category-page.tsx b/...[[...slug]]/category-page.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/category-page.tsx
rename to ...[[...slug]]/category-page.tsx
diff --git a/app/[locale]/[[...slug]]/home-page-preview.tsx b/...[[...slug]]/home-page-preview.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/home-page-preview.tsx
rename to ...[[...slug]]/home-page-preview.tsx
diff --git a/app/[locale]/[[...slug]]/home-page.tsx b/...[[...slug]]/home-page.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/home-page.tsx
rename to ...[[...slug]]/home-page.tsx
diff --git a/app/[locale]/[[...slug]]/page.tsx b/...[[...slug]]/page.tsx
similarity index 98%
rename from app/[locale]/[[...slug]]/page.tsx
rename to ...[[...slug]]/page.tsx
index 0ab67b638..af5b76004 100644
--- a/app/[locale]/[[...slug]]/page.tsx
+++ b/...[[...slug]]/page.tsx
@@ -41,7 +41,7 @@ export default async function Page({ params }: { params: { slug: string[]; local
 
   return (
     <div className="flex flex-col">
-      <Header localeData={localeData} />
+      <Header />
       <main className="flex-1">
         <article>
           {isEnabled ? (
@@ -65,7 +65,7 @@ export default async function Page({ params }: { params: { slug: string[]; local
           )}
         </article>
       </main>
-      <Footer />
+      <Footer localeData={localeData} />
     </div>
   );
 }
diff --git a/app/[locale]/[[...slug]]/product-page-preview.tsx b/...[[...slug]]/product-page-preview.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/product-page-preview.tsx
rename to ...[[...slug]]/product-page-preview.tsx
diff --git a/app/[locale]/[[...slug]]/product-page.tsx b/...[[...slug]]/product-page.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/product-page.tsx
rename to ...[[...slug]]/product-page.tsx
diff --git a/app/[locale]/[[...slug]]/single-page-preview.tsx b/...[[...slug]]/single-page-preview.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/single-page-preview.tsx
rename to ...[[...slug]]/single-page-preview.tsx
diff --git a/app/[locale]/[[...slug]]/single-page.tsx b/...[[...slug]]/single-page.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/single-page.tsx
rename to ...[[...slug]]/single-page.tsx
diff --git a/app/[locale]/[slug]/page.tsx b/app/[locale]/[slug]/page.tsx
new file mode 100644
index 000000000..a2f51cdd3
--- /dev/null
+++ b/app/[locale]/[slug]/page.tsx
@@ -0,0 +1,44 @@
+import DynamicContentManager from 'components/layout/dynamic-content-manager';
+import { pageQuery } from 'lib/sanity/queries';
+import { clientFetch } from 'lib/sanity/sanity.client';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+export const runtime = 'edge';
+
+export const revalidate = 43200; // 12 hours in seconds
+
+export async function generateMetadata({
+  params
+}: {
+  params: { locale: string; slug: string };
+}): Promise<Metadata> {
+  const page = await clientFetch(pageQuery, params);
+
+  if (!page) return notFound();
+
+  return {
+    title: page.seo?.title || page.title,
+    description: page.seo?.description || page.bodySummary,
+    openGraph: {
+      publishedTime: page.createdAt,
+      modifiedTime: page.updatedAt,
+      type: 'article'
+    }
+  };
+}
+
+interface PageParams {
+  params: {
+    locale: string;
+    slug: string;
+  };
+}
+
+export default async function Page({ params }: PageParams) {
+  const page = await clientFetch(pageQuery, params);
+
+  if (!page) return notFound();
+
+  return <DynamicContentManager content={page?.content} />;
+}
diff --git a/app/[locale]/category/[slug]/page.tsx b/app/[locale]/category/[slug]/page.tsx
new file mode 100644
index 000000000..a069cb3e1
--- /dev/null
+++ b/app/[locale]/category/[slug]/page.tsx
@@ -0,0 +1,41 @@
+import Text from 'components/ui/text/text';
+import { categoryQuery } from 'lib/sanity/queries';
+import { clientFetch } from 'lib/sanity/sanity.client';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+export async function generateMetadata({
+  params
+}: {
+  params: { slug: string; locale: string };
+}): Promise<Metadata> {
+  const category = await clientFetch(categoryQuery, params);
+
+  if (!category) return notFound();
+
+  return {
+    title: category.seo.title || category.title,
+    description: category.seo.description || category.description
+  };
+}
+
+interface CategoryPageParams {
+  params: {
+    locale: string;
+    slug: string;
+  };
+}
+
+export default async function ProductPage({ params }: CategoryPageParams) {
+  const category = await clientFetch(categoryQuery, params);
+
+  if (!category) return notFound();
+
+  const { title } = category;
+
+  return (
+    <div className="mb-8 flex w-full flex-col px-4 lg:my-16 lg:px-8 2xl:px-16">
+      <Text variant={'pageHeading'}>{title}</Text>
+    </div>
+  );
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 3d2a7833c..36ec12ff1 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,7 +1,10 @@
+import Footer from 'components/layout/footer/footer';
+import Header from 'components/layout/header/header';
 import { NextIntlClientProvider } from 'next-intl';
 import { Inter } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
+import { supportedLanguages } from '../../i18n-config';
 import './globals.css';
 
 const SITE_NAME = 'KM Storefront';
@@ -36,7 +39,7 @@ const inter = Inter({
 });
 
 export function generateStaticParams() {
-  return [{ locale: 'sv' }, { locale: 'en' }];
+  return supportedLanguages.locales.map((locale) => ({ locale: locale.id }));
 }
 
 interface LocaleLayoutProps {
@@ -59,7 +62,9 @@ export default async function LocaleLayout({ children, params: { locale } }: Loc
     <html lang={locale} className={inter.variable}>
       <body className="flex min-h-screen flex-col">
         <NextIntlClientProvider locale={locale} messages={messages}>
-          {children}
+          <Header />
+          <main className="flex-1">{children}</main>
+          <Footer />
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
new file mode 100644
index 000000000..4cdfde43d
--- /dev/null
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,27 @@
+import DynamicContentManager from 'components/layout/dynamic-content-manager/dynamic-content-manager';
+import { homePageQuery } from 'lib/sanity/queries';
+import { clientFetch } from 'lib/sanity/sanity.client';
+export const runtime = 'edge';
+
+export const metadata = {
+  description: 'High-performance ecommerce store built with Next.js, Vercel, Sanity and Storm.',
+  openGraph: {
+    type: 'website'
+  }
+};
+
+interface HomePageParams {
+  params: {
+    locale: string;
+  };
+}
+
+export default async function HomePage({ params }: HomePageParams) {
+  const data = await clientFetch(homePageQuery, params);
+
+  return (
+    <>
+      <DynamicContentManager content={data?.content} />
+    </>
+  );
+}
diff --git a/app/[locale]/product/[slug]/page.tsx b/app/[locale]/product/[slug]/page.tsx
new file mode 100644
index 000000000..db6ebef81
--- /dev/null
+++ b/app/[locale]/product/[slug]/page.tsx
@@ -0,0 +1,89 @@
+import ProductView from 'components/product/product-view';
+import { productQuery } from 'lib/sanity/queries';
+import { clientFetch } from 'lib/sanity/sanity.client';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+interface ProductPageParams {
+  params: {
+    locale: string;
+    slug: string;
+  };
+}
+
+export async function generateMetadata({
+  params
+}: {
+  params: { slug: string; locale: string };
+}): Promise<Metadata> {
+  const product = await clientFetch(productQuery, params);
+
+  if (!product) return notFound();
+
+  const { alt } = product.images[0] || '';
+  const { url } = product.images[0].asset || {};
+  const { width, height } = product.images[0].asset.metadata.dimensions;
+  // const indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
+
+  return {
+    title: product.seo.title || product.title,
+    description: product.seo.description || product.description,
+    // @TODO ROBOTS SETTINGS???
+    // robots: {
+    //   index: indexable,
+    //   follow: indexable,
+    //   googleBot: {
+    //     index: indexable,
+    //     follow: indexable
+    //   }
+    // },
+    openGraph: url
+      ? {
+          images: [
+            {
+              url,
+              width,
+              height,
+              alt
+            }
+          ]
+        }
+      : null
+  };
+}
+
+export default async function ProductPage({ params }: ProductPageParams) {
+  const product = await clientFetch(productQuery, params);
+
+  if (!product) return notFound();
+
+  const productJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    description: product.description,
+    // @TODO UPDATE TO STORM URL???
+    image: product.images[0].asset.url
+    // offers: {
+    //   '@type': 'AggregateOffer',
+    //   availability: product.availableForSale
+    //     ? 'https://schema.org/InStock'
+    //     : 'https://schema.org/OutOfStock',
+    //   priceCurrency: product.priceRange.minVariantPrice.currencyCode,
+    //   highPrice: product.priceRange.maxVariantPrice.amount,
+    //   lowPrice: product.priceRange.minVariantPrice.amount
+    // }
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(productJsonLd)
+        }}
+      />
+      <ProductView product={product} relatedProducts={[]} />;
+    </>
+  );
+}
diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx
index d20e96d72..b4b20657c 100644
--- a/components/layout/footer/footer.tsx
+++ b/components/layout/footer/footer.tsx
@@ -1,28 +1,40 @@
-'use client'
+'use client';
 
+// import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+// interface FooterProps {
+//   localeData: {
+//     type: string;
+//     locale: string;
+//     translations: [];
+//   };
+// }
 
 const Footer = () => {
+  // const locale = useLocale();
   const currentYear = new Date().getFullYear();
   const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
   const t = useTranslations('ui');
 
   return (
     <footer className="border-t border-ui-border bg-app">
-      <div className="mx-auto w-full py-4 px-4 lg:py-6 lg:px-8 2xl:px-16 2xl:py-8">
-        <div className="flex flex-col w-full space-y-2 items-center transition-colors duration-150 md:flex-row md:items-baseline md:justify-between md:space-y-0">
+      <div className="mx-auto flex w-full flex-col">
+        <div className="flex w-full flex-col items-center space-y-2 p-4 transition-colors duration-150 md:flex-row md:items-baseline md:justify-between md:space-y-0 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
           <Link className="flex flex-initial items-center font-bold md:mr-24" href="/">
             <Logo />
           </Link>
-          <p className="text-sm text-low-contrast">
+          {/* <LocaleSwitcher localeData={localeData} currentLocale={locale} /> */}
+        </div>
+        <div className="flex items-center justify-center border-t border-ui-border bg-black px-4 py-3 lg:px-8 2xl:px-16">
+          <p className="text-xs text-white">
             &copy; {copyrightDate} Kodamera - {t('copyright')}
           </p>
         </div>
       </div>
     </footer>
   );
-}
+};
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/components/layout/header/header.tsx b/components/layout/header/header.tsx
index def85641d..8244d222e 100644
--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
 import {
   NavigationMenu,
@@ -14,15 +13,9 @@ import Link from 'next/link';
 import { FC } from 'react';
 import HeaderRoot from './header-root';
 
-interface HeaderProps {
-  localeData: {
-    type: string;
-    locale: string;
-    translations: [];
-  };
-}
+interface HeaderProps {}
 
-const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
+const Header: FC<HeaderProps> = () => {
   const locale = useLocale();
 
   return (
@@ -43,21 +36,21 @@ const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
             <NavigationMenu delayDuration={0} className="hidden lg:block">
               <NavigationMenuList>
                 <NavigationMenuItem>
-                  <Link href={'/kategori/junior'} legacyBehavior passHref>
+                  <Link href={'/category/barn'} legacyBehavior passHref>
                     <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       Junior
                     </NavigationMenuLink>
                   </Link>
                 </NavigationMenuItem>
                 <NavigationMenuItem>
-                  <Link href={'/kategori/trojor'} legacyBehavior passHref>
+                  <Link href={'/category/trojor'} legacyBehavior passHref>
                     <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       Tröjor
                     </NavigationMenuLink>
                   </Link>
                 </NavigationMenuItem>
                 <NavigationMenuItem>
-                  <Link href={'/kategori/byxor'} legacyBehavior passHref>
+                  <Link href={'/category/byxor'} legacyBehavior passHref>
                     <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       Byxor
                     </NavigationMenuLink>
@@ -66,9 +59,7 @@ const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
               </NavigationMenuList>
             </NavigationMenu>
           </div>
-          <div>
-            <LocaleSwitcher localeData={localeData} currentLocale={locale} />
-          </div>
+          <div></div>
         </div>
       </div>
     </HeaderRoot>
diff --git a/components/modules/blurb-section/blurb-section.tsx b/components/modules/blurb-section/blurb-section.tsx
index ee5241d4e..1ed8ddc0d 100644
--- a/components/modules/blurb-section/blurb-section.tsx
+++ b/components/modules/blurb-section/blurb-section.tsx
@@ -1,16 +1,16 @@
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-import { Carousel, CarouselItem } from 'components/modules/carousel/carousel'
-const Card = dynamic(() => import('components/ui/card'))
+import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
+const Card = dynamic(() => import('components/ui/card'));
 
-import Text from 'components/ui/text'
+import Text from 'components/ui/text';
 
 interface BlurbSectionProps {
-  blurbs: any
-  title: string
-  mobileLayout: string
-  desktopLayout: string
-  imageFormat: 'square' | 'portrait' | 'landscape'
+  blurbs: any;
+  title: string;
+  mobileLayout: string;
+  desktopLayout: string;
+  imageFormat: 'square' | 'portrait' | 'landscape';
 }
 
 const BlurbSection = ({
@@ -18,37 +18,33 @@ const BlurbSection = ({
   mobileLayout,
   desktopLayout,
   blurbs,
-  imageFormat,
+  imageFormat
 }: BlurbSectionProps) => {
   const gridLayout =
     desktopLayout === '2-column'
       ? 'lg:grid-cols-2'
       : desktopLayout === '3-column'
       ? 'lg:grid-cols-3'
-      : 'lg:grid-cols-4'
+      : 'lg:grid-cols-4';
 
-  const sliderLayout =
-    desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4
+  const sliderLayout = desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4;
 
   return (
     <div>
       {title ? (
-        <Text
-          className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
-          variant="sectionHeading"
-        >
+        <Text className="mb-4 px-4 lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16" variant="sectionHeading">
           {title}
         </Text>
       ) : (
         <Text
-          className="italic mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
+          className="mb-4 px-4 italic lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16"
           variant="sectionHeading"
         >
           No title provided yet
         </Text>
       )}
       <div
-        className={`px-4 grid ${gridLayout} gap-x-4 gap-y-8 ${
+        className={`grid px-4 ${gridLayout} gap-x-4 gap-y-8 ${
           mobileLayout === 'stacked' ? 'lg:hidden' : 'hidden'
         } lg:px-8 2xl:!px-16`}
       >
@@ -63,15 +59,11 @@ const BlurbSection = ({
                 imageFormat={blurb?.imageFormat}
               />
             </div>
-          )
+          );
         })}
       </div>
 
-      <div
-        className={`${
-          mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'
-        }`} 
-      >
+      <div className={`${mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'}`}>
         {blurbs && (
           <Carousel
             gliderClasses={'px-4 lg:px-8 2xl:px-16'}
@@ -80,9 +72,8 @@ const BlurbSection = ({
             responsive={{
               breakpoint: 1024,
               settings: {
-                slidesToShow:
-                  sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout,
-              },
+                slidesToShow: sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout
+              }
             }}
           >
             {blurbs.map((blurb: any, index: number) => (
@@ -100,7 +91,7 @@ const BlurbSection = ({
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default BlurbSection
+export default BlurbSection;
diff --git a/components/modules/hero/hero.tsx b/components/modules/hero/hero.tsx
index 928a078ff..9b8d46346 100644
--- a/components/modules/hero/hero.tsx
+++ b/components/modules/hero/hero.tsx
@@ -1,41 +1,40 @@
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-
-import Link from 'components/ui/link/link'
-import Text from 'components/ui/text/text'
-const SanityImage = dynamic(() => import('components/ui/sanity-image'))
+import Link from 'components/ui/link/link';
+import Text from 'components/ui/text/text';
+const SanityImage = dynamic(() => import('components/ui/sanity-image'));
 
 interface HeroProps {
-  variant: string
-  text?: string
-  label?: string
-  title: string
-  image: object | any
-  desktopImage: object | any
+  variant: string;
+  text?: string;
+  label?: string;
+  title: string;
+  image: object | any;
+  desktopImage: object | any;
   link: {
-    title: string
+    title: string;
     reference: {
-      title: string
+      title: string;
       slug: {
-        current: string
-      }
-    }
-  }
+        current: string;
+      };
+    };
+  };
 }
 
-type HeroSize = keyof typeof heroSize
+type HeroSize = keyof typeof heroSize;
 
 const heroSize = {
-  fullScreen: 'aspect-[3/4] lg:aspect-auto lg:h-[calc(100vh-4rem)]',
-  halfScreen: 'aspect-square max-h-[60vh] lg:aspect-auto lg:min-h-[60vh]',
-}
+  fullScreen: 'aspect-[3/4] lg:aspect-auto lg:h-[calc(75vh-4rem)]',
+  halfScreen: 'aspect-square max-h-[60vh] lg:aspect-auto lg:min-h-[60vh]'
+};
 
 const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
-  const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen
+  const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen;
 
   return (
     <div
-      className={`relative w-screen ${heroClass} flex flex-col justify-end relative text-high-contrast`}
+      className={`relative w-screen ${heroClass} relative flex flex-col justify-end text-high-contrast`}
     >
       {image && (
         <SanityImage
@@ -44,10 +43,10 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
           priority={true}
           width={1200}
           height={600}
-          className="absolute inset-0 h-full w-full object-cover z-10"
+          className="absolute inset-0 z-10 h-full w-full object-cover"
         />
       )}
-      <div className="flex flex-col items-start text-high-contrast absolute max-w-md z-50 left-4 bottom-5 lg:max-w-2xl lg:bottom-8 lg:left-8 2xl:left-16 2xl:bottom-16">
+      <div className="absolute bottom-5 left-4 z-50 flex max-w-md flex-col items-start text-high-contrast lg:bottom-8 lg:left-8 lg:max-w-2xl 2xl:bottom-16 2xl:left-16">
         {label && (
           <Text className="mb-1 lg:mb-2" variant="label">
             {label}
@@ -67,7 +66,7 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
         )}
         {link?.reference && (
           <Link
-            className="inline-flex transition bg-high-contrast text-white text-base py-4 px-10 mt-6 hover:bg-low-contrast lg:mt-8"
+            className="mt-6 inline-flex bg-high-contrast px-10 py-4 text-base text-white transition hover:bg-low-contrast lg:mt-8"
             href={link.reference.slug.current}
           >
             {link?.title ? link.title : link.reference.title}
@@ -75,7 +74,7 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Hero
+export default Hero;
diff --git a/components/product/product-view.tsx b/components/product/product-view.tsx
index 106499290..07176bead 100644
--- a/components/product/product-view.tsx
+++ b/components/product/product-view.tsx
@@ -1,14 +1,14 @@
 'use client';
 
 import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
-import Price from 'components/product/price';
-import SanityImage from 'components/ui/sanity-image';
+import SanityImage from 'components/ui/sanity-image/sanity-image';
+import Text from 'components/ui/text/text';
 import { Product } from 'lib/storm/types/product';
 import { cn } from 'lib/utils';
 import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
+import Price from './price';
 const ProductCard = dynamic(() => import('components/ui/product-card'));
-const Text = dynamic(() => import('components/ui/text'));
 interface ProductViewProps {
   product: Product;
   relatedProducts: Product[];
@@ -27,7 +27,7 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
           <div className={`pdp aspect-square lg:hidden`}>
             {images && (
               <Carousel
-                hasArrows={true}
+                hasArrows={images.length > 1 ? true : false}
                 hasDots={false}
                 gliderClasses={'lg:px-8 2xl:px-16'}
                 slidesToScroll={1}
@@ -69,11 +69,11 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
           </div>
         </div>
 
-        <div className="col-span-1 mx-auto flex h-auto w-full flex-col px-4 py-6 lg:sticky lg:top-8 lg:col-span-5 lg:px-8 lg:py-0 lg:pr-0 2xl:top-16 2xl:px-16 2xl:pr-0">
+        <div className="col-span-1 mx-auto flex h-auto w-full flex-col p-4 lg:sticky lg:top-8 lg:col-span-5 lg:px-8 lg:py-0 lg:pr-0 2xl:top-16 2xl:px-16 2xl:pr-0">
           <Text variant={'productHeading'}>{product.name}</Text>
 
           <Price
-            className="text-sm font-medium leading-tight lg:text-base"
+            className="mt-2 text-sm font-medium leading-tight lg:text-base"
             amount={`${product.price.value}`}
             currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
           />
diff --git a/components/ui/card/card.tsx b/components/ui/card/card.tsx
index 723c63021..5dbb1e442 100644
--- a/components/ui/card/card.tsx
+++ b/components/ui/card/card.tsx
@@ -1,48 +1,49 @@
-'use client'
+'use client';
 
-import SanityImage from 'components/ui/sanity-image'
-import { cn } from 'lib/utils'
-import Link from 'next/link'
-import { FC } from 'react'
+import SanityImage from 'components/ui/sanity-image';
+import { cn } from 'lib/utils';
+import Link from 'next/link';
+import { FC } from 'react';
 
 interface CardProps {
-  className?: string
-  title: string
-  image: object | any
-  link: object | any
-  text?: string
-  imageFormat?: 'square' | 'portrait' | 'landscape'
+  className?: string;
+  title: string;
+  image: object | any;
+  link: object | any;
+  text?: string;
+  imageFormat?: 'square' | 'portrait' | 'landscape';
 }
 
-const placeholderImg = '/product-img-placeholder.svg'
+const placeholderImg = '/product-img-placeholder.svg';
 
-const Card: FC<CardProps> = ({
-  className,
-  title,
-  image,
-  link,
-  text,
-  imageFormat = 'square',
-}) => {
-  const rootClassName = cn('relative', className)
+const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat = 'square' }) => {
+  const rootClassName = cn('relative', className);
 
-  const { linkType } = link
+  const { linkType } = link;
 
   const imageWrapperClasses = cn('w-full h-full overflow-hidden relative', {
     ['aspect-square']: imageFormat === 'square',
     ['aspect-[3/4]']: imageFormat === 'portrait',
-    ['aspect-[4/3]']: imageFormat === 'landscape',
-  })
-  const imageClasses = cn('object-cover w-full h-full')
+    ['aspect-[4/3]']: imageFormat === 'landscape'
+  });
+  const imageClasses = cn('object-cover w-full h-full');
 
   function Card() {
     if (linkType === 'internal') {
+      const type = link.internalLink.reference._type;
+
+      let href = '';
+
+      if (type === 'product') {
+        href = `/product/${link.internalLink.reference.slug.current}`;
+      } else if (type === 'category') {
+        href = `/category/${link.internalLink.reference.slug.current}`;
+      } else {
+        return `${link.internalLink.reference.slug.current}`;
+      }
+
       return (
-        <Link
-          href={link.internalLink.reference.slug.current}
-          className={rootClassName}
-          aria-label={title}
-        >
+        <Link href={href} className={rootClassName} aria-label={title}>
           <div className="flex flex-col">
             {image && (
               <div className={imageWrapperClasses}>
@@ -54,25 +55,17 @@ const Card: FC<CardProps> = ({
                 />
               </div>
             )}
-            <h3 className="mt-2 text-high-contrast font-medium text-sm underline underline-offset-2 lg:text-lg lg:mt-3 lg:underline-offset-4 2xl:text-xl">
+            <h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
               {title}
             </h3>
-            {text && (
-              <p className="text-sm mt-1 text-low-contrast lg:text-base lg:mt-2">
-                {text}
-              </p>
-            )}
+            {text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
           </div>
         </Link>
-      )
+      );
     }
 
     return (
-      <a
-        href={link.externalLink.url}
-        className={rootClassName}
-        aria-label={title}
-      >
+      <a href={link.externalLink.url} className={rootClassName} aria-label={title}>
         <div className="flex flex-col">
           {image && (
             <div className={imageWrapperClasses}>
@@ -84,20 +77,16 @@ const Card: FC<CardProps> = ({
               />
             </div>
           )}
-          <h3 className="mt-2 text-high-contrast font-medium text-sm underline underline-offset-2 lg:text-lg lg:mt-3 lg:underline-offset-4 2xl:text-xl">
+          <h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
             {title}
           </h3>
-          {text && (
-            <p className="text-sm mt-1 text-low-contrast lg:text-base lg:mt-2">
-              {text}
-            </p>
-          )}
+          {text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
         </div>
       </a>
-    )
+    );
   }
 
-  return <Card />
-}
+  return <Card />;
+};
 
-export default Card
+export default Card;
diff --git a/components/ui/locale-switcher/locale-switcher.tsx b/components/ui/locale-switcher/locale-switcher.tsx
index da7381659..bd9150c2a 100644
--- a/components/ui/locale-switcher/locale-switcher.tsx
+++ b/components/ui/locale-switcher/locale-switcher.tsx
@@ -7,7 +7,7 @@ import {
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
-import { i18n } from '../../../i18n-config';
+import { supportedLanguages } from '../../../i18n-config';
 
 interface LocaleSwitcherProps {
   currentLocale: string;
@@ -58,7 +58,7 @@ export default function LocaleSwitcher({ currentLocale, localeData }: LocaleSwit
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="drop-shadow-xl">
           <ul className="">
-            {i18n.locales.map((locale) => {
+            {supportedLanguages.locales.map((locale) => {
               if (currentLocale === locale.id) {
                 return;
               } else {
diff --git a/components/ui/product-card/product-card.tsx b/components/ui/product-card/product-card.tsx
index fb73aa980..96f29ddd0 100644
--- a/components/ui/product-card/product-card.tsx
+++ b/components/ui/product-card/product-card.tsx
@@ -23,7 +23,7 @@ const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) =>
 
   return (
     <Link
-      href={`${product.slug}`}
+      href={`/product/${product.slug}`}
       className={rootClassName}
       aria-label={product.name}
       locale={product.locale}
diff --git a/i18n-config.ts b/i18n-config.ts
index c320efda0..8a34813cd 100644
--- a/i18n-config.ts
+++ b/i18n-config.ts
@@ -1,4 +1,4 @@
-export const i18n = {
+export const supportedLanguages = {
   defaultLocale: 'sv',
   locales: [
     {
@@ -12,4 +12,4 @@ export const i18n = {
   ],
 } as const
 
-export type Locale = typeof i18n['locales'][number]
\ No newline at end of file
+export type Locale = typeof supportedLanguages['locales'][number]
\ No newline at end of file
diff --git a/lib/sanity/queries.tsx b/lib/sanity/queries.tsx
index 1e35dcbff..945046a9a 100644
--- a/lib/sanity/queries.tsx
+++ b/lib/sanity/queries.tsx
@@ -107,6 +107,7 @@ export const modules = `
     desktopLayout,
     imageFormat,
     blurbs[]->{
+      _type,
       title,
       text,
       link {
@@ -209,29 +210,27 @@ export const productQuery = `*[_type == "product" && slug.current == $slug && la
     "slug": slug.current,
     "locale": language
   },
-  "product": {
-    id,
-    "name": title,
-    description,
-    "descriptionHtml": "",
-    images[] {
-      ${imageFields}
-    },
-    price {
-      value,
-      currencyCode,
-      retailPrice
-    },
-    options[] {
-      id,
-      displayName,
-      values[] {
-        label,
-        "hexColors": hexColors.hex
-      }
-    },
-    "variants": []
+  id,
+  "name": title,
+  description,
+  "descriptionHtml": "",
+  images[] {
+    ${imageFields}
   },
+  price {
+    value,
+    currencyCode,
+    retailPrice
+  },
+  options[] {
+    id,
+    displayName,
+    values[] {
+      label,
+      "hexColors": hexColors.hex
+    }
+  },
+  "variants": [],
   seo {
     ${seoFields}
   }
@@ -243,15 +242,8 @@ export const categoryQuery = `*[_type == "category" && slug.current == $slug &&
   title,
   "slug": slug.current,
   "locale": language,
-  showBanner,
-  banner {
-    _type,
-    _key,
-    title,
-    text,
-    image {
-      ${imageFields}
-    }
+  image {
+    ${imageFields}
   },
   "translations": *[_type == "translation.metadata" && references(^._id)].translations[].value->{
     title,
diff --git a/middleware.ts b/middleware.ts
index ece2879b7..decff6084 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -6,7 +6,6 @@ export default createMiddleware({
  
   // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
   defaultLocale: 'sv',
-  localeDetection: false
 });
  
 export const config = {