diff --git a/index.html b/index.html
index e4b78ea..21aad81 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="mask-icon" href="/favicon.svg" color="#8B4513" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta
+      name="description"
+      content="A relaxing wood processing clicker game"
+    />
+    <meta name="theme-color" content="#8B4513" />
+    <title>XClicker - Wood Processing Game</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/public/favicon.png
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..67e7583
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="woodGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#8B4513"/>
+      <stop offset="100%" style="stop-color:#654321"/>
+    </linearGradient>
+  </defs>
+  <rect x="10" y="20" width="44" height="24" rx="4" fill="url(#woodGradient)"/>
+  <path d="M12 24 L52 24" stroke="#5C3317" stroke-width="2" opacity="0.5"/>
+  <path d="M12 30 L52 30" stroke="#5C3317" stroke-width="2" opacity="0.5"/>
+  <path d="M12 36 L52 36" stroke="#5C3317" stroke-width="2" opacity="0.5"/>
+</svg> 
\ No newline at end of file
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 2527e48..e9f2feb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -96,6 +96,11 @@ body {
 .resource-count {
   font-size: 1.2rem;
   font-weight: bold;
+  position: relative;
+}
+
+.resource-count.animate {
+  animation: popIn 0.3s ease-out;
 }
 
 .resource-label {
@@ -438,6 +443,7 @@ button {
   transition:
     transform 0.1s ease,
     background-color 0.2s ease;
+  transform-origin: center;
 }
 
 .click-button {
@@ -515,3 +521,84 @@ button:active {
     max-width: 600px;
   }
 }
+
+/* Resource creation animations */
+@keyframes popIn {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes floatUp {
+  0% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-20px) scale(0.8);
+    opacity: 0;
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-5deg);
+  }
+  75% {
+    transform: rotate(5deg);
+  }
+}
+
+@keyframes sparkle {
+  0%,
+  100% {
+    filter: brightness(100%);
+    transform: scale(1);
+  }
+  50% {
+    filter: brightness(150%);
+    transform: scale(1.1);
+  }
+}
+
+/* Apply animations to elements */
+.resource-count.animate {
+  animation: popIn 0.3s ease-out;
+}
+
+.resource-popup {
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #4caf50;
+  font-weight: bold;
+  pointer-events: none;
+  animation: floatUp 0.8s ease-out forwards;
+}
+
+.upgrade-button:active {
+  animation: shake 0.3s ease-in-out;
+}
+
+.upgrade-item.upgraded {
+  animation: sparkle 0.5s ease-in-out;
+}
+
+.wood-piece.new {
+  animation:
+    stackGrow 0.3s ease-out,
+    sparkle 0.5s ease-in-out;
+}
diff --git a/src/components/AdminPanel.tsx b/src/components/AdminPanel.tsx
index 80f5854..f185d71 100644
--- a/src/components/AdminPanel.tsx
+++ b/src/components/AdminPanel.tsx
@@ -34,7 +34,7 @@ export const AdminPanel: React.FC<AdminPanelProps> = ({
         onClick={() => setIsOpen(!isOpen)}
         style={{
           position: "fixed",
-          top: "10px",
+          bottom: "10px",
           right: "10px",
           zIndex: 1000,
           background: "#ff4444",
@@ -52,7 +52,7 @@ export const AdminPanel: React.FC<AdminPanelProps> = ({
         <div
           style={{
             position: "fixed",
-            top: "60px",
+            bottom: "60px",
             right: "10px",
             background: "#1a202c",
             padding: "20px",
diff --git a/src/components/ProcessingSection.tsx b/src/components/ProcessingSection.tsx
index b99ea5c..cf9f6bc 100644
--- a/src/components/ProcessingSection.tsx
+++ b/src/components/ProcessingSection.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 interface ProcessingSectionProps {
   cooldown: number;
@@ -35,6 +35,14 @@ export const ProcessingSection: React.FC<ProcessingSectionProps> = ({
   getLogSplittingButtonText,
   getRoundSplittingButtonText,
 }) => {
+  const [clickedButton, setClickedButton] = useState<string | null>(null);
+
+  const handleButtonClick = (action: () => void, buttonType: string) => {
+    action();
+    setClickedButton(buttonType);
+    setTimeout(() => setClickedButton(null), 300);
+  };
+
   return (
     <section className="processing-section">
       <div className="processing-header">
@@ -49,8 +57,8 @@ export const ProcessingSection: React.FC<ProcessingSectionProps> = ({
       <div className="action-buttons">
         <div className="button-container">
           <button
-            className="click-button"
-            onClick={onGetLog}
+            className={`click-button ${clickedButton === "get-log" ? "shake" : ""}`}
+            onClick={() => handleButtonClick(onGetLog, "get-log")}
             disabled={
               cooldown > 0 || workerHealth < 20 * parallelProcessingLevel
             }
@@ -64,8 +72,8 @@ export const ProcessingSection: React.FC<ProcessingSectionProps> = ({
 
         <div className="button-container">
           <button
-            className="split-button"
-            onClick={onSplitLog}
+            className={`split-button ${clickedButton === "split-log" ? "shake" : ""}`}
+            onClick={() => handleButtonClick(onSplitLog, "split-log")}
             disabled={
               (currentLog === 0 && logs === 0) ||
               (currentLog === 0 && workerHealth < 10) ||
@@ -79,8 +87,8 @@ export const ProcessingSection: React.FC<ProcessingSectionProps> = ({
 
         <div className="button-container">
           <button
-            className="split-round-button"
-            onClick={onSplitRound}
+            className={`split-round-button ${clickedButton === "split-round" ? "shake" : ""}`}
+            onClick={() => handleButtonClick(onSplitRound, "split-round")}
             disabled={
               (currentRound === 0 && rounds === 0) ||
               (currentRound === 0 && workerHealth < 5) ||
diff --git a/src/components/ResourceItem.tsx b/src/components/ResourceItem.tsx
index 79af984..3be8621 100644
--- a/src/components/ResourceItem.tsx
+++ b/src/components/ResourceItem.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 interface ResourceItemProps {
   icon: string;
@@ -11,10 +11,32 @@ export const ResourceItem: React.FC<ResourceItemProps> = ({
   count,
   label,
 }) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+  const [popupValue, setPopupValue] = useState(0);
+  const prevCountRef = useRef(count);
+
+  useEffect(() => {
+    const diff = count - prevCountRef.current;
+    if (diff !== 0) {
+      setIsAnimating(true);
+      if (diff > 0) {
+        setShowPopup(true);
+        setPopupValue(diff);
+        setTimeout(() => setShowPopup(false), 800);
+      }
+      setTimeout(() => setIsAnimating(false), 300);
+    }
+    prevCountRef.current = count;
+  }, [count]);
+
   return (
     <div className="resource-item">
       <span className="resource-icon">{icon}</span>
-      <span className="resource-count">{count}</span>
+      <span className={`resource-count ${isAnimating ? "animate" : ""}`}>
+        {count}
+        {showPopup && <span className="resource-popup">+{popupValue}</span>}
+      </span>
       <span className="resource-label">{label}</span>
     </div>
   );
diff --git a/src/components/UpgradeItem.tsx b/src/components/UpgradeItem.tsx
index 8292601..84a616e 100644
--- a/src/components/UpgradeItem.tsx
+++ b/src/components/UpgradeItem.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 interface UpgradeItemProps {
   title: string;
@@ -17,8 +17,16 @@ export const UpgradeItem: React.FC<UpgradeItemProps> = ({
   woodPieces,
   onUpgrade,
 }) => {
+  const [isUpgraded, setIsUpgraded] = useState(false);
+
+  const handleUpgrade = () => {
+    onUpgrade();
+    setIsUpgraded(true);
+    setTimeout(() => setIsUpgraded(false), 500);
+  };
+
   return (
-    <div className="upgrade-item">
+    <div className={`upgrade-item ${isUpgraded ? "upgraded" : ""}`}>
       <div className="upgrade-info">
         <h3>{title}</h3>
         <p>{description}</p>
@@ -31,7 +39,7 @@ export const UpgradeItem: React.FC<UpgradeItemProps> = ({
       </div>
       <button
         className="upgrade-button"
-        onClick={onUpgrade}
+        onClick={handleUpgrade}
         disabled={woodPieces < cost}
       >
         Upgrade ({cost} wood)
