diff --git a/components/header.tsx b/components/header.tsx
index 2dbaff8..6859f7e 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,124 +1,121 @@
-import Link from "next/link"
-import { signIn, signOut, useSession } from "next-auth/react"
-import styles from "../styles/header.module.css"
+// import Link from "next/link"
+// import { signIn, signOut, useSession } from "next-auth/react"
+// import styles from "../styles/header.module.css"
 
-// The approach used in this component shows how to build a sign in and sign out
-// component that works on pages which support both client and server side
-// rendering, and avoids any flash incorrect content on initial page load.
-export default function Header() {
-  const { data: session, status } = useSession()
-  const loading = status === "loading"
+// // The approach used in this component shows how to build a sign in and sign out
+// // component that works on pages which support both client and server side
+// // rendering, and avoids any flash incorrect content on initial page load.
+// export default function Header() {
+//   const { data: session, status } = useSession()
+//   const loading = status === "loading"
 
-//generate top header with sign in/out button and dropdown menu and user name/surname using tailwindcss
+//   //generate top header with sign in/out button and dropdown menu and user name/surname using tailwindcss
 
 
 
 
-  return (
-    <header className="">
-      <noscript>
-        <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
-      </noscript>
-      {/* <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script> */}
-      <div className={styles.signedInStatus}>
-        <p
-          className={`nojs-show ${
-            !session && loading ? styles.loading : styles.loaded
-          }`}
-        >
-          {!session && (
-            <>
-              <span className={styles.notSignedInText}>
-                You are not signed in
-              </span>
-              <a
-                href={`/api/auth/signin`}
-                className={styles.buttonPrimary}
-                onClick={(e) => {
-                  e.preventDefault()
-                  signIn()
-                }}
-              >
-                Sign in
-              </a>
-            </>
-          )}
-          {session?.user && (
-            <>
-              {session.user.image && (
-                <span
-                  style={{ backgroundImage: `url('${session.user.image}')` }}
-                  className={styles.avatar}
-                />
-              )}
-              <span className={styles.signedInText}>
-                <small>Signed in as</small>
-                <br />
-                <strong>{session.user.email ?? session.user.name}</strong>
-              </span>
-              <a
-                href={`/api/auth/signout`}
-                className={styles.button}
-                onClick={(e) => {
-                  e.preventDefault()
-                  signOut()
-                }}
-              >
-                Sign out
-              </a>
-            </>
-          )}
-        </p>
-      </div>
-      <nav className="max-w-7xl mx-auto ">
-        <ul className={styles.navItems}>
-          <li className={styles.navItem}>
-            <Link href="/">Home</Link>
-          </li>
-          <li className={styles.navItem}>
-            <Link href="/client">Client</Link>
-          </li>
-          <li className={styles.navItem}>
-            <Link href="/server">Server</Link>
-          </li>
-          <li className={styles.navItem}>
-            <Link href="/protected">Protected</Link>
-          </li>
-          <li className={styles.navItem}>
-            <Link href="/api-example">API</Link>
-          </li>
-          <li className={styles.navItem}>
-            <Link href="/admin">Admin</Link>
-          </li>
-          <li className={styles.navItem}>
-            <Link href="/me">Me</Link>
-          </li>         
-           <li className={styles.navItem}>
-                   CART
-          {/* cart submenus */}
-          <ul className={styles.submenu}>
-            <li className={styles.submenuItem}>
-              <Link href="/cart/locations">Locations</Link>
-            </li>
-            <li className={styles.submenuItem}>
-              <Link href="/cart/publishers">Publishers</Link>
-            </li>
-            <li className={styles.submenuItem}>
-              <Link href="/cart/availabilities">Availabilities</Link>
-            </li>
-            <li className={styles.submenuItem}>
-              <Link href="/cart/cartevents">Cart Event</Link>
-            </li>
-          </ul>
+//   return (
+//     <header className="">
+//       <noscript>
+//         <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
+//       </noscript>
+//       {/* <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script> */}
+//       <div className={styles.signedInStatus}>
+//         <p className={`nojs-show ${!session && loading ? styles.loading : styles.loaded}`}>
+//           {!session && (
+//             <>
+//               <span className={styles.notSignedInText}>
+//                 You are not signed in
+//               </span>
+//               <a
+//                 href={`/api/auth/signin`}
+//                 className={styles.buttonPrimary}
+//                 onClick={(e) => {
+//                   e.preventDefault()
+//                   signIn()
+//                 }}
+//               >
+//                 Sign in
+//               </a>
+//             </>
+//           )}
+//           {session?.user && (
+//             <>
+//               {session.user.image && (
+//                 <span
+//                   style={{ backgroundImage: `url('${session.user.image}')` }}
+//                   className={styles.avatar}
+//                 />
+//               )}
+//               <span className={styles.signedInText}>
+//                 <small>Signed in as</small>
+//                 <br />
+//                 <strong>{session.user.email ?? session.user.name}</strong>
+//               </span>
+//               <a
+//                 href={`/api/auth/signout`}
+//                 className={styles.button}
+//                 onClick={(e) => {
+//                   e.preventDefault()
+//                   signOut()
+//                 }}
+//               >
+//                 Sign out
+//               </a>
+//             </>
+//           )}
+//         </p>
+//       </div>
+//       {/* <nav className="max-w-7xl mx-auto ">
+//         <ul className={styles.navItems}>
+//           <li className={styles.navItem}>
+//             <Link href="/">Home</Link>
+//           </li>
+//           <li className={styles.navItem}>
+//             <Link href="/client">Client</Link>
+//           </li>
+//           <li className={styles.navItem}>
+//             <Link href="/server">Server</Link>
+//           </li>
+//           <li className={styles.navItem}>
+//             <Link href="/protected">Protected</Link>
+//           </li>
+//           <li className={styles.navItem}>
+//             <Link href="/api-example">API</Link>
+//           </li>
+//           <li className={styles.navItem}>
+//             <Link href="/admin">Admin</Link>
+//           </li>
+//           <li className={styles.navItem}>
+//             <Link href="/me">Me</Link>
+//           </li>
+//            <li className={styles.navItem}>
+//                    CART
+//           {/* cart submenus * / }
+//       <ul className={styles.submenu}>
+//         <li className={styles.submenuItem}>
+//           <Link href="/cart/locations">Locations</Link>
+//         </li>
+//         <li className={styles.submenuItem}>
+//           <Link href="/cart/publishers">Publishers</Link>
+//         </li>
+//         <li className={styles.submenuItem}>
+//           <Link href="/cart/availabilities">Availabilities</Link>
+//         </li>
+//         <li className={styles.submenuItem}>
+//           <Link href="/cart/cartevents">Cart Event</Link>
+//         </li>
+//       </ul>
 
-          </li>
-          {/* end cart submenus */}
+//     </li>
+//           {/* end cart submenus * / }
 
-          <li className={styles.navItem}>
-            <Link href="/cart/calendar">Calendar</Link>
-          </li>
-        </ul>
-      </nav>
-    </header>
-  )
-}
+//       <li className={styles.navItem}>
+//         <Link href="/cart/calendar">Calendar</Link>
+//       </li>
+//     </ul >
+//       </nav > */ }
+
+//     </header >
+//   )
+// }
diff --git a/components/layout.tsx b/components/layout.tsx
index 39d91c5..25279f5 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -1,4 +1,4 @@
-import Header from "./header"
+
 import Link from 'next/link'
 import Footer from "./footer"
 import Sidebar from "./sidebar"
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index 73ff708..52144db 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -16,6 +16,7 @@ import { UserRole } from "@prisma/client";
 const packageVersion = require('../package.json').version;
 
 function SidebarMenuItem({ item, session, isSubmenu }) {
+
   // const tMenu = useTranslations('menu');
   // const [t, locale] = useState(useTranslations('menu'));
   // useEffect(() => {
diff --git a/pages/cart/locations/[id].tsx b/pages/cart/locations/[id].tsx
index c66f338..4a7de4d 100644
--- a/pages/cart/locations/[id].tsx
+++ b/pages/cart/locations/[id].tsx
@@ -5,6 +5,8 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
 import { GetServerSideProps } from 'next';
 import { Location, UserRole } from "@prisma/client";
 import axiosServer from '../../../src/axiosServer';
+import { useTranslations, createTranslator } from 'next-intl';
+// import { getTranslations } from 'next-intl/server';
 
 const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
     const [activeTab, setActiveTab] = useState('mainLocation');
@@ -12,6 +14,7 @@ const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
 
     const [images, setImages] = useState([]);
     const [mainLocationImageCount, setMainLocationImageCount] = useState(0);
+    const t = useTranslations('content');
 
     useEffect(() => {
         const mainLocationImages = [location.picture1, location.picture2, location.picture3].filter(Boolean);
@@ -98,15 +101,37 @@ const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const axios = await axiosServer(context);
 
+    // Get the locale from context or use default
+    const locale = context.locale || 'en';
+    const messages = (await import(`../../../content/i18n/${locale}.json`)).default;
+
+    const t = createTranslator({ locale, messages });
+    // Function to replace placeholders in HTML content
+    const replacePlaceholders = (content: string) => {
+        if (!content) return '';
+        const placeholderPattern = /{([^}]+)}/g;
+        return content.replace(placeholderPattern, (match, key) => {
+            try {
+                return t(key);
+            } catch (error) {
+                return match;
+            }
+        });
+    };
+
+
+
     const { data: location } = await axios.get(
         `${process.env.NEXT_PUBLIC_PUBLIC_URL}/api/data/locations/${context.params.id}`
     );
+    location.content = replacePlaceholders(location.content);
+
     if (location.backupLocationId !== null) {
         const { data: backupLocation } = await axios.get(
             process.env.NEXT_PUBLIC_PUBLIC_URL + "/api/data/locations/" + location.backupLocationId
         );
         location.backupLocationName = backupLocation.name;
-        location.backupLocationContent = backupLocation ? backupLocation.content : "";
+        location.backupLocationContent = backupLocation ? replacePlaceholders(backupLocation.content) : "";
         location.backupLocationImages = backupLocation ? [backupLocation.picture1, backupLocation.picture2, backupLocation.picture3].filter(Boolean) : [];
     }