diff --git a/src/images/My page.png b/src/images/My page.png
new file mode 100644
index 0000000..53ea04b
Binary files /dev/null and b/src/images/My page.png differ
diff --git a/src/images/big-cursor.png b/src/images/big-cursor.png
new file mode 100644
index 0000000..4e2d0e5
Binary files /dev/null and b/src/images/big-cursor.png differ
diff --git a/src/images/confirm.png b/src/images/confirm.png
new file mode 100644
index 0000000..a45b828
Binary files /dev/null and b/src/images/confirm.png differ
diff --git a/src/images/nursery-thumbnail.png b/src/images/nursery-thumbnail.png
new file mode 100644
index 0000000..4e61c7c
Binary files /dev/null and b/src/images/nursery-thumbnail.png differ
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 243dd15..527a71a 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,4 +1,4 @@
-html, body {
+html, body,p {
   margin: 0;
   padding: 0;
 }
@@ -156,6 +156,160 @@ ul, li, a {
     background: #f5a623;
     border-radius: 10px;
     text-align: center;
+  }
+}
+
+.calendar {
+  float: left;
+  margin-left: 5%;
+  margin-right: 5%;
+  margin-top: 80px;
+  width: 40%;
+}
+
+.select-detail {
+  float: left;
+  margin-left: 5%;
+  margin-right: 5%;
+  width: 40%;
+  margin-top: 80px;
+}
+
+.big-cursor {
+  clear: both;
+  text-align: center;
+  img {
+    margin-top: 30px;
+    width: 30%;
+  }
+}
+.regions {
+  clear: both;
+  float: left;
+  margin-left: 5%;
+  width: 20%;
+  margin-top: 30px;
+}
+
+.nurseries-list {
+  border: solid 3px #f5a623;
+  border-radius: 10px;
+  float: left;
+  margin-top: 30px;
+  margin-bottom: 50px;
+  width: 50%;
+  padding: 10px;
+  .nursery {
+    height: auto;
+    margin-right: 10px;
+    margin-top: 10px;
+    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.4);
+    border-radius: 5px;
+    clear: both;
+    width: 100%;
+    .nursery-description {
+      margin-left: 10px;
+      padding-top: 5px;
+      padding-bottom: 5px;
+
+    }
+    h2 {
+      margin: 0;
+      font-size: 20px;
+    }
+    p {
+      font-size: 14px;
+
+    }
+    .nursery-thumbnail {
+      width: 100px;
+      float: left;
+      border-radius: 5px 0 0 5px;
+
+    }
+    .reserve-btn {
+      color: #fff;
+      float: right;
+      display: inline;
+      width: 100px;
+      text-align: center;
+      padding: 5px 5px;
+      border-radius: 5px;
+      background: #f5a623;
+      margin-top: -35px;
+      margin-right: 10px;
+      cursor: pointer;
+    }
+  }
+}
+.section-title {
+  border-bottom: 2px solid #f5a623;
+}
+.region {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  border-bottom: dashed 1px #f5a623;
+  &:hover {
+    color: #fff;
+    font-weight: bold;
+    background: #f5a623;
+    cursor: pointer;
+  }
+}
+
+table {
+  width: 100%;
+}
 
