diff --git a/src/App.tsx b/src/App.tsx
index d841827..86842aa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -132,7 +132,7 @@ const AppLayout: FC = () => {
   return (
     <>
       <Sidebar />
-      <div className="drawer-content flex flex-col w-full h-screen px-2 bg-base-300">
+      <div className="drawer-content flex flex-col w-full h-screen px-1 md:px-2 bg-base-300">
         <Header />
         <main
           className="grow flex flex-col overflow-auto bg-base-100 rounded-xl"
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index b6db82f..db38ec1 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -83,7 +83,7 @@ export function ChatInput({
 
   return (
     <div
-      className="shrink-0 w-full lg:max-w-[900px] bg-base-100 mx-auto p-2"
+      className="shrink-0 w-full lg:max-w-[900px] bg-base-100 mx-auto p-1 md:p-2"
       aria-label="Chat input"
     >
       <DropzoneArea
@@ -91,7 +91,7 @@ export function ChatInput({
         extraContext={extraContext}
         disabled={isGenerating}
       >
-        <div className="bg-base-200 flex flex-col lg:border-1 lg:border-base-content/30 rounded-lg shadow-md p-2">
+        <div className="bg-base-200 flex flex-col lg:border-1 lg:border-base-content/30 rounded-lg shadow-sm md:shadow-md p-2">
           <textarea
             // Default (mobile): Enable vertical resize, overflow auto for scrolling if needed
             // Large screens (lg:): Disable manual resize, apply max-height for autosize limit
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 99905c6..12a3697 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 export const Footer: FC = () => {
   return (
     <footer
-      className="w-full py-1 text-base-content/70 text-xs text-center"
+      className="w-full max-md:pb-4 py-1 text-base-content/70 text-xs text-center"
       tabIndex={0}
       aria-description="Statement"
     >