diff --git a/web-app/package-lock.json b/web-app/package-lock.json
index 0aabb64..b874e30 100644
--- a/web-app/package-lock.json
+++ b/web-app/package-lock.json
@@ -18,6 +18,7 @@
 				"express": "^5.1.0",
 				"helmet": "^8.1.0",
 				"lucide-react": "^0.546.0",
+				"motion": "^12.23.24",
 				"pg": "^8.16.3",
 				"react": "^19.2.0",
 				"react-bootstrap": "^2.10.10",
@@ -3652,6 +3653,39 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/framer-motion": {
+			"version": "12.23.24",
+			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+			"integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+			"license": "MIT",
+			"dependencies": {
+				"motion-dom": "^12.23.23",
+				"motion-utils": "^12.23.6",
+				"tslib": "^2.4.0"
+			},
+			"peerDependencies": {
+				"@emotion/is-prop-valid": "*",
+				"react": "^18.0.0 || ^19.0.0",
+				"react-dom": "^18.0.0 || ^19.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@emotion/is-prop-valid": {
+					"optional": true
+				},
+				"react": {
+					"optional": true
+				},
+				"react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/framer-motion/node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"license": "0BSD"
+		},
 		"node_modules/fresh": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@@ -5236,6 +5270,53 @@
 				"node": ">= 18"
 			}
 		},
