diff --git a/client/src/graphql/gql/instrumentsByTypeQuery.gql b/client/src/graphql/gql/instrumentsByTypeQuery.gql
new file mode 100644
index 00000000..6024c799
--- /dev/null
+++ b/client/src/graphql/gql/instrumentsByTypeQuery.gql
@@ -0,0 +1,12 @@
+query InstrumentQuery($type: String!){
+ instruments(type: $type) {
+ edges {
+ node {
+ id
+ title
+ contents
+ slug
+ }
+ }
+ }
+}
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 36a0016c..8d8bcf81 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -6,19 +6,44 @@
-
-
-
+
@@ -49,6 +74,7 @@
&__list {
padding: $large-spacing 0;
max-width: 1200px;
+ width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 1d5e545b..0d101a35 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -55,7 +55,7 @@ const routes = [
{path: '/room/:slug', name: 'room', component: room, props: true},
{path: '/article/:slug', name: 'article', component: article, meta: {layout: 'simple'}},
{
- path: '/instrument/',
+ path: '/instruments/:slug',
name: 'instrument-overview',
component: instrumentOverview,
meta: {subnavigation: true}