diff --git a/public/css/chat.css b/public/css/chat.css
new file mode 100644
index 0000000..56185c5
--- /dev/null
+++ b/public/css/chat.css
@@ -0,0 +1,247 @@
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background-color: #121212;
+ color: white;
+ font-family: Arial, sans-serif;
+}
+
+.bg-dark {
+ background-color: #121212 !important;
+}
+
+.chat-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.navbar {
+ flex-shrink: 0;
+}
+
+.chat-box {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ background-color: #1e1e1e;
+ overflow: hidden;
+}
+
+.messages {
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: 20px;
+ background-color: #2e2e2e;
+ border-radius: 5px;
+ display: flex;
+ flex-direction: column;
+}
+
+.message {
+ margin-bottom: 10px;
+ padding: 10px;
+ border-radius: 5px;
+}
+
+.alert {
+ margin-top: 10px;
+ text-align: center;
+ /* Center the text content */
+ display: flex;
+ /* Make sure the alert is a flex container */
+ justify-content: center;
+ /* Center flex items horizontally */
+ align-items: center;
+ /* Center flex items vertically (if needed) */
+}
+
+body,
+.container {
+ background-color: transparent;
+}
+
+/* Success Alert - Blue Theme */
+.alert-success {
+ background-color: #007bff;
+ /* Blue background similar to your button */
+ color: white;
+ /* White text */
+ border: none;
+ /* Remove border */
+ padding: 10px 20px;
+ /* Padding for spacing */
+ border-radius: 5px;
+ /* Rounded corners */
+ text-align: center;
+ /* Center text */
+ display: flex;
+ /* Flex layout */
+ justify-content: center;
+ /* Center horizontally */
+ align-items: center;
+ /* Center vertically */
+}
+
+/* Error Alert - Maroon Red Theme */
+.alert-danger {
+ background-color: #800000;
+ /* Maroon red background */
+ color: white;
+ /* White text */
+ border: none;
+ /* Remove border */
+ padding: 10px 20px;
+ /* Padding for spacing */
+ border-radius: 5px;
+ /* Rounded corners */
+ text-align: center;
+ /* Center text */
+ display: flex;
+ /* Flex layout */
+ justify-content: center;
+ /* Center horizontally */
+ align-items: center;
+ /* Center vertically */
+}
+
+/* Common alert styles */
+.alert {
+ margin-top: 10px;
+ /* Add margin at the top */
+ font-size: 14px;
+ /* Adjust the font size for readability */
+}
+
+.message.user {
+ background-color: #3a3a3a;
+ color: white;
+}
+
+.message.assistant {
+ background-color: #282828;
+ color: #f1f1f1;
+}
+
+.form-control {
+ background-color: #2e2e2e;
+ color: white;
+ border-color: #444;
+}
+
+.form-control:focus {
+ background-color: #2e2e2e;
+ color: white;
+ border-color: #888;
+}
+
+pre code {
+ background-color: #1e1e1e;
+ color: #f8f8f2;
+ padding: 10px;
+ border-radius: 5px;
+ display: block;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+.copy-button {
+ background-color: #444;
+ color: white;
+ border: none;
+ cursor: pointer;
+ padding: 5px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ display: inline-block;
+}
+
+.copy-button:hover {
+ background-color: #555;
+}
+
+.input-area {
+ background-color: #1e1e1e;
+ padding: 10px 20px;
+ z-index: 10;
+ flex-shrink: 0;
+ color: white;
+}
+
+.footer {
+ flex-shrink: 0;
+ text-align: center;
+ padding: 10px;
+ background-color: #121212;
+}
+
+.copy-button {
+ background-color: #444;
+ /* Button background color */
+ color: white;
+ /* Button text color */
+ border: none;
+ /* Remove border */
+ cursor: pointer;
+ /* Pointer cursor for interaction */
+ padding: 5px 10px;
+ /* Adjusted padding for smaller size */
+ margin-top: 5px;
+ /* Space at the top */
+ display: inline-block;
+ /* Keep the button in line */
+ font-size: 14px;
+ /* Slightly smaller font size for compactness */
+ width: 147px;
+ /* Prevent the button from stretching */
+ text-align: left;
+ /* Align the text left */
+}
+
+.copy-button:hover {
+ background-color: #555;
+ /* Darker shade on hover */
+}
+
+/* Add animations for the alerts */
+@keyframes fadeSlideIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeSlideOut {
+ 0% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+}
+
+/* Success Alert with fade-in and slide-down animation */
+.alert {
+ opacity: 0;
+ transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ animation: fadeSlideIn 0.5s forwards;
+}
+
+/* Add class for fading out when alert is being removed */
+.alert.fade-out {
+ animation: fadeSlideOut 0.5s forwards;
+}
\ No newline at end of file
diff --git a/views/chat.ejs b/views/chat.ejs
index 5345a0d..e6dff95 100644
--- a/views/chat.ejs
+++ b/views/chat.ejs
@@ -17,261 +17,14 @@
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
+
-