diff --git a/Frontend/nginx.conf b/Frontend/nginx.conf
index f2d3d8d..144dee5 100644
--- a/Frontend/nginx.conf
+++ b/Frontend/nginx.conf
@@ -18,6 +18,11 @@ server {
         proxy_set_header Host $host;
     }
 
+    location /api/mock {
+        proxy_pass http://xmltools-mocked-services:8097/api/mock;
+        proxy_set_header Host $host;
+    }
+
     location /libxml/ {
         proxy_pass http://xmltools-libxml-backend/;
         proxy_set_header Host $host;
diff --git a/Frontend/src/components/mock/BodyDetailComponent.vue b/Frontend/src/components/mock/BodyDetailComponent.vue
new file mode 100644
index 0000000..90fc97c
--- /dev/null
+++ b/Frontend/src/components/mock/BodyDetailComponent.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+const props = defineProps(
+    {
+        data: {required: true, type: String}
+    }
+)
+
+</script>
+
+<template>
+    <span class="text-white text-center h-screen">
+        {{ props.data.replace(/\\n/g,"") }}
+    </span>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HeadersDetailComponent.vue b/Frontend/src/components/mock/HeadersDetailComponent.vue
new file mode 100644
index 0000000..7c277d8
--- /dev/null
+++ b/Frontend/src/components/mock/HeadersDetailComponent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+const props = defineProps(
+    {
+        data: {type:String, required:true}
+    }
+)
+
+
+</script>
+
+<template>
+    <table class="w-full text-center text-white mt-2">
+        <tr> <th>Name</th> <th>Value</th> </tr>
+        <tr v-for="(value,name) in JSON.parse(data)" :key="name">
+            <td>{{ name }}</td>
+            <td>{{ value }}</td>
+        </tr>
+    </table>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index f15d3dc..4872807 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -1,8 +1,40 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import HistoryRecords from './HistoryRecords.vue';
+import BodyDetailComponent from './BodyDetailComponent.vue';
+import HeadersDetailComponent from './HeadersDetailComponent.vue';
+
+const shownDetail = ref('none');
+const currentShownData = ref('');
+const currentIndex = ref(-1);
+
+function showBody(body : string, index: number){
+    if( currentIndex.value == index && shownDetail.value == "body" ){
+        shownDetail.value = "none";
+    } else {
+        currentIndex.value = index;
+        shownDetail.value = "body";
+        currentShownData.value = body;
+    }
+}
+
+function showHeaders(headers: object, index: number){
+    if(currentIndex.value == index && shownDetail.value == "headers" ){
+        shownDetail.value = "none";
+    } else {
+        currentIndex.value = index;
+        shownDetail.value = "headers";
+        currentShownData.value = JSON.stringify(headers);
+    }
+}
+
 </script>
 
 
 <template>
-    <HistoryRecords></HistoryRecords>
+    <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
+    <HistoryRecords @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+    <BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
+    <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
+    </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryRecords.vue b/Frontend/src/components/mock/HistoryRecords.vue
index f9bb1e8..31703c2 100644
--- a/Frontend/src/components/mock/HistoryRecords.vue
+++ b/Frontend/src/components/mock/HistoryRecords.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { h, ref, type Ref } from 'vue';
+import {ref, type Ref } from 'vue';
 
 interface historyRecord {
     clientUUID : String,
@@ -24,32 +24,37 @@ function parseTimeStamp(timestamp : String){
     return timestamp.substring(10,19).replace("T"," ");
 }
 
-function showHeaders(headers: object){
-    emit('click:showHeaders',headers)
+function showHeaders(headers: Object, index : number){
+    emit('click:showHeaders',headers, index)
 }
 
-function showBody(body: String){
+function showBody(body: String , index : number){
     console.log(body)
-    emit('click:showBody',body)
+    emit('click:showBody',body, index)
+}
+
+function refreshHistory(){
+    fetch(fetchLink+"/"+clientUUID).then(response => response.json()).then(data => { historyRecords.value = data });
 }
 
 </script>
 
 <template>
-    <div class="w-full xl:w-5/12">
+    <div>
         <table class="text-white h-28 w-full text-center">
             <tr>
                 <th>Time</th>
                 <th>HTTP Method</th>
                 <th>HTTP Headers</th>
                 <th>Request Body</th>
+                <th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
             </tr>
             <tr v-for="(item , index) in historyRecords" :key="index">
                 <td> {{ parseTimeStamp(item.dateTimeStamp) }} </td>
                 <td> {{ item.httpMethod }} </td>
-                <td> <button @click="showHeaders(item.headers)">Show Headers</button> </td>
+                <td> <button @click="showHeaders(item.headers, index)">Show Headers</button> </td>
                 <td> 
-                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody)">Show Headers</button> 
+                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)">Show Body</button> 
                     <span v-else>Empty Body</span>
                 </td>
             </tr>