diff --git a/src/App.tsx b/src/App.tsx
index d294418..ddc36da 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,6 +22,7 @@ import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
 import TransactionPage from "./Pages/TransactionPage/TransactionPage";
 import EquipmentInstanceTallyPage from "./Pages/EquipmentTallyPage/EquipmentTallyPage";
 import TransactionReportPage from "./Pages/TransactionReportPage/TransactionReportPage";
+import ManageEquipmentPage from "./Pages/ManageEquipmentPage/ManageEquipmentPage";
 
 const queryClient = new QueryClient();
 const router = createHashRouter([
@@ -67,6 +68,17 @@ const router = createHashRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/view/ManageEquipment",
+    element: (
+      <>
+        <Revalidator />
+        <RestrictedPage allow_only="Technician" />
+        <ManageEquipmentPage />
+      </>
+    ),
+    errorElement: <ErrorPage />,
+  },
   {
     path: "/view/equipment_instances/filter/:filter_by",
     element: (
diff --git a/src/Components/DashboardPage/Technician/TechnicianNavigation.tsx b/src/Components/DashboardPage/Technician/TechnicianNavigation.tsx
index dfa3f0a..ce853d5 100644
--- a/src/Components/DashboardPage/Technician/TechnicianNavigation.tsx
+++ b/src/Components/DashboardPage/Technician/TechnicianNavigation.tsx
@@ -16,34 +16,35 @@ export default function TechnicianNavigation() {
           alignItems: "center",
           gap: "24px",
           alignSelf: "stretch",
+          paddingBottom: "5rem"
         }}
       >
-
-        <div style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "24px",
-          width: "100%",
-          maxWidth: "800px"
-        }}>
-
-<p
+        <div
           style={{
-            overflow: "hidden",
-            color: "#0E410D",
-            fontSize: "24px",
-            fontWeight: 700,
-            display: "-webkit-box",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "24px",
             width: "100%",
-            maxWidth: "807px",
-            flex: 1,
-            textAlign: "left",
-            marginLeft: "1rem"
+            maxWidth: "800px",
           }}
         >
-          Feature
-        </p>
+          <p
+            style={{
+              overflow: "hidden",
+              color: "#0E410D",
+              fontSize: "24px",
+              fontWeight: 700,
+              display: "-webkit-box",
+              width: "100%",
+              maxWidth: "807px",
+              flex: 1,
+              textAlign: "left",
+              marginLeft: "1rem",
+            }}
+          >
+            Feature
+          </p>
           <button
             style={{
               display: "flex",
@@ -80,7 +81,7 @@ export default function TechnicianNavigation() {
               background: "#E8D3BB",
             }}
             onClick={() => {
-              navigate("/dashboard");
+              navigate("/view/ManageEquipment");
             }}
           >
             <img src={equipment} alt="Manage Equipment" />
diff --git a/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
index b412176..9194677 100644
--- a/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
+++ b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
@@ -47,226 +47,404 @@ export default function TechnicianWidgets() {
       >
         <div
           style={{
-            paddingLeft: "16px",
-            paddingRight: "16px",
-            margin: "16px",
-            borderRadius: 16,
-            backgroundColor: "#a6a6a6",
-            alignSelf: "center",
-            justifyContent: "center",
-            width: "16rem",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "24px",
+            width: "100%",
+            maxWidth: "800px",
           }}
         >
           <p
             style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-              ...{ float: "left", position: "absolute" },
+              overflow: "hidden",
+              color: "#0E410D",
+              fontSize: "24px",
+              fontWeight: 700,
+              display: "-webkit-box",
+              width: "100%",
+              maxWidth: "807px",
+              flex: 1,
+              textAlign: "left",
+              marginLeft: "1rem",
+              marginBottom: -15,
             }}
           >
-            Pending Equipments
-          </p>
-
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_L,
-            }}
-          >
-            {queries[1].data?.filter(
-              (equipment) => equipment.status == "Pending"
-            ).length || "Loading..."}
+            Summary
           </p>
         </div>
+        {/* Blue Capsule */}
         <div
+          className="capsule"
           style={{
-            paddingLeft: "16px",
-            paddingRight: "16px",
-            margin: "16px",
-            borderRadius: 16,
-            backgroundColor: "#a6a6a6",
-            alignSelf: "center",
-            justifyContent: "center",
-            width: "16rem",
+            background: "#DDEDF3",
+            margin: 30,
+            paddingTop: 50,
           }}
         >
-          <p
+          <div
             style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-              ...{ float: "left", position: "absolute" },
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: "15px",
             }}
           >
