diff --git a/services/web/src/actions/userActions.ts b/services/web/src/actions/userActions.ts
index 7403dc77..94c413fb 100644
--- a/services/web/src/actions/userActions.ts
+++ b/services/web/src/actions/userActions.ts
@@ -156,6 +156,13 @@ export const getVehicleServicesAction = ({ accessToken, VIN, callback, ...data }
   };
 };
 
+export const getServiceReportAction = ({ accessToken, reportId, callback, ...data }: ActionPayload & AccessTokenPayload) => {
+  return {
+    type: actionTypes.GET_SERVICE_REPORT,
+    payload: { accessToken, reportId, callback, ...data },
+  };
+};
+
 export const changeEmailAction = ({ accessToken, callback, ...data }: ActionPayload & AccessTokenPayload) => {
   return {
     type: actionTypes.CHANGE_EMAIL,
diff --git a/services/web/src/components/layout/layout.tsx b/services/web/src/components/layout/layout.tsx
index 2df885a2..afc7c62f 100644
--- a/services/web/src/components/layout/layout.tsx
+++ b/services/web/src/components/layout/layout.tsx
@@ -40,11 +40,11 @@ import UnlockContainer from "../../containers/unlock/unlock";
 import NewPostContainer from "../../containers/newPost/newPost";
 import PostContainer from "../../containers/post/post";
 import VehicleServiceDashboardContainer from "../../containers/vehicleServiceDashboard/vehicleServiceDashboard";
+import ServiceReportContiner from "../../containers/serviceReport/serviceReport";
 import {
   logOutUserAction,
   validateAccessTokenAction,
 } from "../../actions/userActions";
-import { validateAccessToken } from "../../sagas/userSaga";
 import { isAccessTokenValid } from "../../utils";
 
 const { Content } = Layout;
@@ -158,12 +158,19 @@ const StyledComp: React.FC<PropsFromRedux> = (props) => {
     setWindowHeight(window.innerHeight);
   }
 
+  const isLoggedIn = props.isLoggedIn;
+  const accessToken = props.accessToken;
+  const validateAccessToken = props.validateAccessToken;
+
   useEffect(() => {
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
+      if (isLoggedIn) {
+        validateAccessToken({ accessToken: accessToken });
+      }
     };
-  }, []);
+  }, [isLoggedIn, validateAccessToken, accessToken]);
 
   return (
     <Spin spinning={props.fetchingData} className="spinner">
@@ -295,6 +302,19 @@ const StyledComp: React.FC<PropsFromRedux> = (props) => {
                 />
               }
             />
+            <Route
+              path="/service-report"
+              element={
+                <AfterLogin
+                  component={ServiceReportContiner}
+                  isLoggedIn={props.isLoggedIn}
+                  componentRole={roleTypes.ROLE_USER}
+                  userRole={props.role}
+                  accessToken={props.accessToken}
+                  logOutUser={props.logOutUser}
+                />
+              }
+            />
             <Route
               path="/shop"
               element={
diff --git a/services/web/src/components/mechanicDashboard/mechanicDashboard.tsx b/services/web/src/components/mechanicDashboard/mechanicDashboard.tsx
index d5cb5fe3..af8be24a 100644
--- a/services/web/src/components/mechanicDashboard/mechanicDashboard.tsx
+++ b/services/web/src/components/mechanicDashboard/mechanicDashboard.tsx
@@ -14,7 +14,7 @@
  */
 
 import React from "react";
-import { Card, Row, Col } from "antd";
+import { Card, Row, Col, Layout } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 
 const { Meta } = Card;
@@ -41,7 +41,7 @@ interface MechanicDashboardProps {
 
 const MechanicDashboard: React.FC<MechanicDashboardProps> = ({ services }) => {
   return (
-    <>
+    <Layout className="page-container">
       <PageHeader title="Pending Services" />
       <Row gutter={[16, 24]}>
         {services.map((service) => (
@@ -63,7 +63,7 @@ const MechanicDashboard: React.FC<MechanicDashboardProps> = ({ services }) => {
           </Col>
         ))}
       </Row>
-    </>
+    </Layout>
   );
 };
 
diff --git a/services/web/src/components/order/order.tsx b/services/web/src/components/order/order.tsx
index b2e27ae2..161faa8f 100644
--- a/services/web/src/components/order/order.tsx
+++ b/services/web/src/components/order/order.tsx
@@ -65,7 +65,7 @@ const Order: React.FC<PropsFromRedux> = ({ order }) => {
   );
 
   return (
-    <Layout>
+    <Layout className="page-container">
       <PageHeader
         title="Order Details"
         className="page-header"
diff --git a/services/web/src/components/pastOrders/pastOrders.tsx b/services/web/src/components/pastOrders/pastOrders.tsx
index 68056941..1db161f1 100644
--- a/services/web/src/components/pastOrders/pastOrders.tsx
+++ b/services/web/src/components/pastOrders/pastOrders.tsx
@@ -78,7 +78,7 @@ const PastOrders: React.FC<PastOrdersProps> = (props) => {
           <Button
             type="primary"
             shape="round"
-            size="large"
+            size="middle"
             key="order-details"
             onClick={() => navigate(`/orders?order_id=${order.id}`)}
           >
@@ -90,7 +90,7 @@ const PastOrders: React.FC<PastOrdersProps> = (props) => {
             type="primary"
             shape="round"
             icon={order.status === "delivered" && <RollbackOutlined />}
-            size="large"
+            size="middle"
             key="return-order"
             disabled={order.status !== "delivered"}
             onClick={() => props.returnOrder(order.id)}
@@ -103,7 +103,7 @@ const PastOrders: React.FC<PastOrdersProps> = (props) => {
   );
 
   return (
-    <Layout>
+    <Layout className="page-container">
       <PageHeader
         title="Past Orders"
         className="page-header"
diff --git a/services/web/src/components/serviceReport/serviceReport.tsx b/services/web/src/components/serviceReport/serviceReport.tsx
new file mode 100644
index 00000000..04e5b317
--- /dev/null
+++ b/services/web/src/components/serviceReport/serviceReport.tsx
@@ -0,0 +1,115 @@
+/*
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import { Card, Row, Col, Descriptions, Spin, Layout } from "antd";
+import { PageHeader } from "@ant-design/pro-components";
+import { Content } from "antd/es/layout/layout";
+
+interface Owner {
+  email: string;
+  number: string;
+}
+
+interface Vehicle {
+  owner: Owner;
+  id: string;
+  vin: string;
+}
+
+interface Mechanic {
+  mechanic_code: string;
+  user: Owner
+}
+
+interface Service {
+  id: string;
+  problem_details: string;
+  created_on: string;
+  vehicle: Vehicle;
+  status: string;
+  mechanic: Mechanic;
+}
+
+interface ServiceReportProps {
+  service: Service;
+}
+
+const ServiceReport: React.FC<ServiceReportProps> = ({ service }) => {
+  if (!service) {
+    console.log("Service is undefined");
+    return (
+      <Content>
+        <Spin style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}/>
+      </Content>
+    );
+  }
+  
+  return (
+    <Layout className="page-container">
+      <PageHeader
+        title={`Service Report: ${service.vehicle.vin} ${service.status}`}
+        subTitle={service.created_on}
+        className="service-report-header"
+        style={{ width: '80%', margin: 'auto' }}
+      />
+      <Card className="service-report-card" style={{ margin: 'auto', width: '80%' }}>
+        <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+          <Col>
+            <Card title="Report Details" className="info-card">
+              <Descriptions column={1}>
+                <Descriptions.Item label="Report ID">{service.id}</Descriptions.Item>
+                <Descriptions.Item label="Report Status">{service.status}</Descriptions.Item>
+                <Descriptions.Item label="Created On">{service.created_on}</Descriptions.Item>
+                <Descriptions.Item label="Problem Details" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{service.problem_details}</Descriptions.Item>
+              </Descriptions>
+            </Card>
+          </Col>
+        </Row>
+        <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+          <Col>
+            <Card title="Assigned Mechanic" className="info-card">
+              <Descriptions column={1}>
+                <Descriptions.Item label="Mechanic Code">{service.mechanic.mechanic_code}</Descriptions.Item>
+                <Descriptions.Item label="Mechanic Email">{service.mechanic.user.email}</Descriptions.Item>
+              </Descriptions>
+            </Card>
+          </Col>
+        </Row>
+        <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+          <Col>
+            <Card title="Vehicle Information" className="info-card">
+              <Descriptions column={1}>
+                <Descriptions.Item label="VIN">{service.vehicle.vin}</Descriptions.Item>
+              </Descriptions>
+            </Card>
+          </Col>
+        </Row>
+        <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+          <Col>
+            <Card title="Owner Information" className="info-card">
+              <Descriptions column={1}>
+                <Descriptions.Item label="Email">{service.vehicle.owner.email}</Descriptions.Item>
+                <Descriptions.Item label="Phone">{service.vehicle.owner.number}</Descriptions.Item>
+              </Descriptions>
+            </Card>
+          </Col>
+        </Row>
+      </Card>
+    </Layout>
+  );
+};
+
+export default ServiceReport;
diff --git a/services/web/src/components/shop/shop.tsx b/services/web/src/components/shop/shop.tsx
index e7e7a639..cabdc686 100644
--- a/services/web/src/components/shop/shop.tsx
+++ b/services/web/src/components/shop/shop.tsx
@@ -107,7 +107,7 @@ const Shop: React.FC<ShopProps> = (props) => {
   } = props;
 
   return (
-    <Layout>
+    <Layout className="page-container">
       <PageHeader
         className="page-header"
         title="Shop"
diff --git a/services/web/src/components/vehicleServiceDashboard/vehicleServiceDashboard.tsx b/services/web/src/components/vehicleServiceDashboard/vehicleServiceDashboard.tsx
index 91535f19..55f02301 100644
--- a/services/web/src/components/vehicleServiceDashboard/vehicleServiceDashboard.tsx
+++ b/services/web/src/components/vehicleServiceDashboard/vehicleServiceDashboard.tsx
@@ -14,7 +14,7 @@
  */
 
 import React from "react";
-import { Card, Row, Col } from "antd";
+import { Card, Row, Col, Layout } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 
 const { Meta } = Card;
@@ -46,7 +46,7 @@ const VehicleServiceDashboard: React.FC<VehicleServiceDashboardProps> = ({ servi
   const urlParams = new URLSearchParams(window.location.search);
   const VIN = urlParams.get("VIN");
   return (
-    <>
+    <Layout className="page-container">
       <PageHeader title={`Service History for VIN: ${VIN}`} />
       <Row gutter={[16, 24]}>
         {services.map((service: Service) => (
@@ -69,12 +69,12 @@ const VehicleServiceDashboard: React.FC<VehicleServiceDashboardProps> = ({ servi
               </p>
 
               {/* If status is completed, show report link */}
-              <a href={`/service-report?reportId=${service.id}`}>View Report</a>
+              <a href={`/service-report?id=${service.id}`}>View Report</a>
             </Card>
           </Col>
         ))}
       </Row>
-    </>
+    </Layout>
   );
 };
 
diff --git a/services/web/src/constants/APIConstant.ts b/services/web/src/constants/APIConstant.ts
index 507c1e0d..e30ee196 100644
--- a/services/web/src/constants/APIConstant.ts
+++ b/services/web/src/constants/APIConstant.ts
@@ -56,6 +56,7 @@ export const requestURLS: RequestURLSType = {
   GET_PRODUCTS: "api/shop/products",
   GET_MECHANIC_SERVICES: "api/mechanic/service_requests",
   GET_VEHICLE_SERVICES: "api/merchant/service_requests/<vehicleVIN>",
+  GET_SERVICE_REPORT: "api/mechanic/mechanic_report",
   BUY_PRODUCT: "api/shop/orders",
   GET_ORDERS: "api/shop/orders/all",
   GET_ORDER_BY_ID: "api/shop/orders/<orderId>",
diff --git a/services/web/src/constants/actionTypes.ts b/services/web/src/constants/actionTypes.ts
index a78353d1..10ea0434 100644
--- a/services/web/src/constants/actionTypes.ts
+++ b/services/web/src/constants/actionTypes.ts
@@ -34,6 +34,7 @@ const actionTypes = {
   INVALID_SESSION: "INVALID_SESSION",
   GET_MECHANIC_SERVICES: "GET_MECHANIC_SERVICES",
   GET_VEHICLE_SERVICES: "GET_VEHICLE_SERVICES",
+  GET_SERVICE_REPORT: "GET_SERVICE_REPORT",
   RESEND_MAIL: "RESEND_MAIL",
   VERIFY_VEHICLE: "VERIFY_VEHICLE",
   GET_VEHICLES: "GET_VEHICLES",
diff --git a/services/web/src/containers/mechanicDashboard/mechanicDashboard.tsx b/services/web/src/containers/mechanicDashboard/mechanicDashboard.tsx
index bcfbf87a..b31bf5c2 100644
--- a/services/web/src/containers/mechanicDashboard/mechanicDashboard.tsx
+++ b/services/web/src/containers/mechanicDashboard/mechanicDashboard.tsx
@@ -68,7 +68,6 @@ const MechanicDashboardContainer: React.FC<PropsFromRedux> = ({ accessToken, get
     };
     getServices({ accessToken, callback });
   }, [accessToken, getServices]);
-  const typedServices: Service[] = services;
 
   return <MechanicDashboard services={services} />;
 };
diff --git a/services/web/src/containers/serviceReport/serviceReport.tsx b/services/web/src/containers/serviceReport/serviceReport.tsx
new file mode 100644
index 00000000..03656ff0
--- /dev/null
+++ b/services/web/src/containers/serviceReport/serviceReport.tsx
@@ -0,0 +1,92 @@
+/*
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect } from "react";
+
+import { connect, ConnectedProps } from "react-redux";
+import { Modal } from "antd";
+import { getServiceReportAction } from "../../actions/userActions";
+import ServiceReport from "../../components/serviceReport/serviceReport";
+import responseTypes from "../../constants/responseTypes";
+import { FAILURE_MESSAGE } from "../../constants/messages";
+
+interface RootState {
+  userReducer: {
+    accessToken: string;
+  };
+}
+
+interface Service {
+  id: string;
+  problem_details: string;
+  created_on: string;
+  vehicle: {
+    owner: {
+      email: string;
+      number: string;
+    };
+    id: string;
+    vin: string;
+  };
+  status: string;
+  mechanic: {
+    mechanic_code: string;
+    user: {
+      email: string;
+      number: string;
+    };
+  };
+}
+
+const mapStateToProps = (state: RootState) => ({
+  accessToken: state.userReducer.accessToken,
+});
+
+const mapDispatchToProps = {
+  getServiceReport: getServiceReportAction,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+const ServiceReportContainer: React.FC<PropsFromRedux> = ({ accessToken, getServiceReport }) => {
+  const [service, setService] = useState<Service>();
+  const urlParams = new URLSearchParams(window.location.search);
+  const reportId = urlParams.get("id");
+  console.log("reportId", reportId);
+
+  useEffect(() => {
+    const callback = (res: string, data: Service | string) => {
+      console.log("Callback", res, data);
+      if (res === responseTypes.SUCCESS) {
+        setService(data as Service);
+      } else {
+        Modal.error({
+          title: FAILURE_MESSAGE,
+          content: data as string,
+        });
+      }
+    };
+    getServiceReport({ accessToken, reportId, callback});
+  }, [accessToken, getServiceReport, reportId]);
+
+  // Ensure that the Service type in the component matches the one from the API
+  // Ensure that the Service type in the component matches the one from the API
+  // Ensure that the Service type in the component matches the one from the API
+  return <ServiceReport service={service as Service} />;
+};
+
+export default connector(ServiceReportContainer);
diff --git a/services/web/src/containers/vehicleServiceDashboard/vehicleServiceDashboard.tsx b/services/web/src/containers/vehicleServiceDashboard/vehicleServiceDashboard.tsx
index c77253fd..7cee18d6 100644
--- a/services/web/src/containers/vehicleServiceDashboard/vehicleServiceDashboard.tsx
+++ b/services/web/src/containers/vehicleServiceDashboard/vehicleServiceDashboard.tsx
@@ -21,7 +21,6 @@ import { getVehicleServicesAction } from "../../actions/userActions";
 import VehicleServiceDashboard from "../../components/vehicleServiceDashboard/vehicleServiceDashboard";
 import responseTypes from "../../constants/responseTypes";
 import { FAILURE_MESSAGE } from "../../constants/messages";
-import { useParams } from "react-router-dom";
 
 interface RootState {
   userReducer: {
diff --git a/services/web/src/sagas/userSaga.ts b/services/web/src/sagas/userSaga.ts
index aaae00ea..3f23d818 100644
--- a/services/web/src/sagas/userSaga.ts
+++ b/services/web/src/sagas/userSaga.ts
@@ -30,10 +30,8 @@ import {
   TOKEN_NOT_SENT,
   EMAIL_CHANGED,
   EMAIL_NOT_CHANGED,
-  NO_SERVICES,
 } from "../constants/messages";
 import MyAction from "../types/action";
-import { getMechanicServices, getVehicleServices } from "./vehicleSaga";
 
 interface Response {
   ok: boolean;
@@ -465,6 +463,4 @@ export function* userActionWatcher() {
   yield takeLatest(actionTypes.RESET_PASSWORD, resetPassword);
   yield takeLatest(actionTypes.CHANGE_EMAIL, changeEmail);
   yield takeLatest(actionTypes.VERIFY_TOKEN, verifyToken);
-  yield takeLatest(actionTypes.GET_MECHANIC_SERVICES, getMechanicServices);
-  yield takeLatest(actionTypes.GET_VEHICLE_SERVICES, getVehicleServices);
 }
diff --git a/services/web/src/sagas/vehicleSaga.ts b/services/web/src/sagas/vehicleSaga.ts
index 887b7658..29a2c472 100644
--- a/services/web/src/sagas/vehicleSaga.ts
+++ b/services/web/src/sagas/vehicleSaga.ts
@@ -349,6 +349,7 @@ export function* getVehicleServices(action: MyAction): Generator<any, void, any>
   try {
     yield put({ type: actionTypes.FETCHING_DATA });
     const getUrl = APIService.WORKSHOP_SERVICE + requestURLS.GET_VEHICLE_SERVICES.replace("<vehicleVIN>", VIN);
+    console.log("Get URL", getUrl);
     const headers = {
       "Content-Type": "application/json",
       Authorization: `Bearer ${accessToken}`,
@@ -379,6 +380,45 @@ export function* getVehicleServices(action: MyAction): Generator<any, void, any>
   }
 }
 
+/**
+ * Request for getting service report
+
+ * @payload {string} payload.accessToken - Access token of the user
+ * @payload {string} payload.reportId - Report id of the service
+ * @payload {Function} payload.callback - Callback method
+ */
+export function* getServiceReport(action: MyAction): Generator<any, void, any> {
+  const { accessToken, reportId, callback } = action.payload;
+  let receivedResponse: Partial<Response> = {};
+  try {
+    yield put({ type: actionTypes.FETCHING_DATA });
+    const getUrl = APIService.WORKSHOP_SERVICE + requestURLS.GET_SERVICE_REPORT + "?report_id=" + reportId;
+    console.log("Get URL", getUrl);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${accessToken}`,
+    };
+
+    const responseJSON = yield fetch(getUrl, {
+      headers,
+      method: "GET",
+    }).then((response: Response) => {
+      receivedResponse = response;
+      return response.json();
+    });
+
+    if (!receivedResponse.ok) {
+      throw responseJSON;
+    }
+
+    yield put({ type: actionTypes.FETCHED_DATA, payload: responseJSON });
+    callback(responseTypes.SUCCESS, responseJSON);
+  } catch (e) {
+    yield put({ type: actionTypes.FETCHED_DATA, payload: receivedResponse });
+    callback(responseTypes.FAILURE, e);
+  }
+}
+
 export function* vehicleActionWatcher(): Generator<any, void, any> {
   yield takeLatest(actionTypes.RESEND_MAIL, resendMail);
   yield takeLatest(actionTypes.VERIFY_VEHICLE, verifyVehicle);
@@ -388,4 +428,5 @@ export function* vehicleActionWatcher(): Generator<any, void, any> {
   yield takeLatest(actionTypes.REFRESH_LOCATION, refreshLocation);
   yield takeLatest(actionTypes.GET_MECHANIC_SERVICES, getMechanicServices);
   yield takeLatest(actionTypes.GET_VEHICLE_SERVICES, getVehicleServices);
+  yield takeLatest(actionTypes.GET_SERVICE_REPORT, getServiceReport);
 }