diff --git a/pkg/app/web/src/constants/ui-text.ts b/pkg/app/web/src/constants/ui-text.ts
index 131e9f484d..42260e9495 100644
--- a/pkg/app/web/src/constants/ui-text.ts
+++ b/pkg/app/web/src/constants/ui-text.ts
@@ -2,6 +2,9 @@ export const UI_TEXT_SAVE = "Save";
 export const UI_TEXT_CANCEL = "Cancel";
 export const UI_TEXT_ADD = "Add";
 export const UI_TEXT_EDIT = "Edit";
+export const UI_TEXT_DISABLE = "Disable";
+export const UI_TEXT_ENABLE = "Enable";
+export const UI_TEXT_RECREATE_KEY = "Recreate Key";
 export const UI_TEXT_REFRESH = "REFRESH";
 export const UI_TEXT_CLOSE = "Close";
 export const UI_TEXT_DELETE = "Delete";
diff --git a/pkg/app/web/src/pages/settings/piped.tsx b/pkg/app/web/src/pages/settings/piped/index.tsx
similarity index 51%
rename from pkg/app/web/src/pages/settings/piped.tsx
rename to pkg/app/web/src/pages/settings/piped/index.tsx
index e83a6e1bc9..452c777a16 100644
--- a/pkg/app/web/src/pages/settings/piped.tsx
+++ b/pkg/app/web/src/pages/settings/piped/index.tsx
@@ -5,10 +5,7 @@ import {
   DialogContent,
   DialogTitle,
   Divider,
-  IconButton,
   makeStyles,
-  Menu,
-  MenuItem,
   Paper,
   Table,
   TableBody,
@@ -18,23 +15,24 @@ import {
   TableRow,
   TextField,
   Toolbar,
-  Typography,
 } from "@material-ui/core";
 import {
   Add as AddIcon,
   Close as CloseIcon,
-  MoreVert as MoreVertIcon,
   FilterList as FilterIcon,
 } from "@material-ui/icons";
-import clsx from "clsx";
-import dayjs from "dayjs";
 import React, { FC, memo, useCallback, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { AddPipedDrawer } from "../../components/add-piped-drawer";
-import { EditPipedDrawer } from "../../components/edit-piped-drawer";
-import { PipedFilter, FilterValues } from "../../components/piped-filter";
-import { UI_TEXT_FILTER, UI_TEXT_HIDE_FILTER } from "../../constants/ui-text";
-import { AppState } from "../../modules";
+import { AddPipedDrawer } from "../../../components/add-piped-drawer";
+import { EditPipedDrawer } from "../../../components/edit-piped-drawer";
+import { FilterValues, PipedFilter } from "../../../components/piped-filter";
+import {
+  UI_TEXT_ADD,
+  UI_TEXT_CLOSE,
+  UI_TEXT_FILTER,
+  UI_TEXT_HIDE_FILTER,
+} from "../../../constants/ui-text";
+import { AppState } from "../../../modules";
 import {
   clearRegisteredPipedInfo,
   disablePiped,
@@ -44,20 +42,16 @@ import {
   recreatePipedKey,
   RegisteredPiped,
   selectAll,
-} from "../../modules/pipeds";
-import { AppDispatch } from "../../store";
+} from "../../../modules/pipeds";
+import { AppDispatch } from "../../../store";
+import { PipedTableRow } from "./piped-table-row";
 
-const useStyles = makeStyles((theme) => ({
-  disabledItem: {
-    background: theme.palette.grey[200],
-  },
+const useStyles = makeStyles(() => ({
   toolbarSpacer: {
     flexGrow: 1,
   },
 }));
 
-const ITEM_HEIGHT = 48;
-
 const usePipeds = (filterValues: FilterValues): Piped[] => {
   const pipeds = useSelector<AppState, Piped[]>((state) =>
     selectAll(state.pipeds)
@@ -78,13 +72,10 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
   const classes = useStyles();
   const [openFilter, setOpenFilter] = useState(false);
   const [isOpenForm, setIsOpenForm] = useState(false);
-  const [actionTarget, setActionTarget] = useState<Piped | null>(null);
   const [editPipedId, setEditPipedId] = useState<string | null>(null);
   const [filterValues, setFilterValues] = useState<FilterValues>({
     enabled: true,
   });
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-  const isOpenMenu = Boolean(anchorEl);
   const dispatch = useDispatch<AppDispatch>();
   const pipeds = usePipeds(filterValues);
 
@@ -92,33 +83,33 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
     (state) => state.pipeds.registeredPiped
   );
 
-  const handleMenuOpen = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>, piped: Piped): void => {
-      setActionTarget(piped);
-      setAnchorEl(event.currentTarget);
+  const handleDisable = useCallback(
+    (id: string) => {
+      dispatch(disablePiped({ pipedId: id })).then(() => {
+        dispatch(fetchPipeds(true));
+      });
     },
-    []
+    [dispatch]
+  );
+  const handleEnable = useCallback(
+    (id: string) => {
+      dispatch(enablePiped({ pipedId: id })).then(() => {
+        dispatch(fetchPipeds(true));
+      });
+    },
+    [dispatch]
   );
 
-  const closeMenu = useCallback(() => {
-    setAnchorEl(null);
-    setTimeout(() => {
-      setActionTarget(null);
-    }, 200);
-  }, []);
-
-  const handleDisableClick = useCallback(() => {
-    closeMenu();
-    if (!actionTarget) {
-      return;
-    }
-
-    const act = actionTarget.disabled ? enablePiped : disablePiped;
+  const handleRecreate = useCallback(
+    (id: string) => {
+      dispatch(recreatePipedKey({ pipedId: id }));
+    },
+    [dispatch]
+  );
 
-    dispatch(act({ pipedId: actionTarget.id })).then(() => {
-      dispatch(fetchPipeds(true));
-    });
-  }, [dispatch, actionTarget, closeMenu]);
+  const handleEdit = useCallback((id: string) => {
+    setEditPipedId(id);
+  }, []);
 
   const handleClose = useCallback(() => {
     setIsOpenForm(false);
@@ -129,20 +120,6 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
     dispatch(fetchPipeds(true));
   }, [dispatch]);
 
-  const handleRecreate = useCallback(() => {
-    if (actionTarget) {
-      dispatch(recreatePipedKey({ pipedId: actionTarget.id }));
-    }
-    closeMenu();
-  }, [dispatch, actionTarget, closeMenu]);
-
-  const handleEdit = useCallback(() => {
-    if (actionTarget) {
-      setEditPipedId(actionTarget.id);
-    }
-    closeMenu();
-  }, [actionTarget, closeMenu]);
-
   const handleEditClose = useCallback(() => {
     setEditPipedId(null);
   }, []);
@@ -155,7 +132,7 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
           startIcon={<AddIcon />}
           onClick={() => setIsOpenForm(true)}
         >
-          ADD
+          {UI_TEXT_ADD}
         </Button>
         <div className={classes.toolbarSpacer} />
         <Button
@@ -182,36 +159,14 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
             </TableHead>
             <TableBody>
               {pipeds.map((piped) => (
-                <TableRow
-                  key={`pipe-${piped.id}`}
-                  className={clsx({ [classes.disabledItem]: piped.disabled })}
-                >
-                  <TableCell>
-                    <Typography variant="subtitle2">
-                      {`${piped.name} (${piped.id.slice(0, 8)})`}
-                    </Typography>
-                  </TableCell>
-                  <TableCell>{piped.version}</TableCell>
-                  <TableCell>
-                    <Typography variant="body2" color="textSecondary">
-                      {piped.desc}
-                    </Typography>
-                  </TableCell>
-                  <TableCell>
-                    {piped.startedAt === 0
-                      ? "Not Yet Started"
-                      : dayjs(piped.startedAt * 1000).fromNow()}
-                  </TableCell>
-                  <TableCell align="right">
-                    <IconButton
-                      edge="end"
-                      aria-label="open menu"
-                      onClick={(e) => handleMenuOpen(e, piped)}
-                    >
-                      <MoreVertIcon />
-                    </IconButton>
-                  </TableCell>
-                </TableRow>
+                <PipedTableRow
+                  key={piped.id}
+                  pipedId={piped.id}
+                  onEdit={handleEdit}
+                  onRecreateKey={handleRecreate}
+                  onDisable={handleDisable}
+                  onEnable={handleEnable}
+                />
               ))}
             </TableBody>
           </Table>
@@ -222,36 +177,6 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
         )}
       </Box>
 
-      <Menu
-        id="piped-menu"
-        anchorEl={anchorEl}
-        keepMounted
-        open={isOpenMenu}
-        onClose={() => closeMenu()}
-        PaperProps={{
-          style: {
-            maxHeight: ITEM_HEIGHT * 4.5,
-            width: "20ch",
-          },
-        }}
-      >
-        {actionTarget && actionTarget.disabled ? (
-          <MenuItem onClick={handleDisableClick}>Enable</MenuItem>
-        ) : (
-          [
-            <MenuItem key="piped-menu-edit" onClick={handleEdit}>
-              Edit
-            </MenuItem>,
-            <MenuItem key="piped-menu-recreate" onClick={handleRecreate}>
-              Recreate Key
-            </MenuItem>,
-            <MenuItem key="piped-menu-disable" onClick={handleDisableClick}>
-              Disable
-            </MenuItem>,
-          ]
-        )}
-      </Menu>
-
       <AddPipedDrawer open={isOpenForm} onClose={handleClose} />
       <EditPipedDrawer pipedId={editPipedId} onClose={handleEditClose} />
 
@@ -274,7 +199,7 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
           />
           <Box display="flex" justifyContent="flex-end" m={1} mt={2}>
             <Button color="primary" onClick={handleClosePipedInfo}>
-              CLOSE
+              {UI_TEXT_CLOSE}
             </Button>
           </Box>
         </DialogContent>
diff --git a/pkg/app/web/src/pages/settings/piped/piped-table-row.tsx b/pkg/app/web/src/pages/settings/piped/piped-table-row.tsx
new file mode 100644
index 0000000000..bdf616238a
--- /dev/null
+++ b/pkg/app/web/src/pages/settings/piped/piped-table-row.tsx
@@ -0,0 +1,153 @@
+import {
+  IconButton,
+  makeStyles,
+  Menu,
+  MenuItem,
+  TableCell,
+  TableRow,
+  Typography,
+} from "@material-ui/core";
+import { MoreVert as MoreVertIcon } from "@material-ui/icons";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import React, { FC, memo, useCallback, useState } from "react";
+import { useSelector } from "react-redux";
+import {
+  UI_TEXT_EDIT,
+  UI_TEXT_DISABLE,
+  UI_TEXT_ENABLE,
+  UI_TEXT_RECREATE_KEY,
+} from "../../../constants/ui-text";
+import { AppState } from "../../../modules";
+import { Piped, selectById } from "../../../modules/pipeds";
+
+const useStyles = makeStyles((theme) => ({
+  disabledItem: {
+    background: theme.palette.grey[200],
+  },
+}));
+
+interface Props {
+  pipedId: string;
+  onEdit: (id: string) => void;
+  onRecreateKey: (id: string) => void;
+  onDisable: (id: string) => void;
+  onEnable: (id: string) => void;
+}
+
+const ITEM_HEIGHT = 48;
+const menuStyle = {
+  style: {
+    maxHeight: ITEM_HEIGHT * 4.5,
+    width: "20ch",
+  },
+};
+
+export const PipedTableRow: FC<Props> = memo(function PipedTableRow({
+  pipedId,
+  onEnable,
+  onDisable,
+  onEdit,
+  onRecreateKey,
+}) {
+  const classes = useStyles();
+  const piped = useSelector<AppState, Piped | undefined>((state) =>
+    selectById(state.pipeds, pipedId)
+  );
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleMenuOpen = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    },
+    []
+  );
+
+  const handleMenuClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+
+  const handleEdit = useCallback(() => {
+    setAnchorEl(null);
+    onEdit(pipedId);
+  }, [pipedId, onEdit]);
+
+  const handleRecreate = useCallback(() => {
+    setAnchorEl(null);
+    onRecreateKey(pipedId);
+  }, [pipedId, onRecreateKey]);
+
+  const handleEnable = useCallback(() => {
+    setAnchorEl(null);
+    onEnable(pipedId);
+  }, [pipedId, onEnable]);
+
+  const handleDisable = useCallback(() => {
+    setAnchorEl(null);
+    onDisable(pipedId);
+  }, [pipedId, onDisable]);
+
+  if (!piped) {
+    return null;
+  }
+
+  return (
+    <>
+      <TableRow
+        key={`pipe-${piped.id}`}
+        className={clsx({ [classes.disabledItem]: piped.disabled })}
+      >
+        <TableCell>
+          <Typography variant="subtitle2">
+            {`${piped.name} (${piped.id.slice(0, 8)})`}
+          </Typography>
+        </TableCell>
+        <TableCell>{piped.version}</TableCell>
+        <TableCell>
+          <Typography variant="body2" color="textSecondary">
+            {piped.desc}
+          </Typography>
+        </TableCell>
+        <TableCell>
+          {piped.startedAt === 0
+            ? "Not Yet Started"
+            : dayjs(piped.startedAt * 1000).fromNow()}
+        </TableCell>
+        <TableCell align="right">
+          <IconButton
+            edge="end"
+            aria-label="open menu"
+            onClick={handleMenuOpen}
+          >
+            <MoreVertIcon />
+          </IconButton>
+        </TableCell>
+      </TableRow>
+
+      <Menu
+        id="piped-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+        PaperProps={menuStyle}
+      >
+        {piped.disabled ? (
+          <MenuItem onClick={handleEnable}>{UI_TEXT_ENABLE}</MenuItem>
+        ) : (
+          [
+            <MenuItem key="piped-menu-edit" onClick={handleEdit}>
+              {UI_TEXT_EDIT}
+            </MenuItem>,
+            <MenuItem key="piped-menu-recreate" onClick={handleRecreate}>
+              {UI_TEXT_RECREATE_KEY}
+            </MenuItem>,
+            <MenuItem key="piped-menu-disable" onClick={handleDisable}>
+              {UI_TEXT_DISABLE}
+            </MenuItem>,
+          ]
+        )}
+      </Menu>
+    </>
+  );
+});