diff --git a/design_membership/calendar.html b/design_membership/calendar.html
new file mode 100644
index 00000000..acd783f5
--- /dev/null
+++ b/design_membership/calendar.html
@@ -0,0 +1,110 @@
+<html lang="en">
+<head>
+
+ <meta charset="UTF-8">
+ <title>Calendar</title>
+
+ <link rel="stylesheet" href="stylesheet.css">
+
+</head>
+<body>
+
+ <div class="container">
+
+ <div class="calendar">
+
+ <header>
+
+ <h2>September</h2>
+
+ <a class="btn-prev fontawesome-angle-left" href="#"></a>
+ <a class="btn-next fontawesome-angle-right" href="#"></a>
+
+ </header>
+
+ <table>
+
+ <thead>
+
+ <tr>
+
+ <td>Mo</td>
+ <td>Tu</td>
+ <td>We</td>
+ <td>Th</td>
+ <td>Fr</td>
+ <td>Sa</td>
+ <td>Su</td>
+
+ </tr>
+
+ </thead>
+
+ <tbody>
+
+ <tr>
+ <td class="prev-month">26</td>
+ <td class="prev-month">27</td>
+ <td class="prev-month">28</td>
+ <td class="prev-month">29</td>
+ <td class="prev-month">30</td>
+ <td class="prev-month">31</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>3</td>
+ <td>4</td>
+ <td>5</td>
+ <td>6</td>
+ <td>7</td>
+ <td>8</td>
+ </tr>
+ <tr>
+ <td>9</td>
+ <td class="event">10</td>
+ <td>11</td>
+ <td>12</td>
+ <td>13</td>
+ <td>14</td>
+ <td>15</td>
+ </tr>
+ <tr>
+ <td>16</td>
+ <td>17</td>
+ <td>18</td>
+ <td>19</td>
+ <td>20</td>
+ <td class="event">21</td>
+ <td>22</td>
+ </tr>
+
+ <tr>
+ <td class="current-day event">23</td>
+ <td>24</td>
+ <td>25</td>
+ <td>26</td>
+ <td>27</td>
+ <td>28</td>
+ <td>29</td>
+ </tr>
+ <tr>
+ <td>30</td>
+ <td class="next-month">1</td>
+ <td class="next-month">2</td>
+ <td class="next-month">3</td>
+ <td class="next-month">4</td>
+ <td class="next-month">5</td>
+ <td class="next-month">6</td>
+ </tr>
+
+ </tbody>
+
+ </table>
+
+ </div> <!-- end calendar -->
+
+ </div> <!-- end container -->
+
+</body>
+</html>
\ No newline at end of file
diff --git a/design_membership/stylesheet.css b/design_membership/stylesheet.css
new file mode 100644
index 00000000..4c257151
--- /dev/null
+++ b/design_membership/stylesheet.css
@@ -0,0 +1,166 @@
+@charset "utf-8";
+/* CSS Document */
+
+/* ---------- FONTAWESOME ---------- */
+/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
+/* ---------- http://weloveiconfonts.com/ ---------- */
+
+@import url(http://weloveiconfonts.com/api/?family=fontawesome);
+
+*[class*="fontawesome-"]:before {
+ font-family: 'FontAwesome', sans-serif;
+}
+
+/* ---------- GENERAL ---------- */
+
+body {
+ background: #f9f9f9;
+ color: #0e171c;
+ font: 100 100%/.7em 'Lato', sans-serif;
+ margin: 0;
+}
+
+a {
+ text-decoration: none;
+}
+
+/*Month size*/
+h2 {
+ font-size: .8em;
+ line-height: 1em;
+ /*margin: .1em 0;*/
+}
+
+td{
+ font-size:.7em;
+}
+
+h3 {
+ font-size: .7em;
+ line-height: .1em;
+ margin: .13em 0;
+}
+
+table {
+ /*border-collapse: collapse;*/
+ border-spacing: 0;
+}
+
+.container {
+ height: 270px;
+ left: 50%;
+ margin: -100px 0 0 -100px; /* Calendar location */
+ position: absolute;
+ top: 50%;
+ width: 13%;
+}
+
+/* ---------- CALENDAR ---------- */
+
+.calendar {
+ text-align: center;
+}
+
+.calendar header {
+ position: relative;
+}
+
+.calendar h2 {
+ text-transform: uppercase;
+ color: #1A6687;
+}
+/*Title*/
+.calendar thead {
+ font-size: .9em;
+ font-weight: 600;
+ text-transform: uppercase;
+ color: #8BC4C9;
+}
+
+/*Body text*/
+.calendar tbody {
+ color: #7c8a95;
+}
+
+/*select date*/
+.calendar tbody td:hover {
+ border: .2em solid #8BC4C9;
+}
+
+.calendar td {
+ border: .7em solid none;
+ border-radius: 50%;
+ display: inline-block;
+ height: 2em;
+ line-height: 2em;
+ text-align: center;
+ width: 2em;
+}
+
+.calendar .prev-month,
+.calendar .next-month {
+ color: #cbd1d2;
+}
+
+.calendar .prev-month:hover,
+.calendar .next-month:hover {
+ border: 2px solid #cbd1d2;
+}
+
+/*Today*/
+.current-day {
+ background: #8BC4C9;
+ color: #f9f9f9;
+}
+
+.event {
+ cursor: pointer;
+ position: relative;
+}
+
+/*Little dot*/
+.event:after {
+ background: #8BC4C9;
+ border-radius: 50%;
+ bottom: .3em;
+ display: block;
+ content: '';
+ height: .3em;
+ left: 50%;
+ margin: -.5em 0 0 -.1em;
+ position: absolute;
+ width: .3em;
+}
+
+.event.current-day:after {
+ background: #f9f9f9;
+}
+
+/*Next,Prev month*/
+.btn-prev,
+.btn-next {
+ border: 2px solid none;
+ border-radius: 50%;
+ color: #8BC4C9;
+ height: 2em;
+ font-size: .75em;
+ line-height: 2em;
+ margin: -1em;
+ position: absolute;
+ top: 50%;
+ width: 2em;
+}
+
+.btn-prev:hover,
+.btn-next:hover {
+ background: none;
+ color: #1A6687;
+}
+
+.btn-prev {
+ left: 1.7em;
+}
+
+.btn-next {
+ right: 1.7em;
+}
\ No newline at end of file