diff --git a/.graphqlrc b/.graphqlrc
new file mode 100644
index 00000000..0a230d5e
--- /dev/null
+++ b/.graphqlrc
@@ -0,0 +1,8 @@
+projects:
+  config:
+    schema: ./server/schema.graphql
+    includes: ./client/src/graphql/**
+    excludes: ./client/src/graphql/gql/public-client/**
+  public:
+    schema: ./server/schema-public.graphql
+    includes: ./client/src/graphql/gql/public-client/*.gql
diff --git a/client/cypress/e2e/frontend/modules/snapshots.spec.js b/client/cypress/e2e/frontend/modules/snapshots.spec.js
index becc562b..edd8ae89 100644
--- a/client/cypress/e2e/frontend/modules/snapshots.spec.js
+++ b/client/cypress/e2e/frontend/modules/snapshots.spec.js
@@ -152,6 +152,11 @@ describe('Snapshot', () => {
           slug: module.slug,
         },
       },
+      ModuleTitleQuery: {
+        module: {
+          title: module.title,
+        },
+      },
       ModuleSnapshotsQuery: {
         module: {
           ...module,
diff --git a/client/src/__generated__/gql.ts b/client/src/__generated__/gql.ts
index 3c21e15a..0171264c 100644
--- a/client/src/__generated__/gql.ts
+++ b/client/src/__generated__/gql.ts
@@ -14,10 +14,13 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  */
 const documents = {
     "\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      ": types.ReadOnlyQueryDocument,
-    "\n                    fragment SnapshotFragment on SnapshotNode {\n                      title\n                    }\n                  ": types.SnapshotFragmentFragmentDoc,
+    "\n    query ModuleTitleQuery($slug: String) {\n      module(slug: $slug) {\n        title\n      }\n    }\n  ": types.ModuleTitleQueryDocument,
+    "\n  fragment SnapshotListItem on SnapshotNode {\n    id\n    title\n    created\n    mine\n    shared\n    creator\n  }\n": types.SnapshotListItemFragmentDoc,
+    "\n  fragment SnapshotTitle on SnapshotNode {\n    title\n  }\n": types.SnapshotTitleFragmentDoc,
     "\n  query ModuleEditModeQuery($slug: String) {\n    module(slug: $slug) {\n      inEditMode @client\n      slug\n    }\n  }\n": types.ModuleEditModeQueryDocument,
     "\n    query ChapterQuery($id: ID!) {\n      chapter(id: $id) {\n        path\n      }\n    }\n  ": types.ChapterQueryDocument,
     "\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  ": types.ContentBlockQueryDocument,
+    "\n    query ModuleSnapshotsQuery($slug: String!) {\n      module(slug: $slug) {\n        id\n        title\n        metaTitle\n        slug\n        topic {\n          title\n        }\n        snapshots {\n          ...SnapshotListItem\n        }\n      }\n    }\n  ": types.ModuleSnapshotsQueryDocument,
     "\n  query ModuleSolutions($slug: String) {\n    module(slug: $slug) {\n      solutionsEnabled\n      slug\n    }\n  }\n": types.ModuleSolutionsDocument,
 };
 
