diff --git a/package-lock.json b/package-lock.json
index 01d628b..a9fcc91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1382,6 +1382,10 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
+
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.0.tgz",
       "integrity": "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==",
@@ -1392,6 +1396,9 @@
       }
     },
     "node_modules/@types/react-dom": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.1.tgz",
+      "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==",
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-brtBs0MnE9SMx7px208g39lRmC5uHZs96caOJfTjFcYSLHNamvaSMfJNagChVNkup2SdtOxKX1FDBkRSJe1ZAg==",
@@ -1493,6 +1500,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
+      "version": "2.8.15",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.15.tgz",
+      "integrity": "sha512-qsJ8/X+UypqxHXN75M7dF88jNK37dLBRW7LeUzCPz+TNs37G8cfWy9nWzS+LS//g600zrt2le9KuXt0rWfDz5Q==",
       "version": "2.8.12",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.12.tgz",
       "integrity": "sha512-vAPMQdnyKCBtkmQA6FMCBvU9qFIppS3nzyXnEM+Lo2IAhG4Mpjv9cCxMudhgV3YdNNJv6TNqXy97dfRVL2LmaQ==",
@@ -1558,6 +1568,9 @@
       }
     },
     "node_modules/caniuse-lite": {
+      "version": "1.0.30001749",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001749.tgz",
+      "integrity": "sha512-0rw2fJOmLfnzCRbkm8EyHL8SvI2Apu5UbnQuTsJ0ClgrH8hcwFooJ1s5R0EP8o8aVrFu8++ae29Kt9/gZAZp/Q==",
       "version": "1.0.30001748",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001748.tgz",
       "integrity": "sha512-5P5UgAr0+aBmNiplks08JLw+AW/XG/SurlgZLgB1dDLfAw7EfRGxIwzPHxdSCGY/BTKDqIVyJL87cCN6s0ZR0w==",
@@ -1686,6 +1699,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
+      "version": "1.5.234",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.234.tgz",
+      "integrity": "sha512-RXfEp2x+VRYn8jbKfQlRImzoJU01kyDvVPBmG39eU2iuRVhuS6vQNocB8J0/8GrIMLnPzgz4eW6WiRnJkTuNWg==",
       "version": "1.5.230",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.230.tgz",
       "integrity": "sha512-A6A6Fd3+gMdaed9wX83CvHYJb4UuapPD5X5SLq72VZJzxHSY0/LUweGXRWmQlh2ln7KV7iw7jnwXK7dlPoOnHQ==",
@@ -2514,6 +2530,9 @@
       }
     },
     "node_modules/react-router": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
+      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
       "version": "7.9.3",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.3.tgz",
       "integrity": "sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==",
@@ -2536,6 +2555,12 @@
       }
     },
     "node_modules/react-router-dom": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
