diff --git a/ghost/admin-x-settings/src/components/providers/SettingsProvider.tsx b/ghost/admin-x-settings/src/components/providers/SettingsProvider.tsx
index 51efe828a0..eed51fcf0d 100644
--- a/ghost/admin-x-settings/src/components/providers/SettingsProvider.tsx
+++ b/ghost/admin-x-settings/src/components/providers/SettingsProvider.tsx
@@ -19,6 +19,63 @@ const SettingsContext = createContext<SettingsContextProps>({
     saveSettings: async () => {}
 });
 
+function serialiseSettingsData(settings: Setting[]): Setting[] {
+    return settings.map((setting) => {
+        if (setting.key === 'facebook' && setting.value) {
+            const value = setting.value as string;
+            let [, user] = value.match(/(\S+)/) || [];
+
+            return {
+                key: setting.key,
+                value: `https://www.facebook.com/${user}`
+            };
+        }
+        if (setting.key === 'twitter' && setting.value) {
+            const value = setting.value as string;
+            let [, user] = value.match(/@?([^/]*)/) || [];
+
+            return {
+                key: setting.key,
+                value: `https://twitter.com/${user}`
+            };
+        }
+
+        return {
+            key: setting.key,
+            value: setting.value
+        };
+    });
+}
+
+function deserializeSettings(settings: Setting[]): Setting[] {
+    return settings.map((setting) => {
+        if (setting.key === 'facebook' && setting.value) {
+            const deserialized = setting.value as string;
+            let [, user] = deserialized.match(/(?:https:\/\/)(?:www\.)(?:facebook\.com)\/(?:#!\/)?(\w+\/?\S+)/mi) || [];
+
+            return {
+                key: setting.key,
+                value: user
+            };
+        }
+
+        if (setting.key === 'twitter' && setting.value) {
+            const deserialized = setting.value as string;
+            let [, user] = deserialized.match(/(?:https:\/\/)(?:twitter\.com)\/(?:#!\/)?@?([^/]*)/) || [];
+
+            return {
+                key: setting.key,
+                value: `@${user}`
+            };
+        }
+
+        return {
+            key: setting.key,
+            value: setting.value
+        };
+    });
+}
+
 // Create a Settings Provider component
 const SettingsProvider: React.FC<SettingsProviderProps> = ({children}) => {
     const {api} = useContext(ServicesContext);
@@ -31,7 +88,8 @@ const SettingsProvider: React.FC<SettingsProviderProps> = ({children}) => {
                 // Make an API call to fetch the settings
                 const data = await api.settings.browse();
                 const siteDataRes = await api.site.browse();
-                setSettings(data.settings);
+
+                setSettings(serialiseSettingsData(data.settings));
                 setSiteData(siteDataRes.site);
             } catch (error) {
                 // Log error in settings API
@@ -44,10 +102,12 @@ const SettingsProvider: React.FC<SettingsProviderProps> = ({children}) => {
 
     const saveSettings = useCallback(async (updatedSettings: Setting[]): Promise<void> => {
         try {
+            // handle transformation for settings before save
+            updatedSettings = deserializeSettings(updatedSettings);
             // Make an API call to save the updated settings
             const data = await api.settings.edit(updatedSettings);
 
-            setSettings(data.settings);
+            setSettings(serialiseSettingsData(data.settings));
         } catch (error) {
             // Log error in settings API
         }