diff --git a/components/AppIcons.tsx b/components/AppIcons.tsx
new file mode 100644
index 0000000..6be0f17
--- /dev/null
+++ b/components/AppIcons.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+export const PastelIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
+    <circle cx="6.5" cy="11.5" r="1" fill="currentColor" />
+    <circle cx="9.5" cy="7.5" r="1" fill="currentColor" />
+    <circle cx="14.5" cy="7.5" r="1" fill="currentColor" />
+    <circle cx="17.5" cy="11.5" r="1" fill="currentColor" />
+  </svg>
+);
+
+export const UnitsIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+  </svg>
+);
+
+export const FigletIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.5 13h6" />
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m2 16 4.5-9 4.5 9" />
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 16V7" />
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m14 11 4-4 4 4" />
+  </svg>
+);
+
+export const MediaIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+  </svg>
+);
diff --git a/components/Stats.tsx b/components/Stats.tsx
index 2250671..453e74a 100644
--- a/components/Stats.tsx
+++ b/components/Stats.tsx
@@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
 
 const stats = [
   {
-    number: '3',
+    number: '4',
     label: 'Tools',
     icon: (
       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/components/ToolsGrid.tsx b/components/ToolsGrid.tsx
index 8c98570..539267f 100644
--- a/components/ToolsGrid.tsx
+++ b/components/ToolsGrid.tsx
@@ -2,6 +2,7 @@
 
 import { motion } from 'framer-motion';
 import ToolCard from './ToolCard';
+import { PastelIcon, UnitsIcon, FigletIcon, MediaIcon } from '@/components/AppIcons';
 
 const tools = [
   {
@@ -11,15 +12,7 @@ const tools = [
     gradient: 'gradient-indigo-purple',
     accentColor: '#a855f7',
     badges: ['Open Source', 'WCAG', 'Free'],
-    icon: (
-      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
-        <circle cx="6.5" cy="11.5" r="1" fill="currentColor" />
-        <circle cx="9.5" cy="7.5" r="1" fill="currentColor" />
-        <circle cx="14.5" cy="7.5" r="1" fill="currentColor" />
-        <circle cx="17.5" cy="11.5" r="1" fill="currentColor" />
-      </svg>
-    ),
+    icon: <PastelIcon className="w-12 h-12 text-white" />,
   },
   {
     title: 'Units',
@@ -28,11 +21,7 @@ const tools = [
     gradient: 'gradient-cyan-purple',
     accentColor: '#2dd4bf',
     badges: ['Open Source', 'Real-time', 'Free'],
-    icon: (
-      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
-      </svg>
-    ),
+    icon: <UnitsIcon className="w-12 h-12 text-white" />,
   },
   {
     title: 'Figlet',
@@ -41,14 +30,7 @@ const tools = [
     gradient: 'gradient-yellow-amber',
     accentColor: '#eab308',
     badges: ['Open Source', 'ASCII Art', 'Free'],
-    icon: (
-      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.5 13h6" />
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m2 16 4.5-9 4.5 9" />
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 16V7" />
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m14 11 4-4 4 4" />
-      </svg>
-    ),
+    icon: <FigletIcon className="w-12 h-12 text-white" />,
   },
   {
     title: 'Media',
@@ -57,11 +39,7 @@ const tools = [
     gradient: 'gradient-green-teal',
     accentColor: '#10b981',
     badges: ['Open Source', 'Converter', 'Free'],
-    icon: (
-      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-      </svg>
-    ),
+    icon: <MediaIcon className="w-12 h-12 text-white" />,
   },
 ];
 
diff --git a/components/layout/AppSidebar.tsx b/components/layout/AppSidebar.tsx
index 41bb32a..69f7833 100644
--- a/components/layout/AppSidebar.tsx
+++ b/components/layout/AppSidebar.tsx
@@ -17,6 +17,7 @@ import { cn } from '@/lib/utils/cn';
 import Logo from '@/components/Logo';
 import { useSidebar } from './SidebarProvider';
 import { Button } from '@/components/ui/button';
+import { PastelIcon, UnitsIcon, FigletIcon, MediaIcon } from '@/components/AppIcons';
 
 interface NavItem {
   title: string;
@@ -30,38 +31,6 @@ interface NavGroup {
   items: NavItem[];
 }
 
-const PastelIcon = (props: any) => (
-  <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
-    <circle cx="6.5" cy="11.5" r="1" fill="currentColor" />
-    <circle cx="9.5" cy="7.5" r="1" fill="currentColor" />
-    <circle cx="14.5" cy="7.5" r="1" fill="currentColor" />
-    <circle cx="17.5" cy="11.5" r="1" fill="currentColor" />
-  </svg>
-);
-
-const UnitsIcon = (props: any) => (
-  <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
-  </svg>
-);
-
-const FigletIcon = (props: any) => (
-  <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.5 13h6" />
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m2 16 4.5-9 4.5 9" />
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 16V7" />
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m14 11 4-4 4 4" />
-  </svg>
-);
-
-
-const MediaIcon = (props: any) => (
-  <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-  </svg>
-);
-
 const navigation: NavGroup[] = [
   {
     label: 'Toolkit',