@@ -42,7 +45,15 @@ export function graphql(source: "\n        query ReadOnlyQuery {\n          me {
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n                    fragment SnapshotFragment on SnapshotNode {\n                      title\n                    }\n                  "): (typeof documents)["\n                    fragment SnapshotFragment on SnapshotNode {\n                      title\n                    }\n                  "];
+export function graphql(source: "\n    query ModuleTitleQuery($slug: String) {\n      module(slug: $slug) {\n        title\n      }\n    }\n  "): (typeof documents)["\n    query ModuleTitleQuery($slug: String) {\n      module(slug: $slug) {\n        title\n      }\n    }\n  "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment SnapshotListItem on SnapshotNode {\n    id\n    title\n    created\n    mine\n    shared\n    creator\n  }\n"): (typeof documents)["\n  fragment SnapshotListItem on SnapshotNode {\n    id\n    title\n    created\n    mine\n    shared\n    creator\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment SnapshotTitle on SnapshotNode {\n    title\n  }\n"): (typeof documents)["\n  fragment SnapshotTitle on SnapshotNode {\n    title\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -55,6 +66,10 @@ export function graphql(source: "\n    query ChapterQuery($id: ID!) {\n      cha
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  "): (typeof documents)["\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n    query ModuleSnapshotsQuery($slug: String!) {\n      module(slug: $slug) {\n        id\n        title\n        metaTitle\n        slug\n        topic {\n          title\n        }\n        snapshots {\n          ...SnapshotListItem\n        }\n      }\n    }\n  "): (typeof documents)["\n    query ModuleSnapshotsQuery($slug: String!) {\n      module(slug: $slug) {\n        id\n        title\n        metaTitle\n        slug\n        topic {\n          title\n        }\n        snapshots {\n          ...SnapshotListItem\n        }\n      }\n    }\n  "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/client/src/__generated__/graphql.ts b/client/src/__generated__/graphql.ts
index d5404137..1242080f 100644
--- a/client/src/__generated__/graphql.ts
+++ b/client/src/__generated__/graphql.ts
@@ -2274,7 +2274,16 @@ export type ReadOnlyQueryQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type ReadOnlyQueryQuery = { __typename?: 'Query', me?: { __typename?: 'PrivateUserNode', readOnly?: boolean | null, selectedClass?: { __typename?: 'SchoolClassNode', readOnly?: boolean | null } | null } | null };
 
-export type SnapshotFragmentFragment = { __typename?: 'SnapshotNode', title?: string | null } & { ' $fragmentName'?: 'SnapshotFragmentFragment' };
+export type ModuleTitleQueryQueryVariables = Exact<{
+  slug?: InputMaybe<Scalars['String']['input']>;
+}>;
+
+
+export type ModuleTitleQueryQuery = { __typename?: 'Query', module?: { __typename?: 'ModuleNode', title: string } | null };
+
+export type SnapshotListItemFragment = { __typename?: 'SnapshotNode', id: string, title?: string | null, created: any, mine?: boolean | null, shared: boolean, creator: string } & { ' $fragmentName'?: 'SnapshotListItemFragment' };
+
+export type SnapshotTitleFragment = { __typename?: 'SnapshotNode', title?: string | null } & { ' $fragmentName'?: 'SnapshotTitleFragment' };
 
 export type ModuleEditModeQueryQueryVariables = Exact<{
   slug?: InputMaybe<Scalars['String']['input']>;
@@ -2297,6 +2306,16 @@ export type ContentBlockQueryQueryVariables = Exact<{
 
 export type ContentBlockQueryQuery = { __typename?: 'Query', contentBlock?: { __typename?: 'ContentBlockNode', path?: string | null } | null };
 
+export type ModuleSnapshotsQueryQueryVariables = Exact<{
+  slug: Scalars['String']['input'];
+}>;
+
+
+export type ModuleSnapshotsQueryQuery = { __typename?: 'Query', module?: { __typename?: 'ModuleNode', id: string, title: string, metaTitle: string, slug: string, topic?: { __typename?: 'TopicNode', title: string } | null, snapshots?: Array<(
+      { __typename?: 'SnapshotNode' }
+      & { ' $fragmentRefs'?: { 'SnapshotListItemFragment': SnapshotListItemFragment } }
+    ) | null> | null } | null };
+
 export type ModuleSolutionsQueryVariables = Exact<{
   slug?: InputMaybe<Scalars['String']['input']>;
 }>;
@@ -2304,9 +2323,12 @@ export type ModuleSolutionsQueryVariables = Exact<{
 
 export type ModuleSolutionsQuery = { __typename?: 'Query', module?: { __typename?: 'ModuleNode', solutionsEnabled?: boolean | null, slug: string } | null };
 
-export const SnapshotFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]} as unknown as DocumentNode<SnapshotFragmentFragment, unknown>;
+export const SnapshotListItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}}]}}]} as unknown as DocumentNode<SnapshotListItemFragment, unknown>;
+export const SnapshotTitleFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotTitle"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]} as unknown as DocumentNode<SnapshotTitleFragment, unknown>;
 export const ReadOnlyQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ReadOnlyQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}},{"kind":"Field","name":{"kind":"Name","value":"selectedClass"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}}]}}]}}]}}]} as unknown as DocumentNode<ReadOnlyQueryQuery, ReadOnlyQueryQueryVariables>;
+export const ModuleTitleQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleTitleQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]} as unknown as DocumentNode<ModuleTitleQueryQuery, ModuleTitleQueryQueryVariables>;
 export const ModuleEditModeQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleEditModeQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inEditMode"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleEditModeQueryQuery, ModuleEditModeQueryQueryVariables>;
 export const ChapterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ChapterQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"chapter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ChapterQueryQuery, ChapterQueryQueryVariables>;
 export const ContentBlockQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ContentBlockQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contentBlock"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ContentBlockQueryQuery, ContentBlockQueryQueryVariables>;
+export const ModuleSnapshotsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSnapshotsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"metaTitle"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"topic"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"snapshots"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SnapshotListItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}}]}}]} as unknown as DocumentNode<ModuleSnapshotsQueryQuery, ModuleSnapshotsQueryQueryVariables>;
 export const ModuleSolutionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSolutions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"solutionsEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleSolutionsQuery, ModuleSolutionsQueryVariables>;
\ No newline at end of file
diff --git a/client/src/components/modules/ModuleSubNavigation.vue b/client/src/components/modules/ModuleSubNavigation.vue
index 2f3052c1..5b78a4fa 100644
--- a/client/src/components/modules/ModuleSubNavigation.vue
+++ b/client/src/components/modules/ModuleSubNavigation.vue
@@ -9,9 +9,26 @@
 
 <script setup lang="ts">
 import BackLink from '@/components/BackLink.vue';
