diff --git a/app/styles/main.css b/app/styles/main.css
index 34e85bc..b483fb7 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -63,16 +63,31 @@ nav ul{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
+
 }
 nav ul li{
   margin-left: 2px;
   float: left;
   padding: 6px 12px;
   background-color: #999999;
+  position: relative;
+}
+nav ul li i.fa{
+  position: absolute;
+  color: #ffffff;
+  font-size: 18px;
+  right: -4px;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  -webkit-transform: translateX(-50%) translateY(-50%);
 }
 nav ul li a{
   color: #ffffff;
 }
+nav ul li:hover a{
+  text-decoration: none;
+  color: #ffffff;
+}
 nav ul li.action{
   color: #ffffff;
   background-color: #ed1d24;
@@ -301,7 +316,8 @@ aside .step .finish-design button{
   background-color: transparent;
   border-radius: 0;
   border: 0;
-
+  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
+  box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-header{
   padding: 0 0 10px 0;
@@ -362,10 +378,15 @@ aside .step .finish-design button{
 }
 .aside #choice-design-option li{
   border: 1px solid #cdcdcd;
+  position: relative;
+  cursor: pointer;
 }
 .aside #choice-design-option li .hover{
   background-color: #fddad4;
-  opacity: 0.5;
+  opacity: 0.6;
+  position: absolute;
+  width: 100%;
+  height: 100%;
   display: none;
 }
 .aside #choice-design-option li:hover .hover{
@@ -421,6 +442,26 @@ aside .step .finish-design button{
   right: 5px;
   bottom: 0;
 }
+
+
+/*FOOTER*/
+footer{
+  background-color: #333333;
+}
+footer ul.nav-footer{
+  padding-left: 0;
+  list-style: none;
+}
+footer ul.nav-footer li{
+  float: left;
+  padding: 3px 10px;
+  border-right: 1px dotted #ffffff;
+
+}
+footer ul.nav-footer li a{
+  color: #ffffff;
+  font-size: 11px;
+}
 /* Customize container */
 @media (min-width: 768px) {
   .container {
diff --git a/app/views/main.html b/app/views/main.html
index 7e3f742..465a8db 100644
--- a/app/views/main.html
+++ b/app/views/main.html
@@ -10,14 +10,13 @@
       <div class="col-sm-12">
         <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
         <ul class="pull-right">
-          <li><a href="#">商品に戻る</a></li>
-          <li><a href="#">加工方法に戻る</a></li>
+          <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
+          <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
           <li class="action">デザインする</li>
         </ul>
       </div>
     </nav>
-    <article>
-
+    <article class="clearfix">
         <aside class="col-sm-5">
           <div class="step">
             <div class="title">
@@ -171,8 +170,16 @@
             </ul>
           </div>
         </section>
-
     </article>
+    <footer class="clearfix">
+      <ul class="nav-footer">
+        <li><a href="#">店舗検索</a></li>
+        <li><a href="#">お客様窓口</a></li>
+        <li><a href="#">企業情報</a></li>
+        <li><a href="#">採用情報</a></li>
+        <li><a href="#">プライバシーポリシー</a></li>
+      </ul>
+    </footer>
 
     <!--MODAL CONTENT-->
     <div ng-include="'views/tshirt-design.html'"></div>
diff --git a/app/views/tshirt-design.html b/app/views/tshirt-design.html
index fc98a57..506fc43 100644
--- a/app/views/tshirt-design.html
+++ b/app/views/tshirt-design.html
@@ -4,8 +4,8 @@
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <button class="black" ng-click="modalClose()">x キャンセル</button>
-                <button class="black">> はじめての方へ</button>
+                <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
+                <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
             </div>
             <div class="modal-body">
                 <header class="clearfix">
@@ -36,6 +36,7 @@
                     <div class="aside col-xs-4">
                         <ul id="choice-design-option">
                             <li>
+                                <div class="hover"></div>
                                 <div class="title">
                                     <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                                     文字を追加
@@ -50,6 +51,7 @@
                                 </div>
                             </li>
                             <li>
+                                <div class="hover"></div>
                                 <div class="title">
                                     <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                                     イラストやイメージを追加
@@ -64,6 +66,7 @@
                                 </div>
                             </li>
                             <li>
+                                <div class="hover"></div>
                                 <div class="title">
                                     <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                                     自分の画像・写真を追加
@@ -78,6 +81,7 @@
                                 </div>
                             </li>
                             <li>
+                                <div class="hover"></div>
                                 <div class="title">
                                     <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                                     おすすめデザインを使う