diff --git a/src/components/PageComponents/Messages/MessageItem.tsx b/src/components/PageComponents/Messages/MessageItem.tsx
index c1fc59bd..ca5a7bba 100644
--- a/src/components/PageComponents/Messages/MessageItem.tsx
+++ b/src/components/PageComponents/Messages/MessageItem.tsx
@@ -101,7 +101,7 @@ export const MessageItem = ({ message }: MessageProps) => {
   const isFailed = message.state === MessageState.Failed;
 
   const messageItemWrapperClass = cn(
-    "group w-full px-2 py-2 relative list-none",
+    "group w-full py-2 relative list-none",
     "rounded-md",
     "hover:bg-slate-300/15 dark:hover:bg-slate-600/20",
     "transition-colors duration-100 ease-in-out",
diff --git a/src/components/UI/Footer.tsx b/src/components/UI/Footer.tsx
index 9f6340f4..9eb56dec 100644
--- a/src/components/UI/Footer.tsx
+++ b/src/components/UI/Footer.tsx
@@ -7,7 +7,7 @@ type FooterProps = {
 const Footer = ({ className, ...props }: FooterProps) => {
   return (
     <footer
-      className={cn("flex mt-auto justify-center p-2 text-sm lg:text-md", className)}
+      className={cn("flex mt-auto justify-center py-2 px-4 text-sm lg:text-md", className)}
       {...props}
     >
       <p>
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 11ffb024..d82fc4d6 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -172,7 +172,7 @@ export const MessagesPage = () => {
       <div className="flex flex-1 flex-col overflow-hidden">
         {renderChatContent()}
 
-        <div className="flex-none dark:bg-slate-900 p-4">
+        <div className="flex-none dark:bg-slate-900 p-2">
           {(isBroadcast || isDirect) ? (
             <MessageInput
               to={isDirect ? activeChat : MessageType.Broadcast}