diff --git a/cypress/integration/branches.spec.js b/cypress/integration/branches.spec.js
index 46ea9bc19..a379abe82 100644
--- a/cypress/integration/branches.spec.js
+++ b/cypress/integration/branches.spec.js
@@ -18,6 +18,11 @@ describe('Branch switcher', () => {
   const mockStartupParams = {
     activeTheme: null,
     lastOpened: Date.now(),
+    onboardingExplainer: {
+      sets: true,
+      inspect: true,
+      syncProviders: true,
+    },
     localApiProviders: [provider],
     licenseKey: null,
     settings: {
diff --git a/cypress/integration/inspector.spec.js b/cypress/integration/inspector.spec.js
index d37be51b0..75bbce6c8 100644
--- a/cypress/integration/inspector.spec.js
+++ b/cypress/integration/inspector.spec.js
@@ -8,6 +8,11 @@ describe('Inspector tokens', () => {
   const mockStartupParams = {
     activeTheme: null,
     lastOpened: Date.now(),
+    onboardingExplainer: {
+      sets: true,
+      inspect: true,
+      syncProviders: true,
+    },
     localApiProviders: [],
     licenseKey: null,
     settings: {
@@ -56,20 +61,20 @@ describe('Inspector tokens', () => {
       version: '5',
       values: {
         options: [{
-            name: 'sizing.xs',
-            value: 4,
-            type: 'sizing'
-          },
-          {
-            name: 'opacity.50',
-            value: '50%',
-            type: 'opacity'
-          },
-          {
-            name: 'font-size.12',
-            value: '12px',
-            type: 'fontSizes'
-          }
+          name: 'sizing.xs',
+          value: 4,
+          type: 'sizing'
+        },
+        {
+          name: 'opacity.50',
+          value: '50%',
+          type: 'opacity'
+        },
+        {
+          name: 'font-size.12',
+          value: '12px',
+          type: 'fontSizes'
+        }
         ],
         global: [{
           name: 'sizing.xs',
@@ -80,35 +85,35 @@ describe('Inspector tokens', () => {
     });
     cy.receiveSelectionValues({
       selectionValues: [{
-          category: "sizing",
-          type: "sizing",
-          value: "sizing.xs",
-          nodes: [{
-            id: "1",
-            name: "Rectangle",
-            type: "RECTANGLE",
-          }],
-        },
-        {
-          category: "opacity",
-          type: "opacity",
-          value: "opacity.50",
-          nodes: [{
-            id: "1",
-            name: "Rectangle",
-            type: "RECTANGLE",
-          }],
-        },
-        {
-          category: "fontSizes",
-          type: "fontSizes",
-          value: "font-size.12",
-          nodes: [{
-            id: "1",
-            name: "Rectangle",
-            type: "RECTANGLE",
-          }],
-        },
+        category: "sizing",
+        type: "sizing",
+        value: "sizing.xs",
+        nodes: [{
+          id: "1",
+          name: "Rectangle",
+          type: "RECTANGLE",
+        }],
+      },
+      {
+        category: "opacity",
+        type: "opacity",
+        value: "opacity.50",
+        nodes: [{
+          id: "1",
+          name: "Rectangle",
+          type: "RECTANGLE",
+        }],
+      },
+      {
+        category: "fontSizes",
+        type: "fontSizes",
+        value: "font-size.12",
+        nodes: [{
+          id: "1",
+          name: "Rectangle",
+          type: "RECTANGLE",
+        }],
+      },
       ],
       selectedNodes: 1,
       mainNodeSelectionValues: {
@@ -132,25 +137,25 @@ describe('Inspector tokens', () => {
       version: '5',
       values: {
         options: [{
-            name: 'sizing.xs',
-            value: 4,
-            type: 'sizing'
-          },
-          {
-            name: 'opacity.50',
-            value: '50%',
-            type: 'opacity'
-          },
-          {
-            name: 'opacity.100',
-            value: '100%',
-            type: 'opacity'
-          },
-          {
-            name: 'font-size.12',
-            value: '12px',
-            type: 'fontSizes'
-          }
+          name: 'sizing.xs',
+          value: 4,
+          type: 'sizing'
+        },
+        {
+          name: 'opacity.50',
+          value: '50%',
+          type: 'opacity'
+        },
+        {
+          name: 'opacity.100',
+          value: '100%',
+          type: 'opacity'
+        },
+        {
+          name: 'font-size.12',
+          value: '12px',
+          type: 'fontSizes'
+        }
         ],
         global: [{
           name: 'sizing.xs',
@@ -161,35 +166,35 @@ describe('Inspector tokens', () => {
     });
     cy.receiveSelectionValues({
       selectionValues: [{
-          category: "sizing",
-          type: "sizing",
-          value: "sizing.xs",
-          nodes: [{
-            id: "1",
-            name: "Rectangle",
-            type: "RECTANGLE",
-          }],
-        },
-        {
-          category: "opacity",
-          type: "opacity",
-          value: "opacity.50",
-          nodes: [{
-            id: "1",
-            name: "Rectangle",
-            type: "RECTANGLE",
-          }],
-        },
-        {
-          category: "fontSizes",
-          type: "fontSizes",
-          value: "font-size.12",
-          nodes: [{
-            id: "1",
-            name: "Rectangle",
-            type: "RECTANGLE",
-          }],
-        },
+        category: "sizing",
+        type: "sizing",
+        value: "sizing.xs",
+        nodes: [{
+          id: "1",
+          name: "Rectangle",
+          type: "RECTANGLE",
+        }],
+      },
+      {
+        category: "opacity",
+        type: "opacity",
+        value: "opacity.50",
+        nodes: [{
+          id: "1",
+          name: "Rectangle",
+          type: "RECTANGLE",
+        }],
+      },
+      {
+        category: "fontSizes",
+        type: "fontSizes",
+        value: "font-size.12",
+        nodes: [{
+          id: "1",
+          name: "Rectangle",
+          type: "RECTANGLE",
+        }],
+      },
       ],
       selectedNodes: 1,
       mainNodeSelectionValues: {
@@ -205,35 +210,35 @@ describe('Inspector tokens', () => {
     cy.get(`input[name=value]`).type('$opacity.100').type('{enter}');
     cy.receiveSelectionValues({
       selectionValues: [{
-          category: "sizing",
-          type: "sizing",
-          value: "sizing.xs",
-          nodes: [{
-            id: "1",
-            name: "Rectangle",
-            type: "RECTANGLE",
-          }],
-        },
-        {
-          category: "opacity",
-          type: "opacity",
-          value: "opacity.100",
-          nodes: [{
-            id: "1",
-            name: "Rectangle",
-            type: "RECTANGLE",
-          }],
-        },
-        {
-          category: "fontSizes",
-          type: "fontSizes",
-          value: "font-size.12",
-          nodes: [{
-            id: "1",
-            name: "Rectangle",
-            type: "RECTANGLE",
-          }],
-        },
+        category: "sizing",
+        type: "sizing",
+        value: "sizing.xs",
+        nodes: [{
+          id: "1",
+          name: "Rectangle",
+          type: "RECTANGLE",
+        }],
+      },
+      {
+        category: "opacity",
+        type: "opacity",
+        value: "opacity.100",
+        nodes: [{
+          id: "1",
+          name: "Rectangle",
+          type: "RECTANGLE",
+        }],
+      },
+      {
+        category: "fontSizes",
+        type: "fontSizes",
+        value: "font-size.12",
+        nodes: [{
+          id: "1",
+          name: "Rectangle",
+          type: "RECTANGLE",
+        }],
+      },
       ],
       selectedNodes: 1,
       mainNodeSelectionValues: {
diff --git a/cypress/integration/manage-themes.spec.js b/cypress/integration/manage-themes.spec.js
index d688c55b4..61c548ef3 100644
--- a/cypress/integration/manage-themes.spec.js
+++ b/cypress/integration/manage-themes.spec.js
@@ -5,14 +5,19 @@ import { UpdateMode } from '@/constants/UpdateMode';
 
 const createTokenSet = ({ name }) => {
   cy.get('[data-cy="button-new-token-set"]').click({ timeout: 1000 })
-      .get('[data-cy="token-set-input"]')
-      .type(name).type('{enter}');
+    .get('[data-cy="token-set-input"]')
+    .type(name).type('{enter}');
 };
 
 describe('TokenListing', () => {
   const mockStartupParams = {
     activeTheme: null,
     lastOpened: Date.now(),
+    onboardingExplainer: {
+      sets: true,
+      inspect: true,
+      syncProviders: true,
+    },
     localApiProviders: [],
     licenseKey: null,
     settings: {
diff --git a/cypress/integration/startup.spec.js b/cypress/integration/startup.spec.js
index b5192e2ed..f3d9e884d 100644
--- a/cypress/integration/startup.spec.js
+++ b/cypress/integration/startup.spec.js
@@ -10,6 +10,11 @@ describe('Loads application', () => {
   const mockStartupParams = {
     activeTheme: null,
     lastOpened: Date.now(),
+    onboardingExplainer: {
+      sets: true,
+      inspect: true,
+      syncProviders: true,
+    },
     localApiProviders: [],
     licenseKey: null,
     settings: {
diff --git a/cypress/integration/themes.spec.js b/cypress/integration/themes.spec.js
index a3e974f15..f40d6dd87 100644
--- a/cypress/integration/themes.spec.js
+++ b/cypress/integration/themes.spec.js
@@ -7,6 +7,11 @@ describe('Themes', () => {
   const mockStartupParams = {
     activeTheme: null,
     lastOpened: Date.now(),
+    onboardingExplainer: {
+      sets: true,
+      inspect: true,
+      syncProviders: true,
+    },
     localApiProviders: [],
     licenseKey: null,
     settings: {
diff --git a/cypress/integration/tokens.spec.js b/cypress/integration/tokens.spec.js
index 8e387c55a..2512b6a91 100644
--- a/cypress/integration/tokens.spec.js
+++ b/cypress/integration/tokens.spec.js
@@ -41,6 +41,11 @@ describe('TokenListing', () => {
   const mockStartupParams = {
     activeTheme: null,
     lastOpened: Date.now(),
+    onboardingExplainer: {
+      sets: true,
+      inspect: true,
+      syncProviders: true,
+    },
     localApiProviders: [],
     licenseKey: null,
     settings: {
@@ -236,43 +241,43 @@ describe('TokenListing', () => {
       version: '5',
       values: {
         options: [{
-            name: 'sizing.xs',
-            value: 4,
-            type: 'sizing'
+          name: 'sizing.xs',
+          value: 4,
+          type: 'sizing'
+        },
+        {
+          name: 'boxshadow.single',
+          value: {
+            blur: "3",
+            color: "red",
+            spread: "3",
+            type: "innerShadow",
+            x: "3",
+            y: "3",
           },
-          {
-            name: 'boxshadow.single',
-            value: {
-              blur: "3",
-              color: "red",
-              spread: "3",
-              type: "innerShadow",
-              x: "3",
-              y: "3",
-            },
-            type: 'boxShadow'
+          type: 'boxShadow'
+        },
+        {
+          name: 'boxshadow.multi',
+          value: [{
+            blur: "3",
+            color: "red",
+            spread: "3",
+            type: "innerShadow",
+            x: "3",
+            y: "3",
           },
           {
-            name: 'boxshadow.multi',
-            value: [{
-                blur: "3",
-                color: "red",
-                spread: "3",
-                type: "innerShadow",
-                x: "3",
-                y: "3",
-              },
-              {
-                blur: "1",
-                color: "blue",
-                spread: "1",
-                type: "dropShadow",
-                x: "1",
-                y: "1",
-              }
-            ],
-            type: 'boxShadow'
+            blur: "1",
+            color: "blue",
+            spread: "1",
+            type: "dropShadow",
+            x: "1",
+            y: "1",
           }
+          ],
+          type: 'boxShadow'
+        }
         ],
         global: [{
           name: 'sizing.xs',
@@ -355,37 +360,37 @@ describe('TokenListing', () => {
       version: '5',
       values: {
         options: [{
-            name: 'sizing.xs',
-            value: 4,
-            type: 'sizing'
-          }, {
-            name: 'typography.heading',
-            value: {
-              fontFamily: "Arial",
-              fontSize: "12px",
-              fontWeight: "bold",
-              letterSpacing: "1",
-              lineHeight: "1",
-              paragraphSpacing: "1",
-              textCase: "none",
-              textDecoration: "underline",
-            },
-            type: 'typography'
+          name: 'sizing.xs',
+          value: 4,
+          type: 'sizing'
+        }, {
+          name: 'typography.heading',
+          value: {
+            fontFamily: "Arial",
+            fontSize: "12px",
+            fontWeight: "bold",
+            letterSpacing: "1",
+            lineHeight: "1",
+            paragraphSpacing: "1",
+            textCase: "none",
+            textDecoration: "underline",
           },
-          {
-            name: 'typography.label',
-            value: {
-              fontFamily: "Helvetica",
-              fontSize: "24px",
-              fontWeight: "light",
-              letterSpacing: "2",
-              lineHeight: "2",
-              paragraphSpacing: "2",
-              textCase: "none",
-              textDecoration: "none",
-            },
-            type: 'typography'
-          }
+          type: 'typography'
+        },
+        {
+          name: 'typography.label',
+          value: {
+            fontFamily: "Helvetica",
+            fontSize: "24px",
+            fontWeight: "light",
+            letterSpacing: "2",
+            lineHeight: "2",
+            paragraphSpacing: "2",
+            textCase: "none",
+            textDecoration: "none",
+          },
+          type: 'typography'
+        }
         ],
         global: [{
           name: 'sizing.xs',
diff --git a/flags.d.ts b/flags.d.ts
index e1bf9a934..26be3792f 100644
--- a/flags.d.ts
+++ b/flags.d.ts
@@ -6,5 +6,7 @@ declare module 'launchdarkly-js-sdk-common' {
     compositionTokens?: boolean;
     bitbucketSync?: boolean;
     tokenFlowButton?: boolean;
+    swapStylesAlpha?: boolean;
+    genericVersionedAlpha?: boolean;
   }
 }
diff --git a/package.json b/package.json
index be7518467..34525d702 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tokens-studio-for-figma",
   "version": "1.0.0",
-  "plugin_version": "128",
+  "plugin_version": "129-rc3",
   "description": "Tokens Studio for Figma",
   "license": "MIT",
   "scripts": {
@@ -12,7 +12,7 @@
     "build-js": "webpack --mode=production",
     "build": "yarn build-css && yarn build-js",
     "build:cy": "cross-env LAUNCHDARKLY_FLAGS=tokenThemes,gitBranchSelector,multiFileSync,tokenFlowButton yarn build",
-    "build:watch": "concurrently 'yarn watch-css' 'yarn watch-js'",
+    "build:watch": "concurrently -r \"yarn watch-css\" \"yarn watch-js\"",
     "build-transform": "webpack --mode=production --config webpack-transform.config.js",
     "prettier:format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}' ",
     "test": "cross-env LAUNCHDARKLY_FLAGS=tokenThemes,gitBranchSelector,multiFileSync,tokenFlowButton jest",
@@ -114,7 +114,7 @@
     "@babel/preset-env": "^7.12.16",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.12.16",
-    "@figma/plugin-typings": "^1.47.0",
+    "@figma/plugin-typings": "^1.55.1",
     "@storybook/addon-actions": "^6.5.8",
     "@storybook/addon-docs": "^6.5.8",
     "@storybook/addon-essentials": "^6.5.8",
@@ -145,6 +145,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "^3.1.0",
     "cypress": "^6.6.0",
+    "deep-set-in": "^2.1.3",
     "dotenv": "^16.0.1",
     "eslint": "^8.2.0",
     "eslint-config-airbnb": "19.0.2",
diff --git a/src/app/components/AddLicenseKey/AddLicenseKey.test.tsx b/src/app/components/AddLicenseKey/AddLicenseKey.test.tsx
index d5758958d..176475876 100644
--- a/src/app/components/AddLicenseKey/AddLicenseKey.test.tsx
+++ b/src/app/components/AddLicenseKey/AddLicenseKey.test.tsx
@@ -23,6 +23,11 @@ const mockStartupParams: StartupMessage = {
   type: AsyncMessageTypes.STARTUP,
   activeTheme: null,
   lastOpened: Date.now(),
+  onboardingExplainer: {
+    sets: true,
+    inspect: true,
+    syncProviders: true,
+  },
   localApiProviders: [],
   licenseKey: null,
   settings: {
diff --git a/src/app/components/AppContainer/__tests__/AppContainerIntegration.test.tsx b/src/app/components/AppContainer/__tests__/AppContainerIntegration.test.tsx
index 86d138c75..f23be27f2 100644
--- a/src/app/components/AppContainer/__tests__/AppContainerIntegration.test.tsx
+++ b/src/app/components/AppContainer/__tests__/AppContainerIntegration.test.tsx
@@ -114,6 +114,11 @@ const mockStartupParams: Omit<StartupMessage, 'licenseKey'> = {
   type: AsyncMessageTypes.STARTUP,
   activeTheme: null,
   lastOpened: Date.now(),
+  onboardingExplainer: {
+    sets: true,
+    inspect: true,
+    syncProviders: true,
+  },
   localApiProviders: [],
   settings: mockSettings,
   storageType: {
diff --git a/src/app/components/AppContainer/startupProcessSteps/__tests__/savePluginDataFactory.test.ts b/src/app/components/AppContainer/startupProcessSteps/__tests__/savePluginDataFactory.test.ts
index fcd76d70b..506e34c3a 100644
--- a/src/app/components/AppContainer/startupProcessSteps/__tests__/savePluginDataFactory.test.ts
+++ b/src/app/components/AppContainer/startupProcessSteps/__tests__/savePluginDataFactory.test.ts
@@ -17,6 +17,11 @@ describe('savePluginDataFactory', () => {
         name: 'Jan Six',
       },
       lastOpened: Date.now(),
+      onboardingExplainer: {
+        sets: true,
+        inspect: true,
+        syncProviders: true,
+      },
       settings: {
         width: 500,
         height: 500,
diff --git a/src/app/components/AppContainer/startupProcessSteps/savePluginDataFactory.ts b/src/app/components/AppContainer/startupProcessSteps/savePluginDataFactory.ts
index a1d74d0ce..51b1f3ed6 100644
--- a/src/app/components/AppContainer/startupProcessSteps/savePluginDataFactory.ts
+++ b/src/app/components/AppContainer/startupProcessSteps/savePluginDataFactory.ts
@@ -20,6 +20,9 @@ export function savePluginDataFactory(dispatch: Dispatch, params: StartupMessage
       dispatch.userState.setUserId(user.figmaId);
       dispatch.userState.setUserName(user.name);
       dispatch.uiState.setLastOpened(params.lastOpened);
+      dispatch.uiState.setOnboardingExplainerSets(params.onboardingExplainer.sets);
+      dispatch.uiState.setOnboardingExplainerSyncProviders(params.onboardingExplainer.syncProviders);
+      dispatch.uiState.setOnboardingExplainerInspect(params.onboardingExplainer.inspect);
       dispatch.settings.setUISettings(settings);
       identify(user);
     } else {
diff --git a/src/app/components/ApplySelector.test.tsx b/src/app/components/ApplySelector.test.tsx
new file mode 100644
index 000000000..792cddabb
--- /dev/null
+++ b/src/app/components/ApplySelector.test.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import userEvent from '@testing-library/user-event';
+import {
+  act, createMockStore, render,
+} from '../../../tests/config/setupTest';
+import ApplySelector from './ApplySelector';
+
+const mockStore = createMockStore({});
+const renderStore = () => render(
+  <Provider store={mockStore}>
+    <ApplySelector />
+  </Provider>,
+);
+
+describe('ApplySelector', () => {
+  it('should work', async () => {
+    const result = renderStore();
+
+    const trigger = await result.getByTestId('apply-selector');
+    await act(async () => {
+      await userEvent.click(trigger);
+      const updateChanges = result.getByTestId('update-on-change');
+      const updateRemote = result.getByTestId('update-remote');
+      const updateStyles = result.getByTestId('update-styles');
+      const swapStylesAlpha = result.queryByTestId('swap-styles-alpha');
+
+      expect(updateChanges).toBeInTheDocument();
+      expect(updateRemote).toBeInTheDocument();
+      expect(updateStyles).toBeInTheDocument();
+      expect(swapStylesAlpha).toBeNull();
+    });
+  });
+
+  it('should call setUpdateMode', async () => {
+    const updateModeSpy = jest.spyOn(mockStore.dispatch.settings, 'setUpdateMode');
+    const result = renderStore();
+
+    const trigger = await result.getByTestId('apply-selector');
+    await act(async () => {
+      await userEvent.click(trigger);
+      const applyToDocument = result.getByTestId('apply-to-document');
+      await userEvent.click(applyToDocument, { pointerEventsCheck: 0 });
+      await userEvent.click(trigger);
+      const applyToPage = result.getByTestId('apply-to-page');
+      await userEvent.click(applyToPage, { pointerEventsCheck: 0 });
+      await userEvent.click(trigger);
+      const applyToSelection = result.getByTestId('apply-to-selection');
+      await userEvent.click(applyToSelection, { pointerEventsCheck: 0 });
+      expect(updateModeSpy).toBeCalledTimes(3);
+    });
+  });
+  it('should call updateOnChanges', async () => {
+    const updateOnChangeSpy = jest.spyOn(mockStore.dispatch.settings, 'setUpdateOnChange');
+    const result = renderStore();
+
+    const trigger = await result.getByTestId('apply-selector');
+    await act(async () => {
+      await userEvent.click(trigger);
+      const updateChanges = result.getByTestId('update-on-change');
+      await userEvent.click(updateChanges, { pointerEventsCheck: 0 });
+      expect(updateOnChangeSpy).toBeCalledTimes(1);
+    });
+  });
+  it('should call updateRemote', async () => {
+    const updateRemoteSpy = jest.spyOn(mockStore.dispatch.settings, 'setUpdateRemote');
+    const result = renderStore();
+
+    const trigger = await result.getByTestId('apply-selector');
+    await act(async () => {
+      await userEvent.click(trigger);
+      const updateChanges = result.getByTestId('update-remote');
+      await userEvent.click(updateChanges, { pointerEventsCheck: 0 });
+      expect(updateRemoteSpy).toBeCalledTimes(1);
+    });
+  });
+  it('should call updateStyles', async () => {
+    const updateStylesSpy = jest.spyOn(mockStore.dispatch.settings, 'setUpdateStyles');
+    const result = renderStore();
+
+    const trigger = await result.getByTestId('apply-selector');
+    await act(async () => {
+      await userEvent.click(trigger);
+      const updateChanges = result.getByTestId('update-styles');
+      await userEvent.click(updateChanges, { pointerEventsCheck: 0 });
+      expect(updateStylesSpy).toBeCalledTimes(1);
+    });
+  });
+
+  it('with swap styles feature flag', async () => {
+    process.env.LAUNCHDARKLY_FLAGS = 'swapStylesAlpha';
+    const result = renderStore();
+
+    const trigger = await result.getByTestId('apply-selector');
+    await act(async () => {
+      await userEvent.click(trigger);
+
+      const swapStylesAlpha = result.getByTestId('swap-styles-alpha');
+      expect(swapStylesAlpha).toBeInTheDocument();
+    });
+  });
+
+  it('should call swapStyles with feature flag', async () => {
+    process.env.LAUNCHDARKLY_FLAGS = 'swapStylesAlpha';
+
+    const shouldSwapStylesSpy = jest.spyOn(mockStore.dispatch.settings, 'setShouldSwapStyles');
+    const result = renderStore();
+
+    const trigger = await result.getByTestId('apply-selector');
+    await act(async () => {
+      await userEvent.click(trigger);
+      const updateChanges = result.getByTestId('swap-styles-alpha');
+      await userEvent.click(updateChanges, { pointerEventsCheck: 0 });
+      expect(shouldSwapStylesSpy).toBeCalledTimes(1);
+    });
+  });
+});
diff --git a/src/app/components/ApplySelector.tsx b/src/app/components/ApplySelector.tsx
index b410918e2..dd8c230e2 100644
--- a/src/app/components/ApplySelector.tsx
+++ b/src/app/components/ApplySelector.tsx
@@ -16,14 +16,17 @@ import IconChevronDown from '@/icons/chevrondown.svg';
 import { settingsStateSelector } from '@/selectors';
 import { isEqual } from '@/utils/isEqual';
 import { UpdateMode } from '@/constants/UpdateMode';
+import { useFlags } from './LaunchDarkly';
 
 export default function ApplySelector() {
   const {
-    updateMode, updateRemote, updateOnChange, updateStyles,
+    updateMode, updateRemote, updateOnChange, updateStyles, shouldSwapStyles,
   } = useSelector(settingsStateSelector, isEqual);
 
+  const { swapStylesAlpha } = useFlags();
+
   const {
-    setUpdateMode, setUpdateOnChange, setUpdateRemote, setUpdateStyles,
+    setUpdateMode, setUpdateOnChange, setUpdateRemote, setUpdateStyles, setShouldSwapStyles,
   } = useDispatch<Dispatch>().settings;
 
   const handleApplySelection = React.useCallback(() => {
@@ -50,9 +53,13 @@ export default function ApplySelector() {
     setUpdateStyles(!updateStyles);
   }, [updateStyles, setUpdateStyles]);
 
+  const handleShouldSwapStyles = React.useCallback(() => {
+    setShouldSwapStyles(!shouldSwapStyles);
+  }, [shouldSwapStyles, setShouldSwapStyles]);
+
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger bordered>
+      <DropdownMenuTrigger bordered data-testid="apply-selector">
         <span>
           Apply to
           {' '}
@@ -63,19 +70,19 @@ export default function ApplySelector() {
 
       <DropdownMenuContent side="top">
         <DropdownMenuRadioGroup value={updateMode}>
-          <DropdownMenuRadioItem value={UpdateMode.PAGE} onSelect={handleApplyPage}>
+          <DropdownMenuRadioItem data-testid="apply-to-page" value={UpdateMode.PAGE} onSelect={handleApplyPage}>
             <DropdownMenuItemIndicator>
               <CheckIcon />
             </DropdownMenuItemIndicator>
             Apply to page
           </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value={UpdateMode.DOCUMENT} onSelect={handleApplyDocument}>
+          <DropdownMenuRadioItem data-testid="apply-to-document" value={UpdateMode.DOCUMENT} onSelect={handleApplyDocument}>
             <DropdownMenuItemIndicator>
               <CheckIcon />
             </DropdownMenuItemIndicator>
             Apply to document
           </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value={UpdateMode.SELECTION} onSelect={handleApplySelection}>
+          <DropdownMenuRadioItem data-testid="apply-to-selection" value={UpdateMode.SELECTION} onSelect={handleApplySelection}>
             <DropdownMenuItemIndicator>
               <CheckIcon />
             </DropdownMenuItemIndicator>
@@ -85,24 +92,32 @@ export default function ApplySelector() {
 
         <DropdownMenuSeparator />
 
-        <DropdownMenuCheckboxItem checked={updateOnChange} onCheckedChange={handleUpdateOnChange}>
+        <DropdownMenuCheckboxItem data-testid="update-on-change" checked={updateOnChange} onCheckedChange={handleUpdateOnChange}>
           <DropdownMenuItemIndicator>
             <CheckIcon />
           </DropdownMenuItemIndicator>
           Update on change
         </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem checked={updateRemote} onCheckedChange={handleUpdateRemote}>
+        <DropdownMenuCheckboxItem data-testid="update-remote" checked={updateRemote} onCheckedChange={handleUpdateRemote}>
           <DropdownMenuItemIndicator>
             <CheckIcon />
           </DropdownMenuItemIndicator>
           Update remote
         </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem checked={updateStyles} onCheckedChange={handleUpdateStyles}>
+        <DropdownMenuCheckboxItem data-testid="update-styles" checked={updateStyles} onCheckedChange={handleUpdateStyles}>
           <DropdownMenuItemIndicator>
             <CheckIcon />
           </DropdownMenuItemIndicator>
           Update styles
         </DropdownMenuCheckboxItem>
+        {swapStylesAlpha && (
+        <DropdownMenuCheckboxItem data-testid="swap-styles-alpha" checked={shouldSwapStyles} onCheckedChange={handleShouldSwapStyles}>
+          <DropdownMenuItemIndicator>
+            <CheckIcon />
+          </DropdownMenuItemIndicator>
+          Swap styles (Alpha)
+        </DropdownMenuCheckboxItem>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/src/app/components/Badge.tsx b/src/app/components/Badge.tsx
new file mode 100644
index 000000000..d82524a31
--- /dev/null
+++ b/src/app/components/Badge.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { styled } from '@/stitches.config';
+
+export const StyledBadge = styled('div', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '$xsmall',
+  padding: '$3',
+  borderRadius: '$badge',
+  backgroundColor: '$interaction',
+  lineHeight: 1,
+  color: '$onInteraction',
+  fontWeight: '$bold',
+});
+
+type Props = {
+  text: string;
+};
+
+export default function Badge({ text }: Props) {
+  return (
+    <StyledBadge>{text}</StyledBadge>
+  );
+}
diff --git a/src/app/components/BorderTokenDownShiftInput.tsx b/src/app/components/BorderTokenDownShiftInput.tsx
new file mode 100644
index 000000000..9d299511e
--- /dev/null
+++ b/src/app/components/BorderTokenDownShiftInput.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { ResolveTokenValuesResult } from '@/plugin/tokenHelpers';
+import DownshiftInput from './DownshiftInput';
+import { getLabelForProperty } from '@/utils/getLabelForProperty';
+
+const mapTypeToPlaceHolder = {
+  color: 'Border color',
+  width: 'Border width',
+  style: 'solid | dashed',
+};
+
+export default function BorderTokenDownShiftInput({
+  name,
+  value,
+  type,
+  resolvedTokens,
+  handleChange,
+  setInputValue,
+  handleToggleInputHelper,
+}: {
+  name: string,
+  value: string;
+  type: string;
+  resolvedTokens: ResolveTokenValuesResult[];
+  handleChange: React.ChangeEventHandler;
+  setInputValue: (newInputValue: string, property: string) => void;
+  handleToggleInputHelper?: () => void;
+}) {
+  const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => handleChange(e), [handleChange]);
+  const handleBorderDownShiftInputChange = React.useCallback((newInputValue: string) => setInputValue(newInputValue, name), [name, setInputValue]);
+  const getIconComponent = React.useMemo(() => getLabelForProperty(name), [name]);
+  return (
+    <DownshiftInput
+      name={name}
+      value={value}
+      type={type}
+      label={getIconComponent}
+      inlineLabel
+      resolvedTokens={resolvedTokens}
+      handleChange={onChange}
+      setInputValue={handleBorderDownShiftInputChange}
+      placeholder={mapTypeToPlaceHolder[name as keyof typeof mapTypeToPlaceHolder]}
+      prefix={
+        name === 'color' && (
+          <button
+            type="button"
+            className="block w-4 h-4 rounded-sm cursor-pointer shadow-border shadow-gray-300 focus:shadow-focus focus:shadow-primary-400"
+            style={{ background: value ?? '#000000', fontSize: 0 }}
+            onClick={handleToggleInputHelper}
+          >
+            {value}
+          </button>
+        )
+      }
+      suffix
+    />
+  );
+}
diff --git a/src/app/components/BorderTokenForm.tsx b/src/app/components/BorderTokenForm.tsx
new file mode 100644
index 000000000..57f1b81b0
--- /dev/null
+++ b/src/app/components/BorderTokenForm.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { useUIDSeed } from 'react-uid';
+import get from 'just-safe-get';
+import { EditTokenObject } from '@/types/tokens';
+import Heading from './Heading';
+import { TokenTypes } from '@/constants/TokenTypes';
+import { ResolveTokenValuesResult } from '@/plugin/tokenHelpers';
+import Stack from './Stack';
+import BorderTokenDownShiftInput from './BorderTokenDownShiftInput';
+import ColorPicker from './ColorPicker';
+
+const propertyTypes = {
+  color: TokenTypes.COLOR,
+  width: TokenTypes.BORDER_WIDTH,
+  style: 'strokeStyle',
+};
+
+export default function BorderTokenForm({
+  internalEditToken,
+  resolvedTokens,
+  handleBorderValueChange,
+  handleBorderValueDownShiftInputChange,
+}: {
+  internalEditToken: Extract<EditTokenObject, { type: TokenTypes.BORDER }>;
+  resolvedTokens: ResolveTokenValuesResult[];
+  handleBorderValueChange: React.ChangeEventHandler;
+  handleBorderValueDownShiftInputChange: (newInputValue: string, property: string) => void;
+}) {
+  const seed = useUIDSeed();
+  const [inputHelperOpen, setInputHelperOpen] = React.useState<boolean>(false);
+
+  const handleToggleInputHelper = React.useCallback(() => setInputHelperOpen(!inputHelperOpen), [inputHelperOpen]);
+  const onColorChange = React.useCallback((color: string) => {
+    handleBorderValueDownShiftInputChange(color, 'color');
+  }, [handleBorderValueChange]);
+
+  return (
+    <Stack direction="column" gap={2}>
+      <Stack direction="row" gap={2} justify="between" align="center">
+        <Heading>Value</Heading>
+      </Stack>
+      <Stack gap={2} direction="column">
+        {Object.entries(internalEditToken.schema.schemas.value.properties ?? {}).map(([key], keyIndex) => (
+          <>
+            <BorderTokenDownShiftInput
+              name={key}
+              key={`border-input-${seed(keyIndex)}`}
+              value={typeof internalEditToken.value === 'object' ? get(internalEditToken.value, key, '') : ''}
+              type={propertyTypes[key as keyof typeof propertyTypes]}
+              resolvedTokens={resolvedTokens}
+              handleChange={handleBorderValueChange}
+              setInputValue={handleBorderValueDownShiftInputChange}
+              handleToggleInputHelper={handleToggleInputHelper}
+            />
+            {inputHelperOpen && key === 'color' && (
+              <ColorPicker value={typeof internalEditToken.value === 'object' && get(internalEditToken.value, key, '')} onChange={onColorChange} />
+            )}
+          </>
+        ))}
+
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/src/app/components/BrokenReferenceIndicator.tsx b/src/app/components/BrokenReferenceIndicator.tsx
index dab45a36e..19e4446d0 100644
--- a/src/app/components/BrokenReferenceIndicator.tsx
+++ b/src/app/components/BrokenReferenceIndicator.tsx
@@ -1,22 +1,7 @@
 import React from 'react';
-import { styled } from '@/stitches.config';
-import IconBrokenLink from '@/icons/brokenlink.svg';
 import { SingleToken } from '@/types/tokens';
 import { TokensContext } from '@/context';
-
-const StyledIndicator = styled('div', {
-  position: 'absolute',
-  top: '3px',
-  right: '3px',
-  borderRadius: '100%',
-  border: '1px solid $bgDefault',
-  background: '$dangerFg',
-  width: '6px',
-  height: '6px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
+import StyledBrokenReferenceIndicator from './StyledBrokenReferenceIndicator';
 
 type Props = {
   token: SingleToken;
@@ -31,9 +16,7 @@ export default function BrokenReferenceIndicator({ token }: Props) {
 
   if (failedToResolve) {
     return (
-      <StyledIndicator>
-        <IconBrokenLink />
-      </StyledIndicator>
+      <StyledBrokenReferenceIndicator />
     );
   }
   return null;
diff --git a/src/app/components/Button/Button.tsx b/src/app/components/Button/Button.tsx
index 028d41e94..e14026118 100644
--- a/src/app/components/Button/Button.tsx
+++ b/src/app/components/Button/Button.tsx
@@ -6,7 +6,7 @@ import { StyledButton } from './StyledButton';
 export interface ButtonProps {
   type?: 'button' | 'submit';
   form?: string;
-  variant: 'secondary' | 'primary' | 'ghost';
+  variant: 'secondary' | 'primary' | 'ghost' | 'danger';
   onClick?: () => void;
   size?: 'large' | 'small';
   href?: string;
@@ -49,7 +49,7 @@ const Button: React.FC<ButtonProps> = ({
         href={href}
         data-cy={id}
         data-testid={id}
-        >
+      >
         <StyledButton
           ref={buttonRef}
           disabled={disabled}
diff --git a/src/app/components/Button/StyledButton.tsx b/src/app/components/Button/StyledButton.tsx
index 599d46577..c594fb465 100644
--- a/src/app/components/Button/StyledButton.tsx
+++ b/src/app/components/Button/StyledButton.tsx
@@ -22,11 +22,17 @@ export const StyledButton = styled('button', {
     },
     variant: {
       primary: {
+        '&:focus': {
+          boxShadow: '$focus',
+        },
       },
       secondary: {
         background: '$bgBtnSecondary',
         color: '$fgBtnSecondary',
         borderColor: '$border',
+        '&:focus': {
+          boxShadow: '$focus',
+        },
       },
       ghost: {
         background: 'transparent',
@@ -35,6 +41,17 @@ export const StyledButton = styled('button', {
         '&:hover': {
           background: '$bgHoverBtnGhost',
         },
+        '&:focus': {
+          boxShadow: '$focus',
+        },
+      },
+      danger: {
+        background: '$bgBtnSecondary',
+        color: '$fgDanger',
+        borderColor: '$border',
+        '&:focus': {
+          boxShadow: '$focusDanger',
+        },
       },
     },
   },
diff --git a/src/app/components/Checkbox.tsx b/src/app/components/Checkbox.tsx
index 54c093fe4..71765005f 100644
--- a/src/app/components/Checkbox.tsx
+++ b/src/app/components/Checkbox.tsx
@@ -18,7 +18,7 @@ const StyledCheckbox = styled(CheckboxPrimitive.Root, {
   justifyContent: 'center',
   width: 12,
   height: 12,
-  '&:focus': { boxShadow: '0 0 0 2px black' },
+  '&:focus': { boxShadow: '$focus' },
   variants: {
     isChecked: {
       true: {
diff --git a/src/app/components/Count.tsx b/src/app/components/Count.tsx
new file mode 100644
index 000000000..5c18defe3
--- /dev/null
+++ b/src/app/components/Count.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Box from './Box';
+
+export function Count({ count }: { count: number; }) {
+  return (
+    <Box
+      css={{
+        backgroundColor: '$bgSubtle',
+        color: '$textMuted',
+        borderRadius: '$full',
+        padding: '$2 $3',
+      }}
+    >
+      {count}
+
+    </Box>
+  );
+}
diff --git a/src/app/components/DownshiftInput/DownShiftInput.test.tsx b/src/app/components/DownshiftInput/DownShiftInput.test.tsx
index 6f8f8fc81..82fb4b8cd 100644
--- a/src/app/components/DownshiftInput/DownShiftInput.test.tsx
+++ b/src/app/components/DownshiftInput/DownShiftInput.test.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { DownshiftInput } from './DownshiftInput';
 import { render } from '../../../../tests/config/setupTest';
 import { SingleToken } from '@/types/tokens';
+import { TokenTypes } from '@/constants/TokenTypes';
+import { BoxShadowTypes } from '@/constants/BoxShadowTypes';
 
 const resolvedTokens = [
   {
@@ -53,6 +55,42 @@ const resolvedTokens = [
     type: 'sizing',
     value: 1,
   },
+  {
+    internal__Parent: 'core',
+    name: 'typography.regular',
+    rawValue: {
+      fontFamily: 'arial',
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+    type: TokenTypes.TYPOGRAPHY,
+    value: {
+      fontFamily: 'arial',
+      fontSize: '12px',
+      fontWeight: 'bold',
+    },
+  },
+  {
+    internal__Parent: 'core',
+    name: 'boxShadow.regular',
+    rawValue: [{
+      x: '2',
+      y: '2',
+      blur: '2',
+      spread: '2',
+      color: '#000000',
+      type: BoxShadowTypes.DROP_SHADOW,
+    }],
+    type: TokenTypes.BOX_SHADOW,
+    value: [{
+      x: '2',
+      y: '2',
+      blur: '2',
+      spread: '2',
+      color: '#000000',
+      type: BoxShadowTypes.DROP_SHADOW,
+    }],
+  },
 ] as SingleToken[];
 
 const mockSetInputValue = jest.fn();
@@ -119,6 +157,6 @@ describe('DownShiftInput', () => {
       />,
     );
     result.getByTestId('downshift-input-suffix-button').click();
-    expect(result.getAllByTestId('downshift-input-item')).toHaveLength(7);
+    expect(result.getAllByTestId('downshift-input-item')).toHaveLength(9);
   });
 });
diff --git a/src/app/components/DownshiftInput/DownshiftInput.tsx b/src/app/components/DownshiftInput/DownshiftInput.tsx
index 5156eab8f..418f22b7f 100644
--- a/src/app/components/DownshiftInput/DownshiftInput.tsx
+++ b/src/app/components/DownshiftInput/DownshiftInput.tsx
@@ -12,6 +12,7 @@ import { StyledDownshiftInput } from './StyledDownshiftInput';
 import Tooltip from '../Tooltip';
 import { Properties } from '@/constants/Properties';
 import { isDocumentationType } from '@/utils/is/isDocumentationType';
+import { useReferenceTokenType } from '@/app/hooks/useReferenceTokenType';
 
 const StyledDropdown = styled('div', {
   position: 'absolute',
@@ -97,6 +98,7 @@ interface DownShiftProps {
   resolvedTokens: ResolveTokenValuesResult[];
   setInputValue(value: string): void;
   handleChange: React.ChangeEventHandler<HTMLInputElement>;
+  handleBlur?: React.ChangeEventHandler<HTMLInputElement>;
 }
 
 export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
@@ -113,13 +115,15 @@ export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
   setInputValue,
   resolvedTokens,
   handleChange,
+  handleBlur,
 }) => {
   const [showAutoSuggest, setShowAutoSuggest] = React.useState<boolean>(false);
-  const [isFirstLoading, setisFirstLoading] = React.useState<boolean>(true);
+  const [isFirstLoading, setIsFirstLoading] = React.useState<boolean>(true);
   const filteredValue = useMemo(() => ((showAutoSuggest || typeof value !== 'string') ? '' : value?.replace(/[{}$]/g, '')), [
     showAutoSuggest,
     value,
   ]); // removing non-alphanumberic except . from the input value
+  const referenceTokenTypes = useReferenceTokenType(type as TokenTypes);
   const getHighlightedText = useCallback((text: string, highlight: string) => {
     // Split on highlight term and include term into parts, ignore case
     const parts = text.split(new RegExp(`(${highlight.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')})`, 'gi'));
@@ -151,7 +155,7 @@ export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
         .filter(
           (token: SingleToken) => !filteredValue || token.name.toLowerCase().includes(filteredValue.toLowerCase()),
         )
-        .filter((token: SingleToken) => token?.type === type && token.name !== initialName).sort((a, b) => (
+        .filter((token: SingleToken) => referenceTokenTypes.includes(token?.type) && token.name !== initialName).sort((a, b) => (
           a.name.localeCompare(b.name)
         ));
     },
@@ -193,10 +197,16 @@ export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
   }, [showAutoSuggest]);
 
   const handleInputChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setisFirstLoading(false);
+    setIsFirstLoading(false);
     handleChange(e);
   }, [handleChange]);
 
+  const handleInputBlur = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (handleBlur) {
+      handleBlur(e);
+    }
+  }, [handleBlur]);
+
   return (
     <Downshift onSelect={handleSelect}>
       {({
@@ -218,6 +228,7 @@ export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
               value={value}
               onChange={handleInputChange}
               getInputProps={getInputProps}
+              onBlur={handleInputBlur}
             />
             {suffix && (
               <StyledInputSuffix type="button" data-testid="downshift-input-suffix-button" onClick={handleAutoSuggest}>
@@ -241,7 +252,6 @@ export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
                       backgroundColor: highlightedIndex === index ? '$interaction' : '$bgDefault',
                     }}
                     isFocused={highlightedIndex === index}
-
                   >
                     {type === 'color' && (
                     <StyledItemColorDiv>
diff --git a/src/app/components/DownshiftInput/StyledDownshiftInput.tsx b/src/app/components/DownshiftInput/StyledDownshiftInput.tsx
index 608075d5d..33ebb7a1e 100644
--- a/src/app/components/DownshiftInput/StyledDownshiftInput.tsx
+++ b/src/app/components/DownshiftInput/StyledDownshiftInput.tsx
@@ -10,6 +10,7 @@ type Props = {
   suffix?: React.ReactNode;
   getInputProps: <T>(options?: T) => T & GetInputPropsOptions;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onBlur?: React.ChangeEventHandler<HTMLInputElement>;
 };
 
 export const StyledDownshiftInput: React.FC<Props> = ({
@@ -19,6 +20,7 @@ export const StyledDownshiftInput: React.FC<Props> = ({
   placeholder,
   suffix,
   onChange,
+  onBlur,
   getInputProps,
 }) => {
   const { ref, size, ...inputProps } = getInputProps({
@@ -27,6 +29,7 @@ export const StyledDownshiftInput: React.FC<Props> = ({
     placeholder,
     value: value || '',
     onChange,
+    onBlur,
   });
 
   return (
diff --git a/src/app/components/EditTokenForm.tsx b/src/app/components/EditTokenForm.tsx
index b94d6e5b0..9df0076ef 100644
--- a/src/app/components/EditTokenForm.tsx
+++ b/src/app/components/EditTokenForm.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { track } from '@/utils/analytics';
+import { useShortcut } from '@/hooks/useShortcut';
 import { Dispatch } from '../store';
 import useManageTokens from '../store/useManageTokens';
 import CompositionTokenForm from './CompositionTokenForm';
@@ -8,8 +9,10 @@ import Input from './Input';
 import ColorPicker from './ColorPicker';
 import useConfirm from '../hooks/useConfirm';
 import useTokens from '../store/useTokens';
-import { EditTokenObject, SingleBoxShadowToken, SingleToken } from '@/types/tokens';
-import { checkIfContainsAlias, getAliasValue } from '@/utils/alias';
+import {
+  EditTokenObject, SingleBoxShadowToken, SingleDimensionToken, SingleToken,
+} from '@/types/tokens';
+import { checkIfAlias, checkIfContainsAlias, getAliasValue } from '@/utils/alias';
 import { ResolveTokenValuesResult } from '@/plugin/tokenHelpers';
 import {
   activeTokenSetSelector, updateModeSelector, editTokenSelector, themesListSelector,
@@ -27,6 +30,7 @@ import { EditTokenFormStatus } from '@/constants/EditTokenFormStatus';
 import { StyleOptions } from '@/constants/StyleOptions';
 import Textarea from './Textarea';
 import Heading from './Heading';
+import BorderTokenForm from './BorderTokenForm';
 import Box from './Box';
 
 type Props = {
@@ -37,7 +41,6 @@ type Choice = { key: string; label: string; enabled?: boolean, unique?: boolean
 
 // @TODO this needs to be reviewed from a typings perspective + performance
 function EditTokenForm({ resolvedTokens }: Props) {
-  const firstInput = React.useRef<HTMLInputElement | null>(null);
   const activeTokenSet = useSelector(activeTokenSetSelector);
   const editToken = useSelector(editTokenSelector);
   const themes = useSelector(themesListSelector);
@@ -50,11 +53,16 @@ function EditTokenForm({ resolvedTokens }: Props) {
   const [internalEditToken, setInternalEditToken] = React.useState<typeof editToken>(editToken);
   const { confirm } = useConfirm();
 
+  const isValidDimensionToken = React.useMemo(() => internalEditToken.type === TokenTypes.DIMENSION && (internalEditToken.value?.endsWith('px') || internalEditToken.value?.endsWith('rem') || checkIfAlias(internalEditToken as SingleDimensionToken, resolvedTokens)), [internalEditToken, resolvedTokens, checkIfAlias]);
+
   const isValid = React.useMemo(() => {
     if (internalEditToken?.type === TokenTypes.COMPOSITION && internalEditToken.value
       && (internalEditToken.value.hasOwnProperty('') || Object.keys(internalEditToken.value).length === 0)) {
       return false;
     }
+    if (internalEditToken.type === TokenTypes.DIMENSION) {
+      return true;
+    }
     return internalEditToken?.value && !error;
   }, [internalEditToken, error]);
 
@@ -68,6 +76,7 @@ function EditTokenForm({ resolvedTokens }: Props) {
   const hasAnotherTokenThatStartsWithName = React.useMemo(
     () => resolvedTokens
       .filter((t) => t.internal__Parent === activeTokenSet)
+      .filter((t) => t.name !== internalEditToken?.initialName)
       .find((t) => t.name.startsWith(`${internalEditToken?.name}.`)),
     [internalEditToken, resolvedTokens, activeTokenSet],
   );
@@ -110,6 +119,15 @@ function EditTokenForm({ resolvedTokens }: Props) {
     [internalEditToken],
   );
 
+  const handleBlur = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+    () => {
+      if (internalEditToken.type === TokenTypes.DIMENSION && !isValidDimensionToken) {
+        setError('Value must include either px or rem');
+      }
+    },
+    [internalEditToken, isValidDimensionToken],
+  );
+
   const handleBoxShadowValueChange = React.useCallback(
     (shadow: SingleBoxShadowToken['value']) => {
       setError(null);
@@ -186,6 +204,31 @@ function EditTokenForm({ resolvedTokens }: Props) {
     }
   }, [internalEditToken]);
 
+  const handleBorderValueChange = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+    (e) => {
+      e.persist();
+      if (internalEditToken?.type === TokenTypes.BORDER && typeof internalEditToken?.value !== 'string') {
+        setInternalEditToken({
+          ...internalEditToken,
+          value: {
+            ...internalEditToken.value,
+            [e.target.name]: e.target.value,
+          },
+        });
+      }
+    },
+    [internalEditToken],
+  );
+
+  const handleBorderValueDownShiftInputChange = React.useCallback((newInputValue: string, property: string) => {
+    if (internalEditToken?.type === TokenTypes.BORDER && typeof internalEditToken?.value !== 'string') {
+      setInternalEditToken({
+        ...internalEditToken,
+        value: { ...internalEditToken.value, [property]: newInputValue },
+      });
+    }
+  }, [internalEditToken]);
+
   const handleDownShiftInputChange = React.useCallback((newInputValue: string) => {
     setInternalEditToken({
       ...internalEditToken,
@@ -297,6 +340,10 @@ function EditTokenForm({ resolvedTokens }: Props) {
   const handleSubmit = React.useCallback(
     (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      if (internalEditToken.type === TokenTypes.DIMENSION && !isValidDimensionToken) {
+        setError('Value must include either px or rem');
+        return;
+      }
       if (isValid && internalEditToken) {
         submitTokenValue(internalEditToken);
         dispatch.uiState.setShowEditForm(false);
@@ -305,16 +352,21 @@ function EditTokenForm({ resolvedTokens }: Props) {
     [dispatch, isValid, internalEditToken, submitTokenValue],
   );
 
+  const handleSaveShortcut = React.useCallback((event: KeyboardEvent) => {
+    if (event.metaKey || event.ctrlKey) {
+      if (isValid && internalEditToken) {
+        submitTokenValue(internalEditToken);
+        dispatch.uiState.setShowEditForm(false);
+      }
+    }
+  }, [handleSubmit, submitTokenValue, dispatch, internalEditToken, isValid]);
+
+  useShortcut(['Enter'], handleSaveShortcut);
+
   const handleReset = React.useCallback(() => {
     dispatch.uiState.setShowEditForm(false);
   }, [dispatch]);
 
-  React.useEffect(() => {
-    setTimeout(() => {
-      firstInput.current?.focus();
-    }, 50);
-  }, []);
-
   const resolvedValue = React.useMemo(() => {
     if (internalEditToken) {
       return typeof internalEditToken?.value === 'string'
@@ -360,6 +412,16 @@ function EditTokenForm({ resolvedTokens }: Props) {
           />
         );
       }
+      case TokenTypes.BORDER: {
+        return (
+          <BorderTokenForm
+            internalEditToken={internalEditToken}
+            resolvedTokens={resolvedTokens}
+            handleBorderValueChange={handleBorderValueChange}
+            handleBorderValueDownShiftInputChange={handleBorderValueDownShiftInputChange}
+          />
+        );
+      }
       default: {
         return (
           <div>
@@ -370,6 +432,7 @@ function EditTokenForm({ resolvedTokens }: Props) {
               resolvedTokens={resolvedTokens}
               initialName={internalEditToken.initialName}
               handleChange={handleChange}
+              handleBlur={handleBlur}
               setInputValue={handleDownShiftInputChange}
               placeholder={
                 internalEditToken.type === 'color' ? '#000000, hsla(), rgba() or {alias}' : 'Value or {alias}'
@@ -416,8 +479,8 @@ function EditTokenForm({ resolvedTokens }: Props) {
           value={internalEditToken?.name}
           onChange={handleChange}
           type="text"
+          autofocus
           name="name"
-          inputRef={firstInput}
           error={error}
           placeholder="Unique name"
         />
@@ -429,6 +492,7 @@ function EditTokenForm({ resolvedTokens }: Props) {
           <Textarea
             key="description"
             value={internalEditToken?.description || ''}
+            placeholder="Optional description"
             onChange={handleDescriptionChange}
             rows={3}
             border
@@ -440,7 +504,7 @@ function EditTokenForm({ resolvedTokens }: Props) {
           </Button>
           <Button disabled={!isValid} variant="primary" type="submit">
             {internalEditToken?.status === EditTokenFormStatus.CREATE && 'Create'}
-            {internalEditToken?.status === EditTokenFormStatus.EDIT && 'Update'}
+            {internalEditToken?.status === EditTokenFormStatus.EDIT && 'Save'}
             {(
               internalEditToken?.status !== EditTokenFormStatus.CREATE
               && internalEditToken?.status !== EditTokenFormStatus.EDIT
diff --git a/src/app/components/ExportProvider/SingleFileExport.test.tsx b/src/app/components/ExportProvider/SingleFileExport.test.tsx
index 8f1b35c63..e15148e21 100644
--- a/src/app/components/ExportProvider/SingleFileExport.test.tsx
+++ b/src/app/components/ExportProvider/SingleFileExport.test.tsx
@@ -171,11 +171,11 @@ describe('SingleFileExport', () => {
           headline: {
             fontFamily: {
               value: 'Inter',
-              type: 'fontFamily',
+              type: 'fontFamilies',
             },
             fontWeight: {
               value: 'Bold',
-              type: 'fontWeight',
+              type: 'fontWeights',
             },
           },
           alias: {
diff --git a/src/app/components/Initiator.test.tsx b/src/app/components/Initiator.test.tsx
index 684821c24..409a33da5 100644
--- a/src/app/components/Initiator.test.tsx
+++ b/src/app/components/Initiator.test.tsx
@@ -621,6 +621,7 @@ describe('Initiator', () => {
         height: 300,
         isMinimized: false,
       },
+      shouldSwapStyles: false,
       tokenType: 'object',
       updateMode: UpdateMode.PAGE,
       updateRemote: false,
diff --git a/src/app/components/Initiator.tsx b/src/app/components/Initiator.tsx
index d63a83fb5..1e6686851 100644
--- a/src/app/components/Initiator.tsx
+++ b/src/app/components/Initiator.tsx
@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react';
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { MessageFromPluginTypes, PostToUIMessage } from '@/types/messages';
@@ -74,6 +75,10 @@ export function Initiator() {
             }
             break;
           }
+          case MessageFromPluginTypes.NOTIFY_EXCEPTION: {
+            Sentry.captureException({ error: pluginMessage.error, ...pluginMessage.opts });
+            break;
+          }
           case MessageFromPluginTypes.API_PROVIDERS: {
             dispatch.uiState.setAPIProviders(pluginMessage.providers);
             break;
diff --git a/src/app/components/Input.tsx b/src/app/components/Input.tsx
index b10efad04..6c3480a22 100644
--- a/src/app/components/Input.tsx
+++ b/src/app/components/Input.tsx
@@ -157,7 +157,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(({
   suffix,
   step,
   custom = '',
-  inputRef = null,
+  inputRef,
   placeholder = '',
   capitalize = false,
   isMasked = false,
@@ -175,6 +175,16 @@ const Input = React.forwardRef<HTMLInputElement, Props>(({
     }
   }, [show, inputRef]);
 
+  const htmlInputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    if (autofocus && htmlInputRef && htmlInputRef.current) {
+      setTimeout(() => {
+        htmlInputRef.current?.focus();
+      }, 50);
+    }
+  }, [autofocus, htmlInputRef]);
+
   return (
     <label htmlFor={name} className="block font-medium text-xxs">
       {(!!label || !!error) && (
@@ -189,7 +199,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(({
         {!!prefix && <StyledPrefix>{prefix}</StyledPrefix>}
         <StyledInput
           form={form}
-          ref={inputRef ?? ref}
+          ref={inputRef || ref || htmlInputRef}
           spellCheck={false}
           tabIndex={tabindex ?? undefined}
           type={type}
diff --git a/src/app/components/Inspector.tsx b/src/app/components/Inspector.tsx
index 8b43582d8..097e932e9 100644
--- a/src/app/components/Inspector.tsx
+++ b/src/app/components/Inspector.tsx
@@ -19,9 +19,12 @@ import {
   usedTokenSetSelector,
 } from '@/selectors';
 import { TokenSetStatus } from '@/constants/TokenSetStatus';
+import Button from './Button';
+import BulkRemapModal from './modals/BulkRemapModal';
 
 function Inspector() {
   const [inspectView, setInspectView] = React.useState('multi');
+  const [bulkRemapModalVisible, setShowBulkRemapModalVisible] = React.useState(false);
   const dispatch = useDispatch<Dispatch>();
   const tokens = useSelector(tokensSelector);
   const activeTokenSet = useSelector(activeTokenSetSelector);
@@ -51,6 +54,14 @@ function Inspector() {
     }
   }
 
+  const handleShowBulkRemap = React.useCallback(() => {
+    setShowBulkRemapModalVisible(true);
+  }, []);
+
+  const handleHideBulkRemap = React.useCallback(() => {
+    setShowBulkRemapModalVisible(false);
+  }, []);
+
   return (
     <Box css={{
       gap: '$2', flexGrow: 1, display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden',
@@ -81,9 +92,12 @@ function Inspector() {
         </Box>
         <Box
           css={{
-            display: 'flex', gap: '$2', flexDirection: 'row', alignItems: 'center',
+            display: 'flex', gap: '$4', flexDirection: 'row', alignItems: 'center',
           }}
         >
+          <Button onClick={handleShowBulkRemap} variant="secondary">
+            Bulk remap
+          </Button>
           <IconButton
             variant={inspectView === 'multi' ? 'primary' : 'default'}
             dataCy="inspector-multi"
@@ -101,6 +115,12 @@ function Inspector() {
             tooltip="Debug & Annotate"
           />
         </Box>
+        {bulkRemapModalVisible && (
+        <BulkRemapModal
+          isOpen={bulkRemapModalVisible}
+          onClose={handleHideBulkRemap}
+        />
+        )}
       </Box>
 
       {renderInspectView()}
diff --git a/src/app/components/InspectorMultiView.tsx b/src/app/components/InspectorMultiView.tsx
index c49daba68..3977caf30 100644
--- a/src/app/components/InspectorMultiView.tsx
+++ b/src/app/components/InspectorMultiView.tsx
@@ -15,14 +15,20 @@ import { TokenTypes } from '@/constants/TokenTypes';
 import { Properties } from '@/constants/Properties';
 import { SelectionGroup } from '@/types';
 import { NodeInfo } from '@/types/NodeInfo';
-import BulkRemapModal from './modals/BulkRemapModal';
 import { StyleIdBackupKeys } from '@/constants/StyleIdBackupKeys';
+import OnboardingExplainer from './OnboardingExplainer';
+import Stack from './Stack';
 
 export default function InspectorMultiView({ resolvedTokens }: { resolvedTokens: SingleToken[] }) {
+  const onboardingData = {
+    title: 'Inspect',
+    text: 'This is where applied tokens of your selection show up, you can use Deep Inspect to scan the selected layers and all of its children.',
+    url: 'https://docs.figmatokens.com/inspect/multi-inspect?ref=onboarding_explainer_inspect',
+  };
+
   const inspectState = useSelector(inspectStateSelector, isEqual);
   const uiState = useSelector(uiStateSelector, isEqual);
-  const { removeTokensByValue } = useTokens();
-  const [bulkRemapModalVisible, setShowBulkRemapModalVisible] = React.useState(false);
+  const { removeTokensByValue, setNoneValuesOnNode } = useTokens();
   const dispatch = useDispatch<Dispatch>();
 
   React.useEffect(() => {
@@ -62,14 +68,6 @@ export default function InspectorMultiView({ resolvedTokens }: { resolvedTokens:
     removeTokensByValue(valuesToRemove);
   }, [inspectState.selectedTokens, removeTokensByValue, uiState.selectionValues]);
 
-  const handleShowBulkRemap = React.useCallback(() => {
-    setShowBulkRemapModalVisible(true);
-  }, []);
-
-  const handleHideBulkRemap = React.useCallback(() => {
-    setShowBulkRemapModalVisible(false);
-  }, []);
-
   const handleSelectAll = React.useCallback(() => {
     dispatch.inspectState.setSelectedTokens(
       inspectState.selectedTokens.length === uiState.selectionValues.length
@@ -78,53 +76,63 @@ export default function InspectorMultiView({ resolvedTokens }: { resolvedTokens:
     );
   }, [dispatch.inspectState, inspectState.selectedTokens.length, uiState.selectionValues]);
 
+  const closeOnboarding = React.useCallback(() => {
+    dispatch.uiState.setOnboardingExplainerInspect(false);
+  }, [dispatch]);
+
+  const setNoneValues = React.useCallback(() => {
+    setNoneValuesOnNode(resolvedTokens);
+  }, [setNoneValuesOnNode, resolvedTokens]);
+
   return (
-    <Box
-      css={{
-        display: 'flex', flexDirection: 'column', flexGrow: 1, padding: '$4',
+    <>
+      {uiState.selectionValues.length > 0 && (
+      <Box css={{
+        display: 'flex', alignItems: 'center', gap: '$3', justifyContent: 'space-between', paddingInline: '$4',
       }}
-      className="content scroll-container"
-    >
-      {uiState.selectionValues.length > 0 ? (
-        <Box css={{ display: 'flex', flexDirection: 'column', gap: '$1' }}>
-          <Box css={{
-            display: 'flex', alignItems: 'center', gap: '$3', justifyContent: 'space-between',
-          }}
-          >
-            <Box css={{
-              display: 'flex', alignItems: 'center', gap: '$3', fontSize: '$small',
-            }}
-            >
-              <Checkbox
-                checked={inspectState.selectedTokens.length === uiState.selectionValues.length}
-                id="selectAll"
-                onCheckedChange={handleSelectAll}
-              />
-              <Label htmlFor="selectAll" css={{ fontSize: '$small', fontWeight: '$bold' }}>
-                Select all
-              </Label>
-            </Box>
-            <Box css={{ display: 'flex', flexDirection: 'row', gap: '$1' }}>
-              <Button onClick={handleShowBulkRemap} variant="secondary">
-                Bulk remap
-              </Button>
-              <Button onClick={removeTokens} disabled={inspectState.selectedTokens.length === 0} variant="secondary">
-                Remove selected
-              </Button>
-            </Box>
-          </Box>
-          {Object.entries(groupedSelectionValues).map((group) => <InspectorTokenGroup key={`inspect-group-${group[0]}`} group={group as [Properties, SelectionGroup[]]} resolvedTokens={resolvedTokens} />)}
-          {bulkRemapModalVisible && (
-            <BulkRemapModal
-              isOpen={bulkRemapModalVisible}
-              onClose={handleHideBulkRemap}
-            />
-          )}
-
+      >
+        <Box css={{
+          display: 'flex', alignItems: 'center', gap: '$3', fontSize: '$small',
+        }}
+        >
+          <Checkbox
+            checked={inspectState.selectedTokens.length === uiState.selectionValues.length}
+            id="selectAll"
+            onCheckedChange={handleSelectAll}
+          />
+          <Label htmlFor="selectAll" css={{ fontSize: '$small', fontWeight: '$bold' }}>
+            Select all
+          </Label>
         </Box>
-      ) : (
-        <Blankslate title={uiState.selectedLayers > 0 ? 'No tokens found' : 'No layers selected'} text={uiState.selectedLayers > 0 ? 'None of the selected layers contain any tokens' : 'Select a layer to see applied tokens'} />
+        <Box css={{ display: 'flex', flexDirection: 'row', gap: '$1' }}>
+          <Button onClick={setNoneValues} disabled={inspectState.selectedTokens.length === 0} variant="secondary">
+            Set to none
+          </Button>
+          <Button onClick={removeTokens} disabled={inspectState.selectedTokens.length === 0} variant="secondary">
+            Remove selected
+          </Button>
+        </Box>
+      </Box>
       )}
-    </Box>
+      <Box
+        css={{
+          display: 'flex', flexDirection: 'column', flexGrow: 1, padding: '$4',
+        }}
+        className="content scroll-container"
+      >
+        {uiState.selectionValues.length > 0 ? (
+          <Box css={{ display: 'flex', flexDirection: 'column', gap: '$1' }}>
+            {Object.entries(groupedSelectionValues).map((group) => <InspectorTokenGroup key={`inspect-group-${group[0]}`} group={group as [Properties, SelectionGroup[]]} resolvedTokens={resolvedTokens} />)}
+          </Box>
+        ) : (
+          <Stack direction="column" gap={4} css={{ padding: '$5', margin: 'auto' }}>
+            <Blankslate title={uiState.selectedLayers > 0 ? 'No tokens found' : 'No layers selected'} text={uiState.selectedLayers > 0 ? 'None of the selected layers contain any tokens' : 'Select a layer to see applied tokens'} />
+            {uiState.onboardingExplainerInspect && (
+              <OnboardingExplainer data={onboardingData} closeOnboarding={closeOnboarding} />
+            )}
+          </Stack>
+        )}
+      </Box>
+    </>
   );
 }
diff --git a/src/app/components/InspectorResolvedToken.tsx b/src/app/components/InspectorResolvedToken.tsx
index 124f92860..4ab65536c 100644
--- a/src/app/components/InspectorResolvedToken.tsx
+++ b/src/app/components/InspectorResolvedToken.tsx
@@ -6,7 +6,7 @@ import { SingleToken } from '@/types/tokens';
 import IconShadow from '@/icons/shadow.svg';
 import IconComposition from '@/icons/composition.svg';
 import { TokenTypes } from '@/constants/TokenTypes';
-import { IconImage } from '@/icons';
+import { IconBorder, IconImage } from '@/icons';
 
 export default function InspectorResolvedToken({ token }: { token: SingleToken }) {
   // TODO: Introduce shared component for token tooltips
@@ -30,6 +30,7 @@ export default function InspectorResolvedToken({ token }: { token: SingleToken }
       </Tooltip>
     );
   }
+
   switch (token?.type) {
     case TokenTypes.COLOR: {
       return (
@@ -107,6 +108,22 @@ export default function InspectorResolvedToken({ token }: { token: SingleToken }
       );
     }
 
+    case TokenTypes.BORDER: {
+      return (
+        <Box
+          css={{
+            background: '$bgSubtle',
+            fontSize: '$small',
+            padding: '$2 $3',
+            borderRadius: '$default',
+            width: '40px',
+          }}
+        >
+          <IconBorder />
+        </Box>
+      );
+    }
+
     default: {
       return (
         <Box
diff --git a/src/app/components/InspectorTokenSingle.tsx b/src/app/components/InspectorTokenSingle.tsx
index affa3ae64..983c197b4 100644
--- a/src/app/components/InspectorTokenSingle.tsx
+++ b/src/app/components/InspectorTokenSingle.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ValueNoneIcon } from '@radix-ui/react-icons';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { SingleToken } from '@/types/tokens';
 import Box from './Box';
@@ -13,7 +14,6 @@ import TokenNodes from './inspector/TokenNodes';
 import { inspectStateSelector } from '@/selectors';
 import { useTypeForProperty } from '../hooks/useTypeForProperty';
 import Button from './Button';
-import Heading from './Heading';
 import DownshiftInput from './DownshiftInput';
 import Modal from './Modal';
 import Stack from './Stack';
@@ -40,7 +40,7 @@ export default function InspectorTokenSingle({
   React.useEffect(() => {
     setChecked(inspectState.selectedTokens.includes(`${token.category}-${token.value}`));
     if (!resolvedTokens.find((resolvedToken) => resolvedToken.name === token.value)) setIsBrokenLink(true);
-  }, [inspectState.selectedTokens, token]);
+  }, [inspectState.selectedTokens, token, resolvedTokens]);
 
   const handleDownShiftInputChange = React.useCallback((newInputValue: string) => {
     setNewTokenName(newInputValue.replace(/[{}$]/g, ''));
@@ -54,7 +54,7 @@ export default function InspectorTokenSingle({
   const onConfirm = React.useCallback(() => {
     handleRemap(token.category, token.value, newTokenName, resolvedTokens);
     setShowDialog(false);
-  }, [token, handleRemap, newTokenName]);
+  }, [token, handleRemap, newTokenName, resolvedTokens]);
 
   const handleClick = React.useCallback(() => {
     setShowDialog(true);
@@ -93,7 +93,12 @@ export default function InspectorTokenSingle({
           id={`${token.category}-${token.value}`}
           onCheckedChange={onCheckedChanged}
         />
-        {isBrokenLink && <IconBrokenLink />}
+        {
+          token.value === 'none' && <ValueNoneIcon />
+        }
+        {
+          isBrokenLink && token.value !== 'none' && <IconBrokenLink />
+        }
         {(!!mappedToken) && (
           <InspectorResolvedToken token={mappedToken} />
         )}
@@ -115,28 +120,21 @@ export default function InspectorTokenSingle({
         </Box>
         {
           showDialog && (
-            <Modal large isOpen close={onCancel}>
+            <Modal title={`Choose a new token for ${mappedToken?.name || token.value}`} large isOpen close={onCancel}>
               <form
                 onSubmit={onConfirm}
               >
                 <Stack direction="column" gap={4} css={{ minHeight: '215px', justifyContent: 'center' }}>
-                  <Stack direction="column" gap={2}>
-                    <Heading>
-                      Choose a new token for
-                      {' '}
-                      {mappedToken?.name || token.value}
-                    </Heading>
-                    <DownshiftInput
-                      value={newTokenName}
-                      type={property === 'fill' ? 'color' : property}
-                      resolvedTokens={resolvedTokens}
-                      handleChange={handleChange}
-                      setInputValue={handleDownShiftInputChange}
-                      placeholder="Choose a new token"
-                      suffix
-                    />
+                  <DownshiftInput
+                    value={newTokenName}
+                    type={property === 'fill' ? 'color' : property}
+                    resolvedTokens={resolvedTokens}
+                    handleChange={handleChange}
+                    setInputValue={handleDownShiftInputChange}
+                    placeholder="Choose a new token"
+                    suffix
+                  />
 
-                  </Stack>
                   <Stack direction="row" gap={4} justify="between">
                     <Button variant="secondary" onClick={onCancel}>
                       Cancel
diff --git a/src/app/components/LocalStorageItem.tsx b/src/app/components/LocalStorageItem.tsx
new file mode 100644
index 000000000..14feb3d6b
--- /dev/null
+++ b/src/app/components/LocalStorageItem.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Button from './Button';
+import Box from './Box';
+import { IconFile } from '@/icons';
+import { StyledStorageItem } from './StyledStorageItem';
+import Badge from './Badge';
+
+type Props = {
+  onClick: () => void;
+  isActive: boolean;
+};
+
+const LocalStorageItem = ({ onClick, isActive }: Props) => (
+  <StyledStorageItem active={isActive}>
+    <Box css={{
+      alignItems: 'center', flexDirection: 'row', flexGrow: '1', display: 'flex', overflow: 'hidden', gap: '$3',
+    }}
+    >
+      <Box>
+        <IconFile />
+      </Box>
+      <Box css={{ fontSize: '$small', fontWeight: '$bold' }}>Local document</Box>
+    </Box>
+    <Box css={{ marginRight: '$2' }}>
+      {isActive ? <Badge text="Active" /> : (
+
+        <Button id="button-storage-item-apply" variant="secondary" onClick={onClick}>
+          Apply
+        </Button>
+      )}
+    </Box>
+  </StyledStorageItem>
+);
+
+export default LocalStorageItem;
diff --git a/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx b/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx
index 61dab13fe..547e93a2a 100644
--- a/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx
+++ b/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx
@@ -88,6 +88,7 @@ export const CreateOrEditThemeForm: React.FC<Props> = ({
             onClick={onCancel}
           />
           <Input
+            autofocus
             data-cy="create-or-edit-theme-form--input--name"
             data-testid="create-or-edit-theme-form--input--name"
             {...register('name', { required: true })}
diff --git a/src/app/components/ManageThemesModal/ManageThemesModal.tsx b/src/app/components/ManageThemesModal/ManageThemesModal.tsx
index bf2837369..c3081a33f 100644
--- a/src/app/components/ManageThemesModal/ManageThemesModal.tsx
+++ b/src/app/components/ManageThemesModal/ManageThemesModal.tsx
@@ -97,24 +97,24 @@ export const ManageThemesModal: React.FC<Props> = () => {
           {themeEditorOpen && (
             <>
               <Box css={{ marginRight: 'auto' }}>
-                <Button
-                  id="button-manage-themes-modal-cancel"
-                  variant="secondary"
-                  onClick={handleToggleThemeEditor}
-                >
-                  Cancel
-                </Button>
-              </Box>
-              {typeof themeEditorOpen === 'string' && (
+                {typeof themeEditorOpen === 'string' && (
                 <Button
                   id="button-manage-themes-modal-delete-theme"
-                  variant="secondary"
+                  variant="danger"
                   type="submit"
                   onClick={handleDeleteTheme}
                 >
                   Delete
                 </Button>
-              )}
+                )}
+              </Box>
+              <Button
+                id="button-manage-themes-modal-cancel"
+                variant="secondary"
+                onClick={handleToggleThemeEditor}
+              >
+                Cancel
+              </Button>
               <Button
                 id="button-manage-themes-modal-save-theme"
                 variant="primary"
diff --git a/src/app/components/ManageThemesModal/StyledUnlinkButton.tsx b/src/app/components/ManageThemesModal/StyledUnlinkButton.tsx
deleted file mode 100644
index af8d6fcce..000000000
--- a/src/app/components/ManageThemesModal/StyledUnlinkButton.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { styled } from '@/stitches.config';
-
-export const StyledUnlinkButton = styled('button', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: '$fgDanger',
-  padding: '$2',
-  width: '1.2rem',
-  height: '1.2rem',
-  borderRadius: '$button',
-  backgroundColor: '$bgDanger',
-  '&:hover': {
-    color: '$bgDanger',
-    backgroundColor: '$dangerBgHover',
-  },
-});
diff --git a/src/app/components/ManageThemesModal/ThemeStyleManagementCategory.tsx b/src/app/components/ManageThemesModal/ThemeStyleManagementCategory.tsx
index 44c49420d..cf234a062 100644
--- a/src/app/components/ManageThemesModal/ThemeStyleManagementCategory.tsx
+++ b/src/app/components/ManageThemesModal/ThemeStyleManagementCategory.tsx
@@ -8,6 +8,8 @@ import { BackgroundJobs } from '@/constants/BackgroundJobs';
 import { isWaitingForBackgroundJobSelector } from '@/selectors';
 import { RootState } from '@/app/store';
 import { StyleInfo, ThemeStyleManagementCategoryStyleEntry } from './ThemeStyleManagementCategoryStyleEntry';
+import Stack from '../Stack';
+import { Count } from '../Count';
 
 type Props = {
   label: string
@@ -35,7 +37,12 @@ export const ThemeStyleManagementCategory: React.FC<Props> = ({
       data-testid={`themestylemanagementcategory-accordion-${label.toLowerCase()}`}
       disabled={stylesEntries.length === 0}
       label={(
-        <Heading size="medium">{label}</Heading>
+        <Stack direction="row" gap={2} align="center">
+          <Heading size="medium">
+            {label}
+          </Heading>
+          {stylesEntries.length > 0 ? <Count count={stylesEntries.length} /> : null}
+        </Stack>
       )}
       extra={(
         <Button
diff --git a/src/app/components/ManageThemesModal/ThemeStyleManagementCategoryStyleEntry.tsx b/src/app/components/ManageThemesModal/ThemeStyleManagementCategoryStyleEntry.tsx
index 7ff6b7a60..e1167cad4 100644
--- a/src/app/components/ManageThemesModal/ThemeStyleManagementCategoryStyleEntry.tsx
+++ b/src/app/components/ManageThemesModal/ThemeStyleManagementCategoryStyleEntry.tsx
@@ -1,10 +1,12 @@
 import React, { useCallback } from 'react';
-import { IconArrowRight, IconUnlink } from '@/icons';
+import { LinkBreak1Icon, LinkBreak2Icon } from '@radix-ui/react-icons';
+import { IconArrowRight } from '@/icons';
 import Box from '../Box';
 import { Flex } from '../Flex';
 import Text from '../Text';
 import ResolvingLoader from '../ResolvingLoader';
-import { StyledUnlinkButton } from './StyledUnlinkButton';
+import IconButton from '../IconButton';
+import Stack from '../Stack';
 
 export type StyleInfo = {
   id: string
@@ -47,19 +49,26 @@ export const ThemeStyleManagementCategoryStyleEntry: React.FC<Props> = ({
           width: '100%',
         }}
       >
-        <Text size="small">{token}</Text>
-        <IconArrowRight width="16" />
-        {(!styleInfo.name && !styleInfo.failedToResolve) && (
-          <ResolvingLoader />
-        )}
-        {(!styleInfo.name && styleInfo.failedToResolve) && (
-          <StyledUnlinkButton data-testid="themestylemanagementcategorystyleentry-unlink" type="button" onClick={handleDisconnectStyle}>
-            <IconUnlink />
-          </StyledUnlinkButton>
-        )}
-        {styleInfo.name && (
-          <Text bold size="small" title={styleInfo.name} css={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{styleInfo.name}</Text>
-        )}
+        <Box css={{
+          flexGrow: 1, display: 'flex', alignItems: 'center', gap: '$3',
+        }}
+        >
+          <Text size="small">{token}</Text>
+          <IconArrowRight width="16" />
+          {(!styleInfo.name && !styleInfo.failedToResolve) && (
+            <ResolvingLoader />
+          )}
+          {(!styleInfo.name && styleInfo.failedToResolve) && (
+            <Stack direction="row" gap={1} css={{ color: '$fgDanger' }}>
+              <LinkBreak1Icon />
+              Reference not found
+            </Stack>
+          )}
+          {styleInfo.name && (
+            <Text bold size="small" title={styleInfo.name} css={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{styleInfo.name}</Text>
+          )}
+        </Box>
+        <IconButton tooltip="Detach style" icon={<LinkBreak2Icon />} dataCy="themestylemanagementcategorystyleentry-unlink" onClick={handleDisconnectStyle} />
       </Flex>
     </Flex>
   );
diff --git a/src/app/components/ManageThemesModal/ThemeStyleManagentForm.tsx b/src/app/components/ManageThemesModal/ThemeStyleManagentForm.tsx
index 2aa2c591d..dad3cc6e7 100644
--- a/src/app/components/ManageThemesModal/ThemeStyleManagentForm.tsx
+++ b/src/app/components/ManageThemesModal/ThemeStyleManagentForm.tsx
@@ -99,7 +99,7 @@ export const ThemeStyleManagementForm: React.FC<Props> = ({ id }) => {
 
   const handleDisconnectStyle = useCallback((token: string) => {
     if (theme) {
-      track('Disconnect style', token);
+      track('Disconnect style', { token });
       dispatch.tokenState.disconnectStyleFromTheme({
         id: theme.id,
         key: token,
diff --git a/src/app/components/ManageThemesModal/__tests__/ThemeStyleManagementCategory.test.tsx b/src/app/components/ManageThemesModal/__tests__/ThemeStyleManagementCategory.test.tsx
index 0ce1097e8..0ae38682f 100644
--- a/src/app/components/ManageThemesModal/__tests__/ThemeStyleManagementCategory.test.tsx
+++ b/src/app/components/ManageThemesModal/__tests__/ThemeStyleManagementCategory.test.tsx
@@ -22,6 +22,10 @@ describe('ThemeStyleManagementCategory', () => {
               id: 'S:1235',
               name: 'body/bold',
             },
+            'typography/body/light': {
+              id: 'S:1235',
+              failedToResolve: false,
+            },
           }}
           icon={(
             <Box data-testid="icon" />
@@ -48,8 +52,8 @@ describe('ThemeStyleManagementCategory', () => {
     attachLocalStyles.click();
     expect(mockAttachLocalStyles).toBeCalledTimes(1);
 
-    const unlinkButton = await result.findByTestId('themestylemanagementcategorystyleentry-unlink');
-    unlinkButton.click();
+    const unlinkButton = await result.findAllByTestId('themestylemanagementcategorystyleentry-unlink');
+    unlinkButton[0].click();
     expect(mockDisconnectStyle).toBeCalledTimes(1);
   });
 });
diff --git a/src/app/components/ManageThemesModal/__tests__/ThemeStyleManagementForm.test.tsx b/src/app/components/ManageThemesModal/__tests__/ThemeStyleManagementForm.test.tsx
index 6c3edcf2b..fe1f7a558 100644
--- a/src/app/components/ManageThemesModal/__tests__/ThemeStyleManagementForm.test.tsx
+++ b/src/app/components/ManageThemesModal/__tests__/ThemeStyleManagementForm.test.tsx
@@ -98,8 +98,8 @@ describe('ThemeStyleManagementForm', () => {
     const toggle = (await result.findAllByTestId('accordion-toggle'))[2];
     act(() => toggle.click());
 
-    const unlink = await result.findByTestId('themestylemanagementcategorystyleentry-unlink');
-    act(() => unlink.click());
+    const unlink = await result.findAllByTestId('themestylemanagementcategorystyleentry-unlink');
+    act(() => unlink[0].click());
     expect(store.getState().tokenState.themes[0].$figmaStyleReferences).toEqual({
       'colors.brand.primary': 'S:1234',
       'typography.heading.h1': 'S:2345',
diff --git a/src/app/components/MoreButton/MoreButton.test.tsx b/src/app/components/MoreButton/MoreButton.test.tsx
index 3a955a7ca..d2858d855 100644
--- a/src/app/components/MoreButton/MoreButton.test.tsx
+++ b/src/app/components/MoreButton/MoreButton.test.tsx
@@ -198,4 +198,25 @@ describe('MoreButton', () => {
     await fireEvent.click(result.getByText('Gap'));
     expect(mockSetNodeData).toBeCalledTimes(0);
   });
+
+  it('show all properties about dimension token', async () => {
+    const dimensionToken: SingleToken = {
+      value: '16px',
+      name: 'dimension-regular',
+      type: TokenTypes.DIMENSION,
+    };
+    const { getByText } = render(
+      <MoreButton
+        type={TokenTypes.DIMENSION}
+        showForm={mockShowForm}
+        token={dimensionToken}
+      />,
+    );
+    expect(getByText(dimensionToken.name)).toBeInTheDocument();
+    await fireEvent.contextMenu(getByText(dimensionToken.name));
+    expect(getByText('Spacing')).toBeInTheDocument();
+    expect(getByText('Sizing')).toBeInTheDocument();
+    expect(getByText('Border radius')).toBeInTheDocument();
+    expect(getByText('Border width')).toBeInTheDocument();
+  });
 });
diff --git a/src/app/components/MoreButton/MoreButton.tsx b/src/app/components/MoreButton/MoreButton.tsx
index a21c9b90d..c5d96a13d 100644
--- a/src/app/components/MoreButton/MoreButton.tsx
+++ b/src/app/components/MoreButton/MoreButton.tsx
@@ -87,9 +87,16 @@ export const MoreButton: React.FC<Props> = ({
     dispatch.uiState.completeJob(BackgroundJobs.UI_APPLYNODEVALUE);
   }, [dispatch, tokensContext.resolvedTokens, setNodeData]);
 
-  const activeStateProperties = React.useMemo(() => (
-    [...properties, ...DocumentationProperties]
-  ), [properties]);
+  const activeStateProperties = React.useMemo(() => {
+    const childProperties: PropertyObject[] = [];
+    properties.forEach((property) => {
+      if (property.childProperties) {
+        childProperties.push(...property.childProperties);
+      }
+    });
+    return [...properties, ...childProperties, ...DocumentationProperties];
+  }, [properties]);
+
   const active = useGetActiveState(activeStateProperties, type, token.name);
 
   const handleClick = React.useCallback((givenProperties: PropertyObject, isActive = active) => {
@@ -114,7 +121,26 @@ export const MoreButton: React.FC<Props> = ({
         <TokenButtonContent type={type} active={active} onClick={handleTokenClick} token={token} />
       </ContextMenuTrigger>
       <ContextMenuContent sideOffset={5} collisionTolerance={30}>
-        {visibleProperties.map((property) => (
+        {visibleProperties.map((property) => (property.childProperties ? (
+          <ContextMenu>
+            <ContextMenuTriggerItem>
+              {property.label}
+              <RightSlot>
+                <ChevronRightIcon />
+              </RightSlot>
+            </ContextMenuTriggerItem>
+            <ContextMenuContent sideOffset={2} alignOffset={-5} collisionTolerance={30}>
+              {property.childProperties.map((childProperty) => (
+                <MoreButtonProperty
+                  key={childProperty.name}
+                  value={token.name}
+                  property={childProperty}
+                  onClick={handleClick}
+                />
+              ))}
+            </ContextMenuContent>
+          </ContextMenu>
+        ) : (
           <MoreButtonProperty
             key={property.name}
             value={token.name}
@@ -122,7 +148,7 @@ export const MoreButton: React.FC<Props> = ({
             onClick={handleClick}
             disabled={property.disabled}
           />
-        ))}
+        )))}
         <ContextMenu>
           <ContextMenuTriggerItem>
             Documentation Tokens
diff --git a/src/app/components/OnboardingExplainer.tsx b/src/app/components/OnboardingExplainer.tsx
new file mode 100644
index 000000000..aca05cc67
--- /dev/null
+++ b/src/app/components/OnboardingExplainer.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { InfoCircledIcon, Cross1Icon } from '@radix-ui/react-icons';
+import { styled } from '@/stitches.config';
+import Box from './Box';
+import Heading from './Heading';
+import Stack from './Stack';
+import IconButton from './IconButton';
+
+const StyledInfoIconButton = styled(InfoCircledIcon, {
+  color: '$fgAccent',
+});
+
+const StyledTextPlan = styled('p', {
+  fontWeight: '$normal',
+  color: '$text',
+  fontSize: '$xsmall',
+});
+
+const StyledReadMoreLink = styled('a', {
+  color: '$fgAccent',
+  fontSize: '$xsmall',
+});
+
+type Props = {
+  data: {
+    title: string,
+    text: string,
+    url: string,
+  };
+  closeOnboarding: () => void;
+};
+
+export default function OnboardingExplainer({ data, closeOnboarding }: Props) {
+  return (
+    <Box css={data.title === 'Sets' ? {
+      display: 'flex', flexDirection: 'column', gap: '$2', padding: '$4', borderTop: '1px solid $borderMuted', borderBottom: '1px solid $borderMuted',
+    } : {
+      display: 'flex', flexDirection: 'column', gap: '$2', padding: '$4', border: '1px solid $borderMuted',
+    }}
+    >
+      <Stack direction="row" gap={2} justify="between">
+        <Stack direction="row" justify="between" gap={2} align="center">
+          <StyledInfoIconButton />
+          <Heading size="small">{data.title}</Heading>
+        </Stack>
+        <IconButton dataCy="closeButton" onClick={closeOnboarding} icon={<Cross1Icon />} />
+      </Stack>
+      <StyledTextPlan>
+        {data.text}
+      </StyledTextPlan>
+      <StyledReadMoreLink href={data.url} target="_blank" rel="noreferrer">
+        Read more
+      </StyledReadMoreLink>
+    </Box>
+  );
+}
diff --git a/src/app/components/OnboardingFlow.test.tsx b/src/app/components/OnboardingFlow.test.tsx
new file mode 100644
index 000000000..d7a56576e
--- /dev/null
+++ b/src/app/components/OnboardingFlow.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import OnboardingFlow from './OnboardingFlow';
+import { render, resetStore, createMockStore } from '../../../tests/config/setupTest';
+
+describe('Settings Component', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  it('renders correctly', async () => {
+    const mockStore = createMockStore({
+      uiState: {
+        lastOpened: 0,
+      },
+    });
+
+    const result = render(
+      <Provider store={mockStore}>
+        <OnboardingFlow />
+      </Provider>,
+    );
+    expect(result.getByText('Welcome!')).toBeInTheDocument();
+  });
+});
diff --git a/src/app/components/PresetProvider/DefaultPreset.tsx b/src/app/components/PresetProvider/DefaultPreset.tsx
index 26fbb5fc6..b5ec7b8c4 100644
--- a/src/app/components/PresetProvider/DefaultPreset.tsx
+++ b/src/app/components/PresetProvider/DefaultPreset.tsx
@@ -25,7 +25,7 @@ export default function DefaultPreset({ onCancel }: Props) {
         <Heading size="small">
           Override your current tokens by applying a preset.
         </Heading>
-        <Text>The preset contains a wide variety of tokens and some token sets to give you an idea of what you can do.</Text>
+        <Text>The preset contains a wide variety of tokens and some token sets to give you an idea of what you can do. Warning: This will override your tokens!</Text>
       </Stack>
       <Stack direction="row" gap={2} justify="end">
         <Button variant="secondary" onClick={onCancel}>
diff --git a/src/app/components/PushDialog.tsx b/src/app/components/PushDialog.tsx
index e3a379dc7..87f85ea8b 100644
--- a/src/app/components/PushDialog.tsx
+++ b/src/app/components/PushDialog.tsx
@@ -17,7 +17,7 @@ import { isGitProvider } from '@/utils/is';
 import Textarea from './Textarea';
 import { useShortcut } from '@/hooks/useShortcut';
 
-function ConfirmDialog() {
+function PushDialog() {
   const { onConfirm, onCancel, showPushDialog } = usePushDialog();
   const localApiState = useSelector(localApiStateSelector);
   const [commitMessage, setCommitMessage] = React.useState('');
@@ -179,4 +179,4 @@ function ConfirmDialog() {
     }
   }
 }
-export default ConfirmDialog;
+export default PushDialog;
diff --git a/src/app/components/Settings/Settings.test.tsx b/src/app/components/Settings/Settings.test.tsx
index 34c4b9095..6d0ee649c 100644
--- a/src/app/components/Settings/Settings.test.tsx
+++ b/src/app/components/Settings/Settings.test.tsx
@@ -39,4 +39,29 @@ describe('Settings Component', () => {
 
     expect(store.getState().settings.prefixStylesWithThemeName).toBe(true);
   });
+
+  it('show onboarding explainer syncproviders', () => {
+    store.dispatch.uiState.setOnboardingExplainerSyncProviders(true);
+
+    const result = render(<Settings />);
+
+    expect(result.findByText('Set up where tokens should be stored')).not.toBeUndefined();
+  });
+
+  it('hide onboarding explainer syncproviders', async () => {
+    store.dispatch.uiState.setOnboardingExplainerSyncProviders(true);
+    const result = render(<Settings />);
+
+    fireEvent.click(result.getByTestId('closeButton'));
+
+    expect(result.queryByText('Set up where tokens should be stored')).toBeNull();
+  });
+
+  it('reset onboarding explainers', async () => {
+    const result = render(<Settings />);
+
+    fireEvent.click(result.getByTestId('reset-onboarding'));
+
+    expect(result.queryByText('Set up where tokens should be stored')).not.toBeNull();
+  });
 });
diff --git a/src/app/components/Settings/Settings.tsx b/src/app/components/Settings/Settings.tsx
index 5b9faac2d..1f7e114ef 100644
--- a/src/app/components/Settings/Settings.tsx
+++ b/src/app/components/Settings/Settings.tsx
@@ -3,20 +3,29 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import type { CheckedState } from '@radix-ui/react-checkbox';
 import SyncSettings from '../SyncSettings';
+import Button from '../Button';
 import Checkbox from '../Checkbox';
 import Heading from '../Heading';
 import { Dispatch } from '../../store';
 import Label from '../Label';
-import { ignoreFirstPartForStylesSelector, prefixStylesWithThemeNameSelector } from '@/selectors';
+import { ignoreFirstPartForStylesSelector, prefixStylesWithThemeNameSelector, uiStateSelector } from '@/selectors';
 import Stack from '../Stack';
 import Box from '../Box';
 import AddLicenseKey from '../AddLicenseKey/AddLicenseKey';
 import { Divider } from '../Divider';
 import { track } from '@/utils/analytics';
+import OnboardingExplainer from '../OnboardingExplainer';
 
 function Settings() {
+  const onboardingData = {
+    title: 'Set up where tokens should be stored',
+    text: 'Connect your tokens to an external source of truth that you can push and pull to. This allows you to use tokens across files.',
+    url: 'https://docs.figmatokens.com/sync/sync?ref=onboarding_explainer_syncproviders',
+  };
+
   const ignoreFirstPartForStyles = useSelector(ignoreFirstPartForStylesSelector);
   const prefixStylesWithThemeName = useSelector(prefixStylesWithThemeNameSelector);
+  const uiState = useSelector(uiStateSelector);
   const dispatch = useDispatch<Dispatch>();
 
   const handleIgnoreChange = React.useCallback(
@@ -36,15 +45,31 @@ function Settings() {
     [dispatch.settings],
   );
 
+  const closeOnboarding = React.useCallback(() => {
+    dispatch.uiState.setOnboardingExplainerSyncProviders(false);
+  }, [dispatch]);
+
+  const handleResetButton = React.useCallback(() => {
+    dispatch.uiState.setOnboardingExplainerSets(true);
+    dispatch.uiState.setOnboardingExplainerInspect(true);
+    dispatch.uiState.setOnboardingExplainerSyncProviders(true);
+    dispatch.uiState.setLastOpened(0);
+  }, [dispatch]);
+
   return (
     <Box className="content scroll-container">
       <Stack direction="column" gap={4} css={{ padding: '$3 0' }}>
         <AddLicenseKey />
         <Divider />
+        {uiState.onboardingExplainerSyncProviders && (
+          <Stack direction="column" gap={2} css={{ padding: '$4' }}>
+            <OnboardingExplainer data={onboardingData} closeOnboarding={closeOnboarding} />
+          </Stack>
+        )}
         <SyncSettings />
         <Divider />
         <Stack direction="column" gap={3} css={{ padding: '0 $4' }}>
-          <Heading size="small">Styles</Heading>
+          <Heading size="small">Settings</Heading>
           <Stack direction="row" gap={2} align="center">
             <Checkbox
               id="ignoreFirstPartForStyles"
@@ -63,6 +88,9 @@ function Settings() {
             />
             <Label htmlFor="prefixStylesWithThemeName">Prefix styles with active theme name</Label>
           </Stack>
+          <Box>
+            <Button variant="secondary" size="small" id="reset-onboarding" onClick={handleResetButton}>Reset onboarding</Button>
+          </Box>
         </Stack>
       </Stack>
     </Box>
diff --git a/src/app/components/StorageItem.test.tsx b/src/app/components/StorageItem.test.tsx
index 42e7a9a40..42c815865 100644
--- a/src/app/components/StorageItem.test.tsx
+++ b/src/app/components/StorageItem.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
+import userEvent from '@testing-library/user-event';
 import { render } from '../../../tests/config/setupTest';
 import StorageItem from './StorageItem';
 
@@ -10,11 +12,63 @@ const gitProvider = {
 };
 const onEdit = () => {};
 
+const mockConfirm = jest.fn();
+const mockRestoreStoredProvider = jest.fn();
+const mockDeleteProvider = jest.fn();
+
+jest.mock('../hooks/useConfirm', () => ({
+  __esModule: true,
+  default: () => ({
+    confirm: mockConfirm,
+  }),
+}));
+
+jest.mock('../store/remoteTokens', () => ({
+  __esModule: true,
+  default: () => ({
+    restoreStoredProvider: mockRestoreStoredProvider,
+    deleteProvider: mockDeleteProvider,
+  }),
+}));
+
 describe('StorageItem', () => {
-  it('should render storageItem', () => {
-    const { getByText } = render(<StorageItem item={gitProvider} onEdit={onEdit} />);
-    expect(getByText('Edit')).toBeInTheDocument();
-    expect(getByText('Apply')).toBeInTheDocument();
-    expect(getByText('Delete local credentials')).toBeInTheDocument();
+  it('should render storageItem', async () => {
+    const result = render(
+      <StorageItem item={gitProvider} onEdit={onEdit} />,
+    );
+    expect(result.queryByText('Apply')).toBeInTheDocument();
+  });
+
+  it('should be able delete storageItem', async () => {
+    mockConfirm.mockImplementationOnce(() => (
+      Promise.resolve(true)
+    ));
+    const result = render(
+      <StorageItem item={gitProvider} onEdit={onEdit} />,
+    );
+    await act(async () => {
+      const trigger = await result.findByTestId('storage-item-tools-dropdown');
+      trigger.focus();
+      await userEvent.keyboard('[Enter]');
+    });
+    await act(async () => {
+      const deleteButton = await result.getByText('Delete');
+      deleteButton?.focus();
+      await userEvent.keyboard('[Enter]');
+    });
+    expect(mockDeleteProvider).toBeCalledTimes(1);
+  });
+
+  it('should be able restore storageItem', async () => {
+    mockRestoreStoredProvider.mockImplementationOnce(() => (
+      Promise.resolve({
+        status: 'success',
+      })
+    ));
+    const result = render(
+      <StorageItem item={gitProvider} onEdit={onEdit} />,
+    );
+    await result.queryByText('Apply')?.click();
+    expect(mockRestoreStoredProvider).toBeCalledTimes(1);
   });
 });
diff --git a/src/app/components/StorageItem.tsx b/src/app/components/StorageItem.tsx
index 5decaf63e..d4433b45c 100644
--- a/src/app/components/StorageItem.tsx
+++ b/src/app/components/StorageItem.tsx
@@ -1,6 +1,6 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { DotsVerticalIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import isSameCredentials from '@/utils/isSameCredentials';
 import Button from './Button';
 import useRemoteTokens from '../store/remoteTokens';
@@ -10,6 +10,15 @@ import type { StorageTypeCredentials } from '@/types/StorageType';
 import { isGitProvider } from '@/utils/is';
 import Box from './Box';
 import useConfirm from '../hooks/useConfirm';
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+} from './DropdownMenu';
+import { getProviderIcon } from '@/utils/getProviderIcon';
+import Stack from './Stack';
+import Badge from './Badge';
 
 type Props = {
   item: StorageTypeCredentials;
@@ -17,28 +26,35 @@ type Props = {
 };
 
 const StorageItem = ({ item, onEdit }: Props) => {
+  const [hasErrored, setHasErrored] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState<string>();
   const storageType = useSelector(storageTypeSelector);
   const { provider, id, name } = item;
-
   const branch = isGitProvider(item) ? item.branch : null;
-
   const { restoreStoredProvider, deleteProvider } = useRemoteTokens();
   const { confirm } = useConfirm();
 
   const askUserIfDelete = React.useCallback(async () => {
     const shouldDelete = await confirm({
-      text: 'Do you really want to delete this sync setting?',
+      text: 'Do you really want to delete this?',
     });
     return shouldDelete;
   }, [confirm]);
 
   const isActive = React.useCallback(() => isSameCredentials(item, storageType), [item, storageType]);
+
   const handleDelete = React.useCallback(async () => {
     if (await askUserIfDelete()) deleteProvider(item);
   }, [deleteProvider, item, askUserIfDelete]);
 
-  const handleRestore = React.useCallback(() => {
-    restoreStoredProvider(item);
+  const handleRestore = React.useCallback(async () => {
+    const response = await restoreStoredProvider(item);
+    if (response.status === 'success') {
+      setHasErrored(false);
+    } else {
+      setHasErrored(true);
+      setErrorMessage(response?.errorMessage);
+    }
   }, [item, restoreStoredProvider]);
 
   return (
@@ -47,39 +63,68 @@ const StorageItem = ({ item, onEdit }: Props) => {
       key={`${provider}-${id}`}
       active={isActive()}
     >
-      <Box css={{
-        alignItems: 'flex-start', flexDirection: 'column', flexGrow: '1', display: 'flex', overflow: 'hidden',
-      }}
-      >
-        <Box css={{ fontSize: '$small', fontWeight: '$bold' }}>{name}</Box>
-        <Box css={{
-          whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', opacity: '0.75', fontSize: '$xsmall', maxWidth: '100%',
+      <Stack
+        direction="column"
+        gap={1}
+        css={{
+          flexGrow: '1', overflow: 'hidden',
         }}
+      >
+        <Stack
+          direction="row"
+          gap={3}
+          css={{
+            flexGrow: '1', overflow: 'hidden', maxWidth: 'stretch',
+          }}
         >
-          {id}
-          {' '}
-          {branch && ` (${branch})`}
-        </Box>
-        <button
-          type="button"
-          className="inline-flex text-left text-red-600 underline text-xxs"
-          onClick={handleDelete}
-        >
-          Delete local credentials
-        </button>
-      </Box>
-      <div className="flex items-center space-x-2 flex-nowrap">
-        {onEdit && (
-          <Button id="button-storageitem-edit" variant="secondary" onClick={onEdit}>
-            Edit
-          </Button>
+          <Box css={{ color: '$fgDefault' }}>
+            { getProviderIcon(provider) }
+          </Box>
+          <Stack direction="column" gap={0} css={{ overflow: 'hidden' }}>
+            <Box css={{
+              textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontSize: '$small', fontWeight: '$bold',
+            }}
+            >
+              {name}
+            </Box>
+            <Box css={{
+              whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', opacity: '0.75', fontSize: '$xsmall', maxWidth: '100%',
+            }}
+            >
+              {id}
+              {' '}
+              {branch && ` (${branch})`}
+            </Box>
+          </Stack>
+        </Stack>
+        {hasErrored && isActive() && (
+          <Box
+            css={{
+              display: 'flex', flexDirection: 'row', color: '$fgDanger', gap: '$3', marginTop: '$3',
+            }}
+            data-testid="error-message"
+          >
+            <ExclamationTriangleIcon />
+            {errorMessage}
+          </Box>
         )}
-        {!isActive() && (
-          <Button id="button-storageitem-apply" variant="secondary" onClick={handleRestore}>
+      </Stack>
+      <Box css={{ marginRight: '$3' }}>
+        {isActive() ? <Badge text="Active" /> : (
+          <Button id="button-storage-item-apply" variant="secondary" onClick={handleRestore}>
             Apply
           </Button>
         )}
-      </div>
+      </Box>
+      <DropdownMenu>
+        <DropdownMenuTrigger css={{ padding: '$2', borderRadius: '$button', background: 'none' }} data-testid="storage-item-tools-dropdown">
+          <DotsVerticalIcon />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem textValue="Edit" onSelect={onEdit}>Edit</DropdownMenuItem>
+          <DropdownMenuItem textValue="Delete" onSelect={handleDelete}>Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </StyledStorageItem>
   );
 };
diff --git a/src/app/components/StorageItemForm.tsx b/src/app/components/StorageItemForm.tsx
index 521b5e18e..11e1e4be2 100644
--- a/src/app/components/StorageItemForm.tsx
+++ b/src/app/components/StorageItemForm.tsx
@@ -3,21 +3,23 @@ import GitForm from './StorageItemForm/GitForm';
 import ADOForm from './StorageItemForm/ADOForm';
 import JSONBinForm from './StorageItemForm/JSONBinForm';
 import URLForm from './StorageItemForm/URLForm';
+import GenericVersionedForm from './StorageItemForm/GenericVersioned';
 import BitbucketForm from './StorageItemForm/BitbucketForm';
 
 import { useFlags } from './LaunchDarkly';
-
+import { ChangeEventHandler } from './StorageItemForm/types';
 import { StorageTypeFormValues } from '@/types/StorageType';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 
 type Props = {
   values: StorageTypeFormValues<true>;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onChange: ChangeEventHandler;
   onCancel: () => void;
   onSubmit: (values: StorageTypeFormValues<false>) => void;
   isNew?: boolean;
   hasErrored?: boolean;
   errorMessage?: string;
+
 };
 
 export default function StorageItemForm({
@@ -75,6 +77,18 @@ export default function StorageItemForm({
         />
       );
     }
+    case StorageProviderType.GENERIC_VERSIONED_STORAGE: {
+      return (
+        <GenericVersionedForm
+          onChange={onChange}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+          values={values}
+          hasErrored={hasErrored}
+          errorMessage={errorMessage}
+        />
+      );
+    }
     case StorageProviderType.JSONBIN: {
       return (
         <JSONBinForm
diff --git a/src/app/components/StorageItemForm/ADOForm.tsx b/src/app/components/StorageItemForm/ADOForm.tsx
index c183d437b..18ef3c450 100644
--- a/src/app/components/StorageItemForm/ADOForm.tsx
+++ b/src/app/components/StorageItemForm/ADOForm.tsx
@@ -7,11 +7,12 @@ import Button from '../Button';
 import Input from '../Input';
 import Stack from '../Stack';
 import { generateId } from '@/utils/generateId';
+import { ChangeEventHandler } from './types';
 
 type ValidatedFormValues = Extract<StorageTypeFormValues<false>, { provider: StorageProviderType.ADO; }>;
 type Props = {
   values: Extract<StorageTypeFormValues<true>, { provider: StorageProviderType.ADO; }>;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onChange: ChangeEventHandler;
   onCancel: () => void;
   onSubmit: (values: ValidatedFormValues) => void;
   hasErrored?: boolean;
@@ -50,6 +51,7 @@ export default function ADOForm({
     <form onSubmit={handleSubmit}>
       <Stack direction="column" gap={4}>
         <Input
+          autofocus
           full
           label="Organization Url"
           value={values.baseUrl}
@@ -108,12 +110,12 @@ export default function ADOForm({
           name="name"
         />
         <Stack direction="row" gap={4}>
-          <Button variant="secondary" size="large" onClick={onCancel}>
+          <Button variant="secondary" onClick={onCancel}>
             Cancel
           </Button>
 
           <Button variant="primary" type="submit" disabled={!values.secret && !values.name}>
-            Save
+            Save credentials
           </Button>
         </Stack>
         {hasErrored && (
diff --git a/src/app/components/StorageItemForm/BitbucketForm.tsx b/src/app/components/StorageItemForm/BitbucketForm.tsx
index fe510928a..968f2f5dc 100644
--- a/src/app/components/StorageItemForm/BitbucketForm.tsx
+++ b/src/app/components/StorageItemForm/BitbucketForm.tsx
@@ -7,11 +7,12 @@ import Button from '../Button';
 import Input from '../Input';
 import Stack from '../Stack';
 import { generateId } from '@/utils/generateId';
+import { ChangeEventHandler } from './types';
 
 type ValidatedFormValues = Extract<StorageTypeFormValues<false>, { provider: StorageProviderType.BITBUCKET }>;
 type Props = {
   values: Extract<StorageTypeFormValues<true>, { provider: StorageProviderType.BITBUCKET }>;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onChange: ChangeEventHandler;
   onSubmit: (values: ValidatedFormValues) => void;
   onCancel: () => void;
   hasErrored?: boolean;
diff --git a/src/app/components/StorageItemForm/GenericVersioned.tsx b/src/app/components/StorageItemForm/GenericVersioned.tsx
new file mode 100644
index 000000000..6d8f38c94
--- /dev/null
+++ b/src/app/components/StorageItemForm/GenericVersioned.tsx
@@ -0,0 +1,213 @@
+import React, { useCallback, useMemo } from 'react';
+import zod from 'zod';
+import { TriangleDownIcon } from '@radix-ui/react-icons';
+import { StorageTypeFormValues, GenericVersionedStorageFlow } from '@/types/StorageType';
+import XIcon from '@/icons/x.svg';
+import Button from '../Button';
+import { StyledButton } from '../Button/StyledButton';
+import Input from '../Input';
+import Box from '../Box';
+import Stack from '../Stack';
+import {
+  DropdownMenu, DropdownMenuRadioGroup, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioItem,
+} from '../DropdownMenu';
+import Text from '../Text';
+import { StorageProviderType } from '@/constants/StorageProviderType';
+import { generateId } from '@/utils/generateId';
+import { ChangeEventHandler } from './types';
+import Heading from '../Heading';
+import Label from '../Label';
+
+type ValidatedFormValues = Extract<StorageTypeFormValues<false>, { provider: StorageProviderType.GENERIC_VERSIONED_STORAGE; }>;
+type Props = {
+  values: Extract<StorageTypeFormValues<true>, { provider: StorageProviderType.GENERIC_VERSIONED_STORAGE; }>
+  onChange: ChangeEventHandler;
+  onCancel: () => void;
+  onSubmit: (values: ValidatedFormValues) => void;
+  hasErrored?: boolean;
+  errorMessage?: string;
+};
+
+const zodSchema = zod.object({
+  provider: zod.string(),
+  id: zod.string(),
+  name: zod.string(),
+  flow: zod.string(),
+  additionalHeaders: zod.array(zod.object({
+    name: zod.string(),
+    value: zod.string().default(''),
+  })),
+  internalId: zod.string().optional(),
+});
+
+export default function GenericVersionedForm({
+  onChange, onSubmit, onCancel, values, hasErrored, errorMessage,
+}: Props) {
+  const handleSubmit = React.useCallback((event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const validationResult = zodSchema.safeParse({ additionalHeaders: [], ...values });
+    if (validationResult.success) {
+      const formFields = {
+        ...validationResult.data,
+        provider: StorageProviderType.GENERIC_VERSIONED_STORAGE,
+        internalId: validationResult.data.internalId || generateId(24),
+      } as ValidatedFormValues;
+      onSubmit(formFields);
+    } else {
+      console.log(validationResult, values);
+    }
+  }, [values, onSubmit]);
+
+  const handleValueChange = useCallback((flow: string) => onChange({
+    target: {
+      name: 'flow',
+      value: flow as GenericVersionedStorageFlow,
+    },
+  }), [onChange]);
+
+  const flow = useMemo(() => {
+    // If the form was created initially, default to Read write flow
+    if (typeof values.flow === 'undefined') {
+      const defaultFlow = GenericVersionedStorageFlow.READ_WRITE;
+      handleValueChange(defaultFlow);
+      return defaultFlow;
+    }
+    return values.flow;
+  }, [handleValueChange, values.flow]);
+
+  // Always leave headers at the end
+  const headers = useMemo(() => [...(values.additionalHeaders || []), { name: '', value: '' }], [values.additionalHeaders]);
+
+  const headerChange = useCallback((changedHeaders) => {
+    onChange({
+      target: {
+        name: 'additionalHeaders',
+        value: changedHeaders,
+      },
+    });
+  }, [onChange]);
+  const onHeaderChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    // Get the name of the target
+    const key = e.target.name;
+    const { value } = e.target;
+
+    const index = Number(e.target.dataset.index);
+
+    // Attempt to access the header at that value
+    const sampleHeader = headers[index];
+
+    // Create a new header. Don't mutate the existing header
+    const newHeader = {
+      ...sampleHeader,
+      [key]: value,
+    };
+
+    headers[index] = newHeader;
+
+    const newHeaders = headers.filter((x) => x.name.length);
+    headerChange(newHeaders);
+  }, [headerChange, headers]);
+
+  const handleClose = useCallback((e) => {
+    const index = Number(e.target.dataset.index);
+
+    const removedHeaders = [...headers];
+    removedHeaders.splice(index, 1);
+    const newHeaders = removedHeaders.filter((x) => x.name.length);
+    headerChange(newHeaders);
+  }, [headers, headerChange]);
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Stack direction="column" gap={4}>
+        <Input full label="Name" value={values.name} onChange={onChange} type="text" name="name" required />
+        <Input
+          full
+          label="URL"
+          value={values.id}
+          onChange={onChange}
+          type="text"
+          name="id"
+          required
+        />
+        <DropdownMenu>
+          <Stack direction="column" gap={0}>
+            <Label htmlFor="flow-dropdown">Flow type</Label>
+            <DropdownMenuTrigger id="flow-dropdown" bordered data-cy="flow-dropdown" data-testid="flow-dropdown">
+              <Text size="small">{flow}</Text>
+              <TriangleDownIcon />
+            </DropdownMenuTrigger>
+          </Stack>
+          <DropdownMenuContent
+            side="bottom"
+            css={{ minWidth: '100%' }}
+          >
+            <DropdownMenuRadioGroup onValueChange={handleValueChange}>
+              <DropdownMenuRadioItem value={GenericVersionedStorageFlow.READ_ONLY}>
+                <Text>
+                  {GenericVersionedStorageFlow.READ_ONLY}
+                </Text>
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value={GenericVersionedStorageFlow.READ_WRITE}>
+                <Text>
+                  {GenericVersionedStorageFlow.READ_WRITE}
+                </Text>
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value={GenericVersionedStorageFlow.READ_WRITE_CREATE}>
+                <Text>
+                  {GenericVersionedStorageFlow.READ_WRITE_CREATE}
+                </Text>
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Stack direction="column" gap={4}>
+          <Heading>Additional Headers</Heading>
+          {headers.map((x, i) => (
+            <Box css={{ display: 'flex', gap: '1em' }}>
+              <Input
+                label="Name"
+                value={x?.name}
+                onChange={onHeaderChange}
+                type="text"
+                name="name"
+                data-index={i}
+              />
+              <Input
+                label="Value"
+                value={x.value}
+                disabled={!x.name}
+                onChange={onHeaderChange}
+                type="text"
+                name="value"
+                data-index={i}
+              />
+              <StyledButton
+                onClick={handleClose}
+                data-index={i}
+                size="small"
+                variant="ghost"
+              >
+                <XIcon />
+              </StyledButton>
+            </Box>
+          ))}
+        </Stack>
+        <Stack direction="row" gap={4}>
+          <Button variant="secondary" size="large" onClick={onCancel}>
+            Cancel
+          </Button>
+
+          <Button variant="primary" type="submit" disabled={!values.id}>
+            Save
+          </Button>
+        </Stack>
+        {hasErrored && (
+          <div className="bg-red-200 text-red-700 rounded p-4 text-xs font-bold" data-cy="provider-modal-error">
+            {errorMessage}
+          </div>
+        )}
+      </Stack>
+    </form>
+  );
+}
diff --git a/src/app/components/StorageItemForm/GitForm.tsx b/src/app/components/StorageItemForm/GitForm.tsx
index 170cda669..288928b04 100644
--- a/src/app/components/StorageItemForm/GitForm.tsx
+++ b/src/app/components/StorageItemForm/GitForm.tsx
@@ -7,11 +7,12 @@ import Button from '../Button';
 import Input from '../Input';
 import Stack from '../Stack';
 import { generateId } from '@/utils/generateId';
+import { ChangeEventHandler } from './types';
 
 type ValidatedFormValues = Extract<StorageTypeFormValues<false>, { provider: StorageProviderType.GITHUB | StorageProviderType.GITLAB }>;
 type Props = {
   values: Extract<StorageTypeFormValues<true>, { provider: StorageProviderType.GITHUB | StorageProviderType.GITLAB }>;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onChange: ChangeEventHandler;
   onSubmit: (values: ValidatedFormValues) => void;
   onCancel: () => void;
   hasErrored?: boolean;
@@ -51,7 +52,7 @@ export default function GitForm({
   return (
     <form onSubmit={handleSubmit}>
       <Stack direction="column" gap={4}>
-        <Input full label="Name" value={values.name} onChange={onChange} type="text" name="name" required />
+        <Input autofocus full label="Name" value={values.name} onChange={onChange} type="text" name="name" required />
         <Box css={{ position: 'relative' }}>
           <Input
             full
@@ -102,12 +103,12 @@ export default function GitForm({
           name="baseUrl"
         />
         <Stack direction="row" gap={4}>
-          <Button variant="secondary" size="large" onClick={onCancel}>
+          <Button variant="secondary" onClick={onCancel}>
             Cancel
           </Button>
 
           <Button variant="primary" type="submit" disabled={!values.secret && !values.name}>
-            Save
+            Save credentials
           </Button>
         </Stack>
         {hasErrored && (
diff --git a/src/app/components/StorageItemForm/JSONBinForm.tsx b/src/app/components/StorageItemForm/JSONBinForm.tsx
index b51709103..06ac835bc 100644
--- a/src/app/components/StorageItemForm/JSONBinForm.tsx
+++ b/src/app/components/StorageItemForm/JSONBinForm.tsx
@@ -6,11 +6,12 @@ import Input from '../Input';
 import Stack from '../Stack';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import { generateId } from '@/utils/generateId';
+import { ChangeEventHandler } from './types';
 
 type ValidatedFormValues = Extract<StorageTypeFormValues<false>, { provider: StorageProviderType.JSONBIN; }>;
 type Props = {
   values: Extract<StorageTypeFormValues<true>, { provider: StorageProviderType.JSONBIN; }>
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onChange: ChangeEventHandler;
   onCancel: () => void;
   onSubmit: (values: ValidatedFormValues) => void;
   isNew?: boolean;
@@ -45,7 +46,7 @@ export default function JSONBinForm({
   return (
     <form onSubmit={handleSubmit}>
       <Stack direction="column" gap={4}>
-        <Input full label="Name" value={values.name} onChange={onChange} type="text" name="name" required />
+        <Input autofocus full label="Name" value={values.name} onChange={onChange} type="text" name="name" required />
         <Input
           full
           label="Secret"
@@ -65,12 +66,12 @@ export default function JSONBinForm({
           required={!isNew}
         />
         <Stack direction="row" gap={4}>
-          <Button variant="secondary" size="large" onClick={onCancel}>
+          <Button variant="secondary" onClick={onCancel}>
             Cancel
           </Button>
 
           <Button variant="primary" type="submit" disabled={!values.secret && !values.name}>
-            Save
+            Save credentials
           </Button>
         </Stack>
         {hasErrored && (
diff --git a/src/app/components/StorageItemForm/URLForm.tsx b/src/app/components/StorageItemForm/URLForm.tsx
index 8f15a373d..2b1a6189b 100644
--- a/src/app/components/StorageItemForm/URLForm.tsx
+++ b/src/app/components/StorageItemForm/URLForm.tsx
@@ -6,11 +6,12 @@ import Button from '../Button';
 import Input from '../Input';
 import Stack from '../Stack';
 import { generateId } from '@/utils/generateId';
+import { ChangeEventHandler } from './types';
 
 type ValidatedFormValues = Extract<StorageTypeFormValues<false>, { provider: StorageProviderType.URL; }>;
 type Props = {
   values: Extract<StorageTypeFormValues<true>, { provider: StorageProviderType.URL; }>;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onChange:ChangeEventHandler;
   onCancel: () => void;
   onSubmit: (values: ValidatedFormValues) => void;
   hasErrored?: boolean;
@@ -44,16 +45,16 @@ export default function URLForm({
   return (
     <form onSubmit={handleSubmit}>
       <Stack direction="column" gap={4}>
-        <Input full label="Name" value={values.name} onChange={onChange} type="text" name="name" required />
+        <Input autofocus full label="Name" value={values.name} onChange={onChange} type="text" name="name" required />
         <Input full label="Headers (optional)" value={values.secret} onChange={onChange} type="text" name="secret" />
         <Input full label="URL" value={values.id} onChange={onChange} type="text" name="id" required />
         <Stack direction="row" gap={4}>
-          <Button variant="secondary" size="large" onClick={onCancel}>
+          <Button variant="secondary" onClick={onCancel}>
             Cancel
           </Button>
 
           <Button variant="primary" type="submit" disabled={!values.secret && !values.name}>
-            Save
+            Save credentials
           </Button>
         </Stack>
         {hasErrored && (
diff --git a/src/app/components/StorageItemForm/types.ts b/src/app/components/StorageItemForm/types.ts
new file mode 100644
index 000000000..dec4f66bd
--- /dev/null
+++ b/src/app/components/StorageItemForm/types.ts
@@ -0,0 +1,2 @@
+export type Eventlike = { target: { name: string, value: unknown } };
+export type ChangeEventHandler = (e:Eventlike) => void;
diff --git a/src/app/components/StorageProviderSelector.tsx b/src/app/components/StorageProviderSelector.tsx
deleted file mode 100644
index df48d56ce..000000000
--- a/src/app/components/StorageProviderSelector.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { styled } from '@/stitches.config';
-
-const StyledButton = styled('button', {
-  fontWeight: '$bold',
-  fontSize: '$xsmall',
-  display: 'flex',
-  padding: '$3 $4',
-  borderRadius: '$default',
-  border: '1px solid transparent',
-  '&:focus': {
-    outline: 'none',
-  },
-  variants: {
-    isActive: {
-      true: {
-        backgroundColor: '$bgAccent',
-        borderColor: '$interaction',
-      },
-      false: {
-        backgroundColor: '$bgSubtle',
-        borderColor: '$bgSubtle',
-      },
-    },
-    isStored: {
-      true: {
-        backgroundColor: '$bgAccent',
-        borderColor: '$interactionSubtle',
-      },
-    },
-  },
-});
-
-type Props = {
-  text: string;
-  onClick: () => void;
-  isActive: boolean;
-  isStored: boolean;
-  id: string;
-};
-
-export default function StorageItem({
-  text, onClick, isActive, isStored, id,
-}: Props) {
-  return (
-    <StyledButton
-      data-cy={`provider-${id}`}
-      isActive={isActive}
-      isStored={isStored}
-      type="button"
-      onClick={onClick}
-    >
-      {text}
-    </StyledButton>
-  );
-}
diff --git a/src/app/components/StyledBrokenReferenceIndicator.tsx b/src/app/components/StyledBrokenReferenceIndicator.tsx
new file mode 100644
index 000000000..74dd4a416
--- /dev/null
+++ b/src/app/components/StyledBrokenReferenceIndicator.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import IconBrokenLink from '@/icons/brokenlink.svg';
+import { styled } from '@/stitches.config';
+
+const StyledIndicator = styled('div', {
+  position: 'absolute',
+  top: '3px',
+  right: '3px',
+  borderRadius: '100%',
+  border: '1px solid $bgDefault',
+  background: '$dangerFg',
+  width: '6px',
+  height: '6px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export default function StyledBrokenReferenceIndicator() {
+  return (
+    <StyledIndicator>
+      <IconBrokenLink />
+    </StyledIndicator>
+  );
+}
diff --git a/src/app/components/StyledStorageItem.tsx b/src/app/components/StyledStorageItem.tsx
index 9d2a93e9d..2cbba581e 100644
--- a/src/app/components/StyledStorageItem.tsx
+++ b/src/app/components/StyledStorageItem.tsx
@@ -9,6 +9,7 @@ export const StyledStorageItem = styled('div', {
   flexDirection: 'row',
   justifyContent: 'space-between',
   borderRadius: '$card',
+  alignItems: 'center',
   variants: {
     active: {
       true: {
diff --git a/src/app/components/SyncSettings.test.tsx b/src/app/components/SyncSettings.test.tsx
index 921c9022c..a243298d4 100644
--- a/src/app/components/SyncSettings.test.tsx
+++ b/src/app/components/SyncSettings.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { act } from 'react-dom/test-utils';
+import userEvent from '@testing-library/user-event';
 import {
   createMockStore,
   render,
@@ -42,14 +43,9 @@ describe('ConfirmDialog', () => {
         <SyncSettings />
       </Provider>,
     );
-    expect(result.queryByText('Token Storage')).toBeInTheDocument();
+    expect(result.queryByText('Sync providers')).toBeInTheDocument();
     expect(result.queryByText('Local document')).toBeInTheDocument();
-    expect(result.queryByText('URL')).toBeInTheDocument();
-    expect(result.queryByText('JSONbin')).toBeInTheDocument();
-    expect(result.queryByText('GitHub')).toBeInTheDocument();
-    expect(result.queryByText('GitLab')).toBeInTheDocument();
-    expect(result.queryByText('ADO')).toBeInTheDocument();
-    expect(result.queryByText('Add new credentials')).toBeInTheDocument();
+    expect(result.queryByText('Add new')).toBeInTheDocument();
   });
 
   it('should return ConfirmLocalStorageModal when seleting local storage', async () => {
@@ -61,7 +57,7 @@ describe('ConfirmDialog', () => {
     );
 
     await act(async () => {
-      result.queryByText('Local document')?.click();
+      result.queryAllByText('Apply')[0]?.click();
     });
 
     expect(result.queryByText('Set to document storage?')).toBeInTheDocument();
@@ -76,7 +72,7 @@ describe('ConfirmDialog', () => {
     );
 
     await act(async () => {
-      result.queryByText('Local document')?.click();
+      result.queryAllByText('Apply')[0]?.click();
     });
 
     expect(result.queryByText('Set to document storage?')).toBeInTheDocument();
@@ -97,7 +93,7 @@ describe('ConfirmDialog', () => {
     );
 
     await act(async () => {
-      result.queryByText('Local document')?.click();
+      result.queryAllByText('Apply')[0]?.click();
     });
 
     await act(async () => {
@@ -121,7 +117,15 @@ describe('ConfirmDialog', () => {
     );
 
     await act(async () => {
-      result.queryByText('Edit')?.click();
+      const trigger = await result.findByTestId('storage-item-tools-dropdown');
+      trigger.focus();
+      await userEvent.keyboard('[Enter]');
+    });
+
+    await act(async () => {
+      const editButton = await result.queryByText('Edit');
+      editButton?.focus();
+      await userEvent.keyboard('[Enter]');
     });
 
     expect(result.queryByText('Edit credentials')).toBeInTheDocument();
@@ -136,15 +140,22 @@ describe('ConfirmDialog', () => {
     );
 
     await act(async () => {
-      result.queryByText('Add new credentials')?.click();
+      const trigger = await result.getByTestId('add-storage-item-dropdown');
+      trigger?.focus();
+      await userEvent.keyboard('[Enter]');
+    });
+
+    await act(async () => {
+      const githubButton = await result.getByTestId('add-GitHub-credential');
+      githubButton?.focus();
+      await userEvent.keyboard('[Enter]');
     });
 
-    expect(result.queryAllByText('Add new credentials')).toHaveLength(2);
     expect(result.queryByText('Personal Access Token')).toBeInTheDocument();
     expect(result.queryByText('Repository (owner/repo)')).toBeInTheDocument();
     expect(result.queryByText('Branch')).toBeInTheDocument();
     expect(result.queryByText('File Path (e.g. tokens.json) or Folder Path (e.g. tokens)')).toBeInTheDocument();
     expect(result.queryByText('baseUrl (optional)')).toBeInTheDocument();
-    expect(result.queryByText('Save')).toBeInTheDocument();
+    expect(result.queryByText('Save credentials')).toBeInTheDocument();
   });
 });
diff --git a/src/app/components/SyncSettings.tsx b/src/app/components/SyncSettings.tsx
index cec7ac19d..1ce54e160 100644
--- a/src/app/components/SyncSettings.tsx
+++ b/src/app/components/SyncSettings.tsx
@@ -2,11 +2,9 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { track } from '@/utils/analytics';
-import Button from './Button';
 import Heading from './Heading';
 import ConfirmLocalStorageModal from './modals/ConfirmLocalStorageModal';
 import StorageItem from './StorageItem';
-import ProviderSelector from './StorageProviderSelector';
 import EditStorageItemModal from './modals/EditStorageItemModal';
 import CreateStorageItemModal from './modals/CreateStorageItemModal';
 import useStorage from '../store/useStorage';
@@ -15,11 +13,47 @@ import { apiProvidersSelector, localApiStateSelector, storageTypeSelector } from
 import Stack from './Stack';
 import Box from './Box';
 import Text from './Text';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from './DropdownMenu';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import useRemoteTokens from '../store/remoteTokens';
 import { StorageTypeCredentials } from '@/types/StorageType';
+import IconToggleableDisclosure from './IconToggleableDisclosure';
+import LocalStorageItem from './LocalStorageItem';
+import { getProviderIcon } from '@/utils/getProviderIcon';
 import { useFlags } from './LaunchDarkly';
 
+const providers = [
+  {
+    text: 'URL',
+    type: StorageProviderType.URL,
+  },
+  {
+    text: 'JSONBIN',
+    type: StorageProviderType.JSONBIN,
+  },
+  {
+    text: 'GitHub',
+    type: StorageProviderType.GITHUB,
+  },
+  {
+    text: 'GitLab',
+    type: StorageProviderType.GITLAB,
+  },
+  {
+    text: 'Azure DevOps',
+    type: StorageProviderType.ADO,
+  },
+  {
+    text: 'Generic Versioned',
+    type: StorageProviderType.GENERIC_VERSIONED_STORAGE,
+  },
+];
+
 const SyncSettings = () => {
   const localApiState = useSelector(localApiStateSelector);
   const storageType = useSelector(storageTypeSelector);
@@ -28,7 +62,7 @@ const SyncSettings = () => {
 
   const { setStorageType } = useStorage();
   const { fetchBranches } = useRemoteTokens();
-  const { bitBucketSync } = useFlags();
+  const { genericVersionedAlpha } = useFlags();
 
   const [confirmModalVisible, showConfirmModal] = React.useState(false);
   const [editStorageItemModalVisible, setShowEditStorageModalVisible] = React.useState(Boolean(localApiState.new));
@@ -55,96 +89,25 @@ const SyncSettings = () => {
     [dispatch.uiState, setLocalBranches],
   );
 
+  const handleSetLocalStorage = React.useCallback(() => {
+    if (storageType?.provider !== StorageProviderType.LOCAL) {
+      showConfirmModal(true);
+    }
+  }, [storageType?.provider]);
+
+  const handleShowAddCredentials = React.useCallback((provider: StorageProviderType) => {
+    track('Add Credentials', { provider });
+    setShowCreateStorageModalVisible(true);
+  }, []);
+
   const handleProviderClick = React.useCallback(
     (provider: StorageProviderType) => () => {
       setStorageProvider(provider);
+      handleShowAddCredentials(provider);
     },
-    [],
+    [handleShowAddCredentials],
   );
 
-  const selectedRemoteProvider = React.useMemo(
-    () => [
-      StorageProviderType.JSONBIN,
-      StorageProviderType.GITHUB,
-      StorageProviderType.GITLAB,
-      StorageProviderType.ADO,
-      StorageProviderType.URL,
-      StorageProviderType.BITBUCKET,
-    ].includes(storageProvider as StorageProviderType),
-    [storageProvider],
-  );
-
-  const storedApiProviders = () => apiProviders.filter((item) => item.provider === storageProvider);
-
-  const storageProviderText = () => {
-    switch (storageProvider) {
-      case StorageProviderType.JSONBIN:
-        return (
-          <div>
-            Create an account at
-            {' '}
-            <a href="https://jsonbin.io/" target="_blank" rel="noreferrer" className="underline">
-              JSONbin.io
-            </a>
-            , copy the Secret Key into the field, and click on save. If you or your team already have a version stored,
-            add the secret and the corresponding ID.
-            {' '}
-            <a href="https://docs.tokens.studio/sync/jsonbin" target="_blank" rel="noreferrer" className="underline">
-              Read more on docs.tokens.studio
-            </a>
-          </div>
-        );
-      case StorageProviderType.GITHUB:
-        return (
-          <div>
-            Sync your tokens with a GitHub repository so your design decisions are up to date with code.
-            {' '}
-            <a href="https://docs.tokens.studio/sync/github" target="_blank" rel="noreferrer" className="underline">
-              Read the guide
-            </a>
-            .
-          </div>
-        );
-      case StorageProviderType.GITLAB:
-        return (
-          <div>
-            Sync your tokens with a Gitlab repository so your design decisions are up to date with code.
-            {' '}
-            <a href="https://docs.tokens.studio/sync/gitlab" target="_blank" rel="noreferrer" className="underline">
-              Read the guide
-            </a>
-            .
-          </div>
-        );
-      case StorageProviderType.BITBUCKET:
-        return bitBucketSync ? (
-          <div>
-            Sync your tokens with a Bitbucket repository so your design decisions are up to date with code.
-            {' '}
-            <a href="https://docs.tokens.studio/sync/bitbucket" target="_blank" rel="noreferrer" className="underline">
-              Read the guide
-            </a>
-            .
-          </div>
-        ) : null;
-      case StorageProviderType.ADO:
-        return (
-          <div>
-            Sync your tokens with a Azure DevOps repository so your design decisions are up to date with code.
-            {' '}
-            <a href="https://docs.tokens.studio/sync/ado" target="_blank" rel="noreferrer" className="underline">
-              Read the guide
-            </a>
-            .
-          </div>
-        );
-      case StorageProviderType.URL:
-        return <div>Sync with a JSON stored on an external URL. This mode only allows Read Only.</div>;
-      default:
-        return null;
-    }
-  };
-
   const handleSubmitLocalStorage = React.useCallback(() => {
     dispatch.uiState.setLocalApiState({ provider: StorageProviderType.LOCAL });
     setStorageProvider(StorageProviderType.LOCAL);
@@ -152,14 +115,9 @@ const SyncSettings = () => {
       provider: { provider: StorageProviderType.LOCAL },
       shouldSetInDocument: true,
     });
+    dispatch.tokenState.setEditProhibited(false);
     showConfirmModal(false);
-  }, [dispatch.uiState, setStorageType]);
-
-  const handleSetLocalStorage = React.useCallback(() => {
-    if (storageType?.provider !== StorageProviderType.LOCAL) {
-      showConfirmModal(true);
-    }
-  }, [storageType?.provider]);
+  }, [dispatch.tokenState, dispatch.uiState, setStorageType]);
 
   const handleHideStorageModal = React.useCallback(() => {
     setShowEditStorageModalVisible(false);
@@ -169,11 +127,6 @@ const SyncSettings = () => {
     setShowCreateStorageModalVisible(false);
   }, []);
 
-  const handleShowAddCredentials = React.useCallback(() => {
-    track('Add Credentials', { provider: storageProvider });
-    setShowCreateStorageModalVisible(true);
-  }, [localApiState.provider]);
-
   return (
     <Box css={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
       {confirmModalVisible && (
@@ -202,84 +155,41 @@ const SyncSettings = () => {
       <Box css={{ padding: '0 $4' }}>
         <Stack gap={4} direction="column" align="start">
           <Stack gap={3} direction="column">
-            <Heading size="small">Token Storage</Heading>
-            <Stack direction="row" gap={2}>
-              <ProviderSelector
-                isActive={storageProvider === StorageProviderType.LOCAL}
-                isStored={storageType?.provider === StorageProviderType.LOCAL}
-                onClick={handleSetLocalStorage}
-                text="Local document"
-                id={StorageProviderType.LOCAL}
-              />
-              <ProviderSelector
-                isActive={storageProvider === StorageProviderType.URL}
-                isStored={storageType?.provider === StorageProviderType.URL}
-                onClick={handleProviderClick(StorageProviderType.URL)}
-                text="URL"
-                id={StorageProviderType.URL}
-              />
-              <ProviderSelector
-                isActive={storageProvider === StorageProviderType.JSONBIN}
-                isStored={storageType?.provider === StorageProviderType.JSONBIN}
-                onClick={handleProviderClick(StorageProviderType.JSONBIN)}
-                text="JSONbin"
-                id={StorageProviderType.JSONBIN}
-              />
-              <ProviderSelector
-                isActive={storageProvider === StorageProviderType.GITHUB}
-                isStored={storageType?.provider === StorageProviderType.GITHUB}
-                onClick={handleProviderClick(StorageProviderType.GITHUB)}
-                text="GitHub"
-                id={StorageProviderType.GITHUB}
-              />
-              <ProviderSelector
-                isActive={storageProvider === StorageProviderType.GITLAB}
-                isStored={storageType?.provider === StorageProviderType.GITLAB}
-                onClick={handleProviderClick(StorageProviderType.GITLAB)}
-                text="GitLab"
-                id={StorageProviderType.GITLAB}
-              />
-              {bitBucketSync ? (
-                <ProviderSelector
-                  isActive={storageProvider === StorageProviderType.BITBUCKET}
-                  isStored={storageType?.provider === StorageProviderType.BITBUCKET}
-                  onClick={handleProviderClick(StorageProviderType.BITBUCKET)}
-                  text="Bitbucket"
-                  id={StorageProviderType.BITBUCKET}
+            <Heading size="small">Sync providers</Heading>
+          </Stack>
+          {apiProviders.length > 0 && (
+            <Stack direction="column" gap={2} width="full" align="start">
+              <LocalStorageItem onClick={handleSetLocalStorage} isActive={storageType.provider === StorageProviderType.LOCAL} />
+              {apiProviders.map((item) => (
+                <StorageItem
+                  key={item?.internalId || `${item.provider}-${item.id}`}
+                  onEdit={handleEditClick(item)}
+                  item={item}
                 />
-              ) : null}
-
-              <ProviderSelector
-                isActive={storageProvider === StorageProviderType.ADO}
-                isStored={storageType?.provider === StorageProviderType.ADO}
-                onClick={handleProviderClick(StorageProviderType.ADO)}
-                text="ADO"
-                id={StorageProviderType.ADO}
-              />
+              ))}
             </Stack>
-          </Stack>
-          {selectedRemoteProvider && (
-            <>
-              <Text muted size="xsmall">
-                {storageProviderText()}
-              </Text>
-              <Button id="button-add-new-credentials" variant="secondary" onClick={handleShowAddCredentials}>
-                Add new credentials
-              </Button>
-
-              {storedApiProviders().length > 0 && (
-                <Stack direction="column" gap={2} width="full" align="start">
-                  {storedApiProviders().map((item) => (
-                    <StorageItem
-                      key={item?.internalId || `${item.provider}-${item.id}-${item.secret}`}
-                      onEdit={handleEditClick(item)}
-                      item={item}
-                    />
-                  ))}
-                </Stack>
-              )}
-            </>
           )}
+          <DropdownMenu>
+            <DropdownMenuTrigger css={{ border: '1px solid $borderMuted' }} data-testid="add-storage-item-dropdown">
+              <Text size="small">Add new</Text>
+              <IconToggleableDisclosure />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              side="bottom"
+            >
+              {
+                  providers.map((provider) => {
+                    if (provider.type === StorageProviderType.GENERIC_VERSIONED_STORAGE && !genericVersionedAlpha) { return null; }
+                    return (
+                      <DropdownMenuItem key={provider.type} onSelect={handleProviderClick(provider.type)} css={{ display: 'flex', gap: '$3' }} data-testid={`add-${provider.text}-credential`}>
+                        <Box css={{ color: '$fgDefault' }}>{getProviderIcon(provider.type)}</Box>
+                        {provider.text}
+                      </DropdownMenuItem>
+                    );
+                  })
+                }
+            </DropdownMenuContent>
+          </DropdownMenu>
         </Stack>
       </Box>
     </Box>
diff --git a/src/app/components/TabButton/TabButton.tsx b/src/app/components/TabButton/TabButton.tsx
index 4650fbde6..a0ae57efa 100644
--- a/src/app/components/TabButton/TabButton.tsx
+++ b/src/app/components/TabButton/TabButton.tsx
@@ -24,7 +24,7 @@ const StyledButton = styled('button', {
   },
   '&:disabled': {
     pointerEvents: 'none',
-    opacity: 0.5,
+    color: '$textDisbled',
   },
   variants: {
     isActive: {
diff --git a/src/app/components/TokenGroup/TokenGroupHeading.tsx b/src/app/components/TokenGroup/TokenGroupHeading.tsx
index 37f409864..2ec6fe952 100644
--- a/src/app/components/TokenGroup/TokenGroupHeading.tsx
+++ b/src/app/components/TokenGroup/TokenGroupHeading.tsx
@@ -6,6 +6,7 @@ import {
 import Stack from '../Stack';
 import Button from '../Button';
 import Heading from '../Heading';
+import Text from '../Text';
 import Input from '../Input';
 import Modal from '../Modal';
 import useManageTokens from '../../store/useManageTokens';
@@ -40,8 +41,8 @@ export function TokenGroupHeading({
   const { remapTokensInGroup } = useTokens();
 
   React.useEffect(() => {
-    setNewTokenGroupName(`${path.split('.').pop()}${copyName}` || '');
-    setOldTokenGroupName(`${path.split('.').pop()}${copyName}` || '');
+    setNewTokenGroupName(`${path}${copyName}`);
+    setOldTokenGroupName(`${path}${copyName}`);
   }, [oldTokenGroupName, isTokenGroupDuplicated, copyName, path]);
 
   const handleDelete = React.useCallback(() => {
@@ -100,15 +101,15 @@ export function TokenGroupHeading({
             </Stack>
           </ContextMenuTrigger>
           <ContextMenuContent>
-            <ContextMenuItem disabled={editProhibited} onSelect={handleDelete}>
-              Delete
-            </ContextMenuItem>
             <ContextMenuItem disabled={editProhibited} onSelect={handleRename}>
               Rename
             </ContextMenuItem>
             <ContextMenuItem disabled={editProhibited} onSelect={handleDuplicate}>
               Duplicate
             </ContextMenuItem>
+            <ContextMenuItem disabled={editProhibited} onSelect={handleDelete}>
+              Delete
+            </ContextMenuItem>
           </ContextMenuContent>
         </ContextMenu>
       </StyledTokenGroupHeadingCollapsable>
@@ -118,30 +119,29 @@ export function TokenGroupHeading({
         close={handleSetNewTokenGroupNameFileClose}
         footer={(
           <form id="renameTokenGroup" onSubmit={handleRenameTokenGroupSubmit}>
-            <Stack direction="row" gap={4}>
-              <Button variant="secondary" size="large" onClick={handleSetNewTokenGroupNameFileClose}>
+            <Stack direction="row" justify="end" gap={4}>
+              <Button variant="secondary" onClick={handleSetNewTokenGroupNameFileClose}>
                 Cancel
               </Button>
-              <Button type="submit" variant="primary" size="large" disabled={oldTokenGroupName === newTokenGroupName}>
+              <Button type="submit" variant="primary" disabled={oldTokenGroupName === newTokenGroupName}>
                 Change
               </Button>
             </Stack>
           </form>
         )}
       >
-        <Stack direction="column" justify="center" gap={4} css={{ textAlign: 'center' }}>
-          <Heading size="small">Renaming only affects tokens of the same type</Heading>
-          <Stack direction="column" gap={4}>
-            <Input
-              form="renameTokenGroup"
-              full
-              onChange={handleNewTokenGroupNameChange}
-              type="text"
-              name="tokengroupname"
-              value={newTokenGroupName}
-              required
-            />
-          </Stack>
+        <Stack direction="column" gap={4}>
+          <Input
+            form="renameTokenGroup"
+            full
+            onChange={handleNewTokenGroupNameChange}
+            type="text"
+            name="tokengroupname"
+            value={newTokenGroupName}
+            autofocus
+            required
+          />
+          <Text muted>Renaming only affects tokens of the same type</Text>
         </Stack>
       </Modal>
       <StyledTokenGroupAddIcon
diff --git a/src/app/components/TokenSetSelector.test.tsx b/src/app/components/TokenSetSelector.test.tsx
new file mode 100644
index 000000000..1ccab2636
--- /dev/null
+++ b/src/app/components/TokenSetSelector.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import TokenSetSelector from './TokenSetSelector';
+import { render, fireEvent } from '../../../tests/config/setupTest';
+import { store } from '../store';
+
+describe('TokenSetSelector Component', () => {
+  it('show onboarding explainer sets', () => {
+    store.dispatch.uiState.setOnboardingExplainerSets('true');
+
+    const result = render(<TokenSetSelector />);
+
+    expect(result.findByText('Sets')).not.toBeUndefined();
+  });
+
+  it('hide onboarding explainer syncproviders', async () => {
+    store.dispatch.uiState.setOnboardingExplainerSets('true');
+    const result = render(<TokenSetSelector />);
+
+    fireEvent.click(result.getByTestId('closeButton'));
+
+    expect(result.queryByText('Sets')).toBeNull();
+  });
+});
diff --git a/src/app/components/TokenSetSelector.tsx b/src/app/components/TokenSetSelector.tsx
index d8aa00c89..89728382e 100644
--- a/src/app/components/TokenSetSelector.tsx
+++ b/src/app/components/TokenSetSelector.tsx
@@ -4,7 +4,6 @@ import { track } from '@/utils/analytics';
 import useConfirm from '../hooks/useConfirm';
 import { Dispatch } from '../store';
 import Button from './Button';
-import Heading from './Heading';
 import IconAdd from '@/icons/add.svg';
 import Input from './Input';
 import Modal from './Modal';
@@ -12,9 +11,10 @@ import TokenSetTree from './TokenSetTree';
 import Box from './Box';
 import { styled } from '@/stitches.config';
 import {
-  editProhibitedSelector, tokensSelector,
+  editProhibitedSelector, tokensSelector, uiStateSelector,
 } from '@/selectors';
 import Stack from './Stack';
+import OnboardingExplainer from './OnboardingExplainer';
 
 const StyledButton = styled('button', {
   flexShrink: 0,
@@ -32,9 +32,16 @@ const StyledButton = styled('button', {
   },
 });
 
-export default function TokenSetSelector({ saveScrollPositionSet } : { saveScrollPositionSet: (tokenSet: string) => void }) {
+export default function TokenSetSelector({ saveScrollPositionSet }: { saveScrollPositionSet: (tokenSet: string) => void }) {
+  const onboardingData = {
+    title: 'Sets',
+    text: 'Sets allow you to split your tokens up into multiple files.\n\nYou can activate different sets to control theming.',
+    url: 'https://docs.figmatokens.com/themes/token-sets?ref=onboarding_explainer_sets',
+  };
+
   const tokens = useSelector(tokensSelector);
   const editProhibited = useSelector(editProhibitedSelector);
+  const uiState = useSelector(uiStateSelector);
   const dispatch = useDispatch<Dispatch>();
   const { confirm } = useConfirm();
 
@@ -108,6 +115,10 @@ export default function TokenSetSelector({ saveScrollPositionSet } : { saveScrol
     dispatch.tokenState.setTokenSetOrder(values);
   }, [dispatch]);
 
+  const closeOnboarding = useCallback(() => {
+    dispatch.uiState.setOnboardingExplainerSets(false);
+  }, [dispatch]);
+
   const handleDelete = useCallback((set: string) => {
     handleDeleteTokenSet(set);
   }, [handleDeleteTokenSet]);
@@ -150,67 +161,67 @@ export default function TokenSetSelector({ saveScrollPositionSet } : { saveScrol
         saveScrollPositionSet={saveScrollPositionSet}
       />
       <Modal
+        title={`Rename ${tokenSetMarkedForChange}`}
         isOpen={showRenameTokenSetFields}
         close={handleCloseRenameModal}
       >
-        <Stack direction="column" justify="center" gap={4} css={{ textAlign: 'center' }}>
-          <Heading size="small">
-            Rename
-            {' '}
-            {tokenSetMarkedForChange}
-          </Heading>
-          <form onSubmit={handleRenameTokenSetSubmit}>
-            <Stack direction="column" gap={4}>
-              <Input
-                full
-                value={newTokenSetName}
-                onChange={handleChangeName}
-                type="text"
-                name="tokensetname"
-                required
-              />
-              <Stack direction="row" gap={4}>
-                <Button variant="secondary" size="large" onClick={handleCloseRenameModal}>
-                  Cancel
-                </Button>
-                <Button type="submit" variant="primary" size="large" disabled={tokenSetMarkedForChange === newTokenSetName}>
-                  Change
-                </Button>
-              </Stack>
+        <form onSubmit={handleRenameTokenSetSubmit}>
+          <Stack direction="column" gap={4}>
+            <Input
+              full
+              autofocus
+              value={newTokenSetName}
+              onChange={handleChangeName}
+              type="text"
+              name="tokensetname"
+              required
+            />
+            <Stack direction="row" gap={4}>
+              <Button variant="secondary" size="large" onClick={handleCloseRenameModal}>
+                Cancel
+              </Button>
+              <Button type="submit" variant="primary" size="large" disabled={tokenSetMarkedForChange === newTokenSetName}>
+                Change
+              </Button>
             </Stack>
-          </form>
-        </Stack>
+          </Stack>
+        </form>
       </Modal>
-      <Modal isOpen={showNewTokenSetFields} close={handleCloseNewTokenSetModal}>
-        <Stack direction="column" justify="center" gap={4} css={{ textAlign: 'center' }}>
-          <Heading size="small">New set</Heading>
-          <form onSubmit={handleNewTokenSetSubmit}>
-            <Stack direction="column" gap={4}>
-              <Input
-                full
-                value={newTokenSetName}
-                onChange={handleChangeName}
-                type="text"
-                name="tokensetname"
-                required
-                data-cy="token-set-input"
-              />
-              <Stack direction="row" gap={4}>
-                <Button variant="secondary" size="large" onClick={handleCloseNewTokenSetModal}>
-                  Cancel
-                </Button>
-                <Button data-cy="create-token-set" type="submit" variant="primary" size="large">
-                  Create
-                </Button>
-              </Stack>
+      <Modal
+        title="New set"
+        isOpen={showNewTokenSetFields}
+        close={handleCloseNewTokenSetModal}
+      >
+        <form onSubmit={handleNewTokenSetSubmit}>
+          <Stack direction="column" gap={4}>
+            <Input
+              full
+              value={newTokenSetName}
+              onChange={handleChangeName}
+              type="text"
+              name="tokensetname"
+              required
+              data-cy="token-set-input"
+              autofocus
+            />
+            <Stack direction="row" gap={4}>
+              <Button variant="secondary" size="large" onClick={handleCloseNewTokenSetModal}>
+                Cancel
+              </Button>
+              <Button data-cy="create-token-set" type="submit" variant="primary" size="large">
+                Create
+              </Button>
             </Stack>
-          </form>
-        </Stack>
+          </Stack>
+        </form>
       </Modal>
       <StyledButton data-cy="button-new-token-set" type="button" disabled={editProhibited} onClick={handleOpenNewTokenSetModal}>
         New set
         <IconAdd />
       </StyledButton>
+      {uiState.onboardingExplainerSets && (
+        <OnboardingExplainer data={onboardingData} closeOnboarding={closeOnboarding} />
+      )}
     </Box>
   );
 }
diff --git a/src/app/components/TokenTooltip/SingleBorderValueDisplay.tsx b/src/app/components/TokenTooltip/SingleBorderValueDisplay.tsx
new file mode 100644
index 000000000..ac799cae1
--- /dev/null
+++ b/src/app/components/TokenTooltip/SingleBorderValueDisplay.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { TokenBorderValue } from '@/types/values';
+import TooltipProperty from './TooltipProperty';
+import Stack from '../Stack';
+
+type Props = {
+  value: TokenBorderValue;
+  resolvedValue: TokenBorderValue;
+};
+
+export const SingleBorderValueDisplay: React.FC<Props> = ({ value, resolvedValue }) => (
+  <Stack direction="column" align="start" gap={1}>
+    <TooltipProperty label="Color" value={value.color} resolvedValue={resolvedValue?.color} />
+    <TooltipProperty label="Width" value={value.width} resolvedValue={resolvedValue?.width} />
+    <TooltipProperty label="Style" value={value.style} resolvedValue={resolvedValue?.style} />
+  </Stack>
+);
diff --git a/src/app/components/TokenTooltip/TokenTooltipContent.test.tsx b/src/app/components/TokenTooltip/TokenTooltipContent.test.tsx
index c268073af..d1f2b252e 100644
--- a/src/app/components/TokenTooltip/TokenTooltipContent.test.tsx
+++ b/src/app/components/TokenTooltip/TokenTooltipContent.test.tsx
@@ -123,7 +123,6 @@ const tokens: SingleToken[] = [
     },
     description: 'regular typography token',
   },
-
   {
     name: 'typography.headlines.default',
     type: TokenTypes.TYPOGRAPHY,
@@ -217,6 +216,21 @@ const tokens: SingleToken[] = [
     description: 'a broken reference',
     failedToResolve: true,
   },
+  {
+    name: 'border.regular',
+    type: TokenTypes.BORDER,
+    value: {
+      color: 'test-value-object-value',
+      width: '12px',
+      style: 'solid',
+    },
+    rawValue: {
+      color: 'test-value-object-value',
+      width: '12px',
+      style: 'solid',
+    },
+    description: 'border token',
+  },
 ];
 
 const shadowTokens = [
diff --git a/src/app/components/TokenTooltip/TokenTooltipContentValue.tsx b/src/app/components/TokenTooltip/TokenTooltipContentValue.tsx
index 3a760484c..3f571e13d 100644
--- a/src/app/components/TokenTooltip/TokenTooltipContentValue.tsx
+++ b/src/app/components/TokenTooltip/TokenTooltipContentValue.tsx
@@ -5,13 +5,16 @@ import useTokens from '../../store/useTokens';
 import { SingleToken } from '@/types/tokens';
 import { SingleShadowValueDisplay } from './SingleShadowValueDisplay';
 import { TokensContext } from '@/context';
-import { isSingleBoxShadowToken, isSingleTypographyToken, isSingleCompositionToken } from '@/utils/is';
+import {
+  isSingleBoxShadowToken, isSingleTypographyToken, isSingleCompositionToken, isSingleBorderToken,
+} from '@/utils/is';
 import { SingleTypographyValueDisplay } from './SingleTypographyValueDisplay';
-import { TokenBoxshadowValue, TokenTypographyValue } from '@/types/values';
+import { TokenBorderValue, TokenBoxshadowValue, TokenTypographyValue } from '@/types/values';
 import { SingleCompositionValueDisplay } from './SingleCompositionValueDisplay';
 import TooltipProperty from './TooltipProperty';
 import Stack from '../Stack';
 import { CompositionTokenValue } from '@/types/CompositionTokenProperty';
+import { SingleBorderValueDisplay } from './SingleBorderValueDisplay';
 
 type Props = {
   token: SingleToken;
@@ -86,7 +89,7 @@ export const TokenTooltipContentValue: React.FC<Props> = ({ token }) => {
           />
         ) : null}
         <SingleShadowValueDisplay
-        // @TODO strengthen type checking here
+          // @TODO strengthen type checking here
           value={token.value as TokenBoxshadowValue}
           resolvedValue={resolvedValue as TokenBoxshadowValue}
         />
@@ -94,6 +97,15 @@ export const TokenTooltipContentValue: React.FC<Props> = ({ token }) => {
     );
   }
 
+  if (isSingleBorderToken(token)) {
+    return (
+      <SingleBorderValueDisplay
+        value={token.value as TokenBorderValue}
+        resolvedValue={resolvedValue as TokenBorderValue}
+      />
+    );
+  }
+
   if (typeof token.value !== 'string' && typeof token.value !== 'number') {
     return <TooltipProperty value={JSON.stringify(token.value, null, 2)} />;
   }
diff --git a/src/app/components/createTokenObj.test.tsx b/src/app/components/createTokenObj.test.tsx
index 148c17123..a2ab80640 100644
--- a/src/app/components/createTokenObj.test.tsx
+++ b/src/app/components/createTokenObj.test.tsx
@@ -170,6 +170,10 @@ describe('createTokenObj', () => {
         input: 'composition',
         output: 'composition',
       },
+      {
+        input: 'border',
+        output: 'border',
+      },
       {
         input: 'asset',
         output: 'asset',
diff --git a/src/app/components/createTokenObj.tsx b/src/app/components/createTokenObj.tsx
index 1d8acd9a2..4c0525be2 100644
--- a/src/app/components/createTokenObj.tsx
+++ b/src/app/components/createTokenObj.tsx
@@ -43,6 +43,8 @@ export function transformName(name: string): TokenTypes {
       return TokenTypes.PARAGRAPH_SPACING;
     case 'composition':
       return TokenTypes.COMPOSITION;
+    case 'border':
+      return TokenTypes.BORDER;
     case 'asset':
       return TokenTypes.ASSET;
     default:
diff --git a/src/app/components/modals/BulkRemapModal.tsx b/src/app/components/modals/BulkRemapModal.tsx
index 07d5c41e6..b1405e2c5 100644
--- a/src/app/components/modals/BulkRemapModal.tsx
+++ b/src/app/components/modals/BulkRemapModal.tsx
@@ -35,7 +35,7 @@ export default function BulkRemapModal({ isOpen, onClose }: Props) {
   }, []);
 
   return (
-    <Modal large showClose isOpen={isOpen} close={handleClose} title="Choose a new token for">
+    <Modal large showClose isOpen={isOpen} close={handleClose} title="Bulk remap">
       <form
         onSubmit={onConfirm}
       >
diff --git a/src/app/components/modals/ConfirmLocalStorageModal.tsx b/src/app/components/modals/ConfirmLocalStorageModal.tsx
index da0e05424..85fbb5865 100644
--- a/src/app/components/modals/ConfirmLocalStorageModal.tsx
+++ b/src/app/components/modals/ConfirmLocalStorageModal.tsx
@@ -17,7 +17,7 @@ export default function ConfirmLocalStorageModal({ isOpen, onToggle, onSuccess }
 
   return (
     <Modal isOpen={isOpen} close={handleClose}>
-      <Stack direction="column" justify="center" gap={4} css={{ textAlign: 'center' }}>
+      <Stack direction="column" justify="center" gap={4}>
         <Stack direction="column" gap={2}>
           <Heading>Set to document storage?</Heading>
           <p className="text-xs">You can always go back to remote storage.</p>
diff --git a/src/app/components/modals/CreateStorageItemModal.tsx b/src/app/components/modals/CreateStorageItemModal.tsx
index 0b61cc10b..fafd7a590 100644
--- a/src/app/components/modals/CreateStorageItemModal.tsx
+++ b/src/app/components/modals/CreateStorageItemModal.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import Modal from '../Modal';
-import Heading from '../Heading';
 import StorageItemForm from '../StorageItemForm';
 import useRemoteTokens from '../../store/remoteTokens';
-import Stack from '../Stack';
 import { StorageTypeFormValues } from '@/types/StorageType';
 import { StorageProviderType } from '@/constants/StorageProviderType';
+import { Eventlike } from '../StorageItemForm/types';
 
 type Props = {
   isOpen: boolean
@@ -36,7 +35,7 @@ export default function CreateStorageItemModal({
     }
   }, [addNewProviderItem, onSuccess]);
 
-  const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = React.useCallback((e: Eventlike) => {
     setFormFields({ ...formFields, [e.target.name]: e.target.value });
   }, [formFields]);
 
@@ -45,19 +44,16 @@ export default function CreateStorageItemModal({
   }, [handleCreateNewClick]);
 
   return (
-    <Modal large isOpen={isOpen} close={onClose}>
-      <Stack direction="column" gap={4}>
-        <Heading>Add new credentials</Heading>
-        <StorageItemForm
-          isNew
-          onChange={handleChange}
-          onSubmit={handleSubmit}
-          onCancel={onClose}
-          values={formFields}
-          hasErrored={hasErrored}
-          errorMessage={errorMessage}
-        />
-      </Stack>
+    <Modal title="Add new credentials" large isOpen={isOpen} close={onClose}>
+      <StorageItemForm
+        isNew
+        onChange={handleChange}
+        onSubmit={handleSubmit}
+        onCancel={onClose}
+        values={formFields}
+        hasErrored={hasErrored}
+        errorMessage={errorMessage}
+      />
     </Modal>
   );
 }
diff --git a/src/app/components/modals/EditStorageItemModal.tsx b/src/app/components/modals/EditStorageItemModal.tsx
index ded022324..0d97e0a8f 100644
--- a/src/app/components/modals/EditStorageItemModal.tsx
+++ b/src/app/components/modals/EditStorageItemModal.tsx
@@ -4,6 +4,7 @@ import StorageItemForm from '../StorageItemForm';
 import useRemoteTokens from '../../store/remoteTokens';
 import Stack from '../Stack';
 import { StorageTypeFormValues } from '@/types/StorageType';
+import { Eventlike } from '../StorageItemForm/types';
 
 type Props = {
   isOpen: boolean;
@@ -20,7 +21,7 @@ export default function EditStorageItemModal({
   const { addNewProviderItem } = useRemoteTokens();
   const [errorMessage, setErrorMessage] = React.useState<string>();
 
-  const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = React.useCallback((e: Eventlike) => {
     setFormFields({ ...formFields, [e.target.name]: e.target.value });
   }, [formFields]);
 
diff --git a/src/app/hooks/usePropertiesForType.test.ts b/src/app/hooks/usePropertiesForType.test.ts
index 72149f7b1..076e39dc4 100644
--- a/src/app/hooks/usePropertiesForType.test.ts
+++ b/src/app/hooks/usePropertiesForType.test.ts
@@ -18,7 +18,7 @@ describe('usePropertiesForTokenType', () => {
         },
         {
           label: 'Border',
-          name: Properties.border,
+          name: Properties.borderColor,
         },
       ],
     },
@@ -207,6 +207,97 @@ describe('usePropertiesForTokenType', () => {
         },
       ],
     },
+    {
+      type: 'dimension',
+      properties: [
+        {
+          name: Properties.dimension,
+          invisible: true,
+        },
+        {
+          label: 'Spacing',
+          name: Properties.spacing,
+          childProperties: [
+            { label: 'Gap', name: Properties.itemSpacing, icon: 'Gap' },
+            {
+              label: 'All',
+              icon: 'Spacing',
+              name: Properties.spacing,
+              clear: [
+                Properties.horizontalPadding,
+                Properties.verticalPadding,
+                Properties.itemSpacing,
+                Properties.paddingLeft,
+                Properties.paddingRight,
+                Properties.paddingTop,
+                Properties.paddingBottom,
+              ],
+            },
+            { label: 'Top', name: Properties.paddingTop },
+            { label: 'Right', name: Properties.paddingRight },
+            { label: 'Bottom', name: Properties.paddingBottom },
+            { label: 'Left', name: Properties.paddingLeft },
+          ],
+        },
+        {
+          label: 'Sizing',
+          name: Properties.sizing,
+          childProperties: [
+            {
+              label: 'All',
+              name: Properties.sizing,
+              clear: [Properties.width, Properties.height],
+            },
+            { label: 'Width', name: Properties.width },
+            { label: 'Height', name: Properties.height },
+          ],
+        },
+        {
+          label: 'Border radius',
+          name: Properties.borderRadius,
+          childProperties: [
+            {
+              label: 'All',
+              name: Properties.borderRadius,
+              clear: [
+                Properties.borderRadiusTopLeft,
+                Properties.borderRadiusTopRight,
+                Properties.borderRadiusBottomRight,
+                Properties.borderRadiusBottomLeft,
+              ],
+            },
+            { label: 'Top Left', name: Properties.borderRadiusTopLeft },
+            { label: 'Top Right', name: Properties.borderRadiusTopRight },
+            { label: 'Bottom Right', name: Properties.borderRadiusBottomRight },
+            { label: 'Bottom Left', name: Properties.borderRadiusBottomLeft },
+          ],
+        },
+        {
+          label: 'Border width',
+          name: Properties.borderWidth,
+          childProperties: [
+            {
+              label: 'All',
+              name: Properties.borderWidth,
+              clear: [
+                Properties.borderWidthTop,
+                Properties.borderWidthRight,
+                Properties.borderWidthBottom,
+                Properties.borderWidthLeft,
+              ],
+            },
+            { label: 'Top', name: Properties.borderWidthTop },
+            { label: 'Right', name: Properties.borderWidthRight },
+            { label: 'Bottom', name: Properties.borderWidthBottom },
+            { label: 'Left', name: Properties.borderWidthLeft },
+          ],
+        },
+        {
+          label: 'Background blur',
+          name: Properties.backgroundBlur,
+        },
+      ],
+    },
   ];
   it('should return properties', () => {
     testData.forEach((data) => {
@@ -260,7 +351,10 @@ describe('usePropertiesForTokenType', () => {
         ],
       },
       {
-        label: 'Gap', name: Properties.itemSpacing, icon: 'Gap', disabled: true,
+        label: 'Gap',
+        name: Properties.itemSpacing,
+        icon: 'Gap',
+        disabled: true,
       },
       { label: 'Top', name: Properties.paddingTop, disabled: true },
       { label: 'Right', name: Properties.paddingRight, disabled: true },
diff --git a/src/app/hooks/usePropertiesForType.ts b/src/app/hooks/usePropertiesForType.ts
index 14430b2dd..b80a4187e 100644
--- a/src/app/hooks/usePropertiesForType.ts
+++ b/src/app/hooks/usePropertiesForType.ts
@@ -66,7 +66,10 @@ export function usePropertiesForTokenType(type: TokenTypes, value?: SingleToken[
               ],
             },
             {
-              label: 'Gap', name: Properties.itemSpacing, icon: 'Gap', disabled,
+              label: 'Gap',
+              name: Properties.itemSpacing,
+              icon: 'Gap',
+              disabled,
             },
             { label: 'Top', name: Properties.paddingTop, disabled },
             { label: 'Right', name: Properties.paddingRight, disabled },
@@ -115,10 +118,101 @@ export function usePropertiesForTokenType(type: TokenTypes, value?: SingleToken[
           },
           {
             label: 'Border',
-            name: Properties.border,
+            name: Properties.borderColor,
           },
         );
         break;
+      case TokenTypes.DIMENSION:
+        properties.push(
+          {
+            name: Properties.dimension,
+            invisible: true,
+          },
+          {
+            label: 'Spacing',
+            name: Properties.spacing,
+            childProperties: [
+              { label: 'Gap', name: Properties.itemSpacing, icon: 'Gap' },
+              {
+                label: 'All',
+                icon: 'Spacing',
+                name: Properties.spacing,
+                clear: [
+                  Properties.horizontalPadding,
+                  Properties.verticalPadding,
+                  Properties.itemSpacing,
+                  Properties.paddingLeft,
+                  Properties.paddingRight,
+                  Properties.paddingTop,
+                  Properties.paddingBottom,
+                ],
+              },
+              { label: 'Top', name: Properties.paddingTop },
+              { label: 'Right', name: Properties.paddingRight },
+              { label: 'Bottom', name: Properties.paddingBottom },
+              { label: 'Left', name: Properties.paddingLeft },
+            ],
+          },
+          {
+            label: 'Sizing',
+            name: Properties.sizing,
+            childProperties: [
+              {
+                label: 'All',
+                name: Properties.sizing,
+                clear: [Properties.width, Properties.height],
+              },
+              { label: 'Width', name: Properties.width },
+              { label: 'Height', name: Properties.height },
+            ],
+          },
+          {
+            label: 'Border radius',
+            name: Properties.borderRadius,
+            childProperties: [
+              {
+                label: 'All',
+                name: Properties.borderRadius,
+                clear: [
+                  Properties.borderRadiusTopLeft,
+                  Properties.borderRadiusTopRight,
+                  Properties.borderRadiusBottomRight,
+                  Properties.borderRadiusBottomLeft,
+                ],
+              },
+              { label: 'Top Left', name: Properties.borderRadiusTopLeft },
+              { label: 'Top Right', name: Properties.borderRadiusTopRight },
+              { label: 'Bottom Right', name: Properties.borderRadiusBottomRight },
+              { label: 'Bottom Left', name: Properties.borderRadiusBottomLeft },
+            ],
+          },
+          {
+            label: 'Border width',
+            name: Properties.borderWidth,
+            childProperties: [
+              {
+                label: 'All',
+                name: Properties.borderWidth,
+                clear: [
+                  Properties.borderWidthTop,
+                  Properties.borderWidthRight,
+                  Properties.borderWidthBottom,
+                  Properties.borderWidthLeft,
+                ],
+              },
+              { label: 'Top', name: Properties.borderWidthTop },
+              { label: 'Right', name: Properties.borderWidthRight },
+              { label: 'Bottom', name: Properties.borderWidthBottom },
+              { label: 'Left', name: Properties.borderWidthLeft },
+            ],
+          },
+          {
+            label: 'Background blur',
+            name: Properties.backgroundBlur,
+          },
+        );
+        break;
+
       default:
         if (isPropertyType(type)) {
           properties.push({
diff --git a/src/app/hooks/useReferenceTokenType.ts b/src/app/hooks/useReferenceTokenType.ts
new file mode 100644
index 000000000..70236b5d8
--- /dev/null
+++ b/src/app/hooks/useReferenceTokenType.ts
@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { TokenTypes } from '@/constants/TokenTypes';
+
+export function useReferenceTokenType(type: TokenTypes): TokenTypes[] {
+  return useMemo(() => {
+    switch (type) {
+      case TokenTypes.SIZING:
+        return [TokenTypes.SIZING, TokenTypes.DIMENSION];
+      case TokenTypes.SPACING:
+        return [TokenTypes.SPACING, TokenTypes.DIMENSION];
+      case TokenTypes.BORDER_RADIUS:
+        return [TokenTypes.BORDER_RADIUS, TokenTypes.DIMENSION];
+      case TokenTypes.BORDER_WIDTH:
+        return [TokenTypes.BORDER_WIDTH, TokenTypes.DIMENSION];
+      default:
+        return [type];
+    }
+  }, [type]);
+}
diff --git a/src/app/hooks/useTypeForProperty.test.ts b/src/app/hooks/useTypeForProperty.test.ts
index aa79f163d..bb55f6d89 100644
--- a/src/app/hooks/useTypeForProperty.test.ts
+++ b/src/app/hooks/useTypeForProperty.test.ts
@@ -52,7 +52,7 @@ describe('useTypeForProperty', () => {
       output: 'fill',
     },
     {
-      input: 'border',
+      input: 'borderColor',
       output: 'fill',
     },
     {
diff --git a/src/app/hooks/useTypeForProperty.ts b/src/app/hooks/useTypeForProperty.ts
index 4be1ff35e..967c967e0 100644
--- a/src/app/hooks/useTypeForProperty.ts
+++ b/src/app/hooks/useTypeForProperty.ts
@@ -20,7 +20,7 @@ export function useTypeForProperty(property: string): string {
       case Properties.borderRadiusBottomLeft:
       case Properties.borderRadiusBottomRight:
         return Properties.borderRadius;
-      case Properties.border:
+      case Properties.borderColor:
         return Properties.fill;
       case Properties.borderWidthTop:
       case Properties.borderWidthLeft:
diff --git a/src/app/store/models/effects/tokenState/setDefaultTokens.ts b/src/app/store/models/effects/tokenState/setDefaultTokens.ts
index e786e8926..cb59fcde1 100644
--- a/src/app/store/models/effects/tokenState/setDefaultTokens.ts
+++ b/src/app/store/models/effects/tokenState/setDefaultTokens.ts
@@ -22,7 +22,7 @@ export function setDefaultTokens(dispatch: RematchDispatch<RootModel>) {
       values: defaultTokens.values,
       themes: defaultTokens.themes,
       activeTheme: defaultTokens.activeTheme,
-      usedTokenSet: { global: TokenSetStatus.SOURCE, light: TokenSetStatus.ENABLED, theme: TokenSetStatus.ENABLED },
+      usedTokenSet: { core: TokenSetStatus.SOURCE, light: TokenSetStatus.ENABLED, theme: TokenSetStatus.ENABLED },
     });
   };
 }
diff --git a/src/app/store/models/reducers/__tests__/setSwapStyles.test.ts b/src/app/store/models/reducers/__tests__/setSwapStyles.test.ts
new file mode 100644
index 000000000..761d8831b
--- /dev/null
+++ b/src/app/store/models/reducers/__tests__/setSwapStyles.test.ts
@@ -0,0 +1,10 @@
+import { createMockStore } from '../../../../../../tests/config/setupTest';
+
+describe('Can set swap styles', () => {
+  it('should work', () => {
+    const mockStore = createMockStore({});
+    expect(mockStore.getState().settings.shouldSwapStyles).toEqual(false);
+    mockStore.dispatch.settings.setShouldSwapStyles(true);
+    expect(mockStore.getState().settings.shouldSwapStyles).toEqual(true);
+  });
+});
diff --git a/src/app/store/models/reducers/settingsState/index.ts b/src/app/store/models/reducers/settingsState/index.ts
index 4f00c40c6..c18cedf38 100644
--- a/src/app/store/models/reducers/settingsState/index.ts
+++ b/src/app/store/models/reducers/settingsState/index.ts
@@ -1 +1,2 @@
 export * from './setPrefixStylesWithThemeName';
+export * from './setShouldSwapStyles';
diff --git a/src/app/store/models/reducers/settingsState/setShouldSwapStyles.tsx b/src/app/store/models/reducers/settingsState/setShouldSwapStyles.tsx
new file mode 100644
index 000000000..b43a40798
--- /dev/null
+++ b/src/app/store/models/reducers/settingsState/setShouldSwapStyles.tsx
@@ -0,0 +1,8 @@
+import type { SettingsState } from '../../settings';
+
+export function setShouldSwapStyles(state: SettingsState, payload: boolean) {
+  return {
+    ...state,
+    shouldSwapStyles: payload,
+  };
+}
diff --git a/src/app/store/models/reducers/tokenState/saveTheme.ts b/src/app/store/models/reducers/tokenState/saveTheme.ts
index 0b5153348..1076fed86 100644
--- a/src/app/store/models/reducers/tokenState/saveTheme.ts
+++ b/src/app/store/models/reducers/tokenState/saveTheme.ts
@@ -2,6 +2,7 @@ import hash from 'object-hash';
 import { ThemeObject } from '@/types';
 import type { TokenState } from '../../tokenState';
 import { setActiveTheme } from './setActiveTheme';
+import { TokenSetStatus } from '@/constants/TokenSetStatus';
 
 type Payload = Omit<ThemeObject, 'id' | '$figmaStyleReferences'> & {
   id?: string
@@ -12,6 +13,10 @@ export function saveTheme(state: TokenState, data: Payload): TokenState {
   const themeId = data.id || hash([Date.now(), data]);
   const isActiveTheme = state.activeTheme === themeId;
   const themeObject = state.themes.find((theme) => theme.id === themeId);
+  const selectedTokenSets = Object.fromEntries(
+    Object.entries(data.selectedTokenSets)
+      .filter(([, status]) => (status !== TokenSetStatus.DISABLED)),
+  );
 
   const nextState: TokenState = {
     ...state,
@@ -22,6 +27,7 @@ export function saveTheme(state: TokenState, data: Payload): TokenState {
         ...data,
         id: themeId,
         $figmaStyleReferences: themeObject?.$figmaStyleReferences ?? {},
+        selectedTokenSets,
       },
     ],
   };
diff --git a/src/app/store/models/reducers/tokenState/setTokenData.ts b/src/app/store/models/reducers/tokenState/setTokenData.ts
index 53c9c3554..2fd32e986 100644
--- a/src/app/store/models/reducers/tokenState/setTokenData.ts
+++ b/src/app/store/models/reducers/tokenState/setTokenData.ts
@@ -20,8 +20,8 @@ export function setTokenData(state: TokenState, payload: SetTokenDataPayload): T
       ...theme,
       selectedTokenSets: Object.fromEntries(
         Object.entries(theme.selectedTokenSets)
-          .filter(([setName]) => (
-            allAvailableTokenSets.includes(setName)
+          .filter(([setName, status]) => (
+            allAvailableTokenSets.includes(setName) && status !== TokenSetStatus.DISABLED
           )),
       ),
     })),
diff --git a/src/app/store/models/settings.tsx b/src/app/store/models/settings.tsx
index 6f9c17522..d6ab80977 100644
--- a/src/app/store/models/settings.tsx
+++ b/src/app/store/models/settings.tsx
@@ -26,6 +26,7 @@ export interface SettingsState {
   ignoreFirstPartForStyles?: boolean;
   prefixStylesWithThemeName?: boolean;
   inspectDeep: boolean;
+  shouldSwapStyles: boolean;
 }
 
 const setUI = (state: SettingsState) => {
@@ -50,6 +51,7 @@ export const settings = createModel<RootModel>()({
     ignoreFirstPartForStyles: false,
     prefixStylesWithThemeName: false,
     inspectDeep: false,
+    shouldSwapStyles: false,
   } as SettingsState,
   reducers: {
     ...settingsStateReducers,
@@ -117,6 +119,12 @@ export const settings = createModel<RootModel>()({
         updateStyles: payload,
       };
     },
+    setShouldSwapStyles(state, payload: boolean) {
+      return {
+        ...state,
+        shouldSwapStyles: payload,
+      };
+    },
     setTokenType(state, payload: TokenModeType) {
       return {
         ...state,
@@ -148,6 +156,9 @@ export const settings = createModel<RootModel>()({
     setUpdateStyles: (payload, rootState) => {
       setUI(rootState.settings);
     },
+    setShouldSwapStyles: (payload, rootState) => {
+      setUI(rootState.settings);
+    },
     setUpdateMode: (payload, rootState) => {
       setUI(rootState.settings);
     },
diff --git a/src/app/store/models/tokenState.tsx b/src/app/store/models/tokenState.tsx
index 74bd0d1c2..6e416849c 100644
--- a/src/app/store/models/tokenState.tsx
+++ b/src/app/store/models/tokenState.tsx
@@ -113,13 +113,14 @@ export const tokenState = createModel<RootModel>()({
         return state;
       }
 
+      const indexOf = Object.keys(state.tokens).indexOf(name);
       const newName = `${name}_Copy`;
       return updateTokenSetsInState(
         state,
         null,
         [newName, state.tokens[name].map((token) => (
           extend(true, {}, token) as typeof token
-        ))],
+        )), indexOf + 1],
       );
     },
     deleteTokenSet: (state, name: string) => updateTokenSetsInState(
@@ -299,13 +300,13 @@ export const tokenState = createModel<RootModel>()({
 
     renameTokenGroup: (state, data: RenameTokenGroupPayload) => {
       const {
-        path, oldName, newName, type, parent,
+        oldName, newName, type, parent,
       } = data;
       const tokensInParent = state.tokens[parent] ?? [];
       const renamedTokensInParent = tokensInParent.map((token) => {
-        if (token.name.startsWith(`${path}${oldName}.`) && token.type === type) {
+        if (token.name.startsWith(`${oldName}.`) && token.type === type) {
           const { name, ...rest } = token;
-          const newTokenName = name.replace(`${path}${oldName}`, `${path}${newName}`);
+          const newTokenName = name.replace(`${oldName}`, `${newName}`);
           return {
             ...rest,
             name: newTokenName,
@@ -464,11 +465,11 @@ export const tokenState = createModel<RootModel>()({
     },
     renameTokenGroup(data: RenameTokenGroupPayload, rootState) {
       const {
-        path, oldName, newName, type, parent,
+        oldName, newName, type, parent,
       } = data;
       const tokensInParent = rootState.tokenState.tokens[parent] ?? [];
-      tokensInParent.filter((token) => token.name.startsWith(`${path}${newName}.`) && token.type === type).forEach((updatedToken) => {
-        dispatch.tokenState.updateAliases({ oldName: updatedToken.name.replace(`${path}${newName}`, `${path}${oldName}`), newName: updatedToken.name });
+      tokensInParent.filter((token) => token.name.startsWith(`${newName}.`) && token.type === type).forEach((updatedToken) => {
+        dispatch.tokenState.updateAliases({ oldName: updatedToken.name.replace(`${newName}`, `${oldName}`), newName: updatedToken.name });
       });
     },
     updateCheckForChanges() {
@@ -493,6 +494,8 @@ export const tokenState = createModel<RootModel>()({
           storageType: rootState.uiState.storageType,
           shouldUpdateRemote: params.updateRemote && rootState.settings.updateRemote,
           checkForChanges: rootState.tokenState.checkForChanges,
+          shouldSwapStyles: rootState.settings.shouldSwapStyles,
+          dispatch,
         });
       } catch (e) {
         console.error('Error updating document', e);
diff --git a/src/app/store/models/uiState.tsx b/src/app/store/models/uiState.tsx
index 72c075946..42e042985 100644
--- a/src/app/store/models/uiState.tsx
+++ b/src/app/store/models/uiState.tsx
@@ -65,6 +65,9 @@ export interface UIState {
   lastUpdatedAt: string | null;
   changelog: StoryblokStory['content'][];
   lastOpened: number | null;
+  onboardingExplainerSets: boolean;
+  onboardingExplainerSyncProviders: boolean;
+  onboardingExplainerInspect: boolean;
   editToken: EditTokenObject;
   showEditForm: boolean;
   tokenFilter: string;
@@ -108,6 +111,9 @@ export const uiState = createModel<RootModel>()({
     lastUpdatedAt: null,
     changelog: [],
     lastOpened: '',
+    onboardingExplainerSets: null,
+    onboardingExplainerSyncProviders: null,
+    onboardingExplainerInspect: null,
     editToken: {
       type: TokenTypes.OTHER,
       status: EditTokenFormStatus.CREATE,
@@ -261,6 +267,24 @@ export const uiState = createModel<RootModel>()({
         lastOpened: payload,
       };
     },
+    setOnboardingExplainerSets(state, payload: boolean) {
+      return {
+        ...state,
+        onboardingExplainerSets: payload,
+      };
+    },
+    setOnboardingExplainerSyncProviders(state, payload: boolean) {
+      return {
+        ...state,
+        onboardingExplainerSyncProviders: payload,
+      };
+    },
+    setOnboardingExplainerInspect(state, payload: boolean) {
+      return {
+        ...state,
+        onboardingExplainerInspect: payload,
+      };
+    },
     setTokenFilter(state, payload: string) {
       return {
         ...state,
@@ -333,6 +357,24 @@ export const uiState = createModel<RootModel>()({
         dispatch.uiState.setChangelog(result);
       });
     },
+    setOnboardingExplainerSets: (payload) => {
+      AsyncMessageChannel.ReactInstance.message({
+        type: AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSETS,
+        onboardingExplainerSets: payload,
+      });
+    },
+    setOnboardingExplainerSyncProviders: (payload) => {
+      AsyncMessageChannel.ReactInstance.message({
+        type: AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSYNCPROVIDERS,
+        onboardingExplainerSyncProviders: payload,
+      });
+    },
+    setOnboardingExplainerInspect: (payload) => {
+      AsyncMessageChannel.ReactInstance.message({
+        type: AsyncMessageTypes.SET_ONBOARDINGEXPLAINERINSPECT,
+        onboardingExplainerInspect: payload,
+      });
+    },
     setActiveTab: (payload: Tabs) => {
       const requiresSelectionValues = payload === Tabs.INSPECTOR;
 
diff --git a/src/app/store/providers/__tests__/jsonbin.test.ts b/src/app/store/providers/__tests__/jsonbin.test.ts
index 67e0f73d3..efe09cfa7 100644
--- a/src/app/store/providers/__tests__/jsonbin.test.ts
+++ b/src/app/store/providers/__tests__/jsonbin.test.ts
@@ -4,6 +4,7 @@ import { SingleToken } from '@/types/tokens';
 import { updateJSONBinTokens } from '../jsonbin';
 import * as pjs from '../../../../../package.json';
 import { ErrorMessages } from '@/constants/ErrorMessages';
+import { createMockStore } from '../../../../../tests/config/setupTest';
 
 const mockRetrieve = jest.fn();
 const mockSave = jest.fn();
@@ -51,6 +52,7 @@ describe('jsonbin', () => {
     secret: 'jsonbin',
   };
   it('return old data when remote data is older', async () => {
+    const mockStore = createMockStore({});
     const updatedAt = '2022-09-20T08:43:03.844Z';
     const oldUpdatedAt = '2022-09-20T07:43:03.844Z';
 
@@ -61,7 +63,7 @@ describe('jsonbin', () => {
     }));
     mockSave.mockImplementationOnce(() => Promise.resolve(true));
     expect(await updateJSONBinTokens({
-      tokens: tokens as Record<string, SingleToken[]>, themes: themes as ThemeObjectsList, context: context as Partial<StorageTypeCredentials>, updatedAt, oldUpdatedAt,
+      tokens: tokens as Record<string, SingleToken[]>, themes: themes as ThemeObjectsList, context: context as Partial<StorageTypeCredentials>, updatedAt, oldUpdatedAt, dispatch: mockStore.dispatch,
     })).toEqual({
       tokens: {
         global: [
@@ -90,6 +92,7 @@ describe('jsonbin', () => {
   });
 
   it('notify updating error when remote data is newer', async () => {
+    const mockStore = createMockStore({});
     const updatedAt = '2022-09-20T08:43:03.844Z';
     const oldUpdatedAt = '2022-09-20T07:43:03.844Z';
 
@@ -100,14 +103,15 @@ describe('jsonbin', () => {
     }));
     mockSave.mockImplementation(() => Promise.resolve(true));
     await updateJSONBinTokens({
-      tokens: tokens as Record<string, SingleToken[]>, themes: themes as ThemeObjectsList, context: context as Partial<StorageTypeCredentials>, updatedAt, oldUpdatedAt,
+      tokens: tokens as Record<string, SingleToken[]>, themes: themes as ThemeObjectsList, context: context as Partial<StorageTypeCredentials>, updatedAt, oldUpdatedAt, dispatch: mockStore.dispatch,
     });
     expect(await updateJSONBinTokens({
-      tokens: tokens as Record<string, SingleToken[]>, themes: themes as ThemeObjectsList, context: context as Partial<StorageTypeCredentials>, updatedAt, oldUpdatedAt,
+      tokens: tokens as Record<string, SingleToken[]>, themes: themes as ThemeObjectsList, context: context as Partial<StorageTypeCredentials>, updatedAt, oldUpdatedAt, dispatch: mockStore.dispatch,
     })).toEqual(null);
   });
 
   it('return error message when there is a error while retrieving the data', async () => {
+    const mockStore = createMockStore({});
     const updatedAt = '2022-09-20T08:43:03.844Z';
     const oldUpdatedAt = '2022-09-20T07:43:03.844Z';
 
@@ -116,7 +120,7 @@ describe('jsonbin', () => {
       errorMessage: ErrorMessages.GENERAL_CONNECTION_ERROR,
     }));
     expect(await updateJSONBinTokens({
-      tokens: tokens as Record<string, SingleToken[]>, themes: themes as ThemeObjectsList, context: context as Partial<StorageTypeCredentials>, updatedAt, oldUpdatedAt,
+      tokens: tokens as Record<string, SingleToken[]>, themes: themes as ThemeObjectsList, context: context as Partial<StorageTypeCredentials>, updatedAt, oldUpdatedAt, dispatch: mockStore.dispatch,
     })).toEqual({
       status: 'failure',
       errorMessage: ErrorMessages.GENERAL_CONNECTION_ERROR,
diff --git a/src/app/store/providers/__tests__/updateJSONBinTokens.test.ts b/src/app/store/providers/__tests__/updateJSONBinTokens.test.ts
index 3ead8f762..4b5dfc933 100644
--- a/src/app/store/providers/__tests__/updateJSONBinTokens.test.ts
+++ b/src/app/store/providers/__tests__/updateJSONBinTokens.test.ts
@@ -1,8 +1,10 @@
+import { createMockStore } from '../../../../../tests/config/setupTest';
 import { mockFetch } from '../../../../../tests/__mocks__/fetchMock';
 import { updateJSONBinTokens } from '../jsonbin';
 
 describe('updateJSONBinTokens', () => {
   it('should work', async () => {
+    const mockStore = createMockStore({});
     mockFetch.mockImplementationOnce(() => Promise.resolve({
       ok: true,
     }));
@@ -15,12 +17,14 @@ describe('updateJSONBinTokens', () => {
         secret: 'secret',
       },
       updatedAt: '2022-06-16T10:00:00.000Z',
+      dispatch: mockStore.dispatch,
     });
 
     expect(mockFetch).toBeCalledTimes(1);
   });
 
   it('should check updatedAt', async () => {
+    const mockStore = createMockStore({});
     mockFetch.mockImplementationOnce(() => (
       Promise.resolve({
         ok: true,
@@ -49,6 +53,7 @@ describe('updateJSONBinTokens', () => {
       },
       oldUpdatedAt: '2022-06-15T12:00:00.000Z',
       updatedAt: '2022-06-16T10:00:00.000Z',
+      dispatch: mockStore.dispatch,
     });
 
     expect(mockFetch).toBeCalledTimes(2);
diff --git a/src/app/store/providers/generic/versionedStorage.ts b/src/app/store/providers/generic/versionedStorage.ts
new file mode 100644
index 000000000..576cf338c
--- /dev/null
+++ b/src/app/store/providers/generic/versionedStorage.ts
@@ -0,0 +1,221 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useCallback, useMemo } from 'react';
+import { Dispatch } from '@/app/store';
+import { notifyToUI } from '../../../../plugin/notifiers';
+import * as pjs from '../../../../../package.json';
+import useStorage from '../../useStorage';
+import { compareUpdatedAt } from '@/utils/date';
+import {
+  activeThemeSelector, themesListSelector, tokensSelector, usedTokenSetSelector,
+} from '@/selectors';
+import { UpdateRemoteFunctionPayload } from '@/types/UpdateRemoteFunction';
+import { GenericVersionedStorage } from '@/storage';
+import { AsyncMessageTypes } from '@/types/AsyncMessages';
+import { AsyncMessageChannel } from '@/AsyncMessageChannel';
+import { StorageProviderType } from '@/constants/StorageProviderType';
+import {
+  StorageTypeCredentials, StorageTypeFormValues, GenericVersionedStorageFlow, GenericVersionedStorageType,
+} from '@/types/StorageType';
+import { RemoteResponseData } from '@/types/RemoteResponseData';
+import { saveLastSyncedState } from '@/utils/saveLastSyncedState';
+
+export async function updateGenericVersionedTokens({
+  tokens, themes, context, updatedAt, oldUpdatedAt = null,
+}: UpdateRemoteFunctionPayload) {
+  const { id, additionalHeaders, flow } = context as GenericVersionedStorageType;
+  try {
+    if (!id) throw new Error('Missing Generic Versioned Storage ID');
+
+    const storage = new GenericVersionedStorage(id, flow, additionalHeaders);
+    const payload = {
+      tokens,
+      themes,
+      metadata: {
+        updatedAt: updatedAt ?? new Date().toISOString(),
+        version: pjs.plugin_version,
+      },
+    };
+
+    if (oldUpdatedAt) {
+      const remoteTokens = await storage.retrieve();
+      if (remoteTokens?.status === 'failure') {
+        // eslint-disable-next-line no-console
+        console.log('Error updating Generic storage', remoteTokens?.errorMessage);
+        return {
+          status: 'failure',
+          errorMessage: remoteTokens?.errorMessage,
+        };
+      }
+
+      const comparison = await compareUpdatedAt(oldUpdatedAt, remoteTokens?.metadata?.updatedAt ?? '');
+      if (comparison === 'remote_older') {
+        // Read Only is not allowed to save to external
+        switch (flow) {
+          case GenericVersionedStorageFlow.READ_WRITE:
+          case GenericVersionedStorageFlow.READ_WRITE_CREATE:
+            storage.save(payload);
+            break;
+          default:
+        }
+      } else {
+        notifyToUI('Error updating tokens as remote is newer, please update first', { error: true });
+      }
+    } else {
+      storage.save(payload);
+    }
+  } catch (e) {
+    console.log('Error updating Generic Storage', e);
+  }
+  return undefined;
+}
+
+export function useGenericVersionedStorage() {
+  const dispatch = useDispatch<Dispatch>();
+  const { setStorageType } = useStorage();
+  const tokens = useSelector(tokensSelector);
+  const themes = useSelector(themesListSelector);
+  const activeTheme = useSelector(activeThemeSelector);
+  const usedTokenSets = useSelector(usedTokenSetSelector);
+
+  const createNewGenericVersionedStorage = useCallback(async (context: Extract<StorageTypeFormValues<false>, { provider: StorageProviderType.GENERIC_VERSIONED_STORAGE }>) => {
+    const {
+      id, name, additionalHeaders, internalId, flow,
+    } = context;
+    const updatedAt = new Date().toISOString();
+    const result = await GenericVersionedStorage.create(id, updatedAt, flow, additionalHeaders);
+    if (result) {
+      updateGenericVersionedTokens({
+        tokens,
+        context: {
+          id,
+          additionalHeaders,
+          flow,
+        },
+        themes,
+        updatedAt,
+        dispatch,
+      });
+      AsyncMessageChannel.ReactInstance.message({
+        type: AsyncMessageTypes.CREDENTIALS,
+        credential: {
+          provider: StorageProviderType.GENERIC_VERSIONED_STORAGE,
+          id,
+          flow,
+          internalId,
+          name,
+          additionalHeaders,
+        },
+      });
+      dispatch.uiState.setProjectURL(id);
+
+      return result.metadata.id;
+    }
+    notifyToUI('Something went wrong. See console for details', { error: true });
+    return null;
+  }, [dispatch, themes, tokens]);
+
+  // Read tokens from endpoint
+  const pullTokensFromGenericVersionedStorage = useCallback(async (context: Extract<StorageTypeCredentials, { provider: StorageProviderType.GENERIC_VERSIONED_STORAGE }>): Promise<RemoteResponseData | null> => {
+    const {
+      id, additionalHeaders, name, internalId, flow,
+    } = context;
+    if (!id) return null;
+    try {
+      const storage = new GenericVersionedStorage(id, flow, additionalHeaders);
+      const data = await storage.retrieve();
+      dispatch.uiState.setProjectURL(id);
+
+      AsyncMessageChannel.ReactInstance.message({
+        type: AsyncMessageTypes.CREDENTIALS,
+        credential: {
+          internalId,
+          name,
+          id,
+          flow,
+          additionalHeaders,
+          provider: StorageProviderType.GENERIC_VERSIONED_STORAGE,
+        },
+      });
+      if (data?.status === 'failure') {
+        return {
+          status: 'failure',
+          errorMessage: data.errorMessage,
+        };
+      }
+      if (data && data?.tokens) {
+        dispatch.tokenState.setEditProhibited(false);
+        return data;
+      }
+      notifyToUI('No tokens stored on remote', { error: true });
+      return null;
+    } catch (e) {
+      notifyToUI('Error fetching from Generic Versioned Storage, check console (F12)', { error: true });
+      console.log('Error:', e);
+      return null;
+    }
+  }, [dispatch]);
+
+  const addGenericVersionedCredentials = useCallback(async (context: Extract<StorageTypeFormValues<false>, { provider: StorageProviderType.GENERIC_VERSIONED_STORAGE }>): Promise<RemoteResponseData | null> => {
+    const {
+      provider, id, name, additionalHeaders, internalId, flow,
+    } = context;
+    if (!id) return null;
+
+    // Always attempt create first if required
+    const updatedAt = new Date().toISOString();
+    const result = await GenericVersionedStorage.create(id, updatedAt, flow, additionalHeaders);
+
+    if (!result) {
+      return {
+        status: 'failure',
+        errorMessage: 'Failed to create endpoint',
+      };
+    }
+
+    const content = await pullTokensFromGenericVersionedStorage(context);
+
+    if (content?.status === 'failure') {
+      return {
+        status: 'failure',
+        errorMessage: content.errorMessage,
+      };
+    }
+    if (content) {
+      dispatch.uiState.setApiData({
+        provider, id, name, additionalHeaders, internalId, flow,
+      });
+      setStorageType({
+        provider: {
+          provider, id, additionalHeaders, name, internalId, flow,
+        },
+        shouldSetInDocument: true,
+      });
+      saveLastSyncedState(dispatch, content.tokens, content?.themes, {});
+      dispatch.tokenState.setTokenData({
+        values: content.tokens,
+        themes: content.themes,
+        usedTokenSet: usedTokenSets,
+        activeTheme,
+      });
+      return content;
+    }
+
+    return content;
+  }, [
+    dispatch,
+    pullTokensFromGenericVersionedStorage,
+    setStorageType,
+    usedTokenSets,
+    activeTheme,
+  ]);
+
+  return useMemo(() => ({
+    addGenericVersionedCredentials,
+    pullTokensFromGenericVersionedStorage,
+    createNewGenericVersionedStorage,
+  }), [
+    addGenericVersionedCredentials,
+    pullTokensFromGenericVersionedStorage,
+    createNewGenericVersionedStorage,
+  ]);
+}
diff --git a/src/app/store/providers/jsonbin.tsx b/src/app/store/providers/jsonbin.tsx
index 8d6ca5de7..fc4aa291d 100644
--- a/src/app/store/providers/jsonbin.tsx
+++ b/src/app/store/providers/jsonbin.tsx
@@ -20,7 +20,7 @@ import { saveLastSyncedState } from '@/utils/saveLastSyncedState';
 import { applyTokenSetOrder } from '@/utils/tokenset';
 
 export async function updateJSONBinTokens({
-  tokens, themes, context, updatedAt, oldUpdatedAt = null,
+  tokens, themes, context, updatedAt, oldUpdatedAt = null, dispatch,
 }: UpdateRemoteFunctionPayload) {
   const { id, secret } = context;
   try {
@@ -51,6 +51,9 @@ export async function updateJSONBinTokens({
       const comparison = await compareUpdatedAt(oldUpdatedAt, remoteTokens?.metadata?.updatedAt ?? '');
       if (comparison === 'remote_older') {
         if (await storage.save(payload)) {
+          saveLastSyncedState(dispatch, payload.tokens, payload.themes, {
+            tokenSetOrder: Object.keys(tokens),
+          });
           return payload;
         }
       } else {
@@ -60,6 +63,9 @@ export async function updateJSONBinTokens({
         notifyToUI('Error updating tokens as remote is newer, please update first', { error: true });
       }
     } else if (await storage.save(payload)) {
+      saveLastSyncedState(dispatch, payload.tokens, payload.themes, {
+        tokenSetOrder: Object.keys(tokens),
+      });
       return payload;
     }
   } catch (e) {
@@ -90,6 +96,7 @@ export function useJSONbin() {
         },
         themes,
         updatedAt,
+        dispatch,
       });
       AsyncMessageChannel.ReactInstance.message({
         type: AsyncMessageTypes.CREDENTIALS,
diff --git a/src/app/store/remoteTokens.test.ts b/src/app/store/remoteTokens.test.ts
index 0d3ebf383..13f61dcd3 100644
--- a/src/app/store/remoteTokens.test.ts
+++ b/src/app/store/remoteTokens.test.ts
@@ -524,7 +524,10 @@ describe('remoteTokens', () => {
           errorMessage: ErrorMessages.GENERAL_CONNECTION_ERROR,
         })
       ));
-      expect(await result.current.restoreStoredProvider(context as StorageTypeCredentials)).toEqual(null);
+      expect(await result.current.restoreStoredProvider(context as StorageTypeCredentials)).toEqual({
+        errorMessage: ErrorMessages.GENERAL_CONNECTION_ERROR,
+        status: 'failure',
+      });
     });
   });
 
diff --git a/src/app/store/remoteTokens.tsx b/src/app/store/remoteTokens.tsx
index a4ff8a542..ecaa9f90b 100644
--- a/src/app/store/remoteTokens.tsx
+++ b/src/app/store/remoteTokens.tsx
@@ -18,6 +18,7 @@ import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import { StorageTypeCredentials, StorageTypeFormValues } from '@/types/StorageType';
+import { useGenericVersionedStorage } from './providers/generic/versionedStorage';
 import { RemoteResponseData, RemoteResponseStatus } from '@/types/RemoteResponseData';
 import { ErrorMessages } from '@/constants/ErrorMessages';
 import { saveLastSyncedState } from '@/utils/saveLastSyncedState';
@@ -38,6 +39,7 @@ export default function useRemoteTokens() {
 
   const { setStorageType } = useStorage();
   const { pullTokensFromJSONBin, addJSONBinCredentials, createNewJSONBin } = useJSONbin();
+  const { addGenericVersionedCredentials, pullTokensFromGenericVersionedStorage, createNewGenericVersionedStorage } = useGenericVersionedStorage();
   const {
     addNewGitHubCredentials, syncTokensWithGitHub, pullTokensFromGitHub, pushTokensToGitHub, createGithubBranch, fetchGithubBranches,
   } = useGitHub();
@@ -73,6 +75,10 @@ export default function useRemoteTokens() {
         remoteData = await pullTokensFromJSONBin(context);
         break;
       }
+      case StorageProviderType.GENERIC_VERSIONED_STORAGE: {
+        remoteData = await pullTokensFromGenericVersionedStorage(context);
+        break;
+      }
       case StorageProviderType.GITHUB: {
         remoteData = await pullTokensFromGitHub(context, featureFlags);
         break;
@@ -117,6 +123,7 @@ export default function useRemoteTokens() {
   }, [
     dispatch,
     api,
+    pullTokensFromGenericVersionedStorage,
     pullTokensFromGitHub,
     pullTokensFromGitLab,
     pullTokensFromBitbucket,
@@ -131,27 +138,42 @@ export default function useRemoteTokens() {
     dispatch.uiState.setApiData(context);
     dispatch.tokenState.setEditProhibited(false);
     setStorageType({ provider: context, shouldSetInDocument: true });
+    let content: RemoteResponseData | null = null;
     switch (context.provider) {
       case StorageProviderType.GITHUB: {
-        await syncTokensWithGitHub(context);
+        content = await syncTokensWithGitHub(context);
         break;
       }
       case StorageProviderType.GITLAB: {
-        await syncTokensWithGitLab(context);
+        content = await syncTokensWithGitLab(context);
         break;
       }
       case StorageProviderType.BITBUCKET: {
-        await syncTokensWithBitbucket(context);
+        content = await syncTokensWithBitbucket(context);
         break;
       }
       case StorageProviderType.ADO: {
-        await syncTokensWithADO(context);
+        content = await syncTokensWithADO(context);
         break;
       }
       default:
-        await pullTokens({ context });
+        content = await pullTokens({ context });
     }
-    return null;
+    if (content?.status === 'failure') {
+      return {
+        status: 'failure',
+        errorMessage: content?.errorMessage,
+      };
+    }
+    if (content) {
+      return {
+        status: 'success',
+      };
+    }
+    return {
+      status: 'failure',
+      errorMessage: ErrorMessages.GENERAL_CONNECTION_ERROR,
+    };
   }, [
     dispatch,
     setStorageType,
@@ -213,6 +235,20 @@ export default function useRemoteTokens() {
         }
         break;
       }
+      case StorageProviderType.GENERIC_VERSIONED_STORAGE: {
+        if (credentials.id) {
+          content = await addGenericVersionedCredentials(credentials);
+        } else {
+          const id = await createNewGenericVersionedStorage(credentials);
+          if (id) {
+            credentials.id = id;
+            return {
+              status: 'success',
+            };
+          }
+        }
+        break;
+      }
       case StorageProviderType.GITHUB: {
         content = await addNewGitHubCredentials(credentials);
         break;
@@ -257,11 +293,13 @@ export default function useRemoteTokens() {
   }, [
     dispatch,
     addJSONBinCredentials,
+    addGenericVersionedCredentials,
     addNewGitLabCredentials,
     addNewGitHubCredentials,
     addNewBitbucketCredentials,
     addNewADOCredentials,
     createNewJSONBin,
+    createNewGenericVersionedStorage,
     pullTokensFromURL,
     setStorageType,
   ]);
@@ -289,7 +327,7 @@ export default function useRemoteTokens() {
         throw new Error('Not implemented');
     }
     return newBranchCreated;
-  }, [createGithubBranch, createADOBranch, createBitbucketBranch]);
+  }, [createGithubBranch, createGitLabBranch, createBitbucketBranch, createADOBranch]);
 
   const fetchBranches = useCallback(async (context: StorageTypeCredentials) => {
     switch (context.provider) {
diff --git a/src/app/store/updateSources.tsx b/src/app/store/updateSources.tsx
index 2704589e9..9399ea366 100644
--- a/src/app/store/updateSources.tsx
+++ b/src/app/store/updateSources.tsx
@@ -1,6 +1,8 @@
 import { mergeTokenGroups, resolveTokenValues } from '@/plugin/tokenHelpers';
+import { Dispatch } from '@/app/store';
 import { notifyToUI } from '../../plugin/notifiers';
 import { updateJSONBinTokens } from './providers/jsonbin';
+import { updateGenericVersionedTokens } from './providers/generic/versionedStorage';
 import { track } from '@/utils/analytics';
 import type { AnyTokenList } from '@/types/tokens';
 import type { ThemeObjectsList, UsedTokenSetsMap } from '@/types';
@@ -17,6 +19,7 @@ type UpdateRemoteTokensPayload = {
   context: StorageTypeCredentials;
   updatedAt: string;
   oldUpdatedAt?: string;
+  dispatch: Dispatch
 };
 
 type UpdateTokensOnSourcesPayload = {
@@ -34,6 +37,8 @@ type UpdateTokensOnSourcesPayload = {
   lastUpdatedAt: string;
   api: StorageTypeCredentials;
   checkForChanges: boolean;
+  shouldSwapStyles?: boolean;
+  dispatch: Dispatch
 };
 
 async function updateRemoteTokens({
@@ -43,6 +48,7 @@ async function updateRemoteTokens({
   context,
   updatedAt,
   oldUpdatedAt,
+  dispatch,
 }: UpdateRemoteTokensPayload) {
   if (!context) return;
   switch (provider) {
@@ -56,10 +62,24 @@ async function updateRemoteTokens({
         context,
         updatedAt,
         oldUpdatedAt,
+        dispatch,
       });
       break;
     }
+    case StorageProviderType.GENERIC_VERSIONED_STORAGE: {
+      track('pushTokens', { provider: StorageProviderType.GENERIC_VERSIONED_STORAGE });
+      notifyToUI('Updating Generic Remote...');
+      await updateGenericVersionedTokens({
+        themes,
+        tokens,
+        context,
+        updatedAt,
+        oldUpdatedAt,
+        dispatch,
+      });
 
+      break;
+    }
     case StorageProviderType.GITHUB: {
       break;
     }
@@ -92,6 +112,8 @@ export default async function updateTokensOnSources({
   api,
   lastUpdatedAt,
   checkForChanges,
+  shouldSwapStyles,
+  dispatch,
 }: UpdateTokensOnSourcesPayload) {
   if (tokens && !isLocal && shouldUpdateRemote && !editProhibited) {
     updateRemoteTokens({
@@ -101,6 +123,7 @@ export default async function updateTokensOnSources({
       context: api,
       updatedAt,
       oldUpdatedAt: lastUpdatedAt,
+      dispatch,
     });
   }
 
@@ -117,5 +140,6 @@ export default async function updateTokensOnSources({
     usedTokenSet,
     checkForChanges,
     activeTheme,
+    shouldSwapStyles,
   });
 }
diff --git a/src/app/store/useManageTokens.test.tsx b/src/app/store/useManageTokens.test.tsx
index 418e8b162..492c27039 100644
--- a/src/app/store/useManageTokens.test.tsx
+++ b/src/app/store/useManageTokens.test.tsx
@@ -235,5 +235,4 @@ describe('useManageTokens', () => {
     await act(async () => result.current.deleteSingleToken(tokenToDelete));
     expect(mockRemoveStylesFromTokens).toBeCalledTimes(0);
   });
-
 });
diff --git a/src/app/store/useManageTokens.tsx b/src/app/store/useManageTokens.tsx
index 8b82d631a..aea968634 100644
--- a/src/app/store/useManageTokens.tsx
+++ b/src/app/store/useManageTokens.tsx
@@ -147,14 +147,11 @@ export default function useManageTokens() {
     }
   }, [store, confirm, deleteTokenGroup, dispatch.uiState]);
 
-  const renameGroup = useCallback(async (path: string, newName: string, type: string) => {
+  const renameGroup = useCallback(async (oldName: string, newName: string, type: string) => {
     const activeTokenSet = activeTokenSetSelector(store.getState());
-    const oldName = path.split('.').pop() || '';
-    const newPath = path.slice(0, path.length - oldName.length);
-
     dispatch.uiState.startJob({ name: BackgroundJobs.UI_RENAMETOKENGROUP, isInfinite: true });
     await renameTokenGroup({
-      parent: activeTokenSet, path: newPath, oldName, newName, type,
+      parent: activeTokenSet, oldName, newName, type,
     });
     dispatch.uiState.completeJob(BackgroundJobs.UI_RENAMETOKENGROUP);
   }, [store, renameTokenGroup, dispatch.uiState]);
diff --git a/src/app/store/useTokens.test.tsx b/src/app/store/useTokens.test.tsx
index a3828e2ca..ff1873665 100644
--- a/src/app/store/useTokens.test.tsx
+++ b/src/app/store/useTokens.test.tsx
@@ -16,6 +16,8 @@ import { AllTheProviders, createMockStore, resetStore } from '../../../tests/con
 import { store } from '../store';
 import { TokenSetStatus } from '@/constants/TokenSetStatus';
 import { UpdateMode } from '@/constants/UpdateMode';
+import { NodeInfo } from '@/types/NodeInfo';
+import { Properties } from '@/constants/Properties';
 
 type GetFormattedTokensOptions = {
   includeAllTokens: boolean;
@@ -266,6 +268,25 @@ describe('useToken test', () => {
     await expect(result.current.pullStyles()).resolves.not.toThrow();
   });
 
+  it('removeTokensByValue test', async () => {
+    const messageSpy = jest.spyOn(AsyncMessageChannel.ReactInstance, 'message');
+    const data = [{
+      property: Properties.fill,
+      nodes: [{
+        id: '12',
+        type: 'RECTANGLE',
+      } as NodeInfo],
+    }];
+    await act(async () => {
+      await result.current.removeTokensByValue(data);
+    });
+
+    expect(messageSpy).toBeCalledWith({
+      type: AsyncMessageTypes.REMOVE_TOKENS_BY_VALUE,
+      tokensToRemove: data,
+    });
+  });
+
   it('handleRemap test', async () => {
     const messageSpy = jest.spyOn(AsyncMessageChannel.ReactInstance, 'message');
     await act(async () => {
@@ -283,6 +304,20 @@ describe('useToken test', () => {
     });
   });
 
+  it('remapToken test', async () => {
+    const messageSpy = jest.spyOn(AsyncMessageChannel.ReactInstance, 'message');
+    await act(async () => {
+      await result.current.remapToken('oldName', 'newName', UpdateMode.SELECTION);
+    });
+
+    expect(messageSpy).toBeCalledWith({
+      type: AsyncMessageTypes.REMAP_TOKENS,
+      oldName: 'oldName',
+      newName: 'newName',
+      updateMode: UpdateMode.SELECTION,
+    });
+  });
+
   it('remapTokensInGroup', async () => {
     const messageSpy = jest.spyOn(AsyncMessageChannel.ReactInstance, 'message');
     mockConfirm.mockImplementation(() => Promise.resolve({ data: ['selection', 'page', 'document'] }));
@@ -469,4 +504,63 @@ describe('useToken test', () => {
       });
     });
   });
+
+  describe('setNoneValuesOnNode', () => {
+    const mockStore = createMockStore({
+      uiState: {
+        selectionValues: [{
+          category: Properties.fill,
+          type: 'fill',
+          value: 'color.slate.800',
+          nodes: [{
+            id: '12',
+            type: 'RECTANGLE',
+          } as NodeInfo],
+        }, {
+          category: Properties.borderRadius,
+          type: 'borderRadius',
+          value: 'border-radius.8',
+          nodes: [{
+            id: '12',
+            type: 'RECTANGLE',
+          } as NodeInfo],
+        }],
+      },
+      inspectState: {
+        selectedTokens: ['fill-color.slate.800', 'borderRadius-border-radius.8'],
+      },
+    });
+    beforeEach(() => {
+      resetStore();
+      result = renderHook(() => useTokens(), {
+        wrapper: ({ children }: { children?: React.ReactNode }) => <Provider store={mockStore}>{children}</Provider>,
+      }).result;
+    });
+
+    it('setNoneValuesOnNode test', async () => {
+      const messageSpy = jest.spyOn(AsyncMessageChannel.ReactInstance, 'message');
+      await act(async () => {
+        await result.current.setNoneValuesOnNode(resolvedTokens);
+      });
+
+      expect(messageSpy).toBeCalledWith({
+        type: AsyncMessageTypes.SET_NONE_VALUES_ON_NODE,
+        tokensToSet: [{
+          nodes: [{
+            id: '12',
+            type: 'RECTANGLE',
+          }],
+          property: 'fill',
+        },
+        {
+          nodes: [{
+            id: '12',
+            type: 'RECTANGLE',
+          }],
+          property: 'borderRadius',
+        }],
+        tokens: resolvedTokens,
+      });
+    });
+  });
 });
diff --git a/src/app/store/useTokens.tsx b/src/app/store/useTokens.tsx
index c11358da8..048844c7a 100644
--- a/src/app/store/useTokens.tsx
+++ b/src/app/store/useTokens.tsx
@@ -13,8 +13,10 @@ import { track } from '@/utils/analytics';
 import { checkIfAlias } from '@/utils/alias';
 import {
   activeTokenSetSelector,
+  inspectStateSelector,
   settingsStateSelector,
   tokensSelector,
+  uiStateSelector,
   usedTokenSetSelector,
 } from '@/selectors';
 import { TokenSetStatus } from '@/constants/TokenSetStatus';
@@ -272,6 +274,25 @@ export default function useTokens() {
     dispatch.tokenState.removeStyleIdsFromThemes(removeStylesResult.styleIds);
   }, [settings, dispatch.tokenState]);
 
+  const setNoneValuesOnNode = useCallback((resolvedTokens: SingleToken[]) => {
+    const uiState = uiStateSelector(store.getState());
+    const inspectState = inspectStateSelector(store.getState());
+    const tokensToSet = uiState.selectionValues
+      .filter((v) => inspectState.selectedTokens.includes(`${v.category}-${v.value}`))
+      .map((v) => ({ nodes: v.nodes, property: v.type })) as ({
+      property: Properties;
+      nodes: NodeInfo[];
+    }[]);
+
+    track('setNoneValuesOnNode', tokensToSet);
+
+    AsyncMessageChannel.ReactInstance.message({
+      type: AsyncMessageTypes.SET_NONE_VALUES_ON_NODE,
+      tokensToSet,
+      tokens: resolvedTokens,
+    });
+  }, []);
+
   return useMemo(() => ({
     isAlias,
     getTokenValue,
@@ -287,6 +308,7 @@ export default function useTokens() {
     handleBulkRemap,
     removeStylesFromTokens,
     syncStyles,
+    setNoneValuesOnNode,
   }), [
     isAlias,
     getTokenValue,
@@ -302,5 +324,6 @@ export default function useTokens() {
     handleBulkRemap,
     removeStylesFromTokens,
     syncStyles,
+    setNoneValuesOnNode,
   ]);
 }
diff --git a/src/config/default.json b/src/config/default.json
index d55567fcc..4e1284925 100644
--- a/src/config/default.json
+++ b/src/config/default.json
@@ -1,55 +1,56 @@
 {
-  "global": {
-    "spacing": {
+  "core": {
+    "dimension": {
       "scale": {
         "value": "2",
-        "type": "spacing"
+        "type": "dimension"
       },
       "xs": {
         "value": "4",
-        "type": "spacing"
+        "type": "dimension"
       },
       "sm": {
-        "value": "{spacing.xs} * {spacing.scale}",
-        "type": "spacing"
+        "value": "{dimension.xs} * {dimension.scale}",
+        "type": "dimension"
       },
       "md": {
-        "value": "{spacing.sm} * {spacing.scale}",
-        "type": "spacing"
+        "value": "{dimension.sm} * {dimension.scale}",
+        "type": "dimension"
       },
       "lg": {
-        "value": "{spacing.md} * {spacing.scale}",
-        "type": "spacing"
+        "value": "{dimension.md} * {dimension.scale}",
+        "type": "dimension"
       },
       "xl": {
-        "value": "{spacing.lg} * {spacing.scale}",
-        "type": "spacing"
+        "value": "{dimension.lg} * {dimension.scale}",
+        "type": "dimension"
       }
     },
-    "sizing": {
-      "scale": {
-        "value": "1.5",
-        "type": "sizing"
-      },
+    "spacing": {
       "xs": {
-        "value": "4",
-        "type": "sizing"
+        "value": "{dimension.xs}",
+        "type": "spacing"
       },
       "sm": {
-        "value": "{sizing.xs} * {sizing.scale}",
-        "type": "sizing"
+        "value": "{dimension.sm}",
+        "type": "spacing"
       },
       "md": {
-        "value": "{sizing.sm} * {sizing.scale}",
-        "type": "sizing"
+        "value": "{dimension.md}",
+        "type": "spacing"
       },
       "lg": {
-        "value": "{sizing.md} * {sizing.scale}",
-        "type": "sizing"
+        "value": "{dimension.lg}",
+        "type": "spacing"
       },
       "xl": {
-        "value": "{sizing.lg} * {sizing.scale}",
-        "type": "sizing"
+        "value": "{dimension.xl}",
+        "type": "spacing"
+      },
+      "multi-value": {
+        "value": "{dimension.sm} {dimension.xl}",
+        "type": "spacing",
+        "description": "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens"
       }
     },
     "borderRadius": {
@@ -64,28 +65,11 @@
       "xl": {
         "value": "16",
         "type": "borderRadius"
-      }
-    },
-    "borderWidth": {
-      "none": {
-        "value": "0",
-        "type": "borderWidth"
-      },
-      "xs": {
-        "value": "1",
-        "type": "borderWidth"
-      },
-      "sm": {
-        "value": "2",
-        "type": "borderWidth"
-      },
-      "md": {
-        "value": "4",
-        "type": "borderWidth"
       },
-      "lg": {
-        "value": "8",
-        "type": "borderWidth"
+      "multi-value": {
+        "value": "{borderRadius.sm} {borderRadius.lg}",
+        "type": "borderRadius",
+        "description": "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values"
       }
     },
     "colors": {
@@ -591,66 +575,6 @@
         "value": "{fontSizes.body} * 0.65",
         "type": "fontSizes"
       }
-    },
-    "typography": {
-      "H1": {
-        "Bold": {
-          "type": "typography",
-          "value": {
-            "fontFamily": "{fontFamilies.heading}",
-            "fontWeight": "{fontWeights.headingBold}",
-            "lineHeight": "{lineHeights.heading}",
-            "fontSize": "{fontSizes.h1}",
-            "paragraphSpacing": "{paragraphSpacing.h1}",
-            "letterSpacing": "{letterSpacing.decreased}"
-          }
-        },
-        "Regular": {
-          "type": "typography",
-          "value": {
-            "fontFamily": "{fontFamilies.heading}",
-            "fontWeight": "{fontWeights.headingRegular}",
-            "lineHeight": "{lineHeights.heading}",
-            "fontSize": "{fontSizes.h1}",
-            "paragraphSpacing": "{paragraphSpacing.h1}",
-            "letterSpacing": "{letterSpacing.decreased}"
-          }
-        }
-      },
-      "H2": {
-        "Bold": {
-          "type": "typography",
-          "value": {
-            "fontFamily": "{fontFamilies.heading}",
-            "fontWeight": "{fontWeights.headingBold}",
-            "lineHeight": "{lineHeights.heading}",
-            "fontSize": "{fontSizes.h2}",
-            "paragraphSpacing": "{paragraphSpacing.h2}",
-            "letterSpacing": "{letterSpacing.decreased}"
-          }
-        },
-        "Regular": {
-          "type": "typography",
-          "value": {
-            "fontFamily": "{fontFamilies.heading}",
-            "fontWeight": "{fontWeights.headingRegular}",
-            "lineHeight": "{lineHeights.heading}",
-            "fontSize": "{fontSizes.h2}",
-            "paragraphSpacing": "{paragraphSpacing.h2}",
-            "letterSpacing": "{letterSpacing.decreased}"
-          }
-        }
-      },
-      "Body": {
-        "type": "typography",
-        "value": {
-          "fontFamily": "{fontFamilies.body}",
-          "fontWeight": "{fontWeights.bodyRegular}",
-          "lineHeight": "{lineHeights.heading}",
-          "fontSize": "{fontSizes.body}",
-          "paragraphSpacing": "{paragraphSpacing.h2}"
-        }
-      }
     }
   },
   "light": {
@@ -686,6 +610,14 @@
       "default": {
         "value": "{colors.indigo.400}",
         "type": "color"
+      },
+      "onAccent": {
+        "value": "{colors.white}",
+        "type": "color"
+      },
+      "bg": {
+        "value": "{colors.indigo.200}",
+        "type": "color"
       }
     },
     "shadows": {
@@ -728,11 +660,19 @@
       "default": {
         "value": "{colors.indigo.600}",
         "type": "color"
+      },
+      "onAccent": {
+        "value": "{colors.white}",
+        "type": "color"
+      },
+      "bg": {
+        "value": "{colors.indigo.800}",
+        "type": "color"
       }
     },
     "shadows": {
       "default": {
-        "value": "{colors.gray.100}",
+        "value": "rgba({colors.black}, 0.3)",
         "type": "color"
       }
     }
@@ -743,49 +683,33 @@
         "background": {
           "value": "{accent.default}",
           "type": "color"
-        }
-      },
-      "ghost": {
-        "outline": {
-          "value": "{fg.default}",
-          "type": "color"
         },
         "text": {
-          "value": "{fg.default}",
+          "value": "{accent.onAccent}",
           "type": "color"
         }
-      }
-    },
-    "borderWidth": {
-      "button": {
-        "ghost": {
-          "value": "{borderWidth.md}",
-          "type": "borderWidth"
-        }
-      }
-    },
-    "borderRadius": {
-      "button": {
-        "ghost": {
-          "value": "{borderRadius.lg}",
-          "type": "borderRadius"
-        }
       },
-      "card": {
-        "value": "{borderRadius.sm}",
+      "borderRadius": {
+        "value": "{borderRadius.md}",
         "type": "borderRadius"
+      },
+      "borderWidth": {
+        "value": "{dimension.sm}",
+        "type": "borderWidth"
       }
     },
-    "fontSizes": {
-      "card": {
-        "title": {
-          "value": "{fontSizes.sm}",
-          "type": "fontSizes"
-        },
-        "content": {
-          "value": "{fontSizes.xs}",
-          "type": "fontSizes"
-        }
+    "card": {
+      "borderRadius": {
+        "value": "{borderRadius.lg}",
+        "type": "borderRadius"
+      },
+      "background": {
+        "value": "{bg.default}",
+        "type": "color"
+      },
+      "padding": {
+        "value": "{dimension.md}",
+        "type": "dimension"
       }
     },
     "boxShadow": {
@@ -810,6 +734,66 @@
         ],
         "type": "boxShadow"
       }
+    },
+    "typography": {
+      "H1": {
+        "Bold": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{fontFamilies.heading}",
+            "fontWeight": "{fontWeights.headingBold}",
+            "lineHeight": "{lineHeights.heading}",
+            "fontSize": "{fontSizes.h1}",
+            "paragraphSpacing": "{paragraphSpacing.h1}",
+            "letterSpacing": "{letterSpacing.decreased}"
+          }
+        },
+        "Regular": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{fontFamilies.heading}",
+            "fontWeight": "{fontWeights.headingRegular}",
+            "lineHeight": "{lineHeights.heading}",
+            "fontSize": "{fontSizes.h1}",
+            "paragraphSpacing": "{paragraphSpacing.h1}",
+            "letterSpacing": "{letterSpacing.decreased}"
+          }
+        }
+      },
+      "H2": {
+        "Bold": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{fontFamilies.heading}",
+            "fontWeight": "{fontWeights.headingBold}",
+            "lineHeight": "{lineHeights.heading}",
+            "fontSize": "{fontSizes.h2}",
+            "paragraphSpacing": "{paragraphSpacing.h2}",
+            "letterSpacing": "{letterSpacing.decreased}"
+          }
+        },
+        "Regular": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{fontFamilies.heading}",
+            "fontWeight": "{fontWeights.headingRegular}",
+            "lineHeight": "{lineHeights.heading}",
+            "fontSize": "{fontSizes.h2}",
+            "paragraphSpacing": "{paragraphSpacing.h2}",
+            "letterSpacing": "{letterSpacing.decreased}"
+          }
+        }
+      },
+      "Body": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{fontFamilies.body}",
+          "fontWeight": "{fontWeights.bodyRegular}",
+          "lineHeight": "{lineHeights.heading}",
+          "fontSize": "{fontSizes.body}",
+          "paragraphSpacing": "{paragraphSpacing.h2}"
+        }
+      }
     }
   }
 }
diff --git a/src/config/properties.js b/src/config/properties.js
index d7bb4698b..a7d6537c7 100644
--- a/src/config/properties.js
+++ b/src/config/properties.js
@@ -30,6 +30,7 @@ export default {
   paragraphSpacing: 'paragraphSpacing',
   textCase: 'textCase',
   textDecoration: 'textDecoration',
+  dimension: 'dimension',
   tokenValue: 'documentation',
   value: 'documentation',
   tokenName: 'documentation',
diff --git a/src/config/tokenType.defs.json b/src/config/tokenType.defs.json
index ee225608e..d0228eedf 100644
--- a/src/config/tokenType.defs.json
+++ b/src/config/tokenType.defs.json
@@ -41,6 +41,21 @@
       "value": { "type": "string" }
     }
   },
+  "border": {
+    "label": "Border",
+    "property": "Border",
+    "type": "border",
+    "schemas": {
+      "value": {
+        "type": "object",
+        "properties": {
+          "color": { "type": "string" },
+          "width": { "type": "string" },
+          "style": { "type": "string" }
+        }
+      }
+    }
+  },
   "opacity": {
     "label": "Opacity",
     "property": "Opacity",
@@ -179,6 +194,14 @@
       "value": { "type": "string" }
     }
   },
+  "dimension": {
+    "label": "Dimension",
+    "property": "Dimension",
+    "type": "dimension",
+    "schemas": {
+      "value": { "type": "string" }
+    }
+  },
   "other": {
     "label": "Other",
     "property": "other",
diff --git a/src/config/tokenTypes.js b/src/config/tokenTypes.js
index 0f8dadfbb..baf36cc15 100644
--- a/src/config/tokenTypes.js
+++ b/src/config/tokenTypes.js
@@ -203,6 +203,16 @@ const tokenTypes = {
       },
     },
   },
+  border: {
+    label: 'Border',
+    property: 'Border',
+    type: 'border',
+    schema: {
+      options: {
+        description: '',
+      },
+    },
+  },
   asset: {
     label: 'Assets',
     property: 'Asset',
@@ -214,6 +224,16 @@ const tokenTypes = {
       },
     },
   },
+  dimension: {
+    label: 'Dimension',
+    property: 'Dimension',
+    type: 'dimension',
+    schema: {
+      options: {
+        description: '',
+      },
+    },
+  },
   other: {
     label: 'Other',
     property: 'other',
diff --git a/src/constants/Properties.ts b/src/constants/Properties.ts
index 04d140ecd..732537783 100644
--- a/src/constants/Properties.ts
+++ b/src/constants/Properties.ts
@@ -11,7 +11,8 @@ export enum Properties {
   paddingLeft = 'paddingLeft',
   itemSpacing = 'itemSpacing',
   fill = 'fill',
-  border = 'border',
+  backgroundBlur = 'backgroundBlur',
+  borderColor = 'borderColor',
   borderRadius = 'borderRadius',
   borderRadiusTopLeft = 'borderRadiusTopLeft',
   borderRadiusTopRight = 'borderRadiusTopRight',
@@ -33,6 +34,8 @@ export enum Properties {
   letterSpacing = 'letterSpacing',
   paragraphSpacing = 'paragraphSpacing',
   textCase = 'textCase',
+  dimension = 'dimension',
+  border = 'border',
   textDecoration = 'textDecoration',
   asset = 'asset',
   tokenValue = 'tokenValue',
diff --git a/src/constants/StorageProviderType.ts b/src/constants/StorageProviderType.ts
index f4e7de4a0..39e102657 100644
--- a/src/constants/StorageProviderType.ts
+++ b/src/constants/StorageProviderType.ts
@@ -1,5 +1,6 @@
 export enum StorageProviderType {
   LOCAL = 'local',
+  GENERIC_VERSIONED_STORAGE = 'genericVersionedStorage',
   JSONBIN = 'jsonbin',
   GITHUB = 'github',
   GITLAB = 'gitlab',
diff --git a/src/constants/TokenTypes.ts b/src/constants/TokenTypes.ts
index f61af76ef..9ce6de79b 100644
--- a/src/constants/TokenTypes.ts
+++ b/src/constants/TokenTypes.ts
@@ -19,5 +19,7 @@ export enum TokenTypes {
   TEXT_DECORATION = 'textDecoration',
   TEXT_CASE = 'textCase',
   COMPOSITION = 'composition',
+  DIMENSION = 'dimension',
+  BORDER = 'border',
   ASSET = 'asset',
 }
diff --git a/src/figmaStorage/OnboardingExplainerInspectProperty.ts b/src/figmaStorage/OnboardingExplainerInspectProperty.ts
new file mode 100644
index 000000000..22cdf2225
--- /dev/null
+++ b/src/figmaStorage/OnboardingExplainerInspectProperty.ts
@@ -0,0 +1,6 @@
+import { FigmaStorageProperty, FigmaStorageType } from './FigmaStorageProperty';
+
+export const OnboardingExplainerInspectProperty = new FigmaStorageProperty<boolean>(
+  FigmaStorageType.CLIENT_STORAGE,
+  'onboardingExplainerInspect',
+);
diff --git a/src/figmaStorage/OnboardingExplainerSetsProperty.ts b/src/figmaStorage/OnboardingExplainerSetsProperty.ts
new file mode 100644
index 000000000..4ab5c7bfd
--- /dev/null
+++ b/src/figmaStorage/OnboardingExplainerSetsProperty.ts
@@ -0,0 +1,6 @@
+import { FigmaStorageProperty, FigmaStorageType } from './FigmaStorageProperty';
+
+export const OnboardingExplainerSetsProperty = new FigmaStorageProperty<boolean>(
+  FigmaStorageType.CLIENT_STORAGE,
+  'onboardingExplainerSets',
+);
diff --git a/src/figmaStorage/OnboardingExplainerSyncProvidersProperty.ts b/src/figmaStorage/OnboardingExplainerSyncProvidersProperty.ts
new file mode 100644
index 000000000..78d0be08d
--- /dev/null
+++ b/src/figmaStorage/OnboardingExplainerSyncProvidersProperty.ts
@@ -0,0 +1,6 @@
+import { FigmaStorageProperty, FigmaStorageType } from './FigmaStorageProperty';
+
+export const OnboardingExplainerSyncProvidersProperty = new FigmaStorageProperty<boolean>(
+  FigmaStorageType.CLIENT_STORAGE,
+  'onboardingExplainerSyncProviders',
+);
diff --git a/src/figmaStorage/index.ts b/src/figmaStorage/index.ts
index 0a6001439..37da91419 100644
--- a/src/figmaStorage/index.ts
+++ b/src/figmaStorage/index.ts
@@ -11,6 +11,9 @@ export * from './PersistentNodesCacheProperty';
 export * from './HashProperty';
 export * from './UsedTokenSetProperty';
 export * from './LastOpenedProperty';
+export * from './OnboardingExplainerSetsProperty';
+export * from './OnboardingExplainerSyncProvidersProperty';
+export * from './OnboardingExplainerInspectProperty';
 export * from './CheckForChangesProperty';
 export * from './UiSettingsProperty';
 export * from './LicenseKeyProperty';
diff --git a/src/icons/azure.svg b/src/icons/azure.svg
new file mode 100644
index 000000000..e7c65b765
--- /dev/null
+++ b/src/icons/azure.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1111 3.55558V12.2134L11.5556 15.1289L6.04447 13.12V15.1111L2.92447 11.0311L12.0178 11.7422V3.94669L15.1111 3.55558ZM12.08 3.99114L6.9778 0.888916V2.92447L2.29336 4.30225L0.888916 6.10669V10.2045L2.8978 11.0934V5.84003L12.08 3.99114Z" fill="currentColor"/>
+</svg>
diff --git a/src/icons/border.svg b/src/icons/border.svg
new file mode 100644
index 000000000..0bc331020
--- /dev/null
+++ b/src/icons/border.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25H14C14.4142 0.25 14.75 0.585786 14.75 1V14C14.75 14.4142 14.4142 14.75 14 14.75H1C0.585786 14.75 0.25 14.4142 0.25 14V1ZM1.75 1.75V13.25H13.25V1.75H1.75Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path><rect x="7" y="5" width="1" height="1" rx=".5" fill="currentColor"></rect><rect x="7" y="3" width="1" height="1" rx=".5" fill="currentColor"></rect><rect x="7" y="7" width="1" height="1" rx=".5" fill="currentColor"></rect><rect x="5" y="7" width="1" height="1" rx=".5" fill="currentColor"></rect><rect x="3" y="7" width="1" height="1" rx=".5" fill="currentColor"></rect><rect x="9" y="7" width="1" height="1" rx=".5" fill="currentColor"></rect><rect x="11" y="7" width="1" height="1" rx=".5" fill="currentColor"></rect><rect x="7" y="9" width="1" height="1" rx=".5" fill="currentColor"></rect><rect x="7" y="11" width="1" height="1" rx=".5" fill="currentColor"></rect></svg>
\ No newline at end of file
diff --git a/src/icons/dota-vertical.svg b/src/icons/dota-vertical.svg
new file mode 100644
index 000000000..5660c13f8
--- /dev/null
+++ b/src/icons/dota-vertical.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.625 2.5C8.625 3.12132 8.12132 3.625 7.5 3.625C6.87868 3.625 6.375 3.12132 6.375 2.5C6.375 1.87868 6.87868 1.375 7.5 1.375C8.12132 1.375 8.625 1.87868 8.625 2.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM7.5 13.625C8.12132 13.625 8.625 13.1213 8.625 12.5C8.625 11.8787 8.12132 11.375 7.5 11.375C6.87868 11.375 6.375 11.8787 6.375 12.5C6.375 13.1213 6.87868 13.625 7.5 13.625Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/src/icons/exclamation-triangle.svg b/src/icons/exclamation-triangle.svg
new file mode 100644
index 000000000..ca6aea610
--- /dev/null
+++ b/src/icons/exclamation-triangle.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.4449 0.608765C8.0183 -0.107015 6.9817 -0.107015 6.55509 0.608766L0.161178 11.3368C-0.275824 12.07 0.252503 13 1.10608 13H13.8939C14.7475 13 15.2758 12.07 14.8388 11.3368L8.4449 0.608765ZM7.4141 1.12073C7.45288 1.05566 7.54712 1.05566 7.5859 1.12073L13.9798 11.8488C14.0196 11.9154 13.9715 12 13.8939 12H1.10608C1.02849 12 0.980454 11.9154 1.02018 11.8488L7.4141 1.12073ZM6.8269 4.48611C6.81221 4.10423 7.11783 3.78663 7.5 3.78663C7.88217 3.78663 8.18778 4.10423 8.1731 4.48612L8.01921 8.48701C8.00848 8.766 7.7792 8.98664 7.5 8.98664C7.2208 8.98664 6.99151 8.766 6.98078 8.48701L6.8269 4.48611ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72599 7.49989 9.72599C7.9141 9.72599 8.24989 10.0618 8.24989 10.476Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/src/icons/github.svg b/src/icons/github.svg
deleted file mode 100644
index 166d1fbba..000000000
--- a/src/icons/github.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg version="1.1" x="0px" y="0px" width="18.94px" height="18.47px" viewBox="0 0 18.94 18.47">
-  <path
-    d="M9.47,0C4.24,0,0,4.24,0,9.47c0,4.18,2.71,7.73,6.47,8.98
-      c0.47,0.09,0.65-0.21,0.65-0.46c0-0.22-0.01-0.82-0.01-1.61c-2.63,0.57-3.19-1.27-3.19-1.27c-0.43-1.09-1.05-1.38-1.05-1.38
-      c-0.86-0.59,0.07-0.58,0.07-0.58c0.95,0.07,1.45,0.98,1.45,0.98c0.84,1.45,2.22,1.03,2.76,0.79c0.09-0.61,0.33-1.03,0.6-1.27
-      c-2.1-0.24-4.31-1.05-4.31-4.68c0-1.03,0.37-1.88,0.97-2.54c-0.1-0.24-0.42-1.2,0.09-2.51c0,0,0.79-0.25,2.6,0.97
-      c0.76-0.21,1.57-0.32,2.37-0.32c0.8,0,1.61,0.11,2.37,0.32c1.81-1.23,2.6-0.97,2.6-0.97c0.52,1.3,0.19,2.27,0.09,2.51
-      c0.61,0.66,0.97,1.51,0.97,2.54c0,3.64-2.21,4.44-4.32,4.67c0.34,0.29,0.64,0.87,0.64,1.75c0,1.27-0.01,2.29-0.01,2.6
-      c0,0.25,0.17,0.55,0.65,0.46c3.76-1.25,6.47-4.8,6.47-8.98C18.94,4.24,14.7,0,9.47,0z"
-  />
-</svg>
\ No newline at end of file
diff --git a/src/icons/gitlab.svg b/src/icons/gitlab.svg
new file mode 100644
index 000000000..b8b1d3791
--- /dev/null
+++ b/src/icons/gitlab.svg
@@ -0,0 +1,6 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7503 5.93664L14.7292 5.88069L12.6876 0.348898C12.6461 0.240478 12.5725 0.148505 12.4775 0.0861752C12.3824 0.0249043 12.2716 -0.00460582 12.1598 0.00162945C12.0481 0.00786473 11.9409 0.0495451 11.8527 0.121043C11.7655 0.194593 11.7022 0.294257 11.6715 0.40647L10.293 4.78519H4.71093L3.33241 0.40647C3.30251 0.293645 3.23911 0.193483 3.15121 0.120232C3.06302 0.048734 2.95581 0.00705368 2.84408 0.000818405C2.73234 -0.00541687 2.62145 0.0240932 2.52639 0.0853641C2.43159 0.147946 2.3581 0.239838 2.31629 0.348087L0.270765 5.87744L0.250458 5.93339C-0.0434419 6.73065 -0.0797191 7.6055 0.147096 8.42603C0.373912 9.24656 0.851524 9.96829 1.50792 10.4824L1.51495 10.4881L1.53369 10.5019L4.64376 12.9199L6.1824 14.1289L7.11964 14.8636C7.22927 14.95 7.36313 14.9968 7.50078 14.9968C7.63843 14.9968 7.77229 14.95 7.88192 14.8636L8.81916 14.1289L10.3578 12.9199L13.4866 10.4873L13.4944 10.4808C14.1493 9.96657 14.6258 9.24558 14.8523 8.42616C15.0788 7.60673 15.043 6.73313 14.7503 5.93664Z" fill="#E24329"/>
+<path d="M14.7503 5.93657L14.7292 5.88062C13.7344 6.09261 12.797 6.53009 11.9839 7.1618L7.5 10.6818C9.02692 11.8811 10.3562 12.9231 10.3562 12.9231L13.485 10.4904L13.4929 10.484C14.1487 9.96976 14.626 9.24831 14.8527 8.42819C15.0795 7.60806 15.0436 6.73365 14.7503 5.93657Z" fill="#FC6D26"/>
+<path d="M4.6438 12.9231L6.18243 14.1322L7.11967 14.8668C7.2293 14.9532 7.36317 15 7.50081 15C7.63846 15 7.77233 14.9532 7.88196 14.8668L8.8192 14.1322L10.3578 12.9231C10.3578 12.9231 9.02695 11.8779 7.50003 10.6819C5.97312 11.8779 4.6438 12.9231 4.6438 12.9231Z" fill="#FCA326"/>
+<path d="M3.01531 7.16187C2.20288 6.52886 1.26565 6.09024 0.270765 5.87744L0.250458 5.93339C-0.0434419 6.73065 -0.0797191 7.60549 0.147096 8.42602C0.373912 9.24655 0.851524 9.96829 1.50792 10.4824L1.51495 10.4881L1.53369 10.5019L4.64376 12.9199C4.64376 12.9199 5.97152 11.8779 7.5 10.6786L3.01531 7.16187Z" fill="#FC6D26"/>
+</svg>
diff --git a/src/icons/index.tsx b/src/icons/index.tsx
index 4c144d718..e88b4673f 100644
--- a/src/icons/index.tsx
+++ b/src/icons/index.tsx
@@ -21,7 +21,6 @@ import IconFigmaLoading from './figma-loading.svg';
 import IconFigmaMark from './figma-mark.svg';
 import IconFolder from './folder.svg';
 import IconGap from './gap.svg';
-import IconGithub from './github.svg';
 import IconGrabber from './grabber.svg';
 import IconGrid from './grid.svg';
 import IconHelp from './help.svg';
@@ -63,7 +62,9 @@ import IconUnlink from './unlink.svg';
 import IconFile from './file.svg';
 import IconCollapseArrow from './collapse-arrow.svg';
 import IconExpandArrow from './expand-arrow.svg';
+import IconBorder from './border.svg';
 import IconImage from './image.svg';
+import IconExclamationTriangle from './exclamation-triangle.svg';
 
 export {
   IconAdd,
@@ -89,7 +90,6 @@ export {
   IconFigmaMark,
   IconFolder,
   IconGap,
-  IconGithub,
   IconGrabber,
   IconGrid,
   IconHelp,
@@ -131,5 +131,7 @@ export {
   IconFile,
   IconCollapseArrow,
   IconExpandArrow,
+  IconBorder,
   IconImage,
+  IconExclamationTriangle,
 };
diff --git a/src/icons/jsonbin.svg b/src/icons/jsonbin.svg
new file mode 100644
index 000000000..3d4e86769
--- /dev/null
+++ b/src/icons/jsonbin.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1443 7.91154C14.9951 7.73085 14.7277 7.70523 14.547 7.85435C14.3662 8.00354 14.3407 8.27091 14.4898 8.45163C14.9164 8.9686 15.1514 9.62322 15.1514 10.2949C15.1514 11.8929 13.8513 13.193 12.2533 13.193C10.8052 13.193 9.60177 12.1253 9.38874 10.7359L9.38859 10.7348C9.38203 10.6918 9.37671 10.6485 9.37203 10.605C9.37084 10.5939 9.36981 10.5828 9.36874 10.5717C9.36546 10.5373 9.3629 10.5027 9.36081 10.468C9.36009 10.4556 9.35918 10.4433 9.35865 10.431C9.35656 10.3859 9.35521 10.3406 9.35521 10.2949C9.35521 8.69688 10.6553 7.39682 12.2533 7.39682C12.443 7.39682 12.634 7.41567 12.8211 7.45279C13.037 7.4956 13.2499 7.36623 13.3112 7.15482C13.4173 6.78892 13.4711 6.41076 13.4711 6.03083C13.4711 3.80821 11.6629 2 9.44024 2C8.06769 2 6.82116 2.68015 6.07973 3.80456C5.60467 3.49971 5.05095 3.33574 4.47767 3.33574C2.83921 3.33574 1.50618 4.66877 1.50618 6.30726C1.50618 6.48861 1.5224 6.66761 1.55409 6.84248C0.60206 7.39914 0 8.43326 0 9.54656C0 11.2722 1.40393 12.6761 3.12958 12.6761H9.36281C10.0506 13.5095 11.091 14.0416 12.2534 14.0416C14.3192 14.0416 16 12.3609 16 10.295C15.9999 9.42663 15.6961 8.58016 15.1443 7.91154ZM8.83353 11.8276H3.12958C1.87181 11.8276 0.848559 10.8043 0.848559 9.54656C0.848559 8.81941 1.20106 8.13854 1.77377 7.71285C2.28399 8.66669 3.28127 9.27882 4.39251 9.27882C4.4058 9.27882 4.41898 9.27844 4.43217 9.27797L4.44258 9.27769C4.67401 9.27366 4.85954 9.08479 4.85942 8.85329C4.85929 8.62176 4.67358 8.43307 4.44211 8.42926C3.29108 8.41029 2.35471 7.45839 2.35471 6.3073C2.35471 5.13668 3.30705 4.1843 4.47764 4.1843C5.01292 4.1843 5.52432 4.38449 5.91766 4.7479C6.01591 4.83868 6.15135 4.87793 6.28279 4.85346C6.41435 4.82911 6.52669 4.74411 6.58597 4.62415C7.12697 3.52893 8.22056 2.84853 9.44015 2.84853C11.1949 2.84853 12.6225 4.27609 12.6225 6.0308C12.6225 6.20905 12.6074 6.3868 12.5776 6.56236C12.4696 6.55298 12.3613 6.54823 12.2532 6.54823C10.1874 6.54823 8.50659 8.22894 8.50659 10.2949C8.50659 10.3276 8.50703 10.3603 8.50787 10.3928C8.50834 10.4108 8.50922 10.4287 8.5099 10.4467C8.51047 10.4608 8.51084 10.4751 8.51156 10.4892C8.51287 10.515 8.51465 10.5408 8.5165 10.5665C8.51693 10.5723 8.51722 10.5782 8.51765 10.5841C8.52 10.615 8.52278 10.6459 8.52587 10.6766L8.52597 10.6776C8.56647 11.0772 8.67006 11.4643 8.83353 11.8276Z" fill="currentColor"/>
+<path d="M11.0781 10.0105C11.0781 10.1841 10.6562 10.336 10.6562 10.336V10.5531C10.6562 10.5531 11.0781 10.705 11.0781 10.8786C11.0781 11.1607 11.0218 11.2258 10.9656 11.508C10.8812 11.9638 11.1906 12.1808 11.4718 12.1808H12.0625V11.7467C12.0625 11.7467 11.5562 11.7901 11.5562 11.5297C11.5562 11.3344 11.6125 11.3344 11.6687 10.9003C11.6968 10.705 11.5281 10.5531 11.3593 10.4445C11.5281 10.336 11.6968 10.2058 11.6687 10.0105C11.5843 9.57641 11.5562 9.57641 11.5562 9.38108C11.5562 9.12065 12.0625 9.14235 12.0625 9.14235V8.70829H11.4718C11.1625 8.70829 10.8812 8.92532 10.9656 9.38108C11.0218 9.66322 11.0781 9.72833 11.0781 10.0105Z" fill="currentColor"/>
+<path d="M13.6281 9.38108C13.5718 9.66322 13.5156 9.72833 13.5156 10.0105C13.5156 10.1841 13.9374 10.336 13.9374 10.336V10.5531C13.9374 10.5531 13.5156 10.705 13.5156 10.8786C13.5156 11.1607 13.5718 11.2258 13.6281 11.508C13.7124 11.9638 13.4031 12.1808 13.1218 12.1808H12.5312V11.7467C12.5312 11.7467 13.0374 11.7901 13.0374 11.5297C13.0374 11.3344 12.9812 11.3344 12.9249 10.9003C12.8968 10.705 13.0656 10.5531 13.2343 10.4445C13.0656 10.336 12.8968 10.2058 12.9249 10.0105C12.9812 9.57641 13.0374 9.57641 13.0374 9.38108C13.0374 9.12065 12.5312 9.14235 12.5312 9.14235V8.70829H13.1218C13.4312 8.70829 13.7124 8.92532 13.6281 9.38108Z" fill="currentColor"/>
+</svg>
diff --git a/src/icons/paragraph-indent.svg b/src/icons/paragraph-indent.svg
index 122c31b1f..3ea3360f2 100644
--- a/src/icons/paragraph-indent.svg
+++ b/src/icons/paragraph-indent.svg
@@ -1,3 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.8536 10.1465L9.35355 7.64645L8.64645 8.35356L10.2929 10H5V11H10.2929L8.64645 12.6465L9.35355 13.3536L11.8536 10.8536L12.2071 10.5L11.8536 10.1465ZM23 10H14V11H23V10ZM23 14H9V15H23V14ZM23 18H9V19H23V18ZM23 22H9V23H23V22Z" fill="currentColor" />
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.8536 2.50005L4.35355 0L3.64645 0.70711L5.2929 2.35355H0V3.35355H5.2929L3.64645 5.00005L4.35355 5.70715L6.8536 3.20715L7.2071 2.85355L6.8536 2.50005ZM16 2.35355H9V3.35355H16V2.35355ZM16 6.35355H4V7.35355H16V6.35355ZM16 10.3535H4V11.3535H16V10.3535ZM16 14.3535H4V15.3535H16V14.3535Z" fill="currentColor"/>
+</svg>
diff --git a/src/plugin/NodeManager.ts b/src/plugin/NodeManager.ts
index c95591643..be619ba8c 100644
--- a/src/plugin/NodeManager.ts
+++ b/src/plugin/NodeManager.ts
@@ -80,7 +80,6 @@ export class NodeManager {
 
   private async getNodePluginData(node: BaseNode) {
     const checksum = await HashProperty.read(node);
-
     const registeredPersistentEntry = this.persistentNodesCache.get(node.id);
     if (
       registeredPersistentEntry
@@ -291,6 +290,7 @@ export class NodeManager {
     } else {
       relevantNodes = findAll([figma.root], false);
     }
+
     const unregisteredNodes = relevantNodes
       .filter((node) => {
         const mainKey = getMainKey(node);
diff --git a/src/plugin/__tests__/__snapshots__/setColorValuesOnTarget.test.ts.snap b/src/plugin/__tests__/__snapshots__/setColorValuesOnTarget.test.ts.snap
new file mode 100644
index 000000000..21f6eb9ce
--- /dev/null
+++ b/src/plugin/__tests__/__snapshots__/setColorValuesOnTarget.test.ts.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setColorValuesOnTarget should be able to handle a linear gradient 1`] = `
+Array [
+  Object {
+    "gradientStops": Array [
+      Object {
+        "color": Object {
+          "a": 1,
+          "b": 0,
+          "g": 0,
+          "r": 0,
+        },
+        "position": 0,
+      },
+      Object {
+        "color": Object {
+          "a": 1,
+          "b": 1,
+          "g": 1,
+          "r": 1,
+        },
+        "position": 1,
+      },
+    ],
+    "gradientTransform": Array [
+      Array [
+        1,
+        0,
+        0,
+      ],
+      Array [
+        0,
+        1,
+        0,
+      ],
+    ],
+    "type": "GRADIENT_LINEAR",
+  },
+]
+`;
diff --git a/src/plugin/__tests__/controller.test.ts b/src/plugin/__tests__/controller.test.ts
index 5a0c41ae7..ac7307a8e 100644
--- a/src/plugin/__tests__/controller.test.ts
+++ b/src/plugin/__tests__/controller.test.ts
@@ -2,6 +2,7 @@ import '../controller';
 import { dispatchFigmaEvent } from '../../../tests/__mocks__/figmaMock';
 import { defaultWorker } from '../Worker';
 import * as sendSelectionChangeModule from '../sendSelectionChange';
+import * as sendDocumentChangeModule from '../sendDocumentChange';
 
 describe('controller', () => {
   it('should stop the worker on close', () => {
@@ -16,4 +17,11 @@ describe('controller', () => {
     dispatchFigmaEvent('selectionchange');
     expect(sendSelectionChangeSpy).toBeCalledTimes(1);
   });
+
+  it('should handle document change event', () => {
+    const sendDocumentChangeSpy = jest.spyOn(sendDocumentChangeModule, 'sendDocumentChange');
+    sendDocumentChangeSpy.mockImplementationOnce(async () => {});
+    dispatchFigmaEvent('documentchange');
+    expect(sendDocumentChangeSpy).toBeCalledTimes(1);
+  });
 });
diff --git a/src/plugin/__tests__/notifiers.test.ts b/src/plugin/__tests__/notifiers.test.ts
index 57e0b6bfa..0ee074fd9 100644
--- a/src/plugin/__tests__/notifiers.test.ts
+++ b/src/plugin/__tests__/notifiers.test.ts
@@ -2,7 +2,7 @@ import { StorageProviderType } from '@/constants/StorageProviderType';
 import { MessageFromPluginTypes } from '@/types/messages';
 import { TokenStore } from '@/types/tokens';
 import { mockUiPostMessage } from '../../../tests/__mocks__/figmaMock';
-import { notifySelection, notifySetTokens } from '../notifiers';
+import { notifyException, notifySelection, notifySetTokens } from '../notifiers';
 
 describe('notifySelection', () => {
   it('should work', () => {
@@ -44,3 +44,15 @@ describe('notifySetTokens', () => {
     });
   });
 });
+
+describe('notifyException', () => {
+  it('should work', () => {
+    notifyException('does not work', { foo: 'bar' });
+    expect(mockUiPostMessage).toBeCalledTimes(1);
+    expect(mockUiPostMessage).toBeCalledWith({
+      type: MessageFromPluginTypes.NOTIFY_EXCEPTION,
+      error: 'does not work',
+      opts: { foo: 'bar' },
+    });
+  });
+});
diff --git a/src/plugin/__tests__/setColorValuesOnTarget.test.ts b/src/plugin/__tests__/setColorValuesOnTarget.test.ts
index 7a6429d92..e0090c4d9 100644
--- a/src/plugin/__tests__/setColorValuesOnTarget.test.ts
+++ b/src/plugin/__tests__/setColorValuesOnTarget.test.ts
@@ -66,26 +66,6 @@ describe('setColorValuesOnTarget', () => {
       value: 'linear-gradient(90deg, #000000 0%, #ffffff 100%)',
     }, 'fills');
 
-    expect(mockNode.fills).toEqual([{
-      type: 'GRADIENT_LINEAR',
-      gradientTransform: [
-        [1, 0, 0],
-        [0, 1, 0],
-      ],
-      gradientStops: [
-        {
-          position: 0,
-          color: {
-            r: 0, g: 0, b: 0, a: 1,
-          },
-        },
-        {
-          position: 1,
-          color: {
-            r: 1, g: 1, b: 1, a: 1,
-          },
-        },
-      ],
-    }]);
+    expect(mockNode.fills).toMatchSnapshot();
   });
 });
diff --git a/src/plugin/__tests__/setValuesOnNode.test.ts b/src/plugin/__tests__/setValuesOnNode.test.ts
index 64023d95b..1103f78c1 100644
--- a/src/plugin/__tests__/setValuesOnNode.test.ts
+++ b/src/plugin/__tests__/setValuesOnNode.test.ts
@@ -28,7 +28,7 @@ describe('Can set values on node', () => {
   let frameNodeMock: FrameNode;
 
   beforeEach(() => {
-    textNodeMock = {
+    textNodeMock = ({
       type: 'TEXT',
       characters: 'foobar',
       fontName: {
@@ -39,9 +39,9 @@ describe('Can set values on node', () => {
       textStyleId: undefined,
       getSharedPluginData: () => '',
       setSharedPluginData: () => undefined,
-    } as unknown as TextNode;
+    } as unknown) as TextNode;
 
-    solidNodeMock = {
+    solidNodeMock = ({
       type: 'RECTANGLE',
       cornerRadius: 0,
       topLeftRadius: 0,
@@ -58,16 +58,16 @@ describe('Can set values on node', () => {
       strokeStyleId: '',
       getSharedPluginData: () => '',
       setSharedPluginData: () => undefined,
-    } as unknown as RectangleNode;
+    } as unknown) as RectangleNode;
 
-    frameNodeMock = {
+    frameNodeMock = ({
       type: 'FRAME',
       paddingLeft: 0,
       paddingTop: 0,
       paddingBottom: 0,
       paddingRight: 0,
       itemSpacing: 0,
-    } as unknown as FrameNode;
+    } as unknown) as FrameNode;
   });
 
   it('should be able to setValuesOnNode', async () => {
@@ -109,7 +109,10 @@ describe('Can set values on node', () => {
       blendMode: 'NORMAL',
       visible: true,
       color: {
-        r: 0, g: 0, b: 0, a: 1,
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 1,
       },
     });
     expect(solidNodeMock.strokeWeight).toEqual(2);
@@ -118,243 +121,328 @@ describe('Can set values on node', () => {
 
   it('should be able to resize both width and height at the same time', async () => {
     const mockResize = jest.fn();
-    const mockNode = {
+    const mockNode = ({
       resize: mockResize,
-    } as unknown as RectangleNode;
+    } as unknown) as RectangleNode;
 
-    await setValuesOnNode(mockNode, {
-      sizing: '100px',
-    }, {}, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      mockNode,
+      {
+        sizing: '100px',
+      },
+      {},
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(mockResize).toBeCalledWith(100, 100);
   });
 
   it('should be able to resize width only', async () => {
     const mockResize = jest.fn();
-    const mockNode = {
+    const mockNode = ({
       resize: mockResize,
       height: 50,
-    } as unknown as RectangleNode;
+    } as unknown) as RectangleNode;
 
-    await setValuesOnNode(mockNode, {
-      width: '100px',
-    }, {}, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      mockNode,
+      {
+        width: '100px',
+      },
+      {},
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(mockResize).toBeCalledWith(100, 50);
   });
 
   it('should be able to resize height only', async () => {
     const mockResize = jest.fn();
-    const mockNode = {
+    const mockNode = ({
       resize: mockResize,
       width: 50,
-    } as unknown as RectangleNode;
+    } as unknown) as RectangleNode;
 
-    await setValuesOnNode(mockNode, {
-      height: '100px',
-    }, {}, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      mockNode,
+      {
+        height: '100px',
+      },
+      {},
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(mockResize).toBeCalledWith(50, 100);
   });
 
   it('calls setTextValuesOnTarget if text node and atomic typography tokens are given', () => {
-    setValuesOnNode(textNodeMock, {
-      textCase: 'TITLE',
-      textDecoration: 'STRIKETHROUGH',
-    }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, emptyStylesMap, emptyThemeInfo);
+    setValuesOnNode(
+      textNodeMock,
+      {
+        textCase: 'TITLE',
+        textDecoration: 'STRIKETHROUGH',
+      },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(setTextValuesOnTargetSpy).toHaveBeenCalled();
   });
 
   it('doesnt call setTextValuesOnTarget if no text node', () => {
-    setValuesOnNode(solidNodeMock, {
-      textCase: 'TITLE',
-      textDecoration: 'STRIKETHROUGH',
-    }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, emptyStylesMap, emptyThemeInfo);
+    setValuesOnNode(
+      solidNodeMock,
+      {
+        textCase: 'TITLE',
+        textDecoration: 'STRIKETHROUGH',
+      },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(setTextValuesOnTargetSpy).not.toHaveBeenCalled();
   });
 
   it('calls setTextValuesOnTarget if text node and composite typography tokens are given', () => {
-    setValuesOnNode(textNodeMock, {
-      typography: {
-        fontFamily: 'Inter',
-        fontWeight: 'Bold',
-        fontSize: '24',
-      },
-    }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, emptyStylesMap, emptyThemeInfo);
+    setValuesOnNode(
+      textNodeMock,
+      {
+        typography: {
+          fontFamily: 'Inter',
+          fontWeight: 'Bold',
+          fontSize: '24',
+        },
+      },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(setTextValuesOnTargetSpy).toHaveBeenCalled();
   });
 
   it('sets textstyle if matching Style is found', async () => {
-    await setValuesOnNode(textNodeMock, {
-      typography: {
-        fontFamily: 'Inter',
-        fontWeight: 'Bold',
-        fontSize: '24',
-      },
-    }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, {
-      ...emptyStylesMap,
-      textStyles: new Map([
-        ['type/heading/h1', { name: 'type/heading/h1', id: '123' } as TextStyle],
-      ]),
-    }, emptyThemeInfo);
+    await setValuesOnNode(
+      textNodeMock,
+      {
+        typography: {
+          fontFamily: 'Inter',
+          fontWeight: 'Bold',
+          fontSize: '24',
+        },
+      },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      {
+        ...emptyStylesMap,
+        textStyles: new Map([['type/heading/h1', { name: 'type/heading/h1', id: '123' } as TextStyle]]),
+      },
+      emptyThemeInfo,
+    );
     expect(setTextValuesOnTargetSpy).not.toHaveBeenCalled();
     expect(textNodeMock).toEqual({ ...textNodeMock, textStyleId: '123' });
   });
 
   it('sets textstyle if matching Style is found and first part is ignored', async () => {
-    await setValuesOnNode(textNodeMock, {
-      typography: {
-        fontFamily: 'Inter',
-        fontWeight: 'Bold',
-        fontSize: '24',
-      },
-    }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, {
-      ...emptyStylesMap,
-      textStyles: new Map([
-        ['heading/h1', { name: 'heading/h1', id: '456' } as TextStyle],
-      ]),
-    }, emptyThemeInfo, true);
+    await setValuesOnNode(
+      textNodeMock,
+      {
+        typography: {
+          fontFamily: 'Inter',
+          fontWeight: 'Bold',
+          fontSize: '24',
+        },
+      },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      {
+        ...emptyStylesMap,
+        textStyles: new Map([['heading/h1', { name: 'heading/h1', id: '456' } as TextStyle]]),
+      },
+      emptyThemeInfo,
+      true,
+    );
     expect(setTextValuesOnTargetSpy).not.toHaveBeenCalled();
     expect(textNodeMock).toEqual({ ...textNodeMock, textStyleId: '456' });
   });
 
   it('sets effectStyle if matching Style is found', async () => {
-    await setValuesOnNode(solidNodeMock, {
-      boxShadow: {
-        type: BoxShadowTypes.DROP_SHADOW,
-        color: '#00000080',
-        x: 0,
-        y: 0,
-        blur: 10,
-        spread: 0,
-      },
-    }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, {
-      ...emptyStylesMap,
-      effectStyles: new Map([
-        ['shadows/default', { name: 'shadows/default', id: '123' } as EffectStyle],
-      ]),
-    }, emptyThemeInfo);
+    await setValuesOnNode(
+      solidNodeMock,
+      {
+        boxShadow: {
+          type: BoxShadowTypes.DROP_SHADOW,
+          color: '#00000080',
+          x: 0,
+          y: 0,
+          blur: 10,
+          spread: 0,
+        },
+      },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      {
+        ...emptyStylesMap,
+        effectStyles: new Map([['shadows/default', { name: 'shadows/default', id: '123' } as EffectStyle]]),
+      },
+      emptyThemeInfo,
+    );
     expect(setEffectValuesOnTargetSpy).not.toHaveBeenCalled();
     expect(solidNodeMock).toEqual({ ...solidNodeMock, effectStyleId: '123' });
   });
 
   it('calls setEffectValuesOnTarget if effect node and effects are given', async () => {
-    await setValuesOnNode(solidNodeMock, {
-      boxShadow: {
-        type: BoxShadowTypes.DROP_SHADOW,
-        color: '#00000080',
-        x: 0,
-        y: 0,
-        blur: 10,
-        spread: 0,
-      },
-    }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, {
-      ...emptyStylesMap,
-      effectStyles: new Map([
-        ['shadows/other', { name: 'shadows/other', id: '123' } as EffectStyle],
-      ]),
-    }, emptyThemeInfo);
+    await setValuesOnNode(
+      solidNodeMock,
+      {
+        boxShadow: {
+          type: BoxShadowTypes.DROP_SHADOW,
+          color: '#00000080',
+          x: 0,
+          y: 0,
+          blur: 10,
+          spread: 0,
+        },
+      },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      {
+        ...emptyStylesMap,
+        effectStyles: new Map([['shadows/other', { name: 'shadows/other', id: '123' } as EffectStyle]]),
+      },
+      emptyThemeInfo,
+    );
     expect(setEffectValuesOnTargetSpy).toHaveBeenCalled();
   });
 
   it('should be able to find a theme prefixed style', async () => {
-    await setValuesOnNode(solidNodeMock, {
-      boxShadow: {
-        type: BoxShadowTypes.DROP_SHADOW,
-        color: '#00000080',
-        x: 0,
-        y: 0,
-        blur: 10,
-        spread: 0,
-      },
-    }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, {
-      ...emptyStylesMap,
-      effectStyles: new Map([
-        ['light/shadows/default', { name: 'light/shadows/default', id: '123' } as EffectStyle],
-      ]),
-    }, {
-      activeTheme: 'light',
-      themes: [{ id: 'light', name: 'light', selectedTokenSets: {} }],
-    }, false, true);
+    await setValuesOnNode(
+      solidNodeMock,
+      {
+        boxShadow: {
+          type: BoxShadowTypes.DROP_SHADOW,
+          color: '#00000080',
+          x: 0,
+          y: 0,
+          blur: 10,
+          spread: 0,
+        },
+      },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      {
+        ...emptyStylesMap,
+        effectStyles: new Map([['light/shadows/default', { name: 'light/shadows/default', id: '123' } as EffectStyle]]),
+      },
+      {
+        activeTheme: 'light',
+        themes: [{ id: 'light', name: 'light', selectedTokenSets: {} }],
+      },
+      false,
+      true,
+    );
     expect(setEffectValuesOnTargetSpy).not.toHaveBeenCalled();
     expect(solidNodeMock).toEqual({ ...solidNodeMock, effectStyleId: '123' });
   });
 
   it('sets fillStyle if matching Style', async () => {
-    await setValuesOnNode(solidNodeMock, {
-      fill: '#ff0000',
-    }, {
-      fill: 'colors.red',
-    }, {
-      ...emptyStylesMap,
-      paintStyles: new Map([
-        ['colors/red', { name: 'colors/red', id: '123' } as PaintStyle],
-      ]),
-    }, emptyThemeInfo);
+    await setValuesOnNode(
+      solidNodeMock,
+      {
+        fill: '#ff0000',
+      },
+      {
+        fill: 'colors.red',
+      },
+      {
+        ...emptyStylesMap,
+        paintStyles: new Map([['colors/red', { name: 'colors/red', id: '123' } as PaintStyle]]),
+      },
+      emptyThemeInfo,
+    );
     expect(setColorValuesOnTargetSpy).not.toHaveBeenCalled();
     expect(solidNodeMock).toEqual({ ...solidNodeMock, fillStyleId: '123' });
   });
 
   it('calls setColorValuesOnTarget if fill node and fill is given', async () => {
-    await setValuesOnNode(solidNodeMock, {
-      fill: '#ff0000',
-    }, {
-      fill: 'colors.red',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      solidNodeMock,
+      {
+        fill: '#ff0000',
+      },
+      {
+        fill: 'colors.red',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(setColorValuesOnTargetSpy).toHaveBeenCalledWith(solidNodeMock, { value: '#ff0000' }, 'fills');
   });
 
   it('sets strokeStyleId if matching Style', async () => {
-    await setValuesOnNode(solidNodeMock, {
-      border: '#ff0000',
-    }, {
-      border: 'colors.red',
-    }, {
-      ...emptyStylesMap,
-      paintStyles: new Map([
-        ['colors/red', { name: 'colors/red', id: '123' } as PaintStyle],
-      ]),
-    }, emptyThemeInfo);
+    await setValuesOnNode(
+      solidNodeMock,
+      {
+        borderColor: '#ff0000',
+      },
+      {
+        borderColor: 'colors.red',
+      },
+      {
+        ...emptyStylesMap,
+        paintStyles: new Map([['colors/red', { name: 'colors/red', id: '123' } as PaintStyle]]),
+      },
+      emptyThemeInfo,
+    );
     expect(setColorValuesOnTargetSpy).not.toHaveBeenCalled();
     expect(solidNodeMock).toEqual({ ...solidNodeMock, strokeStyleId: '123' });
   });
 
   it('calls setColorValuesOnTarget if border node and border is given', async () => {
-    await setValuesOnNode(solidNodeMock, {
-      border: '#ff0000',
-    }, {
-      border: 'colors.red',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      solidNodeMock,
+      {
+        borderColor: '#ff0000',
+      },
+      {
+        borderColor: 'colors.red',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(setColorValuesOnTargetSpy).toHaveBeenCalledWith(solidNodeMock, { value: '#ff0000' }, 'strokes');
   });
 
   it('can set padding and spacing if spacing is defined', async () => {
-    await setValuesOnNode(frameNodeMock, {
-      spacing: 20,
-    }, {
-      spacing: 'spacing.lg',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      frameNodeMock,
+      {
+        spacing: 20,
+      },
+      {
+        spacing: 'spacing.lg',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(frameNodeMock.paddingLeft).toBe(20);
     expect(frameNodeMock.paddingRight).toBe(20);
     expect(frameNodeMock.paddingTop).toBe(20);
@@ -362,119 +450,195 @@ describe('Can set values on node', () => {
   });
 
   it('can set horizontalPadding', async () => {
-    await setValuesOnNode(frameNodeMock, {
-      horizontalPadding: 20,
-    }, {
-      horizontalPadding: 'spacing.lg',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      frameNodeMock,
+      {
+        horizontalPadding: 20,
+      },
+      {
+        horizontalPadding: 'spacing.lg',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(frameNodeMock.paddingLeft).toBe(20);
     expect(frameNodeMock.paddingRight).toBe(20);
   });
 
   it('can set verticalPadding', async () => {
-    await setValuesOnNode(frameNodeMock, {
-      verticalPadding: 20,
-    }, {
-      verticalPadding: 'spacing.lg',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      frameNodeMock,
+      {
+        verticalPadding: 20,
+      },
+      {
+        verticalPadding: 'spacing.lg',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(frameNodeMock.paddingTop).toBe(20);
     expect(frameNodeMock.paddingBottom).toBe(20);
   });
 
   it('can set itemSpacing', async () => {
-    await setValuesOnNode(frameNodeMock, {
-      itemSpacing: 20,
-    }, {
-      itemSpacing: 'spacing.lg',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      frameNodeMock,
+      {
+        itemSpacing: 20,
+      },
+      {
+        itemSpacing: 'spacing.lg',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(frameNodeMock.itemSpacing).toBe(20);
   });
 
   it('can set paddingTop', async () => {
-    await setValuesOnNode(frameNodeMock, {
-      paddingTop: 20,
-    }, {
-      paddingTop: 'spacing.lg',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      frameNodeMock,
+      {
+        paddingTop: 20,
+      },
+      {
+        paddingTop: 'spacing.lg',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(frameNodeMock.paddingTop).toBe(20);
   });
 
   it('can set paddingRight', async () => {
-    await setValuesOnNode(frameNodeMock, {
-      paddingRight: 20,
-    }, {
-      paddingRight: 'spacing.lg',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      frameNodeMock,
+      {
+        paddingRight: 20,
+      },
+      {
+        paddingRight: 'spacing.lg',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(frameNodeMock.paddingRight).toBe(20);
   });
 
   it('can set paddingBottom', async () => {
-    await setValuesOnNode(frameNodeMock, {
-      paddingBottom: 20,
-    }, {
-      paddingBottom: 'spacing.lg',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      frameNodeMock,
+      {
+        paddingBottom: 20,
+      },
+      {
+        paddingBottom: 'spacing.lg',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(frameNodeMock.paddingBottom).toBe(20);
   });
 
   it('can set paddingLeft', async () => {
-    await setValuesOnNode(frameNodeMock, {
-      paddingLeft: 20,
-    }, {
-      paddingLeft: 'spacing.lg',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      frameNodeMock,
+      {
+        paddingLeft: 20,
+      },
+      {
+        paddingLeft: 'spacing.lg',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(frameNodeMock.paddingLeft).toBe(20);
   });
 
   it('changes fill if needed', async () => {
-    await setValuesOnNode(textNodeMock, { fill: '#ff0000' }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-      fill: 'fg.default',
-    }, emptyStylesMap, emptyThemeInfo);
-    expect(textNodeMock.fills).toEqual([{
-      color: {
-        r: 1, g: 0, b: 0,
+    await setValuesOnNode(
+      textNodeMock,
+      { fill: '#ff0000' },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+        fill: 'fg.default',
       },
-      opacity: 1,
-      type: 'SOLID',
-    }]);
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
+    expect(textNodeMock.fills).toEqual([
+      {
+        color: {
+          r: 1,
+          g: 0,
+          b: 0,
+        },
+        opacity: 1,
+        type: 'SOLID',
+      },
+    ]);
   });
 
   it('changes characters if needed', async () => {
-    await setValuesOnNode(textNodeMock, { fill: '#ff0000', value: 'My new content' }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-      fill: 'default',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      textNodeMock,
+      { fill: '#ff0000', value: 'My new content' },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+        fill: 'default',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(textNodeMock.characters).toEqual('My new content');
   });
 
   it('doesnt change characters if not needed', async () => {
-    await setValuesOnNode(textNodeMock, { fill: '#00ff00' }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-      fill: 'fg.default',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      textNodeMock,
+      { fill: '#00ff00' },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+        fill: 'fg.default',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(textNodeMock.characters).toEqual('foobar');
   });
 
   it('should change characters when the value is 0', async () => {
-    await setValuesOnNode(textNodeMock, {
-      value: 0,
-    }, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      textNodeMock,
+      {
+        value: 0,
+      },
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(figma.loadFontAsync).toHaveBeenCalled();
     expect(textNodeMock.characters).toEqual('0');
   });
 
   it('should not change characters when the value is undefined', async () => {
-    await setValuesOnNode(textNodeMock, {}, {
-      typography: 'type.heading.h1',
-      boxShadow: 'shadows.default',
-    }, emptyStylesMap, emptyThemeInfo);
+    await setValuesOnNode(
+      textNodeMock,
+      {},
+      {
+        typography: 'type.heading.h1',
+        boxShadow: 'shadows.default',
+      },
+      emptyStylesMap,
+      emptyThemeInfo,
+    );
     expect(figma.loadFontAsync).not.toHaveBeenCalled();
     expect(textNodeMock.characters).toEqual('foobar');
   });
@@ -500,4 +664,55 @@ describe('Can set values on node', () => {
       },
     ]);
   });
+
+  it('should resize when dimension token applied to the node which has no itemSpacing property', async () => {
+    const mockResize = jest.fn();
+    const mockNode = {
+      resize: mockResize,
+    } as unknown as RectangleNode;
+    const values = {
+      dimension: '12px',
+    };
+    const data = { dimension: 'dimension.regular' };
+    await setValuesOnNode(mockNode, values, data, emptyStylesMap, emptyThemeInfo);
+    expect(mockResize).toBeCalledWith(12, 12);
+  });
+
+  it('should set itemSpacing when dimension token applied to the node which has itemSpacing property', async () => {
+    const mockResize = jest.fn();
+    const mockNode = {
+      resize: mockResize,
+      itemSpacing: 0,
+      primaryAxisAlignItems: 'SPACE_BETWEEN',
+    } as unknown as FrameNode;
+    const values = {
+      dimension: '12px',
+    };
+    const data = { dimension: 'dimension.regular' };
+    await setValuesOnNode(mockNode, values, data, emptyStylesMap, emptyThemeInfo);
+    expect(mockResize).toBeCalledTimes(0);
+    expect(mockNode.itemSpacing).toEqual(12);
+  });
+  it('can set border token', async () => {
+    const values = {
+      border: {
+        color: '#ffffff',
+        width: '12px',
+        style: 'solid',
+      },
+    };
+    const data = { border: 'border.regular' };
+    await setValuesOnNode(solidNodeMock, values, data, emptyStylesMap, emptyThemeInfo);
+    expect(solidNodeMock.strokes).toEqual([
+      {
+        color: {
+          b: 1,
+          g: 1,
+          r: 1,
+        },
+        opacity: 1,
+        type: 'SOLID',
+      },
+    ]);
+  });
 });
diff --git a/src/plugin/asyncMessageHandlers/__tests__/remapTokens.test.ts b/src/plugin/asyncMessageHandlers/__tests__/remapTokens.test.ts
new file mode 100644
index 000000000..5679a7f80
--- /dev/null
+++ b/src/plugin/asyncMessageHandlers/__tests__/remapTokens.test.ts
@@ -0,0 +1,230 @@
+import { AsyncMessageTypes } from '@/types/AsyncMessages';
+import { defaultNodeManager } from '../../NodeManager';
+import { updatePluginData } from '@/plugin/pluginData';
+import { remapTokens } from '../remapTokens';
+import { UpdateMode } from '@/constants/UpdateMode';
+import { TokenTypes } from '@/constants/TokenTypes';
+import { AnyTokenList } from '@/types/tokens';
+import { Properties } from '@/constants/Properties';
+
+jest.mock('@/plugin/pluginData', () => ({
+  updatePluginData: jest.fn(),
+}));
+
+jest.mock('@/plugin/node', () => ({
+  updateNodes: jest.fn(),
+}));
+
+describe('remapTokens', () => {
+  const tokens = [
+    {
+      internal__Parent: 'global',
+      name: 'color.amber.800',
+      rawValue: '#92400e',
+      type: TokenTypes.COLOR,
+      value: '#92400e',
+    },
+    {
+      internal__Parent: 'global',
+      name: 'color.red.400',
+      rawValue: '#f87171',
+      type: TokenTypes.COLOR,
+      value: '#f87171',
+    },
+    {
+      internal__Parent: 'global',
+      name: 'border-radius.7',
+      rawValue: '34px',
+      type: TokenTypes.BORDER_RADIUS,
+      value: '34px',
+    },
+    {
+      internal__Parent: 'global',
+      name: 'border-width.4',
+      rawValue: '10px',
+      type: TokenTypes.BORDER_WIDTH,
+      value: '10px',
+    },
+    {
+      internal__Parent: 'global',
+      name: 'opacity.80',
+      rawValue: '80%',
+      type: TokenTypes.OPACITY,
+      value: '80%',
+    },
+    {
+      internal__Parent: 'global',
+      name: 'composition.old',
+      rawValue: {
+        fill: '#ffffff',
+        opacity: '50%',
+      },
+      type: TokenTypes.OPACITY,
+      value: {
+        fill: '#ffffff',
+        opacity: '50%',
+      },
+    },
+    {
+      internal__Parent: 'global',
+      name: 'composition.new',
+      rawValue: {
+        fill: '#000000',
+        opacity: '80%',
+      },
+      type: TokenTypes.OPACITY,
+      value: {
+        fill: '#000000',
+        opacity: '80%',
+      },
+    },
+  ] as AnyTokenList;
+  const tokensMap = new Map(tokens.map((token) => [token.name, token]));
+  const findNodesSpy = jest.spyOn(defaultNodeManager, 'findNodesWithData');
+  it('should update plugin data', async () => {
+    findNodesSpy.mockImplementationOnce(() => Promise.resolve([
+      {
+        hash: '9c7e97584a40179e12c9e2c75d34f80e66fe6f64',
+        id: '295:3',
+        node: {
+          id: '295:3',
+        } as RectangleNode,
+        tokens: {
+          borderRadius: 'border-radius.7',
+          borderWidth: 'border-width.4',
+          fill: 'color.red.400',
+          opacity: 'opacity.80',
+        },
+      },
+    ]));
+
+    await remapTokens({
+      type: AsyncMessageTypes.REMAP_TOKENS,
+      oldName: 'color.red.400',
+      newName: 'color.amber.800',
+      updateMode: UpdateMode.SELECTION,
+      category: Properties.fill,
+      tokens,
+    });
+
+    expect(updatePluginData).toBeCalledWith({
+      entries: [
+        {
+          hash: '9c7e97584a40179e12c9e2c75d34f80e66fe6f64',
+          id: '295:3',
+          node: {
+            id: '295:3',
+          } as RectangleNode,
+          tokens: {
+            borderRadius: 'border-radius.7',
+            borderWidth: 'border-width.4',
+            fill: 'color.amber.800',
+            opacity: 'opacity.80',
+          },
+        },
+      ],
+      values: { fill: 'color.amber.800' },
+      shouldOverride: true,
+      tokensMap,
+    });
+  });
+
+  it('should update plugin data with old tokens when remapping composition token', async () => {
+    findNodesSpy.mockImplementationOnce(() => Promise.resolve([
+      {
+        hash: '9c7e97584a40179e12c9e2c75d34f80e66fe6f64',
+        id: '295:3',
+        node: {
+          id: '295:3',
+        } as RectangleNode,
+        tokens: {
+          borderRadius: 'border-radius.7',
+          borderWidth: 'border-width.4',
+          fill: 'color.red.400',
+          opacity: 'opacity.80',
+          composition: 'composition.old',
+        },
+      },
+    ]));
+
+    await remapTokens({
+      type: AsyncMessageTypes.REMAP_TOKENS,
+      oldName: 'composition.old',
+      newName: 'composition.new',
+      updateMode: UpdateMode.SELECTION,
+      category: Properties.composition,
+      tokens,
+    });
+
+    expect(updatePluginData).toBeCalledWith({
+      entries: [
+        {
+          hash: '9c7e97584a40179e12c9e2c75d34f80e66fe6f64',
+          id: '295:3',
+          node: {
+            id: '295:3',
+          } as RectangleNode,
+          tokens: {
+            borderRadius: 'border-radius.7',
+            borderWidth: 'border-width.4',
+            composition: 'composition.old',
+            fill: 'color.red.400',
+            opacity: 'opacity.80',
+          },
+        },
+      ],
+      values: { composition: 'composition.new' },
+      shouldOverride: true,
+      tokensMap,
+    });
+  });
+
+  it('should update plugin data with empty values when updateMode is not selection', async () => {
+    findNodesSpy.mockImplementationOnce(() => Promise.resolve([
+      {
+        hash: '9c7e97584a40179e12c9e2c75d34f80e66fe6f64',
+        id: '295:3',
+        node: {
+          id: '295:3',
+        } as RectangleNode,
+        tokens: {
+          borderRadius: 'border-radius.7',
+          borderWidth: 'border-width.4',
+          fill: 'color.red.400',
+          opacity: 'opacity.80',
+          composition: 'composition.old',
+        },
+      },
+    ]));
+
+    await remapTokens({
+      type: AsyncMessageTypes.REMAP_TOKENS,
+      oldName: 'composition.old',
+      newName: 'composition.new',
+      updateMode: UpdateMode.PAGE,
+      category: Properties.composition,
+      tokens,
+    });
+
+    expect(updatePluginData).toBeCalledWith({
+      entries: [
+        {
+          hash: '9c7e97584a40179e12c9e2c75d34f80e66fe6f64',
+          id: '295:3',
+          node: {
+            id: '295:3',
+          } as RectangleNode,
+          tokens: {
+            borderRadius: 'border-radius.7',
+            borderWidth: 'border-width.4',
+            composition: 'composition.new',
+            fill: 'color.red.400',
+            opacity: 'opacity.80',
+          },
+        },
+      ],
+      values: {},
+      shouldOverride: true,
+    });
+  });
+});
diff --git a/src/plugin/asyncMessageHandlers/__tests__/update.test.ts b/src/plugin/asyncMessageHandlers/__tests__/update.test.ts
index 185e773c6..fffdc8e1e 100644
--- a/src/plugin/asyncMessageHandlers/__tests__/update.test.ts
+++ b/src/plugin/asyncMessageHandlers/__tests__/update.test.ts
@@ -8,6 +8,7 @@ import {
   UpdatedAtProperty, UsedTokenSetProperty, ThemesProperty, ValuesProperty, ActiveThemeProperty, CheckForChangesProperty,
 } from '@/figmaStorage';
 import * as NodeManager from '../../NodeManager';
+import * as swapStyles from '../swapStyles';
 
 describe('update', () => {
   const findNodesWithDataSpy = jest.spyOn(NodeManager.defaultNodeManager, 'findNodesWithData');
@@ -17,6 +18,7 @@ describe('update', () => {
   const UpdatedAtPropertyWriteSpy = jest.spyOn(UpdatedAtProperty, 'write');
   const ActiveThemePropertyWriteSpy = jest.spyOn(ActiveThemeProperty, 'write');
   const CheckForChangesPropertyWriteSpy = jest.spyOn(CheckForChangesProperty, 'write');
+  const mockSwapStyles = jest.spyOn(swapStyles, 'swapStyles');
 
   const mockUpdateMessage: UpdateAsyncMessage = {
     type: AsyncMessageTypes.UPDATE,
@@ -52,6 +54,7 @@ describe('update', () => {
       updateOnChange: false,
       updateRemote: true,
       updateStyles: true,
+      shouldSwapStyles: true,
     },
     usedTokenSet: {
       global: TokenSetStatus.ENABLED,
@@ -81,6 +84,7 @@ describe('update', () => {
     expect(UpdatedAtPropertyWriteSpy).toBeCalledWith(mockUpdateMessage.updatedAt);
     expect(ActiveThemePropertyWriteSpy).toBeCalledWith(mockUpdateMessage.activeTheme);
     expect(CheckForChangesPropertyWriteSpy).toBeCalledWith(false);
+    expect(mockSwapStyles).toBeCalledWith(mockUpdateMessage.activeTheme, mockUpdateMessage.themes, mockUpdateMessage.settings.updateMode);
 
     runAfter.forEach((fn) => fn());
   });
diff --git a/src/plugin/asyncMessageHandlers/applySiblingStyle.ts b/src/plugin/asyncMessageHandlers/applySiblingStyle.ts
new file mode 100644
index 000000000..ec01598fb
--- /dev/null
+++ b/src/plugin/asyncMessageHandlers/applySiblingStyle.ts
@@ -0,0 +1,79 @@
+import { getNewStyleId } from './getSiblingStyleId';
+import { StyleIdMap, StyleThemeMap } from '@/types/StyleIdMap';
+
+// Goes through all styleable properties of a node and swaps the style - this traverses the whole tree of a node
+export async function applySiblingStyleId(node: BaseNode, styleIds: StyleIdMap, styleMap: StyleThemeMap, newTheme: string) {
+  try {
+    switch (node.type) {
+      // Text layers can have stroke, effects and fill styles.
+      case 'TEXT':
+        {
+          const newStrokeStyleId = await getNewStyleId(node.strokeStyleId as string, styleIds, styleMap, newTheme);
+          const newEffectStyleId = await getNewStyleId(node.effectStyleId as string, styleIds, styleMap, newTheme);
+
+          if (newStrokeStyleId) {
+            node.strokeStyleId = newStrokeStyleId;
+          }
+          if (newEffectStyleId) {
+            node.effectStyleId = newEffectStyleId;
+          }
+
+          // A text layer can have mixed styles, we need to swap the segments.
+          if (node.fillStyleId !== figma.mixed) {
+            const newFillStyleId = await getNewStyleId(node.fillStyleId as string, styleIds, styleMap, newTheme);
+            if (newFillStyleId) {
+              node.fillStyleId = newFillStyleId;
+            }
+          } else {
+            node.getStyledTextSegments(['fillStyleId']).forEach(async (segment) => {
+              const newFillStyleId = await getNewStyleId(segment.fillStyleId, styleIds, styleMap, newTheme);
+
+              if (newFillStyleId) {
+                node.setRangeFillStyleId(segment.start, segment.end, newFillStyleId);
+              }
+            });
+          }
+        }
+        break;
+
+      // Vector layers can have stroke, effects and fill styles.
+      case 'ELLIPSE':
+      case 'LINE':
+      case 'POLYGON':
+      case 'STAR':
+      case 'RECTANGLE':
+      case 'VECTOR':
+      case 'COMPONENT':
+      case 'INSTANCE':
+      case 'FRAME':
+      case 'BOOLEAN_OPERATION':
+        {
+          const newFillStyleId = await getNewStyleId(node.fillStyleId as string, styleIds, styleMap, newTheme);
+          const newStrokeStyleId = await getNewStyleId(node.strokeStyleId as string, styleIds, styleMap, newTheme);
+          const newEffectStyleId = await getNewStyleId(node.effectStyleId as string, styleIds, styleMap, newTheme);
+          if (newFillStyleId) {
+            node.fillStyleId = newFillStyleId;
+          }
+          if (newStrokeStyleId) {
+            node.strokeStyleId = newStrokeStyleId;
+          }
+          if (newEffectStyleId) {
+            node.effectStyleId = newEffectStyleId;
+          }
+          if (['COMPONENT', 'INSTANCE', 'FRAME', 'BOOLEAN_OPERATION'].includes(node.type) && 'children' in node) {
+            await Promise.all(node.children.map((child) => applySiblingStyleId(child, styleIds, styleMap, newTheme)));
+          }
+        }
+        break;
+
+      case 'GROUP':
+        await Promise.all(node.children.map((child) => applySiblingStyleId(child, styleIds, styleMap, newTheme)));
+        break;
+
+      default:
+        break;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
diff --git a/src/plugin/asyncMessageHandlers/getSiblingStyleId.ts b/src/plugin/asyncMessageHandlers/getSiblingStyleId.ts
new file mode 100644
index 000000000..f3290007d
--- /dev/null
+++ b/src/plugin/asyncMessageHandlers/getSiblingStyleId.ts
@@ -0,0 +1,58 @@
+import { StyleIdMap, StyleThemeMap } from '@/types/StyleIdMap';
+
+const memo: StyleIdMap = {};
+
+// Gets the sibling style for a given style considering the new theme
+export async function getNewStyleId(styleId: string, styleIds: StyleIdMap, styleMap: StyleThemeMap, newTheme: string) {
+  if (!styleId) {
+    return null;
+  }
+
+  // Removes the , 4:16 part after each style (we seem to store styleIds without that part)
+  const normalizedStyleId = styleId.split(',')[0].concat(',');
+
+  const tokenName = styleIds[normalizedStyleId];
+  // If there is no figmaStyleReference for that token, we can't do anything
+  if (!tokenName) {
+    console.warn(`${normalizedStyleId} not found`);
+    return null;
+  }
+
+  // Get the sibling style for the new theme
+  const newStyleToFetch = styleMap[tokenName][newTheme];
+
+  // If there is none, return
+  if (!newStyleToFetch) {
+    console.warn(`${tokenName} for theme ${newTheme} not found`);
+    return null;
+  }
+
+  let actualStyleId = newStyleToFetch;
+
+  // If we already have the styleId in memory, return it
+  if (memo.hasOwnProperty(newStyleToFetch)) {
+    actualStyleId = memo[newStyleToFetch];
+  } else {
+    // Otherwise, fetch it and store it in memory
+    // This fetches the remote style and returns the local styleId that we need to apply the token
+    const styleKeyMatch = newStyleToFetch.match(/^S:([a-zA-Z0-9_-]+),/);
+    if (styleKeyMatch) {
+      actualStyleId = await new Promise<string>((resolve) => {
+        figma.importStyleByKeyAsync(styleKeyMatch[1])
+          .then((style) => resolve(style.id))
+          .catch(() => resolve(newStyleToFetch));
+      });
+      memo[newStyleToFetch] = actualStyleId;
+    }
+  }
+
+  const figmaStyle = figma.getStyleById(actualStyleId);
+
+  // If there is no figmaStyle for that token, we can't do anything
+  if (!figmaStyle) {
+    console.warn(`figma style for ${tokenName} not found, ${newStyleToFetch}`);
+    return null;
+  }
+
+  return figmaStyle.id;
+}
diff --git a/src/plugin/asyncMessageHandlers/index.ts b/src/plugin/asyncMessageHandlers/index.ts
index 3f1abfa08..7f1b52cd9 100644
--- a/src/plugin/asyncMessageHandlers/index.ts
+++ b/src/plugin/asyncMessageHandlers/index.ts
@@ -2,6 +2,9 @@ export * from './credentials';
 export * from './changedTabs';
 export * from './removeSingleCredential';
 export * from './setStorageType';
+export * from './setOnboardingExplainerSets';
+export * from './setOnboardingExplainerSyncProviders';
+export * from './setOnboardingExplainerInspect';
 export * from './setNodeData';
 export * from './removeTokensByValue';
 export * from './remapTokens';
@@ -23,3 +26,4 @@ export * from './resolveStyleInfo';
 export * from './renameStyles';
 export * from './bulkRemapTokens';
 export * from './removeStyles';
+export * from './setNoneValuesOnNode';
diff --git a/src/plugin/asyncMessageHandlers/remapTokens.ts b/src/plugin/asyncMessageHandlers/remapTokens.ts
index a3fb58422..31aa3d5b8 100644
--- a/src/plugin/asyncMessageHandlers/remapTokens.ts
+++ b/src/plugin/asyncMessageHandlers/remapTokens.ts
@@ -16,7 +16,6 @@ export const remapTokens: AsyncMessageChannelHandlers[AsyncMessageTypes.REMAP_TO
     const allWithData = await defaultNodeManager.findNodesWithData({
       updateMode,
     });
-
     // Go through allWithData and update all appearances of oldName to newName
     const updatedNodes: NodeManagerNode[] = [];
     const updatedNodesWithOldTokens: NodeManagerNode[] = [];
@@ -50,7 +49,6 @@ export const remapTokens: AsyncMessageChannelHandlers[AsyncMessageTypes.REMAP_TO
         });
       }
     });
-
     if (updateMode === UpdateMode.SELECTION && category && tokens) {
       const tokensMap = tokenArrayGroupToMap(tokens);
       if (category === TokenTypes.COMPOSITION) {
diff --git a/src/plugin/asyncMessageHandlers/setNoneValuesOnNode.ts b/src/plugin/asyncMessageHandlers/setNoneValuesOnNode.ts
new file mode 100644
index 000000000..bd622eab4
--- /dev/null
+++ b/src/plugin/asyncMessageHandlers/setNoneValuesOnNode.ts
@@ -0,0 +1,36 @@
+import { AsyncMessageChannelHandlers } from '@/AsyncMessageChannel';
+import { AsyncMessageTypes } from '@/types/AsyncMessages';
+import { tokenArrayGroupToMap } from '@/utils/tokenArrayGroupToMap';
+import { updateNodes } from '../node';
+import { defaultNodeManager } from '../NodeManager';
+import { updatePluginData } from '../pluginData';
+import { sendSelectionChange } from '../sendSelectionChange';
+
+export const setNoneValuesOnNode: AsyncMessageChannelHandlers[AsyncMessageTypes.SET_NONE_VALUES_ON_NODE] = async (msg) => {
+  const nodesToRemove: { [key: string]: string[] } = {};
+
+  msg.tokensToSet.forEach((token) => {
+    token.nodes.forEach(({ id }) => {
+      nodesToRemove[id] = nodesToRemove[id] ? [...nodesToRemove[id], token.property] : [token.property];
+    });
+  });
+  const tokensMap = tokenArrayGroupToMap(msg.tokens);
+
+  await Promise.all(
+    Object.entries(nodesToRemove).map(async (node) => {
+      const newEntries = node[1].reduce<Record<string, string>>((acc, curr) => {
+        acc[curr] = 'none';
+        return acc;
+      }, {});
+
+      const nodeToUpdate = await defaultNodeManager.getNode(node[0]);
+      if (nodeToUpdate) {
+        await updatePluginData({
+          entries: [nodeToUpdate], values: newEntries, tokensMap,
+        });
+        await updateNodes([nodeToUpdate], tokensMap);
+      }
+    }),
+  );
+  sendSelectionChange();
+};
diff --git a/src/plugin/asyncMessageHandlers/setOnboardingExplainerInspect.ts b/src/plugin/asyncMessageHandlers/setOnboardingExplainerInspect.ts
new file mode 100644
index 000000000..ce09cd5f3
--- /dev/null
+++ b/src/plugin/asyncMessageHandlers/setOnboardingExplainerInspect.ts
@@ -0,0 +1,7 @@
+import { AsyncMessageChannelHandlers } from '@/AsyncMessageChannel';
+import { AsyncMessageTypes } from '@/types/AsyncMessages';
+import { saveOnboardingExplainerInspect } from '../node';
+
+export const setOnboardingExplainerInspect: AsyncMessageChannelHandlers[AsyncMessageTypes.SET_ONBOARDINGEXPLAINERINSPECT] = async (msg) => {
+  await saveOnboardingExplainerInspect(msg.onboardingExplainerInspect);
+};
diff --git a/src/plugin/asyncMessageHandlers/setOnboardingExplainerSets.ts b/src/plugin/asyncMessageHandlers/setOnboardingExplainerSets.ts
new file mode 100644
index 000000000..fe3c00d00
--- /dev/null
+++ b/src/plugin/asyncMessageHandlers/setOnboardingExplainerSets.ts
@@ -0,0 +1,7 @@
+import { AsyncMessageChannelHandlers } from '@/AsyncMessageChannel';
+import { AsyncMessageTypes } from '@/types/AsyncMessages';
+import { saveOnboardingExplainerSets } from '../node';
+
+export const setOnboardingExplainerSets: AsyncMessageChannelHandlers[AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSETS] = async (msg) => {
+  await saveOnboardingExplainerSets(msg.onboardingExplainerSets);
+};
diff --git a/src/plugin/asyncMessageHandlers/setOnboardingExplainerSyncProviders.ts b/src/plugin/asyncMessageHandlers/setOnboardingExplainerSyncProviders.ts
new file mode 100644
index 000000000..39fb8ed96
--- /dev/null
+++ b/src/plugin/asyncMessageHandlers/setOnboardingExplainerSyncProviders.ts
@@ -0,0 +1,7 @@
+import { AsyncMessageChannelHandlers } from '@/AsyncMessageChannel';
+import { AsyncMessageTypes } from '@/types/AsyncMessages';
+import { saveOnboardingExplainerSyncProviders } from '../node';
+
+export const setOnboardingExplainerSyncProviders: AsyncMessageChannelHandlers[AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSYNCPROVIDERS] = async (msg) => {
+  await saveOnboardingExplainerSyncProviders(msg.onboardingExplainerSyncProviders);
+};
diff --git a/src/plugin/asyncMessageHandlers/setUi.ts b/src/plugin/asyncMessageHandlers/setUi.ts
index 4576d6bb4..05b92c7aa 100644
--- a/src/plugin/asyncMessageHandlers/setUi.ts
+++ b/src/plugin/asyncMessageHandlers/setUi.ts
@@ -18,6 +18,7 @@ export const setUi: AsyncMessageChannelHandlers[AsyncMessageTypes.SET_UI] = asyn
     ignoreFirstPartForStyles: msg.ignoreFirstPartForStyles,
     prefixStylesWithThemeName: msg.prefixStylesWithThemeName,
     inspectDeep: msg.inspectDeep,
+    shouldSwapStyles: msg.shouldSwapStyles,
   });
   figma.ui.resize(width, height);
   if (store.inspectDeep !== msg.inspectDeep) {
diff --git a/src/plugin/asyncMessageHandlers/swapStyles.ts b/src/plugin/asyncMessageHandlers/swapStyles.ts
new file mode 100644
index 000000000..abbbcd709
--- /dev/null
+++ b/src/plugin/asyncMessageHandlers/swapStyles.ts
@@ -0,0 +1,52 @@
+import { UpdateMode } from '@/constants/UpdateMode';
+import { ThemeObjectsList } from '@/types';
+import { StyleIdMap, StyleThemeMap } from '@/types/StyleIdMap';
+import { applySiblingStyleId } from './applySiblingStyle';
+
+function getRootNode(updateMode: UpdateMode) {
+  const rootNode = [];
+  switch (updateMode) {
+    case UpdateMode.PAGE:
+      if (figma.currentPage.children) rootNode.push(...figma.currentPage.children);
+      break;
+    case UpdateMode.SELECTION:
+      if (figma.currentPage.selection) rootNode.push(...figma.currentPage.selection);
+      break;
+    case UpdateMode.DOCUMENT:
+      figma.root.children.forEach((page) => rootNode.push(...page.children));
+      break;
+    default:
+      rootNode.push(...figma.currentPage.children);
+      break;
+  }
+  return rootNode;
+}
+
+// Go through layers to swap styles
+export async function swapStyles(activeTheme: string, themes: ThemeObjectsList, updateMode: UpdateMode) {
+  const newTheme = themes.find((theme) => theme.id === activeTheme)?.name;
+  // Creates an object that groups sibling styles by token name and theme name, e.g. { 'color.background': { 'dark': 'S:1234,4:16', 'light': 'S:1235,4:16' } }
+  const mappedStyleReferences = themes.reduce((acc, theme) => {
+    if (theme.$figmaStyleReferences) {
+      Object.entries(theme.$figmaStyleReferences).forEach(([styleName, styleId]) => {
+        acc[styleName] = { ...acc[styleName], [theme.name]: styleId };
+      });
+    }
+    return acc;
+  }, {} as StyleThemeMap);
+
+  // Creates an object that maps styleIds to token names, e.g. { 'S:1234,4:16': 'color.background' }
+  const allStyleIds = Object.entries(mappedStyleReferences).reduce((acc, [tokenName, mapping]) => {
+    Object.values(mapping).forEach((styleId) => {
+      acc[styleId] = tokenName;
+    });
+    return acc;
+  }, {} as StyleIdMap);
+  if (!newTheme || !mappedStyleReferences || !allStyleIds) {
+    return;
+  }
+
+  getRootNode(updateMode).forEach((layer) => {
+    applySiblingStyleId(layer, allStyleIds, mappedStyleReferences, newTheme);
+  });
+}
diff --git a/src/plugin/asyncMessageHandlers/update.ts b/src/plugin/asyncMessageHandlers/update.ts
index d5a1098ae..379d2d262 100644
--- a/src/plugin/asyncMessageHandlers/update.ts
+++ b/src/plugin/asyncMessageHandlers/update.ts
@@ -6,6 +6,7 @@ import { updateNodes } from '../node';
 import { defaultNodeManager } from '../NodeManager';
 import { updatePluginData } from '../pluginData';
 import updateStyles from '../updateStyles';
+import { swapStyles } from './swapStyles';
 
 export const update: AsyncMessageChannelHandlers[AsyncMessageTypes.UPDATE] = async (msg) => {
   let receivedStyleIds: Record<string, string> = {};
@@ -29,6 +30,9 @@ export const update: AsyncMessageChannelHandlers[AsyncMessageTypes.UPDATE] = asy
     });
     await updateNodes(allWithData, tokensMap, msg.settings);
     await updatePluginData({ entries: allWithData, values: {} });
+    if (msg.activeTheme && msg.themes && msg.settings.shouldSwapStyles) {
+      await swapStyles(msg.activeTheme, msg.themes, msg.settings.updateMode);
+    }
   }
 
   return {
diff --git a/src/plugin/controller.ts b/src/plugin/controller.ts
index dbaefade3..110c0e3e1 100644
--- a/src/plugin/controller.ts
+++ b/src/plugin/controller.ts
@@ -7,6 +7,7 @@ import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { sendSelectionChange } from './sendSelectionChange';
 import { init } from '@/utils/plugin';
+import { sendDocumentChange } from './sendDocumentChange';
 
 figma.skipInvisibleInstanceChildren = true;
 
@@ -15,6 +16,9 @@ AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.CREDENTIALS, asyncHa
 AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.CHANGED_TABS, asyncHandlers.changedTabs);
 AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.REMOVE_SINGLE_CREDENTIAL, asyncHandlers.removeSingleCredential);
 AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.SET_STORAGE_TYPE, asyncHandlers.setStorageType);
+AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSETS, asyncHandlers.setOnboardingExplainerSets);
+AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSYNCPROVIDERS, asyncHandlers.setOnboardingExplainerSyncProviders);
+AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.SET_ONBOARDINGEXPLAINERINSPECT, asyncHandlers.setOnboardingExplainerInspect);
 AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.SET_NODE_DATA, asyncHandlers.setNodeData);
 AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.REMOVE_TOKENS_BY_VALUE, asyncHandlers.removeTokensByValue);
 AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.REMAP_TOKENS, asyncHandlers.remapTokens);
@@ -36,6 +40,7 @@ AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.UPDATE, asyncHandler
 AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.SET_LICENSE_KEY, asyncHandlers.setLicenseKey);
 AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.ATTACH_LOCAL_STYLES_TO_THEME, asyncHandlers.attachLocalStylesToTheme);
 AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.RESOLVE_STYLE_INFO, asyncHandlers.resolveStyleInfo);
+AsyncMessageChannel.PluginInstance.handle(AsyncMessageTypes.SET_NONE_VALUES_ON_NODE, asyncHandlers.setNoneValuesOnNode);
 
 figma.on('close', () => {
   defaultWorker.stop();
@@ -45,4 +50,8 @@ figma.on('selectionchange', () => {
   sendSelectionChange();
 });
 
+figma.on('documentchange', (event: DocumentChangeEvent) => {
+  sendDocumentChange(event);
+});
+
 init();
diff --git a/src/plugin/figmaTransforms/gradients.test.ts b/src/plugin/figmaTransforms/gradients.test.ts
index 24986cb87..70353dcc4 100644
--- a/src/plugin/figmaTransforms/gradients.test.ts
+++ b/src/plugin/figmaTransforms/gradients.test.ts
@@ -25,8 +25,8 @@ describe('convertStringtoFigmaGradient', () => {
         },
       ],
       gradientTransform: [
-        [0.7071067811865477, -0.7071067811865475, 0.49999999999999994],
-        [0.7071067811865475, 0.7071067811865476, -0.2071067811865476],
+        [0.5000000000000001, -0.5, 0.49999999999999994],
+        [0.5, 0.5000000000000001, -5.551115123125784e-17],
       ],
     },
   };
@@ -64,8 +64,8 @@ describe('convertStringtoFigmaGradient', () => {
         },
       ],
       gradientTransform: [
-        [0.7071067811865477, -0.7071067811865475, 0.49999999999999994],
-        [0.7071067811865475, 0.7071067811865476, -0.2071067811865476],
+        [0.5000000000000001, -0.5, 0.49999999999999994],
+        [0.5, 0.5000000000000001, -5.551115123125784e-17],
       ],
     },
   };
@@ -103,8 +103,8 @@ describe('convertStringtoFigmaGradient', () => {
         },
       ],
       gradientTransform: [
-        [0.7071067811865477, -0.7071067811865475, 0.49999999999999994],
-        [0.7071067811865475, 0.7071067811865476, -0.2071067811865476],
+        [0.5000000000000001, -0.5, 0.49999999999999994],
+        [0.5, 0.5000000000000001, -5.551115123125784e-17],
       ],
     },
   };
diff --git a/src/plugin/figmaTransforms/gradients.ts b/src/plugin/figmaTransforms/gradients.ts
index 5bf5945a7..0c44c17c9 100644
--- a/src/plugin/figmaTransforms/gradients.ts
+++ b/src/plugin/figmaTransforms/gradients.ts
@@ -23,8 +23,10 @@ export function convertStringToFigmaGradient(value: string) {
     .split(', ');
     // subtract 90 and negate it -- figma's roation goes anti-clockwise and 0deg
     // is left-right as opposed to bottom-top in css
-  const degrees = -(convertDegreeToNumber(gradientDegrees) - 90);
+  const degreesAsNumber = convertDegreeToNumber(gradientDegrees);
+  const degrees = -(degreesAsNumber - 90);
   const rad = degrees * (Math.PI / 180);
+  const scale = degreesAsNumber % 90 === 0 ? 1 : Math.sqrt(1 + Math.tan(degreesAsNumber * (Math.PI / 180)) ** 2);
 
   // start by transforming to the gradient center
   // which for figma is .5 .5 as it is a relative transform
@@ -39,6 +41,13 @@ export function convertStringToFigmaGradient(value: string) {
       [-Math.sin(rad), Math.cos(rad), 0],
       [0, 0, 1],
     ]),
+  ).mmul(
+    // next we need to multiply it with a scale matrix to fill the entire shape
+    new Matrix([
+      [scale, 0, 0],
+      [0, scale, 0],
+      [0, 0, 1],
+    ]),
   ).mmul(
     // lastly we need to translate it back to the 0,0 origin
     // by negating the center transform
diff --git a/src/plugin/helpers.ts b/src/plugin/helpers.ts
index a5bf02a7b..bd05d43fd 100644
--- a/src/plugin/helpers.ts
+++ b/src/plugin/helpers.ts
@@ -46,6 +46,7 @@ export function transformValue(value: string, type: string) {
     case 'height':
     case 'sizing':
       return fakeZeroForFigma(convertTypographyNumberToFigma(value));
+    case 'backgroundBlur':
     case 'borderRadius':
     case 'borderRadiusTopLeft':
     case 'borderRadiusTopRight':
diff --git a/src/plugin/node.test.ts b/src/plugin/node.test.ts
index 64e996fb2..9578253ac 100644
--- a/src/plugin/node.test.ts
+++ b/src/plugin/node.test.ts
@@ -1,8 +1,9 @@
 import { mockRootSetSharedPluginData } from '../../tests/__mocks__/figmaMock';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import {
-  destructureCompositionToken, mapValuesToTokens, returnValueToLookFor, saveStorageType,
+  destructureCompositionToken, mapValuesToTokens, returnValueToLookFor, saveStorageType, saveOnboardingExplainerSets, saveOnboardingExplainerInspect, saveOnboardingExplainerSyncProviders,
 } from './node';
+import getOnboardingExplainer from '@/utils/getOnboardingExplainer';
 
 const singleShadowToken = {
   type: 'boxShadow',
@@ -263,3 +264,23 @@ describe('storage type', () => {
     expect(mockRootSetSharedPluginData).toBeCalledWith('tokens', 'storageType', JSON.stringify(apiContext));
   });
 });
+
+describe('onboarding explainer store', () => {
+  it('should save the onboardingexplainersyncproviders', async () => {
+    saveOnboardingExplainerSyncProviders(true);
+    const data = await getOnboardingExplainer();
+    expect(data.syncProviders).toEqual(true);
+  });
+
+  it('should save the onboardingexplainersets', async () => {
+    saveOnboardingExplainerSets(true);
+    const data = await getOnboardingExplainer();
+    expect(data.sets).toEqual(true);
+  });
+
+  it('should save the onboardingexplainerinspect', async () => {
+    saveOnboardingExplainerInspect(true);
+    const data = await getOnboardingExplainer();
+    expect(data.inspect).toEqual(true);
+  });
+});
diff --git a/src/plugin/node.ts b/src/plugin/node.ts
index db8bb7933..401d8b0e4 100644
--- a/src/plugin/node.ts
+++ b/src/plugin/node.ts
@@ -19,7 +19,7 @@ import { TokenTypes } from '@/constants/TokenTypes';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import { StorageType } from '@/types/StorageType';
 import {
-  ActiveThemeProperty, CheckForChangesProperty, StorageTypeProperty, ThemesProperty, UpdatedAtProperty, ValuesProperty, VersionProperty,
+  ActiveThemeProperty, CheckForChangesProperty, StorageTypeProperty, ThemesProperty, UpdatedAtProperty, ValuesProperty, VersionProperty, OnboardingExplainerSetsProperty, OnboardingExplainerInspectProperty, OnboardingExplainerSyncProvidersProperty,
 } from '@/figmaStorage';
 import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { AsyncMessageTypes } from '@/types/AsyncMessages';
@@ -97,6 +97,18 @@ export async function saveStorageType(context: StorageType) {
   await StorageTypeProperty.write(context);
 }
 
+export async function saveOnboardingExplainerSets(onboardingExplainerSets: boolean) {
+  await OnboardingExplainerSetsProperty.write(onboardingExplainerSets);
+}
+
+export async function saveOnboardingExplainerSyncProviders(onboardingExplainerSyncProviders: boolean) {
+  await OnboardingExplainerSyncProvidersProperty.write(onboardingExplainerSyncProviders);
+}
+
+export async function saveOnboardingExplainerInspect(onboardingExplainerInspect: boolean) {
+  await OnboardingExplainerInspectProperty.write(onboardingExplainerInspect);
+}
+
 export async function getSavedStorageType(): Promise<StorageType> {
   // the saved storage types will never contain credentials
   // as they should not be shared across
@@ -148,10 +160,10 @@ export function destructureCompositionTokenForAlias(tokens: Map<string, AnyToken
     const tokensInCompositionToken: NodeTokenRefMap = {};
     if (resolvedToken?.rawValue) {
       Object.entries(resolvedToken?.rawValue).forEach(([property, value]) => {
-        let strExcludedSymbol: string = '';
-        if (String(value).startsWith('$')) strExcludedSymbol = String(value).slice(1, String(value).length);
-        if (String(value).startsWith('{')) strExcludedSymbol = String(value).slice(1, String(value).length - 1);
-        tokensInCompositionToken[property as CompositionTokenProperty] = strExcludedSymbol;
+        let tokenName: string = resolvedToken.name;
+        if (String(value).startsWith('$')) tokenName = String(value).slice(1, String(value).length);
+        if (String(value).startsWith('{')) tokenName = String(value).slice(1, String(value).length - 1);
+        tokensInCompositionToken[property as CompositionTokenProperty] = tokenName;
       });
       const { composition, ...objExcludedCompositionToken } = values;
       values = { ...tokensInCompositionToken, ...objExcludedCompositionToken };
diff --git a/src/plugin/notifiers.ts b/src/plugin/notifiers.ts
index 9e39dc80f..cf0c82346 100644
--- a/src/plugin/notifiers.ts
+++ b/src/plugin/notifiers.ts
@@ -60,6 +60,7 @@ export type SavedSettings = {
   ignoreFirstPartForStyles: boolean;
   prefixStylesWithThemeName: boolean;
   inspectDeep: boolean;
+  shouldSwapStyles: boolean;
 };
 
 export function notifyUISettings(
@@ -74,6 +75,7 @@ export function notifyUISettings(
     prefixStylesWithThemeName,
     updateRemote = true,
     inspectDeep,
+    shouldSwapStyles,
   }: SavedSettings,
 ) {
   postToUI({
@@ -91,6 +93,7 @@ export function notifyUISettings(
       ignoreFirstPartForStyles,
       prefixStylesWithThemeName,
       inspectDeep,
+      shouldSwapStyles,
     },
   });
   postToUI({
@@ -110,3 +113,11 @@ export function notifyStyleValues(values: Record<string, AnyTokenList>) {
 export function notifySetTokens(values: TokenStore) {
   postToUI({ type: MessageFromPluginTypes.SET_TOKENS, values });
 }
+
+export function notifyException(error: string, opts = {}) {
+  postToUI({
+    type: MessageFromPluginTypes.NOTIFY_EXCEPTION,
+    error,
+    opts,
+  });
+}
diff --git a/src/plugin/pluginData.test.tsx b/src/plugin/pluginData.test.tsx
new file mode 100644
index 000000000..2117cdf4d
--- /dev/null
+++ b/src/plugin/pluginData.test.tsx
@@ -0,0 +1,55 @@
+import { defaultNodeManager, NodeManagerNode } from './NodeManager';
+import { updatePluginData } from './pluginData';
+
+describe('pluginData', () => {
+  const mockSetPluginData = jest.fn();
+  const mockGetPluginData = jest.fn();
+  const mockSetSharedPluginData = jest.fn();
+  const mockGetSharedPluginData = jest.fn();
+  const mockGetSharedPluginDataKeys = jest.fn();
+  const mockGetRelaunchData = jest.fn();
+  const mockSetRelaunchData = jest.fn();
+  const updateNodeSpy = jest.spyOn(defaultNodeManager, 'updateNode');
+
+  it('updatePluginData', async () => {
+    updateNodeSpy.mockResolvedValue([]);
+    mockGetRelaunchData.mockResolvedValue({ edit: 'edit' });
+
+    const entries = [{
+      id: '5989:3',
+      node: {
+        name: 'Rectangle 1',
+        setPluginData: mockSetPluginData,
+        getPluginData: mockGetPluginData,
+        setSharedPluginData: mockSetSharedPluginData,
+        getSharedPluginData: mockGetSharedPluginData,
+        getSharedPluginDataKeys: mockGetSharedPluginDataKeys,
+        getRelaunchData: mockGetRelaunchData,
+        setRelaunchData: mockSetRelaunchData,
+      } as unknown as BaseNode,
+      tokens: {
+        fill: 'color.slate.900',
+      },
+    } as NodeManagerNode];
+    const values = {
+      borderRadius: 'none',
+      fill: 'none',
+    };
+
+    await updatePluginData({ entries, values });
+
+    expect(updateNodeSpy).toBeCalledWith({
+      name: 'Rectangle 1',
+      setPluginData: mockSetPluginData,
+      getPluginData: mockGetPluginData,
+      setSharedPluginData: mockSetSharedPluginData,
+      getSharedPluginData: mockGetSharedPluginData,
+      getSharedPluginDataKeys: mockGetSharedPluginDataKeys,
+      getRelaunchData: mockGetRelaunchData,
+      setRelaunchData: mockSetRelaunchData,
+    }, {
+      borderRadius: 'none',
+      fill: 'none',
+    });
+  });
+});
diff --git a/src/plugin/pluginData.ts b/src/plugin/pluginData.ts
index 1b32d7fba..07b4ca4d5 100644
--- a/src/plugin/pluginData.ts
+++ b/src/plugin/pluginData.ts
@@ -92,6 +92,30 @@ export async function removePluginData({ nodes, key, shouldRemoveValues = true }
   }));
 }
 
+export async function setNonePluginData({ nodes, key }: { nodes: readonly (BaseNode | SceneNode)[], key?: Properties }) {
+  return Promise.all(nodes.map(async (node) => {
+    if (key) {
+      node.setPluginData(key, 'none');
+      tokensSharedDataHandler.set(node, key, 'none');
+      await defaultNodeManager.updateNode(node, (tokens) => (
+        omit(tokens, key)
+      ));
+      removeValuesFromNode(node, key);
+    } else {
+      await defaultNodeManager.updateNode(node, (tokens) => (
+        omit(tokens, Object.values(Properties))
+      ));
+      Object.values(Properties).forEach((prop) => {
+        node.setPluginData(prop, 'none');
+        tokensSharedDataHandler.set(node, prop, 'none');
+        removeValuesFromNode(node, prop);
+      });
+    }
+    node.setPluginData('values', 'none');
+    store.successfulNodes.add(node);
+  }));
+}
+
 export async function updatePluginData({
   entries, values, shouldOverride = false, shouldRemove = true, tokensMap,
 }: { entries: readonly NodeManagerNode[], values: NodeTokenRefMap, shouldOverride?: boolean, shouldRemove?: boolean, tokensMap?: Map<string, AnyTokenList[number]> }) {
@@ -112,7 +136,7 @@ export async function updatePluginData({
     promises.add(defaultWorker.schedule(async () => {
       const currentValuesOnNode = tokens ?? {};
       let newValuesOnNode: NodeTokenRefMap = {};
-      if (values.composition === 'delete') newValuesOnNode = { ...values, ...currentValuesOnNode, composition: values.composition };
+      if (values.composition === 'delete' || values.composition === 'none') newValuesOnNode = { ...values, ...currentValuesOnNode, composition: values.composition };
       else newValuesOnNode = { ...currentValuesOnNode, ...values };
       if (currentValuesOnNode.composition && values.composition) {
         // when select another composition token, reset applied properties by current composition token
@@ -141,6 +165,9 @@ export async function updatePluginData({
             delete newValuesOnNode[key as CompositionTokenProperty];
             await removePluginData({ nodes: [node], key: key as Properties, shouldRemoveValues: shouldRemove });
             break;
+          case 'none':
+            await setNonePluginData({ nodes: [node], key: key as Properties });
+            break;
           // Pre-Version 53 had horizontalPadding and verticalPadding.
           case 'horizontalPadding':
             newValuesOnNode.paddingLeft = jsonValue;
diff --git a/src/plugin/removeStylesFromPlugin.ts b/src/plugin/removeStylesFromPlugin.ts
index 388302a97..20d0aba03 100644
--- a/src/plugin/removeStylesFromPlugin.ts
+++ b/src/plugin/removeStylesFromPlugin.ts
@@ -15,11 +15,9 @@ export default async function removeStylesFromPlugin(token: DeleteTokenPayload)
     type: AsyncMessageTypes.GET_THEME_INFO,
   });
   const themesToContainToken = themeInfo.themes
-    .filter((theme) =>
-      Object.entries(theme.selectedTokenSets).some(
-        ([tokenSet, value]) => tokenSet === token.parent && value === TokenSetStatus.ENABLED
-      )
-    )
+    .filter((theme) => Object.entries(theme.selectedTokenSets).some(
+      ([tokenSet, value]) => tokenSet === token.parent && value === TokenSetStatus.ENABLED,
+    ))
     .map((filteredTheme) => filteredTheme.name);
   const pathNames = themesToContainToken.map((theme) => convertTokenNameToPath(token.path, theme));
 
diff --git a/src/plugin/removeValuesFromNode.ts b/src/plugin/removeValuesFromNode.ts
index ba40602c8..4066830b9 100644
--- a/src/plugin/removeValuesFromNode.ts
+++ b/src/plugin/removeValuesFromNode.ts
@@ -80,7 +80,7 @@ export default function removeValuesFromNode(node: BaseNode, prop: Properties) {
         node.fills = [];
       }
       break;
-    case 'border':
+    case 'borderColor':
       if ('strokes' in node && typeof node.strokes !== 'undefined') {
         node.strokes = [];
       }
@@ -136,6 +136,18 @@ export default function removeValuesFromNode(node: BaseNode, prop: Properties) {
         node.fills = [];
       }
       break;
+    case 'border':
+      if ('strokes' in node && typeof node.strokes !== 'undefined') {
+        node.strokes = [];
+      }
+      if ('strokeWeight' in node && typeof node.strokeWeight !== 'undefined') {
+        node.strokeWeight = 0;
+      }
+      if ('dashPattern' in node && typeof node.dashPattern !== 'undefined') {
+        node.dashPattern = [0, 0];
+      }
+      break;
+
     default:
       break;
   }
diff --git a/src/plugin/sendDocumentChange.ts b/src/plugin/sendDocumentChange.ts
new file mode 100644
index 000000000..2f7bc62de
--- /dev/null
+++ b/src/plugin/sendDocumentChange.ts
@@ -0,0 +1,11 @@
+import compact from 'just-compact';
+import { defaultNodeManager } from './NodeManager';
+import { sendSelectionChange } from './sendSelectionChange';
+
+export async function sendDocumentChange(event: DocumentChangeEvent) {
+  const changeNodeIds = event.documentChanges.filter((change) => change.type === 'PROPERTY_CHANGE').map((change) => change.id);
+  const nodeManagers = await Promise.all(changeNodeIds.map((nodeId) => defaultNodeManager.getNode(nodeId)));
+  const nodes = compact(nodeManagers).map((nodeManager) => nodeManager?.node);
+  await defaultNodeManager.update(nodes);
+  await sendSelectionChange();
+}
diff --git a/src/plugin/setBackgroundBlurOnTarget.test.ts b/src/plugin/setBackgroundBlurOnTarget.test.ts
new file mode 100644
index 000000000..85fbf4ee1
--- /dev/null
+++ b/src/plugin/setBackgroundBlurOnTarget.test.ts
@@ -0,0 +1,118 @@
+import { TokenTypes } from '@/constants/TokenTypes';
+import setBackgroundBlurOnTarget from './setBackgroundBlurOnTarget';
+
+const shadowEffect = {
+  type: 'DROP_SHADOW',
+  blendMode: 'NORMAL',
+  visible: true,
+  color: {
+    a: 0.5,
+    r: 0,
+    g: 0,
+    b: 0,
+  },
+  offset: { x: 0, y: 0 },
+  radius: 2,
+  spread: 4,
+  showShadowBehindNode: true,
+};
+
+const previousBlur = {
+  type: 'BACKGROUND_BLUR',
+  radius: 10,
+  visible: true,
+};
+
+const dimensionToken = {
+  name: 'backgroundBlur.3',
+  type: TokenTypes.DIMENSION,
+  value: '3px',
+};
+
+describe('setBackgroundBlurOnTarget', () => {
+  let shadowNodeMock: RectangleNode;
+  let rectangleNodeMock: RectangleNode;
+  let existingBlurNodeMock: RectangleNode;
+  let combinedMock: RectangleNode;
+
+  beforeEach(() => {
+    shadowNodeMock = {
+      type: 'RECTANGLE',
+      fills: [],
+      effects: [shadowEffect],
+    } as unknown as RectangleNode;
+    rectangleNodeMock = {
+      type: 'RECTANGLE',
+      fills: [],
+      effects: [],
+    } as unknown as RectangleNode;
+    existingBlurNodeMock = {
+      type: 'RECTANGLE',
+      fills: [],
+      effects: [previousBlur],
+    } as unknown as RectangleNode;
+    combinedMock = {
+      type: 'RECTANGLE',
+      fills: [],
+      effects: [shadowEffect, previousBlur],
+    } as unknown as RectangleNode;
+  });
+
+  it('sets background blur token on plain layer', async () => {
+    await setBackgroundBlurOnTarget(rectangleNodeMock, dimensionToken);
+    expect(rectangleNodeMock).toEqual({
+      ...rectangleNodeMock,
+      effects: [
+        {
+          type: 'BACKGROUND_BLUR',
+          visible: true,
+          radius: 3,
+        },
+      ],
+    });
+  });
+
+  it('overwrites existing blur', async () => {
+    await setBackgroundBlurOnTarget(existingBlurNodeMock, dimensionToken);
+    expect(existingBlurNodeMock).toEqual({
+      ...existingBlurNodeMock,
+      effects: [
+        {
+          type: 'BACKGROUND_BLUR',
+          visible: true,
+          radius: 3,
+        },
+      ],
+    });
+  });
+
+  it('overwrites existing blur even when used in combination with others', async () => {
+    await setBackgroundBlurOnTarget(combinedMock, dimensionToken);
+    expect(combinedMock).toEqual({
+      ...combinedMock,
+      effects: [
+        shadowEffect,
+        {
+          type: 'BACKGROUND_BLUR',
+          visible: true,
+          radius: 3,
+        },
+      ],
+    });
+  });
+
+  it('appends to already existing layer with shadows', async () => {
+    await setBackgroundBlurOnTarget(shadowNodeMock, dimensionToken);
+    expect(shadowNodeMock).toEqual({
+      ...shadowNodeMock,
+      effects: [
+        shadowEffect,
+        {
+          type: 'BACKGROUND_BLUR',
+          visible: true,
+          radius: 3,
+        },
+      ],
+    });
+  });
+});
diff --git a/src/plugin/setBackgroundBlurOnTarget.ts b/src/plugin/setBackgroundBlurOnTarget.ts
new file mode 100644
index 000000000..6af4e1362
--- /dev/null
+++ b/src/plugin/setBackgroundBlurOnTarget.ts
@@ -0,0 +1,28 @@
+import { SingleDimensionToken } from '@/types/tokens';
+import { transformValue } from './helpers';
+
+export default function setBackgroundBlurOnTarget(
+  target: BaseNode | EffectStyle,
+  token: Pick<SingleDimensionToken, 'value'>,
+) {
+  try {
+    if ('effects' in target) {
+      const existingEffectIndex = target.effects.findIndex((effect) => effect.type === 'BACKGROUND_BLUR');
+      let newEffects = [...target.effects];
+      const blurEffect: BlurEffect = {
+        type: 'BACKGROUND_BLUR',
+        visible: true,
+        radius: transformValue(String(token.value), 'backgroundBlur'),
+      };
+
+      if (existingEffectIndex > -1) {
+        newEffects = Object.assign([], target.effects, { [existingEffectIndex]: blurEffect });
+      } else {
+        newEffects.push(blurEffect);
+      }
+      target.effects = newEffects;
+    }
+  } catch (e) {
+    console.error('Error setting color', e);
+  }
+}
diff --git a/src/plugin/setBorderValuesOnTarget.ts b/src/plugin/setBorderValuesOnTarget.ts
new file mode 100644
index 000000000..37a56c8ec
--- /dev/null
+++ b/src/plugin/setBorderValuesOnTarget.ts
@@ -0,0 +1,34 @@
+/* eslint-disable no-param-reassign */
+import { SingleBorderToken } from '@/types/tokens';
+import { isPrimitiveValue } from '@/utils/is';
+import { transformValue } from './helpers';
+import setColorValuesOnTarget from './setColorValuesOnTarget';
+
+export default function setBorderValuesOnTarget(target: BaseNode, token: Pick<SingleBorderToken, 'value'>) {
+  const { value } = token;
+  const { color, width, style } = value;
+  try {
+    if ('strokeWeight' in target && typeof width !== 'undefined' && isPrimitiveValue(width)) {
+      target.strokeWeight = transformValue(String(width), 'borderWidth');
+    }
+    if (typeof color !== 'undefined' && typeof color === 'string') {
+      setColorValuesOnTarget(target, { value: color }, 'strokes');
+    }
+    if (typeof style !== 'undefined' && typeof style === 'string' && 'dashPattern' in target) {
+      let newDashPattern = [0, 0];
+      switch (style) {
+        case 'solid':
+          newDashPattern = [0, 0];
+          break;
+        case 'dashed':
+          newDashPattern = [10, 10];
+          break;
+        default:
+          break;
+      }
+      target.dashPattern = newDashPattern;
+    }
+  } catch (e) {
+    console.log('error setting border token', e);
+  }
+}
diff --git a/src/plugin/setEffectValuesOnTarget.test.ts b/src/plugin/setEffectValuesOnTarget.test.ts
index 085bb678e..2b2448aff 100644
--- a/src/plugin/setEffectValuesOnTarget.test.ts
+++ b/src/plugin/setEffectValuesOnTarget.test.ts
@@ -139,15 +139,15 @@ describe('setEffectValuesOnTarget', () => {
           blendMode: 'NORMAL',
           visible: true,
           color: {
-            a: 0.5,
+            a: 1,
             r: 0,
             g: 0,
             b: 0,
           },
-          offset: { x: 0, y: 0 },
-          radius: 2,
+          offset: { x: 0, y: 8 },
+          radius: 16,
           spread: 4,
-          showShadowBehindNode: true,
+          showShadowBehindNode: false,
         },
         {
           type: 'DROP_SHADOW',
@@ -169,15 +169,15 @@ describe('setEffectValuesOnTarget', () => {
           blendMode: 'NORMAL',
           visible: true,
           color: {
-            a: 1,
+            a: 0.5,
             r: 0,
             g: 0,
             b: 0,
           },
-          offset: { x: 0, y: 8 },
-          radius: 16,
+          offset: { x: 0, y: 0 },
+          radius: 2,
           spread: 4,
-          showShadowBehindNode: false,
+          showShadowBehindNode: true,
         },
       ],
     });
@@ -190,18 +190,19 @@ describe('setEffectValuesOnTarget', () => {
       ...rectangleNodeMockOriginal,
       effects: [
         {
-          type: 'INNER_SHADOW',
+          type: 'DROP_SHADOW',
           blendMode: 'NORMAL',
           visible: true,
           color: {
-            a: 0.5,
+            a: 1,
             r: 0,
             g: 0,
             b: 0,
           },
-          offset: { x: 0, y: 0 },
-          radius: 2,
+          offset: { x: 0, y: 8 },
+          radius: 16,
           spread: 4,
+          showShadowBehindNode: false,
         },
         {
           type: 'DROP_SHADOW',
@@ -219,19 +220,18 @@ describe('setEffectValuesOnTarget', () => {
           showShadowBehindNode: false,
         },
         {
-          type: 'DROP_SHADOW',
+          type: 'INNER_SHADOW',
           blendMode: 'NORMAL',
           visible: true,
           color: {
-            a: 1,
+            a: 0.5,
             r: 0,
             g: 0,
             b: 0,
           },
-          offset: { x: 0, y: 8 },
-          radius: 16,
+          offset: { x: 0, y: 0 },
+          radius: 2,
           spread: 4,
-          showShadowBehindNode: false,
         },
       ],
     });
@@ -244,18 +244,19 @@ describe('setEffectValuesOnTarget', () => {
       ...rectangleNodeMockOriginal,
       effects: [
         {
-          type: 'INNER_SHADOW',
+          type: 'DROP_SHADOW',
           blendMode: 'NORMAL',
           visible: true,
           color: {
-            a: 0.5,
+            a: 1,
             r: 0,
             g: 0,
             b: 0,
           },
-          offset: { x: 0, y: 0 },
-          radius: 2,
+          offset: { x: 0, y: 8 },
+          radius: 16,
           spread: 4,
+          showShadowBehindNode: false,
         },
         {
           type: 'DROP_SHADOW',
@@ -273,19 +274,18 @@ describe('setEffectValuesOnTarget', () => {
           showShadowBehindNode: false,
         },
         {
-          type: 'DROP_SHADOW',
+          type: 'INNER_SHADOW',
           blendMode: 'NORMAL',
           visible: true,
           color: {
-            a: 1,
+            a: 0.5,
             r: 0,
             g: 0,
             b: 0,
           },
-          offset: { x: 0, y: 8 },
-          radius: 16,
+          offset: { x: 0, y: 0 },
+          radius: 2,
           spread: 4,
-          showShadowBehindNode: false,
         },
       ],
     });
diff --git a/src/plugin/setEffectValuesOnTarget.ts b/src/plugin/setEffectValuesOnTarget.ts
index 2247f8d4c..1cc93fb3d 100644
--- a/src/plugin/setEffectValuesOnTarget.ts
+++ b/src/plugin/setEffectValuesOnTarget.ts
@@ -36,7 +36,7 @@ export default function setEffectValuesOnTarget(
         };
       }) as Effect[];
 
-      if ('effects' in target && key === 'effects') target[key] = effectsArray;
+      if ('effects' in target && key === 'effects') target[key] = effectsArray.reverse();
     } else if (typeof value !== 'string') {
       const { color, opacity: a } = convertToFigmaColor(value.color);
       const { r, g, b } = color;
diff --git a/src/plugin/setTextValuesOnTarget.ts b/src/plugin/setTextValuesOnTarget.ts
index e8f000f21..5df37f302 100644
--- a/src/plugin/setTextValuesOnTarget.ts
+++ b/src/plugin/setTextValuesOnTarget.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
 import { SingleTypographyToken } from '@/types/tokens';
 import { transformValue } from './helpers';
+import { notifyException, notifyUI } from './notifiers';
 
 export default async function setTextValuesOnTarget(
   target: TextNode | TextStyle,
@@ -66,30 +67,31 @@ export default async function setTextValuesOnTarget(
               }
             })
             .catch(() => {
-              // TODO: Track this in mixpanel so we can add missing weights
+              notifyUI(`Error setting font family/weight combination for ${family}/${style}`, { error: true });
+              notifyException('Font not found', { family, style });
             });
           if (isApplied) break;
         }
       }
-      if (fontSize) {
+      if (typeof fontSize !== 'undefined') {
         target.fontSize = transformValue(fontSize, 'fontSizes');
       }
-      if (lineHeight) {
+      if (typeof lineHeight !== 'undefined') {
         const transformedValue = transformValue(String(lineHeight), 'lineHeights');
         if (transformedValue !== null) {
           target.lineHeight = transformedValue;
         }
       }
-      if (letterSpacing) {
+      if (typeof letterSpacing !== 'undefined') {
         const transformedValue = transformValue(letterSpacing, 'letterSpacing');
         if (transformedValue !== null) {
           target.letterSpacing = transformedValue;
         }
       }
-      if (paragraphSpacing) {
+      if (typeof paragraphSpacing !== 'undefined') {
         target.paragraphSpacing = transformValue(paragraphSpacing, 'paragraphSpacing');
       }
-      if (paragraphIndent) {
+      if (typeof paragraphIndent !== 'undefined') {
         target.paragraphIndent = transformValue(paragraphIndent, 'paragraphIndent');
       }
       if (textCase) {
diff --git a/src/plugin/setValuesOnNode.ts b/src/plugin/setValuesOnNode.ts
index 27daa8957..53e03574b 100644
--- a/src/plugin/setValuesOnNode.ts
+++ b/src/plugin/setValuesOnNode.ts
@@ -9,13 +9,18 @@ import {
   textStyleMatchesTypographyToken,
 } from './figmaUtils/styleMatchers';
 import { clearStyleIdBackup, getNonLocalStyle, setStyleIdBackup } from './figmaUtils/styleUtils';
-import { isPrimitiveValue, isSingleBoxShadowValue, isSingleTypographyValue } from '@/utils/is';
+import {
+  isPrimitiveValue, isSingleBoxShadowValue, isSingleTypographyValue,
+} from '@/utils/is';
 import { matchStyleName } from '@/utils/matchStyleName';
 import { trySetStyleId } from '@/utils/trySetStyleId';
 import { transformValue } from './helpers';
 import setColorValuesOnTarget from './setColorValuesOnTarget';
 import setEffectValuesOnTarget from './setEffectValuesOnTarget';
 import setTextValuesOnTarget from './setTextValuesOnTarget';
+import setBorderValuesOnTarget from './setBorderValuesOnTarget';
+import setBackgroundBlurOnTarget from './setBackgroundBlurOnTarget';
+import { isSingleBorderValue } from '@/utils/is/isSingleBorderValue';
 import setImageValuesOnTarget from './setImageValuesOnTarget';
 
 // @README values typing is wrong
@@ -34,6 +39,7 @@ export default async function setValuesOnNode(
     : null;
   const stylePathSlice = ignoreFirstPartForStyles ? 1 : 0;
   const stylePathPrefix = prefixStylesWithThemeName && activeThemeObject ? activeThemeObject.name : null;
+
   try {
     // BORDER RADIUS
     if (
@@ -42,6 +48,11 @@ export default async function setValuesOnNode(
       && node.type !== 'STICKY'
       && node.type !== 'CODE_BLOCK'
     ) {
+      // set border token
+      if (values.border && isSingleBorderValue(values.border)) {
+        setBorderValuesOnTarget(node, { value: values.border });
+      }
+
       if (typeof values.borderRadius !== 'undefined' && isPrimitiveValue(values.borderRadius)) {
         const individualBorderRadius = String(values.borderRadius).split(' ');
         switch (individualBorderRadius.length) {
@@ -145,6 +156,11 @@ export default async function setValuesOnNode(
         }
       }
 
+      // BACKGROUND BLUR
+      if ('effects' in node && typeof values.backgroundBlur !== 'undefined' && isPrimitiveValue(values.backgroundBlur)) {
+        setBackgroundBlurOnTarget(node, { value: String(values.backgroundBlur) });
+      }
+
       // BORDER WIDTH
       if ('strokeWeight' in node && typeof values.borderWidth !== 'undefined' && isPrimitiveValue(values.borderWidth)) {
         node.strokeWeight = transformValue(String(values.borderWidth), 'borderWidth');
@@ -288,11 +304,11 @@ export default async function setValuesOnNode(
       }
 
       // BORDER COLOR
-      if (typeof values.border !== 'undefined' && typeof values.border === 'string') {
-        if ('strokes' in node && data.border) {
-          const pathname = convertTokenNameToPath(data.border, stylePathPrefix, stylePathSlice);
+      if (typeof values.borderColor !== 'undefined' && typeof values.borderColor === 'string') {
+        if ('strokes' in node && data.borderColor) {
+          const pathname = convertTokenNameToPath(data.borderColor, stylePathPrefix, stylePathSlice);
           let matchingStyleId = matchStyleName(
-            data.border,
+            data.borderColor,
             pathname,
             activeThemeObject?.$figmaStyleReferences ?? {},
             figmaStyleMaps.paintStyles,
@@ -303,7 +319,7 @@ export default async function setValuesOnNode(
             const styleIdBackupKey = 'strokeStyleId_original';
             const nonLocalStyle = getNonLocalStyle(node, styleIdBackupKey, 'strokes');
             if (nonLocalStyle) {
-              if (paintStyleMatchesColorToken(nonLocalStyle, values.border)) {
+              if (paintStyleMatchesColorToken(nonLocalStyle, values.borderColor)) {
                 // Non-local style matches - use this and clear style id backup:
                 matchingStyleId = nonLocalStyle.id;
                 clearStyleIdBackup(node, styleIdBackupKey);
@@ -318,7 +334,7 @@ export default async function setValuesOnNode(
           }
 
           if (!matchingStyleId || (matchingStyleId && !(await trySetStyleId(node, 'stroke', matchingStyleId)))) {
-            setColorValuesOnTarget(node, { value: values.border }, 'strokes');
+            setColorValuesOnTarget(node, { value: values.borderColor }, 'strokes');
           }
         }
       }
@@ -406,7 +422,7 @@ export default async function setValuesOnNode(
       }
 
       if (values.asset && typeof values.asset === 'string') {
-        if ('fills' in node && data.asset) {
+        if ('fills' in node) {
           await setImageValuesOnTarget(node, { value: values.asset });
         }
       }
@@ -422,6 +438,21 @@ export default async function setValuesOnNode(
         }
       }
 
+      if (
+        typeof values.dimension !== 'undefined'
+        && isPrimitiveValue(values.dimension)
+      ) {
+        if ('itemSpacing' in node) {
+          if (node.primaryAxisAlignItems === 'SPACE_BETWEEN') {
+            node.primaryAxisAlignItems = 'MIN';
+          }
+          node.itemSpacing = transformValue(String(values.dimension), 'spacing');
+        } else if ('resize' in node) {
+          const size = transformValue(String(values.dimension), 'sizing');
+          node.resize(size, size);
+        }
+      }
+
       // Real value for text layers
       if ('value' in values) {
         if ('characters' in node && node.fontName !== figma.mixed) {
diff --git a/src/plugin/tokenHelpers.ts b/src/plugin/tokenHelpers.ts
index 874478080..4b5110a32 100644
--- a/src/plugin/tokenHelpers.ts
+++ b/src/plugin/tokenHelpers.ts
@@ -30,7 +30,7 @@ export function resolveTokenValues(tokens: SingleToken[], previousCount: number
 
     let failedToResolve = false;
     // Iterate over Typography and boxShadow Object to get resolved values
-    if (t.type === TokenTypes.TYPOGRAPHY || t.type === TokenTypes.BOX_SHADOW) {
+    if (t.type === TokenTypes.TYPOGRAPHY || t.type === TokenTypes.BOX_SHADOW || t.type === TokenTypes.BORDER) {
       // If value is alias
       if (typeof t.value === 'string') {
         returnValue = getAliasValue(t.value, tokensInProgress);
@@ -125,8 +125,13 @@ export function mergeTokenGroups(tokens: Record<string, SingleToken[]>, usedSets
     .filter(([, status]) => status === TokenSetStatus.ENABLED || status === TokenSetStatus.SOURCE)
     .map(([tokenSet]) => tokenSet);
 
+  const tokenSetOrder = tokens?.$metadata?.map(({ value }) => value);
+
+  const tokenEntries = tokenSetOrder ? Object.entries(tokens)
+    .sort((a, b) => tokenSetOrder.indexOf(a[0]) - tokenSetOrder.indexOf(b[0])) : Object.entries(tokens);
+
   // Reverse token set order (right-most win) and check for duplicates
-  Object.entries(tokens)
+  tokenEntries
     .reverse()
     .forEach((tokenGroup: [string, SingleToken[]]) => {
       if (tokenSetsToMerge.length === 0 || tokenSetsToMerge.includes(tokenGroup[0])) {
diff --git a/src/stitches.config.ts b/src/stitches.config.ts
index d2e683fb5..db14a7c2c 100644
--- a/src/stitches.config.ts
+++ b/src/stitches.config.ts
@@ -151,6 +151,7 @@ export const stitchesInstance = createStitches({
       focus: `0 0 0 2px ${globalTokens.colors.primary500}`,
       'focus-subtle': `0 0 0 2px ${globalTokens.colors.primary300}`,
       focusMuted: `0 0 0 2px ${globalTokens.colors.primary400}`,
+      focusDanger: '0 0 0 2px $colors$bgDanger',
       tokenFocus: '0 0 0 2px $colors$borderMuted',
     },
   },
diff --git a/src/storage/GenericVersionedStorage.ts b/src/storage/GenericVersionedStorage.ts
new file mode 100644
index 000000000..1fc3c9c91
--- /dev/null
+++ b/src/storage/GenericVersionedStorage.ts
@@ -0,0 +1,194 @@
+import z from 'zod';
+import * as pjs from '../../package.json';
+import { DeepTokensMap, ThemeObjectsList } from '@/types';
+import { SingleToken } from '@/types/tokens';
+import { RemoteTokenStorage, RemoteTokenStorageFile } from './RemoteTokenStorage';
+import { singleFileSchema } from './schemas/singleFileSchema';
+import { GenericVersionedStorageFlow } from '@/types/StorageType';
+import { tokensMapSchema } from './schemas/tokensMapSchema';
+import { themeObjectSchema } from './schemas/themeObjectSchema';
+
+const genericVersionedSchema = singleFileSchema.extend({
+  values: z.record(tokensMapSchema),
+  version: z.string().optional(),
+  $themes: z.array(themeObjectSchema).optional(),
+  updatedAt: z.number().optional(),
+});
+
+type GenericVersionedMeta = {
+  version: string
+  updatedAt: string
+};
+
+export type GenericVersionedData = GenericVersionedMeta & {
+  values: Record<string, Record<string, SingleToken<false> | DeepTokensMap<false>>>
+  $themes?: ThemeObjectsList
+};
+
+export type GenericVersionedAdditionalHeaders = Array<{
+  name: string,
+  value: string
+}>;
+
+const flattenHeaders = (headers: GenericVersionedAdditionalHeaders): Array<[key: string, val: string]> => headers.map((x) => [x.name, x.value]);
+
+// Life cycle is
+
+// POST - Create storage at endpoint. Storage may or may not already exist
+// Get - Retrieve tokens
+// PUT - Push tokens to endpoint
+
+export class GenericVersionedStorage extends RemoteTokenStorage<GenericVersionedMeta> {
+  private url: string;
+
+  private defaultHeaders: Headers;
+
+  private flow: GenericVersionedStorageFlow;
+
+  public static async create(url: string, updatedAt: string, flow: GenericVersionedStorageFlow, headers: GenericVersionedAdditionalHeaders = []): Promise<false | {
+    metadata: { id: string }
+  }> {
+    let body: string | undefined = JSON.stringify({
+      version: pjs.plugin_version,
+      updatedAt,
+      values: {
+        options: {},
+      },
+    }, null, 2);
+    let method: string;
+    switch (flow) {
+      case GenericVersionedStorageFlow.READ_ONLY:
+        method = 'GET';
+        body = undefined;
+        break;
+      case GenericVersionedStorageFlow.READ_WRITE:
+        method = 'PUT';
+        break;
+      case GenericVersionedStorageFlow.READ_WRITE_CREATE:
+        method = 'POST';
+        break;
+      default:
+        console.log('Unknown flow type');
+        return false;
+    }
+
+    const response = await fetch(url, {
+      method,
+      mode: 'cors',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      body,
+      headers: new Headers([
+        ['Content-Type', 'application/json'],
+        ...flattenHeaders(headers),
+      ]),
+    });
+
+    if (response.ok) {
+      return response.json();
+    }
+
+    return false;
+  }
+
+  constructor(url: string, flow: GenericVersionedStorageFlow, headers: GenericVersionedAdditionalHeaders = []) {
+    super();
+    this.url = url;
+    this.flow = flow;
+    this.defaultHeaders = new Headers([
+      ['Content-Type', 'application/json'],
+      ...flattenHeaders(headers),
+    ]);
+  }
+
+  private convertGenericVersionedDataToFiles(data: GenericVersionedData): RemoteTokenStorageFile<GenericVersionedMeta>[] {
+    return [
+      {
+        type: 'themes',
+        path: '$themes.json',
+        data: data.$themes ?? [],
+      },
+      {
+        type: 'metadata',
+        path: '$metadata.json',
+        data: {
+          version: data.version,
+          updatedAt: data.updatedAt,
+        },
+      },
+      ...Object.entries(data.values).map<RemoteTokenStorageFile<GenericVersionedMeta>>(([name, tokenSet]) => ({
+        name,
+        type: 'tokenSet',
+        path: `${name}.json`,
+        data: tokenSet,
+      })),
+    ];
+  }
+
+  public async read(): Promise<RemoteTokenStorageFile<GenericVersionedMeta>[]> {
+    const response = await fetch(this.url, {
+      method: 'GET',
+      mode: 'cors',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      headers: new Headers([
+        ...this.defaultHeaders.entries(),
+      ]),
+    });
+
+    if (response.ok) {
+      const parsedJsonData = await response.json();
+      const validationResult = await genericVersionedSchema.safeParseAsync(parsedJsonData);
+
+      if (validationResult.success) {
+        const GenericVersionedData = validationResult.data as unknown as GenericVersionedData;
+        return this.convertGenericVersionedDataToFiles(GenericVersionedData);
+      }
+    }
+
+    return [];
+  }
+
+  public async write(files: RemoteTokenStorageFile<GenericVersionedMeta>[]): Promise<boolean> {
+    if (this.flow === GenericVersionedStorageFlow.READ_ONLY) {
+      throw new Error('Attempting to write to endpoint of Versioned storage when in Read Only mode');
+    }
+
+    const dataObject: GenericVersionedData = {
+      version: pjs.plugin_version,
+      updatedAt: (new Date()).toISOString(),
+      values: {},
+      $themes: [],
+    };
+    files.forEach((file) => {
+      if (file.type === 'themes') {
+        dataObject.$themes = [
+          ...(dataObject.$themes ?? []),
+          ...file.data,
+        ];
+      } else if (file.type === 'tokenSet') {
+        dataObject.values = {
+          ...dataObject.values,
+          [file.name]: file.data,
+        };
+      }
+    });
+
+    const response = await fetch(this.url, {
+      method: 'PUT',
+      mode: 'cors',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      body: JSON.stringify(dataObject),
+      headers: new Headers([
+        ...this.defaultHeaders.entries(),
+      ]),
+    });
+
+    if (response.ok) {
+      return true;
+    }
+
+    return false;
+  }
+}
diff --git a/src/storage/RemoteTokenStorage.ts b/src/storage/RemoteTokenStorage.ts
index ec9d4031f..e1937ab27 100644
--- a/src/storage/RemoteTokenStorage.ts
+++ b/src/storage/RemoteTokenStorage.ts
@@ -89,6 +89,7 @@ export abstract class RemoteTokenStorage<Metadata = unknown, SaveOptions = unkno
     // start by reading the files from the remote source
     // it is up to the remote storage implementation to split it up into "File" objects
     const files = await this.read();
+
     // successfully fetch data
     if (Array.isArray(files)) {
       if (files.length === 0) {
diff --git a/src/storage/__tests__/FileTokenStorage.test.ts b/src/storage/__tests__/FileTokenStorage.test.ts
new file mode 100644
index 000000000..e4e5f479a
--- /dev/null
+++ b/src/storage/__tests__/FileTokenStorage.test.ts
@@ -0,0 +1,53 @@
+import { FileTokenStorage } from '../FileTokenStorage';
+
+const json = JSON.stringify({
+  global: {
+    primary: {
+      value: '1.5',
+      type: 'sizing',
+    },
+    secondary: {
+      value: '4',
+      type: 'sizing',
+    },
+  },
+  $themes: [
+    {
+      id: '8722635276827d42671ab23df835867c9e0024dd',
+      name: 'Light',
+      selectedTokenSets: {
+        global: 'enabled',
+      },
+      $figmaStyleReferences: {},
+    },
+  ],
+  $metadata: {
+    tokenSetOrder: [
+      'global',
+    ],
+  },
+});
+const blob = new Blob([json], { type: 'application/json' });
+const mockFile = new File([blob], 'core.json');
+
+describe('FileTokenStorage', () => {
+  it('should be able to read file', async () => {
+    const mockFileList = {
+      0: mockFile,
+      length: 1,
+    } as unknown as FileList;
+    const mockFileTokenStorage = new FileTokenStorage(mockFileList);
+
+    expect(await mockFileTokenStorage.read()).toEqual([{
+      data: [{
+        $figmaStyleReferences: {}, id: '8722635276827d42671ab23df835867c9e0024dd', name: 'Light', selectedTokenSets: { global: 'enabled' },
+      }],
+      path: 'core.json',
+      type: 'themes',
+    },
+    { data: { tokenSetOrder: ['global'] }, path: 'core.json', type: 'metadata' },
+    {
+      data: { primary: { type: 'sizing', value: '1.5' }, secondary: { type: 'sizing', value: '4' } }, name: 'global', path: 'core.json', type: 'tokenSet',
+    }]);
+  });
+});
diff --git a/src/storage/__tests__/GenericVersionedStorage.test.ts b/src/storage/__tests__/GenericVersionedStorage.test.ts
new file mode 100644
index 000000000..54b4317a9
--- /dev/null
+++ b/src/storage/__tests__/GenericVersionedStorage.test.ts
@@ -0,0 +1,200 @@
+import { TokenTypes } from '@/constants/TokenTypes';
+import * as pjs from '../../../package.json';
+import { mockFetch } from '../../../tests/__mocks__/fetchMock';
+import { GenericVersionedStorage } from '../GenericVersionedStorage';
+import { GenericVersionedStorageFlow } from '@/types/StorageType';
+
+describe('GenericVersionedStorage', () => {
+  const url = 'https://api.example.io/v3/b';
+
+  const defaultHeaderName = 'X-ADD-HEADER';
+  const defaultHeaderValue = 'zzxxcc';
+
+  const defaultHeaders = [{
+    name: defaultHeaderName,
+    value: defaultHeaderValue,
+  }];
+
+  it('can create a new bin', async () => {
+    const updatedAt = new Date().toISOString();
+
+    const headers = [{
+      name: 'X-API-KEY',
+      value: 'aabbccddeeff',
+    }];
+    await GenericVersionedStorage.create(url, updatedAt, GenericVersionedStorageFlow.READ_WRITE_CREATE, headers);
+    expect(mockFetch).toBeCalledWith(url, {
+      method: 'POST',
+      mode: 'cors',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      body: JSON.stringify({
+        version: pjs.plugin_version,
+        updatedAt,
+        values: {
+          options: {},
+        },
+      }, null, 2),
+      headers: new Headers([
+        ['Content-Type', 'application/json'],
+        ['X-API-KEY', 'aabbccddeeff'],
+      ]),
+    });
+  });
+
+  it('should return false when there is an error during creation', async () => {
+    mockFetch.mockImplementationOnce(() => ({
+      ok: false,
+    }));
+    expect(await GenericVersionedStorage.create(url, '', GenericVersionedStorageFlow.READ_WRITE_CREATE)).toEqual(false);
+  });
+
+  it('can read GenericVersioned data', async () => {
+    mockFetch.mockImplementationOnce(() => (
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({
+          version: '1',
+          updatedAt: 1666785400000,
+          values: {
+            global: {
+              colors: {
+                red: {
+                  type: TokenTypes.COLOR,
+                  value: '#ff0000',
+                },
+              },
+            },
+          },
+          $themes: [
+            {
+              id: 'light',
+              name: 'Light',
+              selectedTokenSets: {},
+            },
+          ],
+        }),
+      })
+    ));
+
+    const storage = new GenericVersionedStorage(url, GenericVersionedStorageFlow.READ_WRITE_CREATE, defaultHeaders);
+    const result = await storage.read();
+
+    expect(result[0]).toEqual({
+      type: 'themes',
+      path: '$themes.json',
+      data: [
+        {
+          id: 'light',
+          name: 'Light',
+          selectedTokenSets: {},
+        },
+      ],
+    });
+    expect(result[1]).toEqual({
+      type: 'metadata',
+      path: '$metadata.json',
+      data: {
+        version: '1',
+        updatedAt: 1666785400000,
+      },
+    });
+    expect(result[2]).toEqual({
+      type: 'tokenSet',
+      path: 'global.json',
+      name: 'global',
+      data: {
+        colors: {
+          red: {
+            type: TokenTypes.COLOR,
+            value: '#ff0000',
+          },
+        },
+      },
+    });
+  });
+
+  it('returns an empty dataset on error', async () => {
+    mockFetch.mockImplementationOnce(() => (
+      Promise.resolve({
+        ok: false,
+      })
+    ));
+
+    const storage = new GenericVersionedStorage(url, GenericVersionedStorageFlow.READ_WRITE_CREATE, defaultHeaders);
+    expect(await storage.read()).toEqual([]);
+  });
+
+  it('can write to GenericVersioned endpoint', async () => {
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(Date.UTC(2022, 5, 15, 10, 0, 0));
+
+    const storage = new GenericVersionedStorage(url, GenericVersionedStorageFlow.READ_WRITE_CREATE, defaultHeaders);
+    await storage.write([
+      {
+        type: 'themes',
+        path: '$themes.json',
+        data: [
+          {
+            id: 'dark',
+            name: 'Dark',
+            selectedTokenSets: {},
+          },
+        ],
+      },
+      {
+        type: 'tokenSet',
+        name: 'global',
+        path: 'global.json',
+        data: {
+          colors: {
+            red: {
+              type: TokenTypes.COLOR,
+              value: '#ff0000',
+            },
+          },
+        },
+      },
+    ]);
+
+    expect(mockFetch).toBeCalledWith(url, {
+      method: 'PUT',
+      mode: 'cors',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      body: JSON.stringify({
+        version: pjs.plugin_version,
+        updatedAt: '2022-06-15T10:00:00.000Z',
+        values: {
+          global: {
+            colors: {
+              red: {
+                type: TokenTypes.COLOR,
+                value: '#ff0000',
+              },
+            },
+          },
+        },
+        $themes: [
+          {
+            id: 'dark',
+            name: 'Dark',
+            selectedTokenSets: {},
+          },
+        ],
+      }),
+      headers: new Headers([
+        ['Content-Type', 'application/json'],
+        [defaultHeaderName, defaultHeaderValue],
+      ]),
+    });
+  });
+
+  it('returns false on write error', async () => {
+    mockFetch.mockImplementationOnce(() => ({
+      ok: false,
+    }));
+    const storage = new GenericVersionedStorage(url, GenericVersionedStorageFlow.READ_WRITE_CREATE, defaultHeaders);
+    expect(await storage.write([])).toEqual(false);
+  });
+});
diff --git a/src/storage/index.ts b/src/storage/index.ts
index b772166bd..a25661922 100644
--- a/src/storage/index.ts
+++ b/src/storage/index.ts
@@ -1 +1,2 @@
 export * from './JSONBinTokenStorage';
+export * from './GenericVersionedStorage';
diff --git a/src/storage/schemas/singleFileSchema.ts b/src/storage/schemas/singleFileSchema.ts
index 1b4f4b26e..78e23c732 100644
--- a/src/storage/schemas/singleFileSchema.ts
+++ b/src/storage/schemas/singleFileSchema.ts
@@ -10,6 +10,6 @@ export const singleFileSchema = z.object({
   $metadata: z.object({
     tokenSetOrder: z.array(z.string()).optional(),
     version: z.string().optional(),
-    updatedAt: z.string().optional().optional(),
+    updatedAt: z.string().optional(),
   }).optional(),
 });
diff --git a/src/stories/GenericVersionedStorageForm.stories.mdx b/src/stories/GenericVersionedStorageForm.stories.mdx
new file mode 100644
index 000000000..bcf880a1f
--- /dev/null
+++ b/src/stories/GenericVersionedStorageForm.stories.mdx
@@ -0,0 +1,34 @@
+import { Meta, Story, ArgsTable, Canvas, Preview } from '@storybook/addon-docs';
+import {  GenericVersionedStorageFlow } from '@/types/StorageType';
+import GenericVersioned from '@/app/components/StorageItemForm/GenericVersioned';
+
+<Meta 
+  title='GenericVersionedForm' 
+  component={GenericVersioned}
+  args={{
+    onChange:()=>{},
+    values: {
+      name: '', 
+      additionalHeaders: [],
+      flow: GenericVersionedStorageFlow.READ_WRITE, 
+    }
+  }}
+/>
+
+
+
+<ArgsTable of={GenericVersioned}/>
+
+export const GenericVersionedDefaultStory = (args) => {
+  return (
+    <>
+    <GenericVersioned {...args}/>
+    </>
+  )
+}
+
+<Canvas>
+  <Story name='Default'>
+    {GenericVersionedDefaultStory.bind({})}
+  </Story>
+</Canvas>
\ No newline at end of file
diff --git a/src/stories/Icons.stories.mdx b/src/stories/Icons.stories.mdx
index 772988f32..dc10387fa 100644
--- a/src/stories/Icons.stories.mdx
+++ b/src/stories/Icons.stories.mdx
@@ -23,7 +23,6 @@ import {
   IconFigmaMark,
   IconFolder,
   IconGap,
-  IconGithub,
   IconGrabber,
   IconGrid,
   IconHelp,
@@ -126,9 +125,6 @@ import {
   <Story name='IconGap'>
     <IconGap />
   </Story>
-  <Story name='IconGithub'>
-    <IconGithub />
-  </Story>
   <Story name='IconGrabber'>
     <IconGrabber />
   </Story>
diff --git a/src/stories/StorageProviderSelector.stories.mdx b/src/stories/StorageProviderSelector.stories.mdx
deleted file mode 100644
index 505857118..000000000
--- a/src/stories/StorageProviderSelector.stories.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Preview } from '@storybook/addon-docs';
-import { Provider } from 'react-redux';
-
-import { store } from '@/app/store';
-import { Tabs } from '@/constants/Tabs';
-
-import StorageProviderSelector from '@/app/components/StorageProviderSelector';
-
-<Meta 
-  title='StorageProviderSelector' 
-  component={StorageProviderSelector} 
-  args={{
-    text: 'StorageProviderSelector',
-    isActive: true,
-    isStored: true,
-    id: 'storageproviderID',
-  }}
-/>
-
-<ArgsTable of={StorageProviderSelector}/>
-
-export const StorageProviderSelectorDefaultStory = (args) => {
-  return (
-    <Provider store={store}>
-      <StorageProviderSelector {...args}/>
-    </Provider>
-  )
-}
-
-<Canvas>
-  <Story name='Default'>
-    {StorageProviderSelectorDefaultStory.bind({})}
-  </Story>
-</Canvas>
\ No newline at end of file
diff --git a/src/types/AsyncMessages.ts b/src/types/AsyncMessages.ts
index c65699c35..eb8df1382 100644
--- a/src/types/AsyncMessages.ts
+++ b/src/types/AsyncMessages.ts
@@ -24,6 +24,9 @@ export enum AsyncMessageTypes {
   SYNC_STYLES = 'async/sync-styles',
   CREDENTIALS = 'async/credentials',
   CHANGED_TABS = 'async/changed-tabs',
+  SET_ONBOARDINGEXPLAINERSETS = 'async/set-onboardingExplainerSets',
+  SET_ONBOARDINGEXPLAINERSYNCPROVIDERS = 'async/set-onboardingExplainerSyncProviders',
+  SET_ONBOARDINGEXPLAINERINSPECT = 'async/set-onboardingExplainerInspect',
   REMOVE_SINGLE_CREDENTIAL = 'async/remove-single-credential',
   SET_STORAGE_TYPE = 'async/set-storage-type',
   SET_NODE_DATA = 'async/set-node-data',
@@ -43,6 +46,7 @@ export enum AsyncMessageTypes {
   SET_LICENSE_KEY = 'async/set-license-key',
   ATTACH_LOCAL_STYLES_TO_THEME = 'async/attach-local-styles-to-theme',
   RESOLVE_STYLE_INFO = 'async/resolve-style-info',
+  SET_NONE_VALUES_ON_NODE = 'async/set-none-values-on-node',
   // the below messages are going from plugin to UI
   STARTUP = 'async/startup',
   GET_THEME_INFO = 'async/get-theme-info',
@@ -58,6 +62,15 @@ export type CredentialsAsyncMessageResult = AsyncMessage<AsyncMessageTypes.CREDE
 export type ChangedTabsAsyncMessage = AsyncMessage<AsyncMessageTypes.CHANGED_TABS, { requiresSelectionValues: boolean; }>;
 export type ChangedTabsAsyncMessageResult = AsyncMessage<AsyncMessageTypes.CHANGED_TABS>;
 
+export type SetOnboardingExplainerSetsAsyncMessage = AsyncMessage<AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSETS, { onboardingExplainerSets: boolean; }>;
+export type SetOnboardingExplainerSetsAsyncMessageResult = AsyncMessage<AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSETS>;
+
+export type SetOnboardingExplainerSyncProvidersAsyncMessage = AsyncMessage<AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSYNCPROVIDERS, { onboardingExplainerSyncProviders: boolean; }>;
+export type SetOnboardingExplainerSyncProvidersAsyncMessageResult = AsyncMessage<AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSYNCPROVIDERS>;
+
+export type SetOnboardingExplainerInspectAsyncMessage = AsyncMessage<AsyncMessageTypes.SET_ONBOARDINGEXPLAINERINSPECT, { onboardingExplainerInspect: boolean; }>;
+export type SetOnboardingExplainerInspectAsyncMessageResult = AsyncMessage<AsyncMessageTypes.SET_ONBOARDINGEXPLAINERINSPECT>;
+
 export type RemoveSingleCredentialAsyncMessage = AsyncMessage<AsyncMessageTypes.REMOVE_SINGLE_CREDENTIAL, { context: StorageTypeCredentials; }>;
 export type RemoveSingleCredentialAsyncMessageResult = AsyncMessage<AsyncMessageTypes.REMOVE_SINGLE_CREDENTIAL>;
 
@@ -72,6 +85,12 @@ export type RemoveTokensByValueAsyncMessage = AsyncMessage<AsyncMessageTypes.REM
 }>;
 export type RemoveTokensByValueAsyncMessageResult = AsyncMessage<AsyncMessageTypes.REMOVE_TOKENS_BY_VALUE>;
 
+export type SetNoneValuesOnNodeAsyncMessage = AsyncMessage<AsyncMessageTypes.SET_NONE_VALUES_ON_NODE, {
+  tokensToSet: { nodes: NodeInfo[]; property: Properties }[];
+  tokens: AnyTokenList
+}>;
+export type SetNoneValuesOnNodeAsyncMessageResult = AsyncMessage<AsyncMessageTypes.SET_NONE_VALUES_ON_NODE>;
+
 export type RemapTokensAsyncMessage = AsyncMessage<AsyncMessageTypes.REMAP_TOKENS, {
   oldName: string;
   newName: string;
@@ -169,6 +188,7 @@ export type UpdateAsyncMessage = AsyncMessage<AsyncMessageTypes.UPDATE, {
   usedTokenSet: UsedTokenSetsMap;
   activeTheme: string | null;
   checkForChanges?: boolean
+  shouldSwapStyles?: boolean;
 }>;
 export type UpdateAsyncMessageResult = AsyncMessage<AsyncMessageTypes.UPDATE, {
   styleIds: Record<string, string>;
@@ -218,6 +238,9 @@ export type AsyncMessages =
   | ChangedTabsAsyncMessage
   | RemoveSingleCredentialAsyncMessage
   | SetStorageTypeAsyncMessage
+  | SetOnboardingExplainerSetsAsyncMessage
+  | SetOnboardingExplainerInspectAsyncMessage
+  | SetOnboardingExplainerSyncProvidersAsyncMessage
   | SetNodeDataAsyncMessage
   | RemoveTokensByValueAsyncMessage
   | RemapTokensAsyncMessage
@@ -236,7 +259,8 @@ export type AsyncMessages =
   | SetLicenseKeyMessage
   | StartupMessage
   | AttachLocalStylesToTheme
-  | ResolveStyleInfo;
+  | ResolveStyleInfo
+  | SetNoneValuesOnNodeAsyncMessage;
 
 export type AsyncMessageResults =
   CreateStylesAsyncMessageResult
@@ -247,6 +271,9 @@ export type AsyncMessageResults =
   | ChangedTabsAsyncMessageResult
   | RemoveSingleCredentialAsyncMessageResult
   | SetStorageTypeAsyncMessageResult
+  | SetOnboardingExplainerSetsAsyncMessageResult
+  | SetOnboardingExplainerSyncProvidersAsyncMessageResult
+  | SetOnboardingExplainerInspectAsyncMessageResult
   | SetNodeDataAsyncMessageResult
   | RemoveTokensByValueAsyncMessageResult
   | RemapTokensMessageAsyncResult
@@ -265,7 +292,8 @@ export type AsyncMessageResults =
   | SetLicenseKeyMessageResult
   | StartupMessageResult
   | AttachLocalStylesToThemeResult
-  | ResolveStyleInfoResult;
+  | ResolveStyleInfoResult
+  | SetNoneValuesOnNodeAsyncMessageResult;
 
 export type AsyncMessagesMap = {
   [K in AsyncMessageTypes]: Extract<AsyncMessages, { type: K }>
diff --git a/src/types/StorageType.ts b/src/types/StorageType.ts
index bd14c3fdc..f0ef6fbea 100644
--- a/src/types/StorageType.ts
+++ b/src/types/StorageType.ts
@@ -1,5 +1,6 @@
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import { OptionalPartial } from './OptionalPartial';
+import { GenericVersionedAdditionalHeaders } from '../storage/GenericVersionedStorage';
 
 /**
  * StorageTypes are meant to define the parameters of a storage provider
@@ -68,11 +69,24 @@ StorageProviderType.ADO,
 }
 >;
 
+export enum GenericVersionedStorageFlow {
+  READ_WRITE_CREATE = 'Read/Write/Create',
+  READ_WRITE = 'Read/Write',
+  READ_ONLY = 'ReadOnly ',
+}
+export type GenericVersionedStorageType = GenericStorageType<StorageProviderType.GENERIC_VERSIONED_STORAGE, {
+  name?: string; // this is only for refrence
+  id: string // this would be the URL
+  flow: GenericVersionedStorageFlow,
+  additionalHeaders: GenericVersionedAdditionalHeaders ;
+}>;
+
 export type StorageType =
   | LocalStorageType
   | URLStorageType
   | JSONBinStorageType
   | GitStorageType
+  | GenericVersionedStorageType
   | ADOStorageType
   | BitbucketStorageType;
 
@@ -80,6 +94,7 @@ export type StorageTypeCredentials =
   | StorageTypeCredential<URLStorageType>
   | StorageTypeCredential<JSONBinStorageType>
   | StorageTypeCredential<GitStorageType>
+  | StorageTypeCredential<GenericVersionedStorageType, false>
   | StorageTypeCredential<BitbucketStorageType>
   | StorageTypeCredential<ADOStorageType>;
 
@@ -104,4 +119,5 @@ export type StorageTypeFormValues<Incomplete extends boolean = false> =
   Incomplete,
   Omit<StorageTypeCredential<ADOStorageType>, 'provider'>
   >)
+  | ({ new?: boolean; id?: string; provider: StorageProviderType.GENERIC_VERSIONED_STORAGE } & OptionalPartial<Incomplete, Omit<StorageTypeCredential<GenericVersionedStorageType>, 'provider'>>)
   | { new?: boolean; provider: StorageProviderType.LOCAL };
diff --git a/src/types/StyleIdMap.ts b/src/types/StyleIdMap.ts
new file mode 100644
index 000000000..03ca293c6
--- /dev/null
+++ b/src/types/StyleIdMap.ts
@@ -0,0 +1,2 @@
+export type StyleThemeMap = Record<string, Record<string, string>>;
+export type StyleIdMap = Record<string, string>;
diff --git a/src/types/UpdateRemoteFunction.ts b/src/types/UpdateRemoteFunction.ts
index b28142dd2..d9e52fc36 100644
--- a/src/types/UpdateRemoteFunction.ts
+++ b/src/types/UpdateRemoteFunction.ts
@@ -1,3 +1,4 @@
+import { Dispatch } from '@/app/store';
 import type { StorageTypeCredentials } from './StorageType';
 import { ThemeObjectsList } from './ThemeObjectsList';
 import type { SingleToken } from './tokens';
@@ -8,5 +9,6 @@ export type UpdateRemoteFunctionPayload = {
   context: Partial<StorageTypeCredentials>
   updatedAt?: string
   oldUpdatedAt?: string | null
+  dispatch: Dispatch
 };
 export type UpdateRemoteFunction = (payload: UpdateRemoteFunctionPayload) => Promise<void>;
diff --git a/src/types/messages.tsx b/src/types/messages.tsx
index 66c567760..70375c630 100644
--- a/src/types/messages.tsx
+++ b/src/types/messages.tsx
@@ -18,6 +18,7 @@ export enum MessageFromPluginTypes {
   ADD_JOB_TASKS = 'add_job_tasks',
   COMPLETE_JOB_TASKS = 'complete_job_tasks',
   SET_TOKENS = 'set_tokens',
+  NOTIFY_EXCEPTION = 'notify_exception',
 }
 
 export type NoSelectionFromPluginMessage = { type: MessageFromPluginTypes.NO_SELECTION };
@@ -42,6 +43,7 @@ export type UiSettingsFromPluginMessage = {
     ignoreFirstPartForStyles: boolean;
     prefixStylesWithThemeName: boolean;
     inspectDeep: boolean;
+    shouldSwapStyles: boolean;
   };
 };
 
@@ -86,6 +88,12 @@ export type SetTokensFromPluginMessage = {
   values: TokenStore;
 };
 
+export type NotifyExceptionFromPluginMessage = {
+  type: MessageFromPluginTypes.NOTIFY_EXCEPTION;
+  error: string;
+  opts?: Record<string, unknown>;
+};
+
 export type PostToUIMessage =
   | NoSelectionFromPluginMessage
   | SelectionFromPluginMessage
@@ -98,4 +106,5 @@ export type PostToUIMessage =
   | ClearJobsFromPluginMessage
   | AddJobTasksFromPluginMessage
   | CompleteJobTasksFromPluginMessage
-  | SetTokensFromPluginMessage;
+  | SetTokensFromPluginMessage
+  | NotifyExceptionFromPluginMessage;
diff --git a/src/types/payloads/RenameTokenGroupPayload.ts b/src/types/payloads/RenameTokenGroupPayload.ts
index 182c55efb..fa8516cc9 100644
--- a/src/types/payloads/RenameTokenGroupPayload.ts
+++ b/src/types/payloads/RenameTokenGroupPayload.ts
@@ -1,6 +1,5 @@
 export type RenameTokenGroupPayload = {
   parent: string;
-  path: string;
   oldName: string;
   newName: string;
   type: string;
diff --git a/src/types/payloads/UpdateTokenPayload.ts b/src/types/payloads/UpdateTokenPayload.ts
index 0b2122eca..e1f59eb9b 100644
--- a/src/types/payloads/UpdateTokenPayload.ts
+++ b/src/types/payloads/UpdateTokenPayload.ts
@@ -19,6 +19,8 @@ import {
   SingleOtherToken,
   SingleCompositionToken,
   SingleSizingToken,
+  SingleDimensionToken,
+  SingleBorderToken,
   SingleAssetToken,
 } from '../tokens';
 
@@ -52,5 +54,7 @@ export type UpdateTokenPayload =
   | GenericTokenInput<TokenTypes.SPACING, SingleSpacingToken['value']>
   | GenericTokenInput<TokenTypes.SIZING, SingleSizingToken['value']>
   | GenericTokenInput<TokenTypes.COMPOSITION, SingleCompositionToken['value']>
+  | GenericTokenInput<TokenTypes.DIMENSION, SingleDimensionToken['value']>
+  | GenericTokenInput<TokenTypes.BORDER, SingleBorderToken['value']>
   | GenericTokenInput<TokenTypes.ASSET, SingleAssetToken['value']>
   | GenericTokenInput<TokenTypes.OTHER, SingleOtherToken['value']>;
diff --git a/src/types/properties/PropertyObject.ts b/src/types/properties/PropertyObject.ts
index b507c52a3..d48405cc2 100644
--- a/src/types/properties/PropertyObject.ts
+++ b/src/types/properties/PropertyObject.ts
@@ -2,9 +2,11 @@ import { Properties } from '@/constants/Properties';
 
 export type PropertyObject = {
   name: Properties;
-  label: string;
+  label?: string;
   icon?: 'Gap' | 'Spacing';
   clear?: Properties[];
   forcedValue?: string; // @TODO check typing
   disabled?: boolean;
+  invisible?: boolean;
+  childProperties?: PropertyObject[];
 };
diff --git a/src/types/tokens/EditTokenObject.ts b/src/types/tokens/EditTokenObject.ts
index c15b981b8..3fde766be 100644
--- a/src/types/tokens/EditTokenObject.ts
+++ b/src/types/tokens/EditTokenObject.ts
@@ -1,9 +1,11 @@
 import { EditTokenFormStatus } from '@/constants/EditTokenFormStatus';
 import { SingleBorderRadiusToken } from './SingleBorderRadiusToken';
+import { SingleBorderToken } from './SingleBorderToken';
 import { SingleBorderWidthToken } from './SingleBorderWidthToken';
 import { SingleBoxShadowToken } from './SingleBoxShadowToken';
 import { SingleColorToken } from './SingleColorToken';
 import { SingleCompositionToken } from './SingleCompositionToken';
+import { SingleDimensionToken } from './SingleDimensionToken';
 import { SingleFontFamiliesToken } from './SingleFontFamiliesToken';
 import { SingleFontSizesToken } from './SingleFontSizesToken';
 import { SingleFontWeightsToken } from './SingleFontWeightsToken';
@@ -46,4 +48,6 @@ PartialExceptTypeAndSchema<Named, SingleColorToken<Named, EditTokenObjectPropert
 | PartialExceptTypeAndSchema<Named, SingleTextCaseToken<Named, EditTokenObjectProperties>>
 | PartialExceptTypeAndSchema<Named, SingleSpacingToken<Named, EditTokenObjectProperties>>
 | PartialExceptTypeAndSchema<Named, SingleOtherToken<Named, EditTokenObjectProperties>>
-| PartialExceptTypeAndSchema<Named, SingleCompositionToken<Named, EditTokenObjectProperties>>;
+| PartialExceptTypeAndSchema<Named, SingleCompositionToken<Named, EditTokenObjectProperties>>
+| PartialExceptTypeAndSchema<Named, SingleDimensionToken<Named, EditTokenObjectProperties>>
+| PartialExceptTypeAndSchema<Named, SingleBorderToken<Named, EditTokenObjectProperties>>;
diff --git a/src/types/tokens/SingleBorderToken.ts b/src/types/tokens/SingleBorderToken.ts
new file mode 100644
index 000000000..a774ca68f
--- /dev/null
+++ b/src/types/tokens/SingleBorderToken.ts
@@ -0,0 +1,5 @@
+import { TokenTypes } from '@/constants/TokenTypes';
+import { TokenBorderValue } from '../values';
+import { SingleGenericToken } from './SingleGenericToken';
+
+export type SingleBorderToken<Named extends boolean = true, P = unknown> = SingleGenericToken<TokenTypes.BORDER, TokenBorderValue, Named, P>;
diff --git a/src/types/tokens/SingleDimensionToken.ts b/src/types/tokens/SingleDimensionToken.ts
new file mode 100644
index 000000000..f9b31e018
--- /dev/null
+++ b/src/types/tokens/SingleDimensionToken.ts
@@ -0,0 +1,4 @@
+import { TokenTypes } from '@/constants/TokenTypes';
+import { SingleGenericToken } from './SingleGenericToken';
+
+export type SingleDimensionToken<Named extends boolean = true, P = unknown> = SingleGenericToken<TokenTypes.DIMENSION, string, Named, P>;
diff --git a/src/types/tokens/SingleToken.ts b/src/types/tokens/SingleToken.ts
index 24b4568af..e35110100 100644
--- a/src/types/tokens/SingleToken.ts
+++ b/src/types/tokens/SingleToken.ts
@@ -16,6 +16,8 @@ import { SingleTextDecorationToken } from './SingleTextDecorationToken';
 import { SingleTextCaseToken } from './SingleTextCaseToken';
 import { SingleOtherToken } from './SingleOtherToken';
 import { SingleCompositionToken } from './SingleCompositionToken';
+import { SingleDimensionToken } from './SingleDimensionToken';
+import { SingleBorderToken } from './SingleBorderToken';
 import { SingleAssetToken } from './SingleAssetToken';
 
 export type SingleToken<Named extends boolean = true, P = unknown> =
@@ -36,5 +38,8 @@ export type SingleToken<Named extends boolean = true, P = unknown> =
   | SingleTextCaseToken<Named, P>
   | SingleSpacingToken<Named, P>
   | SingleOtherToken<Named, P>
+  | SingleBorderToken<Named, P>
   | SingleCompositionToken<Named, P>
+  | SingleCompositionToken<Named, P>
+  | SingleDimensionToken<Named, P>
   | SingleAssetToken<Named, P>;
diff --git a/src/types/tokens/index.ts b/src/types/tokens/index.ts
index 013727fe4..b3fbcda10 100644
--- a/src/types/tokens/index.ts
+++ b/src/types/tokens/index.ts
@@ -28,4 +28,6 @@ export * from './DeepKeyTokenMap';
 export * from './SingleCompositionToken';
 export * from './ImportToken';
 export * from './EditTokenObject';
+export * from './SingleDimensionToken';
+export * from './SingleBorderToken';
 export * from './SingleAssetToken';
diff --git a/src/types/values/TokenBorderValue.ts b/src/types/values/TokenBorderValue.ts
new file mode 100644
index 000000000..a872e43ac
--- /dev/null
+++ b/src/types/values/TokenBorderValue.ts
@@ -0,0 +1,5 @@
+export type TokenBorderValue = {
+  color?: string;
+  width?: string;
+  style?: string;
+};
diff --git a/src/types/values/index.ts b/src/types/values/index.ts
index 78a0091ec..3ece6628c 100644
--- a/src/types/values/index.ts
+++ b/src/types/values/index.ts
@@ -2,3 +2,4 @@ export * from './TokenTypographyValue';
 export * from './TokenBoxShadowValue';
 export * from './TokenTextDecorationValue';
 export * from './TokenTextCaseValue';
+export * from './TokenBorderValue';
diff --git a/src/utils/__tests__/startup.test.ts b/src/utils/__tests__/startup.test.ts
index c2dee9a99..7d84e9b53 100644
--- a/src/utils/__tests__/startup.test.ts
+++ b/src/utils/__tests__/startup.test.ts
@@ -9,6 +9,11 @@ describe('startup', () => {
       settings: {},
       activeTheme: null,
       lastOpened: 0,
+      onboardingExplainer: {
+        sets: true,
+        inspect: true,
+        syncProviders: true,
+      },
       storageType: { provider: 'local' },
       localApiProviders: null,
       licenseKey: null,
@@ -39,6 +44,11 @@ describe('startup', () => {
       settings: {},
       activeTheme: null,
       lastOpened: 0,
+      onboardingExplainer: {
+        sets: true,
+        inspect: true,
+        syncProviders: true,
+      },
       storageType: { provider: 'local' },
       localApiProviders: null,
       licenseKey: null,
diff --git a/src/utils/__tests__/uiSettings.test.ts b/src/utils/__tests__/uiSettings.test.ts
index 87d3a8949..112784b6f 100644
--- a/src/utils/__tests__/uiSettings.test.ts
+++ b/src/utils/__tests__/uiSettings.test.ts
@@ -19,6 +19,7 @@ describe('uiSettings', () => {
       ignoreFirstPartForStyles: false,
       prefixStylesWithThemeName: false,
       inspectDeep: false,
+      shouldSwapStyles: false,
     });
     expect(mockSetAsync).toBeCalledWith('uiSettings', JSON.stringify({
       width: 400,
@@ -31,6 +32,7 @@ describe('uiSettings', () => {
       ignoreFirstPartForStyles: false,
       prefixStylesWithThemeName: false,
       inspectDeep: false,
+      shouldSwapStyles: false,
     }));
   });
 
@@ -50,6 +52,7 @@ describe('uiSettings', () => {
       ignoreFirstPartForStyles: false,
       prefixStylesWithThemeName: false,
       inspectDeep: false,
+      shouldSwapStyles: false,
     });
   });
 
diff --git a/src/utils/alias/checkIfAlias.tsx b/src/utils/alias/checkIfAlias.tsx
index 17c1f9aa3..e2447717c 100644
--- a/src/utils/alias/checkIfAlias.tsx
+++ b/src/utils/alias/checkIfAlias.tsx
@@ -10,7 +10,7 @@ export function checkIfAlias(token: SingleToken | string, allTokens: SingleToken
     let aliasToken = false;
     if (typeof token === 'string') {
       aliasToken = Boolean(token.match(AliasRegex));
-    } else if (token.type === TokenTypes.TYPOGRAPHY || token.type === TokenTypes.BOX_SHADOW) {
+    } else if (token.type === TokenTypes.TYPOGRAPHY || token.type === TokenTypes.BOX_SHADOW || token.type === TokenTypes.BORDER) {
       if (typeof token.value === 'string') { aliasToken = Boolean(String(token.value).match(AliasRegex)); } else {
         const arrayValue = Array.isArray(token.value) ? token.value : [token.value];
         aliasToken = arrayValue.some((value) => (
diff --git a/src/utils/convertToDefaultProperty.test.ts b/src/utils/convertToDefaultProperty.test.ts
index e39ba22b8..ba595a96b 100644
--- a/src/utils/convertToDefaultProperty.test.ts
+++ b/src/utils/convertToDefaultProperty.test.ts
@@ -56,7 +56,7 @@ describe('convertToDefaultProperty', () => {
       output: Properties.borderRadius,
     },
     {
-      input: Properties.border,
+      input: Properties.borderColor,
       output: Properties.fill,
     },
     {
diff --git a/src/utils/convertToDefaultProperty.ts b/src/utils/convertToDefaultProperty.ts
index bb75f0479..00760d951 100644
--- a/src/utils/convertToDefaultProperty.ts
+++ b/src/utils/convertToDefaultProperty.ts
@@ -22,7 +22,7 @@ export function convertToDefaultProperty(property: string): string {
     case Properties.borderRadiusBottomRight:
       type = Properties.borderRadius;
       break;
-    case Properties.border:
+    case Properties.borderColor:
       type = Properties.fill;
       break;
     case Properties.borderWidthTop:
@@ -31,6 +31,18 @@ export function convertToDefaultProperty(property: string): string {
     case Properties.borderWidthBottom:
       type = Properties.borderWidth;
       break;
+    case 'fontFamily':
+      type = Properties.fontFamilies;
+      break;
+    case 'fontSize':
+      type = Properties.fontSizes;
+      break;
+    case 'fontWeight':
+      type = Properties.fontWeights;
+      break;
+    case 'lineHeights':
+      type = Properties.lineHeights;
+      break;
     default:
       type = property;
       break;
diff --git a/src/utils/formatTokens.test.ts b/src/utils/formatTokens.test.ts
index 59024b08c..bc5726ba0 100644
--- a/src/utils/formatTokens.test.ts
+++ b/src/utils/formatTokens.test.ts
@@ -116,43 +116,43 @@ describe('formatTokens', () => {
                 h1: {
                   fontFamily: {
                     value: 'Inter',
-                    type: 'fontFamily',
+                    type: 'fontFamilies',
                   },
                   fontWeight: {
                     value: 'Bold',
-                    type: 'fontWeight',
+                    type: 'fontWeights',
                   },
                   fontSize: {
                     value: 36,
-                    type: 'fontSize',
+                    type: 'fontSizes',
                   },
                 },
                 h2: {
                   fontFamily: {
                     value: 'Inter',
-                    type: 'fontFamily',
+                    type: 'fontFamilies',
                   },
                   fontWeight: {
                     value: 'Regular',
-                    type: 'fontWeight',
+                    type: 'fontWeights',
                   },
                   fontSize: {
                     value: 24,
-                    type: 'fontSize',
+                    type: 'fontSizes',
                   },
                 },
                 alias: {
                   fontFamily: {
                     value: 'Inter',
-                    type: 'fontFamily',
+                    type: 'fontFamilies',
                   },
                   fontWeight: {
                     value: 'Bold',
-                    type: 'fontWeight',
+                    type: 'fontWeights',
                   },
                   fontSize: {
                     value: 36,
-                    type: 'fontSize',
+                    type: 'fontSizes',
                   },
                 },
                 non_resolved: {
diff --git a/src/utils/getLabelForProperty.test.tsx b/src/utils/getLabelForProperty.test.tsx
index d8314060b..f0f8efe52 100644
--- a/src/utils/getLabelForProperty.test.tsx
+++ b/src/utils/getLabelForProperty.test.tsx
@@ -17,6 +17,8 @@ describe('getLabelForProperty', () => {
   it('returns labels for label properties that need conversion', () => {
     expect(getLabelForProperty('fontFamily')).toEqual('Font');
     expect(getLabelForProperty('fontWeight')).toEqual('Weight');
+    expect(getLabelForProperty('width')).toEqual('Width');
+    expect(getLabelForProperty('style')).toEqual('Style');
     expect(getLabelForProperty('blur')).toEqual('blur');
   });
 });
diff --git a/src/utils/getLabelForProperty.tsx b/src/utils/getLabelForProperty.tsx
index 256d1b1ca..effb3f37d 100644
--- a/src/utils/getLabelForProperty.tsx
+++ b/src/utils/getLabelForProperty.tsx
@@ -33,6 +33,12 @@ export function getLabelForProperty(key: string): React.ReactElement | string {
     case 'fontWeight': {
       return 'Weight';
     }
+    case 'width': {
+      return 'Width';
+    }
+    case 'style': {
+      return 'Style';
+    }
 
     default: {
       return key;
diff --git a/src/utils/getLicenseKey.test.ts b/src/utils/getLicenseKey.test.ts
new file mode 100644
index 000000000..ffd9c36bc
--- /dev/null
+++ b/src/utils/getLicenseKey.test.ts
@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/react';
+import { mockFetch } from '../../tests/__mocks__/fetchMock';
+import getLicenseKey from './getLicenseKey';
+
+describe('getLicenseKey', () => {
+  const sentrySpy = jest.spyOn(Sentry, 'captureException');
+  it('should call Sentry exception', async () => {
+    mockFetch.mockImplementationOnce(() => Promise.reject());
+    await getLicenseKey('jan');
+    expect(sentrySpy).toBeCalledTimes(1);
+  });
+});
diff --git a/src/utils/getOnboardingExplainer.ts b/src/utils/getOnboardingExplainer.ts
new file mode 100644
index 000000000..ffb10e738
--- /dev/null
+++ b/src/utils/getOnboardingExplainer.ts
@@ -0,0 +1,33 @@
+import {
+  OnboardingExplainerSetsProperty, OnboardingExplainerSyncProvidersProperty, OnboardingExplainerInspectProperty, LastOpenedProperty,
+} from '@/figmaStorage';
+
+const data = {
+  sets: true,
+  syncProviders: true,
+  inspect: true,
+};
+let lastopend: number = 0;
+
+export default async function getOnboardingExplainer() {
+  try {
+    // Set onboarding explainer status as true if lastopend none existed
+    lastopend = await LastOpenedProperty.read() || 0;
+    if (lastopend) {
+      data.sets = await OnboardingExplainerSetsProperty.read() || false;
+      data.syncProviders = await OnboardingExplainerSyncProvidersProperty.read() || false;
+      data.inspect = await OnboardingExplainerInspectProperty.read() || false;
+    } else {
+      await OnboardingExplainerSetsProperty.write(true);
+      await OnboardingExplainerSyncProvidersProperty.write(true);
+      await OnboardingExplainerInspectProperty.write(true);
+    }
+  } catch (e) {
+    console.error('error retrieving onboardingExplainers', e);
+    await OnboardingExplainerSetsProperty.write(true);
+    await OnboardingExplainerSyncProvidersProperty.write(true);
+    await OnboardingExplainerInspectProperty.write(true);
+  }
+
+  return data;
+}
diff --git a/src/utils/getProviderIcon.tsx b/src/utils/getProviderIcon.tsx
new file mode 100644
index 000000000..88847b813
--- /dev/null
+++ b/src/utils/getProviderIcon.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { ArchiveIcon, GitHubLogoIcon, Link2Icon } from '@radix-ui/react-icons';
+import { IconFile } from '@/icons';
+import GitLabIcon from '@/icons/gitlab.svg';
+import ADOIcon from '@/icons/azure.svg';
+import JSONBinIcon from '@/icons/jsonbin.svg';
+import { StorageProviderType } from '@/constants/StorageProviderType';
+
+export function getProviderIcon(provider: StorageProviderType) {
+  switch (provider) {
+    case StorageProviderType.LOCAL:
+      return <IconFile />;
+    case StorageProviderType.URL:
+      return <Link2Icon />;
+    case StorageProviderType.GITHUB:
+      return <GitHubLogoIcon />;
+    case StorageProviderType.GITLAB:
+      return <GitLabIcon />;
+    case StorageProviderType.ADO:
+      return <ADOIcon />;
+    case StorageProviderType.BITBUCKET:
+      return <Link2Icon />;
+    case StorageProviderType.JSONBIN:
+      return <JSONBinIcon />;
+    case StorageProviderType.GENERIC_VERSIONED_STORAGE:
+      return <ArchiveIcon />;
+    default:
+      return null;
+  }
+}
diff --git a/src/utils/is/index.ts b/src/utils/is/index.ts
index 2e4b1662d..721d1f51a 100644
--- a/src/utils/is/index.ts
+++ b/src/utils/is/index.ts
@@ -10,3 +10,4 @@ export * from './isPrimitiveValue';
 export * from './isSingleBoxShadowValue';
 export * from './isSingleTypographyValue';
 export * from './isMatchingStyle';
+export * from './isSingleBorderToken';
diff --git a/src/utils/is/isSingleBorderToken.ts b/src/utils/is/isSingleBorderToken.ts
new file mode 100644
index 000000000..e1a9ad6d0
--- /dev/null
+++ b/src/utils/is/isSingleBorderToken.ts
@@ -0,0 +1,8 @@
+import { TokenTypes } from '@/constants/TokenTypes';
+import { SingleBorderToken, SingleToken } from '@/types/tokens';
+
+export function isSingleBorderToken(token: SingleToken | any): token is SingleBorderToken {
+  if (typeof token !== 'object') return false;
+  return token.type === TokenTypes.BORDER
+  && (typeof token.value === 'object' && !('value' in token.value));
+}
diff --git a/src/utils/is/isSingleBorderValue.ts b/src/utils/is/isSingleBorderValue.ts
new file mode 100644
index 000000000..3e214209c
--- /dev/null
+++ b/src/utils/is/isSingleBorderValue.ts
@@ -0,0 +1,22 @@
+import type { MapValuesToTokensResult } from '@/types';
+import type { SingleBorderToken } from '@/types/tokens';
+import type { TokenBorderValue } from '@/types/values';
+
+export function isSingleBorderValue(value: MapValuesToTokensResult[string]): value is SingleBorderToken['value'] {
+  return Boolean(
+    value
+    && (
+      typeof value === 'string'
+      || ((Array.isArray(value) ? value : [value]) as (
+        (TokenBorderValue | Extract<MapValuesToTokensResult[string], { property: string }[]>[number])[]
+      )).every((v) => (
+        v && typeof v === 'object'
+        && (
+          'color' in v
+          || 'width' in v
+          || 'style' in v
+        )
+      ))
+    ),
+  );
+}
diff --git a/src/utils/isSameCredentials.ts b/src/utils/isSameCredentials.ts
index 100fe381a..20148ea59 100644
--- a/src/utils/isSameCredentials.ts
+++ b/src/utils/isSameCredentials.ts
@@ -20,6 +20,7 @@ function isSameCredentials(
         && credential.branch === stored.branch
       );
     }
+    case StorageProviderType.GENERIC_VERSIONED_STORAGE:
     case StorageProviderType.JSONBIN:
     case StorageProviderType.URL: {
       return credential.id === stored.id && credential.provider === stored.provider;
diff --git a/src/utils/plugin/startup.ts b/src/utils/plugin/startup.ts
index 8fb6be220..edccee5cb 100644
--- a/src/utils/plugin/startup.ts
+++ b/src/utils/plugin/startup.ts
@@ -1,6 +1,7 @@
 import { ApiProvidersProperty, LicenseKeyProperty } from '@/figmaStorage';
 import { getActiveTheme } from '@/utils/getActiveTheme';
 import getLastOpened from '@/utils/getLastOpened';
+import getOnboardingExplainer from '@/utils/getOnboardingExplainer';
 import { getUsedTokenSet } from '@/utils/getUsedTokenSet';
 import { getUISettings } from '@/utils/uiSettings';
 import { getUserId } from '../../plugin/helpers';
@@ -14,6 +15,7 @@ export async function startup() {
     activeTheme,
     userId, // the user ID is used for license key binding
     lastOpened,
+    onboardingExplainer,
     storageType,
     localApiProviders,
     licenseKey,
@@ -24,6 +26,7 @@ export async function startup() {
     getActiveTheme(),
     getUserId(),
     getLastOpened(),
+    getOnboardingExplainer(),
     getSavedStorageType(),
     ApiProvidersProperty.read(),
     LicenseKeyProperty.read(),
@@ -34,6 +37,7 @@ export async function startup() {
     settings,
     activeTheme,
     lastOpened,
+    onboardingExplainer,
     storageType,
     localApiProviders,
     licenseKey,
diff --git a/src/utils/tokenset/tokenSetListToTree.ts b/src/utils/tokenset/tokenSetListToTree.ts
index c6264b268..6a0980b87 100644
--- a/src/utils/tokenset/tokenSetListToTree.ts
+++ b/src/utils/tokenset/tokenSetListToTree.ts
@@ -11,8 +11,9 @@ export function tokenSetListToTree(items: string[]) {
   const tree = items.reduce<TreeItem[]>((acc, curr) => {
     const path = curr.split('/');
     const parentName = path.length > 1 ? path.slice(0, -1).join('/') : '';
+    const parentIndex = acc.findIndex((item) => item.path === parentName);
 
-    if (parentName !== '' && !acc.find((item) => item.path === parentName)) {
+    if (parentName !== '' && parentIndex < 0) {
       const parentNameSplit = parentName.split('/');
       parentNameSplit.forEach((directory, index) => {
         const label = directory;
@@ -28,14 +29,27 @@ export function tokenSetListToTree(items: string[]) {
         }
       });
     }
-    acc.push({
-      isLeaf: true,
-      path: curr,
-      key: path.join('/'),
-      parent: parentName,
-      level: path.length - 1,
-      label: path[path.length - 1],
-    });
+
+    if (parentIndex >= 0) {
+      const childrenLength = acc.filter((item) => item.path.startsWith(`${parentName}/`)).length;
+      acc.splice(parentIndex + childrenLength + 1, 0, {
+        isLeaf: true,
+        path: curr,
+        key: path.join('/'),
+        parent: parentName,
+        level: path.length - 1,
+        label: path[path.length - 1],
+      });
+    } else {
+      acc.push({
+        isLeaf: true,
+        path: curr,
+        key: path.join('/'),
+        parent: parentName,
+        level: path.length - 1,
+        label: path[path.length - 1],
+      });
+    }
     return acc;
   }, []);
   // @README sorting used to happen here
diff --git a/src/utils/tokenset/updateTokenSetsInState.ts b/src/utils/tokenset/updateTokenSetsInState.ts
index 76724a8eb..0df5ce0b5 100644
--- a/src/utils/tokenset/updateTokenSetsInState.ts
+++ b/src/utils/tokenset/updateTokenSetsInState.ts
@@ -6,7 +6,7 @@ import { TokenSetStatus } from '@/constants/TokenSetStatus';
 export function updateTokenSetsInState(
   state: TokenState,
   mutate: ((name: string, tokenList: AnyTokenList) => null | [string, AnyTokenList]) | null,
-  ...newTokenSets: ([string] | [string, AnyTokenList])[]
+  ...newTokenSets: ([string] | [string, AnyTokenList] | [string, AnyTokenList, number])[]
 ): TokenState {
   const deletedTokenSets = new Set<string>();
   const renamedTokenSets = new Map<string, string>();
@@ -25,9 +25,12 @@ export function updateTokenSetsInState(
       acc.push([name, tokenList]);
     }
     return acc;
-  }, []).concat(newTokenSets.map((newSet) => (
-    newSet.length === 1 ? [newSet[0], []] : newSet
-  )));
+  }, []);
+
+  newTokenSets.forEach((newSet) => {
+    const insertAt = newSet.length === 3 ? newSet[2] : entries.length;
+    entries.splice(insertAt, 0, [newSet[0], newSet?.[1] ?? []]);
+  });
 
   let nextActiveTokenSet = state.activeTokenSet;
   if (deletedTokenSets.has(state.activeTokenSet)) {
diff --git a/src/utils/uiSettings.ts b/src/utils/uiSettings.ts
index 4c1a8c5bf..27adca2d0 100644
--- a/src/utils/uiSettings.ts
+++ b/src/utils/uiSettings.ts
@@ -17,6 +17,7 @@ export async function updateUISettings(uiSettings: Partial<SavedSettings>) {
       ignoreFirstPartForStyles: uiSettings.ignoreFirstPartForStyles ?? data?.ignoreFirstPartForStyles,
       prefixStylesWithThemeName: uiSettings.prefixStylesWithThemeName ?? data?.prefixStylesWithThemeName,
       inspectDeep: uiSettings.inspectDeep ?? data?.inspectDeep,
+      shouldSwapStyles: uiSettings.shouldSwapStyles ?? data?.shouldSwapStyles,
     });
   } catch (err) {
     notifyUI('There was an issue saving your credentials. Please try again.');
@@ -38,6 +39,7 @@ export async function getUISettings(notify = true): Promise<SavedSettings> {
     let ignoreFirstPartForStyles: boolean;
     let prefixStylesWithThemeName: boolean;
     let inspectDeep: boolean;
+    let shouldSwapStyles: boolean;
     if (data) {
       width = data.width || 400;
       height = data.height || 600;
@@ -49,6 +51,7 @@ export async function getUISettings(notify = true): Promise<SavedSettings> {
       ignoreFirstPartForStyles = typeof data.ignoreFirstPartForStyles === 'undefined' ? false : data.ignoreFirstPartForStyles;
       prefixStylesWithThemeName = typeof data.prefixStylesWithThemeName === 'undefined' ? false : data.prefixStylesWithThemeName;
       inspectDeep = typeof data.inspectDeep === 'undefined' ? false : data.inspectDeep;
+      shouldSwapStyles = typeof data.shouldSwapStyles === 'undefined' ? false : data.shouldSwapStyles;
       settings = {
         width: Math.max(300, width),
         height: Math.max(200, height),
@@ -60,6 +63,7 @@ export async function getUISettings(notify = true): Promise<SavedSettings> {
         ignoreFirstPartForStyles,
         prefixStylesWithThemeName,
         inspectDeep,
+        shouldSwapStyles,
       };
 
       if (notify) {
diff --git a/src/utils/validateLicense.ts b/src/utils/validateLicense.ts
index 998514512..3eead78e2 100644
--- a/src/utils/validateLicense.ts
+++ b/src/utils/validateLicense.ts
@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react';
 import { Entitlements } from '@/app/store/models/userState';
 
 export default async function validateLicense(
@@ -7,7 +8,9 @@ export default async function validateLicense(
 ): Promise<{ plan?: string; entitlements?: Entitlements[]; email?: string; error?: string }> {
   try {
     const res = await fetch(
-      `${process.env.LICENSE_API_URL}/validate-license?licenseKey=${licenseKey}&userId=${userId}${userName ? `&userName=${userName}` : ''}`,
+      `${process.env.LICENSE_API_URL}/validate-license?licenseKey=${licenseKey}&userId=${userId}${
+        userName ? `&userName=${userName}` : ''
+      }`,
     );
 
     if (res.status === 200) {
@@ -20,6 +23,7 @@ export default async function validateLicense(
     };
   } catch (e) {
     console.log(e);
+    Sentry.captureException(e);
     return {
       error: 'Error validating license',
     };
diff --git a/token-transformer/CHANGELOG.md b/token-transformer/CHANGELOG.md
index afe8d1e99..9c6e241c4 100644
--- a/token-transformer/CHANGELOG.md
+++ b/token-transformer/CHANGELOG.md
@@ -1,3 +1,8 @@
+## v0.0.28 (2022-12-01)
+
+Fixed expanded composition token types using the wrong key, those are now using the token types we use in the plugin (fontFamilies, fontWeights). Thanks thomasmattheussen!
+We now respect the order of themes as defined in $metadata.json (or the $metadata key). Thanks thomasmattheussen!
+
 ## v0.0.27 (2022-09-15)
 
 Added support to read $themes.json or $themes key by using --theme=true - this allows you to generate token files easily by providing a $themes key instead of manually running token-transformer multiple times. Thanks forceofseth!
diff --git a/token-transformer/README.md b/token-transformer/README.md
index 1020ce165..ef23ac5cf 100644
--- a/token-transformer/README.md
+++ b/token-transformer/README.md
@@ -1,4 +1,4 @@
-****# Token Transformer
+# Token Transformer
 
 Converts tokens from Tokens Studio for Figma to something Style Dictionary can read, removing any math operations or aliases, only resulting in raw values.
 
diff --git a/token-transformer/order.json b/token-transformer/order.json
new file mode 100644
index 000000000..3486f8157
--- /dev/null
+++ b/token-transformer/order.json
@@ -0,0 +1,68 @@
+{
+  "foundations": {
+    "color": {
+      "neutral": {
+        "10": {
+          "value": "#E6EFFF",
+          "type": "color"
+        },
+        "50": {
+          "value": "#2B70E8",
+          "type": "color"
+        }
+      }
+    }
+  },
+  "light": {
+    "default": {
+      "value": "{color.neutral.50}",
+      "type": "color"
+    },
+    "gray": {
+      "value": "{default}",
+      "type": "color"
+    },
+    "background": {
+      "value": "{color.neutral.10}",
+      "type": "color"
+    }
+  },
+  "dark": {
+    "gray": {
+      "value": "{default}",
+      "type": "color"
+    },
+    "background": {
+      "value": "{color.neutral.10}",
+      "type": "color"
+    }
+  },
+  "$metadata": {
+    "tokenSetOrder": [
+      "foundations",
+      "light",
+      "dark"
+    ]
+  },
+  "$themes": [
+    {
+      "id": "8f240f308c8cc4acb7106c1073dc37a682997059",
+      "name": "lightOrder",
+      "selectedTokenSets": {
+        "foundations": "enabled",
+        "light": "enabled"
+      },
+      "$figmaStyleReferences": {}
+    },
+    {
+      "id": "8f240f308c8cc4acb7106c1073dc37a682997059",
+      "name": "darkOrder",
+      "selectedTokenSets": {
+        "foundations": "source",
+        "light": "source",
+        "dark": "enabled"
+      },
+      "$figmaStyleReferences": {}
+    }
+  ]
+}
diff --git a/token-transformer/output/composition.json b/token-transformer/output/composition.json
index c68764202..57a00ae56 100644
--- a/token-transformer/output/composition.json
+++ b/token-transformer/output/composition.json
@@ -21,15 +21,15 @@
     "header": {
       "fontFamily": {
         "value": "Roboto",
-        "type": "fontFamily"
+        "type": "fontFamilies"
       },
       "fontSize": {
         "value": 96,
-        "type": "fontSize"
+        "type": "fontSizes"
       },
       "fontWeight": {
         "value": "Bold",
-        "type": "fontWeight"
+        "type": "fontWeights"
       }
     },
     "body": {
diff --git a/token-transformer/output/darkOrder.json b/token-transformer/output/darkOrder.json
new file mode 100644
index 000000000..89cea6295
--- /dev/null
+++ b/token-transformer/output/darkOrder.json
@@ -0,0 +1,10 @@
+{
+  "gray": {
+    "value": "#2B70E8",
+    "type": "color"
+  },
+  "background": {
+    "value": "#E6EFFF",
+    "type": "color"
+  }
+}
\ No newline at end of file
diff --git a/token-transformer/output/lightOrder.json b/token-transformer/output/lightOrder.json
new file mode 100644
index 000000000..7697d520f
--- /dev/null
+++ b/token-transformer/output/lightOrder.json
@@ -0,0 +1,26 @@
+{
+  "default": {
+    "value": "#2B70E8",
+    "type": "color"
+  },
+  "gray": {
+    "value": "#2B70E8",
+    "type": "color"
+  },
+  "background": {
+    "value": "#E6EFFF",
+    "type": "color"
+  },
+  "color": {
+    "neutral": {
+      "10": {
+        "value": "#E6EFFF",
+        "type": "color"
+      },
+      "50": {
+        "value": "#2B70E8",
+        "type": "color"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/token-transformer/package.json b/token-transformer/package.json
index b3340253b..dcb3f3bad 100644
--- a/token-transformer/package.json
+++ b/token-transformer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "token-transformer",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "description": "A utility that transforms tokens from Tokens Studio for Figma (formerly known as Figma Tokens) to a format that is readable by Style Dictionary.",
   "repository": {
     "type": "git",
@@ -14,10 +14,11 @@
     "build-light-test": "node index.js tokens.json temp/dark.json base/options,base/sizing,themes/dark,core/shadows base/options,base/sizing",
     "build-dark-test": "node index.js tokens.json temp/light.json base/options,base/sizing,themes/light,core/shadows base/options,base/sizing",
     "build-single-file-test-theme-config": "node index.js tokens.json --theme --themeOutputPath temp",
+    "build-single-file-test-order-config": "node index.js order.json --theme --themeOutputPath temp",
     "build-folder-test": "node index.js tokens temp/folder-light.json base/options,base/sizing,themes/light,core/shadows base/options,base/sizing",
     "build-folder-test-theme-config": "node index.js tokens --theme --themeOutputPath temp",
     "build-resolve-false-test": "node index.js tokens.json temp/resolve-false.json base/options,base/sizing,themes/dark,core/shadows base/options,base/sizing --resolveReferences=false",
-    "test": "npm run build-typography-test && npm run build-light-test && npm run build-dark-test && npm run build-single-file-test-theme-config && npm run build-folder-test && npm run build-folder-test-theme-config && npm run build-resolve-false-test && npm run build-composition-test && jest"
+    "test": "npm run build-typography-test && npm run build-light-test && npm run build-dark-test && npm run build-single-file-test-theme-config && npm run build-folder-test && npm run build-folder-test-theme-config && npm run build-resolve-false-test && npm run build-composition-test && npm run build-single-file-test-order-config && jest"
   },
   "author": "six7",
   "license": "MIT",
diff --git a/token-transformer/tokens.json b/token-transformer/tokens.json
index 0140c8d3e..e890b0ea2 100644
--- a/token-transformer/tokens.json
+++ b/token-transformer/tokens.json
@@ -229,12 +229,10 @@
       "id": "8f240f308c8cc4acb7106c1073dc37a682997059",
       "name": "themes-light",
       "selectedTokenSets": {
-        "base/options": "enabled",
-        "base/sizing": "enabled",
-        "themes/light": "enabled",
-        "core/shadows": "enabled",
         "base/options": "source",
-        "base/sizing": "source"
+        "base/sizing": "source",
+        "themes/light": "enabled",
+        "core/shadows": "enabled"
       },
       "$figmaStyleReferences": {}
     },
@@ -242,12 +240,10 @@
       "id": "8f240f308c8cc4acb7106c1073dc37a682997059",
       "name": "themes-dark",
       "selectedTokenSets": {
-        "base/options": "enabled",
-        "base/sizing": "enabled",
-        "themes/dark": "enabled",
-        "core/shadows": "enabled",
         "base/options": "source",
-        "base/sizing": "source"
+        "base/sizing": "source",
+        "themes/dark": "enabled",
+        "core/shadows": "enabled"
       },
       "$figmaStyleReferences": {}
     }
diff --git a/token-transformer/tokens/$themes.json b/token-transformer/tokens/$themes.json
index 2b10af73e..3c0fdcb3c 100644
--- a/token-transformer/tokens/$themes.json
+++ b/token-transformer/tokens/$themes.json
@@ -3,12 +3,10 @@
       "id": "8f240f308c8cc4acb7106c1073dc37a682997059",
       "name": "themes-folder-light",
       "selectedTokenSets": {
-        "base/options": "enabled",
-        "base/sizing": "enabled",
-        "themes/light": "enabled",
-        "core/shadows": "enabled",
         "base/options": "source",
-        "base/sizing": "source"
+        "base/sizing": "source",
+        "themes/light": "enabled",
+        "core/shadows": "enabled"
       },
       "$figmaStyleReferences": {}
     },
@@ -16,12 +14,10 @@
       "id": "8f240f308c8cc4acb7106c1073dc37a682997059",
       "name": "themes-folder-dark",
       "selectedTokenSets": {
-        "base/options": "enabled",
-        "base/sizing": "enabled",
-        "themes/dark": "enabled",
-        "core/shadows": "enabled",
         "base/options": "source",
-        "base/sizing": "source"
+        "base/sizing": "source",
+        "themes/dark": "enabled",
+        "core/shadows": "enabled"
       },
       "$figmaStyleReferences": {}
     }
diff --git a/token-transformer/transform.test.js b/token-transformer/transform.test.js
index 77be00402..572ea4c10 100644
--- a/token-transformer/transform.test.js
+++ b/token-transformer/transform.test.js
@@ -51,4 +51,14 @@ describe('token-transformer', () => {
     var testResult = fs.readFileSync('temp/composition.json');
     expect(testResult.toString()).toEqual(expectedResult.toString());
   });
+  it('respects order set in $metadata for dark theme', async () => {
+    var expectedResult = fs.readFileSync('output/darkOrder.json');
+    var testResult = fs.readFileSync('temp/darkOrder.json');
+    expect(testResult.toString()).toEqual(expectedResult.toString());
+  });
+  it('respects order set in $metadata for light hteme', async () => {
+    var expectedResult = fs.readFileSync('output/lightOrder.json');
+    var testResult = fs.readFileSync('temp/lightOrder.json');
+    expect(testResult.toString()).toEqual(expectedResult.toString());
+  });
 });
diff --git a/yarn.lock b/yarn.lock
index f0d94f8ec..944a53c0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2263,10 +2263,10 @@
     lodash "^4.17.15"
     matrix-inverse "^1.0.1"
 
-"@figma/plugin-typings@^1.47.0":
-  version "1.48.0"
-  resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.48.0.tgz#722ae2e1464598982b255f05930ab601e2d464a2"
-  integrity sha512-GPQTfxolu0O6Yzw2UbZndt4+lKPT8JTnFsl+ERdZtvKU3aBQBfWenlIHuHHmUdzg4TocsFHTZz2HWvRS6S9Pjw==
+"@figma/plugin-typings@^1.55.1":
+  version "1.55.1"
+  resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.55.1.tgz#b974e929c2d1bdf051104ec89701b25c8ac2bcd7"
+  integrity sha512-gNyAFMA83oNJ8X4xrMjs49CCPwfRRdNepvZUx4gxS5/GBnZqV+rhEkM9crgJrynrE1VgxILLjQIPgUxxSNBWJQ==
 
 "@gar/promisify@^1.0.1":
   version "1.1.3"
@@ -8391,9 +8391,17 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
 deep-object-diff@^1.1.0:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.7.tgz#348b3246f426427dd633eaa50e1ed1fc2eafc7e4"
-  integrity sha512-QkgBca0mL08P6HiOjoqvmm6xOAl2W6CT2+34Ljhg0OeFan8cwlcdq8jrLKsBBuUFAZLsN5b6y491KdKEoSo9lg==
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.9.tgz#6df7ef035ad6a0caa44479c536ed7b02570f4595"
+  integrity sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==
+
+deep-set-in@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/deep-set-in/-/deep-set-in-2.1.3.tgz#670bf20e75940ce812d61fa0f5ec888fa22b7ada"
+  integrity sha512-pXHFZQDPkOn+H5FHTYjoaD5bWSquJETfuR/xauYKG3E95Q1/11IC0fPZUaGbIpaC0P6v3reSWB3FPz6yrRZf7w==
+  dependencies:
+    kind-of "^4.0.0"
+    lodash.clonedeep "^4.5.0"
 
 deepmerge@^4.2.2:
   version "4.2.2"
@@ -12609,14 +12617,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
-  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
-  dependencies:
-    minimist "^1.2.5"
-
-json5@^2.1.3, json5@^2.2.1:
+json5@^2.1.2, json5@^2.1.3, json5@^2.2.0, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
@@ -12984,9 +12985,9 @@ loader-runner@^4.2.0:
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
 loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.1.tgz#278ad7006660bccc4d2c0c1578e17c5c78d5c0e0"
+  integrity sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==
   dependencies:
     big.js "^5.2.2"
     emojis-list "^3.0.0"
@@ -13589,11 +13590,16 @@ minimatch@^3.0.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.3, minimist@^1.2.5:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+minimist@^1.2.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"