diff --git a/release/app/package-lock.json b/release/app/package-lock.json
index 8e7821d..c5c0c8c 100644
--- a/release/app/package-lock.json
+++ b/release/app/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "pile",
-  "version": "0.7.16",
+  "version": "0.7.20",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pile",
-      "version": "0.7.16",
+      "version": "0.7.20",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/main/main.ts b/src/main/main.ts
index 420f3bb..57afafe 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -1,5 +1,5 @@
 /* eslint global-require: off, no-console: off, promise/always-return: off */
-import { app, BrowserWindow, shell, protocol, net } from 'electron';
+import { app, BrowserWindow, shell, protocol, net, Menu } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
@@ -9,6 +9,8 @@ import path from 'path';
 
 import './ipc';
 
+Menu.setApplicationMenu(null);
+
 class AppUpdater {
   constructor() {
     log.transports.file.level = 'info';
diff --git a/src/renderer/App.css b/src/renderer/App.css
index 1cae8bb..aa01b71 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -41,8 +41,8 @@
     --primary: #fff;
     --secondary: #c1c1c1;
 
-    --base: #6297ff;
-    --base-hover: #b6ceff;
+    --base: #4d88ff;
+    --base-hover: #82acff;
     --base-yellow: #776b0e;
     --base-green: #128212;
     --base-red: #cb1d1d;
@@ -58,6 +58,60 @@
     --bg-secondary: #373737;
     --bg-tertiary: #575757;
     --bg-color-secondary-hover: rgb(108, 108, 108);
+
+    /* Theme 1 */
+    /* --translucent: rgba(13, 10, 35, 0.5);
+    --sidebar-width: 250px;
+    --nav-height: 52px;
+
+    --primary: #ffe9ff;
+    --secondary: #ab92ae;
+
+    --base: #d014e1;
+    --base-hover: #df38e5;
+    --base-yellow: #776b0e;
+    --base-green: #128212;
+    --base-red: rgb(255, 71, 71);
+    --base-red-light: #3d2323;
+
+    --active: #ff9500;
+    --active-hover: #df7000;
+    --active-text: #fff;
+
+    --border: #5f4263;
+
+    --bg: #251b24;
+    --bg-secondary: #481e51;
+    --bg-tertiary: #5a1a5f;
+    --bg-color-secondary-hover: rgb(114, 95, 122);
+    --bg-translucent: rgba(32, 10, 35, 0.45); */
+
+    /* Midnight */
+    /* --translucent: rgba(13, 10, 35, 0.5);
+    --sidebar-width: 250px;
+    --nav-height: 52px;
+
+    --primary: #e9f3ff;
+    --secondary: #9299ae;
+
+    --base: #4d8eff;
+    --base-hover: #8299ff;
+    --base-yellow: #776b0e;
+    --base-green: #128212;
+    --base-red: rgb(255, 25, 25);
+    --base-red-light: #3d2323;
+
+    --active: #ff9634;
+    --active-hover: #ff8000;
+    --active-text: #fff;
+
+    --border: #424a63;
+
+    --bg: #1b1d25;
+    --bg-secondary: #16233c;
+    --bg-tertiary: #1a375f;
+    --bg-color-secondary-hover: rgb(95, 100, 122);
+    --bg-translucent: rgba(10, 15, 35, 0.45); */
   }
 }
 