+td {
+  text-align: center;
+  &:hover {
+    background: #f5a623;
+    color: #fff;
+  }
+}
+.select-detail {
+  input {
+    width: 30%;
+    height: 25px;
+    font-size: 20px;
+    border: #f5a623 solid 2px;
+    border-radius: 5px;
+    clear: both;
+  }
+}
+.detail-name {
+  margin-left: 20px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  font-weight: bold;
+  clear: both;
+}
+
+.detail-form {
+  margin-left: 20px;
+}
+.childa {
+  font-size: 18px;
+  display: inline;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.detail-content-left {
+  margin-left: 20px;
+}
+.detail-content {
+  float: left;
+  width: 40%;
+  background: #fff;
+  border: solid #f5a623 2px;
+  padding: 10px;
+  text-align: center;
+  color: #f5a623;
+  font-weight: bold;
+  &:hover {
+    background: #f5a623;
+    color: #fff;
   }
 }
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 7d718f6..c64b9d2 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -85,7 +85,137 @@ const Index = React.createClass({
 	render() {
 		return (
 			<section>
-				
+				<section className="calendar">
+					<p className="section-title">まず日付を選びましょう</p>
+						<table border="0" cellSpacing="1" cellPadding="1" backgroundColor="#CCCCCC" style={["font: 12px, color: #666666"]}>
+							<tr>
+								<td align="center" colSpan="7" backgroundColor="#EEEEEE" height="18" style={["color: #666666"]}>2016年3月</td></tr>
+							<tr>
+								<td align="center" width="20" height="18" backgroundColor="#FF3300" style={["color: #FFFFFF"]}>日</td>
+								<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>月</td>
+								<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>火</td>
+								<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>水</td>
+								<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>木</td>
+								<td align="center" width="20" backgroundColor="#C7D8ED" style={["color: #666666"]}>金</td>
+								<td align="center" width="20" backgroundColor="#A6C0E1" style={["color: #666666;"]}>土</td>
+							</tr>
+							<tr>
+								<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>　</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>　</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>1</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>2</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>3</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>4</td>
+								<td align="center" backgroundColor="#FF3300" style={["color: #FFFFFF"]}>5</td>
+							</tr>
+							<tr>
+								<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>6</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>7</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>8</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>9</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>10</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>11</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>12</td>
+							</tr>
+							<tr>
+								<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>13</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>14</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>15</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>16</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>17</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>18</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>19</td>
+							</tr>
+							<tr>
+								<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>20</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>21</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>22</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>23</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>24</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>25</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>26</td>
+							</tr>
+							<tr>
+								<td align="center" height="18" backgroundColor="#FFCC99" style={["color: #666666"]}>27</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>28</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>29</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>30</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>31</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>　</td>
+								<td align="center" backgroundColor="#FFFFFF" style={["color: #666666"]}>　</td>
+							</tr>
+							<tr>
+								<td backgroundColor="#FFFFFF" height="18">&nbsp;</td>
+								<td backgroundColor="#FFFFFF">&nbsp;</td>
+								<td backgroundColor="#FFFFFF">&nbsp;</td>
+								<td backgroundColor="#FFFFFF">&nbsp;</td>
+								<td backgroundColor="#FFFFFF">&nbsp;</td>
+								<td backgroundColor="#FFFFFF">&nbsp;</td>
+								<td backgroundColor="#FFFFFF">&nbsp;</td>
+							</tr>
+						</table>
+				</section>
+				<section className="select-detail">
+					<p className="section-title">条件を選びましょう</p>
+					<p className="detail-name">利用料金</p>
+					<input type="text" className="detail-form" />
+					<p className="childa">~</p>
+					<input type="text" />
+					<p className="detail-name">利用条件</p>
+					<p className="detail-content-left detail-content">病児</p>
+					<p className="detail-content">病後</p>
+					<p className="detail-name">キャンセル待ち</p>
+					<p className="detail-content-left detail-content">あり</p>
+					<p className="detail-content">なし</p>
+					<p className="detail-name">救急体制</p>
+					<p className="detail-content-left detail-content">あり</p>
+					<p className="detail-content">なし</p>
+				</section>
+				<div className="big-cursor">
+					<img src="images/big-cursor.png" />
+				</div>
+				<section className="regions">
+					<p className="section-title">地域一覧</p>
+					<p className="region">鳥取市</p>
+					<p className="region">鳥取市</p>
+					<p className="region">鳥取市</p>
+
+				</section>
+				<section className="nurseries-list">
+					<div className="nursery">
+						<img src="images/nursery-thumbnail.png" className="nursery-thumbnail" />
+						<div className="nursery-description">
+							<h2>キッズルームこぐま</h2>
+							<p>末広温泉町566せいきょうこどもクリニック内</p>
+							<p>1000円/人</p>
+							<p>8:00~18:00</p>
+							<div className="reserve-btn">予約する</div>
+						</div>
+					</div>
+					<div className="nursery">
+						<img src="images/nursery-thumbnail.png" className="nursery-thumbnail" />
+						<div className="nursery-description">
+							<h2>キッズルームこぐま</h2>
+							<p>末広温泉町566せいきょうこどもクリニック内</p>
+							<p>1000円/人</p>
+							<p>8:00~18:00</p>
+							<div className="reserve-btn">予約する</div>
+						</div>
+					</div>
+					<div className="nursery">
+						<img src="images/nursery-thumbnail.png" className="nursery-thumbnail" />
+						<div className="nursery-description">
+							<h2>キッズルームこぐま</h2>
+							<p>末広温泉町566せいきょうこどもクリニック内</p>
+							<p>1000円/人</p>
+							<p>8:00~18:00</p>
+							<div className="reserve-btn">予約する</div>
+						</div>
+					</div>
+				</section>
+				<section className="recent-nurseries">
+
+				</section>
 			</section>
 		);
 	}
@@ -95,7 +225,7 @@ const Login = React.createClass({
 	render() {
 		return (
 			<section>
-				<form action="http://localhost/index" method="">
+				<form action="http://localhost/#/index" method="">
 					<h1 className="page-title">ログイン</h1>
 					<div className="form-box">
 						<div className="form-contents">