diff --git a/smartassist/src/static/css/clientstyle.css b/smartassist/src/static/css/clientstyle.css
index a160ceb..8169ee2 100644
--- a/smartassist/src/static/css/clientstyle.css
+++ b/smartassist/src/static/css/clientstyle.css
@@ -14,9 +14,10 @@ h1 {
 }
 
 #chatbox {
-    width: 80%;
-    max-width: 500px;
-    background-color: #fff;
+    width: calc(50% - 60px); /* Adjust width for input and button */
+    /* max-width: 500px; */
+    height: 80px;
+    background-color: #e1dcccb8;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
@@ -36,7 +37,8 @@ h1 {
 }
 
 .ai-response {
-    background-color: #f0f8ff;
+    /* background-color: #f0f8ff; */
+    background-color: #e1dcccb8;
     padding: 10px 15px;
     border-radius: 10px;
     text-align: left; /* Align AI responses to the left */
@@ -48,6 +50,7 @@ h1 {
     border: 1px solid #ccc;
     border-radius: 5px;
     margin-bottom: 10px;
+    font-family: 'Courier New', Courier, monospace; /* Fixed width typeface */
 }
 
 #userInput:focus {
@@ -66,4 +69,14 @@ button[onclick="sendMessage()"] {
     font-size: 16px;
     border-radius: 5px;
     cursor: pointer;
+    transition: background-color 0.3s; /* Smooth transition effect */
 }
+
+button[onclick="sendMessage()"]:hover {
+    background-color: #b2b2b2; /* Light Grey on hover */
+}
+
+button[onclick="sendMessage()"]:active {
+    background-color: #6f6f6f; /* Dark Grey when clicked */
+}
+