diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index cf83c23..3e35156 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -9,6 +9,7 @@ import { ProjectLayout } from './layout/projectLayout';
 import Status from './views/project/status';
 import Recon from './views/project/recon';
 import { ReconResults } from './views/project/results/recon-results';
+import JsLeaks from './views/project/JsLeaks.1';
 
 function Home() {
   return (
@@ -31,6 +32,7 @@ export default function App() {
             <Route path="result" element={<Results />} />
             <Route path="result-recon" element={<ReconResults />} />
             <Route path="attack" element={<Results />} />
+            <Route path="jsleaks" element={<JsLeaks />} />
           </Route>
         </Routes>
       </Router>
diff --git a/src/renderer/components/sidebar.tsx b/src/renderer/components/sidebar.tsx
index 1224a9e..e50e4e8 100644
--- a/src/renderer/components/sidebar.tsx
+++ b/src/renderer/components/sidebar.tsx
@@ -41,6 +41,12 @@ const dashboardMenu: DashboardMenu[] = [
     Disabled: true,
     icon: <LayoutDashboardIcon className="mr-2 h-4 w-4" />,
   },
+
+  {
+    href: 'jsleaks',
+    title: 'JsLeaks',
+    icon: <LayoutDashboardIcon className="mr-2 h-4 w-4" />,
+  },
 ];
 
 const resultArch: DashboardMenu[] = [
diff --git a/src/renderer/views/project/JsLeaks.tsx b/src/renderer/views/project/JsLeaks.tsx
new file mode 100644
index 0000000..b3ad068
--- /dev/null
+++ b/src/renderer/views/project/JsLeaks.tsx
@@ -0,0 +1,41 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/card';
+import Secrets from './JsLeaks Jobs/secrets';
+import EndPoints from './JsLeaks Jobs/EndPoints';
+
+export default function JsLeaks() {
+  return (
+    <div className="flex flex-col gap-4">
+      <h1 className="font-bold text-3xl">Initiate Recon Attacks</h1>
+      <div>
+        <div className="grid grid-flow-row grid-cols-2 gap-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Find Secrets</CardTitle>
+              <CardDescription>wanna find secrets ?</CardDescription>
+            </CardHeader>
+            <CardContent className="flex justify-between">
+              <Secrets />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Find EndPoints</CardTitle>
+              <CardDescription>
+                Unveiling extra and hidden endpoints
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex justify-between">
+              <EndPoints />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/views/project/jsLeaksJob/Endpoint.tsx b/src/renderer/views/project/jsLeaksJob/Endpoint.tsx
new file mode 100644
index 0000000..205df3f
--- /dev/null
+++ b/src/renderer/views/project/jsLeaksJob/Endpoint.tsx
@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+
+export default function EndPoints() {
+  const [Loading, setLoading] = useState<boolean>(false);
+  const RunEndPoints = async () => {
+    setLoading(true);
+  };
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {!Loading ? (
+        <Button onClick={RunEndPoints}>Process</Button>
+      ) : (
+        <Button disabled>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Please wait
+        </Button>
+      )}
+    </>
+  );
+}
diff --git a/src/renderer/views/project/jsLeaksJob/secrets.tsx b/src/renderer/views/project/jsLeaksJob/secrets.tsx
new file mode 100644
index 0000000..865aea9
--- /dev/null
+++ b/src/renderer/views/project/jsLeaksJob/secrets.tsx
@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+
+export default function Secrets() {
+  const [Loading, setLoading] = useState<boolean>(false);
+  const RunSecrets = async () => {
+    setLoading(true);
+  };
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {!Loading ? (
+        <Button onClick={RunSecrets}>Process</Button>
+      ) : (
+        <Button disabled>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Please wait
+        </Button>
+      )}
+    </>
+  );
+}