diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index fc69d4d..f1c3334 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -50,6 +50,19 @@ import { ref } from 'vue';
 import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
 
 const essentialLinks: EssentialLinkProps[] = [
+{
+    title: 'ホーム',
+    caption: 'home',
+    icon: 'home',
+    link: '/'
+  },
+  {
+    title: 'ルールエディター',
+    caption: 'rule',
+    icon: 'rule',
+    link: '/#/ruleEditor'
+  }
+  ,
   {
     title: 'Docs',
     caption: 'quasar.dev',
diff --git a/frontend/src/pages/IndexPage.vue b/frontend/src/pages/IndexPage.vue
index cff76f0..36bc2ed 100644
--- a/frontend/src/pages/IndexPage.vue
+++ b/frontend/src/pages/IndexPage.vue
@@ -1,6 +1,12 @@
 <template>
   <q-page>
+
     <div class="q-pa-md">
+      <div class="q-gutter-sm row items-start">
+        <q-breadcrumbs>
+          <q-breadcrumbs-el icon="home" label="ホーム" />
+        </q-breadcrumbs>
+     </div>
       <div class="q-gutter-sm row items-start">
         <doc-uploader></doc-uploader>
       </div>
diff --git a/frontend/src/pages/RuleEditor.vue b/frontend/src/pages/RuleEditor.vue
index a6b55fc..962845f 100644
--- a/frontend/src/pages/RuleEditor.vue
+++ b/frontend/src/pages/RuleEditor.vue
@@ -2,16 +2,48 @@
   <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 id="q-app" style="min-height: 100vh;">
+        <div class="q-pa-md">
+            <q-btn-dropdown
+              split
+              color="primary"
+              label="ルール新規作成"
+              size="lg"
+            >
+              <q-list>
+                <q-item
+                    v-for="action in actions"
+                    clickable v-close-popup
+                    @click="onItemClick"
+                    :key="action"
+                  >
+                  <q-item-section>
+                    <q-item-label>{{ action }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+        </div>
       </div>
     </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
-import { Todo, Meta } from 'components/models';
-import DocUploader from 'components/DocUpload.vue';
-// import ExampleComponent from 'components/ExampleComponent.vue';
-import { ref } from 'vue';
-
+interface Props {
+  title: string;
+  actions:string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  title:"ルールエディター",
+  actions:()=>["フィールド制御","一覧画面","その他"]
+});
+function onItemClick(evt: Event){
+  return;
+}
 </script>
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index 2d34fc1..0b5f767 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -6,6 +6,11 @@ const routes: RouteRecordRaw[] = [
     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') }],
+  },
 
   // Always leave this as last one,
   // but you can also remove it