diff --git a/src/assets/icons/piggybank.svg b/src/assets/icons/piggybank.svg
new file mode 100644
index 0000000000000000000000000000000000000000..564d95069fffe94a81490c9a98f008152e04f681
--- /dev/null
+++ b/src/assets/icons/piggybank.svg
@@ -0,0 +1 @@
+<svg id="Graphic_Elements" data-name="Graphic Elements" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><defs><style>.cls-1{fill:#faa;}.cls-2{fill:#7f3f3f;}.cls-3{fill:#ff8080;}.cls-4{fill:#f66;}</style></defs><g id="g4153"><path id="path4144" class="cls-1" d="M262.4,166.6a139.75,139.75,0,0,0-43,6.51c21.5,31.23,31.18,70.79,24.87,108.24-46.87,35.34-87.1,80.08-114.33,132.29-15.23-1.68-31.67-2-45.68,5.2C65.24,427.71,51.94,447.19,50,468Q50,562,50,656c.48,31.72,29.75,59.39,61.43,58.11,7.73.77,15.62-.89,23.11-1.25,13.66,23.92,29.51,46.79,48.06,67.13C231,834.5,294.13,874.8,361.77,901.24c-1.7,19.19-.87,39.41-.51,59,3.07,37,34.55,68.89,71.42,72.61,39.47,5.15,79.17-23.53,87.54-62.22,2.89-10.93,2.14-22.31,2.29-33.48,36.7,2.63,73.54,1.35,110.14-2.23.3,10.22-.71,20.52,1,30.65,5.33,34.25,34.78,62.81,69.19,67.07,30.38,4.29,62-10.84,78.36-36.69a83.25,83.25,0,0,0,13.07-46.14c-.27-19.18,1.22-38.69-2.92-57.54,73.33-32.61,140.47-82.62,186.39-149.16,45.16-64.12,67.14-144.81,57-222.9,23.83,1.63,48.88-2.3,69.25-15.31,16-9.89,28.09-25.26,35.41-42.42,8.37-20.38,13-43,9.35-64.9-2.59-16.5-10.57-32.36-23.17-43.45-21.8-19.7-56.23-26.39-82.71-12.36-17.69,9-26.57,31-21.53,49.93,2.17,2.63,4.61,6.21,7.68,7.4,4.92-7.4,8.46-16.07,15.7-21.63,7.35-6.26,17.09-11.74,27.1-9.49,7.86,2.1,13.37,8.9,16.23,16.22,6.08,16,5.07,35.28-4.17,49.94-7,11.73-21.41,17.67-34.69,15.74-13.62-1.27-26.24-7.32-37.71-14.41A359.14,359.14,0,0,0,937.55,326.3c-51.08-53.2-116.54-91.82-186.09-116-120.71-41.59-255.37-40.93-375.81,1.37-1.79.23-3.67,2.13-5.51,1.41-27.41-29.67-67.57-46.36-107.74-46.5Z"/><path id="path6" class="cls-2" d="M556.53,240.31c64.08-1.31,128.63,10,188.05,34.26,1.38,13.17.11,27,.45,40.34-1.6,0-3-1.2-4.47-1.74C643.32,268.58,529.21,264.24,428,297.86c-1.05-11.42-.15-23.1-.45-34.61.48-1.37-.52-3.84,1.9-3.73,41.21-12.23,84.18-18.36,127.1-19.21Z"/><path id="path8" class="cls-3" d="M937.55,326.3a359.53,359.53,0,0,1,73.94,109.12c11.46,7.08,24.08,13.14,37.71,14.41,13.29,1.93,27.74-4,34.7-15.74,9.2-14.66,10.24-33.91,4.17-49.94-2.87-7.32-8.38-14.13-16.23-16.22-10-2.25-19.77,3.23-27.11,9.49-7.22,5.56-10.79,14.23-15.71,21.63-3.09-1.19-5.51-4.77-7.67-7.4-5.06-18.94,3.84-40.88,21.52-49.93,26.47-14,60.91-7.34,82.73,12.36,12.58,11.09,20.55,26.95,23.15,43.45,3.62,21.94-1,44.52-9.38,64.9C1132.08,479.6,1120,495,1104,504.84c-20.4,13-45.42,16.95-69.24,15.33,10.08,78.09-11.88,158.77-57,222.88-45.91,66.56-113,116.56-186.38,149.18,4.17,18.84,2.68,38.34,2.91,57.52a82.9,82.9,0,0,1-13.07,46.13c-16.31,25.87-48,41-78.37,36.74-34.36-4.28-63.85-32.87-69.17-67.12-1.68-10.13-.67-20.41-1-30.64-36.6,3.57-73.45,4.87-110.13,2.23-.11,11.17.6,22.56-2.27,33.51-8.37,38.64-48.1,67.35-87.53,62.21-36.9-3.76-68.37-35.67-71.44-72.64-.36-19.51-1.21-39.76.51-58.93C294.13,874.8,231,834.48,182.6,779.94c80,36,169.69,47.88,256.62,38.91,84.74-8.42,167.42-34.93,241.85-76.1,47.5-26.51,92-58.9,130.3-97.55,42.89-42.88,78.75-93.52,101.27-150,21.56-53.25,30.45-111.63,24.91-168.86Z"/><path id="path10" class="cls-4" d="M243.11,388.83c6.81-1.09,10.71,6.37,13,11.6,7,18.92,7.47,39.87,4.16,59.61-2,9-4.24,19-11.79,25.07-5.12,3.34-10.85-1.29-13.13-5.84-7.32-12.87-8.05-28.15-8.86-42.56.53-12.76,1.71-25.88,7-37.67C235.59,394.88,238.22,390,243.11,388.83Z"/></g></svg>
\ No newline at end of file
diff --git a/src/components/UserProfile/UserProfileLayout.vue b/src/components/UserProfile/UserProfileLayout.vue
index 3c9134b260619cd24f6836e63665305bee474459..6734d7124f317c8e64a1a11fde23172c4058189d 100644
--- a/src/components/UserProfile/UserProfileLayout.vue
+++ b/src/components/UserProfile/UserProfileLayout.vue
@@ -2,11 +2,19 @@
 
 import Menu from "@/components/BaseComponents/Menu.vue";
 import Footer from "@/components/BaseComponents/Footer.vue";
+import {useRouter} from "vue-router";
 
 let numberOfHistory = 6;
 
+let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]
+
 let points = 0;
 let streak = 0;
+
+let route = useRouter()
+function toRoadmap(){
+  route.push('/roadmap')
+}
 </script>
 
 <template>
@@ -88,7 +96,23 @@ let streak = 0;
           <h1 class="mt-5 text-start history-text">History</h1>
           <div class="row scrolling-wrapper-history">
             <div v-for="index in numberOfHistory" :key="index" class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
-              <div class="card history-block" style="background-color: black"></div>
+              <div class="card history-block" >
+                <div class="card mb-3" style="max-width: 540px;">
+                  <div class="row g-0">
+                    <div class="col-md-4">
+                      <img src="/src/assets/icons/piggybank.svg" class="img-fluid rounded-start h-40 mx-auto d-none d-md-block" alt="...">
+                    </div>
+                    <div class="col-md-8">
+                      <div class="card-body">
+                        <h5 class="card-title">{{cardTitles[index-1]}}</h5>
+                        <p class="card-text">Money saved: 200 <br/>You are one challenge: 21</p>
+                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                        <a href="#" class="btn  stretched-link" @click="toRoadmap"></a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>