diff --git a/src/components/JSONViewerButtons/JSONViewerButtons.tsx b/src/components/JSONViewerButtons/JSONViewerButtons.tsx
index 58bcbe8..a41120c 100644
--- a/src/components/JSONViewerButtons/JSONViewerButtons.tsx
+++ b/src/components/JSONViewerButtons/JSONViewerButtons.tsx
@@ -1,17 +1,35 @@
 import playImage from '../../../public/play.svg';
 import Image from 'next/image';
 import broomImage from '../../../public/broom.svg';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { fetchData } from '@/lib/store/slices';
 import { AppDispatch } from '@/lib/store/store';
+import { prettifyText } from '@/lib/utils';
+import { RootState } from '@/lib/store/store';
+import { setQuery } from '@/lib/store/slices';
+import { toast } from '../ui/use-toast';
 
 const JSONViewerButtons = () => {
   const dispatch = useDispatch<AppDispatch>();
+  const query = useSelector((state: RootState) => state.data.query);
 
   async function onClickFetch() {
     dispatch(fetchData());
   }
 
+  function onClickPrettify() {
+    const editedQuery = prettifyText(query);
+    if (editedQuery) {
+      dispatch(setQuery(editedQuery));
+    } else {
+      toast({
+        variant: 'destructive',
+        title: 'Invalid request',
+        description: 'Check your request',
+      });
+    }
+  }
+
   return (
     <div className="flex flex-col gap-3 justify-start bg-slate-700 py-2 px-5">
       <button
@@ -20,7 +38,10 @@ const JSONViewerButtons = () => {
       >
         <Image src={playImage} alt="Start" />
       </button>
-      <button className="bg-slate-700 hover:bg-slate-600 rounded h-10 w-10 p-1 duration-150">
+      <button
+        className="bg-slate-700 hover:bg-slate-600 rounded h-10 w-10 p-1 duration-150"
+        onClick={onClickPrettify}
+      >
         <Image src={broomImage} alt="Prettify" />
       </button>
     </div>
diff --git a/src/lib/prettifier.tsx b/src/lib/prettifier.tsx
deleted file mode 100644
index 74f17a1..0000000
--- a/src/lib/prettifier.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-type BracketsPairsType = {
-  '}': '{';
-  ')': '(';
-  ']': '[';
-  '{': '}';
-  '(': ')';
-  '[': ']';
-};
-
-type BracketsCountType = {
-  '{': number;
-  '}': number;
-  '(': number;
-  ')': number;
-  '[': number;
-  ']': number;
-};
-
-const bracketsPairs: BracketsPairsType = {
-  '}': '{',
-  ')': '(',
-  ']': '[',
-  '{': '}',
-  '(': ')',
-  '[': ']',
-};
-
-export function prettifyText(text: string) {
-  const list = text.replace(/\s+/g, '').split('');
-  const totalList = [];
-  let dif = 0;
-  const bracketsCount: BracketsCountType = {
-    '{': 0,
-    '}': 0,
-    '(': 0,
-    ')': 0,
-    '[': 0,
-    ']': 0,
-  };
-
-  for (let i = 0; i < list.length; i++) {
-    const el = list[i];
-    if ('{}()[]'.includes(el)) {
-      const elAmount = ++bracketsCount[el as keyof BracketsCountType];
-      const elPair = bracketsPairs[el as keyof BracketsPairsType];
-      dif = Math.abs(elAmount - bracketsCount[elPair]);
-      if (i === 0 && el === '{') {
-        totalList.push(el + '\n' + '  '.repeat(1));
-      } else if ('})]'.includes(el)) {
-        if (elAmount - bracketsCount[elPair] > 0) {
-          return null;
-        }
-        el === '}'
-          ? totalList.push(
-              '\n' + '  '.repeat(dif) + el + '\n' + '  '.repeat(dif)
-            )
-          : totalList.push(el);
-      } else {
-        el === '{'
-          ? totalList.push('  ' + el + '\n' + '  '.repeat(dif))
-          : totalList.push(el);
-      }
-    } else if (el === ',') {
-      totalList.push(',\n' + '  '.repeat(dif));
-    } else {
-      totalList.push(el);
-    }
-  }
-
-  return totalList
-    .join('')
-    .replace(/\s*:\s*/g, ': ')
-    .replace(/\s*\,/, ',')
-    .replace(/}\s*}/g, '}\n}');
-}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 9ad0df4..c28aa4f 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,77 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+type BracketPairsType = {
+  '}': '{';
+  ')': '(';
+  ']': '[';
+  '{': '}';
+  '(': ')';
+  '[': ']';
+};
+
+type BracketCountType = {
+  '{': number;
+  '}': number;
+  '(': number;
+  ')': number;
+  '[': number;
+  ']': number;
+};
+
+const bracketPairs: BracketPairsType = {
+  '}': '{',
+  ')': '(',
+  ']': '[',
+  '{': '}',
+  '(': ')',
+  '[': ']',
+};
+
+export function prettifyText(text: string) {
+  const list = text.replace(/\s+/g, '').split('');
+  const totalList = [];
+  let tabs = 0;
+  const bracketCount: BracketCountType = {
+    '{': 0,
+    '}': 0,
+    '(': 0,
+    ')': 0,
+    '[': 0,
+    ']': 0,
+  };
+
+  for (let i = 0; i < list.length; i++) {
+    const el = list[i];
+    if ('{}()[]'.includes(el)) {
+      const elCount = ++bracketCount[el as keyof BracketCountType];
+      const elPair = bracketPairs[el as keyof BracketPairsType];
+      if ('{}'.includes(el)) {
+        tabs = Math.abs(bracketCount['{'] - bracketCount['}']);
+      }
+      if ('})]'.includes(el)) {
+        if (elCount - bracketCount[elPair] > 0) {
+          return null;
+        }
+      }
+    }
+
+    if (el === '}') {
+      totalList.push('\n' + '  '.repeat(tabs) + el + '\n' + '  '.repeat(tabs));
+    } else if (el === '{' || el === ',') {
+      totalList.push(el + '\n' + '  '.repeat(tabs));
+    } else {
+      totalList.push(el);
+    }
+  }
+
+  return totalList
+    .join('')
+    .replace(/\s*:\s*/g, ': ')
+    .replace(/\s*,/g, ',')
+    .replace(/}\s*}/g, '}\n}')
+    .replace(/\s*\)/g, ')')
+    .replace(/\(\s*/g, '(')
+    .trim();
+}