diff --git a/src/models.ts b/src/models.ts
index 1509f19..947f17c 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -47,7 +47,7 @@ export type SchemeTypeOption = {
 };
 export const SchemeTypeOptions: SchemeTypeOption[] = [
   { label: 'Q Scheme', short: 'Q', value: 'q_scheme' },
-  { label: 'Q Scheme 2', short: 'Q2', value: 'q_2_scheme' },
+  { label: 'Q2 Scheme', short: 'Q2', value: 'q_2_scheme' },
   { label: 'Swatch Scheme', short: 'Swatch', value: 'swatch_scheme' },
   { label: 'Material Design 2 Scheme', short: 'M2', value: 'material_2' },
   { label: 'Material Design 3 Scheme', short: 'M3', value: 'material_3' },
diff --git a/src/page-components/scheme/Q2Scheme.tsx b/src/page-components/scheme/Q2Scheme.tsx
index 907d042..3a79ae9 100644
--- a/src/page-components/scheme/Q2Scheme.tsx
+++ b/src/page-components/scheme/Q2Scheme.tsx
@@ -1,8 +1,10 @@
+import { isEqual, isNil } from 'lodash-es';
 import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { SchemeContent } from '../../models';
 import { Q2SchemeStorage } from '../../q-2-scheme';
 import { isNilOrEmpty } from '../../utls';
+import { SchemeExport } from './Export';
 
 const tabOptions = [
   { title: 'Overview', id: 'overview' },
@@ -30,6 +32,7 @@ export function Q2Scheme({ scheme }: Q2SchemeProps) {
           export: isNilOrEmpty(scheme.schemeStorage?.cssVariables),
         }}
       />
+      {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
     </>
   );
 }