+      "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.9.4"
       "version": "7.9.3",
       "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.3.tgz",
       "integrity": "sha512-1QSbA0TGGFKTAc/aWjpfW/zoEukYfU4dc1dLkT/vvf54JoGMkW+fNA+3oyo2gWVW1GM7BxjJVHz5GnPJv40rvg==",
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..ce96794
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..7e33f37
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,8 @@
+{
+  "name": "Sonara Synth",
+  "short_name": "Sonara",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000",
+  "theme_color": "#00ff88"
+}
diff --git a/src/components/PresetControls.jsx b/src/components/PresetControls.jsx
new file mode 100644
index 0000000..5a9dd14
--- /dev/null
+++ b/src/components/PresetControls.jsx
@@ -0,0 +1,35 @@
+import React, { useRef } from "react";
+import { savePreset, loadPreset } from "../utils/presetManager";
+
+export default function PresetControls({ synthState, onPresetLoad }) {
+  const fileInputRef = useRef();
+
+  const handleLoadClick = () => fileInputRef.current.click();
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    loadPreset(
+      file,
+      (preset) => {
+        onPresetLoad(preset);
+        alert("✅ Preset loaded successfully!");
+      },
+      (error) => alert("❌ Error loading preset: " + error)
+    );
+  };
+
+  return (
+    <div className="preset-controls" style={{ marginTop: "1rem" }}>
+      <button onClick={() => savePreset(synthState)}>💾 Save Preset</button>
+      <button onClick={handleLoadClick}>📂 Load Preset</button>
+      <input
+        type="file"
+        accept="application/json"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        style={{ display: "none" }}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/Sonara.jsx b/src/pages/Sonara.jsx
index 5f1f2b9..099c5d8 100644
--- a/src/pages/Sonara.jsx
+++ b/src/pages/Sonara.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import EQ from '../components/Equalizers';
 import Keys from '../components/Keys';
 import ADSR from '../components/Adsr';
+import PresetControls from '../components/PresetControls';
 import { Voice } from '../audio/Voice';
 
 import { applyEnvelope } from '../utils/applyEnvelope';
@@ -10,12 +11,28 @@ function Sonara() {
     const displayWidth = 800;
     const displayHeight = 350;
 
-    const [adsr, setAdsr] = useState({ attack: 0.1, decay: 0.2, sustain: 0.7, release: 0.5 });
+    const DEFAULT_ADSR = { attack: 0.1, decay: 0.2, sustain: 0.7, release: 0.5 };
+    const DEFAULT_EQ = { nodes: [], curves: [] };
+    const DEFAULT_WAVEFORM = 'sine';
+    const DEFAULT_OCTAVE = 4;
+
+    const [adsr, setAdsr] = useState(DEFAULT_ADSR);
+    const [eq, setEq] = useState(DEFAULT_EQ);
+    const [waveform, setWaveform] = useState(DEFAULT_WAVEFORM);
+    const [octave, setOctave] = useState(DEFAULT_OCTAVE);
     const [wasmModule, setWasmModule] = useState(null);
     const [rawwave, setRawwave] = useState([]);
+
     const audioContextRef = useRef(null);
     const voicesRef = useRef({});
-    const [eq, setEq] = useState({ nodes: [], curves: [] });
+
+    const synthState = {
+    adsr,
+    eq,
+    waveform,
+    octave,
+    rawwave,
+    };
 
     useEffect(() => {
         async function initWasmModule() {
@@ -66,9 +83,20 @@ function Sonara() {
         }
     };
 
+    const handlePresetLoad = (preset) => {
+    if (preset.adsr) setAdsr(preset.adsr);
+    if (preset.eq) setEq(preset.eq);
+    if (preset.waveform) setWaveform(preset.waveform);
+    if (preset.octave) setOctave(preset.octave);
+    if (preset.rawwave) setRawwave(preset.rawwave);
+    };
+
     return (
         <div className="App">
             <h1>Sonara</h1>
+
+            <PresetControls synthState={synthState} onPresetLoad={handlePresetLoad} /> 
+
             <Keys onNoteDown={handleNoteDown} onNoteUp={handleNoteUp} />
             <ADSR adsr={adsr} setAdsr={setAdsr} />
             <EQ
diff --git a/src/styles/display.css b/src/styles/display.css
index 5e3e1bd..2d25808 100644
--- a/src/styles/display.css
+++ b/src/styles/display.css
@@ -75,4 +75,19 @@
   .display-canvas {
     border-width: 1px !important;
   }
-}
\ No newline at end of file
+}
+
+// new style adding
+.preset-controls button {
+  background-color: #1f1f1f;
+  color: #fff;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.preset-controls button:hover {
+  background-color: #3c3c3c;
+}
diff --git a/src/utils/presetManager.js b/src/utils/presetManager.js
new file mode 100644
index 0000000..4b273e2
--- /dev/null
+++ b/src/utils/presetManager.js
@@ -0,0 +1,34 @@
+// handles JSON export/import logic safely
+export function savePreset(synthState) {
+  try {
+    const json = JSON.stringify(synthState, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `preset_${timestamp}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    alert("✅ Preset saved successfully!");
+  } catch (error) {
+    console.error("Error saving preset:", error);
+    alert("❌ Failed to save preset.");
+  }
+}
+
+export function loadPreset(file, onLoad, onError) {
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    try {
+      const preset = JSON.parse(e.target.result);
+      // Basic validation
+      if (!preset.adsr || !preset.eq) throw new Error("Invalid preset format");
+      onLoad(preset);
+    } catch (err) {
+      console.error("Error loading preset:", err);
+      onError?.(err.message);
+    }
+  };
+  reader.readAsText(file);
+}