diff --git a/public/index.html b/public/index.html
index cfca93d..1842295 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,10 +19,27 @@ <h1>AI チャット</h1>
             </li>
           </template>
     </ul>
-    <div id="cook-time">
+    <div id="cook-time-container">
       10分
-      <input type="range" min="0" max="100" value="0" step="10" id="cook-time-slider">
+      <input type="range" min="0" max="100" value="0" step="5" id="cook-time-slider">
       100分~
+      <div id="slider-value">50</div>
+    </div>
+    <div id="cook-difficulty">
+      <form>
+        <label>
+          <input type="radio" name="group" value="カンタン" checked>
+          Option 1
+        </label>
+        <label>
+          <input type="radio" name="group" value="難しくはない">
+          Option 2
+        </label>
+        <label>
+          <input type="radio" name="group" value="難易度は気にしない">
+          Option 3
+        </label>
+      </form>
     </div>
     <div id="selectButton"></div>
     <div>選択した食材</div>
diff --git a/public/script.js b/public/script.js
index 5ffc589..a7d14c0 100644
--- a/public/script.js
+++ b/public/script.js
@@ -88,6 +88,16 @@ document.addEventListener('click', function(event) {
   }
 });
 
+//cook-timeのsliderのデザインと値
+const cookTimeSlider = document.getElementById('cook-time-slider');
+const sliderValue = document.getElementById('slider-value');
+
+sliderValue.textContent = cookTimeSlider.value;
+
+cookTimeSlider.addEventListener('input', () => {
+    sliderValue.textContent = cookTimeSlider.value + '分';
+});
+
 submitButtonElement.onclick = async () => {
     const promptText = selectedIngredients.join("と") + "を用いた主菜を含む一食の献立を3つ提案してください";
     const aiMessageChunk = await postChat({ promptText });
@@ -109,4 +119,4 @@ submitButtonElement.onclick = async () => {
     console.log("献立 1:", menu1);
     console.log("献立 2:", menu2);
     console.log("献立 3:", menu3);
-};
+};
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 8b22e9c..77bd1bc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -43,7 +43,9 @@
 .button {
   border:2px solid black;
   border-radius: 2px;
-  padding: 10px 10px
+  padding: 10px 10px;
+  width: 100px;
+  height:100px;
 }
 
 .button:hover{
@@ -62,8 +64,44 @@
   color: #ff0000;
 }
 
-#cook-time{
+#cook-time-container{
+  width:360px;
   color: #ff0000;
-  border:2px black;
+  border:2px solid black;
   padding:20px 10px
+}
+
+#slider-value {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+
+.proposal-container {
+  width: 80%;
+  max-width: 600px;
+  display: flex;
+}
+
+.proposal {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  margin-bottom: 10px;
+  padding: 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.proposal-details {
+  display: none;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #ddd;
+  position: absolute;
+  width: calc(100% - 20px);
+  bottom: 0;
+}
+
+.proposal.active .proposal-details {
+  display: block;
 }
\ No newline at end of file