diff --git a/.gitignore b/.gitignore
index 6b800ba..99ec36f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,9 @@
 # firebase
 .firebase
 
+# mac
+**/.DS_Store
+
 ### Node ###
 # Logs
 logs
diff --git a/demoSite/content/posts/css-vars.md b/demoSite/content/posts/css-vars.md
index 1e891d3..6beba0d 100644
--- a/demoSite/content/posts/css-vars.md
+++ b/demoSite/content/posts/css-vars.md
@@ -2,7 +2,7 @@
 title = "CSS Variables update"
 date = "2024-07-30"
 author = "Mirus"
-cover = "img/hello.jpg"
+cover = "img/css-variables-update.webp"
 description = "A small demo of native CSS Variables. You can create your very own re-Terminal today!"
 layout = "css-vars-showcase"
 Toc=true
@@ -38,7 +38,7 @@ You can find all of them in the browser's page inspector, but here is the list w
 
 ```css
   :root {
-    --accent: #23B0FF; /* 1 of 6 basic colors */
+    --accent: #23B0FF; /* 1 of 5 basic colors */
     --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); /* background color; inherit shades of the accent */
     --accent-contrast-color: black; /* mainly uses for text on the accent backgrounds but not limited */
     --color: white; /* text color, also some other text use the variable in color mixing */
diff --git a/demoSite/static/img/css-variables-update.webp b/demoSite/static/img/css-variables-update.webp
new file mode 100644
index 0000000..057cce7
Binary files /dev/null and b/demoSite/static/img/css-variables-update.webp differ
diff --git a/images/screenshot.png b/images/screenshot.png
index c5ae803..16a8a7b 100644
Binary files a/images/screenshot.png and b/images/screenshot.png differ
diff --git a/images/tn.png b/images/tn.png
index e6f363d..d6f0a90 100644
Binary files a/images/tn.png and b/images/tn.png differ