diff --git a/.env.sample b/.env.sample
index 9c5b8ca..1ad4c3d 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,6 +1,7 @@
 REACT_APP_CONTENTSTACK_API_KEY=YOUR_STACK_API_KEY
 REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN
 REACT_APP_CONTENTSTACK_ENVIRONMENT=YOUR_ENVIRONMENT
+REACT_APP_CONTENTSTACK_PREVIEW_TOKEN=YOUR_PREVIEW_TOKEN
 
 # Supported Regions:
 # For AWS North America, set region as US
diff --git a/README.md b/README.md
index 3d7f3d0..31cc449 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,7 @@ This is a React starter app that integrates with Contentstack's Content Delivery
    ```
    REACT_APP_CONTENTSTACK_API_KEY=YOUR_STACK_API_KEY
    REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN
+   REACT_APP_CONTENTSTACK_PREVIEW_TOKEN=YOUR_PREVIEW_TOKEN
    REACT_APP_CONTENTSTACK_ENVIRONMENT=YOUR_ENVIRONMENT
    REACT_APP_CONTENTSTACK_REGION=YOUR_STACK_REGION
    ```
@@ -42,7 +43,7 @@ This is a React starter app that integrates with Contentstack's Content Delivery
 
 To configure the app with your Contentstack account:
 
-- Replace `YOUR_STACK_API_KEY`, `YOUR_DELIVERY_TOKEN`, `YOUR_ENVIRONMENT` and `YOUR_STACK_REGION` in the `.env` file with your Contentstack API key, delivery token, environment name and region respectively.
+- Replace `YOUR_STACK_API_KEY`, `YOUR_DELIVERY_TOKEN`, `YOUR_PREVIEW_TOKEN`, `YOUR_ENVIRONMENT` and `YOUR_STACK_REGION` in the `.env` file with your Contentstack API key, delivery token, environment name and region respectively.
 
 **Supported Regions:**
 
@@ -52,6 +53,8 @@ To configure the app with your Contentstack account:
 - **Azure Europe:** `AZURE_EU`
 - **GCP North America:** `GCP_NA`
 
+> 🚨 **Important Note:** **Live Preview** is not supported in the **GCP NA** region! 🚨
+
 ## Usage
 
 1. Once the app is running, navigate to `http://localhost:3000` in your web browser.
@@ -62,6 +65,7 @@ To configure the app with your Contentstack account:
 
 - Integration with Contentstack's Content Delivery API.
 - Dynamic rendering of content fetched from Contentstack.
+- Live Preview of the Content
 
 ## License
 
diff --git a/package-lock.json b/package-lock.json
index fc6164e..922d196 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@contentstack/live-preview-utils": "^2.0.2",
+        "@contentstack/utils": "^1.3.8",
         "@contentstack/venus-components": "^2.2.4",
         "@reduxjs/toolkit": "^2.2.1",
         "@testing-library/jest-dom": "^5.17.0",
@@ -2036,9 +2037,9 @@
       }
     },
     "node_modules/@contentstack/utils": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@contentstack/utils/-/utils-1.3.3.tgz",
-      "integrity": "sha512-Zj2ejyfbxZlXrF1Wl9lhwK2mCCWo5ooiDnSlNA8nupZ1nDsTfouYERgps8r/uyzm18Vda2wBitxloThxKAyzsA=="
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@contentstack/utils/-/utils-1.3.8.tgz",
+      "integrity": "sha512-BKZcZs2/odh9nmugLmiNVBEbz34gjfgibZOsRlYV9ux7t+GkfjbELDjWJpKenL6G5Mb270VXVuDbNqkDLK96Zw=="
     },
     "node_modules/@contentstack/venus-components": {
       "version": "2.2.4",
diff --git a/package.json b/package.json
index 24022c9..3ae79df 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "author": "Contentstack",
   "dependencies": {
     "@contentstack/live-preview-utils": "^2.0.2",
+    "@contentstack/utils": "^1.3.8",
     "@contentstack/venus-components": "^2.2.4",
     "@reduxjs/toolkit": "^2.2.1",
     "@testing-library/jest-dom": "^5.17.0",
diff --git a/src/api/index.ts b/src/api/index.ts
index 6d5b6bb..a1f88f1 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -8,6 +8,7 @@ import {
 } from "../reducer";
 import { initializeContentstackSdk } from "../sdk/utils";
 import * as Utils from "@contentstack/utils";
+import { addEditableTags } from "@contentstack/utils";
 
 const Stack = initializeContentstackSdk();
 
@@ -67,6 +68,7 @@ export const fetchHeaderData = async (
   dispatch: Dispatch<any>
 ): Promise<void> => {
   const data = await getEntry(CONTENT_TYPES.HEADER);
+  addEditableTags(data[0][0], CONTENT_TYPES.HEADER, true, "en-us");
   dispatch(setHeaderData(data[0][0]));
 };
 
@@ -74,6 +76,7 @@ export const fetchFooterData = async (
   dispatch: Dispatch<any>
 ): Promise<void> => {
   const data = await getEntry(CONTENT_TYPES.FOOTER);
+  addEditableTags(data[0][0], CONTENT_TYPES.FOOTER, true, "en-us");
   dispatch(setFooterData(data[0][0]));
 };
 
@@ -86,6 +89,7 @@ export const fetchHomePageData = async (
     referenceFieldPath: undefined,
     jsonRtePath: undefined,
   });
+  addEditableTags(data[0], CONTENT_TYPES.PAGE, true, "en-us");
   dispatch(setHomePageData(data[0]));
 };
 
