diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 962d2412e..683c4dfa1 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -355,7 +355,14 @@ export const DocsNav = ({
           </svg>
         </div>
         <div
-          className={classnames('ml-6', { hidden: !active.getDocs })}
+          className={classnames(
+            'ml-6',
+            'transition-all duration-500 ease-in-out',
+            {
+              'max-h-0 opacity-0 overflow-hidden': !active.getDocs,
+              'max-h-80 opacity-100': active.getDocs,
+            },
+          )}
           id='overview'
         >
           <DocLink
@@ -431,7 +438,14 @@ export const DocsNav = ({
           </svg>
         </div>
         <div
-          className={classnames('ml-6', { hidden: !active.getStarted })}
+          className={classnames(
+            'ml-6',
+            'transition-all duration-500 ease-in-out',
+            {
+              'max-h-0 opacity-0 overflow-hidden': !active.getStarted,
+              'max-h-80 opacity-100': active.getStarted,
+            },
+          )}
           id='getStarted'
         >
           <DocLink uri='/learn' label='Overview' setOpen={setOpen} />
@@ -498,7 +512,14 @@ export const DocsNav = ({
           </svg>
         </div>
         <div
-          className={classnames('ml-6', { hidden: !active.getReference })}
+          className={classnames(
+            'ml-6',
+            'transition-all duration-500 ease-in-out',
+            {
+              'max-h-0 opacity-0 overflow-hidden': !active.getReference,
+              'max-h-80 overflow-y-auto opacity-100': active.getReference,
+            },
+          )}
           id='reference'
         >
           <DocLink
@@ -687,7 +708,14 @@ export const DocsNav = ({
           </svg>
         </div>
         <div
-          className={classnames('ml-6', { hidden: !active.getSpecification })}
+          className={classnames(
+            'ml-6',
+            'transition-all duration-500 ease-in-out',
+            {
+              'max-h-0 opacity-0 overflow-hidden': !active.getSpecification,
+              'max-h-80 opacity-100': active.getSpecification,
+            },
+          )}
           id='specification'
         >
           <DocLink uri='/specification' label='Overview' setOpen={setOpen} />
diff --git a/pages/tools/components/Sidebar.tsx b/pages/tools/components/Sidebar.tsx
index 5a1c75717..e53e78a8e 100644
--- a/pages/tools/components/Sidebar.tsx
+++ b/pages/tools/components/Sidebar.tsx
@@ -1,5 +1,9 @@
 import React, { Dispatch, SetStateAction, useRef } from 'react';
-import FilterIcon from '~/public/icons/filter.svg';
+import LanguageIcon from '~/public/icons/language.svg';
+import ToolingIcon from '~/public/icons/tooling.svg';
+import EnvironmentIcon from '~/public/icons/environment.svg';
+import DialectIcon from '~/public/icons/dialect.svg';
+import LicenseIcon from '~/public/icons/license.svg';
 import DropdownMenu from './ui/DropdownMenu';
 import Checkbox from './ui/Checkbox';
 import SearchBar from './SearchBar';
@@ -8,6 +12,14 @@ import type { Transform } from '../hooks/useToolsTransform';
 import type { FilterCriteriaFields } from '../index.page';
 import { postAnalytics } from '../lib/postAnalytics';
 
+const filterIcons = {
+  languages: LanguageIcon,
+  toolingTypes: ToolingIcon,
+  environments: EnvironmentIcon,
+  drafts: DialectIcon,
+  licenses: LicenseIcon,
+};
+
 interface SidebarProps {
   filterCriteria: Record<FilterCriteriaFields, string[]>;
   transform: Transform;
@@ -79,8 +91,14 @@ export default function Sidebar({
         <SearchBar transform={transform} />
         {filters.map(({ label, accessorKey }) => {
           const checkedValues = transform[accessorKey as keyof Transform] || [];
+          const IconComponent =
+            filterIcons[accessorKey as keyof typeof filterIcons];
           return (
-            <DropdownMenu key={accessorKey} label={label} icon={<FilterIcon />}>
+            <DropdownMenu
+              key={accessorKey}
+              label={label}
+              icon={IconComponent && <IconComponent />}
+            >
               {filterCriteria[accessorKey as FilterCriteriaFields]
                 ?.map(String)
                 .map((filterOption) => (
diff --git a/pages/tools/components/ui/DropdownMenu.tsx b/pages/tools/components/ui/DropdownMenu.tsx
index 2ceaa0483..7352b179e 100644
--- a/pages/tools/components/ui/DropdownMenu.tsx
+++ b/pages/tools/components/ui/DropdownMenu.tsx
@@ -26,7 +26,7 @@ export default function DropdownMenu({
   }, [router]);
 
   return (
-    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded'>
+    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded cursor-pointer'>
       <div
         className='w-full flex justify-between items-center align-middle'
         onClick={() => {
@@ -34,7 +34,7 @@ export default function DropdownMenu({
         }}
       >
         {React.cloneElement(icon, {
-          className: 'mr-2',
+          className: 'mr-2 ml-2',
         })}
         <div className='text-slate-900 dark:text-slate-300 font-bold mr-auto'>
           {label}
@@ -64,8 +64,11 @@ export default function DropdownMenu({
       <div
         className={classnames(
           'tools-dropdown-menu',
-          'ml-0 mt-4 overflow-x-hidden overscroll-y-auto max-h-80',
-          { hidden: !isDropdownOpen },
+          'ml-0 mt-0 overflow-hidden transition-all duration-500 ease-in-out',
+          {
+            'max-h-0 opacity-0 invisible': !isDropdownOpen,
+            'max-h-80 overflow-y-auto opacity-100 visible': isDropdownOpen,
+          },
         )}
       >
         {children}
diff --git a/public/icons/dialect.svg b/public/icons/dialect.svg
new file mode 100644
index 000000000..45d952058
--- /dev/null
+++ b/public/icons/dialect.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" viewBox="0 0 32 32" width="22" height="20" id="icon" xmlns="http://www.w3.org/2000/svg" ><g id="SVGRepo_bgCarrier" stroke-width="5"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <defs> <style> .cls-1 { fill: none; } </style> </defs> <path d="M16,2V4H26V19h2V4a2.0023,2.0023,0,0,0-2-2Z" transform="translate(0 0)"></path> <path d="M11,7V9H21V24h2V9a2.0023,2.0023,0,0,0-2-2Z" transform="translate(0 0)"></path> <path d="M6,12H16a2.0023,2.0023,0,0,1,2,2V28a2.0023,2.0023,0,0,1-2,2H6a2.0023,2.0023,0,0,1-2-2V14A2.0023,2.0023,0,0,1,6,12Zm10,2L6,13.9988V28H16Z" transform="translate(0 0)"></path> <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1" width="32" height="32"></rect> </g></svg>
diff --git a/public/icons/environment.svg b/public/icons/environment.svg
new file mode 100644
index 000000000..976203d0a
--- /dev/null
+++ b/public/icons/environment.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="22" height="20"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4 17L10 11L4 5M12 19H20" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
diff --git a/public/icons/language.svg b/public/icons/language.svg
new file mode 100644
index 000000000..bbc79105e
--- /dev/null
+++ b/public/icons/language.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="30"><g id="SVGRepo_bgCarrier" stroke-width="8"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9523 6.2635L10.4523 18.2635L9.04784 17.7368L13.5478 5.73682L14.9523 6.2635ZM19.1894 12.0001L15.9698 8.78042L17.0304 7.71976L21.3108 12.0001L17.0304 16.2804L15.9698 15.2198L19.1894 12.0001ZM8.03032 15.2198L4.81065 12.0002L8.03032 8.78049L6.96966 7.71983L2.68933 12.0002L6.96966 16.2805L8.03032 15.2198Z" fill="currentcolor"></path> </g></svg>
diff --git a/public/icons/license.svg b/public/icons/license.svg
new file mode 100644
index 000000000..cbc1dc79d
--- /dev/null
+++ b/public/icons/license.svg
@@ -0,0 +1,2 @@
+<svg fill="currentcolor" width="22" height="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 305.406 305.406" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <g> <path d="M77.202,127.888c0,4.971,4.029,9,9,9h130.575c4.971,0,9-4.029,9-9s-4.029-9-9-9H86.202 C81.231,118.888,77.202,122.917,77.202,127.888z"></path> <path d="M86.202,168.538h130.575c4.971,0,9-4.029,9-9c0-4.971-4.029-9-9-9H86.202c-4.971,0-9,4.029-9,9 C77.202,164.509,81.231,168.538,86.202,168.538z"></path> <path d="M86.202,60.538h44.341c4.971,0,9-4.029,9-9c0-4.971-4.029-9-9-9H86.202c-4.971,0-9,4.029-9,9 C77.202,56.509,81.231,60.538,86.202,60.538z"></path> <path d="M149.503,242.374H86.202c-4.971,0-9,4.029-9,9c0,4.971,4.029,9,9,9h63.301c4.971,0,9-4.029,9-9 S154.474,242.374,149.503,242.374z"></path> <path d="M149.503,214.512H86.202c-4.971,0-9,4.029-9,9c0,4.971,4.029,9,9,9h63.301c4.971,0,9-4.029,9-9 C158.503,218.541,154.474,214.512,149.503,214.512z"></path> <path d="M267.067,70.613L199.091,2.636C197.402,0.948,195.113,0,192.727,0H44.703c-4.971,0-9,4.029-9,9v287.406 c0,4.971,4.029,9,9,9h216c4.971,0,9-4.029,9-9V76.977C269.703,74.59,268.755,72.301,267.067,70.613z M199.727,28.728 l41.249,41.249h-41.249V28.728z M251.703,287.406h-198V18h128.023v60.977c0,4.971,4.029,9,9,9h60.977V287.406z"></path> <path d="M199.976,208.512c-16.078,0-29.158,13.081-29.158,29.159s13.08,29.158,29.158,29.158s29.158-13.08,29.158-29.158 S216.054,208.512,199.976,208.512z M199.976,248.829c-6.152,0-11.158-5.005-11.158-11.158c0-6.153,5.006-11.159,11.158-11.159 c6.152,0,11.158,5.006,11.158,11.159C211.134,243.824,206.128,248.829,199.976,248.829z"></path> </g> </g> </g> </g></svg>
+
diff --git a/public/icons/tooling.svg b/public/icons/tooling.svg
new file mode 100644
index 000000000..7e32827d1
--- /dev/null
+++ b/public/icons/tooling.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentcolor" width="22" height="20"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.773 3.485l-.78-.184-2.108 2.096-1.194-1.216 2.056-2.157-.18-.792a4.42 4.42 0 0 0-1.347-.228 3.64 3.64 0 0 0-1.457.28 3.824 3.824 0 0 0-1.186.84 3.736 3.736 0 0 0-.875 1.265 3.938 3.938 0 0 0 0 2.966 335.341 335.341 0 0 0-6.173 6.234c-.21.275-.31.618-.284.963a1.403 1.403 0 0 0 .464.967c.124.135.272.247.437.328.17.075.353.118.538.127.316-.006.619-.126.854-.337 1.548-1.457 4.514-4.45 6.199-6.204.457.194.948.294 1.444.293a3.736 3.736 0 0 0 2.677-1.133 3.885 3.885 0 0 0 1.111-2.73 4.211 4.211 0 0 0-.196-1.378zM2.933 13.928a.31.31 0 0 1-.135.07.437.437 0 0 1-.149 0 .346.346 0 0 1-.144-.057.336.336 0 0 1-.114-.11c-.14-.143-.271-.415-.14-.568 1.37-1.457 4.191-4.305 5.955-6.046.1.132.21.258.328.376.118.123.245.237.38.341-1.706 1.75-4.488 4.564-5.98 5.994zm11.118-9.065c.002.765-.296 1.5-.832 2.048a2.861 2.861 0 0 1-4.007 0 2.992 2.992 0 0 1-.635-3.137A2.748 2.748 0 0 1 10.14 2.18a2.76 2.76 0 0 1 1.072-.214h.254L9.649 3.839v.696l1.895 1.886h.66l1.847-1.816v.258zM3.24 6.688h1.531l.705.717.678-.674-.665-.678V6.01l.057-1.649-.22-.437-2.86-1.882-.591.066-.831.849-.066.599 1.838 2.918.424.215zm-.945-3.632L4.609 4.58 4.57 5.703H3.494L2.002 3.341l.293-.285zm7.105 6.96l.674-.673 3.106 3.185a1.479 1.479 0 0 1 0 2.039 1.404 1.404 0 0 1-1.549.315 1.31 1.31 0 0 1-.437-.315l-3.142-3.203.679-.678 3.132 3.194a.402.402 0 0 0 .153.105.477.477 0 0 0 .359 0 .403.403 0 0 0 .153-.105.436.436 0 0 0 .1-.153.525.525 0 0 0 .036-.184.547.547 0 0 0-.035-.184.436.436 0 0 0-.1-.153L9.4 10.016z"></path></g></svg>