diff --git a/pkg/app/web/src/components/environment-list-item.tsx b/pkg/app/web/src/components/environment-list-item.tsx
index 1d737a968d..99a35321a9 100644
--- a/pkg/app/web/src/components/environment-list-item.tsx
+++ b/pkg/app/web/src/components/environment-list-item.tsx
@@ -5,13 +5,13 @@ import {
   DialogContent,
   DialogTitle,
   IconButton,
-  ListItem,
-  ListItemSecondaryAction,
-  ListItemText,
   makeStyles,
   Menu,
   MenuItem,
+  TableCell,
+  TableRow,
   TextField,
+  Typography,
 } from "@material-ui/core";
 import { MoreVert as MoreVertIcon } from "@material-ui/icons";
 import { EntityId } from "@reduxjs/toolkit";
@@ -83,22 +83,25 @@ export const EnvironmentListItem: FC<Props> = memo(
 
     return (
       <>
-        <ListItem key={`env-${env.id}`} divider dense className={classes.item}>
-          <ListItemText
-            primary={env.name}
-            secondary={env.desc || TEXT_NO_DESCRIPTION}
-          />
-          {/** TODO: Remove this style after implemented editing environment's desc API */}
-          <ListItemSecondaryAction style={{ display: "none" }}>
+        <TableRow key={`env-${env.id}`} className={classes.item}>
+          <TableCell>
+            <Typography variant="subtitle2" component="span">
+              {env.name}
+            </Typography>
+          </TableCell>
+          <TableCell colSpan={2}>{env.desc || TEXT_NO_DESCRIPTION}</TableCell>
+          <TableCell>{env.id}</TableCell>
+          <TableCell align="right" style={{ height: 61 }}>
             <IconButton
               edge="end"
               aria-label="open menu"
               onClick={handleClickMenu}
+              style={{ display: "none" }}
             >
               <MoreVertIcon />
             </IconButton>
-          </ListItemSecondaryAction>
-        </ListItem>
+          </TableCell>
+        </TableRow>
 
         <Menu
           id="env-menu"
diff --git a/pkg/app/web/src/pages/settings/environment.tsx b/pkg/app/web/src/pages/settings/environment.tsx
index a42a4e883e..494d2fdd9f 100644
--- a/pkg/app/web/src/pages/settings/environment.tsx
+++ b/pkg/app/web/src/pages/settings/environment.tsx
@@ -2,8 +2,13 @@ import {
   Button,
   Divider,
   Drawer,
-  List,
-  makeStyles,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
   Toolbar,
 } from "@material-ui/core";
 import { Add as AddIcon } from "@material-ui/icons";
@@ -22,18 +27,8 @@ import {
 import { selectProjectName } from "../../modules/me";
 import { AppDispatch } from "../../store";
 
-const useStyles = makeStyles((theme) => ({
-  main: {
-    overflow: "auto",
-  },
-  listItem: {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export const SettingsEnvironmentPage: FC = memo(
   function SettingsEnvironmentPage() {
-    const classes = useStyles();
     const dispatch = useDispatch<AppDispatch>();
     const [isOpenForm, setIsOpenForm] = useState(false);
     const projectName = useSelector<AppState, string>((state) =>
@@ -66,13 +61,27 @@ export const SettingsEnvironmentPage: FC = memo(
         </Toolbar>
         <Divider />
 
-        <div className={classes.main}>
-          <List disablePadding>
-            {envIds.map((envId) => (
-              <EnvironmentListItem id={envId} key={`env-list-item-${envId}`} />
-            ))}
-          </List>
-        </div>
+        <TableContainer component={Paper} square>
+          <Table aria-label="environment list" size="small" stickyHeader>
+            <TableHead>
+              <TableRow>
+                <TableCell>Name</TableCell>
+                <TableCell colSpan={2}>Description</TableCell>
+                <TableCell>ID</TableCell>
+                <TableCell align="right" />
+              </TableRow>
+            </TableHead>
+
+            <TableBody>
+              {envIds.map((envId) => (
+                <EnvironmentListItem
+                  id={envId}
+                  key={`env-list-item-${envId}`}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
 
         <Drawer anchor="right" open={isOpenForm} onClose={handleClose}>
           <AddEnvForm