diff --git a/blog/package-lock.json b/blog/package-lock.json
index 63ae4e7..17f397f 100644
--- a/blog/package-lock.json
+++ b/blog/package-lock.json
@@ -36,7 +36,6 @@
         "svelte": "^4.2.12",
         "svelte-ux": "^0.60.6",
         "tailwindcss": "^3.4.1",
-        "tippy.js": "^6.3.7",
         "typescript": "^5.3.3"
       },
       "devDependencies": {
@@ -7349,9 +7348,9 @@
       }
     },
     "node_modules/fast-xml-parser": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.4.tgz",
-      "integrity": "sha512-utnwm92SyozgA3hhH2I8qldf2lBqm6qHOICawRNRFu1qMe3+oqr+GcXjGqTmXTMGE5T4eC03kr/rlh5C1IRdZA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.1.tgz",
+      "integrity": "sha512-xkjOecfnKGkSsOwtZ5Pz7Us/T6mrbPQrq0nh+aCO5V9nk5NLWmasAHumTKjiPJPWANe+kAZ84Jc8ooJkzZ88Sw==",
       "funding": [
         {
           "type": "github",
@@ -7362,6 +7361,7 @@
           "url": "https://paypal.me/naturalintelligence"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "strnum": "^1.0.5"
       },
diff --git a/blog/package.json b/blog/package.json
index 9a0606b..3db431f 100644
--- a/blog/package.json
+++ b/blog/package.json
@@ -38,7 +38,6 @@
     "svelte": "^4.2.12",
     "svelte-ux": "^0.60.6",
     "tailwindcss": "^3.4.1",
-    "tippy.js": "^6.3.7",
     "typescript": "^5.3.3"
   },
   "devDependencies": {
@@ -49,4 +48,4 @@
     "flowbite": "^2.3.0",
     "flowbite-svelte": "^0.44.24"
   }
