diff --git a/src/main/resources/templates/chat.html b/src/main/resources/templates/chat.html
index b283e7f..5362b49 100644
--- a/src/main/resources/templates/chat.html
+++ b/src/main/resources/templates/chat.html
@@ -30,12 +30,12 @@
               <p class="emolog-date" th:text="${date}">8/18</p>
             </li>
             <li class="emolog-show">
-              <!--自分のエモログの表示-->
+              <!--相手のエモログの表示-->
               <!--<p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p> -->
-              <p class="emoji" th:text="${FriendEmolog}"></p>
+              <p class="emoji" th:text="${FriendEmolog ['contents']}"></p>
               <p>朝 <img th:src="@{images/arrow.png}" alt="emolog_arrow"> 夜</p>
-              <!--相手のエモログの表示-->
-              <p class="emoji" th:text="${MyEmolog}"></p>
+              <!--自分のエモログの表示-->
+              <p class="emoji" th:text="${MyEmolog ['contents']}"></p>
             </li>
           </ul>
           
diff --git a/src/main/resources/templates/emologlist.html b/src/main/resources/templates/emologlist.html
index 55b5225..536deb0 100644
--- a/src/main/resources/templates/emologlist.html
+++ b/src/main/resources/templates/emologlist.html
@@ -27,31 +27,39 @@
 
           <!-- 本当はjava でデータを取ってきてすべて表示　例を書く-->
          <ul>
-            <li><a href="chat">
-              <p class="emolog-date">8月18日<p>
-              <!--相手のエモログの表示-->
-              <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>
-              <img src="images/arrow.png" alt="emolog_arrow">
-              </a>
-            </li>
-            <li>
-              <p class="emolog-date">8月17日<p>
-              <!--相手のエモログの表示-->
-              <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>
-              <img src="images/arrow.png" alt="emolog_arrow">
-            </li>
-            <li>
-              <p class="emolog-date">8月16日<p>
-              <!--相手のエモログの表示-->
-              <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>
-              <img src="images/arrow.png" alt="emolog_arrow">
-            </li>
-            <li>
-              <p class="emolog-date">8月15日<p>
-              <!--相手のエモログの表示-->
-              <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>
-              <img src="images/arrow.png" alt="emolog_arrow">
-            </li>
+         <ul class="friend_ul" th:each="emolog:${emologs}">
+             <li><a th:href="'../../chat/'+${emolog.id}">
+                 <!--<p class="emolog-date" th:text="|${#dates.month(${emolog.created_at})} 月 ${#dates.day(${emolog.created_at})} 日|">8月18日<p>
+                 相手のエモログの表示-->
+                 <p class="emoji" th:text="${emolog.contents}" >&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>
+                 <img th:src="@{/images/arrow.png}" alt="emolog_arrow">
+             </a>
+             </li>
+             <!--静的サンプル表示部分-->
+<!--                <li><a href="chat">-->
+<!--                  <p class="emolog-date">8月18日<p>-->
+<!--              <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>-->
+<!--              <img src="images/arrow.png" alt="emolog_arrow">-->
+<!--              </a>-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              <p class="emolog-date">8月17日<p>-->
+<!--              &lt;!&ndash;相手のエモログの表示&ndash;&gt;-->
+<!--              <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>-->
+<!--              <img src="images/arrow.png" alt="emolog_arrow">-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              <p class="emolog-date">8月16日<p>-->
+<!--              &lt;!&ndash;相手のエモログの表示&ndash;&gt;-->
+<!--              <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>-->
+<!--              <img src="images/arrow.png" alt="emolog_arrow">-->
+<!--            </li>-->
+<!--            <li>-->
+<!--              <p class="emolog-date">8月15日<p>-->
+<!--              &lt;!&ndash;相手のエモログの表示&ndash;&gt;-->
+<!--              <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>-->
+<!--              <img src="images/arrow.png" alt="emolog_arrow">-->
+<!--            </li>-->
           </ul>
        </div>
        <!-- ナビゲーションバーを表示-->
diff --git a/src/main/resources/templates/friendlist.html b/src/main/resources/templates/friendlist.html
index e2541b7..c25e385 100644
--- a/src/main/resources/templates/friendlist.html
+++ b/src/main/resources/templates/friendlist.html
@@ -24,7 +24,6 @@
        <!-- 友達の一覧を表示-->
        <div class="emolog-list">
 
-          <!-- 本当はjava でデータを取ってきてすべて表示　例を書く-->
          <ul>
             <li>
               <a href="emologlist.html">