From d4c544609abb3251f10e7451a3cbe3238337821b Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Feb 2025 06:17:10 +0000
Subject: [PATCH] feat: ui changes

---
 .idea/workspace.xml                           | 65 +++++++++++++++----
 README.md                                     |  5 +-
 package-lock.json                             | 24 +++++++
 package.json                                  |  1 +
 scripts/create-tool.mjs                       |  3 +-
 src/components/Hero.tsx                       |  4 +-
 src/components/Navbar/index.tsx               | 13 +++-
 src/components/ToolHeader.tsx                 | 39 +++++++++--
 src/components/ToolLayout.tsx                 |  8 ++-
 src/components/input/ToolFileInput.tsx        |  3 +-
 src/components/input/ToolTextInput.tsx        |  9 ++-
 src/components/result/ToolFileResult.tsx      |  3 +-
 src/components/result/ToolTextResult.tsx      |  5 ++
 src/config/uiConfig.ts                        |  6 ++
 src/pages/home/index.tsx                      |  2 +-
 src/pages/tools-by-category/index.tsx         | 17 +++--
 .../image/png/change-colors-in-png/meta.ts    |  3 +-
 .../tools/image/png/compress-png/meta.ts      |  2 +-
 .../image/png/convert-jgp-to-png/meta.ts      |  3 +-
 .../image/png/create-transparent/meta.ts      |  3 +-
 .../tools/list/find-most-popular/meta.ts      |  2 +-
 src/pages/tools/list/find-unique/meta.ts      |  2 +-
 src/pages/tools/list/group/meta.ts            |  2 +-
 src/pages/tools/list/reverse/meta.ts          |  2 +-
 src/pages/tools/list/rotate/meta.ts           |  2 +-
 src/pages/tools/list/shuffle/meta.ts          |  2 +-
 src/pages/tools/list/sort/meta.ts             |  2 +-
 src/pages/tools/list/unwrap/meta.ts           |  2 +-
 src/pages/tools/number/generate/meta.ts       |  2 +-
 src/pages/tools/number/sum/meta.ts            |  2 +-
 src/pages/tools/string/join/meta.ts           |  3 +-
 src/pages/tools/string/split/meta.ts          |  2 +-
 src/pages/tools/string/to-morse/meta.ts       |  2 +-
 .../tools/video/gif/change-speed/meta.ts      |  2 +-
 src/tools/defineTool.tsx                      | 11 ++--
 35 files changed, 190 insertions(+), 68 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 605ad84..a9cdceb 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,8 +4,43 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: docs">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: funding">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" 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/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.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/input/ToolFileInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.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/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config/uiConfig.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/home/Categories.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/Categories.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/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/find-unique/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/find-unique/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/group/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/group/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/reverse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/reverse/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/rotate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/rotate/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/shuffle/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/shuffle/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/sort/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/sort/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/unwrap/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/unwrap/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generate/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/sum/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/sum/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/join/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/join/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/split/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/split/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/to-morse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/to-morse/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -76,7 +111,7 @@
     &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/Ibrahima/IdeaProjects/omni-tools/src/assets&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/.github&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;,
@@ -109,11 +144,11 @@
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\.github" />
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\assets" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\assets" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string" />
-      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string\split" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\pages\tools" />
@@ -255,14 +290,8 @@
       <workItem from="1740318886545" duration="856000" />
       <workItem from="1740348963270" duration="388000" />
       <workItem from="1740399426653" duration="627000" />
-    </task>
-    <task id="LOCAL-00061" summary="feat: make responsive">
-      <option name="closed" value="true" />
-      <created>1719358195260</created>
-      <option name="number" value="00061" />
-      <option name="presentableId" value="LOCAL-00061" />
-      <option name="project" value="LOCAL" />
-      <updated>1719358195260</updated>
+      <workItem from="1740459961271" duration="66000" />
+      <workItem from="1740460036909" duration="4124000" />
     </task>
     <task id="LOCAL-00062" summary="feat: make tool responsive">
       <option name="closed" value="true" />