@@ -115,6 +119,7 @@ export const fetchMenuPageData = async (
     referenceFieldPath: ["sections.menu.course.dishes"],
     jsonRtePath: undefined,
   });
+  addEditableTags(data[0], CONTENT_TYPES.PAGE, true, "en-us");
   dispatch(setMenuPageData(data[0].sections[0].menu.course));
   setLoading(false);
 };
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 9076deb..9c7e599 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -13,10 +13,10 @@ const Footer: React.FC = () => {
       <div className="footer-content">
         {navigation_links && (
           <div className="footer-link">
-            <h1>{navigation_links?.title}</h1>
+            <h1 {...navigation_links.$.title}>{navigation_links?.title}</h1>
             <nav className="footer-nav">
               {navigation_links?.link?.map((link: TLink, index: number) => (
-                <Link key={`key-${index}`} to={link.href}>
+                <Link {...link.$.title} key={`key-${index}`} to={link.href}>
                   {link.title}
                 </Link>
               ))}
@@ -25,16 +25,26 @@ const Footer: React.FC = () => {
         )}
         {information_section && (
           <div className="footer-info">
-            <img src={information_section.logo?.url} alt="Footer" />
+            <img
+              {...information_section.logo?.$.url}
+              src={information_section.logo?.url}
+              alt="Footer"
+            />
 
-            <p>{information_section?.descrption}</p>
+            <p {...information_section.$.descrption}>
+              {information_section?.descrption}
+            </p>
             <h3>Hours</h3>
-            <p style={{ opacity: 0.8 }}>{information_section?.timings}</p>
-            <p style={{ opacity: 0.8 }}>{information_section?.holiday}</p>
+            <p {...information_section.$.timings} style={{ opacity: 0.8 }}>
+              {information_section?.timings}
+            </p>
+            <p {...information_section.$.holiday} style={{ opacity: 0.8 }}>
+              {information_section?.holiday}
+            </p>
           </div>
         )}
       </div>
-      <h2>{copyright}</h2>
+      <h2 {...footerData.$.copyright}>{copyright}</h2>
     </div>
   );
 };
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 940720e..2caa41a 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -18,12 +18,13 @@ const Header: React.FC = () => {
     <div className={`header ${isOpen ? "open" : ""}`}>
       <div className="logo-menu">
         <Link to="/">
-          <img src={logo?.url} alt="Logo" />
+          <img {...logo.$.url} src={logo?.url} alt="Logo" />
         </Link>
       </div>
       <nav className={`nav ${isOpen ? "active" : ""}`}>
         {navigation_links?.link.map((link: TLink, index: number) => (
           <Link
+            {...link.$.title}
             key={`key-${index}`}
             to={link.href}
             className={location.pathname === link.href ? "active" : ""}
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index b7ad446..8a6a07c 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -35,13 +35,22 @@ const Home: React.FC = () => {
       <div className="hero-section">
         {home.hero_section?.banner?.url && (
           <div className="hero-banner">
-            <img src={home.hero_section.banner.url} alt="Hero Banner" />
+            <img
+              {...home.hero_section.banner.$.url}
+              src={home.hero_section.banner.url}
+              alt="Hero Banner"
+            />
           </div>
         )}
         <div className="hero-content">
-          <h1>{styleAlternateWords(home.hero_section?.heading || "")}</h1>
-          <p>{home.hero_section?.description}</p>
+          <h1 {...home.hero_section?.$.heading}>
+            {styleAlternateWords(home.hero_section?.heading || "")}
+          </h1>
+          <p {...home.hero_section?.$.description}>
+            {home.hero_section?.description}
+          </p>
           <Button
+            {...home.hero_section?.$.primary_cta}
             size="large"
             className="cta-button"
             onClick={() => {
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 45983c8..d344611 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -23,9 +23,7 @@ const Menu: React.FC = () => {
 
   const memoizedMenuPageData = useMemo(() => menuPageData, [menuPageData]);
 
-  const categories = memoizedMenuPageData?.map(
-    (course: TMenu) => course.course_name
-  );
+  const categories = memoizedMenuPageData?.map((course: TMenu) => course);
   const dishes = memoizedMenuPageData?.map((course: TMenu) => course.dishes);
   const flatDishes: TDishes[] = dishes
     ?.flat()
@@ -70,11 +68,12 @@ const Menu: React.FC = () => {
               </p>
               {categories?.map((category, index) => (
                 <p
+                  {...category.$.course_name}
                   key={`cat-${index + 1}`}
                   className={activeIndex === index + 1 ? "active" : ""}
                   onClick={() => setActiveIndex(index + 1)}
                 >
-                  {category}
+                  {category.course_name}
                 </p>
               ))}
             </div>
diff --git a/src/components/menu/MenuCard.tsx b/src/components/menu/MenuCard.tsx
index ae127fa..fc997d6 100644
--- a/src/components/menu/MenuCard.tsx
+++ b/src/components/menu/MenuCard.tsx
@@ -8,6 +8,7 @@ const MenuCard: React.FC<{ data: TDishes[] }> = ({ data }) => {
         data.map((menuItem: TDishes) => (
           <div className="menu-card-item">
             <div
+              {...menuItem.image.$.url}
               style={{
                 background: `url(${menuItem.image.url}) lightgray 50% / cover no-repeat`,
                 height: "320px",
@@ -16,9 +17,13 @@ const MenuCard: React.FC<{ data: TDishes[] }> = ({ data }) => {
             ></div>
             <div className="item-content">
               <div className="item-content-text">
-                <span className="price">${menuItem.price}</span>
-                <p>{menuItem.title}</p>
-                <span className="description">{menuItem.description}</span>
+                <span {...menuItem.$.price} className="price">
+                  ${menuItem.price}
+                </span>
+                <p {...menuItem.$.title}>{menuItem.title}</p>
+                <span {...menuItem.$.description} className="description">
+                  {menuItem.description}
+                </span>
               </div>
               <hr
                 style={{
diff --git a/src/reducer/index.ts b/src/reducer/index.ts
index 6bbcf3a..93b3adf 100644
--- a/src/reducer/index.ts
+++ b/src/reducer/index.ts
@@ -10,13 +10,25 @@ interface AppState {
 
 const initialState: AppState = {
   headerData: {
-    website_title: "",
     logo: {
+      $: {
+        url: {
+          "data-cslp": "",
+        },
+      },
       url: "",
     },
     navigation_links: {
       link: [
         {
+          $: {
+            title: {
+              "data-cslp": "",
+            },
+            href: {
+              "data-cslp": "",
+            },
+          },
           href: "",
           title: "",
         },
@@ -24,18 +36,51 @@ const initialState: AppState = {
     },
   },
   footerData: {
-    title: "",
+    $: {
+      copyright: {
+        "data-cslp": "",
+      },
+    },
     navigation_links: {
+      $: {
+        title: {
+          "data-cslp": "",
+        },
+      },
       title: "",
       link: [
         {
+          $: {
+            title: {
+              "data-cslp": "",
+            },
+            href: {
+              "data-cslp": "",
+            },
+          },
           href: "",
           title: "",
         },
       ],
     },
     information_section: {
+      $: {
+        descrption: {
+          "data-cslp": "",
+        },
+        timings: {
+          "data-cslp": "",
+        },
+        holiday: {
+          "data-cslp": "",
+        },
+      },
       logo: {
+        $: {
+          url: {
+            "data-cslp": "",
+          },
+        },
         url: "",
       },
       descrption: "",
@@ -49,7 +94,23 @@ const initialState: AppState = {
       {
         home: {
           hero_section: {
+            $: {
+              heading: {
+                "data-cslp": "",
+              },
+              description: {
+                "data-cslp": "",
+              },
+              primary_cta: {
+                "data-cslp": "",
+              },
+            },
             banner: {
+              $: {
+                url: {
+                  "data-cslp": "",
+                },
+              },
               url: "",
             },
             heading: "",
@@ -62,11 +123,32 @@ const initialState: AppState = {
   },
   menuPageData: [
     {
+      $: {
+        course_name: {
+          "data-cslp": "",
+        },
+      },
       course_name: "",
       dishes: [
         {
+          $: {
+            title: {
+              "data-cslp": "",
+            },
+            description: {
+              "data-cslp": "",
+            },
+            price: {
+              "data-cslp": "",
+            },
+          },
           uid: "",
           image: {
+            $: {
+              url: {
+                "data-cslp": "",
+              },
+            },
             url: "",
           },
           title: "",
diff --git a/src/sdk/utils.ts b/src/sdk/utils.ts
index 4fb1dcf..7bcf2ea 100644
--- a/src/sdk/utils.ts
+++ b/src/sdk/utils.ts
@@ -81,6 +81,17 @@ export const initializeContentstackSdk = () => {
 
   ContentstackLivePreview.init({
     stackSdk: Stack,
+    clientUrlParams: {
+      protocol: "https",
+      host: getHostByRegion(REACT_APP_CONTENTSTACK_REGION as string),
+      port: 443,
+    },
+    editButton: {
+      enable: true,
+      exclude: ["outsideLivePreviewPortal"],
+      includeByQueryParameter: true,
+      position: "bottom",
+    },
   });
 
   return Stack;
diff --git a/src/types/index.ts b/src/types/index.ts
index 1bca99b..363b490 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,26 +1,51 @@
 export type THeaderData = {
-  website_title: string;
   logo: {
     url: string;
+    $: {
+      url: {
+        "data-cslp": string;
+      };
+    };
   };
   navigation_links: {
-    link: {
-      href: string;
-      title: string;
-    }[];
+    link: TLink[];
   };
 };
 
 export type TFooterData = {
-  title: string;
-
+  $: {
+    copyright: {
+      "data-cslp": string;
+    };
+  };
   navigation_links?: {
+    $: {
+      title: {
+        "data-cslp": string;
+      };
+    };
     title?: string;
     link?: TLink[];
   };
 
   information_section?: {
+    $: {
+      descrption: {
+        "data-cslp": string;
+      };
+      timings: {
+        "data-cslp": string;
+      };
+      holiday: {
+        "data-cslp": string;
+      };
+    };
     logo?: {
+      $: {
+        url: {
+          "data-cslp": string;
+        };
+      };
       url?: string;
     };
     descrption?: string;
@@ -35,7 +60,23 @@ export type THomePageData = {
   sections: {
     home: {
       hero_section?: {
+        $: {
+          heading: {
+            "data-cslp": string;
+          };
+          description: {
+            "data-cslp": string;
+          };
+          primary_cta: {
+            "data-cslp": string;
+          };
+        };
         banner?: {
+          $: {
+            url: {
+              "data-cslp": string;
+            };
+          };
           url: string;
         };
         heading?: string;
@@ -47,13 +88,37 @@ export type THomePageData = {
 };
 
 export type TLink = {
+  $: {
+    href: {
+      "data-cslp": string;
+    };
+    title: {
+      "data-cslp": string;
+    };
+  };
   href: string;
   title: string;
 };
 
 export type TDishes = {
+  $: {
+    title: {
+      "data-cslp": string;
+    };
+    description: {
+      "data-cslp": string;
+    };
+    price: {
+      "data-cslp": string;
+    };
+  };
   uid: string;
   image: {
+    $: {
+      url: {
+        "data-cslp": string;
+      };
+    };
     url: string;
   };
   title: string;
@@ -62,6 +127,11 @@ export type TDishes = {
 };
 
 export type TMenu = {
+  $: {
+    course_name: {
+      "data-cslp": string;
+    };
+  };
   course_name: string;
   dishes: TDishes[];
 };