diff --git a/frontend/src/components/flowEditor/left/ControlPanel.vue b/frontend/src/components/flowEditor/left/ControlPanel.vue
new file mode 100644
index 0000000..41a5bda
--- /dev/null
+++ b/frontend/src/components/flowEditor/left/ControlPanel.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="q-py-md">
+    <q-list>
+      <q-expansion-item
+        group="somegroup"
+        label="レコードを追加画面"
+        default-opened
+      >
+        <q-card-section>
+          <q-checkbox v-model="setting.v1" label="追加画面表示した時" />
+          <q-checkbox v-model="setting.v2" label="保存をクリックした時" />
+          <q-checkbox v-model="setting.v3" label="保存成功した時" />
+        </q-card-section>
+      </q-expansion-item>
+
+      <q-expansion-item group="somegroup" label="レコード編集画面">
+        <q-card>
+          <q-card-section>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
+            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
+            dolorum officiis modi facere maiores architecto suscipit iste
+            eveniet doloribus ullam aliquid.
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
+
+      <q-expansion-item group="somegroup" label="レコード詳細画面">
+        <q-card>
+          <q-card-section>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
+            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
+            dolorum officiis modi facere maiores architecto suscipit iste
+            eveniet doloribus ullam aliquid.
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
+
+      <q-expansion-item group="somegroup" label="レコード一覧画面">
+        <q-card class="bg-teal-2">
+          <q-card-section>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
+            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
+            dolorum officiis modi facere maiores architecto suscipit iste
+            eveniet doloribus ullam aliquid.
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
+    </q-list>
+
+
+  </div>
+  <q-btn @click="clear" label="clear"/>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
+interface Setting {
+  v1: boolean;
+  v2: boolean;
+  v3: boolean;
+}
+const setting: Ref<Setting> = ref({
+  v1: true,
+  v2: true,
+  v3: false,
+});
+
+let clear = () => {
+  setting.value.v1 = false
+  setting.value.v2 = false
+  setting.value.v3 = false
+}
+</script>
diff --git a/frontend/src/components/flowEditor/left/ItemSelector.vue b/frontend/src/components/flowEditor/left/ItemSelector.vue
new file mode 100644
index 0000000..24ed954
--- /dev/null
+++ b/frontend/src/components/flowEditor/left/ItemSelector.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="ItemSelector q-pa-sm">
+    <div class="row">
+      <div class="col-auto">
+        <q-icon name="widgets" color="primary" size="2.5em" />
+      </div>
+      <div class="col flex">
+        <div class="q-pa-sm flex" style="align-items: center">{{title}}</div>
+      </div>
+      <div class="col-auto flex">
+        <div class="flex" style="align-items: center">
+          <q-btn
+            class="q-px-sm"
+            color="white"
+            size="sm"
+            text-color="black"
+            label="変 更"
+            dense
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const title = ref('勤怠管理')
+</script>
+
+<style lang="sass">
+.ItemSelector
+  border: 0.15em solid rgba(#999, .4)
+  border-radius: 0.4em
+</style>
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 71b3d2c..984994d 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -62,6 +62,13 @@ const essentialLinks: EssentialLinkProps[] = [
     link: '/#/ruleEditor',
     target:'_self'
   },
+  {
+    title: 'FlowEditor',
+    caption: 'FlowEditor',
+    icon: 'account_tree',
+    link: '/#/flowEditor',
+    target:'_self'
+  },
   {
     title:'',
     isSeparator:true
diff --git a/frontend/src/pages/FlowEditorPage.vue b/frontend/src/pages/FlowEditorPage.vue
new file mode 100644
index 0000000..1ce2bc7
--- /dev/null
+++ b/frontend/src/pages/FlowEditorPage.vue
@@ -0,0 +1,37 @@
+<template>
+  <q-page>
+    <div class="q-pa-md">
+      <div class="q-gutter-sm row items-start">
+        <q-breadcrumbs>
+          <q-breadcrumbs-el icon="home" to="/" />
+          <q-breadcrumbs-el :label="title" icon="rule" />
+        </q-breadcrumbs>
+      </div>
+      <div class="q-pa-md">
+        <div class="row">
+          <div class="col-3 column">
+            <ItemSelector />
+            <div class="col-auto"><ControlPanel /></div>
+          </div>
+          <!-- <div class="col">
+
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
+import ControlPanel from 'components/flowEditor/left/ControlPanel.vue';
+interface FlowEditorPageProps {
+  title: string;
+}
+
+const props = withDefaults(defineProps<FlowEditorPageProps>(), {
+  title: 'FlowEditor',
+});
+</script>
+
+<style lang="sass"></style>
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index 0b5f767..6d5fc12 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -4,13 +4,21 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
-    children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
-  },
-  {
-    path: '/ruleEditor/',
-    component: () => import('layouts/MainLayout.vue'),
-    children: [{ path: '', component: () => import('pages/RuleEditor.vue') }],
+    children: [
+      { path: '', component: () => import('pages/IndexPage.vue') },
+      { path: 'ruleEditor', component: () => import('pages/RuleEditor.vue') },
+      { path: 'flowEditor', component: () => import('pages/FlowEditorPage.vue') }
+    ],
   },
+  // {
+  //   path: '/ruleEditor/',
+  //   component: () => import('layouts/MainLayout.vue'),
+  //   children: [{ path: '', component: () => import('pages/RuleEditor.vue') }],
+  // },
+  // {
+  //   path: '/flowEditor/',
+  //   component: () => import('layouts/FlowEditorPage.vue'),
+  // },
 
   // Always leave this as last one,
   // but you can also remove it