diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 142bd3f..0f9921a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,8 +6,23 @@
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: create transparent png">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/Examples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/Examples.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/service.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/join/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/split/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -17,6 +32,9 @@
   <component name="FormatOnSaveOptions">
     <option name="myRunOnSave" value="true" />
   </component>
+  <component name="Git.Merge.Settings">
+    <option name="BRANCH" value="origin/main" />
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
     <option name="RESET_MODE" value="HARD" />
@@ -36,39 +54,39 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
-    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/src/assets&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
-    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test.executor&quot;: &quot;Run&quot;,
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
-    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
-    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
-    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ASKED_ADD_EXTERNAL_FILES": "true",
+    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "Vitest.compute function (1).executor": "Run",
+    "Vitest.compute function.executor": "Run",
+    "Vitest.mergeText.executor": "Run",
+    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
+    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
+    "git-widget-placeholder": "string-join",
+    "ignore.virus.scanning.warn.message": "true",
+    "kotlin-language-version-configured": "true",
+    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "npm.dev.executor": "Run",
+    "npm.prebuild.executor": "Run",
+    "npm.script:create:tool.executor": "Run",
+    "npm.test.executor": "Run",
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
+    "project.structure.last.edited": "Problems",
+    "project.structure.proportion": "0.0",
+    "project.structure.side.proportion": "0.2",
+    "settings.editor.selected.configurable": "settings.typescriptcompiler",
+    "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
diff --git a/scripts/create-tool.mjs b/scripts/create-tool.mjs
index a8c1715..e57693a 100644
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -83,6 +83,7 @@ export const tool = defineTool('${type}', {
   path: '${toolName}',
   // image,
   description: '',
+  shortDescription: '',
   keywords: ['${toolName.split('-').join('\', \'')}'],
   component: lazy(() => import('./index'))
 });