+		"node_modules/motion": {
+			"version": "12.23.24",
+			"resolved": "https://registry.npmjs.org/motion/-/motion-12.23.24.tgz",
+			"integrity": "sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==",
+			"license": "MIT",
+			"dependencies": {
+				"framer-motion": "^12.23.24",
+				"tslib": "^2.4.0"
+			},
+			"peerDependencies": {
+				"@emotion/is-prop-valid": "*",
+				"react": "^18.0.0 || ^19.0.0",
+				"react-dom": "^18.0.0 || ^19.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@emotion/is-prop-valid": {
+					"optional": true
+				},
+				"react": {
+					"optional": true
+				},
+				"react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/motion-dom": {
+			"version": "12.23.23",
+			"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+			"integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+			"license": "MIT",
+			"dependencies": {
+				"motion-utils": "^12.23.6"
+			}
+		},
+		"node_modules/motion-utils": {
+			"version": "12.23.6",
+			"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+			"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+			"license": "MIT"
+		},
+		"node_modules/motion/node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"license": "0BSD"
+		},
 		"node_modules/ms": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/web-app/package.json b/web-app/package.json
index 7027cf2..2011130 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -23,6 +23,7 @@
 		"express": "^5.1.0",
 		"helmet": "^8.1.0",
 		"lucide-react": "^0.546.0",
+		"motion": "^12.23.24",
 		"pg": "^8.16.3",
 		"react": "^19.2.0",
 		"react-bootstrap": "^2.10.10",
diff --git a/web-app/src/app/index.jsx b/web-app/src/app/index.jsx
index 8ce7147..86a06e6 100644
--- a/web-app/src/app/index.jsx
+++ b/web-app/src/app/index.jsx
@@ -3,7 +3,7 @@ import ChatLayout from "src/components/layouts/chat-layout";
 
 function App() {
   return (
-    <div className="dark min-h-screen bg-gray-950 text-white flex items-center justify-center p-6">
+    <div className="dark min-h-screen bg-gray-950 text-white flex justify-center pt-12">
       <ChatLayout />
     </div>
   );
diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx
index df4f299..1193aa8 100644
--- a/web-app/src/components/layouts/chat-layout.jsx
+++ b/web-app/src/components/layouts/chat-layout.jsx
@@ -25,7 +25,7 @@ export default function ChatLayout() {
   }
 
   return (
-    <div className="flex flex-col justify-between h-full w-full max-w-4xl gap-4 p-4">
+    <div className="w-full max-w-4xl gap-4 p-4">
       <ChatHeader />
       <ChatWindow messages={messages} />
       <MessageInput onSend={handleSend} />
diff --git a/web-app/src/components/ui/button/delete-button.jsx b/web-app/src/components/ui/button/delete-button.jsx
index 53a5367..61b4df0 100644
--- a/web-app/src/components/ui/button/delete-button.jsx
+++ b/web-app/src/components/ui/button/delete-button.jsx
@@ -1,9 +1,15 @@
 import { Flame } from "lucide-react";
+import { motion } from "motion/react";
 
 export default function FlameButton({ onClick }) {
   return (
-    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+    <motion.button
+      onClick={onClick}
+      className="bg-gray-700 p-2 rounded-2xl"
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
       <Flame />
-    </button>
+    </motion.button>
   );
 }
diff --git a/web-app/src/components/ui/button/down-button.jsx b/web-app/src/components/ui/button/down-button.jsx
index e402e8f..c5a5d9f 100644
--- a/web-app/src/components/ui/button/down-button.jsx
+++ b/web-app/src/components/ui/button/down-button.jsx
@@ -1,10 +1,16 @@
 import React from "react";
 import { ArrowDown } from "lucide-react";
+import { motion } from "motion/react";
 
 export default function DownButton({ onClick }) {
   return (
-    <button onClick={onClick} className="bg-gray-700 p-2 rounded-2xl">
+    <motion.button
+      onClick={onClick}
+      className="bg-gray-700 p-2 rounded-2xl"
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
       <ArrowDown />
-    </button>
+    </motion.button>
   );
 }
diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx
index 1c57627..97f8dfa 100644
--- a/web-app/src/components/ui/chat/chat-header.jsx
+++ b/web-app/src/components/ui/chat/chat-header.jsx
@@ -3,9 +3,9 @@ import React from "react";
 export default function ChatHeader({ title = "Title of Chat" }) {
   return (
     <div className="w-full flex justify-center">
-      <header className="text-slate-100 fixed top-2">
+      <header className="text-slate-100 fixed top-4 ">
         <div>
-          <h1 className="text-lg font-semibold shadow-xl bg-gray-900 px-6 py-2 rounded-4xl">
+          <h1 className="text-lg font-semibold shadow-lg shadow-indigo-600 bg-gray-900 px-6 py-2 rounded-4xl border-2 border-gray-800">
             {title}
           </h1>
         </div>
diff --git a/web-app/src/components/ui/chat/chat-window.jsx b/web-app/src/components/ui/chat/chat-window.jsx
index a012c6c..ac9e3ff 100644
--- a/web-app/src/components/ui/chat/chat-window.jsx
+++ b/web-app/src/components/ui/chat/chat-window.jsx
@@ -5,7 +5,7 @@ function MessageBubble({ message }) {
   return (
     <div className={`flex ${isUser ? "justify-end" : "justify-start"} py-2`}>
       <div
-        className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-gray-700 text-slate-100"}`}
+        className={`p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-gray-700 text-slate-100"}`}
       >
         <div className="text-sm">{message.content}</div>
       </div>
@@ -15,7 +15,7 @@ function MessageBubble({ message }) {
 
 export default function ChatWindow({ messages }) {
   return (
-    <div className="flex-1 overflow-auto px-2 pb-16">
+    <div className="flex-1 overflow-auto px-2 pb-20">
       <div className="">
         {messages.map((m, i) => (
           <MessageBubble key={i} message={m} />
diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx
index cdc8e6a..654b11b 100644
--- a/web-app/src/components/ui/chat/message-input.jsx
+++ b/web-app/src/components/ui/chat/message-input.jsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import DeleteButton from "src/components/ui/button/delete-button";
 import DownButton from "src/components/ui/button/down-button";
-import { MessageCirclePlus } from "lucide-react";
+import { motion } from "motion/react";
+import { BotMessageSquare } from "lucide-react";
 
 export default function MessageInput({ onSend }) {
   const [text, setText] = useState("");
@@ -15,13 +16,16 @@ export default function MessageInput({ onSend }) {
 
   return (
     <div className="w-full flex justify-center">
-      <footer className="fixed bottom-2 max-w-2xl w-full px-4">
+      <footer className="fixed bottom-6 max-w-2xl w-full px-4">
         <div className="flex flex-col gap-2">
           <div className="flex justify-between">
             <DeleteButton></DeleteButton>
             <DownButton></DownButton>
           </div>
-          <form onSubmit={handleSubmit} className="bg-gray-900 rounded-2xl">
+          <form
+            onSubmit={handleSubmit}
+            className="bg-gray-900 rounded-2xl border-2 border-gray-800 shadow-lg shadow-indigo-600"
+          >
             <div className="flex p-2 shadow-xl">
               <input
                 value={text}
@@ -29,12 +33,14 @@ export default function MessageInput({ onSend }) {
                 placeholder="Type a message..."
                 className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none"
               />
-              <button
+              <motion.button
                 type="submit"
                 className="flex gap-2 px-4 py-2 bg-gray-700 rounded-xl ml-4"
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
               >
-                Send
-              </button>
+                <BotMessageSquare />
+              </motion.button>
             </div>
           </form>
         </div>