diff --git a/src/pages/api/PropsTableApi.jsx b/src/pages/api/PropsTableApi.jsx
index 116e54529f8a107c2939af54c4d36050142e31a7..99221940ec0c18e0586ab943edd9d46e32750b3c 100644
--- a/src/pages/api/PropsTableApi.jsx
+++ b/src/pages/api/PropsTableApi.jsx
@@ -7,6 +7,9 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
+import SortByAlphaIcon from "@mui/icons-material/SortByAlpha";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import { Tooltip, IconButton, Stack } from "@mui/material";
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
@@ -29,42 +32,79 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
 }));
 
 export default function PropsTableApi({ rows = [] }) {
+  const [sorted, setSorted] = React.useState(false);
+  const handleSort = () => {
+    setSorted((_sorted) => {
+      const resultSorted = !_sorted;
+      if(resultSorted){
+
+      }
+      return resultSorted;
+    });
+  };
   return (
-    <TableContainer component={Paper}>
-      <Table sx={{ minWidth: 700 }} aria-label="customized table">
-        <TableHead>
-          <TableRow>
-            <StyledTableCell /* width={"30%"} */>Name</StyledTableCell>
-            <StyledTableCell align="left" /* width={"30%"} */>
-              Type
-            </StyledTableCell>
-            <StyledTableCell align="left">Default</StyledTableCell>
-            <StyledTableCell align="left" /*  width={"30%"} */>
-              Description
-            </StyledTableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((row) => (
-            <StyledTableRow key={row.name}>
-              <StyledTableCell
-                component="th"
-                scope="row"
-                style={{
-                  wordBreak: row.name.length > 12 ? "break-word" : "normal",
-                }}
-              >
-                {row.name}
+    <React.Fragment>
+      <Stack
+        direction={"row"}
+        justifyContent="space-between"
+        alignItems={"center"}
+      >
+        <SubTitle content="Props" />
+
+        <Tooltip
+          title={sorted ? "Unsort alphabetically" : "Sort alphabetically"}
+        >
+          <IconButton
+            style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
+            onClick={handleSort}
+            aria-label="upload picture"
+            component="label"
+          >
+            <SortByAlphaIcon />
+          </IconButton>
+        </Tooltip>
+      </Stack>
+      <TableContainer component={Paper}>
+        <Table sx={{ minWidth: 700 }} aria-label="customized table">
+          <TableHead>
+            <TableRow>
+              <StyledTableCell /* width={"30%"} */>Name</StyledTableCell>
+              <StyledTableCell align="left" /* width={"30%"} */>
+                Type
               </StyledTableCell>
-              <StyledTableCell align="left" style={{ wordBreak: "break-word" }}>
-                {row.type}
+              <StyledTableCell align="left">Default</StyledTableCell>
+              <StyledTableCell align="left" /*  width={"30%"} */>
+                Description
               </StyledTableCell>
-              <StyledTableCell align="left">{row.default}</StyledTableCell>
-              <StyledTableCell align="left">{row.description}</StyledTableCell>
-            </StyledTableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <StyledTableRow key={row.name}>
+                <StyledTableCell
+                  component="th"
+                  scope="row"
+                  style={{
+                    wordBreak: row.name.length > 12 ? "break-word" : "normal",
+                  }}
+                >
+                  {row.name}
+                </StyledTableCell>
+                <StyledTableCell
+                  align="left"
+                  style={{ wordBreak: "break-word" }}
+                >
+                  {row.type}
+                </StyledTableCell>
+                <StyledTableCell align="left">{row.default}</StyledTableCell>
+                <StyledTableCell align="left">
+                  {row.description}
+                </StyledTableCell>
+              </StyledTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </React.Fragment>
   );
 }