diff --git a/public/editor-client/src/config.ts b/public/editor-client/src/config.ts
index b1ccf7df72..a520f1796c 100644
--- a/public/editor-client/src/config.ts
+++ b/public/editor-client/src/config.ts
@@ -14,6 +14,12 @@ interface DefaultTemplates {
   layoutsUrl: string;
 }
 
+interface ScreenshotUrl {
+  globalScreenshotUrl: string;
+  layoutScreenshotUrl: string;
+  normalScreenshotUrl: string;
+  savedScreenshotUrl: string;
+}
 interface Actions {
   getMediaUid: string;
   getAttachmentUid: string;
@@ -37,6 +43,7 @@ interface API {
   mediaResizeUrl: string;
   customFileUrl: string;
   templates: DefaultTemplates;
+  screenshots: ScreenshotUrl;
 }
 export interface Config {
   hash: string;
@@ -48,6 +55,27 @@ export interface Config {
   l10n?: Record<string, string>;
 }
 
+const screenshotUrlReader = parseStrict<Record<string, unknown>, ScreenshotUrl>(
+  {
+    globalScreenshotUrl: pipe(
+      mPipe(Obj.readKey("globalScreenshotUrl"), Str.read),
+      throwOnNullish("Invalid API Config: globalScreenshotUrl")
+    ),
+    layoutScreenshotUrl: pipe(
+      mPipe(Obj.readKey("layoutScreenshotUrl"), Str.read),
+      throwOnNullish("Invalid API Config: layoutScreenshotUrl")
+    ),
+    normalScreenshotUrl: pipe(
+      mPipe(Obj.readKey("normalScreenshotUrl"), Str.read),
+      throwOnNullish("Invalid API Config: normalScreenshotUrl")
+    ),
+    savedScreenshotUrl: pipe(
+      mPipe(Obj.readKey("savedScreenshotUrl"), Str.read),
+      throwOnNullish("Invalid API Config: savedScreenshotUrl")
+    )
+  }
+);
+
 const templatesReader = parseStrict<Record<string, unknown>, DefaultTemplates>({
   kitsUrl: pipe(
     mPipe(Obj.readKey("kitsUrl"), Str.read),
@@ -89,6 +117,10 @@ const apiReader = parseStrict<PLUGIN_ENV["api"], API>({
   templates: pipe(
     mPipe(Obj.readKey("templates"), Obj.read, templatesReader),
     throwOnNullish("Invalid API: templates")
+  ),
+  screenshots: pipe(
+    mPipe(Obj.readKey("screenshots"), Obj.read, screenshotUrlReader),
+    throwOnNullish("Invalid API: screenshots")
   )
 });
 
diff --git a/public/editor-client/src/savedBlocks/common.ts b/public/editor-client/src/savedBlocks/common.ts
new file mode 100644
index 0000000000..fb16786f25
--- /dev/null
+++ b/public/editor-client/src/savedBlocks/common.ts
@@ -0,0 +1,19 @@
+import { SavedLayoutMeta } from "../types/SavedBlocks";
+// Limitation API for getBlocks
+export const TOTAL_COUNT = 200;
+export const normalBlocks = (
+  data: SavedLayoutMeta[],
+  screenshotUrl: string
+) => {
+  return data
+    .filter((item) => item.meta.type === "normal")
+    .map((item) => {
+      return {
+        ...item,
+        meta: {
+          ...item.meta,
+          _thumbnailSrc: `${screenshotUrl}/${item.meta._thumbnailSrc}`
+        }
+      };
+    });
+};
diff --git a/public/editor-client/src/savedBlocks/savedBlocks.ts b/public/editor-client/src/savedBlocks/savedBlocks.ts
index dd58a7e7ef..1fe565c2f6 100644
--- a/public/editor-client/src/savedBlocks/savedBlocks.ts
+++ b/public/editor-client/src/savedBlocks/savedBlocks.ts
@@ -9,9 +9,7 @@ import {
 import { SavedBlockMeta, SavedBlocks } from "../types/SavedBlocks";
 import { createUpload } from "../utils/createUpload";
 import { t } from "../utils/i18n";
-
-// Limitation API for getBlocks
-const TOTAL_COUNT = 200;
+import { TOTAL_COUNT } from "./common";
 
 export const savedBlocks: SavedBlocks = {
   async get(res, rej) {
diff --git a/public/editor-client/src/savedBlocks/savedLayouts.ts b/public/editor-client/src/savedBlocks/savedLayouts.ts
index 66630c75c6..a949e1edc6 100644
--- a/public/editor-client/src/savedBlocks/savedLayouts.ts
+++ b/public/editor-client/src/savedBlocks/savedLayouts.ts
@@ -9,9 +9,7 @@ import {
 import { SavedLayoutMeta, SavedLayouts } from "../types/SavedBlocks";
 import { createUpload } from "../utils/createUpload";
 import { t } from "../utils/i18n";
-
-// Limitation API for getBlocks
-const TOTAL_COUNT = 200;
+import { TOTAL_COUNT } from "./common";
 
 export const savedLayouts: SavedLayouts = {
   async get(res, rej) {
diff --git a/public/editor-client/src/savedBlocks/savedPopups.ts b/public/editor-client/src/savedBlocks/savedPopups.ts
index 41655dc443..c27fa9f5b4 100644
--- a/public/editor-client/src/savedBlocks/savedPopups.ts
+++ b/public/editor-client/src/savedBlocks/savedPopups.ts
@@ -9,9 +9,7 @@ import {
 import { SavedBlockMeta, SavedPopups } from "../types/SavedBlocks";
 import { createUpload } from "../utils/createUpload";
 import { t } from "../utils/i18n";
-
-// Limitation API for getBlocks
-const TOTAL_COUNT = 200;
+import { TOTAL_COUNT } from "./common";
 
 export const savedPopups: SavedPopups = {
   async get(res, rej) {
diff --git a/public/editor-client/src/screenshots/index.ts b/public/editor-client/src/screenshots/index.ts
new file mode 100644
index 0000000000..ce301c51c6
--- /dev/null
+++ b/public/editor-client/src/screenshots/index.ts
@@ -0,0 +1,28 @@
+import { createBlockScreenshot, updateBlockScreenshot } from "../api";
+import { Screenshots } from "../types/Screenshots";
+import { t } from "../utils/i18n";
+import { getScreenshotUrl } from "./utils";
+
+export const screenshots = (): Screenshots => {
+  return {
+    getScreenshotUrl,
+    async create(res, rej, data) {
+      try {
+        const r = await createBlockScreenshot(data);
+        res(r);
+      } catch (e) {
+        console.error("API Client Create Screenshots:", e);
+        rej(t("Failed to create screenshot"));
+      }
+    },
+    async update(res, rej, data) {
+      try {
+        const r = await updateBlockScreenshot(data);
+        res(r);
+      } catch (e) {
+        console.error("API Client Update Screenshots:", e);
+        rej(t("Failed to update screenshot"));
+      }
+    }
+  };
+};
diff --git a/public/editor-client/src/screenshots/utils.ts b/public/editor-client/src/screenshots/utils.ts
new file mode 100644
index 0000000000..5aba28037b
--- /dev/null
+++ b/public/editor-client/src/screenshots/utils.ts
@@ -0,0 +1,33 @@
+import { Config, getConfig } from "../config";
+import { ScreenshotType } from "../types/Screenshots";
+import { MValue } from "../utils/types";
+import { urlContainsQueryString } from "../utils/url/urlContainerQueryString";
+export const getScreenshotUrl = ({
+  _thumbnailSrc,
+  type
+}: ScreenshotType): string => {
+  const config = getConfig();
+  const siteUrl = determineScreenshotUrl(type, config);
+
+  return urlContainsQueryString(siteUrl)
+    ? `${siteUrl}&${_thumbnailSrc}`
+    : `${siteUrl}?${_thumbnailSrc}`;
+};
+
+const determineScreenshotUrl = (
+  type: string,
+  config: MValue<Config>
+): string => {
+  switch (type) {
+    case "normal":
+      return config?.api.screenshots.normalScreenshotUrl ?? "";
+    case "global":
+      return config?.api.screenshots.globalScreenshotUrl ?? "";
+    case "saved":
+      return config?.api.screenshots.savedScreenshotUrl ?? "";
+    case "layout":
+      return config?.api.screenshots.layoutScreenshotUrl ?? "";
+    default:
+      return "";
+  }
+};
diff --git a/public/editor-client/src/types/Screenshots.ts b/public/editor-client/src/types/Screenshots.ts
new file mode 100644
index 0000000000..16b6e65923
--- /dev/null
+++ b/public/editor-client/src/types/Screenshots.ts
@@ -0,0 +1,25 @@
+import { Response } from "./Response";
+
+export interface ScreenshotData {
+  base64: string;
+  blockType: "normal" | "global" | "saved" | "layout";
+}
+
+export type ScreenshotType = {
+  _thumbnailSrc: string;
+  type: string;
+};
+
+export interface Screenshots {
+  getScreenshotUrl?: ({ _thumbnailSrc, type }: ScreenshotType) => string;
+  create?: (
+    res: Response<{ id: string }>,
+    rej: Response<string>,
+    extra: ScreenshotData
+  ) => void;
+  update?: (
+    res: Response<{ id: string }>,
+    rej: Response<string>,
+    extra: ScreenshotData & { id: string }
+  ) => void;
+}
diff --git a/public/editor-client/src/utils/url/urlContainerQueryString.ts b/public/editor-client/src/utils/url/urlContainerQueryString.ts
new file mode 100644
index 0000000000..d37a9db548
--- /dev/null
+++ b/public/editor-client/src/utils/url/urlContainerQueryString.ts
@@ -0,0 +1,2 @@
+export const urlContainsQueryString = (url: string): boolean =>
+  url.includes("?");