diff --git a/src/lib/CpuTab.svelte b/src/lib/CpuTab.svelte
index 59bbaa1..ee98257 100644
--- a/src/lib/CpuTab.svelte
+++ b/src/lib/CpuTab.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <h1 class="text-lg font-bold">Engine</h1>
-<PanelButton buttonIcon="assets/cheerpx.svg" clickUrl="https://cheerpx.io/docs" buttonText="Explore CheerpX">
+<PanelButton buttonImage="assets/cheerpx.svg" clickUrl="https://cheerpx.io/docs" buttonText="Explore CheerpX">
 </PanelButton>
 <p><span class="font-bold">Load: </span>{$cpuPercentage}%</p>
 <p>CheerpX is a x86 virtualization engine in WebAssembly</p>
diff --git a/src/lib/DiscordTab.svelte b/src/lib/DiscordTab.svelte
index 5abb23d..8214352 100644
--- a/src/lib/DiscordTab.svelte
+++ b/src/lib/DiscordTab.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <h1 class="text-lg font-bold">Discord</h1>
-<PanelButton buttonIcon="assets/discord-mark-blue.svg" clickUrl="https://discord.gg/yTNZgySKGa" buttonText="Join our Discord">
+<PanelButton buttonImage="assets/discord-mark-blue.svg" clickUrl="https://discord.gg/yTNZgySKGa" buttonText="Join our Discord">
 	<i class='fas fa-circle fa-xs ml-auto text-green-500'></i>
 	<span class="ml-1"><DiscordPresenceCount /></span>
 </PanelButton>
diff --git a/src/lib/GitHubTab.svelte b/src/lib/GitHubTab.svelte
index d2dfa30..ec0fd37 100644
--- a/src/lib/GitHubTab.svelte
+++ b/src/lib/GitHubTab.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <h1 class="text-lg font-bold">GitHub</h1>
-<PanelButton buttonIcon="assets/github-mark-white.svg" clickUrl="https://github.com/leaningtech/webvm" buttonText="GitHub repo">
+<PanelButton buttonImage="assets/github-mark-white.svg" clickUrl="https://github.com/leaningtech/webvm" buttonText="GitHub repo">
 	<i class='fas fa-star fa-xs ml-auto'></i>
 	<span class="ml-1"><GitHubStarCount repo="leaningtech/webvm"/></span>
 </PanelButton>
diff --git a/src/lib/NetworkingTab.svelte b/src/lib/NetworkingTab.svelte
index 8410561..3f3ae1e 100644
--- a/src/lib/NetworkingTab.svelte
+++ b/src/lib/NetworkingTab.svelte
@@ -99,7 +99,7 @@
 	}
 </script>
 <h1 class="text-lg font-bold">Networking</h1>
-<PanelButton buttonIcon="assets/tailscale.svg" clickUrl={getClickUrl($connectionState)} clickHandler={getClickHandler($connectionState)} rightClickHandler={getRightClickHandler($connectionState)} buttonTooltip={getButtonTooltip($connectionState)} buttonText={getButtonText($connectionState)}>
+<PanelButton buttonImage="assets/tailscale.svg" clickUrl={getClickUrl($connectionState)} clickHandler={getClickHandler($connectionState)} rightClickHandler={getRightClickHandler($connectionState)} buttonTooltip={getButtonTooltip($connectionState)} buttonText={getButtonText($connectionState)}>
 	{#if $connectionState == "CONNECTED"}
 		<i class='fas fa-circle fa-xs ml-auto {$exitNode ? 'text-green-500' : 'text-amber-500'}' title={$exitNode ? 'Ready' : 'No exit node'}></i>
 	{/if}
diff --git a/src/lib/PanelButton.svelte b/src/lib/PanelButton.svelte
index 3caa9ac..61952e7 100644
--- a/src/lib/PanelButton.svelte
+++ b/src/lib/PanelButton.svelte
@@ -3,8 +3,12 @@
 	export let clickHandler = null;
 	export let rightClickHandler = null;
 	export let buttonTooltip = null;
+	export let buttonImage = null;
 	export let buttonText;
-	export let buttonIcon;
 </script>
 
-<a href={clickUrl} target="_blank" on:click={clickHandler} on:contextmenu={rightClickHandler}><p class="flex flex-row items-center bg-neutral-700 p-2 rounded-md shadow-md shadow-neutral-900 {(clickUrl != null || clickHandler != null) ? "hover:bg-neutral-500 cursor-pointer" : ""}" title={buttonTooltip}><img src={buttonIcon} class="inline w-8 h-8"/><span class="ml-1">{buttonText}</span><slot></slot></p></a>
+<a href={clickUrl} target="_blank" on:click={clickHandler} on:contextmenu={rightClickHandler}><p class="flex flex-row items-center bg-neutral-700 p-2 rounded-md shadow-md shadow-neutral-900 {(clickUrl != null || clickHandler != null) ? "hover:bg-neutral-500 cursor-pointer" : ""}" title={buttonTooltip}>
+{#if buttonImage}
+<img src={buttonImage} class="inline w-8 h-8"/>
+{/if}
+<span class="ml-1">{buttonText}</span><slot></slot></p></a>