@@ -77,14 +131,13 @@
 
 body {
   position: relative;
-  color: var(--primary);
-  padding: 0;
-  margin: 0;
   width: 100vw;
-  overflow: hidden;
   height: 100vh;
-  /* background: var(--bg); */
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
   font-family: 'Inter', sans-serif;
+  color: var(--primary);
 }
 
 li {
diff --git a/src/renderer/context/PilesContext.js b/src/renderer/context/PilesContext.js
index 4303803..a256cc8 100644
--- a/src/renderer/context/PilesContext.js
+++ b/src/renderer/context/PilesContext.js
@@ -25,22 +25,17 @@ export const PilesContextProvider = ({ children }) => {
 
   const getConfig = async () => {
     const configFilePath = window.electron.getConfigPath();
-    // Setup piles.json if doesn't exist
+
+    // Setup new piles.json if doesn't exist,
+    // or read in the existing
     if (!window.electron.existsSync(configFilePath)) {
       window.electron.writeFile(configFilePath, JSON.stringify([]), (err) => {
-        if (err) {
-          console.error('Error writing to config');
-          return;
-        }
-
+        if (err) return;
         setPiles([]);
       });
     } else {
       await window.electron.readFile(configFilePath, (err, data) => {
-        if (err) {
-          console.error('Error reading file', err);
-          return;
-        }
+        if (err) return;
         const jsonData = JSON.parse(data);
         setPiles(jsonData);
       });
@@ -107,12 +102,35 @@ export const PilesContextProvider = ({ children }) => {
     writeConfig(newPiles);
   };
 
+  // Update current pile
+  const updateCurrentPile = (newPile) => {
+    const newPiles = piles.map((pile) => {
+      if (currentPile.path === path) {
+        setCurrentPile(newPile);
+        return newPile;
+      }
+      return pile;
+    });
+    writeConfig(newPiles);
+  };
+
+  // THEMES
+  const getTheme = () => {
+    return currentPile.theme ?? 'light';
+  };
+
+  const setTheme = (theme = 'light') => {
+    const valid = ['light', 'dark', 'purple', 'green', 'night'];
+    if (!valid.includes(theme)) return;
+    const _pile = { ...currentPile, theme: theme };
+    updateCurrentPile(_pile);
+  };
+
   const pilesContextValue = {
     piles,
     getCurrentPilePath,
     createPile,
     currentPile,
-    changeCurrentPile,
     deletePile,
   };
 
diff --git a/src/renderer/context/TimelineContext.js b/src/renderer/context/TimelineContext.js
index 3c5a105..b3df7eb 100644
--- a/src/renderer/context/TimelineContext.js
+++ b/src/renderer/context/TimelineContext.js
@@ -6,11 +6,16 @@ import {
   useCallback,
 } from 'react';
 import { useLocation } from 'react-router-dom';
+import debounce from 'renderer/utils/debounce';
 
 export const TimelineContext = createContext();
 
 export const TimelineContextProvider = ({ children }) => {
-  const [closestDate, setClosestDate] = useState(new Date());
+  const [closestDate, _setClosestDate] = useState(new Date());
+
+  const setClosestDate = debounce((val) => {
+    _setClosestDate(val);
+  }, 15);
 
   const timelineContextValue = { closestDate, setClosestDate };
 
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
index 3c1b96c..efbd603 100644
--- a/src/renderer/index.tsx
+++ b/src/renderer/index.tsx
@@ -6,6 +6,8 @@ const root = createRoot(container);
 
 root.render(
   <Router>
-    <App />
+    <div style={{ background: 'var(--bg-translucent)' }}>
+      <App />
+    </div>
   </Router>
 );
diff --git a/src/renderer/pages/Home/Home.module.scss b/src/renderer/pages/Home/Home.module.scss
index 0117d79..60b7f6e 100644
--- a/src/renderer/pages/Home/Home.module.scss
+++ b/src/renderer/pages/Home/Home.module.scss
@@ -7,7 +7,6 @@
     overflow-y: overlay;
     position: relative;
     -webkit-app-region: drag;
-
 }
 
 .wrapper {
diff --git a/src/renderer/pages/Pile/Editor/Editor.module.scss b/src/renderer/pages/Pile/Editor/Editor.module.scss
index 7e37c66..ca397b6 100644
--- a/src/renderer/pages/Pile/Editor/Editor.module.scss
+++ b/src/renderer/pages/Pile/Editor/Editor.module.scss
@@ -35,6 +35,37 @@
             margin-top: -2px;
         }
     }
+
+    &.responding {
+        p {
+            --bg-size: 400%;
+            background: linear-gradient(-90deg,
+                    var(--secondary),
+                    var(--primary),
+                    var(--secondary)) 0 0 / var(--bg-size) 100%;
+            color: transparent;
+            background-clip: text;
+            -webkit-background-clip: text;
+            transition: all ease-in-out 120ms;
+            animation: move-bg 4s infinite linear;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: no-preference) {
+        .responding {
+            p {
+                animation: move-bg 8s linear infinite;
+            }
+        }
+
+        @keyframes move-bg {
+            to {
+                background-position: calc(-1 * var(--bg-size)) 0;
+            }
+        }
+    }
+
 }
 
 .uneditable {
@@ -95,11 +126,11 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            height: 28px;
-            width: 34px;
+            height: 26px;
+            width: 26px;
             background: var(--bg-secondary);
             color: var(--secondary);
-            border-radius: 7px;
+            border-radius: 9px;
             transition: all ease-in-out 120ms;
             margin-right: 7px;
 
@@ -107,6 +138,7 @@
                 height: 23px;
                 width: 23px;
                 fill: var(--secondary);
+                transition: all ease-in-out 120ms;
             }
 
             &.active {
@@ -117,6 +149,10 @@
                 cursor: pointer;
                 background: var(--bg-tertiary);
                 color: var(--primary);
+
+                .icon {
+                    fill: var(--primary);
+                }
             }
 
             &:active {
diff --git a/src/renderer/pages/Pile/Editor/index.jsx b/src/renderer/pages/Pile/Editor/index.jsx
index 098f8a9..95a2373 100644
--- a/src/renderer/pages/Pile/Editor/index.jsx
+++ b/src/renderer/pages/Pile/Editor/index.jsx
@@ -52,7 +52,7 @@ export default function Editor({
       StarterKit,
       Typography,
       Placeholder.configure({
-        placeholder: 'What are you thinking?',
+        placeholder: isAI ? 'AI is thinking...' : 'What are you thinking?',
       }),
       CharacterCount.configure({
         limit: 100000,
@@ -192,7 +192,9 @@ export default function Editor({
       {editable ? (
         <EditorContent
           key={'new'}
-          className={`${styles.editor} ${isBig() ? styles.editorBig : ''}`}
+          className={`${styles.editor} ${isBig() && styles.editorBig} ${
+            isAIResponding && styles.responding
+          }`}
           editor={editor}
         />
       ) : (
diff --git a/src/renderer/pages/Pile/Pile.module.scss b/src/renderer/pages/Pile/Pile.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/renderer/pages/Pile/PileLayout.module.scss b/src/renderer/pages/Pile/PileLayout.module.scss
index e6e9b57..d9565ec 100644
--- a/src/renderer/pages/Pile/PileLayout.module.scss
+++ b/src/renderer/pages/Pile/PileLayout.module.scss
@@ -1,7 +1,4 @@
 .frame {
-    // position: fixed;
-    // top: 0;
-    // left: 0;
     position: relative;
     max-width: 100vw;
 }
@@ -10,17 +7,16 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 0.85em;
-    height: var(--nav-height);
-    -webkit-app-region: drag;
-    position: relative;
-    z-index: 4;
     position: sticky;
     top: 0;
-    transition: all ease-in-out 220ms, border ease-in-out 500ms;
+    z-index: 4;
     width: 100%;
+    height: var(--nav-height);
+    font-size: 0.85em;
     background: var(--bg);
+    transition: all ease-in-out 220ms, border ease-in-out 500ms;
     background: linear-gradient(to bottom, var(--bg), 90%, transparent);
+    -webkit-app-region: drag;
 
     .left {
         display: flex;
@@ -31,12 +27,10 @@
         transition: all ease-in-out 120ms;
         padding-bottom: 3px;
 
-
         .search {
             display: flex;
             margin-left: 12px;
             border-radius: 22px;
-            // width: 100%;
             width: 220px;
             align-items: center;
             -webkit-app-region: none;
@@ -153,7 +147,6 @@
         width: var(--sidebar-width);
         flex: 0 0 var(--sidebar-width);
         border-right: 1px solid rgba(0, 0, 0, 0.03);
-        transition: all ease-in-out 220ms;
 
         @media only screen and (max-width: 909px) {
             display: none;
@@ -200,14 +193,12 @@
     .content {
         position: relative;
         flex: 1 0 calc(100vw - var(--sidebar-width));
-        // width: calc(100vw - var(--sidebar-width));
         margin-left: var(--sidebar-width);
         font-size: 0.9em;
         background: var(--bg);
         box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.05);
         background: var(--bg);
         min-height: 100vh;
-        transition: all ease-in-out 220ms;
         height: 100vh;
         overflow-y: overlay;
         overflow-x: hidden;
@@ -220,7 +211,6 @@
         .left {
             display: flex;
             margin-left: 16px;
-            // margin-bottom: 4px;
             color: var(--secondary);
             opacity: 0.5;
             transition: all ease-in-out 120ms;
diff --git a/src/renderer/pages/Pile/Posts/Post/Post.module.scss b/src/renderer/pages/Pile/Posts/Post/Post.module.scss
index 4545acb..635b70c 100644
--- a/src/renderer/pages/Pile/Posts/Post/Post.module.scss
+++ b/src/renderer/pages/Pile/Posts/Post/Post.module.scss
@@ -58,6 +58,25 @@
                     width: 15px;
                     fill: var(--bg);
                     mix-blend-mode: luminosity;
+
+                    &.replying {
+                        animation: pulse 2s infinite;
+                    }
+
+                    @keyframes pulse {
+                        0% {
+                            transform: scale(0.8);
+                        }
+
+                        70% {
+                            transform: scale(1);
+                            opacity: 0.8;
+                        }
+
+                        100% {
+                            transform: scale(0.8);
+                        }
+                    }
                 }
             }
         }
@@ -194,14 +213,13 @@
 
         &:hover {
             cursor: pointer;
-            filter: contrast(1.15);
+            filter: contrast(1.25) brightness(1.1);
         }
 
         &:active {
             filter: contrast(0.85);
         }
 
-
         .icon {
             display: flex;
             justify-content: space-between;
diff --git a/src/renderer/pages/Pile/Posts/Post/index.jsx b/src/renderer/pages/Pile/Posts/Post/index.jsx
index 5c069f1..0dc4fbe 100644
--- a/src/renderer/pages/Pile/Posts/Post/index.jsx
+++ b/src/renderer/pages/Pile/Posts/Post/index.jsx
@@ -218,11 +218,15 @@ export default function Post({ postPath }) {
                   }}
                 ></div>
                 <div
-                  className={styles.ball}
+                  className={`${styles.ball} ${isAIResplying && styles.ai}`}
                   style={{
                     backgroundColor: highlightColor,
                   }}
-                ></div>
+                >
+                  {isAIResplying && (
+                    <AIIcon className={`${styles.iconAI} ${styles.replying}`} />
+                  )}
+                </div>
               </div>
               <div className={styles.right}>
                 <div className={styles.editor}>
diff --git a/src/renderer/pages/Pile/Posts/index.jsx b/src/renderer/pages/Pile/Posts/index.jsx
index 40ba0fd..6e94d10 100644
--- a/src/renderer/pages/Pile/Posts/index.jsx
+++ b/src/renderer/pages/Pile/Posts/index.jsx
@@ -12,13 +12,12 @@ const container = {
   hidden: { opacity: 0 },
   show: {
     opacity: 1,
-
     transition: {},
   },
 };
 
 const item = {
-  hidden: { opacity: 0, y: -20 },
+  hidden: { opacity: 0, y: -30 },
   show: {
     opacity: 1,
     y: 0,
@@ -35,7 +34,7 @@ export default function Posts() {
     return Array.from(index, ([postPath, data]) => {
       return (
         <motion.div key={postPath} variants={item}>
-          <Post key={postPath} postPath={postPath} />
+          <Post key={`post-${postPath}`} postPath={postPath} />
         </motion.div>
       );
     });
diff --git a/src/renderer/pages/Pile/index.tsx b/src/renderer/pages/Pile/index.tsx
index 70641ba..354c09a 100644
--- a/src/renderer/pages/Pile/index.tsx
+++ b/src/renderer/pages/Pile/index.tsx
@@ -1,5 +1,3 @@
-import { useParams } from 'react-router-dom';
-import styles from './Pile.module.scss';
 import PileLayout from './Layout';
 import NewPost from './NewPost';
 import Posts from './Posts';