diff --git a/src/lib/Icon.svelte b/src/lib/Icon.svelte
index ac34fdc..bae3011 100644
--- a/src/lib/Icon.svelte
+++ b/src/lib/Icon.svelte
@@ -2,19 +2,22 @@
 	export let icon;
 	export let info;
 	export let activity;
-
 	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
 
+	const dispatch = createEventDispatcher();
 	function handleMouseover() {
 		dispatch('mouseover', info);
 	}
+	function handleClick() {
+		dispatch('click', { icon, info });
+	}
 </script>
 
 <div 
 	class="p-3 cursor-pointer text-center hover:bg-neutral-600 {$activity ? "text-amber-500 animate-pulse" : "hover:text-gray-100"}"
 	style="animation-duration: 0.5s"
 	on:mouseenter={handleMouseover}
-	>
-		<i class='{icon} fa-xl'></i>
+	on:click={handleClick}
+>
+	<i class='{icon} fa-xl'></i>
 </div>
diff --git a/src/lib/SideBar.svelte b/src/lib/SideBar.svelte
index 8d7ee33..4efd626 100644
--- a/src/lib/SideBar.svelte
+++ b/src/lib/SideBar.svelte
@@ -8,8 +8,7 @@
 	import PostsTab from './PostsTab.svelte';
 	import DiscordTab from './DiscordTab.svelte';
 	import GitHubTab from './GitHubTab.svelte';
-	import { cpuActivity, diskActivity, aiActivity } from './activities.js'
-
+	import { cpuActivity, diskActivity, aiActivity } from './activities.js';
 	const icons = [
 		{ icon: 'fas fa-info-circle', info: 'Information', activity: null },
 		{ icon: 'fas fa-wifi', info: 'Networking', activity: null },
@@ -21,21 +20,40 @@
 		{ icon: 'fab fa-discord', info: 'Discord', activity: null },
 		{ icon: 'fab fa-github', info: 'GitHub', activity: null },
 	];
-
-	let activeInfo = null;
+	let activeInfo = null; // Tracks currently visible info.
+	let hideTimeout = 0; // Timeout for hiding info panel.
 
 	function showInfo(info) {
+		clearTimeout(hideTimeout);
+		hideTimeout = 0;
 		activeInfo = info;
 	}
-
 	function hideInfo() {
-		activeInfo = null;
+		// Prevents multiple timers and hides the info panel after 400ms unless interrupted.
+		clearTimeout(hideTimeout);
+		hideTimeout = setTimeout(() => {
+			activeInfo = null;
+			hideTimeout = 0;
+		}, 400);
+	}
+	function handleMouseEnterPanel() {
+		clearTimeout(hideTimeout);
+		hideTimeout = 0;
+	}
+	// Toggles the info panel for the clicked icon.
+	function handleClick(icon) {
+		// Hides the panel if the icon is active. Otherwise, shows the panel with info.
+		if (activeInfo === icon.info) {
+			activeInfo = null;
+		} else {
+			activeInfo = icon.info;
+		}
 	}
 
 	export let handleTool;
 </script>
 
-<div class="flex flex-row w-14 h-full bg-neutral-700" on:mouseleave={hideInfo}>
+<div class="flex flex-row w-14 h-full bg-neutral-700" >
 	<div class="flex flex-col shrink-0 w-14 text-gray-300">
 		{#each icons as i}
 			{#if i}
@@ -44,13 +62,19 @@
 					info={i.info}
 					activity={i.activity}
 					on:mouseover={(e) => showInfo(e.detail)}
+					on:click={() => handleClick(i)}
 				/>
 			{:else}
-				<div class="grow" on:mouseover={(e) => showInfo(null)}></div>
+				<div class="grow" on:mouseenter={handleMouseEnterPanel}></div>
 			{/if}
 		{/each}
 	</div>
-	<div class="flex flex-col gap-5 shrink-0 w-80 h-full z-10 p-2 bg-neutral-600 text-gray-100 opacity-95" class:hidden={!activeInfo}>
+	<div
+		class="flex flex-col gap-5 shrink-0 w-80 h-full z-10 p-2 bg-neutral-600 text-gray-100 opacity-95"
+		class:hidden={!activeInfo}
+		on:mouseenter={handleMouseEnterPanel}
+		on:mouseleave={hideInfo}
+	>
 		{#if activeInfo === 'Information'}
 			<InformationTab>
 				<slot></slot>
@@ -72,6 +96,7 @@
 		{:else}
 			<p>TODO: {activeInfo}</p>
 		{/if}
+
 		<div class="mt-auto text-sm text-gray-300">
 			<div class="pt-1 pb-1">
 				<a href="https://cheerpx.io/" target="_blank">
@@ -81,7 +106,7 @@
 			</div>
 			<hr class="border-t border-solid border-gray-300">
 			<div class="pt-1 pb-1">
-				<a href="https://leaningtech.com/" target="”_blank”">© 2022-2024 Leaning Technologies</a>
+				<a href="https://leaningtech.com/" target="”_blank”">© 2022-2025 Leaning Technologies</a>
 			</div>
 		</div>
 	</div>