diff --git a/apps/admin-x-settings/src/components/settings/general/Facebook.tsx b/apps/admin-x-settings/src/components/settings/general/Facebook.tsx
index ec9077a5af..8272e68841 100644
--- a/apps/admin-x-settings/src/components/settings/general/Facebook.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/Facebook.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import TextField from '../../../admin-x-ds/global/form/TextField';
+import usePinturaEditor from '../../../hooks/usePinturaEditor';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {ReactComponent as FacebookLogo} from '../../../admin-x-ds/assets/images/facebook-logo.svg';
 import {getImageUrl, useUploadImage} from '../../../api/images';
@@ -21,6 +22,21 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
     } = useSettingGroup();
 
     const {mutateAsync: uploadImage} = useUploadImage();
+    const [pintura] = getSettingValues<boolean>(localSettings, ['pintura']);
+    // const [unsplashEnabled] = getSettingValues<boolean>(localSettings, ['unsplash']);
+    const [pinturaJsUrl] = getSettingValues<string>(localSettings, ['pintura_js_url']);
+    const [pinturaCssUrl] = getSettingValues<string>(localSettings, ['pintura_css_url']);
+    // const [showUnsplash, setShowUnsplash] = useState<boolean>(false);
+
+    const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl);
+
+    const editor = usePinturaEditor(
+        {config: {
+            jsUrl: pinturaJsUrl || '',
+            cssUrl: pinturaCssUrl || ''
+        },
+        disabled: !pinturaEnabled}
+    );
 
     const [
         facebookTitle, facebookDescription, facebookImage, siteTitle, siteDescription
@@ -67,6 +83,18 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
                         height='300px'
                         id='facebook-image'
                         imageURL={facebookImage}
+                        pintura={
+                            {
+                                isEnabled: pinturaEnabled,
+                                openEditor: async () => editor.openEditor({
+                                    image: facebookImage || '',
+                                    handleSave: async (file:File) => {
+                                        const imageUrl = getImageUrl(await uploadImage({file}));
+                                        updateSetting('og_image', imageUrl);
+                                    }
+                                })
+                            }
+                        }
                         onDelete={handleImageDelete}
                         onUpload={handleImageUpload}
                     >
diff --git a/apps/admin-x-settings/src/components/settings/general/Twitter.tsx b/apps/admin-x-settings/src/components/settings/general/Twitter.tsx
index 655451d913..24e0077a02 100644
--- a/apps/admin-x-settings/src/components/settings/general/Twitter.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/Twitter.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import TextField from '../../../admin-x-ds/global/form/TextField';
+import usePinturaEditor from '../../../hooks/usePinturaEditor';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {ReactComponent as TwitterLogo} from '../../../admin-x-ds/assets/images/twitter-logo.svg';
 import {getImageUrl, useUploadImage} from '../../../api/images';
@@ -21,6 +22,19 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => {
     } = useSettingGroup();
 
     const {mutateAsync: uploadImage} = useUploadImage();
+    const [pintura] = getSettingValues<boolean>(localSettings, ['pintura']);
+    const [pinturaJsUrl] = getSettingValues<string>(localSettings, ['pintura_js_url']);
+    const [pinturaCssUrl] = getSettingValues<string>(localSettings, ['pintura_css_url']);
+
+    const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl);
+
+    const editor = usePinturaEditor(
+        {config: {
+            jsUrl: pinturaJsUrl || '',
+            cssUrl: pinturaCssUrl || ''
+        },
+        disabled: !pinturaEnabled}
+    );
 
     const [
         twitterTitle, twitterDescription, twitterImage, siteTitle, siteDescription
@@ -69,6 +83,18 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => {
                         height='300px'
                         id='twitter-image'
                         imageURL={twitterImage}
+                        pintura={
+                            {
+                                isEnabled: pinturaEnabled,
+                                openEditor: async () => editor.openEditor({
+                                    image: twitterImage || '',
+                                    handleSave: async (file:File) => {
+                                        const imageUrl = getImageUrl(await uploadImage({file}));
+                                        updateSetting('twitter_image', imageUrl);
+                                    }
+                                })
+                            }
+                        }
                         onDelete={handleImageDelete}
                         onUpload={handleImageUpload}
                     >