diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f9a3ff9..15b429f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,7 +6,8 @@
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: remove unnecessary files">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/text-replacer/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/text-replacer/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/validateJson/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/validateJson/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/validateJson/servcie.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/validateJson/service.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -29,16 +30,19 @@
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
     <option name="RESET_MODE" value="HARD" />
   </component>
-  <component name="GitHubPullRequestSearchHistory">{
-  &quot;history&quot;: [
+  <component name="GitHubPullRequestSearchHistory"><![CDATA[{
+  "history": [
     {
-      &quot;assignee&quot;: &quot;iib0011&quot;
+      "assignee": "iib0011"
+    },
+    {
+      "state": "OPEN"
     }
   ],
-  &quot;lastFilter&quot;: {
-    &quot;assignee&quot;: &quot;iib0011&quot;
+  "lastFilter": {
+    "assignee": "iib0011"
   }
-}</component>
+}]]></component>
   <component name="GitHubPullRequestState">{
   &quot;prStates&quot;: [
     {
@@ -116,7 +120,7 @@
     "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
     "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
     "Vitest.replaceText function.executor": "Run",
-    "git-widget-placeholder": "main",
+    "git-widget-placeholder": "#44 on fork/ady-cf/feature/validate-json",
     "ignore.virus.scanning.warn.message": "true",
     "kotlin-language-version-configured": "true",
     "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/.husky",
@@ -167,7 +171,7 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
     </key>
   </component>
-  <component name="RunManager" selected="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp">
+  <component name="RunManager" selected="npm.dev">
     <configuration name="replaceText function (regexp mode).should return the original text when passed an invalid regexp" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
@@ -240,10 +244,10 @@
     </list>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.dev" />
         <item itemvalue="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp" />
         <item itemvalue="npm.test" />
         <item itemvalue="npm.test:e2e" />
-        <item itemvalue="npm.dev" />
         <item itemvalue="Vitest.replaceText function" />
       </list>
     </recent_temporary>
diff --git a/src/pages/tools/json/validateJson/index.tsx b/src/pages/tools/json/validateJson/index.tsx
index c3cdfc7..39333af 100644
--- a/src/pages/tools/json/validateJson/index.tsx
+++ b/src/pages/tools/json/validateJson/index.tsx
@@ -1,16 +1,10 @@
-import { Box } from '@mui/material';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolInputAndResult from '@components/ToolInputAndResult';
-import ToolInfo from '@components/ToolInfo';
-import Separator from '@components/Separator';
-import ToolExamples, {
-  CardExampleType
-} from '@components/examples/ToolExamples';
-import { FormikProps } from 'formik';
-import { validateJson } from './servcie';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { validateJson } from './service';
 import { ToolComponentProps } from '@tools/defineTool';
+import ToolContent from '@components/ToolContent';
 
 const exampleCards: CardExampleType<{}>[] = [
   {
@@ -54,15 +48,8 @@ const exampleCards: CardExampleType<{}>[] = [
 export default function ValidateJson({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<{}>>(null);
 
-  useEffect(() => {
-    if (input) {
-      compute(input);
-    }
-  }, [input]);
-
-  const compute = (input: string) => {
+  const compute = (options: any, input: string) => {
     const { valid, error } = validateJson(input);
 
     if (valid) {
@@ -73,37 +60,33 @@ export default function ValidateJson({ title }: ToolComponentProps) {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
-        }
-        result={<ToolTextResult title="Validation Result" value={result} />}
-      />
-
-      <ToolInfo
-        title="What is JSON Validation?"
-        description="
+    <ToolContent
+      title={title}
+      inputComponent={
+        <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+      }
+      resultComponent={
+        <ToolTextResult title="Validation Result" value={result} />
+      }
+      initialValues={{}}
+      getGroups={null}
+      toolInfo={{
+        title: 'What is JSON Validation?',
+        description: `
           JSON (JavaScript Object Notation) is a lightweight data-interchange format.
           JSON validation ensures that the structure of the data conforms to the JSON standard.
           A valid JSON object must have:
           - Property names enclosed in double quotes.
-          - Properly balanced curly braces `{}`.
+          - Properly balanced curly braces {}.
           - No trailing commas after the last key-value pair.
           - Proper nesting of objects and arrays.
           This tool checks the input JSON and provides feedback to help identify and fix common errors.
-        "
-      />
-
-      <Separator backgroundColor="#5581b5" margin="50px" />
-
-      <ToolExamples
-        title={title}
-        exampleCards={exampleCards}
-        getGroups={() => []}
-        formRef={formRef}
-        setInput={setInput}
-      />
-    </Box>
+          `
+      }}
+      exampleCards={exampleCards}
+      input={input}
+      setInput={setInput}
+      compute={compute}
+    />
   );
 }
diff --git a/src/pages/tools/json/validateJson/servcie.ts b/src/pages/tools/json/validateJson/service.ts
similarity index 86%
rename from src/pages/tools/json/validateJson/servcie.ts
rename to src/pages/tools/json/validateJson/service.ts
index 400c1bb..2d53367 100644
--- a/src/pages/tools/json/validateJson/servcie.ts
+++ b/src/pages/tools/json/validateJson/service.ts
@@ -1,14 +1,13 @@
-export const validateJson = (
-  input: string
-): { valid: boolean; error?: string } => {
-  try {
-    JSON.parse(input);
-    return { valid: true };
-  } catch (error) {
-    if (error instanceof SyntaxError) {
-      const message = error.message;
-      return { valid: false, error: error.message };
-    }
-    return { valid: false, error: 'Unknown error occurred' };
-  }
-};
+export const validateJson = (
+  input: string
+): { valid: boolean; error?: string } => {
+  try {
+    JSON.parse(input);
+    return { valid: true };
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      return { valid: false, error: error.message };
+    }
+    return { valid: false, error: 'Unknown error occurred' };
+  }
+};