-            Equipments in Inventory
-          </p>
+            {/* Transactions all */}
+            <div
+              style={{
+                display: "flex",
+                width: "202px",
+                height: "245px",
+                padding: "25px 10px",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                alignItems: "center",
+                borderRadius: "15px",
+                background: "#FFF",
+                boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
+              }}
+            >
+              <p
+                style={{
+                  ...styles.text_dark,
+                  ...styles.text_normal,
+                  fontWeight: "400",
+                }}
+              >
+                Total Transactions Today
+              </p>
+
+              <p
+                style={{
+                  ...styles.text_dark,
+                  ...styles.text_L,
+                  margin: 0,
+                }}
+              >
+                {queries[3].data?.filter((transaction) =>
+                  moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
+                    todayStartOfDay,
+                    todayEndOfDay
+                  )
+                ).length || "0"}
+              </p>
+              <p
+                style={{
+                  ...styles.text_dark,
+                  ...styles.text_normal,
+                  fontWeight: "400",
+                }}
+              >
+                Total Transactions this Month
+              </p>
+
+              <p
+                style={{
+                  ...styles.text_dark,
+                  ...styles.text_L,
+                  margin: 0,
+                }}
+              >
+                {queries[3].data?.filter((transaction) =>
+                  moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
+                    thisMonthStart,
+                    thisMonthEnd
+                  )
+                ).length || "Loading..."}
+              </p>
+            </div>
+            <div
+              style={{
+                display: "flex",
+                width: "40%",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "15px",
+                alignSelf: "stretch",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  height: "88px",
+                  width: "100%",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  alignSelf: "stretch",
+                  borderRadius: "15px",
+                  background: "#FFF",
+                  boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
+                }}
+              >
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_L,
+                    margin: "0",
+                  }}
+                >
+                  {queries[3].data?.filter(
+                    (transaction) =>
+                      transaction.transaction_status == "Approved"
+                  ).length || 0}
+                </p>
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_S,
+                    margin: "0",
+                    fontWeight: "400",
+                  }}
+                >
+                  Pending Request
+                </p>
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  height: "88px",
+                  width: "100%",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  alignSelf: "stretch",
+                  borderRadius: "15px",
+                  background: "#FFF",
+                  boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
+                }}
+              >
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_L,
+                    margin: "0",
+                  }}
+                >
+                  {queries[3].data?.filter(
+                    (transaction) =>
+                      transaction.transaction_status == "Borrowed"
+                  ).length || 0}
+                </p>
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_S,
+                    margin: "0",
+                    fontWeight: "400",
+                  }}
+                >
+                  On Borrow
+                </p>
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  height: "88px",
+                  width: "100%",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  alignSelf: "stretch",
+                  borderRadius: "15px",
+                  background: "#FFF",
+                  boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
+                }}
+              >
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_L,
+                    margin: "0",
+                  }}
+                >
+                  {queries[3].data?.filter(
+                    (transaction) =>
+                      transaction.transaction_status == "Finalized"
+                  ).length || 0}
+                </p>
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_S,
+                    margin: "0",
+                    fontWeight: "400",
+                  }}
+                >
+                  Success
+                </p>
+              </div>
+            </div>
+          </div>
 
           <p
             style={{
-              ...styles.text_dark,
-              ...styles.text_L,
+              margin: "0",
+              fontWeight: 700,
+              ...styles.text_normal,
             }}
           >
-            {queries[1].data?.length || "Loading..."}
+            Borrowing Transaction
           </p>
         </div>
-      </div>
-      <div
-        style={{
-          ...styles.flex_row,
-          ...{
-            alignSelf: "center",
-            justifyContent: "center",
-            flexWrap: "wrap",
-          },
-        }}
-      >
+
+        {/* Yellow Capsule */}
         <div
+          className="capsule"
           style={{
-            paddingLeft: "16px",
-            paddingRight: "16px",
-            margin: "16px",
-            borderRadius: 16,
-            backgroundColor: "#a6a6a6",
-            alignSelf: "center",
-            justifyContent: "center",
-            width: "16rem",
+            background: "#FCF2E7",
+            paddingTop: 50,
+            margin: 30,
           }}
         >
-          <p
+          <div
             style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-              ...{ float: "left", position: "absolute" },
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: "15px",
             }}
           >
