diff --git a/src/images/heart.png b/src/images/heart.png
new file mode 100644
index 0000000..8f3ab7b
Binary files /dev/null and b/src/images/heart.png differ
diff --git a/src/images/location.png b/src/images/location.png
new file mode 100644
index 0000000..b0d4348
Binary files /dev/null and b/src/images/location.png differ
diff --git a/src/images/nice.png b/src/images/nice.png
new file mode 100644
index 0000000..ddbcd33
Binary files /dev/null and b/src/images/nice.png differ
diff --git a/src/images/thumbnail.png b/src/images/thumbnail.png
new file mode 100644
index 0000000..305fdf2
Binary files /dev/null and b/src/images/thumbnail.png differ
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 64c7c25..243dd15 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -6,12 +6,23 @@ html, body {
 header,footer {
   background: #f5a623;
 }
- footer {
+
+header {
+  position: fixed;
+  width: 100%;
+  height: 60px;
+  top: 0;
+  z-index: 100;
+}
+
+footer {
    width: 100%;
    height: 200px;
    text-align: center;
    margin-top: 100px;
+   clear: both;
  }
+
 .title {
   display: inline;
 }
@@ -75,6 +86,7 @@ ul, li, a {
   font-size: 18px;
   color: #f5a623;
   border: solid #f5a623 2px;
+  border-radius: 5px;
   background: #fff;
   margin-bottom: 50px;
   &:hover {
@@ -83,3 +95,67 @@ ul, li, a {
     cursor: pointer;
   }
 }
+
+.top-thumbnail {
+  img {
+    width: 100%;
+    margin-top: 60px;
+  }
+}
+
+.try-nursery {
+  position: relative;
+  margin: 0 auto;
+  margin-top: -10%;
+  width: 40%;
+  cursor: pointer;
+  padding: 10px 10px;
+  z-index: 2;
+  background: #f5a623;
+  border-radius: 10px;
+  text-align: center;
+}
+
+.service-detail {
+  display: block;
+  position: relative;
+  margin-top: 10%;
+  text-align: center;
+  height: auto;
+  ul {
+    display: block;
+    padding-left: 4%;
+    height: auto;
+  }
+  li {
+    width: 20%;
+    text-align: center;
+    margin-left: 5%;
+    margin-right: 5%;
+    float: left;
+  }
+  p {
+    color: #4a4a4a;
+  }
+  .detail-title {
+    font-size: 20px;
+  }
+  .detail-description {
+    font-size: 12px;
+    font-weight: lighter;;
+  }
+  img {
+    width: 100%;
+  }
+  .try-nursery-btn {
+    clear: both;
+    margin: 0 auto;
+    width: 40%;
+    cursor: pointer;
+    padding: 10px 10px;
+    background: #f5a623;
+    border-radius: 10px;
+    text-align: center;
+
+  }
+}
diff --git a/src/scripts/main.js b/src/scripts/main.js
index f55a8d6..7d718f6 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -8,7 +8,7 @@ const Header = React.createClass({
 		return (
 			<header>
 				<div className="title">
-					<Link to="/"><img src="images/title.png" className="title-img" /></Link>
+					<Link to="top"><img src="images/title.png" className="title-img" /></Link>
 				</div>
 					<ul className="title-menu">
 						<li><Link to="sign_up">新規登録</Link></li>
@@ -43,11 +43,59 @@ const App = React.createClass({
 	}
 });
 
+const Top = React.createClass({
+	render() {
+		return (
+			<section>
+				<section className="top-thumbnail">
+					<img src="images/thumbnail.png" />
+					<div className="try-nursery">
+						<Link to="sign_up">自宅付近の病児施設を探してみる</Link>
+					</div>
+				</section>
+				<section className="service-detail">
+					<ul>
+						<li>
+							<img src="images/heart.png" />
+							<p className="detail-title">お子さんが急病になっても安心</p>
+							<p className="detail-description">24時間いつでもご予約ができます。<br />
+							突然の発熱があっても安心して翌日から預けることができます</p>
+						</li>
+						<li>
+							<img src="images/location.png" />
+							<p className="detail-title">ご自身の一番都合の良い場所を探せます</p>
+							<p className="detail-description">自宅だけでなく、職場や出張などのご都合に合わせた対応も可能です。</p>
+						</li>
+						<li>
+							<img src="images/nice.png" />
+							<p className="detail-title">安心のサービスが盛りだくさん</p>
+							<p className="detail-description">いつでもキャンセル可能であったり、お子さんのカルテを作成することで予めお子さんの性格や病態を施設の方に伝えることができます</p>
+						</li>
+					</ul>
+					<p className="try-nursery-btn">
+						<Link to="sign_up">自宅付近の病児施設を探してみる</Link>
+					</p>
+				</section>
+			</section>
+		);
+	}
+});
+
+const Index = React.createClass({
+	render() {
+		return (
+			<section>
+				
+			</section>
+		);
+	}
+});
+
 const Login = React.createClass({
 	render() {
 		return (
 			<section>
-				<form action="" method="post">
+				<form action="http://localhost/index" method="">
 					<h1 className="page-title">ログイン</h1>
 					<div className="form-box">
 						<div className="form-contents">
@@ -65,11 +113,12 @@ const Login = React.createClass({
 		);
 	}
 });
+
 const Signup = React.createClass({
 	render() {
 		return (
 			<section>
-				<form action="" method="post">
+				<form action="" method="">
 					<h1 className="page-title">新規登録</h1>
 					<div className="form-box">
 						<div className="form-contents">
@@ -99,6 +148,8 @@ const Signup = React.createClass({
 render((
 	<Router>
 		<Route path="/" component={App}>
+			<Route path="top" component={Top} />
+			<Route path="index" component={Index} />
 			<Route path="sign_up" component={Signup} />
 			<Route path="login" component={Login} />
 		</Route>