diff --git a/README.md b/README.md
index 7f7db8c..10cab04 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ ember-mug
 ### Run with npx (No Installation)
 
 ```bash
-npx ember-mug
+npx ember-mug@latest
 ```
 
 ### Local Development
diff --git a/apps/web/public/screenshot.png b/apps/web/public/screenshot.png
new file mode 100644
index 0000000..477272f
Binary files /dev/null and b/apps/web/public/screenshot.png differ
diff --git a/apps/web/src/components/Installation.tsx b/apps/web/src/components/Installation.tsx
index 077c800..d210df5 100644
--- a/apps/web/src/components/Installation.tsx
+++ b/apps/web/src/components/Installation.tsx
@@ -5,20 +5,14 @@ import './Installation.css'
 const installSteps = [
   {
     step: '01',
-    title: 'Install the CLI',
-    command: 'npm install -g ember-mug',
-    description: 'Install ember-mug globally via npm to make it available from anywhere.',
-  },
-  {
-    step: '02',
     title: 'Enable Bluetooth',
     command: null,
     description: 'Make sure Bluetooth is enabled on your device and your Ember mug is powered on.',
   },
   {
-    step: '03',
+    step: '02',
     title: 'Run the CLI',
-    command: 'ember-mug',
+    command: 'npx ember-mug@latest',
     description: 'Launch the CLI and it will automatically discover and connect to your mug.',
   },
 ]