-            Available Equipments
-          </p>
+            {/* Pending Req */}
+            <div
+              style={{
+                display: "flex",
+                width: "202px",
+                height: "193px",
+                padding: "25px 10px",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                alignItems: "center",
+                borderRadius: "15px",
+                background: "#FFF",
+                boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
+              }}
+            >
+              <p
+                style={{
+                  ...styles.text_dark,
+                  ...styles.text_L,
+                }}
+              >
+                {queries[1].data?.length || "Loading..."}
+              </p>
 
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_L,
-            }}
-          >
-            {queries[1].data?.filter(
-              (equipment) => equipment.status == "Available"
-            ).length || "Loading..."}
-          </p>
-        </div>
-        <div
-          style={{
-            paddingLeft: "16px",
-            paddingRight: "16px",
-            margin: "16px",
-            borderRadius: 16,
-            backgroundColor: "#a6a6a6",
-            alignSelf: "center",
-            justifyContent: "center",
-            width: "16rem",
-          }}
-        >
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-              ...{ float: "left", position: "absolute" },
-            }}
-          >
-            Broken Equipments
-          </p>
+              <p
+                style={{
+                  ...styles.text_dark,
+                  ...styles.text_M,
+                  fontWeight: "400",
+                }}
+              >
+                Total Equipment
+              </p>
+            </div>
+            <div
+              style={{
+                display: "flex",
+                width: "40%",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "15px",
+                alignSelf: "stretch",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  height: "100%",
+                  width: "100%",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  alignSelf: "stretch",
+                  borderRadius: "15px",
+                  background: "#FFF",
+                  boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
+                }}
+              >
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_S,
+                    margin: "0",
+                    fontWeight: "400",
+                  }}
+                >
+                  Available
+                </p>
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_L,
+                    margin: 0,
+                  }}
+                >
+                  {queries[1].data?.filter(
+                    (equipment) => equipment.status == "Available"
+                  ).length || "Loading..."}
+                </p>
 
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_L,
-            }}
-          >
-            {queries[1].data?.filter(
-              (equipment) => equipment.status == "Broken"
-            ).length || "Loading..."}
-          </p>
-        </div>
-      </div>
-      <div
-        style={{
-          ...styles.flex_row,
-          ...{
-            alignSelf: "center",
-            justifyContent: "center",
-            flexWrap: "wrap",
-          },
-        }}
-      >
-        <div
-          style={{
-            paddingLeft: "16px",
-            paddingRight: "16px",
-            margin: "16px",
-            borderRadius: 16,
-            backgroundColor: "#a6a6a6",
-            alignSelf: "center",
-            justifyContent: "center",
-            width: "16rem",
-          }}
-        >
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-              ...{ float: "left", position: "absolute" },
-            }}
-          >
-            Total Transactions Today
-          </p>
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_S,
+                    margin: "0",
+                    fontWeight: "400",
+                  }}
+                >
+                  Pending
+                </p>
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_L,
+                    margin: 0,
+                  }}
+                >
+                  {queries[1].data?.filter(
+                    (equipment) => equipment.status == "Pending"
+                  ).length || 0}
+                </p>
 
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_L,
-            }}
-          >
-            {queries[3].data?.filter((transaction) =>
-              moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
-                todayStartOfDay,
-                todayEndOfDay
-              )
-            ).length || "Loading..."}
-          </p>
-        </div>
-        <div
-          style={{
-            paddingLeft: "16px",
-            paddingRight: "16px",
-            margin: "16px",
-            borderRadius: 16,
-            backgroundColor: "#a6a6a6",
-            alignSelf: "center",
-            justifyContent: "center",
-            width: "16rem",
-          }}
-        >
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_M,
-              ...{ float: "left", position: "absolute" },
-            }}
-          >
-            Total Transactions this Month
-          </p>
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_S,
+                    margin: "0",
+                    fontWeight: "400",
+                    color: "#a44141",
+                  }}
+                >
+                  Broken
+                </p>
 
+                <p
+                  style={{
+                    ...styles.text_dark,
+                    ...styles.text_L,
+                    margin: "0",
+                    color: "#a44141",
+                  }}
+                >
+                  {queries[1].data?.filter(
+                    (equipment) => equipment.status == "Broken"
+                  ).length || 0}
+                </p>
+              </div>
+            </div>
+          </div>
           <p
             style={{
-              ...styles.text_dark,
-              ...styles.text_L,
+              margin: "0",
+              fontWeight: 700,
+              ...styles.text_normal,
             }}
           >
