diff --git a/period/cycles.py b/period/cycles.py
index be14b24..3b0f55b 100644
--- a/period/cycles.py
+++ b/period/cycles.py
@@ -15,6 +15,18 @@ bp = Blueprint('cycles', __name__)
 @bp.route('/')
 def index():
     db = get_db()
+    current_cycle = db.execute('SELECT * from cycle ORDER BY id DESC LIMIT 1').fetchone()
+    print(current_cycle['start_time'])
+    start_time = pendulum.parse(current_cycle['start_time'])
+    if current_cycle['end_time'] is None:
+        cycle_length = (pendulum.now() - start_time).days
+
+    db.execute(
+        'UPDATE cycle SET cycle_length = ?'
+        ' WHERE id = ?',
+        (cycle_length, current_cycle['id'])
+    )
+
     cycles = db.execute(
         'SELECT id, start_time, end_time, cycle_length'
         ' FROM cycle ORDER BY start_time DESC'
diff --git a/period/templates/base.html b/period/templates/base.html
index c925004..9b592f1 100644
--- a/period/templates/base.html
+++ b/period/templates/base.html
@@ -15,7 +15,7 @@
       margin: 30px 0;
   }
 .table-wrapper {
-  min-width: 1000px;
+  /* min-width: 1000px; */
       background: #fff;
       padding: 20px 25px;
   border-radius: 3px;
diff --git a/period/templates/cycle/index.html b/period/templates/cycle/index.html
index 9602d32..554dde2 100644
--- a/period/templates/cycle/index.html
+++ b/period/templates/cycle/index.html
@@ -8,38 +8,32 @@
   <div class="table-wrapper">
     <div class="table-title">
         <div class="row">
-            <div class="col-sm-6">
-              {% block header %}
-              <h2>{% block title %}Cycles{% endblock %}</h2>
-              {% endblock %}
-            </div>
         </div>
     </div>
-    <table class="table table-striped table-hover">
       {% for cycle in cycles %}
-      <tr>
-        <article class="post">
-          <header>
-            <div>
-              <div class="about"><b>Started:</b> {{ cycle['start_time'] }}</div>
-              <b>Ended: </b>{{ cycle['end_time'] }}</div>
+            <div class="card text-center" style="width: 18rem;">
+              <div class="card-body">
+                <h5 class="card-title">
+                  {% if cycle['cycle_length'] %}
+                    {% if loop.first %}
+                      Day <b>{{ cycle['cycle_length'] }}</b>
+                    {% else %}
+                      <b>{{ cycle['cycle_length'] }}</b> days.
+                    {% endif %}
+                  {% else %}
+                  {% endif %}</h5>
+                <p class="card-text"><b>Started:</b> {{ cycle['start_time'][:10] }}
+                  <br>
+                  {% if not loop.first %}
+                  <b>Ended: </b>{{ cycle['end_time'][:10] }}
+                  {% endif %}
+                </p>
+                <a href="{{ url_for('cycles.update', id=cycle['id'])}}"class="btn btn-primary">Edit</a>
+              </div>
             </div>
-          </header>
-          <p class="body">
-            {% if cycle['cycle_length'] %}
-            Cycle Length: <b>{{ cycle['cycle_length'] }} days</b>.
-            {% else %}
-
-            {% endif %}
-          </p>
-          <a class="action" href="{{ url_for('cycles.update', id=cycle['id'])}}">Edit</a> - {{ cycle['id'] }}
-        </article>
         {% if not loop.last %}
-          <hr>
         {% endif %}
-      </tr>
       {% endfor %}
-    </table>
 
   </div>