@@ -37,7 +31,7 @@ export default function Installation() {
           transition={{ duration: 0.6 }}
         >
           <h2>Get Started in Seconds</h2>
-          <p>Three simple steps to start controlling your Ember mug from the terminal.</p>
+          <p>Two simple steps to start controlling your Ember mug from the terminal.</p>
         </motion.div>
 
         <div className="steps-container">
diff --git a/apps/web/src/components/Terminal.css b/apps/web/src/components/Terminal.css
index 183aab1..10e14eb 100644
--- a/apps/web/src/components/Terminal.css
+++ b/apps/web/src/components/Terminal.css
@@ -87,288 +87,18 @@
 }
 
 .terminal-body {
-  padding: 1.5rem;
-  overflow-x: auto;
-}
-
-/* CLI Interface Styles */
-.cli-interface {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.85rem;
-  color: var(--text-primary);
-}
-
-.cli-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 0;
-}
-
-.cli-logo {
-  color: var(--accent);
-  font-weight: bold;
-}
-
-.cli-title {
-  color: var(--text-secondary);
-  font-weight: 600;
-}
-
-.cli-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--text-secondary);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  background: var(--accent);
-  border-radius: 50%;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-.cli-divider {
-  height: 1px;
-  background: var(--accent);
-  margin: 0.75rem 0;
-  opacity: 0.5;
-}
-
-.cli-main {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 2rem;
-  padding: 1rem 0;
-}
-
-.cli-mug {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ascii-art {
-  color: var(--accent);
-  font-size: 0.7rem;
-  line-height: 1.2;
-  opacity: 0.9;
-}
-
-.cli-panels {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.cli-panel {
-  border: 1px dashed var(--accent);
-  border-radius: 4px;
-  padding: 0.75rem;
-  background: rgba(224, 122, 95, 0.02);
-}
-
-.panel-header {
-  color: var(--accent);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px dashed var(--border);
-}
-
-.panel-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Temperature Panel */
-.temp-content {
-  align-items: center;
-}
-
-.temp-display {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.temp-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.temp-label {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-}
-
-.temp-value {
-  color: var(--accent);
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.temp-value.target {
-  color: var(--text-primary);
-}
-
-.temp-arrow {
-  color: var(--text-muted);
-}
-
-.temp-status {
-  color: var(--accent);
-  font-size: 0.8rem;
-}
-
-/* Battery Panel */
-.battery-content {
-  align-items: center;
-}
-
-.battery-percent {
-  color: var(--accent);
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.battery-bar {
-  width: 100%;
-  max-width: 150px;
-  height: 16px;
-  background: var(--bg-secondary);
-  border-radius: 2px;
+  padding: 0;
   overflow: hidden;
 }
 
-.battery-fill {
-  height: 100%;
-  background: var(--accent);
-  border-radius: 2px;
-}
-
-.battery-time {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-}
-
-/* Adjust Panel */
-.adjust-content {
-  align-items: center;
-}
-
-.slider-display {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
+.terminal-screenshot {
   width: 100%;
-  font-size: 0.75rem;
-  color: var(--text-muted);
-}
-
-.slider-track {
-  flex: 1;
-  height: 4px;
-  background: var(--bg-secondary);
-  border-radius: 2px;
-  position: relative;
-}
-
-.slider-fill {
-  height: 100%;
-  background: var(--accent);
-  border-radius: 2px;
-}
-
-.slider-thumb {
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 12px;
-  height: 12px;
-  background: var(--text-primary);
-  border-radius: 50%;
-  border: 2px solid var(--accent);
-}
-
-.slider-hint {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-}
-
-/* Presets Panel */
-.presets-content {
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.preset {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem;
-  border: 1px dashed var(--border);
-  border-radius: 4px;
-  min-width: 60px;
-}
-
-.preset-name {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.preset-temp {
-  font-size: 0.8rem;
-  color: var(--text-primary);
-}
-
-.preset-key {
-  font-size: 0.7rem;
-  color: var(--accent);
-}
-
-.cli-footer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  justify-content: center;
-  padding: 0.5rem 0;
-  font-size: 0.8rem;
-  color: var(--text-muted);
-}
-
-.cli-footer b {
-  color: var(--accent);
-  font-weight: 500;
+  height: auto;
+  display: block;
 }
 
 @media (max-width: 768px) {
   .terminal-section {
     padding: 4rem 1rem;
   }
-
-  .cli-main {
-    grid-template-columns: 1fr;
-  }
-
-  .cli-mug {
-    display: none;
-  }
-
-  .cli-panels {
-    grid-template-columns: 1fr;
-  }
-
-  .presets-content {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
 }
diff --git a/apps/web/src/components/Terminal.tsx b/apps/web/src/components/Terminal.tsx
index 2f9b9f8..0ebfcc6 100644
--- a/apps/web/src/components/Terminal.tsx
+++ b/apps/web/src/components/Terminal.tsx
@@ -36,131 +36,14 @@ export default function Terminal() {
           </div>
 
           <div className="terminal-body">
-            <TerminalContent />
+            <img
+              src="/screenshot.png"
+              alt="Ember Mug CLI interface showing temperature controls, battery status, and temperature presets"
+              className="terminal-screenshot"
+            />
           </div>
         </motion.div>
       </div>
     </section>
   )
 }
-
-function TerminalContent() {
-  return (
-    <div className="cli-interface">
-      {/* Header */}
-      <div className="cli-header">
-        <span className="cli-logo">C[_]</span>
-        <span className="cli-title">EMBER MUG</span>
-        <span className="cli-status">
-          <span className="status-dot" />
-          EMBER
-        </span>
-      </div>
-
-      <div className="cli-divider" />
-
-      <div className="cli-main">
-        {/* ASCII Mug */}
-        <div className="cli-mug">
-          <pre className="ascii-art">{`      |   |
-       \\   /
-        (   )
-         { }
-    {    }-{    }
-  .-{      }     }-.
- |'-..______..-'|
-   \\'-..__..-'/
-     (     \\\\
-     |   )  )
-     )  /
-    (   /
-    \\\\      y'
- \\'-..__..-'`}</pre>
-        </div>
-
-        {/* Panels */}
-        <div className="cli-panels">
-          {/* Temperature Panel */}
-          <div className="cli-panel">
-            <div className="panel-header">Temperature</div>
-            <div className="panel-content temp-content">
-              <div className="temp-display">
-                <div className="temp-item">
-                  <span className="temp-label">Current</span>
-                  <span className="temp-value">133°F</span>
-                </div>
-                <span className="temp-arrow">&rarr;</span>
-                <div className="temp-item">
-                  <span className="temp-label">Target</span>
-                  <span className="temp-value target">133°F</span>
-                </div>
-              </div>
-              <div className="temp-status">At temp</div>
-            </div>
-          </div>
-
-          {/* Battery Panel */}
-          <div className="cli-panel">
-            <div className="panel-header">Battery</div>
-            <div className="panel-content battery-content">
-              <span className="battery-percent">52%</span>
-              <div className="battery-bar">
-                <div className="battery-fill" style={{ width: '52%' }} />
-              </div>
-              <span className="battery-time">[~] 1h 44m remaining</span>
-            </div>
-          </div>
-
-          {/* Temperature Adjust */}
-          <div className="cli-panel">
-            <div className="panel-header">Temperature Adjust</div>
-            <div className="panel-content adjust-content">
-              <div className="slider-display">
-                <span>122°F</span>
-                <div className="slider-track">
-                  <div className="slider-fill" style={{ width: '50%' }} />
-                  <div className="slider-thumb" style={{ left: '50%' }} />
-                </div>
-                <span>145°F</span>
-              </div>
-              <span className="slider-hint">&larr;/&rarr;</span>
-            </div>
-          </div>
-
-          {/* Presets */}
-          <div className="cli-panel">
-            <div className="panel-header">Temperature Presets</div>
-            <div className="panel-content presets-content">
-              <div className="preset">
-                <span className="preset-name">Latte</span>
-                <span className="preset-temp">126°F</span>
-                <span className="preset-key">[1]</span>
-              </div>
-              <div className="preset">
-                <span className="preset-name">Coffee</span>
-                <span className="preset-temp">132°F</span>
-                <span className="preset-key">[2]</span>
-              </div>
-              <div className="preset">
-                <span className="preset-name">Tea</span>
-                <span className="preset-temp">140°F</span>
-                <span className="preset-key">[3]</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="cli-divider" />
-
-      {/* Footer */}
-      <div className="cli-footer">
-        <span><b>[1-3]</b> presets</span>
-        <span><b>[u]</b> unit</span>
-        <span><b>[r]</b> repair</span>
-        <span><b>[o]</b> settings</span>
-        <span><b>[q]</b> quit</span>
-      </div>
-    </div>
-  )
-}