-            {queries[3].data?.filter((transaction) =>
-              moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
-                thisMonthStart,
-                thisMonthEnd
-              )
-            ).length || "Loading..."}
+            Equipment Tracking
           </p>
         </div>
       </div>
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index b5680f7..219a8d1 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import styles, { colors } from "../../styles";
+import styles from "../../styles";
 import MenuIcon from "@mui/icons-material/Menu";
 import SidebarModal from "../Drawer/Drawer";
 import { Drawer } from "@mui/material";
diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx
index ed18c6e..bc923ef 100644
--- a/src/Pages/DashboardPage/DashboardPage.tsx
+++ b/src/Pages/DashboardPage/DashboardPage.tsx
@@ -2,8 +2,6 @@ import Header from "../../Components/Header/Header";
 import styles from "../../styles";
 import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
 import TechnicianWidgets from "../../Components/DashboardPage/Technician/TechnicianWidgets";
-import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
-import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
 import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
 import StudentDashboard from "../../Components/DashboardPage/Student/StudentDashboard";
 import TechnicianNavigation from "../../Components/DashboardPage/Technician/TechnicianNavigation";
@@ -16,8 +14,6 @@ export default function Dashboard() {
         <RestrictedComponent allow_only={"Technician"}>
           <TechnicianWidgets />
           <TechnicianNavigation />
-          <TechnicianEquipmentButtons />
-          <TechnicianLogButtons />
         </RestrictedComponent>
         <RestrictedComponent allow_only={"Student"}>
           <div
@@ -31,8 +27,9 @@ export default function Dashboard() {
               },
             }}
           >
-            <StudentTransactionListView />
             <StudentDashboard />
+            <StudentTransactionListView />
+            
           </div>
         </RestrictedComponent>
         <RestrictedComponent allow_only={"Teacher"}>
diff --git a/src/Pages/ManageEquipmentPage/ManageEquipmentPage.tsx b/src/Pages/ManageEquipmentPage/ManageEquipmentPage.tsx
new file mode 100644
index 0000000..5bcabe9
--- /dev/null
+++ b/src/Pages/ManageEquipmentPage/ManageEquipmentPage.tsx
@@ -0,0 +1,20 @@
+import Header from "../../Components/Header/Header";
+import styles from "../../styles";
+import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
+import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
+import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
+
+
+export default function ManageEquipmentPage() {
+return (
+  <div style={styles.background}>
+    <Header label={"Equipment Management"} />
+    <div style={{ position: "relative", zIndex: 999, marginTop: 80 , alignContent: "center", height: "100%"}}>
+      <RestrictedComponent allow_only={"Technician"}>
+        <TechnicianEquipmentButtons />
+        <TechnicianLogButtons />
+      </RestrictedComponent>
+    </div>
+  </div>
+);
+}
diff --git a/src/Pages/TransactionPage/TransactionPage.tsx b/src/Pages/TransactionPage/TransactionPage.tsx
index f4d7d5a..ab6ceb2 100644
--- a/src/Pages/TransactionPage/TransactionPage.tsx
+++ b/src/Pages/TransactionPage/TransactionPage.tsx
@@ -53,6 +53,7 @@ export default function TransactionPage() {
           alignContent: "center",
           justifyContent: "center",
           alignItems: "center",
+          marginTop: 64
         }}
       >
         <PDFDownloadLink
diff --git a/src/Pages/TransactionsListPage/TransactionsListPage.tsx b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
index 8a259c8..82fb7cc 100644
--- a/src/Pages/TransactionsListPage/TransactionsListPage.tsx
+++ b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
@@ -68,6 +68,8 @@ export default function TransactionsListPage() {
             minHeight: "100%",
             minWidth: "100%",
             flexWrap: "wrap",
+            marginTop: 60,
+            paddingBottom: 20,
           },
           ...styles.flex_column,
         }}
diff --git a/src/index.css b/src/index.css
index 69476d9..610c080 100644
--- a/src/index.css
+++ b/src/index.css
@@ -104,3 +104,18 @@ button:focus-visible {
 .custom-scrollbar::-webkit-scrollbar-track {
   background-color: #f0f0f0; /* Color of the track */
 }
+
+.capsule {
+  display: flex;
+  width: 374px;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  gap: 30px;
+  flex-wrap: wrap;
+
+  border-radius: 6px;
+  border: 1px dashed #000;
+  background: #DDEDFF;
+}
\ No newline at end of file
diff --git a/src/styles.tsx b/src/styles.tsx
index 73e7bb3..436befc 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -45,7 +45,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     color: colors.font_dark,
     fontWeight: "500",
   },
-  
+
   text_dark_red: {
     color: colors.font_dark_red,
     fontWeight: "bold",