diff --git a/frontend/quasar.config.js b/frontend/quasar.config.js
index b8fff95..b998514 100644
--- a/frontend/quasar.config.js
+++ b/frontend/quasar.config.js
@@ -108,7 +108,9 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: [
+        'Notify'
+      ]
     },
 
     // animations: 'all', // --- includes all animations
diff --git a/frontend/src/components/DocUpload.vue b/frontend/src/components/DocUpload.vue
index 2ab3c1b..877f16f 100644
--- a/frontend/src/components/DocUpload.vue
+++ b/frontend/src/components/DocUpload.vue
@@ -5,7 +5,8 @@
         :url="uploadUrl"
         :label="title"
         accept=".csv,.xlsx"
-        :on-rejected="onRejected"
+        v-on:rejected="onRejected"
+        v-on:finish="onUploadFinish"
         field-name="file"
     ></q-uploader>
   </div>
@@ -35,7 +36,16 @@
       $q.notify({
         type: 'negative',
         message: `CSVおよびExcelファイルを選択してください。`
-      })
+
+      });
+    }
+
+    function onUploadFinish(){
+        $q.notify({
+          message:"ファイルアップロードしました！",
+          caption:"通知",
+          type:"positive"
+        })
     }
 
 interface Props {
diff --git a/frontend/src/components/Rule.json b/frontend/src/components/Rule.json
new file mode 100644
index 0000000..62fcbf0
--- /dev/null
+++ b/frontend/src/components/Rule.json
@@ -0,0 +1,27 @@
+{
+  "name":"保存ボタン押す際、入力値チェック",
+  "condtion":{
+      "logic":{
+        "logicType":"And",
+        "condtions":[
+          {
+            "compareType":"event",
+            "compareItem":"Record-Save"
+          },
+          {
+            "compareType":"field",
+            "compareItem":"テキスト",
+            "op":"!==",
+            "compareValue":"{value}"
+          },
+          {
+            "compareType":"field",
+            "compareItem":"テキスト",
+            "op":"!==",
+            "compareValue":"isZengaku('{value}')"
+          }
+        ]    
+      }
+  }
+
+}
\ No newline at end of file
diff --git a/frontend/src/components/Rules.ts b/frontend/src/components/Rules.ts
new file mode 100644
index 0000000..78173c1
--- /dev/null
+++ b/frontend/src/components/Rules.ts
@@ -0,0 +1,9 @@
+export interface Rule{
+  id:number;
+  name:string;
+  condtion:CondtionTree
+}
+
+export interface CondtionTree{
+  
+}
\ No newline at end of file
diff --git a/frontend/src/pages/RuleEditor.vue b/frontend/src/pages/RuleEditor.vue
new file mode 100644
index 0000000..a6b55fc
--- /dev/null
+++ b/frontend/src/pages/RuleEditor.vue
@@ -0,0 +1,17 @@
+<template>
+  <q-page>
+    <div class="q-pa-md">
+      <div class="q-gutter-sm row items-start">
+       
+      </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';
+
+</script>