diff --git a/src/app.tsx b/src/app.tsx
index 2848391..7af532c 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -91,7 +91,7 @@ export function App() {
 
   return (
     <div className="flex text-sm h-screen bg-slate-200 dark:bg-slate-800 dark:text-white">
-      <div className="flex flex-col h-full p-4 border-r-indigo-500 border-2 dark:border-slate-800 dark:border-r-indigo-500 dark:text-black">
+      <div className="flex flex-col h-full p-2 border-r-indigo-500 border-2 dark:border-slate-800 dark:border-r-indigo-500 dark:text-black">
         <div className="grow overflow-scroll">
           <button
             className="bg-violet-300 p-1 rounded hover:bg-violet-400"
diff --git a/src/chatbox.tsx b/src/chatbox.tsx
index 5ddc350..16c2edf 100644
--- a/src/chatbox.tsx
+++ b/src/chatbox.tsx
@@ -137,7 +137,7 @@ export default function ChatBOX(props: {
 
   const [showSettings, setShowSettings] = useState(false);
   return (
-    <div className="grow flex flex-col p-4 dark:text-black">
+    <div className="grow flex flex-col p-2 dark:text-black">
       <Settings
         chatStore={chatStore}
         setChatStore={setChatStore}