diff --git a/content/exercise.md b/content/exercise.md
new file mode 100644
index 0000000..f44d4a7
--- /dev/null
+++ b/content/exercise.md
@@ -0,0 +1,4 @@
+---
+title: "Exercise"
+type: exercise
+---
diff --git a/data/workouts/workout-2021-03-03_08-47-Wed_morning.yaml b/data/workouts/workout-2021-03-03_08-47-Wed_morning.yaml
new file mode 100644
index 0000000..811bf38
--- /dev/null
+++ b/data/workouts/workout-2021-03-03_08-47-Wed_morning.yaml
@@ -0,0 +1,11 @@
+---
+type: "running"
+date: 2021-03-03T09:26:31+00:00
+comment: "Wed morning "
+distance: "4.909 km"
+duration: "00:38:33"
+pace: "7:420 min/km"
+calories: "432 kcal"
+image: "/images/workouts/workout-2021-03-03_08-47-Wed_morning.jpg"
+thumb: "/images/workouts/workout-2021-03-03_08-47-Wed_morning_thumb.jpg"
+---
diff --git a/layouts/exercise/single.html b/layouts/exercise/single.html
new file mode 100644
index 0000000..3fac2cb
--- /dev/null
+++ b/layouts/exercise/single.html
@@ -0,0 +1,20 @@
+{{ define "main" }}
+
+
+Goal: Get fit again, increase stamina and strength
+{{ range sort .Site.Data.workouts "date" "desc"}}
+
+Type
{{ .type | humanize }}
+Date
{{ dateFormat "2 Jan 2006" .date }}
+
+
+Distance
{{ .distance }}
+Duration
{{ .duration }}
+Pace
{{ .pace }}
+Calories burned
{{ .calories }}
+
+{{ end }}
+
+{{ end }}
diff --git a/static/images/workouts/workout-2021-03-03_08-47-Wed_morning.jpg b/static/images/workouts/workout-2021-03-03_08-47-Wed_morning.jpg
new file mode 100644
index 0000000..825aef0
Binary files /dev/null and b/static/images/workouts/workout-2021-03-03_08-47-Wed_morning.jpg differ
diff --git a/static/images/workouts/workout-2021-03-03_08-47-Wed_morning_thumb.jpg b/static/images/workouts/workout-2021-03-03_08-47-Wed_morning_thumb.jpg
new file mode 100644
index 0000000..3aed3f3
Binary files /dev/null and b/static/images/workouts/workout-2021-03-03_08-47-Wed_morning_thumb.jpg differ
diff --git a/themes/nipponalba/static/css/style.css b/themes/nipponalba/static/css/style.css
index 30e5086..e85d75f 100644
--- a/themes/nipponalba/static/css/style.css
+++ b/themes/nipponalba/static/css/style.css
@@ -737,6 +737,60 @@ ol li{
.index-note img{
max-width: 500px;
}
+.index_exercise{
+ width: 95%;
+}
+.exercise_grid{
+ max-width: 96%;
+ display:grid;
+ grid-template-columns: 15% 20% 25% 25% auto;
+ grid-template-rows: 105px 40px;
+ border: 1px solid var(--border-colour);
+ border-radius:15px;
+ margin: 0 auto;
+ padding: 10px;
+ margin-bottom: 20px;
+}
+.exercise_grid .type, .exercise_grid .distance{
+ grid-column: 1;
+}
+.exercise_grid .exdate, .exercise_grid .duration{
+ grid-column: 2;
+}
+.exercise_grid .pace{
+ grid-column: 3;
+}
+.exercise_grid .comment{
+ grid-column-start: 3;
+ grid-column-end: span 2;
+ width: 100%;
+}
+.exercise_grid .calories{
+ grid-column: 4;
+}
+.exercise_grid .image{
+ grid-column: 5;
+ text-align: right;
+ margin: -10px;
+ height: 100%;
+}
+.exercise_grid .image img{
+ border-radius: 0px 15px 15px 0px;
+ height: 165px;
+ object-fit:cover;
+ width: 100px;
+}
+.exercise_grid .type, .exercise_grid .exdate, .exercise_grid .comment{
+ grid-row: 1;
+}
+.exercise_grid .image{
+ grid-row: 1 / 2;
+}
+.exercise_grid .distance, .exercise_grid .duration, .exercise_grid .pace, .exercise_grid .calories{
+ grid-row: 2;
+ vertical-align: bottom;
+ height: 100%l
+}
@media screen and (max-width: 960px) {
#page-top {
width: 95%;
@@ -797,6 +851,48 @@ article img{
display:block;
margin: 0px auto;
}
+.exercise_grid{
+ max-width: 96%;
+ display:grid;
+ grid-template-columns: 35% 40% auto;
+ grid-template-rows: 40px 75px 40px 40px;
+}
+.exercise_grid .date, .exercise_grid .distance, .exercise_grid .comment, .exercise_grid .pace{
+ grid-column: 1;
+}
+.exercise_grid .exdate, .exercise_grid .duration, .exercise_grid .calories{
+ grid-column: 2;
+}
+.exercise_grid .image{
+ grid-column: 3;
+}
+.exercise_grid .comment{
+ grid-column-start: 1;
+ grid-column-end: span 2;
+ width: 100%;
+}
+
+.exercise_grid .image img{
+ border-radius: 0px 15px 15px 0px;
+ height: 215px;
+ object-fit:cover;
+ width: 100px;
+}
+.exercise_grid .type, .exercise_grid .exdate{
+ grid-row: 1;
+}
+.exercise_grid .comment{
+ grid-row: 2;
+}
+.exercise_grid .image{
+ grid-row: 1 / 4;
+}
+.exercise_grid .distance, .exercise_grid .duration{
+ grid-row: 3;
+}
+.exercise_grid .pace, .exercise_grid .calories{
+ grid-row: 4;
+}
}
@media screen and (max-width: 460px) {