diff --git a/docs/changeblog.html b/docs/changeblog.html
index 3e81ea5..1ca2485 100644
--- a/docs/changeblog.html
+++ b/docs/changeblog.html
@@ -13,7 +13,7 @@
         <div class="nav-container">
             <div class="nav-brand">
                 <a href="index.html" style="display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit;">
-                    <span class="gem-icon">💎</span>
+                    <img src="favicon.svg" width="32"/>
                     <span class="brand-text">Gem</span>
                 </a>
             </div>
@@ -395,7 +395,7 @@ <h2>What's Next?</h2>
         <div class="container">
             <div class="footer-content">
                 <div class="footer-brand">
-                    <span class="gem-icon">💎</span>
+                    <img src="favicon.svg" width="32"/>
                     <span>Gem Programming Language v1.3.0</span>
                 </div>
                 <div class="footer-links">
diff --git a/docs/docs.css b/docs/docs.css
index 34f9d98..a95eef4 100644
--- a/docs/docs.css
+++ b/docs/docs.css
@@ -246,7 +246,7 @@
 
 /* Code blocks */
 .code-block {
-    background: #1e293b;
+    background: #0f2a15;
     border-radius: var(--border-radius);
     overflow: hidden;
     margin: 1.5rem 0;
@@ -264,7 +264,7 @@
 }
 
 .output-block {
-    background: #0f172a;
+    background: #0f2a13;
     border-radius: var(--border-radius);
     overflow: hidden;
     margin: 1.5rem 0;
@@ -312,8 +312,8 @@ kbd {
 
 /* Info boxes */
 .info-box {
-    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-    border: 1px solid #bfdbfe;
+    background: linear-gradient(135deg, #effff0 0%, #dcfedb 100%);
+    border: 1px solid #bffec2;
     border-radius: var(--border-radius);
     padding: 1.5rem;
     margin: 1.5rem 0;
@@ -328,7 +328,7 @@ kbd {
 
 .info-box p,
 .info-box ul {
-    color: #1e40af;
+    color: var(--primary-color);
     margin-bottom: 0.5rem;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index 235271a..59262e0 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -13,7 +13,7 @@
         <div class="nav-container">
             <div class="nav-brand">
                 <a href="index.html" style="display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit;">
-                    <span class="gem-icon">💎</span>
+                    <img src="favicon.svg" width="32"/>
                     <span class="brand-text">Gem</span>
                 </a>
             </div>
@@ -1340,7 +1340,7 @@ <h3>Practical Time Examples</h3>
         <div class="container">
             <div class="footer-content">
                 <div class="footer-brand">
-                    <span class="gem-icon">💎</span>
+                    <img src="favicon.svg" width="32"/>
                     <span>Gem Programming Language</span>
                 </div>
                 <div class="footer-links">
diff --git a/docs/favicon.svg b/docs/favicon.svg
index 32deb45..0ef5891 100644
--- a/docs/favicon.svg
+++ b/docs/favicon.svg
@@ -1,10 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
-  <defs>
-    <linearGradient id="gemGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <polygon points="16,2 26,10 22,26 10,26 6,10" fill="url(#gemGradient)" stroke="#4f46e5" stroke-width="1"/>
-  <polygon points="16,2 6,10 16,14 26,10" fill="#ffffff" fill-opacity="0.3"/>
-</svg> 
\ No newline at end of file
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="256px" height="256px" viewBox="0 0 128.00 128.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet" fill="#000000" transform="rotate(0)" stroke="#000000" stroke-width="0.00128">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier">
+
<path fill="#A8D8A8" d="M4.01 47.94l17.48-26.51L35.03 36.9z"/>
+
<path fill="#4CAF50" d="M44.11 68.26L4.01 47.94L35.03 36.9z"/>
+
<path fill="#388E3C" d="M63.94 43.06L35.03 36.9l9.08 31.36z"/>
+
<path fill="#1B5E20" d="M123.87 47.94l-17.48-26.51L92.85 36.9z"/>
+
<path fill="#4CAF50" d="M83.77 68.26l40.1-20.32L92.85 36.9z"/>
+
<path fill="#A8D8A8" d="M63.94 43.06l28.91-6.16l-9.08 31.36z"/>
+
<path fill="#81C784" d="M83.77 68.26l-19.83-25.2l-19.83 25.2z"/>
+
<path fill="#66BB6A" d="M43 10.06h41.88l21.51 11.37L92.85 36.9l-28.91 6.16l-28.91-6.16l-13.54-15.47z"/>
+
<path fill="#2E7D32" d="M63.94 117.27L4.01 47.94l40.1 20.32z"/>
+
<path fill="#66BB6A" d="M63.94 117.27l59.93-69.33l-40.1 20.32z"/>
+
<path fill="#A8D8A8" d="M83.77 68.26l-19.83 49.01l-19.83-49.01z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index d324567..afc4a88 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -13,7 +13,7 @@
     <nav class="navbar">
         <div class="nav-container">
             <div class="nav-brand">
-                <span class="gem-icon">💎</span>
+                <img src="favicon.svg" width="32"/>
                 <span class="brand-text">Gem</span>
                 <span class="version">v1.3.0</span>
             </div>
@@ -31,7 +31,7 @@
             <div class="container">
                 <div class="hero-content">
                     <h1 class="hero-title">
-                        <span class="gem-icon-large">💎</span>
+                        <img src="favicon.svg" width="128"/>
                         Gem Programming Language
                         <span class="version-badge">v1.3.0</span>
                     </h1>
@@ -44,11 +44,11 @@ <h1 class="hero-title">
                         that's both powerful and delightful to write. No more choosing between safety and beauty.
                     </p>
                     <div class="hero-features">
-                        <span class="feature-badge">🔒 Memory Safe</span>
-                        <span class="feature-badge">🛡️ Type Safe</span>
-                        <span class="feature-badge">⚡ Fast</span>
-                        <span class="feature-badge">🎯 Developer Friendly</span>
-                        <span class="feature-badge">💎 Beautiful Syntax</span>
+                        <span class="feature-badge">Memory Safe</span>
+                        <span class="feature-badge">Type Safe</span>
+                        <span class="feature-badge">Fast</span>
+                        <span class="feature-badge">Developer Friendly</span>
+                        <span class="feature-badge">Beautiful Syntax</span>
                     </div>
                     <div class="hero-actions">
                         <a href="#docs" class="btn btn-primary">Get Started</a>
@@ -174,7 +174,7 @@ <h3>Modern Features</h3>
                         <p>First-class functions, classes, inheritance, modules, and a growing standard library.</p>
                     </div>
                     <div class="feature-card">
-                        <div class="feature-icon">💎</div>
+                        <div class="feature-icon"><img src="favicon.svg" width="64"/></div>
                         <h3>Beautiful Syntax</h3>
                         <p>Clean, expressive syntax that's genuinely pleasant to read and write. Code that's not only safe and fast, but beautiful.</p>
                     </div>
@@ -220,7 +220,7 @@ <h4>Embr Phase</h4>
                             </div>
                         </div>
                         <div class="timeline-item">
-                            <div class="timeline-icon">💎</div>
+                            <div class="timeline-icon"><img src="favicon.svg" width="32"/></div>
                             <div class="timeline-content">
                                 <h4>Gem Reborn</h4>
                                 <p>Complete rewrite with focus on safety, beauty, and developer happiness. The language we always wanted.</p>
@@ -302,7 +302,7 @@ <h3>Functions & Classes</h3>
         <div class="container">
             <div class="footer-content">
                 <div class="footer-brand">
-                    <span class="gem-icon">💎</span>
+                    <img src="favicon.svg" width="32"/>
                     <span>Gem Programming Language v1.3.0</span>
                 </div>
                 <div class="footer-links">
diff --git a/docs/styles.css b/docs/styles.css
index 74f0c44..0b6a3b0 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1,4 +1,13 @@
 /* Reset and base styles */
+/* 
+    #A8D8A8 - medium light sage
+    #4CAF50 - medium emerald (secondary)
+    #388E3C - deep emerald (primary)
+    #1B5E20 - very dark forest (primary dark)
+    #81C784 - medium-light green
+    #66BB6A - medium green
+    #2E7D32 - dark forest (accent)
+*/
 * {
     margin: 0;
     padding: 0;
@@ -6,11 +15,11 @@
 }
 
 :root {
-    --primary-color: #6366f1;
-    --primary-dark: #4f46e5;
-    --secondary-color: #8b5cf6;
-    --accent-color: #06b6d4;
-    --text-primary: #1f2937;
+    --primary-color: #388E3C;
+    --primary-dark: #1B5E20;
+    --secondary-color: #4CAF50;
+    --accent-color: #2E7D32;
+    --text-primary: #1f3722;
     --text-secondary: #6b7280;
     --text-light: #9ca3af;
     --bg-primary: #ffffff;
@@ -76,10 +85,6 @@ body {
     text-decoration: none;
 }
 
-.gem-icon {
-    font-size: 1.5rem;
-}
-
 .version {
     font-size: 0.75rem;
     background: var(--primary-color);
@@ -266,7 +271,7 @@ body {
 }
 
 .line-numbers {
-    background: #2d2d2d;
+    background: #0f2a13;
     color: #858585;
     padding: 0.75rem 0.25rem 0.75rem 0.75rem;
     font-family: var(--font-mono);
@@ -283,6 +288,7 @@ body {
     flex: 1;
     position: relative;
     overflow: hidden;
+    background: #0f2a13;
 }
 
 .syntax-highlight {
@@ -384,14 +390,14 @@ body {
 }
 
 .terminal-window {
-    background: #0f172a;
+    background: #0f2a15;
     border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: var(--shadow-lg);
 }
 
 .terminal-header {
-    background: #1e293b;
+    background: #0f2a15;
     padding: 0.75rem 1rem;
     display: flex;
     align-items: center;
@@ -428,7 +434,7 @@ body {
 }
 
 .terminal-content {
-    background: #0f172a;
+    background: #0f2a13;
     color: #e2e8f0;
     font-family: var(--font-mono);
     font-size: 0.8rem;
@@ -514,18 +520,19 @@ code[class*=language-] {
 
 /* Code Window */
 .code-window {
-    background: #1e293b;
+    background: #0f2a15;
     border-radius: var(--border-radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-xl);
 }
 
 .code-header {
-    background: #334155;
+    background: #0f2a13;
     padding: 0.75rem 1rem;
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    border-bottom: 1px solid #404040;
 }
 
 .code-dots {
@@ -700,7 +707,7 @@ pre, code, .code-content, .code-block, .terminal-content {
 }
 
 .philosophy-box {
-    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    background: linear-gradient(135deg, #effff1 0%, #dbfedb 100%);
     border: 2px solid var(--primary-color);
     border-radius: var(--border-radius-lg);
     padding: 2rem;
@@ -715,7 +722,7 @@ pre, code, .code-content, .code-block, .terminal-content {
 }
 
 .philosophy-box p {
-    color: #1e40af;
+    color: var(--primary-color);
     line-height: 1.7;
     margin-bottom: 1rem;
 }
@@ -800,12 +807,13 @@ pre, code, .code-content, .code-block, .terminal-content {
 .example-card pre {
     margin: 0;
     padding: 1.5rem;
-    background: #1e293b;
+    background: #0f2a15;
     color: #e2e8f0;
     font-family: var(--font-mono);
     font-size: 0.875rem;
     line-height: 1.6;
     overflow-x: auto;
+    height: 100%;
 }
 
 /* Footer */