diff --git a/app/globals.css b/app/globals.css
index 22f95cba..0f50db5a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -124,7 +124,7 @@
   }
 
   .mobile-icons-bar {
-    height: 60px;
+    height: 48px;
     width: 100%;
     background-color: hsl(var(--background));
     border-top: 1px solid hsl(var(--border));
@@ -144,7 +144,7 @@
 
   .mobile-icons-bar-content {
     display: flex;
-    gap: 20px;
+    gap: 12px;
     padding: 0 10px;
     min-width: max-content;
     /* justify-content: space-between; */
@@ -169,7 +169,7 @@
     flex: 1; 
     width: 100%;
     overflow-y: auto;
-    padding: 12px;
+    padding: 8px;
     padding-bottom: 60px; 
     box-sizing: border-box;
     background-color: hsl(var(--card));
@@ -180,7 +180,7 @@
   .mobile-chat-messages-area {
     flex: 1; /* Changed from height: 40vh to take available space */
     overflow-y: auto;
-    padding: 12px;
+    padding: 8px;
     background-color: hsl(var(--card));
     color: hsl(var(--card-foreground));
     box-sizing: border-box;
@@ -189,7 +189,7 @@
 
   .mobile-chat-input-area {
     height: auto;
-    padding: 10px;
+    padding: 2px;
     background-color: hsl(var(--background));
     /* border-top: 1px solid hsl(var(--border)); */ /* Removed for cleaner separation */
     border-bottom: 1px solid hsl(var(--border)); /* Added for separation from messages area below */
@@ -205,7 +205,7 @@
     /* left: 0; */ /* Handled by parent flex */
     /* right: 0; */ /* Handled by parent flex */
     width: 100%; /* Ensure it takes full width of its container */
-    padding: 10px;
+    padding: 0;
     background-color: hsl(var(--background));
     /* border-top: 1px solid hsl(var(--border)); */ /* Removed to avoid double border */
     /* z-index: 30; */ /* No longer needed */
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index ca2fbc6f..b708a4c1 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -198,7 +198,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
         onSubmit={handleSubmit}
         className={cn(
           'max-w-full w-full',
-          isMobile ? 'px-2 pb-2 pt-1 h-full flex flex-col justify-center' : ''
+          isMobile ? 'p-0 h-full flex flex-col justify-center' : ''
         )}
       >
         <div
@@ -240,10 +240,10 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             value={input}
             data-testid="chat-input"
             className={cn(
-              'resize-none w-full min-h-12 rounded-fill border border-input pl-14 pr-12 pt-3 pb-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              'resize-none w-full rounded-fill border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
               isMobile
-                ? 'mobile-chat-input input bg-background'
-                : 'bg-muted'
+                ? 'mobile-chat-input input bg-background min-h-10 pl-4 pr-10 pt-2 pb-1'
+                : 'bg-muted min-h-12 pl-14 pr-12 pt-3 pb-1'
             )}
             onChange={e => {
               setInput(e.target.value)
diff --git a/components/copilot.tsx b/components/copilot.tsx
index b62b37ed..996c67e2 100644
--- a/components/copilot.tsx
+++ b/components/copilot.tsx
@@ -98,7 +98,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
       <Card className="p-4 w-full flex justify-between items-center">
         <div className="flex items-center space-x-2">
           <Sparkles className="w-4 h-4" />
-          <h5 className="text-muted-foreground text-xs truncate">
+          <h5 className="text-muted-foreground text-xs whitespace-normal break-words">
             {`error: ${error}`}
           </h5>
         </div>
@@ -114,7 +114,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
     return (
       <Card className="p-3 md:p-4 w-full flex justify-between items-center">
         <div className="flex items-center space-x-2 flex-1 min-w-0">
-          <h5 className="text-muted-foreground text-xs truncate">
+          <h5 className="text-muted-foreground text-xs whitespace-normal break-words">
             {updatedQuery()}
           </h5>
         </div>
@@ -125,7 +125,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
     return (
       <Card className="p-4 rounded-lg w-full mx-auto">
         <div className="mb-4">
-          <p className="text-lg text-foreground text-semibold ml-2">
+          <p className="text-lg text-foreground text-semibold ml-2 break-words">
             {data?.question || value.question}
             
             
@@ -146,7 +146,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
                   }
                 />
                 <label
-                  className="text-sm whitespace-nowrap pr-4"
+                  className="text-sm whitespace-normal break-words pr-4"
                   htmlFor={option?.value}
                 >
                   {option?.label}
diff --git a/components/empty-screen.tsx b/components/empty-screen.tsx
index 2c0f63e4..80ac8cbc 100644
--- a/components/empty-screen.tsx
+++ b/components/empty-screen.tsx
@@ -33,15 +33,15 @@ export function EmptyScreen({
 }) {
   return (
     <div className={`mx-auto w-full transition-all ${className}`}>
-      <div className="bg-background p-2">
-        <div className="mt-4 flex flex-col items-start space-y-2 mb-4">
+      <div className="bg-background p-1">
+        <div className="mt-2 flex flex-col items-start space-y-1 mb-2">
           {exampleMessages.map((item) => {
             const Icon = item.icon;
             return (
               <Button
                 key={item.message} // Use a unique property as the key.
                 variant="link"
-                className="h-auto p-0 text-base flex items-center"
+                className="h-auto p-0 text-base flex items-center whitespace-normal text-left"
                 name={item.message}
                 onClick={async () => {
                   submitMessage(item.message);
diff --git a/verification_mobile.png b/verification_mobile.png
new file mode 100644
index 00000000..8b97e796
Binary files /dev/null and b/verification_mobile.png differ