diff --git a/mtg-topster-frontend/package-lock.json b/mtg-topster-frontend/package-lock.json
index d86b8fa4..eb936dea 100644
--- a/mtg-topster-frontend/package-lock.json
+++ b/mtg-topster-frontend/package-lock.json
@@ -12,6 +12,8 @@
         "@testing-library/react": "^13.0.0",
         "@testing-library/user-event": "^13.2.1",
         "axios": "^1.6.0",
+        "dom-to-image": "^2.6.0",
+        "html2canvas": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
@@ -5504,6 +5506,14 @@
       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -6393,6 +6403,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
@@ -7024,6 +7042,11 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom-to-image": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
+      "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
+    },
     "node_modules/domelementtype": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
@@ -9309,6 +9332,18 @@
         "webpack": "^5.20.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -16105,6 +16140,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -16604,6 +16647,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/mtg-topster-frontend/package.json b/mtg-topster-frontend/package.json
index dc112cc6..a4728dbd 100644
--- a/mtg-topster-frontend/package.json
+++ b/mtg-topster-frontend/package.json
@@ -7,6 +7,8 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "axios": "^1.6.0",
+    "dom-to-image": "^2.6.0",
+    "html2canvas": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
diff --git a/mtg-topster-frontend/src/CardFetcher.js b/mtg-topster-frontend/src/CardFetcher.js
index f9cda1c3..105274b0 100644
--- a/mtg-topster-frontend/src/CardFetcher.js
+++ b/mtg-topster-frontend/src/CardFetcher.js
@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
+import domtoimage from 'dom-to-image';
 import Sidebar from './Sidebar';
 import './CardFetcher.css';
 
 function CardFetcher() {
     const [showNames, setShowNames] = useState(true); // default to show names
     const [layout] = useState([]);
-    const [gridSize, setGridSize] = useState(5);  // For a 3x3 grid
+    const [gridSize, setGridSize] = useState(5);
     const [searchResults, setSearchResults] = useState([]);
     const [gridItems, setGridItems] = useState(Array(gridSize * gridSize).fill(null));
     const [charts, setCharts] = useState(() => {
@@ -185,7 +186,22 @@ useEffect(() => {
         loadFromLocalStorage();
       }, [loadFromLocalStorage]); // Now it correctly lists the function as a dependency  
     
-    
+      const handleDownload = () => {
+        const element = showNames ? document.querySelector('.main-container') : document.querySelector('.grid-container');
+        
+        domtoimage.toPng(element)
+            .then(function (dataUrl) {
+                const link = document.createElement('a');
+                link.href = dataUrl;
+                link.download = 'chart.png';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            })
+            .catch(function (error) {
+                console.error('Failed to capture the chart:', error);
+            });
+    };
       
     
 
@@ -196,6 +212,8 @@ useEffect(() => {
                 {charts.map(chart => <option key={chart.id} value={chart.id}>{chart.title}</option>)}
             </select>
             <button onClick={createNewChart}>+</button>
+            <button onClick={handleDownload}>Download Chart</button>
+
     
             <div className="main-container">
                 <Sidebar 
diff --git a/mtg-topster-frontend/src/Sidebar.js b/mtg-topster-frontend/src/Sidebar.js
index 3270cad8..d9c9c7f7 100644
--- a/mtg-topster-frontend/src/Sidebar.js
+++ b/mtg-topster-frontend/src/Sidebar.js
@@ -66,6 +66,7 @@ function Sidebar({ onSearch, searchResults, showNames, setShowNames, gridSize, h
                     </label>
                 </div>
                 {/* More options here */}
+                <button>Shuffle</button>
             </details>
 
             {/* More dropdowns */}
@@ -73,14 +74,8 @@ function Sidebar({ onSearch, searchResults, showNames, setShowNames, gridSize, h
             <details className="dropdown-menu">
                 <summary>Import</summary>
                 {/* Import logic here */}
+                <h3>Import from decklist coming soon</h3>
             </details>
-
-            {/* Sample dropdown for "Changelog" */}
-            <details className="dropdown-menu">
-                <summary>Changelog</summary>
-                {/* Changelog details here */}
-            </details>
-
             {/* Add more dropdowns or other sidebar content as needed */}
         </div>
     );
diff --git a/mtg-topster-frontend/yarn.lock b/mtg-topster-frontend/yarn.lock
index f0b73447..934df29b 100644
--- a/mtg-topster-frontend/yarn.lock
+++ b/mtg-topster-frontend/yarn.lock
@@ -3004,6 +3004,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz"
@@ -3542,6 +3547,13 @@ css-has-pseudo@^3.0.4:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-loader@^6.5.1:
   version "6.8.1"
   resolved "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz"
@@ -3966,6 +3978,11 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-to-image@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz"
+  integrity sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==
+
 domelementtype@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz"
@@ -5169,6 +5186,14 @@ html-webpack-plugin@^5.5.0:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
+html2canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz"
@@ -9094,6 +9119,13 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
@@ -9439,6 +9471,13 @@ utils-merge@1.0.1:
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"