diff --git a/src/view/app/Components/Layout/Query/QueryDropdownMenu.tsx b/src/view/app/Components/Layout/Query/QueryDropdownMenu.tsx
new file mode 100644
index 00000000..a4cf7504
--- /dev/null
+++ b/src/view/app/Components/Layout/Query/QueryDropdownMenu.tsx
@@ -0,0 +1,58 @@
+import { Box, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import { useState } from 'react';
+import { ProBroButton } from '@assets/button';
+
+interface QueryDropdownMenuProps {
+    setIsFormatted: (isFormatted: boolean) => void; // Prop to set formatting state in parent
+}
+
+enum FormatType {
+    JSON = 'JSON',
+    PROGRESS = 'PROGRESS',
+}
+
+const QueryDropdownMenu: React.FC<QueryDropdownMenuProps> = ({
+    setIsFormatted,
+}) => {
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+    const [selectedOption, setSelectedOption] = useState<FormatType>(
+        FormatType.JSON
+    );
+
+    const handleFormat = (format: FormatType) => {
+        if (format === FormatType.JSON) {
+            setIsFormatted(false);
+        } else if (format === FormatType.PROGRESS) {
+            setIsFormatted(true);
+        }
+        setSelectedOption(format);
+        setAnchorEl(null);
+    };
+
+    return (
+        <Box display='inline-block'>
+            <ProBroButton onClick={(event) => setAnchorEl(event.currentTarget)}>
+                FORMAT
+            </ProBroButton>
+            <Menu
+                id='format-menu'
+                anchorEl={anchorEl}
+                keepMounted
+                open={Boolean(anchorEl)}
+                onClose={() => setAnchorEl(null)}
+            >
+                {Object.values(FormatType).map((format) => (
+                    <MenuItem key={format} onClick={() => handleFormat(format)}>
+                        <ListItemIcon>
+                            {selectedOption === format && <CheckIcon />}
+                        </ListItemIcon>
+                        <ListItemText primary={format} />
+                    </MenuItem>
+                ))}
+            </Menu>
+        </Box>
+    );
+};
+
+export default QueryDropdownMenu;
diff --git a/src/view/app/Components/Layout/Query/QueryFormHead.tsx b/src/view/app/Components/Layout/Query/QueryFormHead.tsx
index 8729de1c..1ed202a8 100644
--- a/src/view/app/Components/Layout/Query/QueryFormHead.tsx
+++ b/src/view/app/Components/Layout/Query/QueryFormHead.tsx
@@ -1,8 +1,6 @@
 import ExportPopup from '@Query/Export';
 import { ExportPopupProps } from '@Query/Export/export';
 import { ProBroButton } from '@assets/button';
-import RawOffTwoToneIcon from '@mui/icons-material/RawOffTwoTone';
-import RawOnTwoToneIcon from '@mui/icons-material/RawOnTwoTone';
 import PlayArrowTwoToneIcon from '@mui/icons-material/PlayArrowTwoTone';
 import { MouseEventHandler, useEffect } from 'react';
 import UpdatePopup from '@Query/Update';
@@ -11,6 +9,7 @@ import { Box, Stack, Typography } from '@mui/material';
 import QueryAutocompleteInput, {
     QueryAutocompleteInputProps,
 } from './QueryAutocompleteInput';
+import QueryDropdownMenu from './QueryDropdownMenu';
 
 interface QueryFormHeadProps
     extends QueryAutocompleteInputProps,
@@ -21,6 +20,7 @@ interface QueryFormHeadProps
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
     formatButtonOnClick: MouseEventHandler<HTMLButtonElement>;
     isFormatted: boolean;
+    setIsFormatted: (value: boolean) => void;
 }
 
 /**
@@ -33,6 +33,7 @@ const QueryFormHead: React.FC<QueryFormHeadProps> = ({
     onButtonClick,
     formatButtonOnClick,
     isFormatted,
+    setIsFormatted,
     ...otherProps
 }) => {
     useEffect(() => {
@@ -64,16 +65,7 @@ const QueryFormHead: React.FC<QueryFormHeadProps> = ({
                         selectedRows={otherProps.selectedRows}
                         isWindowSmall={isWindowSmall}
                     />
-                    <ProBroButton
-                        onClick={formatButtonOnClick}
-                        startIcon={
-                            isFormatted ? (
-                                <RawOffTwoToneIcon />
-                            ) : (
-                                <RawOnTwoToneIcon />
-                            )
-                        }
-                    />
+                    <QueryDropdownMenu setIsFormatted={setIsFormatted} />
                     <UpdatePopup
                         selectedRows={otherProps.selectedRows}
                         columns={otherProps.columns}
diff --git a/src/view/app/Query/query.tsx b/src/view/app/Query/query.tsx
index 971f0fc2..b28131da 100644
--- a/src/view/app/Query/query.tsx
+++ b/src/view/app/Query/query.tsx
@@ -99,7 +99,7 @@ function QueryForm({
         setWindowHeight(window.innerHeight);
     };
 
-    let inputQuery: HTMLButtonElement = undefined;
+    const inputQuery: HTMLButtonElement = undefined;
     useEffect(() => {
         if (inputQuery) {
             inputQuery.click();
@@ -586,6 +586,7 @@ function QueryForm({
                 sortColumns={sortColumns}
                 filters={filters}
                 selectedRows={selectedRows}
+                setIsFormatted={setIsFormatted}
                 formatButtonOnClick={() => {
                     setIsFormatted(!isFormatted);
                 }}