-}
+}
\ No newline at end of file
diff --git a/blog/public/commentsTheme.css b/blog/public/commentsTheme.css
new file mode 100644
index 0000000..2429d07
--- /dev/null
+++ b/blog/public/commentsTheme.css
@@ -0,0 +1,232 @@
+/*!
+ * Modified from GitHub's Dark Dimmed theme, licensed under the MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+main {
+    --color-prettylights-syntax-comment: #000000;
+    --color-prettylights-syntax-constant: #6cb6ff;
+    --color-prettylights-syntax-entity: #dcbdfb;
+    --color-prettylights-syntax-storage-modifier-import: #000000;
+    --color-prettylights-syntax-entity-tag: #8ddb8c;
+    --color-prettylights-syntax-keyword: #f47067;
+    --color-prettylights-syntax-string: #96d0ff;
+    --color-prettylights-syntax-variable: #f69d50;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+    --color-prettylights-syntax-invalid-illegal-text: #000000;
+    --color-prettylights-syntax-invalid-illegal-bg: #922323;
+    --color-prettylights-syntax-carriage-return-text: #cdd9e5;
+    --color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+    --color-prettylights-syntax-string-regexp: #8ddb8c;
+    --color-prettylights-syntax-markup-list: #eac55f;
+    --color-prettylights-syntax-markup-heading: #316dca;
+    --color-prettylights-syntax-markup-italic: #000000;
+    --color-prettylights-syntax-markup-bold: #000000;
+    --color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+    --color-prettylights-syntax-markup-deleted-bg: #78191b;
+    --color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+    --color-prettylights-syntax-markup-inserted-bg: #1b4721;
+    --color-prettylights-syntax-markup-changed-text: #ffddb0;
+    --color-prettylights-syntax-markup-changed-bg: #682d0f;
+    --color-prettylights-syntax-markup-ignored-text: #000000;
+    --color-prettylights-syntax-markup-ignored-bg: #255ab2;
+    --color-prettylights-syntax-meta-diff-range: #dcbdfb;
+    --color-prettylights-syntax-brackethighlighter-angle: #000000;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #000000;
+    --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+    --color-btn-text: #000000;
+    --color-btn-bg: #ECB337;
+    --color-btn-border: #000000;
+    --color-btn-shadow: 0 0 #0000;
+    --color-btn-inset-shadow: 0 0 #0000;
+    --color-btn-hover-bg: #000000;
+    /* tu powyej */
+    --color-btn-hover-border: #000000;
+    --color-btn-active-bg: #000000;
+    --color-btn-active-border: #000000;
+    --color-btn-selected-bg: #000000;
+    --color-btn-primary-text: hsl(0, 0%, 0%);
+    --color-btn-primary-bg: #ECB337;
+    --color-btn-primary-border: #000000;
+    --color-btn-primary-shadow: 0 0 #0000;
+    --color-btn-primary-inset-shadow: 0 0 #0000;
+    --color-btn-primary-hover-bg: #000000;
+    --color-btn-primary-hover-border: #cdd9e51a;
+    --color-btn-primary-selected-bg: #ECB337;
+    --color-btn-primary-selected-shadow: 0 0 #0000;
+    --color-btn-primary-disabled-text: #000000;
+    --color-btn-primary-disabled-bg: #FAF4E6;
+    --color-btn-primary-disabled-border: #000000;
+    --color-action-list-item-default-hover-bg: #000000;
+    --color-segmented-control-bg: #FAF4E6;
+    --color-segmented-control-button-bg: #ECB337;
+    --color-segmented-control-button-selected-border: #000000;
+    --color-fg-default: #000000;
+    --color-fg-muted: #000000;
+    --color-fg-subtle: #000000;
+    --color-canvas-default: #FAF4E6;
+    --color-canvas-overlay: #161b22;
+    --color-canvas-inset: #FAF4E6;
+    --color-canvas-subtle: #ECB337;
+    --color-border-default: #000000;
+    --color-border-muted: #000000;
+    --color-neutral-muted: #000000;
+    --color-accent-fg: #000000;
+    --color-accent-emphasis: #000000;
+    --color-accent-muted: #000000;
+    --color-accent-subtle: #000000;
+    --color-success-fg: #57ab5a;
+    --color-attention-fg: #c69026;
+    --color-attention-muted: #ae7c1466;
+    --color-attention-subtle: #000000;
+    --color-danger-fg: #e5534b;
+    --color-danger-muted: #e5534b66;
+    --color-danger-subtle: #e5534b1a;
+    --color-primer-shadow-inset: 0 0 #0000;
+    --color-scale-gray-7: #000000;
+    --color-scale-blue-8: #143d79;
+
+    /*! Extensions from @primer/css/alerts/flash.scss */
+    --color-social-reaction-bg-hover: #ECB337;
+    --color-social-reaction-bg-reacted-hover: #ECB337;
+}
+
+main .pagination-loader-container {
+    background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg)
+}
+
+/*! Custom CSS */
+.gsc-reactions-count {
+    display: none
+}
+
+.gsc-timeline {
+    flex-direction: column-reverse
+}
+
+.gsc-header {
+    padding-bottom: 1rem
+}
+
+.gsc-comments>.gsc-header {
+    order: 1
+}
+
+.gsc-comment-box-textarea {
+    border-top-width: 2px;
+    border-right-width: 2px;
+    border-bottom-width: 2px;
+    border-left-width: 2px;
+}
+
+.gsc-comment-box:not(.gsc-comment-box-is-reply) {
+    border-radius: 12px;
+    border-top-width: 4px;
+    border-right-width: 4px;
+    border-bottom-width: 4px;
+    border-left-width: 4px;
+}
+
+.gsc-comment-box-textarea-extras {
+    border-right-width: 2px;
+    border-bottom-width: 2px;
+    border-left-width: 2px;
+}
+
+.gsc-comment-box-tabs {
+    border-bottom-width: 2px;
+}
+
+#__next .gsc-comment>div.border {
+    border-width: 4px;
+    border-radius: 12px;
+}
+
+.gsc-comment-box-buttons button.btn:hover:not([disabled]),
+.gsc-social-reaction-summary-item-count {
+    color: #FAF4E6;
+}
+
+
+
+.gsc-direct-reaction-buttons>button:hover .gsc-social-reaction-summary-item-count {
+    color: #000000;
+}
+
+.gsc-reactions-button.gsc-social-reaction-summary-item,
+.gsc-direct-reaction-buttons button {
+    border: 0;
+}
+
+.gsc-reactions-button:hover {
+    background-color: #000000;
+    color: #ECB337;
+}
+
+.color-bg-overlay {
+    background-color: #ECB337;
+    border-width: 2px;
+}
+
+#__next .color-bg-overlay .color-border-primary.my-2.border-t {
+    border-top-width: 2px;
+}
+
+.BtnGroup-item>button:hover {
+    background: #000000;
+    color: #FAF4E6;
+}
+
+.BtnGroup-item.BtnGroup-item--selected {
+    background-color: #FAF4E6;
+    color: #000000;
+}
+
+.BtnGroup-item.BtnGroup-item--selected:hover button,
+.BtnGroup-item.BtnGroup-item--selected:hover {
+    background-color: #000000;
+    color: #FAF4E6;
+}
+
+.BtnGroup-item {
+    border-width: 2px;
+}
+
+.gsc-reply-box {
+    border-top-width: 2px;
+}
+
+#__next .border {
+    border-width: 2px;
+}
+
+#__next .border-b-0 {
+    border-bottom-width: 0;
+}
+
+#__next .py-2 {
+    margin-bottom: -1px;
+}
+
+.gsc-comment-box-tabs {
+    border-start-end-radius: 8px;
+    border-start-start-radius: 8px;
+}
+
+.gsc-comments>.gsc-comment-box {
+    margin-bottom: 1rem;
+    order: 2
+}
+
+.gsc-comments>.gsc-timeline {
+    order: 3
+}
+
+.gsc-homepage-bg {
+    background-color: #FAF4E6
+        /* #15202b -> tlo */
+}
+
+main .gsc-loading-image {
+    background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif)
+}
\ No newline at end of file
diff --git a/blog/src/components/BlogPostPane.astro b/blog/src/components/BlogPostPane.astro
index e243ec4..1129f49 100644
--- a/blog/src/components/BlogPostPane.astro
+++ b/blog/src/components/BlogPostPane.astro
@@ -10,6 +10,7 @@ const {
 import BeautifulButton from "./BeautifulButton.astro";
 import "animate.css";
 import "overlayscrollbars/overlayscrollbars.css";
+import Comments from "./Comments.astro";
 ---
 
 <astro-post-desktop-window
diff --git a/blog/src/components/Comments.astro b/blog/src/components/Comments.astro
new file mode 100644
index 0000000..d6686f5
--- /dev/null
+++ b/blog/src/components/Comments.astro
@@ -0,0 +1,20 @@
+<section class="giscus mx-auto mt-10 w-full"></section>
+
+<script
+    transition
+    is:inline
+    src="https://giscus.app/client.js"
+    data-repo="bamanczak/bruncio"
+    data-repo-id="R_kgDOLSMmuQ"
+    data-category="Blog Post Comments"
+    data-category-id="DIC_kwDOLSMmuc4Chgn7"
+    data-mapping="url"
+    data-strict="0"
+    data-reactions-enabled="1"
+    data-emit-metadata="0"
+    data-input-position="bottom"
+    data-theme="http://localhost:4321/public/commentsTheme.css"
+    data-lang="en"
+    data-loading="lazy"
+    crossorigin="anonymous"
+    async></script>
diff --git a/blog/src/components/DesktopIcon.astro b/blog/src/components/DesktopIcon.astro
index 7268832..a6cd9c1 100644
--- a/blog/src/components/DesktopIcon.astro
+++ b/blog/src/components/DesktopIcon.astro
@@ -56,9 +56,11 @@ export let menu = true;
                 {label}
             </div>
         </div>
-        <div class="flex flex-col items-center justify-center">
+        <div
+            class="flex flex-col items-center justify-center dropdownHover invisible -ml-6"
+        >
             <div
-                class="dropdownHover z-100 ml-1 invisible bg-black dark:bg-black divide-y divide-mywhite rounded-lg text:xs dark:text-mywhite text-mywhite"
+                class="z-100 ml-1 dropdownHoverItem bg-black dark:bg-black divide-y divide-mywhite rounded-lg text:xs dark:text-mywhite text-mywhite"
             >
                 <div class="p-2 cursor-pointer menu-pane-opener">Open</div>
             </div>
@@ -85,7 +87,11 @@ export let menu = true;
                 ".draggable-icon",
             ) as HTMLElement;
 