-import { getModule } from '@/graphql/queries';
+import { useQuery } from '@vue/apollo-composable';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+import { graphql } from '@/__generated__';
 
-const { module } = getModule();
+const route = useRoute();
+const { result } = useQuery(
+  graphql(`
+    query ModuleTitleQuery($slug: String) {
+      module(slug: $slug) {
+        title
+      }
+    }
+  `),
+  {
+    slug: route.params.slug as string,
+  }
+);
+
+const module = computed(() => result.value?.module || { title: '' });
 </script>
 
 <style scoped lang="scss">
diff --git a/client/src/components/modules/SnapshotListItem.vue b/client/src/components/modules/SnapshotListItem.vue
index ed03825b..628b361a 100644
--- a/client/src/components/modules/SnapshotListItem.vue
+++ b/client/src/components/modules/SnapshotListItem.vue
@@ -51,17 +51,28 @@ import SHARE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/share.gql';
 import UPDATE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/update.gql';
 import DELETE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/delete.gql';
 import SNAPSHOTS_QUERY from 'gql/queries/moduleSnapshots.gql';
-import gql from 'graphql-tag';
 import PenIcon from '@/components/icons/PenIcon.vue';
 import TrashIcon from '@/components/icons/TrashIcon.vue';
 import { removeAtIndex } from '@/graphql/immutable-operations';
 import { matomoTrackEvent } from '@/helpers/matomo-client';
+import { graphql } from '@/__generated__';
 
-const SNAPSHOT_FRAGMENT = gql`
-                    fragment SnapshotFragment on SnapshotNode {
-                      title
-                    }
-                  `
+export const SnapshotListItemFragment = graphql(`
+  fragment SnapshotListItem on SnapshotNode {
+    id
+    title
+    created
+    mine
+    shared
+    creator
+  }
+`);
+
+export const SnapshotTitleListItem = graphql(`
+  fragment SnapshotTitle on SnapshotNode {
+    title
+  }
+`);
 
 export default {
   props: {
diff --git a/client/src/pages/module/module-base.vue b/client/src/pages/module/module-base.vue
index b3d898d9..a540e5c4 100644
--- a/client/src/pages/module/module-base.vue
+++ b/client/src/pages/module/module-base.vue
@@ -12,7 +12,6 @@ import ModuleSubNavigation from '@/components/modules/ModuleSubNavigation.vue';
 import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
 import { matomoTrackPageView } from '@/helpers/matomo-client';
 
-
 export default {
   components: {
     ModuleNavigation,
diff --git a/client/src/pages/snapshot/snapshots.vue b/client/src/pages/snapshot/snapshots.vue
index e0650204..75366e83 100644
--- a/client/src/pages/snapshot/snapshots.vue
+++ b/client/src/pages/snapshot/snapshots.vue
@@ -22,52 +22,52 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useQuery } from '@vue/apollo-composable';
+
 import SnapshotListItem from '@/components/modules/SnapshotListItem.vue';
-import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
 import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu.vue';
+import { useRoute } from 'vue-router';
+import { graphql } from '@/__generated__';
 
 const defaultModule = { topic: {}, snapshots: [] };
 
-export default {
-  components: {
-    SnapshotTeamMenu,
-    SnapshotListItem,
-  },
-  data() {
-    return {
-      module: defaultModule,
-      selectedLink: 'mine',
-    };
-  },
+const selectedLink = ref('mine');
 
-  computed: {
-    snapshots() {
-      if (this.selectedLink === 'mine') {
-        return this.module.snapshots.filter((snapshot) => snapshot.mine);
-      } else {
-        return this.module.snapshots.filter((snapshot) => snapshot.shared);
+const route = useRoute();
+
+const { result } = useQuery(
+  graphql(`
+    query ModuleSnapshotsQuery($slug: String!) {
+      module(slug: $slug) {
+        id
+        title
+        metaTitle
+        slug
+        topic {
+          title
+        }
+        snapshots {
+          ...SnapshotListItem
+        }
       }
-    },
-  },
+    }
+  `),
+  {
+    slug: route.params.slug as string,
+  }
+);
 
-  apollo: {
-    module: {
-      query: MODULE_SNAPSHOTS_QUERY,
-      variables() {
-        return {
-          slug: this.$route.params.slug,
-        };
-      },
-      error(error, vm, key, type, options) {
-        console.log(error, vm, key, type, options);
-      },
-      update(data) {
-        return data.module || defaultModule;
-      },
-    },
-  },
-};
+const module = computed(() => result.value?.module || defaultModule);
+
+const snapshots = computed(() => {
+  if (selectedLink.value === 'mine') {
+    return module.value.snapshots.filter((snapshot) => snapshot.mine);
+  } else {
+    return module.value.snapshots.filter((snapshot) => snapshot.shared);
+  }
+});
 </script>
 
 <style scoped lang="scss">