diff --git a/Composer/packages/extensions/extension/src/types/flowSchema.ts b/Composer/packages/extensions/extension/src/types/flowSchema.ts
index ffe17343e5..9c42a29d7e 100644
--- a/Composer/packages/extensions/extension/src/types/flowSchema.ts
+++ b/Composer/packages/extensions/extension/src/types/flowSchema.ts
@@ -12,6 +12,7 @@ export interface FlowEditorConfig {
 export type FlowEditorWidgetMap = { [widgetName: string]: WidgetComponent<any> };
 export enum FlowSchemaBuiltinKeys {
   default = 'default',
+  custom = 'custom',
 }
 
 /** schema */
diff --git a/Composer/packages/extensions/visual-designer/src/index.tsx b/Composer/packages/extensions/visual-designer/src/index.tsx
index 6260e914b5..50f2ee0e35 100644
--- a/Composer/packages/extensions/visual-designer/src/index.tsx
+++ b/Composer/packages/extensions/visual-designer/src/index.tsx
@@ -8,7 +8,7 @@ import React, { useRef, useMemo } from 'react';
 import isEqual from 'lodash/isEqual';
 import formatMessage from 'format-message';
 import { DialogFactory } from '@bfc/shared';
-import { useShellApi, JSONSchema7 } from '@bfc/extension';
+import { useShellApi, JSONSchema7, FlowSchema } from '@bfc/extension';
 
 import { ObiEditor } from './editors/ObiEditor';
 import { NodeRendererContext, NodeRendererContextValue } from './store/NodeRendererContext';
@@ -17,6 +17,7 @@ import { FlowSchemaContext } from './store/FlowSchemaContext';
 import { FlowSchemaProvider } from './schema/flowSchemaProvider';
 import { mergePluginConfig } from './utils/mergePluginConfig';
 import { getCustomSchema } from './utils/getCustomSchema';
+import { defaultFlowSchema } from './schema/defaultFlowSchema';
 
 formatMessage.setup({
   missingTranslation: 'ignore',
@@ -108,6 +109,13 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ schema }): JSX.Element
   };
 
   const visualEditorConfig = mergePluginConfig(...plugins);
+  const customFlowSchema: FlowSchema = nodeContext.customSchemas.reduce((result, s) => {
+    const definitionKeys: string[] = Object.keys(s.definitions);
+    definitionKeys.forEach($kind => {
+      result[$kind] = defaultFlowSchema.custom;
+    });
+    return result;
+  }, {} as FlowSchema);
 
   return (
     <CacheProvider value={emotionCache}>
@@ -116,7 +124,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ schema }): JSX.Element
           <FlowSchemaContext.Provider
             value={{
               widgets: visualEditorConfig.widgets,
-              schemaProvider: new FlowSchemaProvider(visualEditorConfig.schema),
+              schemaProvider: new FlowSchemaProvider(visualEditorConfig.schema, customFlowSchema),
             }}
           >
             <div data-testid="visualdesigner-container" css={styles}>
diff --git a/Composer/packages/extensions/visual-designer/src/schema/defaultFlowSchema.tsx b/Composer/packages/extensions/visual-designer/src/schema/defaultFlowSchema.tsx
index 538dddf77d..afbfa7d786 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/defaultFlowSchema.tsx
+++ b/Composer/packages/extensions/visual-designer/src/schema/defaultFlowSchema.tsx
@@ -19,6 +19,10 @@ export const defaultFlowSchema: FlowSchema = {
   default: {
     widget: 'ActionHeader',
   },
+  custom: {
+    widget: 'ActionHeader',
+    colors: { theme: ObiColors.Gray20, color: ObiColors.White },
+  },
   [SDKKinds.IfCondition]: {
     widget: 'IfConditionWidget',
     nowrap: true,