@@ -648,7 +677,15 @@
       <option name="project" value="LOCAL" />
       <updated>1740324274955</updated>
     </task>
-    <option name="localTasksCounter" value="110" />
+    <task id="LOCAL-00110" summary="feat: funding">
+      <option name="closed" value="true" />
+      <created>1740460017596</created>
+      <option name="number" value="00110" />
+      <option name="presentableId" value="LOCAL-00110" />
+      <option name="project" value="LOCAL" />
+      <updated>1740460017596</updated>
+    </task>
+    <option name="localTasksCounter" value="111" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -680,7 +717,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="ci: run e2e tests" />
     <MESSAGE value="fix: ci" />
     <MESSAGE value="chore: jimp types" />
     <MESSAGE value="fix: package.json" />
@@ -705,7 +741,8 @@
     <MESSAGE value="feat: compress png" />
     <MESSAGE value="fix: compress png" />
     <MESSAGE value="fix: docs" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: docs" />
+    <MESSAGE value="feat: funding" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: funding" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/README.md b/README.md
index a6f0502..deeb5e5 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
-<p align="center"><img src="src/assets/logo.png" width="80"></p>
-<h1 align="center">OmniTools</h1>
+<p align="center"><img src="src/assets/logo.png" width="150"></p>
 
 [//]: # ([![Docker Pulls]&#40;https://img.shields.io/docker/pulls/iib0011/omni-tools&#41;]&#40;https://hub.docker.com/r/iib0011/omni-tools&#41;)
 
@@ -100,7 +99,7 @@ npm run test
 npm run test:e2e
 ```
 
-[//]: # (<img src="https://api.star-history.com/svg?repos=iib0011/omni-tools&type=Date">)
+<img src="https://api.star-history.com/svg?repos=iib0011/omni-tools&type=Date">
 
 ## 🤝 Looking to contribute?
 
diff --git a/package-lock.json b/package-lock.json
index 7e73af7..355ad14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
       "devDependencies": {
         "@commitlint/cli": "^19.3.0",
         "@commitlint/config-conventional": "^19.2.2",
+        "@iconify/react": "^5.2.0",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^14.3.1",
         "@types/color": "^3.0.6",
@@ -1472,6 +1473,29 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@iconify/react": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-5.2.0.tgz",
+      "integrity": "sha512-7Sdjrqq3fkkQNks9SY3adGC37NQTHsBJL2PRKlQd455PoDi9s+Es9AUTY+vGLFOYs5yO9w9yCE42pmxCwG26WA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
diff --git a/package.json b/package.json
index d0722d3..35798dc 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@iconify/react": "^5.2.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
     "@types/color": "^3.0.6",
diff --git a/scripts/create-tool.mjs b/scripts/create-tool.mjs
index b149588..827cb37 100644
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -92,12 +92,11 @@ createToolFile(
   `
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-// import image from '@assets/text.png';
 
 export const tool = defineTool('${type}', {
   name: '${toolNameTitleCase}',
   path: '${toolName}',
-  // image,
+  icon: '',
   description: '',
   shortDescription: '',
   keywords: ['${toolName.split('-').join("', '")}'],
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a120149..9f226a3 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -75,7 +75,8 @@ export default function Hero() {
               ...params.InputProps,
               endAdornment: <SearchIcon />,
               sx: {
-                borderRadius: 4
+                borderRadius: 4,
+                backgroundColor: 'white'
               }
             }}
             onChange={(event) => handleInputChange(event, event.target.value)}
@@ -114,6 +115,7 @@ export default function Hero() {
                 borderRadius: 3,
                 borderColor: 'grey',
                 borderStyle: 'solid',
+                backgroundColor: 'white',
                 cursor: 'pointer',
                 '&:hover': { backgroundColor: '#FAFAFD' }
               }}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 6e8e0e0..0afaff7 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -50,9 +50,18 @@ const Navbar: React.FC = () => {
   return (
     <AppBar
       position="static"
-      style={{ backgroundColor: 'white', color: 'black' }}
+      style={{
+        backgroundColor: 'white',
+        color: 'black'
+      }}
     >
-      <Toolbar sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+      <Toolbar
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          boxShadow: '0px 2px 2px #C8C9CE'
+        }}
+      >
         <img
           onClick={() => navigate('/')}
           style={{ cursor: 'pointer' }}
diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx
index c6d529d..0de8e49 100644
--- a/src/components/ToolHeader.tsx
+++ b/src/components/ToolHeader.tsx
@@ -3,11 +3,13 @@ import Typography from '@mui/material/Typography';
 import ToolBreadcrumb from './ToolBreadcrumb';
 import { capitalizeFirstLetter } from '../utils/string';
 import Grid from '@mui/material/Grid';
+import { Icon, IconifyIcon } from '@iconify/react';
+import { categoriesColors } from '../config/uiConfig';
 
 interface ToolHeaderProps {
   title: string;
   description: string;
-  image?: string;
+  icon?: IconifyIcon;
   type: string;
 }
 
@@ -15,17 +17,32 @@ function ToolLinks() {
   return (
     <Grid container spacing={2} mt={1}>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#tool">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#tool"
+        >
           Use This Tool
         </Button>
       </Grid>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#examples">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#examples"
+        >
           See Examples
         </Button>
       </Grid>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#tour">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#tour"
+        >
           Learn How to Use
         </Button>
       </Grid>
@@ -34,7 +51,7 @@ function ToolLinks() {
 }
 
 export default function ToolHeader({
-  image,
+  icon,
   title,
   description,
   type
@@ -60,10 +77,18 @@ export default function ToolHeader({
           <ToolLinks />
         </Grid>
 
-        {image && (
+        {icon && (
           <Grid item xs={12} md={4}>
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-              <img width={'250'} src={image} />
+              <Icon
+                icon={icon}
+                fontSize={'250'}
+                color={
+                  categoriesColors[
+                    Math.floor(Math.random() * categoriesColors.length)
+                  ]
+                }
+              />
             </Box>
           </Grid>
         )}
diff --git a/src/components/ToolLayout.tsx b/src/components/ToolLayout.tsx
index 4737ea1..2099737 100644
--- a/src/components/ToolLayout.tsx
+++ b/src/components/ToolLayout.tsx
@@ -6,17 +6,18 @@ import Separator from './Separator';
 import AllTools from './allTools/AllTools';
 import { getToolsByCategory } from '@tools/index';
 import { capitalizeFirstLetter } from '../utils/string';
+import { IconifyIcon } from '@iconify/react';
 
 export default function ToolLayout({
   children,
   title,
   description,
-  image,
+  icon,
   type
 }: {
   title: string;
   description: string;
-  image?: string;
+  icon?: IconifyIcon | string;
   type: string;
   children: ReactNode;
 }) {
@@ -36,6 +37,7 @@ export default function ToolLayout({
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}
+      sx={{ backgroundColor: '#F5F5FA' }}
     >
       <Helmet>
         <title>{`${title} - Omni Tools`}</title>
@@ -44,7 +46,7 @@ export default function ToolLayout({
         <ToolHeader
           title={title}
           description={description}
-          image={image}
+          icon={icon}
           type={type}
         />
         {children}
diff --git a/src/components/input/ToolFileInput.tsx b/src/components/input/ToolFileInput.tsx
index 9f13675..e1287d0 100644
--- a/src/components/input/ToolFileInput.tsx
+++ b/src/components/input/ToolFileInput.tsx
@@ -83,7 +83,8 @@ export default function ToolFileInput({
           height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
-          boxShadow: '5'
+          boxShadow: '5',
+          bgcolor: 'white'
         }}
       >
         {preview ? (
diff --git a/src/components/input/ToolTextInput.tsx b/src/components/input/ToolTextInput.tsx
index 6222db6..319c942 100644
--- a/src/components/input/ToolTextInput.tsx
+++ b/src/components/input/ToolTextInput.tsx
@@ -50,7 +50,14 @@ export default function ToolTextInput({
         fullWidth
         multiline
         rows={10}
-        inputProps={{ 'data-testid': 'text-input' }}
+        sx={{
+          '&.MuiTextField-root': {
+            backgroundColor: 'white'
+          }
+        }}
+        inputProps={{
+          'data-testid': 'text-input'
+        }}
       />
       <InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
       <input
diff --git a/src/components/result/ToolFileResult.tsx b/src/components/result/ToolFileResult.tsx
index a76a04f..e9b7ca6 100644
--- a/src/components/result/ToolFileResult.tsx
+++ b/src/components/result/ToolFileResult.tsx
@@ -67,7 +67,8 @@ export default function ToolFileResult({
           height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
-          boxShadow: '5'
+          boxShadow: '5',
+          bgcolor: 'white'
         }}
       >
         {preview && (
diff --git a/src/components/result/ToolTextResult.tsx b/src/components/result/ToolTextResult.tsx
index 9baf4cc..1d85720 100644
--- a/src/components/result/ToolTextResult.tsx
+++ b/src/components/result/ToolTextResult.tsx
@@ -41,6 +41,11 @@ export default function ToolTextResult({
         value={replaceSpecialCharacters(value)}
         fullWidth
         multiline
+        sx={{
+          '&.MuiTextField-root': {
+            backgroundColor: 'white'
+          }
+        }}
         rows={10}
         inputProps={{ 'data-testid': 'text-result' }}
       />
diff --git a/src/config/uiConfig.ts b/src/config/uiConfig.ts
index a9455c0..b5bc07e 100644
--- a/src/config/uiConfig.ts
+++ b/src/config/uiConfig.ts
@@ -1,2 +1,8 @@
 export const globalInputHeight = 300;
 export const globalDescriptionFontSize = 12;
+export const categoriesColors: string[] = [
+  '#8FBC5D',
+  '#3CB6E2',
+  '#FFD400',
+  '#AB6993'
+];
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index ba122b0..38c65e0 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -5,7 +5,7 @@ import Categories from './Categories';
 export default function Home() {
   return (
     <Box
-      padding={{ xs: 1, md: 3, lg: 5 }}
+      padding={{ xs: 1, md: 3, lg: 5, backgroundColor: '#F5F5FA' }}
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}
diff --git a/src/pages/tools-by-category/index.tsx b/src/pages/tools-by-category/index.tsx
index 5687703..1201533 100644
--- a/src/pages/tools-by-category/index.tsx
+++ b/src/pages/tools-by-category/index.tsx
@@ -5,14 +5,15 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 import { getToolsByCategory } from '../../tools';
 import Hero from 'components/Hero';
 import { capitalizeFirstLetter } from '../../utils/string';
-import toolsPng from '@assets/tools.png';
+import { Icon } from '@iconify/react';
+import { categoriesColors } from 'config/uiConfig';
 
 export default function Home() {
   const navigate = useNavigate();
   const theme = useTheme();
   const { categoryName } = useParams();
   return (
-    <Box>
+    <Box sx={{ backgroundColor: '#F5F5FA' }}>
       <Box
         padding={{ xs: 1, md: 3, lg: 5 }}
         display={'flex'}
@@ -32,10 +33,12 @@ export default function Home() {
         <Grid container spacing={2} mt={2}>
           {getToolsByCategory()
             .find(({ type }) => type === categoryName)
-            ?.tools?.map((tool) => (
+            ?.tools?.map((tool, index) => (
               <Grid item xs={12} md={6} lg={4} key={tool.path}>
                 <Stack
                   sx={{
+                    backgroundColor: 'white',
+                    boxShadow: '5px 4px 2px #E9E9ED',
                     cursor: 'pointer',
                     '&:hover': {
                       backgroundColor: theme.palette.background.default // Change this to your desired hover color
@@ -45,10 +48,14 @@ export default function Home() {
                   direction={'row'}
                   spacing={2}
                   padding={2}
-                  border={1}
+                  border={`1px solid ${theme.palette.background.default}`}
                   borderRadius={2}
                 >
-                  <img width={100} src={tool.image ?? toolsPng} />
+                  <Icon
+                    icon={tool.icon ?? 'ph:compass-tool-thin'}
+                    fontSize={'100px'}
+                    color={categoriesColors[index % categoriesColors.length]}
+                  />
                   <Box>
                     <Link to={'/' + tool.path}>{tool.name}</Link>
                     <Typography sx={{ mt: 2 }}>
diff --git a/src/pages/tools/image/png/change-colors-in-png/meta.ts b/src/pages/tools/image/png/change-colors-in-png/meta.ts
index bdf461c..d2e92ef 100644
--- a/src/pages/tools/image/png/change-colors-in-png/meta.ts
+++ b/src/pages/tools/image/png/change-colors-in-png/meta.ts
@@ -1,11 +1,10 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-import image from '@assets/image.png';
 
 export const tool = defineTool('png', {
   name: 'Change colors in png',
   path: 'change-colors-in-png',
-  image,
+  icon: 'cil:color-fill',
   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',
diff --git a/src/pages/tools/image/png/compress-png/meta.ts b/src/pages/tools/image/png/compress-png/meta.ts
index 7dbafb6..1e84c1f 100644
--- a/src/pages/tools/image/png/compress-png/meta.ts
+++ b/src/pages/tools/image/png/compress-png/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('png', {
   name: 'Compress png',
   path: 'compress-png',
-  // image,
+  icon: 'material-symbols-light:compress',
   description:
     'This is a program that compresses PNG pictures. As soon as you paste your PNG picture in the input area, the program will compress it and show the result in the output area. In the options, you can adjust the compression level, as well as find the old and new picture file sizes.',
   shortDescription: 'Quicly compress a PNG',
diff --git a/src/pages/tools/image/png/convert-jgp-to-png/meta.ts b/src/pages/tools/image/png/convert-jgp-to-png/meta.ts
index abcb39d..b7c8da7 100644
--- a/src/pages/tools/image/png/convert-jgp-to-png/meta.ts
+++ b/src/pages/tools/image/png/convert-jgp-to-png/meta.ts
@@ -1,11 +1,10 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-import image from '@assets/image.png';
 
 export const tool = defineTool('png', {
   name: 'Convert JPG to PNG',
   path: 'convert-jgp-to-png',
-  image,
+  icon: 'ph:file-jpg-thin',
   description:
     'Quickly convert your JPG images to PNG. Just import your PNG image in the editor on the left',
   shortDescription: 'Quickly convert your JPG images to PNG',
diff --git a/src/pages/tools/image/png/create-transparent/meta.ts b/src/pages/tools/image/png/create-transparent/meta.ts
index af2daf3..3ee1a9a 100644
--- a/src/pages/tools/image/png/create-transparent/meta.ts
+++ b/src/pages/tools/image/png/create-transparent/meta.ts
@@ -1,11 +1,10 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-import image from '@assets/image.png';
 
 export const tool = defineTool('png', {
   name: 'Create transparent PNG',
   path: 'create-transparent',
-  image,
+  icon: 'mdi:circle-transparent',
   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.",
diff --git a/src/pages/tools/list/find-most-popular/meta.ts b/src/pages/tools/list/find-most-popular/meta.ts
index f973acb..4a03c7c 100644
--- a/src/pages/tools/list/find-most-popular/meta.ts
+++ b/src/pages/tools/list/find-most-popular/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Find most popular',
   path: 'find-most-popular',
-  // image,
+  icon: 'material-symbols-light:query-stats',
   description: '',
   shortDescription: '',
   keywords: ['find', 'most', 'popular'],
diff --git a/src/pages/tools/list/find-unique/meta.ts b/src/pages/tools/list/find-unique/meta.ts
index aba8456..ee38e9d 100644
--- a/src/pages/tools/list/find-unique/meta.ts
+++ b/src/pages/tools/list/find-unique/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Find unique',
   path: 'find-unique',
-  // image,
+  icon: 'mynaui:one',
   description: '',
   shortDescription: '',
   keywords: ['find', 'unique'],
diff --git a/src/pages/tools/list/group/meta.ts b/src/pages/tools/list/group/meta.ts
index 84bda84..0391c0a 100644
--- a/src/pages/tools/list/group/meta.ts
+++ b/src/pages/tools/list/group/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Group',
   path: 'group',
-  // image,
+  icon: 'pajamas:group',
   description: '',
   shortDescription: '',
   keywords: ['group'],
diff --git a/src/pages/tools/list/reverse/meta.ts b/src/pages/tools/list/reverse/meta.ts
index 3500928..127f810 100644
--- a/src/pages/tools/list/reverse/meta.ts
+++ b/src/pages/tools/list/reverse/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Reverse',
   path: 'reverse',
-  // image,
+  icon: 'proicons:reverse',
   description: '',
   shortDescription: '',
   keywords: ['reverse'],
diff --git a/src/pages/tools/list/rotate/meta.ts b/src/pages/tools/list/rotate/meta.ts
index 07ddfd6..6086301 100644
--- a/src/pages/tools/list/rotate/meta.ts
+++ b/src/pages/tools/list/rotate/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Rotate',
   path: 'rotate',
-  // image,
+  icon: 'material-symbols-light:rotate-right',
   description: '',
   shortDescription: '',
   keywords: ['rotate'],
diff --git a/src/pages/tools/list/shuffle/meta.ts b/src/pages/tools/list/shuffle/meta.ts
index e193363..c94be06 100644
--- a/src/pages/tools/list/shuffle/meta.ts
+++ b/src/pages/tools/list/shuffle/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Shuffle',
   path: 'shuffle',
-  // image,
+  icon: 'material-symbols-light:shuffle',
   description: '',
   shortDescription: '',
   keywords: ['shuffle'],
diff --git a/src/pages/tools/list/sort/meta.ts b/src/pages/tools/list/sort/meta.ts
index 536aa24..b2e7cfc 100644
--- a/src/pages/tools/list/sort/meta.ts
+++ b/src/pages/tools/list/sort/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Sort',
   path: 'sort',
-  // image,
+  icon: 'basil:sort-outline',
   description:
     'This is a super simple browser-based application that sorts items in a list and arranges them in increasing or decreasing order. You can sort the items alphabetically, numerically, or by their length. You can also remove duplicate and empty items, as well as trim individual items that have whitespace around them. You can use any separator character to separate the input list items or alternatively use a regular expression to separate them. Additionally, you can create a new delimiter for the sorted output list.',
   shortDescription: 'Quickly sort a list',
diff --git a/src/pages/tools/list/unwrap/meta.ts b/src/pages/tools/list/unwrap/meta.ts
index c526721..9ae3652 100644
--- a/src/pages/tools/list/unwrap/meta.ts
+++ b/src/pages/tools/list/unwrap/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Unwrap',
   path: 'unwrap',
-  // image,
+  icon: 'mdi:unwrap',
   description: '',
   shortDescription: '',
   keywords: ['unwrap'],
diff --git a/src/pages/tools/number/generate/meta.ts b/src/pages/tools/number/generate/meta.ts
index 1c85aee..a58e227 100644
--- a/src/pages/tools/number/generate/meta.ts
+++ b/src/pages/tools/number/generate/meta.ts
@@ -6,7 +6,7 @@ export const tool = defineTool('number', {
   name: 'Generate numbers',
   path: 'generate',
   shortDescription: 'Quickly calculate a list of integers in your browser',
-  // image,
+  icon: 'lsicon:number-filled',
   description:
     'Quickly calculate a list of integers in your browser. To get your list, just specify the first integer, change value and total count in the options below, and this utility will generate that many integers',
   keywords: ['generate'],
diff --git a/src/pages/tools/number/sum/meta.ts b/src/pages/tools/number/sum/meta.ts
index fc96799..02de1f1 100644
--- a/src/pages/tools/number/sum/meta.ts
+++ b/src/pages/tools/number/sum/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('number', {
   name: 'Number Sum Calculator',
   path: 'sum',
-  // image,
+  icon: 'fluent:autosum-20-regular',
   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',
diff --git a/src/pages/tools/string/join/meta.ts b/src/pages/tools/string/join/meta.ts
index aedfe3f..ce895b4 100644
--- a/src/pages/tools/string/join/meta.ts
+++ b/src/pages/tools/string/join/meta.ts
@@ -1,11 +1,10 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-import image from '@assets/text.png';
 
 export const tool = defineTool('string', {
   path: 'join',
   name: 'Text Joiner',
-  image,
+  icon: 'tabler:arrows-join',
   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',
diff --git a/src/pages/tools/string/split/meta.ts b/src/pages/tools/string/split/meta.ts
index 01acca2..1cd519b 100644
--- a/src/pages/tools/string/split/meta.ts
+++ b/src/pages/tools/string/split/meta.ts
@@ -5,7 +5,7 @@ import image from '@assets/text.png';
 export const tool = defineTool('string', {
   path: 'split',
   name: 'Text splitter',
-  image,
+  icon: 'material-symbols-light:arrow-split',
   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',
diff --git a/src/pages/tools/string/to-morse/meta.ts b/src/pages/tools/string/to-morse/meta.ts
index 78774f5..71aa30f 100644
--- a/src/pages/tools/string/to-morse/meta.ts
+++ b/src/pages/tools/string/to-morse/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('string', {
   name: 'String To morse',
   path: 'to-morse',
-  // image,
+  icon: 'arcticons:morse',
   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',
diff --git a/src/pages/tools/video/gif/change-speed/meta.ts b/src/pages/tools/video/gif/change-speed/meta.ts
index 3abe82a..4beca99 100644
--- a/src/pages/tools/video/gif/change-speed/meta.ts
+++ b/src/pages/tools/video/gif/change-speed/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('gif', {
   name: 'Change speed',
   path: 'change-speed',
-  // image,
+  icon: 'material-symbols-light:speed-outline',
   description:
     'This online utility lets you change the speed of a GIF animation. You can speed it up or slow it down. You can set the same constant delay between all frames or change the delays of individual frames. You can also play both the input and output GIFs at the same time and compare their speeds',
   shortDescription: 'Quickly change GIF speed',
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
index 360a5c7..3c146cc 100644
--- a/src/tools/defineTool.tsx
+++ b/src/tools/defineTool.tsx
@@ -1,11 +1,12 @@
 import ToolLayout from '../components/ToolLayout';
 import React, { JSXElementConstructor, LazyExoticComponent } from 'react';
+import { IconifyIcon } from '@iconify/react';
 
 interface ToolOptions {
   path: string;
   component: LazyExoticComponent<JSXElementConstructor<NonNullable<unknown>>>;
   keywords: string[];
-  image?: string;
+  icon?: IconifyIcon | string;
   name: string;
   description: string;
   shortDescription: string;
@@ -19,7 +20,7 @@ export interface DefinedTool {
   name: string;
   description: string;
   shortDescription: string;
-  image?: string;
+  icon?: IconifyIcon | string;
   keywords: string[];
   component: () => JSX.Element;
 }
@@ -29,7 +30,7 @@ export const defineTool = (
   options: ToolOptions
 ): DefinedTool => {
   const {
-    image,
+    icon,
     path,
     name,
     description,
@@ -42,7 +43,7 @@ export const defineTool = (
     type: basePath,
     path: `${basePath}/${path}`,
     name,
-    image,
+    icon,
     description,
     shortDescription,
     keywords,
@@ -51,7 +52,7 @@ export const defineTool = (
         <ToolLayout
           title={name}
           description={description}
-          image={image}
+          icon={icon}
           type={basePath}
         >
           <Component />