diff --git a/crates/web/frontend/src/components/docs-button/docs-button.tsx b/crates/web/frontend/src/components/docs-button/docs-button.tsx
new file mode 100644
index 0000000..6eebf6e
--- /dev/null
+++ b/crates/web/frontend/src/components/docs-button/docs-button.tsx
@@ -0,0 +1,28 @@
+import { Book, BookOpen } from "lucide-react";
+import ActionButton from "../action-button/action-button";
+import { type MouseEvent, useCallback } from "react";
+
+interface Props {
+	className?: string;
+}
+
+export const DocsButton = ({ className }: Props) => {
+	const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
+		window.open("/docs", "_blank");
+		e.preventDefault();
+	}, []);
+
+	return (
+		<ActionButton
+			description="Check the GQ documentation"
+			className={className}
+			variant="subtle"
+			onClick={handleClick}
+		>
+			<a href="/docs" rel="noreferrer" target="_blank" className="flex items-center select-none">
+				<BookOpen className="w-3.5 h-3.5 mr-2" />
+				<span className="text-xxs font-normal mt-[2px]">Docs</span>
+			</a>
+		</ActionButton>
+	);
+};
diff --git a/crates/web/frontend/src/components/footer/footer.tsx b/crates/web/frontend/src/components/footer/footer.tsx
index 85a8e0c..6bc1d1e 100644
--- a/crates/web/frontend/src/components/footer/footer.tsx
+++ b/crates/web/frontend/src/components/footer/footer.tsx
@@ -3,6 +3,7 @@ import { LinkEditor } from "../link-editor/link-editor";
 import ShortcutPopup from "../shortcut-popup/shortcut-popup";
 import StarCount from "../star-count/star-count";
 import { WebAssemblyBadge } from "../web-assembly-badge/web-assembly-badge";
+import { DocsButton } from "../docs-button/docs-button";
 
 interface FooterProps {
 	linkEditors: boolean;
@@ -22,6 +23,7 @@ const Footer = ({ linkEditors, handleToggleLinked, className }: FooterProps) =>
 				/>
 			</div>
 			<div className="flex">
+				<DocsButton className="h-full px-4" />
 				<StarCount className="h-full px-4" />
 				<WebAssemblyBadge className="h-full px-4" />
 			</div>
diff --git a/crates/web/frontend/src/components/left-sidebar/left-sidebar.tsx b/crates/web/frontend/src/components/left-sidebar/left-sidebar.tsx
index 4c1ade4..369f0fd 100644
--- a/crates/web/frontend/src/components/left-sidebar/left-sidebar.tsx
+++ b/crates/web/frontend/src/components/left-sidebar/left-sidebar.tsx
@@ -2,7 +2,7 @@ import { useOnboarding } from "@/hooks/use-onboarding";
 import { cn, isMac } from "@/lib/utils";
 import type { Data } from "@/model/data";
 import type FileType from "@/model/file-type";
-import { Book, History, Settings, Share } from "lucide-react";
+import { Album, Book, BookMarked, History, Settings, Share } from "lucide-react";
 import { type MutableRefObject, useCallback, useEffect, useState } from "react";
 import ActionButton from "../action-button/action-button";
 import ExamplesTab from "../examples-tab/examples-tab";
@@ -115,7 +115,7 @@ export const LeftSidebar = ({
 						variant="subtle"
 						onClick={() => handleClick("examples")}
 					>
-						<Book
+						<BookMarked
 							className={cn(
 								"w-4 h-4 transition-opacity",
 								selectedTab !== "examples" && "opacity-80",
diff --git a/crates/web/frontend/src/components/star-count/star-count.tsx b/crates/web/frontend/src/components/star-count/star-count.tsx
index 4812715..b2f0754 100644
--- a/crates/web/frontend/src/components/star-count/star-count.tsx
+++ b/crates/web/frontend/src/components/star-count/star-count.tsx
@@ -10,15 +10,10 @@ interface Props {
 
 const StarCount = ({ className }: Props) => {
 	const [stars, setStars] = useState<string>();
-	const [clicked, setClicked] = useState<boolean>(false);
 	const [fetching, setFetching] = useState<boolean>(true);
 
 	const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-		setClicked(true);
-		setTimeout(() => {
-			window.open("https://github.com/jorgehermo9/gq", "_blank");
-			setClicked(false);
-		}, 0);
+		window.open("https://github.com/jorgehermo9/gq", "_blank");
 		e.preventDefault();
 	}, []);
 
@@ -38,13 +33,13 @@ const StarCount = ({ className }: Props) => {
 			onClick={handleClick}
 		>
 			<a href="https://github.com/jorgehermo9/gq" className="flex items-center select-none">
-				<Github className="w-3.5 h-3.5 mr-1" />
+				<Github className="w-3.5 h-3.5 mr-2" />
 				{fetching ? (
 					<Loader />
 				) : (
-					<div className="animate-in fade-in duration-300 flex items-center">
-						<span className="text-[0.7rem] font-medium mr-1">{stars}</span>
-						<Star className="w-2 h-2 text-accent data-[visible=false]:opacity-0 data-[visible=true]:opacity-1 transition-opacity" />
+					<div className="animate-in fade-in duration-300 flex items-center mt-[2px]">
+						<span className="text-xxs font-normal mr-1">{stars}</span>
+						<Star className="w-2 h-2 mb-[1px] text-accent data-[visible=false]:opacity-0 data-[visible=true]:opacity-1 transition-opacity" />
 					</div>
 				)}
 			</a>
diff --git a/crates/web/frontend/src/components/web-assembly-badge/web-assembly-badge.tsx b/crates/web/frontend/src/components/web-assembly-badge/web-assembly-badge.tsx
index 759c33d..0e9f232 100644
--- a/crates/web/frontend/src/components/web-assembly-badge/web-assembly-badge.tsx
+++ b/crates/web/frontend/src/components/web-assembly-badge/web-assembly-badge.tsx
@@ -4,9 +4,9 @@ import Image from "next/image";
 export const WebAssemblyBadge = ({ className }: React.HTMLProps<HTMLDivElement>) => {
 	return (
 		<div className={cn("flex items-center", className)}>
-			<span className="text-xxs font-mono font-normal">Powered by</span>
+			<span className="text-xxs font-normal">Powered by</span>
 			<Image
-				className="ml-2 inline mb-[2px]"
+				className="ml-2 inline"
 				src="/web-assembly-icon.svg"
 				alt="Web Assemboy logo"
 				width={12}