diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index 43cec669..e465725b 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -243,7 +243,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
             {
                 props.isMobileWidth &&
                 <>
-                    <div className={`${styles.inputBox} w-full shadow-md dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 px-1`}>
+                    <div className={`${styles.inputBox} w-full pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] shadow-[0_-8px_10px_-6px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 px-1`}>
                         <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-10">
                             {agentIcons.map((icon, index) => (
                                 <Card
@@ -252,7 +252,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                                         `${selectedAgent === agents[index].slug ? convertColorToBorderClass(agents[index].color) : 'border-muted text-muted-foreground'} hover:cursor-pointer`
                                     }>
                                     <CardTitle
-                                        className='text-center text-xs font-medium flex justify-center items-center px-1.5 py-2'
+                                        className='text-center text-xs font-medium flex justify-center items-center px-1.5 py-1'
                                         onClick={() => setSelectedAgent(agents[index].slug)}>
                                         {icon} {agents[index].name}
                                     </CardTitle>
diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx
index ba04c85a..4865652e 100644
--- a/src/interface/web/app/settings/page.tsx
+++ b/src/interface/web/app/settings/page.tsx
@@ -936,7 +936,7 @@ export default function SettingsView() {
                                                     {apiKeys.map((key) => (
                                                         <TableRow key={key.token}>
                                                             <TableCell className="pl-0 py-3">{key.name}</TableCell>
-                                                            <TableCell className="grid grid-flow-col grid-cols-[1fr_auto] bg-secondary rounded-xl p-3">
+                                                            <TableCell className="grid grid-flow-col grid-cols-[1fr_auto] bg-secondary rounded-xl p-3 m-1">
                                                                 <span>
                                                                     {`${key.token.slice(0, 6)}...${key.token.slice(-4)}`}
                                                                 </span>