-            draggableIcon.addEventListener("mousedown", (event) => {
+            const draggableIconContainer = this.querySelector(
+                ".desktop-icon-sub-container",
+            ) as HTMLElement;
+
+            draggableIconContainer.addEventListener("mousedown", (event) => {
                 moveObject(draggableIcon, event as MouseEvent);
             });
 
@@ -100,20 +106,22 @@ export let menu = true;
                 iconClickEvent = "dblclick";
             }
 
-            draggableIcon.addEventListener(iconClickEvent, (e) => {
+            draggableIconContainer.addEventListener(iconClickEvent, (e) => {
                 e.stopPropagation();
                 handleIconAction();
             });
 
             const menuContainer = this.querySelector(".dropdownHover");
+            const menuContainerItem = this.querySelector(".dropdownHoverItem");
             let openHint = false;
-            draggableIcon.addEventListener("mouseenter", (e) => {
+            draggableIconContainer.addEventListener("mouseenter", (e) => {
                 e.stopPropagation();
                 if (parser.getPlatformType() != "mobile") {
                     openHint = true;
                     setTimeout(function () {
                         if (openHint) {
                             menuContainer!.classList.remove("invisible");
+                            menuContainerItem!.classList.remove("invisible");
                         }
                     }, 200);
                 }
@@ -121,6 +129,7 @@ export let menu = true;
             draggableIcon.addEventListener("mouseleave", () => {
                 openHint = false;
                 menuContainer!.classList.add("invisible");
+                menuContainerItem!.classList.add("invisible");
             });
 
             const menuPaneOpener = this.querySelector(".menu-pane-opener");
diff --git a/blog/src/layouts/DesktopPage.astro b/blog/src/layouts/DesktopPage.astro
index 7ce77c0..d52b809 100644
--- a/blog/src/layouts/DesktopPage.astro
+++ b/blog/src/layouts/DesktopPage.astro
@@ -33,7 +33,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 <!doctype html>
 <html lang="en">
 	<head>
-		<Tooltips interactive={false} delay={[15, 100]} />
+		<!-- <Tooltips interactive={false} delay={[15, 100]} /> -->
 		<BaseHead title={title} description={description} />
 		<ViewTransitions />
 	</head>
diff --git a/blog/src/pages/blog/[...slug].astro b/blog/src/pages/blog/[...slug].astro
index 488314a..dd499b3 100644
--- a/blog/src/pages/blog/[...slug].astro
+++ b/blog/src/pages/blog/[...slug].astro
@@ -2,6 +2,7 @@
 import { type CollectionEntry, getCollection } from "astro:content";
 import DesktopPage from "../../layouts/DesktopPage.astro";
 import Pane from "../../components/BlogPostPane.astro";
+import Comments from "../../components/Comments.astro";
 
 export const prerender = true;
 export async function getStaticPaths() {
@@ -28,5 +29,6 @@ const { Content } = await post.render();
 >
 	<Pane title={post.data.title} windowName={post.id} showBackButton="true">
 		<Content />
+		<Comments />
 	</Pane>
 </DesktopPage>
diff --git a/blog/src/styles/global.css b/blog/src/styles/global.css
index ddc8ea5..fc3f64f 100644
--- a/blog/src/styles/global.css
+++ b/blog/src/styles/global.css
@@ -338,139 +338,6 @@ body {
 	background-size: 10px 10px; */
 }
 
-
-/* https: //unpkg.com/tippy.js@6.3.7/themes/light.css */
-
-.tippy-box[data-theme='default'] {
-	background-color: #FAF4E6;
-	color: black;
-	border: 4px solid black;
-	box-shadow: 4px 4px 0 rgba(64, 64, 64, 0.8);
-}
-
-/* TIPPY ARROW BORDER */
-.tippy-box {
-	border: 1px transparent
-}
-
-.tippy-box[data-placement^=top]>.tippy-arrow:after {
-	border-top-color: inherit;
-	border-width: 8px 8px 0;
-	bottom: -8px;
-	left: 0
-}
-
-.tippy-box[data-placement^=bottom]>.tippy-arrow:after {
-	border-bottom-color: inherit;
-	color: red;
-	border-width: 0 8px 8px;
-	top: -8px;
-	left: 0
-}
-
-.tippy-box[data-placement^=left]>.tippy-arrow:after {
-	border-left-color: inherit;
-	border-width: 8px 0 8px 8px;
-	right: -8px;
-	top: 0
-}
-
-.tippy-box[data-placement^=right]>.tippy-arrow:after {
-	border-width: 14px 14px 14px 0;
-	left: -14px;
-	top: -6px;
-	border-right-color: inherit
-}
-
-.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child) {
-	top: 17px
-}
-
-.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child) {
-	bottom: 17px
-}
-
-.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child) {
-	left: 12px
-}
-
-.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child) {
-	right: 12px
-}
-
-.tippy-arrow {
-	border-color: inherit
-}
-
-.tippy-arrow:after {
-	content: "";
-	z-index: -1;
-	position: absolute;
-	border-color: transparent;
-	border-style: solid
-}
-
-/* TIPPY ARROW BORDER END */
-
-.tippy-box[data-theme~='default'][data-placement^='right']>.tippy-arrow::before {
-	border-right-color: #FAF4E6;
-	left: -8px;
-}
-
-.tippy-box[data-theme~="light"] {
-	color: red;
-	box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
-		0 4px 80px -8px rgba(36, 40, 47, 0.25),
-		0 4px 4px -2px rgba(91, 94, 105, 0.15);
-	background-color: #fff;
-}
-
-.tippy-box[data-theme~="light"][data-placement^="top"]>.tippy-arrow:before {
-	border-top-color: #fff;
-}
-
-.tippy-box[data-theme~="light"][data-placement^="bottom"]>.tippy-arrow:before {
-	border-bottom-color: #fff;
-}
-
-.tippy-box[data-theme~="light"][data-placement^="left"]>.tippy-arrow:before {
-	border-left-color: #fff;
-}
-
-.tippy-box[data-theme~="light"][data-placement^="right"]>.tippy-arrow:before {
-	border-right-color: #fff;
-}
-
-.tippy-box[data-theme~="light"]>.tippy-backdrop {
-	background-color: #fff;
-}
-
-.tippy-box[data-theme~="light"]>.tippy-svg-arrow {
-	fill: #fff;
-}
-
-/* https://unpkg.com/tippy.js@6.3.7/animations/scale.css */
-.tippy-box[data-animation="scale"][data-placement^="top"] {
-	transform-origin: bottom;
-}
-
-.tippy-box[data-animation="scale"][data-placement^="bottom"] {
-	transform-origin: top;
-}
-
-.tippy-box[data-animation="scale"][data-placement^="left"] {
-	transform-origin: right;
-}
-
-.tippy-box[data-animation="scale"][data-placement^="right"] {
-	transform-origin: left;
-}
-
-.tippy-box[data-animation="scale"][data-state="hidden"] {
-	transform: scale(0.5);
-	opacity: 0;
-}
-
 .os-scrollbar {
 	/* // The size of the scrollbar */
 	--os-size: 20px !important;