diff --git a/app/layout.tsx b/app/layout.tsx
index ff5237e..2b32fd2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,4 @@
 import { draftMode } from "next/headers"
-import LoadingWidget from "components/common/LoadingWidget"
 import PreviewBar from "components/common/PreviewBar"
 import SiteFooter from "components/common/SiteFooter"
 import SiteHeader from "components/common/SiteHeader"
@@ -12,8 +11,6 @@ import "/styles/globals.css"
 
 import { getHeaderContent } from "lib/cms-content/getHeaderContent"
 import { redirect } from "next/navigation"
-import { NextRequest } from "next/server"
-import Script from "next/script"
 
 const inter = Inter({
   subsets: ["latin"],
@@ -63,7 +60,6 @@ export default async function RootLayout({
           </div>
         </div>
       </body>
-      <Script src="https://unpkg.com/@agility/web-studio-sdk@latest/dist/index.js" />
     </html>
   )
 }
diff --git a/components/agility-components/Heading.tsx b/components/agility-components/Heading.tsx
index 3e6e8a4..e121cda 100644
--- a/components/agility-components/Heading.tsx
+++ b/components/agility-components/Heading.tsx
@@ -14,12 +14,9 @@ const Heading = async ({ module, languageCode }: UnloadedModuleProps) => {
   })
 
   return (
-    <div className="relative px-8" data-agility-component={contentID}>
+    <div className="relative px-8">
       <div className="max-w-screen-xl mx-auto my-12 md:mt-18 lg:mt-20">
-        <h1
-          data-agility-field={"title"}
-          className="font-display text-secondary-500 text-4xl font-black tracking-wide"
-        >
+        <h1 className="font-display text-secondary-500 text-4xl font-black tracking-wide">
           {fields.title}
         </h1>
       </div>
diff --git a/components/agility-components/PostDetails.tsx b/components/agility-components/PostDetails.tsx
index 588da92..1533d9d 100644
--- a/components/agility-components/PostDetails.tsx
+++ b/components/agility-components/PostDetails.tsx
@@ -24,11 +24,10 @@ const PostDetails = async ({ dynamicPageItem }: UnloadedModuleProps) => {
 
   return (
     <>
-      <div className="relative px-8" data-agility-component={contentID}>
+      <div className="relative px-8">
         <div className="max-w-screen-xl mx-auto">
           <div className="h-64 md:h-96  lg:h-[480px] relative overflow-hidden rounded-lg">
             <AgilityPic
-              data-agility-field="image"
               image={post.image}
               alt={post.image.label}
               className="w-full"
@@ -41,28 +40,17 @@ const PostDetails = async ({ dynamicPageItem }: UnloadedModuleProps) => {
             />
           </div>
           <div className="max-w-2xl mx-auto mt-4">
-            <div
-              data-agility-field="category"
-              className="uppercase text-primary-500 text-xs font-bold tracking-widest leading-loose"
-            >
+            <div className="uppercase text-primary-500 text-xs font-bold tracking-widest leading-loose">
               {category}
             </div>
             <div className="border-b-2 border-primary-500 w-8"></div>
-            <div
-              data-agility-field="date"
-              className="mt-4 uppercase text-gray-600 italic font-semibold text-xs"
-            >
+            <div className="mt-4 uppercase text-gray-600 italic font-semibold text-xs">
               {dateStr}
             </div>
-            <h1
-              data-agility-field="title"
-              className="font-display text-4xl font-bold my-6 text-secondary-500"
-            >
+            <h1 className="font-display text-4xl font-bold my-6 text-secondary-500">
               {post.title}
             </h1>
             <div
-              data-agility-field="content"
-              data-agility-html="true"
               className="prose max-w-full mb-20"
               dangerouslySetInnerHTML={renderHTML(post.content)}
             />
diff --git a/components/agility-components/RichTextArea.tsx b/components/agility-components/RichTextArea.tsx
index 9e75858..43a97d2 100644
--- a/components/agility-components/RichTextArea.tsx
+++ b/components/agility-components/RichTextArea.tsx
@@ -1,31 +1,29 @@
-import {renderHTML, Module, UnloadedModuleProps} from "@agility/nextjs"
-import {getContentItem} from "lib/cms/getContentItem"
+import { renderHTML, Module, UnloadedModuleProps } from "@agility/nextjs"
+import { getContentItem } from "lib/cms/getContentItem"
 
 interface RichText {
-	textblob: string
+  textblob: string
 }
 
-const RichTextArea = async ({module, languageCode}: UnloadedModuleProps) => {
-	const {
-		fields: {textblob},
-		contentID,
-	} = await getContentItem<RichText>({
-		contentID: module.contentid,
-		languageCode,
-	})
+const RichTextArea = async ({ module, languageCode }: UnloadedModuleProps) => {
+  const {
+    fields: { textblob },
+    contentID,
+  } = await getContentItem<RichText>({
+    contentID: module.contentid,
+    languageCode,
+  })
 
-	return (
-		<section id={`${contentID}`} className="relative px-8" data-agility-component={contentID}>
-			<div className="max-w-2xl mx-auto my-12 md:mt-18 lg:mt-20">
-				<div
-					data-agility-field="textblob"
-					data-agility-html
-					className="my-6 prose prose-sm sm:prose lg:prose-lg xl:prose-xl max-w-full"
-					dangerouslySetInnerHTML={renderHTML(textblob)}
-				></div>
-			</div>
-		</section>
-	)
+  return (
+    <section id={`${contentID}`} className="relative px-8">
+      <div className="max-w-2xl mx-auto my-12 md:mt-18 lg:mt-20">
+        <div
+          className="my-6 prose prose-sm sm:prose lg:prose-lg xl:prose-xl max-w-full"
+          dangerouslySetInnerHTML={renderHTML(textblob)}
+        ></div>
+      </div>
+    </section>
+  )
 }
 
 export default RichTextArea
diff --git a/components/agility-components/TextBlockWithImage.tsx b/components/agility-components/TextBlockWithImage.tsx
index 52c33e1..225e49a 100644
--- a/components/agility-components/TextBlockWithImage.tsx
+++ b/components/agility-components/TextBlockWithImage.tsx
@@ -46,7 +46,6 @@ const TextBlockWithImage = async ({
     if (isUrlAbsolute(url) === false) {
       return (
         <Link
-          data-agility-field="primaryButton"
           href={url}
           title={text}
           target={target}
@@ -59,7 +58,6 @@ const TextBlockWithImage = async ({
       // else use anchor tag
       return (
         <a
-          data-agility-field="primaryButton"
           href={url}
           title={text}
           target={target}
@@ -75,12 +73,9 @@ const TextBlockWithImage = async ({
   const priority = fields.highPriority === "true"
 
   return (
-    <div className="relative px-8" data-agility-component={contentID}>
+    <div className="relative px-8">
       <div className="flex flex-col md:flex-row justify-between max-w-screen-xl mx-auto py-20 md:py-24 items-center">
-        <div
-          className="md:w-6/12 flex-shrink-0 relative "
-          data-agility-field="image"
-        >
+        <div className="md:w-6/12 flex-shrink-0 relative ">
           {fields.primaryButton ? (
             <Link href={fields.primaryButton.href} className="relative">
               <AgilityPic
@@ -122,23 +117,14 @@ const TextBlockWithImage = async ({
         >
           <div className="g:py-8 text-center md:text-left">
             {fields.tagline && (
-              <div
-                data-agility-field="tagline"
-                className="font-bold text-primary-500 text-sm text-center md:text-left uppercase py-1"
-              >
+              <div className="font-bold text-primary-500 text-sm text-center md:text-left uppercase py-1">
                 {fields.tagline}
               </div>
             )}
-            <h2
-              data-agility-field="title"
-              className="font-display text-4xl font-black text-secondary-500 md:text-3xl lg:text-5xl tracking-wide text-center mt-4 lg:leading-tight md:text-left"
-            >
+            <h2 className="font-display text-4xl font-black text-secondary-500 md:text-3xl lg:text-5xl tracking-wide text-center mt-4 lg:leading-tight md:text-left">
               {fields.title}
             </h2>
-            <p
-              data-agility-field="content"
-              className="mt-4 text-center md:text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-200"
-            >
+            <p className="mt-4 text-center md:text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-200">
               {fields.content}
             </p>
             {fields.primaryButton &&
diff --git a/components/common/PreviewBar.tsx b/components/common/PreviewBar.tsx
index 58a7868..3d7f4b7 100644
--- a/components/common/PreviewBar.tsx
+++ b/components/common/PreviewBar.tsx
@@ -1,137 +1,179 @@
 "use client"
 
 import Image from "next/image"
-import React, {useState} from "react"
-import {FaInfoCircle, FaGithub, FaChevronDown, FaChevronUp, FaSpinner, FaSyncAlt} from "react-icons/fa"
+import React, { useState } from "react"
+import {
+  FaInfoCircle,
+  FaGithub,
+  FaChevronDown,
+  FaChevronUp,
+  FaSpinner,
+  FaSyncAlt,
+} from "react-icons/fa"
 
 interface Props {
-	isPreview: boolean | undefined
-	isDevelopmentMode: boolean | undefined
-	startPreviewMode: (pathname: string) => Promise<void>
+  isPreview: boolean | undefined
+  isDevelopmentMode: boolean | undefined
+  startPreviewMode: (pathname: string) => Promise<void>
 }
 
 /**
  * This is a preview bar that is enabled by default to handle viewing content in preview & live mode, remove this for production use.
  **/
-const PreviewBar = ({isPreview, isDevelopmentMode, startPreviewMode}: Props) => {
-	const [open, setOpen] = useState(false)
-	const [isPreviewRequested, setisPreviewRequested] = useState(false)
+const PreviewBar = ({
+  isPreview,
+  isDevelopmentMode,
+  startPreviewMode,
+}: Props) => {
+  const [open, setOpen] = useState(false)
+  const [isPreviewRequested, setisPreviewRequested] = useState(false)
 
-	// handle view function to determine preview / live mode
-	const handleView = () => {
-		if (isDevelopmentMode) {
-			alert("You are currently in Development Mode, Live Mode is unavailable.")
-		} else {
-			if (!isDevelopmentMode && !isPreview) {
-				setisPreviewRequested(true)
+  // handle view function to determine preview / live mode
+  const handleView = () => {
+    if (isDevelopmentMode) {
+      alert("You are currently in Development Mode, Live Mode is unavailable.")
+    } else {
+      if (!isDevelopmentMode && !isPreview) {
+        setisPreviewRequested(true)
 
-				// start preview mode
-				startPreviewMode(window.location.pathname)
-					.then(() => {
-						console.log("Preview Mode Started")
-					})
-					.catch((error) => {
-						console.error("Error generating preview key", error)
-					})
-					.finally(() => {
-						setOpen(false)
-						setisPreviewRequested(false)
-					})
-			} else {
-				const exit = confirm("Would you like to exit Preview Mode?")
-				if (exit === true) {
-					window.location.href = `/api/preview/exit?slug=${encodeURIComponent(window.location.pathname)}`
-				} else return
-			}
-		}
-	}
+        // start preview mode
+        startPreviewMode(window.location.pathname)
+          .then(() => {
+            console.log("Preview Mode Started")
+          })
+          .catch((error) => {
+            console.error("Error generating preview key", error)
+          })
+          .finally(() => {
+            setOpen(false)
+            setisPreviewRequested(false)
+          })
+      } else {
+        const exit = confirm("Would you like to exit Preview Mode?")
+        if (exit === true) {
+          window.location.href = `/api/preview/exit?slug=${encodeURIComponent(
+            window.location.pathname
+          )}`
+        } else return
+      }
+    }
+  }
 
-	return (
-		<div className="bg-agility relative px-8 text-gray-200" data-agility-previewbar>
-			<div className="flex justify-between items-center max-w-screen-xl mx-auto">
-				<div className="flex items-center">
-					<span className="p-2 rounded-lg mr-4">
-						<a href="https://app.agilitycms.com" target="_blank" rel="noreferrer" title="Agility CMS">
-							{/* We use the built-in nextjs Image component here since this is referencing an SVG */}
-							<Image
-								src="/assets/agility-logo-triangle.svg"
-								alt="Agility CMS"
-								className="w-5 h-5 block md:hidden"
-								width={20}
-								height={20}
-							/>
-							<Image
-								src="/assets/agility-preview-logo.svg"
-								alt="Agility CMS"
-								className="h-5 w-20 hidden md:block"
-								width={80}
-								height={20}
-							/>
-						</a>
-					</span>
-					<div className="mr-4">
-						<a href="https://agilitycms.com/docs" target="_blank" rel="noreferrer" title="Help Center">
-							<div className="flex items-center">
-								<FaInfoCircle className="text-2xl mr-2" />
-								<p className="hidden md:block text-sm">Agility Docs</p>
-							</div>
-						</a>
-					</div>
-					<div>
-						<a
-							href="https://github.com/agility/agilitycms-nextjs-starter"
-							target="_blank"
-							rel="noreferrer"
-							title="View on GitHub"
-							className="text-2xl"
-						>
-							<div className="flex items-center">
-								<FaGithub className="mr-2" />
-								<p className="hidden md:block text-sm">View on GitHub</p>
-							</div>
-						</a>
-					</div>
-				</div>
-				<div className={`relative flex items-center ${open ? `bg-white ` : `bg-agility`} py-4`}>
-					{isPreview ? (
-						<p className={`hidden md:block text-sm px-2 ${open ? `text-agility` : `text-gray-200`}`}>
-							Previewing <span className="font-bold">Latest</span> Changes
-						</p>
-					) : (
-						<p className={`hidden md:block text-sm px-2 ${open ? `text-agility` : `text-gray-200`}`}>
-							Viewing <span className="font-bold">Published</span> Content
-						</p>
-					)}
-					<div className="p-2 text-gray-200 rounded-lg cursor-pointer z-20" onClick={() => setOpen(!open)}>
-						{open ? <FaChevronUp className="text-agility" /> : <FaChevronDown className="text-gray-200" />}
-					</div>
-					<div
-						className="absolute bg-white text-white text-sm py-4 px-4 w-15.1 -right-0 -bottom-28 md:-bottom-16 z-10 rounded-b-lg shadow-xl md:max-w-full"
-						style={{display: open ? "block" : "none"}}
-					>
-						{isPreview ? (
-							<p className="mb-4 text-center md:hidden text-agility z-20">
-								Previewing <span className="font-bold">Latest</span> Changes
-							</p>
-						) : (
-							<p className="mb-4 text-center md:hidden text-agility z-20">
-								Viewing <span className="font-bold">Published</span> Content
-							</p>
-						)}
-						<button
-							className="text-gray-200 bg-agility p-2 w-full rounded-md text-sm disabled:bg-gray-700 flex gap-2 items-center justify-center"
-							onClick={() => handleView()}
-							aria-disabled={isPreviewRequested}
-							disabled={isPreviewRequested}
-						>
-							{isPreviewRequested && <FaSpinner className="animate-spin" />}
-							{`View ${isPreview ? `Live` : `Preview`} Mode`}
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
+  return (
+    <div className="bg-agility relative px-8 text-gray-200">
+      <div className="flex justify-between items-center max-w-screen-xl mx-auto">
+        <div className="flex items-center">
+          <span className="p-2 rounded-lg mr-4">
+            <a
+              href="https://app.agilitycms.com"
+              target="_blank"
+              rel="noreferrer"
+              title="Agility CMS"
+            >
+              {/* We use the built-in nextjs Image component here since this is referencing an SVG */}
+              <Image
+                src="/assets/agility-logo-triangle.svg"
+                alt="Agility CMS"
+                className="w-5 h-5 block md:hidden"
+                width={20}
+                height={20}
+              />
+              <Image
+                src="/assets/agility-preview-logo.svg"
+                alt="Agility CMS"
+                className="h-5 w-20 hidden md:block"
+                width={80}
+                height={20}
+              />
+            </a>
+          </span>
+          <div className="mr-4">
+            <a
+              href="https://agilitycms.com/docs"
+              target="_blank"
+              rel="noreferrer"
+              title="Help Center"
+            >
+              <div className="flex items-center">
+                <FaInfoCircle className="text-2xl mr-2" />
+                <p className="hidden md:block text-sm">Agility Docs</p>
+              </div>
+            </a>
+          </div>
+          <div>
+            <a
+              href="https://github.com/agility/agilitycms-nextjs-starter"
+              target="_blank"
+              rel="noreferrer"
+              title="View on GitHub"
+              className="text-2xl"
+            >
+              <div className="flex items-center">
+                <FaGithub className="mr-2" />
+                <p className="hidden md:block text-sm">View on GitHub</p>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div
+          className={`relative flex items-center ${
+            open ? `bg-white ` : `bg-agility`
+          } py-4`}
+        >
+          {isPreview ? (
+            <p
+              className={`hidden md:block text-sm px-2 ${
+                open ? `text-agility` : `text-gray-200`
+              }`}
+            >
+              Previewing <span className="font-bold">Latest</span> Changes
+            </p>
+          ) : (
+            <p
+              className={`hidden md:block text-sm px-2 ${
+                open ? `text-agility` : `text-gray-200`
+              }`}
+            >
+              Viewing <span className="font-bold">Published</span> Content
+            </p>
+          )}
+          <div
+            className="p-2 text-gray-200 rounded-lg cursor-pointer z-20"
+            onClick={() => setOpen(!open)}
+          >
+            {open ? (
+              <FaChevronUp className="text-agility" />
+            ) : (
+              <FaChevronDown className="text-gray-200" />
+            )}
+          </div>
+          <div
+            className="absolute bg-white text-white text-sm py-4 px-4 w-15.1 -right-0 -bottom-28 md:-bottom-16 z-10 rounded-b-lg shadow-xl md:max-w-full"
+            style={{ display: open ? "block" : "none" }}
+          >
+            {isPreview ? (
+              <p className="mb-4 text-center md:hidden text-agility z-20">
+                Previewing <span className="font-bold">Latest</span> Changes
+              </p>
+            ) : (
+              <p className="mb-4 text-center md:hidden text-agility z-20">
+                Viewing <span className="font-bold">Published</span> Content
+              </p>
+            )}
+            <button
+              className="text-gray-200 bg-agility p-2 w-full rounded-md text-sm disabled:bg-gray-700 flex gap-2 items-center justify-center"
+              onClick={() => handleView()}
+              aria-disabled={isPreviewRequested}
+              disabled={isPreviewRequested}
+            >
+              {isPreviewRequested && <FaSpinner className="animate-spin" />}
+              {`View ${isPreview ? `Live` : `Preview`} Mode`}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default PreviewBar