diff --git a/README.md b/README.md
index 1fa359f..ab1054f 100644
--- a/README.md
+++ b/README.md
@@ -16,3 +16,4 @@
 |---|---|---|
 |Quiz-Results(sound)|[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)|[OtoLogic](https://otologic.jp)|
 |Ubuntu(Font)|[Ubuntu font licence Version 1.0](https://ubuntu.com/legal/font-licence)|[Dalton Maag](https://www.daltonmaag.com/)|
+|[Materialize](https://materializecss.com/)|[MIT License](https://opensource.org/licenses/mit-license.php)||
diff --git a/assets/css/bingo.css b/assets/css/bingo.css
index 7830822..fc2b139 100644
--- a/assets/css/bingo.css
+++ b/assets/css/bingo.css
@@ -11,25 +11,11 @@ h1 {
   display: inline-block;
 }
 
-#gridcontainer {
-  display: grid;
-  grid-template-columns: 1fr 20%;
-  grid-template-areas:
-  "areaA areaB";
-}
-
-.griditem {
-
-}
-
-#list {
-  grid-area: areaA;
-}
-
 .flexcontainer {
   display: flex;
   flex-wrap: wrap;
   align-content:space-around;
+  margin: auto 12px;
 }
 
 .item {
@@ -43,8 +29,7 @@ h1 {
   background-color: rgb(240, 240, 240);
 }
 
-#numarea {
-  grid-area: areaB;
+#viewarea {
   display: flex;
   justify-content: center;
   width: auto;
@@ -66,3 +51,8 @@ h1 {
   text-align: center;
   font-size: 128px;
 }
+
+/* @override */
+#modal {
+  width: 30%;
+}
\ No newline at end of file
diff --git a/assets/js/bingo.js b/assets/js/bingo.js
index e7d5791..5fc5e0b 100644
--- a/assets/js/bingo.js
+++ b/assets/js/bingo.js
@@ -4,30 +4,20 @@ window.addEventListener("DOMContentLoaded", function() {
     e.returnValue = "本当にページ移動しますか？";
   }, false);
 
-  // maxを設定（初期値は75）
-  let bingo_max_number;
-  let queries = getUrlQueries();
-  if(queries["max"] && queries["max"] > 0){
-    bingo_max_number = queries["max"];
-  } else {
-    bingo_max_number = 75;
-  }
+  var is_modal_open = false;
 
   // 定数
+  const bingo_max_number = 75;
   const logo = document.getElementById("logo");
   const list = document.getElementById("list");
-  const numarea = document.getElementById("numarea");
+  const viewarea = document.getElementById("viewarea");
   const upperbit = document.getElementById("upperbit");
   const lowerbit = document.getElementById("lowerbit");
   const player = new Audio();
   player.src = "./assets/audio/drum_roll.mp3";
 
-  // 変数
-  let pre_elem, interval_id, num, is_started = false;
-
   // 初期化
   for(let i=0;i<bingo_max_number;i++){
-    // 数字表示用の領域を作成
     let div = document.createElement("div");
     div.id = "num_box_" + (i+1);
     div.className = "item";
@@ -35,109 +25,103 @@ window.addEventListener("DOMContentLoaded", function() {
     div.innerText = str;
     list.appendChild(div);
   }
-  upperbit.textContent = "0";
-  lowerbit.textContent = "0";
 
-  // keyevents
-  document.addEventListener("keydown", function(event) {
-    switch (event.key) {
-      case "Enter":
-      {
-        numarea.click();
-        break;
-      }
-      default:
-      {
-        break;
+  // モーダル終了後イベントコールバック関数 onCloseEnd
+  // 引数を渡す術が分からないため、グローバル変数
+  var num, pre_elem;
+  let onCloseEnd = function(){
+    let elem = document.getElementById("num_box_" + num);
+    elem.style.backgroundColor = "#d9c816";
+    elem.style.color = "#f0f0f0";
+    pre_elem = elem;
+    is_modal_open = false;
+  };
+
+  // モーダル開始後イベントコールバック関数 onOpenEnd
+  var id;
+  let onOpenEnd = function(){
+    player.play();
+    is_modal_open = true;
+    let i=0;
+    let j=5;
+    let count = 0;
+    id = setInterval(function(){
+      if(count > 46){
+        clearInterval(id);
       }
-    }
+      upperbit.textContent = count < 46 ? parseInt(i++ % 10) : parseInt(num / 10);
+      lowerbit.textContent = count < 46 ? parseInt(j++ % 10) : parseInt(num % 10);
+      count++;
+    }, 100);
+  };
+
+  // 巻き機能
+  viewarea.addEventListener("click", function(){
+    player.pause();
+    player.currentTime = 0;
+    clearInterval(id);
+    upperbit.textContent = parseInt(num / 10);
+    lowerbit.textContent = parseInt(num % 10);
   }, false);
 
+  // モーダル初期化
+  let elems = document.querySelectorAll('.modal');
+  let options = {
+    "preventScrolling": true,
+    "onCloseEnd": onCloseEnd,
+    "onOpenEnd": onOpenEnd
+  };
+  let instances = M.Modal.init(elems, options);
+
   // 重複のないランダムな数列を用意
-  let array = getShuffledArray(null);
+  let array = getShuffledArray();
 
-  // numareaのクリックによるイベント発火
-  numarea.addEventListener("click", function() {
-    if(!is_started){
-      if(array.length > 0){
-        is_started = true;
-        // シャッフルする
-        reshuffled_array = getShuffledArray(array);
-        // 1つ取り出す
-        num = reshuffled_array.pop();
-        // 音楽を再生して数字を表示し色を変更
-        player.play();
-        let i=0, j=5;
-        let count = 0;
-        interval_id = setInterval(function(){
-          if(count > 46){
-            clearInterval(interval_id);
-            changeColor(num);
-          }
-          upperbit.textContent = count < 46 ? parseInt(i++ % 10) : parseInt(num / 10);
-          lowerbit.textContent = count < 46 ? parseInt(j++ % 10) : parseInt(num % 10);
-          count++;
-        }, 100);
+  // logoのクリックによるイベント発火
+  logo.addEventListener("click", function() {
+    // write code
+    if(array.length >0){
+      // 直前の要素の色を変更
+      if(pre_elem){
+        pre_elem.style.backgroundColor = "#367fa3";
+        pre_elem.style.color = "#f0f0f0";
       }
-    } else {
-      // 巻き機能
-      player.pause();
-      player.currentTime = 0;
-      clearInterval(interval_id);
-      upperbit.textContent = parseInt(num / 10);
-      lowerbit.textContent = parseInt(num % 10);
-      changeColor(num);
-      is_started = false;
+      // 1つ取り出して色を変更
+      num = array.pop();
+      // モーダルを表示
+      var instance = M.Modal.getInstance(logo);
+      // モーダル終了後イベントコールバック関数を参照
+      // onCloseEnd
     }
   }, false);
 
-  function changeColor(num){
-    // 直前の要素の色を変更
-    if(pre_elem){
-      pre_elem.style.backgroundColor = "#367fa3";
-      pre_elem.style.color = "#f0f0f0";
+  document.addEventListener("keydown", function(event) {
+    // write code
+    if(event.key == "Enter"){
+      if(is_modal_open){
+        viewarea.click();
+      }else{
+        logo.click();
+      }
     }
-    // 現在の要素の色を変更
-    let elem = document.getElementById("num_box_" + num);
-    elem.style.backgroundColor = "#d9c816";
-    elem.style.color = "#f0f0f0";
-    pre_elem = elem;
-  }
+  }, false);
 
-  // 引数が配列でない場合は配列を作成し、Fisher–Yatesによるシャッフルを実施する
-  // 引数が配列の場合は再度Fisher–Yatesによるシャッフルを実施する
-  function getShuffledArray(target){
+  function getShuffledArray(){
     // 1~bingo_max_numberまでの数列を用意
-    if(!Array.isArray(target)){
-      target = new Array();
-      for(let i=0;i<bingo_max_number;i++){
-        target.push(i+1);
-      }
+    let array = new Array();
+    for(let i=0;i<bingo_max_number;i++){
+      array.push(i+1);
     }
     // ミリ秒 回ループ（なんでもいいけどランダムな数）
     for(let j = 0;j<(new Date().getMilliseconds());j++){
       // Fisher–Yates
-      for(let i = target.length - 1; i > 0; i--){
+      for(let i = array.length - 1; i > 0; i--){
         let r = Math.floor(Math.random() * (i + 1));
-        let tmp = target[i];
-        target[i] = target[r];
-        target[r] = tmp;
+        let tmp = array[i];
+        array[i] = array[r];
+        array[r] = tmp;
       }
     }
-    return target;
-  }
-
-  // クエリ文字列を取得
-  function getUrlQueries() {
-    let ret = {};
-    const query_str = window.location.search.slice(1);
-    let queriy_array = query_str.split("&");
-    if(queriy_array.length == 0) return ret;
-    for(let query of queriy_array){
-      let keyval = query.split("=");
-      ret[keyval[0]] = keyval[1];
-    }
-    return ret;
+    return array;
   }
 
 }, false);
diff --git a/index.html b/index.html
index f406434..8fcbdfe 100644
--- a/index.html
+++ b/index.html
@@ -19,24 +19,32 @@
   <meta name="theme-color" content="#ffffff">
   <!-- stylesheet -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <link rel="stylesheet" href="./assets/css/bingo.css">
   <!-- javascript -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   <script src="./assets/js/bingo.js"></script>
 </head>
 
-<body>
-  <header></header>
-  <article>
-    <h1 id="logo">BINGO GAME</h1>
-    <div id="gridcontainer">
-      <div id="list" class="flexcontainer griditem"></div>
-      <div id="numarea" class="griditem">
-        <div id="upperbit"></div>
-        <div id="lowerbit"></div>
+<body">
+<header></header>
+<article>
+  <h1 id="logo" data-target="modal" class="modal-trigger">BINGO GAME</h1>
+  <div id="list" class="flexcontainer"></div>
+  <!-- Modal Structure -->
+  <div id="modal" class="modal">
+    <div class="modal-content">
+      <div id="viewarea">
+        <div id="upperbit" class="odometer"></div>
+        <div id="lowerbit" class="odometer"></div>
       </div>
     </div>
-  </article>
-  <footer></footer>
+    <div class="modal-footer">
+      <a href="#!" class="modal-close waves-effect waves-green btn-flat">OK</a>
+    </div>
+  </div>
+</article>
+<footer></footer>
 </body>
 
 </html>