diff --git a/src/components/ToolInputAndResult.tsx b/src/components/ToolInputAndResult.tsx
index b34999c..3aefb8c 100644
--- a/src/components/ToolInputAndResult.tsx
+++ b/src/components/ToolInputAndResult.tsx
@@ -9,7 +9,7 @@ export default function ToolInputAndResult({
   result: ReactNode;
 }) {
   return (
-    <Grid container spacing={2}>
+    <Grid id="tool" container spacing={2}>
       <Grid item xs={6}>
         {input}
       </Grid>
diff --git a/src/components/ToolLayout.tsx b/src/components/ToolLayout.tsx
index b99c073..51aade8 100644
--- a/src/components/ToolLayout.tsx
+++ b/src/components/ToolLayout.tsx
@@ -2,18 +2,33 @@ import { Box } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import ToolHeader from './ToolHeader';
+import Separator from '@tools/Separator';
+import AllTools from './allTools/AllTools';
+import { getToolsByCategory } from '@tools/index';
 
 export default function ToolLayout({
   children,
   title,
   description,
-  image
+  image,
+  type
 }: {
   title: string;
   description: string;
   image?: string;
   children: ReactNode;
+  type: string;
 }) {
+  const otherCategoryTools =
+    getToolsByCategory()
+      .find((category) => category.type === type)
+      ?.tools.filter((tool) => tool.name !== title)
+      .map((tool) => ({
+        title: tool.name,
+        description: tool.shortDescription,
+        link: '/' + tool.path
+      })) ?? [];
+
   return (
     <Box
       width={'100%'}
@@ -27,6 +42,8 @@ export default function ToolLayout({
       <Box width={'85%'}>
         <ToolHeader title={title} description={description} image={image} />
         {children}
+        <Separator backgroundColor="#5581b5" margin="50px" />
+        <AllTools title="All Text Tools" toolCards={otherCategoryTools} />
       </Box>
     </Box>
   );
diff --git a/src/components/allTools/ToolCard.tsx b/src/components/allTools/ToolCard.tsx
index ca62b26..7a2dc98 100644
--- a/src/components/allTools/ToolCard.tsx
+++ b/src/components/allTools/ToolCard.tsx
@@ -1,17 +1,21 @@
 import { Box, Link, Card, CardContent, Typography } from '@mui/material';
 import { ToolCardProps } from './AllTools';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { useNavigate } from 'react-router-dom';
 
 export default function ToolCard({ title, description, link }: ToolCardProps) {
+  const navigate = useNavigate();
   return (
     <Card
+      onClick={() => navigate(link)}
       raised
       sx={{
         borderRadius: 2,
         bgcolor: '#5581b5',
         borderColor: '#5581b5',
         color: '#fff',
-        boxShadow: '6px 6px 12px #b8b9be, -6px -6px 12px #fff'
+        boxShadow: '6px 6px 12px #b8b9be, -6px -6px 12px #fff',
+        cursor: 'pointer'
       }}
     >
       <CardContent>
diff --git a/src/components/examples/ExampleCard.tsx b/src/components/examples/ExampleCard.tsx
index abde54d..e756fa5 100644
--- a/src/components/examples/ExampleCard.tsx
+++ b/src/components/examples/ExampleCard.tsx
@@ -5,7 +5,8 @@ import {
   Card,
   CardContent,
   Typography,
-  TextField
+  TextField,
+  useTheme
 } from '@mui/material';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RequiredOptions from './RequiredOptions';
@@ -18,11 +19,12 @@ export default function ExampleCard({
   requiredOptions,
   changeInputResult
 }: ExampleCardProps) {
+  const theme = useTheme();
   return (
     <Card
       raised
       sx={{
-        bgcolor: '#d1d9e6',
+        bgcolor: theme.palette.background.default,
         height: '100%',
         overflow: 'hidden',
         borderRadius: 2,
diff --git a/src/components/examples/Examples.tsx b/src/components/examples/Examples.tsx
index 26f2930..6f31bd3 100644
--- a/src/components/examples/Examples.tsx
+++ b/src/components/examples/Examples.tsx
@@ -28,7 +28,7 @@ export default function Examples({
   exampleCards
 }: ExampleProps) {
   return (
-    <Box mt={4}>
+    <Box id={'examples'} mt={4}>
       <Box mt={4} display="flex" gap={1} alignItems="center">
         <Typography mb={2} fontSize={30} color={'primary'}>
           {title}
diff --git a/src/components/input/ToolTextInput.tsx b/src/components/input/ToolTextInput.tsx
index d5a666d..cc2d344 100644
--- a/src/components/input/ToolTextInput.tsx
+++ b/src/components/input/ToolTextInput.tsx
@@ -46,7 +46,7 @@ export default function ToolTextInput({
     fileInputRef.current?.click();
   };
   return (
-    <Box id="tool">
+    <Box>
       <InputHeader title={title} />
       <TextField
         value={value}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 775f7bd..8d3cae7 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -89,7 +89,7 @@ export default function Home() {
             >
               <Box>
                 <Typography fontWeight={'bold'}>{option.name}</Typography>
-                <Typography fontSize={12}>{option.description}</Typography>
+                <Typography fontSize={12}>{option.shortDescription}</Typography>
               </Box>
             </Box>
           )}
diff --git a/src/pages/image/png/change-colors-in-png/meta.ts b/src/pages/image/png/change-colors-in-png/meta.ts
index dd87e03..bdf461c 100644
--- a/src/pages/image/png/change-colors-in-png/meta.ts
+++ b/src/pages/image/png/change-colors-in-png/meta.ts
@@ -8,6 +8,7 @@ export const tool = defineTool('png', {
   image,
   description:
     "World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors.",
+  shortDescription: 'Quickly swap colors in a PNG image',
   keywords: ['change', 'colors', 'in', 'png'],
   component: lazy(() => import('./index'))
 });
diff --git a/src/pages/image/png/create-transparent/meta.ts b/src/pages/image/png/create-transparent/meta.ts
index 8362377..af2daf3 100644
--- a/src/pages/image/png/create-transparent/meta.ts
+++ b/src/pages/image/png/create-transparent/meta.ts
@@ -6,6 +6,7 @@ export const tool = defineTool('png', {
   name: 'Create transparent PNG',
   path: 'create-transparent',
   image,
+  shortDescription: 'Quickly make a PNG image transparent',
   description:
     "World's simplest online Portable Network Graphics transparency maker. Just import your PNG image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import a PNG – get a transparent PNG.",
   keywords: ['create', 'transparent'],
diff --git a/src/pages/number/sum/meta.ts b/src/pages/number/sum/meta.ts
index ffc8520..fc96799 100644
--- a/src/pages/number/sum/meta.ts
+++ b/src/pages/number/sum/meta.ts
@@ -8,6 +8,7 @@ export const tool = defineTool('number', {
   // image,
   description:
     'Quickly calculate the sum of numbers in your browser. To get your sum, just enter your list of numbers in the input field, adjust the separator between the numbers in the options below, and this utility will add up all these numbers.',
+  shortDescription: 'Quickly sum numbers',
   keywords: ['sum'],
   component: lazy(() => import('./index'))
 });
diff --git a/src/pages/string/join/index.tsx b/src/pages/string/join/index.tsx
index 8ff3f9d..33fa5df 100644
--- a/src/pages/string/join/index.tsx
+++ b/src/pages/string/join/index.tsx
@@ -113,39 +113,6 @@ s
   }
 ];
 
-const toolCards = [
-  {
-    title: 'Split Text',
-    description: 'Quickly split text into chunks.',
-    link: '/string/split'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  },
-  {
-    title: 'Join Text',
-    description: 'Quickly merge lines of text together via a delimiter.',
-    link: '/string/join'
-  }
-];
-
 export default function JoinText() {
   const [input, setInput] = useState<string>('');
   const { showSnackBar } = useContext(CustomSnackBarContext);
@@ -246,8 +213,6 @@ export default function JoinText() {
           changeInputResult
         }))}
       />
-      <Separator backgroundColor="#5581b5" margin="50px" />
-      <AllTools title="All Text Tools" toolCards={toolCards} />
     </Box>
   );
 }
diff --git a/src/pages/string/join/meta.ts b/src/pages/string/join/meta.ts
index 1686be5..aedfe3f 100644
--- a/src/pages/string/join/meta.ts
+++ b/src/pages/string/join/meta.ts
@@ -8,6 +8,7 @@ export const tool = defineTool('string', {
   image,
   description:
     "World's Simplest Text Tool World's simplest browser-based utility for joining text. Load your text in the input form on the left and you'll automatically get merged text on the right. Powerful, free, and fast. Load text – get joined lines",
+  shortDescription: 'Quickly merge texts',
   keywords: ['text', 'join'],
   component: lazy(() => import('./index'))
 });
diff --git a/src/pages/string/split/meta.ts b/src/pages/string/split/meta.ts
index 09b4f40..01acca2 100644
--- a/src/pages/string/split/meta.ts
+++ b/src/pages/string/split/meta.ts
@@ -8,6 +8,7 @@ export const tool = defineTool('string', {
   image,
   description:
     "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
+  shortDescription: 'Quickly split a text',
   keywords: ['text', 'split'],
   component: lazy(() => import('./index'))
 });
diff --git a/src/pages/string/to-morse/meta.ts b/src/pages/string/to-morse/meta.ts
index 80b2b4d..78774f5 100644
--- a/src/pages/string/to-morse/meta.ts
+++ b/src/pages/string/to-morse/meta.ts
@@ -8,6 +8,7 @@ export const tool = defineTool('string', {
   // image,
   description:
     "World's simplest browser-based utility for converting text to Morse code. Load your text in the input form on the left and you'll instantly get Morse code in the output area. Powerful, free, and fast. Load text – get Morse code.",
+  shortDescription: 'Quickly encode text to morse',
   keywords: ['to', 'morse'],
   component: lazy(() => import('./index'))
 });
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
index 91d489c..c05729c 100644
--- a/src/tools/defineTool.tsx
+++ b/src/tools/defineTool.tsx
@@ -8,6 +8,7 @@ interface ToolOptions {
   image?: string;
   name: string;
   description: string;
+  shortDescription: string;
 }
 
 export interface DefinedTool {
@@ -15,6 +16,7 @@ export interface DefinedTool {
   path: string;
   name: string;
   description: string;
+  shortDescription: string;
   image?: string;
   keywords: string[];
   component: () => JSX.Element;
@@ -24,7 +26,15 @@ export const defineTool = (
   basePath: string,
   options: ToolOptions
 ): DefinedTool => {
-  const { image, path, name, description, keywords, component } = options;
+  const {
+    image,
+    path,
+    name,
+    description,
+    keywords,
+    component,
+    shortDescription
+  } = options;
   const Component = component;
   return {
     type: basePath,
@@ -32,10 +42,16 @@ export const defineTool = (
     name,
     image,
     description,
+    shortDescription,
     keywords,
     component: () => {
       return (
-        <ToolLayout title={name} description={description} image={image}>
+        <ToolLayout
+          type={basePath}
+          title={name}
+          description={description}
+          image={image}
+        >
           <Component />
         </ToolLayout>
       );
diff --git a/src/tools/index.ts b/src/tools/index.ts
index f460aa9..e0f645a 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -38,6 +38,7 @@ export const filterTools = (
     (tool) =>
       tool.name.toLowerCase().includes(lowerCaseQuery) ||
       tool.description.toLowerCase().includes(lowerCaseQuery) ||
+      tool.shortDescription.toLowerCase().includes(lowerCaseQuery) ||
       tool.keywords.some((keyword) =>
         keyword.toLowerCase().includes(lowerCaseQuery)
       )
@@ -49,6 +50,7 @@ export const getToolsByCategory = (): {
   description: string;
   type: string;
   example: { title: string; path: string };
+  tools: DefinedTool[];
 }[] => {
   const grouped: Partial<Record<string, DefinedTool[]>> = Object.groupBy(
     tools,
@@ -60,6 +62,7 @@ export const getToolsByCategory = (): {
       description:
         categoriesDescriptions.find((desc) => desc.type === type)?.value ?? '',
       type,
+      tools: tls ?? [],
       example: tls
         ? { title: tls[0].name, path: tls[0].path }
         : { title: '', path: '' }