diff --git a/views/assets/css/main.css b/views/assets/css/main.css
index fe1bc4e..aa40adc 100644
--- a/views/assets/css/main.css
+++ b/views/assets/css/main.css
@@ -33,6 +33,7 @@ body {
 	flex-direction: row; /* Change to column for vertical layout */
 	width: 100%;
 	gap: 12px;
+	max-height: 100vh;
 }
 /* MyLife Menu Navigation */
 .navbar {
@@ -93,10 +94,9 @@ body {
 	border: rgb(0, 25, 51, .3) 2px dotted;
     border-radius: 22px;
 	box-sizing: border-box;
+	flex-basis: 65%;
 	flex-grow: 1; /* Takes up the remaining space */
-    margin: 2px; /* No space outside the container */
-    max-height: none; /* Adjust the max height as needed */
-	max-width: 65%; /* Adjust min-width as needed */
+	height: fit-content;
     padding: 0px; /* Adds space inside the container */
 	position: relative; /* Needed to position pseudo-elements or child divs */
 }
@@ -127,19 +127,36 @@ body {
     color: #ffffff; /* White text for better readability */
     margin-left: 0;
 }
+.button.chat-submit {
+	flex: 0 0 auto;
+	color: rgba(65, 84, 104, 0.85);
+	background-color: rgba(183, 203, 225, 0.85);
+	margin: 0px;
+	white-space: nowrap; /* Prevents text wrapping in the button */
+}
+.button.chat-submit:hover {
+	background-color: rgba(195, 203, 52, 0.85);
+	color: #061320;
+}
+.button.chat-submit:focus {
+    outline: none; /* Remove the default focus outline */
+    box-shadow: 0 0 8px 2px rgba(255, 255, 0, 0.6); /* Yellow glow */
+}
+.button.chat-submit:disabled {
+	background-color: rgba(63, 75, 83, 0.2);
+	border-color: rgba(146, 157, 163, .7);
+	color: rgba(146, 157, 163, .9);
+}
 .chat-bubble {
-    display: flex; /* Set as a flex container */
-	flex-direction: column;
-    align-items: center; /* Center items vertically inside the bubble */
-    justify-content: flex-start; /* Align content to the start (left) */
     border-radius: 18px; /* Rounded corners for a modern look */
-    padding: 10px 15px; /* Padding for content inside bubble */
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
     margin-bottom: 0.5rem;
-    max-width: 70%;
-    min-width: 20%;
+    max-width: 80%;
+    min-width: 30%;
+    padding: 10px 15px; /* Padding for content inside bubble */
+	font-size: .9em;
     width: fit-content; /* Fit the content's width */
     word-wrap: break-word; /* Ensure long words don't overflow */
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
 }
 .chat-container {
 	background-image: 
@@ -152,33 +169,18 @@ body {
         url('../jpg/cosmos.jpg'); /* Your original background image */
     background-size: cover; /* Ensures the image covers the whole area */
     background-position: center; /* Centers the image */
-    border-radius: 0px;
+    border-radius: 0 0 22px 22px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 	box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    max-height: calc(100vh - 100px); /* Adjust if necessary */
-    overflow-y: auto; /* Keeps vertical scrolling */
-    overflow-x: hidden; /* Prevents horizontal scrolling */
-    padding: 20px;
-}
-/* Styles the scrollbar itself */
-.chat-container::-webkit-scrollbar {
-    width: 10px; /* Adjust the width of the scrollbar */
-}
-/* Styles the track of the scrollbar */
-.chat-container::-webkit-scrollbar-track {
-    background: #f1f1f1; /* Color of the track */
-    border-radius: 10px; /* Optional: adds rounded corners to the track */
-}
-/* Styles the handle (thumb) of the scrollbar */
-.chat-container::-webkit-scrollbar-thumb {
-    background: #888; /* Color of the thumb */
-    border-radius: 10px; /* Optional: adds rounded corners to the thumb */
-}
-/* Changes the color of the thumb when hovered over or clicked */
-.chat-container::-webkit-scrollbar-thumb:hover {
-    background: #555; /* Darker shade on hover */
+	height: fit-content;
+	justify-content: space-between;
+	min-height: 50vh;
+    max-height: 80vh;
+	overflow: visible;
+    padding: 13px;
+	position: relative;
 }
 .chat-input {
 	align-items: center;
@@ -186,7 +188,8 @@ body {
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: right;
-	margin-top: 3rem;
+	margin-top: 1rem;
+	overflow: visible;
 }
 .chat-input input {
 	background-color: #ffffff; /* White background color */
@@ -196,23 +199,17 @@ body {
 	margin: 6px 12px; /* Margin for space outside the container */
 	padding: 8px; /* Padding for space inside the container */
 }
-.chat-input label {
-	flex: 0 0 auto;
-	font-weight: bold;
-	font-style: normal;
-	font-stretch: condensed;
-	color: rgba(240, 240, 240, .9);
-	font-size: 24px;
-}
 .chat-input textarea {
     background-color: #ffffff; /* White background color */
     border: 1px solid #ccc; /* Border color */
     border-radius: 12px; /* Rounded corners */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
     flex: 1;
+	flex-shrink: 0;
     font-size: 1rem; /* Adjust font size */
     line-height: 1.5; /* Adjust line height for better readability */
-	max-height: 200px; /* Adjust this value as needed */
+	min-height: 100%;
+	/* max-height: 200px; /* Adjust this value as needed */
     margin: 6px 12px; /* Margin for space outside the container */
     overflow-y: auto; /* Adds a scrollbar when content exceeds max-height */
     padding: 8px; /* Padding for space inside the container */
@@ -240,38 +237,79 @@ body {
 .chat-output {
 	display: flex;
 	flex-direction: column;
-	flex-wrap: wrap;
+	flex-grow: 1;
+	flex-wrap: nowrap;
 	justify-content: flex-start;
+	max-height: fit-content;
+	overflow-x: hidden;
+    overflow-y: scroll;
 }
-.button.chat-submit {
-	flex: 0 0 auto;
-	color: rgba(65, 84, 104, 0.85);
-	background-color: rgba(183, 203, 225, 0.85);
-	margin: 0px;
-	white-space: nowrap; /* Prevents text wrapping in the button */
+/* Styles the scrollbar itself */
+.chat-output::-webkit-scrollbar {
+    width: 6px; /* Adjust the width of the scrollbar */
 }
-.button.chat-submit:hover {
-	background-color: rgba(195, 203, 52, 0.85);
-	color: #061320;
+/* Styles the track of the scrollbar */
+.chat-output::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1); /* Color of the track */
+    border-radius: 10px; /* Optional: adds rounded corners to the track */
 }
-.button.chat-submit:focus {
-    outline: none; /* Remove the default focus outline */
-    box-shadow: 0 0 8px 2px rgba(255, 255, 0, 0.6); /* Yellow glow */
+/* Styles the handle (thumb) of the scrollbar */
+.chat-output::-webkit-scrollbar-thumb {
+    background: rgba(232, 226, 183, .5); /* Color of the thumb */
+    border-radius: 10px; /* Optional: adds rounded corners to the thumb */
 }
-.button.chat-submit:disabled {
-	background-color: rgba(63, 75, 83, 0.2);
-	border-color: rgba(146, 157, 163, .7);
-	color: rgba(146, 157, 163, .9);
+/* Changes the color of the thumb when hovered over or clicked */
+.chat-output::-webkit-scrollbar-thumb:hover {
+    background: rgba(214, 198, 75, 0.5); /* Darker shade on hover */
+}
+.label {
+	color: rgba(240, 240, 240, .9);
+	flex: 0 0 auto;
+	font-size: 24px;
+	font-style: normal;
+	font-stretch: condensed;
+	font-weight: bold;
+	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+	transition: visibility 0s, opacity 0.7s linear;
+}
+.label-spinner {
+    position: absolute;
+	background-color: whitesmoke;
+    opacity: 0; /* Max opacity of 50% */
+}
+.label-spinner-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Center contents horizontally */
+    min-height: 50px; /* Ensure enough height for spinner and label */
 }
 .member-bubble, .user-bubble {
     background-color: rgba(225, 245, 254, 1); /* A light shade of blue for the user */
     color: #333333; /* Dark grey for contrast and easy reading */
     margin-left: auto;
+	margin-right: 12px;
 }
 #message {
-	flex-grow: 1;
 	margin-right: 0.5rem;
 }
+.spinner-green-glow {
+	background-image: radial-gradient(circle, #4b94a1, #d2f35e);
+	filter: blur(.2em); /* Adjust the pixel value for the level of blur */
+}
+.spinner-blue {
+	animation-delay: 0s;
+	background-image: radial-gradient(circle, #4b7982, #74a2ff);
+	filter: blur(.15em); /* Adjust the pixel value for the level of blur */
+}
+.spinner-grow {
+    animation: spinner-grow 2.6s infinite ease-in-out;
+	animation-delay: 2s;
+    border-radius: 50%;
+    display: inline-block;
+    height: 1.5rem;
+    width: 1.5rem;
+}
 #response {
 	margin-top: 1rem;
 }
@@ -342,9 +380,9 @@ body {
 	display: none;
 }
 .hidden {
-  transition: opacity 1s ease;
-  opacity: 0;
-  display: none; /* Initially not displayed */
+	transition: opacity 1s ease;
+	opacity: 0;
+	display: none; /* Initially not displayed */
 }
 .ital {
 	font-style: italic;
@@ -384,12 +422,11 @@ body {
 	border: rgb(0, 25, 51, .3) 2px dotted;
     border-radius: 22px;
 	box-sizing: border-box;
-    flex-basis: 300px; /* Adjust width of the sidebar */
-	padding: 1em;
+	color: #221a30;
 	flex-basis: 35%;
 	font-family: "Optima", "Segoe UI", "Candara", "Calibri", "Segoe", "Optima", Arial, sans-serif;
-	color: #221a30;
-	font-size: 0.9em;
+	font-size: 0.8em;
+	padding: 1em;
 }
 .teaser {
 	display: flex;
@@ -509,9 +546,20 @@ body {
 /* media queries */
 @media screen and (min-width: 1024px) {
     body {
-        margin: 3em; /* Increased margin for larger screens */
+        margin-right: 3em; /* Increased margin for larger screens */
         max-width: 1024px; /* Set a max-width to center the content */
         margin-left: auto; /* Center the body horizontally */
         margin-right: auto;
     }
+}
+@media screen and (max-width: 768px) { /* Adjust the max-width as needed */
+    .page-column-collection {
+        flex-direction: column;
+    }
+	.main-content {
+		max-width: 100%;
+	}
+	.sidebar {
+		flex-basis: 100%;
+	}
 }
\ No newline at end of file
diff --git a/views/index.html b/views/index.html
index ae30f34..572304a 100644
--- a/views/index.html
+++ b/views/index.html
@@ -1,13 +1,15 @@
 <hr><!-- begin with break for scroll -->
 <div class="chat-container">
-	<div class="chat-output" id="chat">
+	<div class="chat-output" id="chat-output">
 		<!-- Agent and User messages will be added via innerHTML here -->
 	</div>
-	<div id="agent-spinner" class="spinner-grow text-light" role="status">
-		<span class="visually-hidden"></span>
-	</div>
-	<div class="chat-input" name="chat-form" id="chat-form">
-		<label for="user-chat-message">chat</label>
+	<div class="chat-input" name="chat-input" id="chat-input">
+		<div class="label-spinner-container">
+			<div id="agent-spinner" class="label-spinner spinner-grow spinner-green-glow" role="status">
+				<span class="visually-hidden"></span>
+			</div>
+			<label class="label" for="user-chat-message" id="user-chat-label">chat</label>
+		</div>
 		<input id="user-chat-message" name="user-chat-message" required />
 		<button class="button chat-submit" id="submit-button" type="submit" disabled>Submit</button>
 		<!-- ... other buttons ... -->
@@ -18,18 +20,24 @@
 	</div>
 </div>
 <script>
+/* page variables */
+/* constants */
 const awaitButton = document.getElementById('await-button');
 const agentSpinner = document.getElementById('agent-spinner');
-const chatColumn = document.getElementById('chat');
-const chatForm = document.getElementById('chat-form');
+const chatContainer = document.querySelector('.chat-container');
+const chatLabel = document.getElementById('user-chat-label');
+const chatOutput = document.getElementById('chat-output');
+const chatInput = document.getElementById('chat-input');
 const submitButton = document.getElementById('submit-button');
 const _greeting = [
 	`Hi, I'm <%= avatar.name %>, so nice to meet you!`,
 	`To get started, tell me a little bit about something or someone that is really important to you &mdash; or ask me a question about MyLife.`
 ];
+/* vars */
 let _chatBubbleCount = 0;
-let _thread_id = null;
 let messageInput = document.getElementById('user-chat-message');
+let _thread_id = null;
+let typingTimer;
 /* add listeners */
 // add listener to address chat button, on input for message I guess
 messageInput.addEventListener('input', toggleInputTextarea); // Event listener to check length of input and convert to textarea
@@ -57,7 +65,7 @@
 	const chatBubble = document.createElement('div');
 	chatBubble.setAttribute('id', `chat-bubble-${_chatBubbleCount}`);
 	chatBubble.className = `chat-bubble ${bubbleClass}`;
-	chatColumn.appendChild(chatBubble);
+	chatOutput.appendChild(chatBubble);
 	_message = escapeHtml(message);
 	if (_typewrite) {
 		let i = 0;
@@ -69,14 +77,15 @@
 				chatBubble.insertAdjacentHTML('beforeend', tempMessage);
 				i++;
 				setTimeout(typeAgentMessage, _delay); // Adjust the typing speed here (50ms)
+				scrollToBottom();
 			} else {
 				chatBubble.setAttribute('status', 'done');
-				console.log(chatBubble)
 			}
 		}
 		typeAgentMessage();
 	} else {
 		chatBubble.insertAdjacentHTML('beforeend', message);
+		scrollToBottom(); 
 	}
 }
 function addUserMessage(_event){
@@ -109,6 +118,13 @@
     // Move the cursor to the end of the text
     textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
 }
+function getTextWidth(text, font) {
+    // Create a temporary canvas element to measure text width
+    let canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
+    let context = canvas.getContext("2d");
+    context.font = font;
+    return context.measureText(text).width;
+}
 // Function to replace an element (input/textarea) with a specified type
 function replaceElement(element, newType) {
     const newElement = document.createElement(newType);
@@ -121,17 +137,28 @@
         newElement.setAttribute('rows', '3');
     }
     newElement.addEventListener('input', toggleInputTextarea); // Reattach the event listener
-    chatForm.replaceChild(newElement, element);
+    chatInput.replaceChild(newElement, element);
     return newElement;
 }
+function resetAnimation(element) {
+    element.style.animation = 'none';
+    // Trigger a reflow to restart the animation
+    element.offsetHeight;
+    element.style.animation = '';
+}
+function scrollToBottom() {
+    chatOutput.scrollTop = chatOutput.scrollHeight;
+}
 async function submit(_event, _message) {
 	_event.preventDefault();
 	submitButton.style.display = 'none';
+	chatLabel.style.opacity = '0';
+	setTimeout(() => chatLabel.style.visibility = 'hidden', 1000); // Hide after transition
+	clearTimeout(typingTimer);
 	awaitButton.style.display = 'block';
-	agentSpinner.classList.remove('text-light');
-	agentSpinner.classList.add('text-primary');
-	const url = window.location.origin;
-	console.log('thread', _thread_id);
+	agentSpinner.classList.remove('spinner-green-glow');
+	agentSpinner.classList.add('spinner-blue');
+	const url = window.location.origin;0
 	const options = {
 		method: 'POST',
 		headers: {
@@ -150,8 +177,10 @@
 	});
 	awaitButton.style.display = 'none';
 	submitButton.style.display = 'block';
-	agentSpinner.classList.remove('text-primary');
-	agentSpinner.classList.add('text-light');
+	chatLabel.style.visibility = 'visible'; // Make the element visible
+	setTimeout(() => chatLabel.style.opacity = '1', 700); // Fade in after a short delay
+	agentSpinner.classList.remove('spinner-blue');
+	agentSpinner.classList.add('spinner-green-glow');
 }
 async function submitChat(url, options) {
 	try {
@@ -165,14 +194,29 @@
 }
 // Function to toggle between textarea and input based on character count
 function toggleInputTextarea() {
-	const _message = messageInput.value.trim();
-	submitButton.disabled = !_message.length;
-    if (_message.length > 42 && messageInput.tagName !== 'TEXTAREA') { // Expand to textarea
+    const inputStyle = window.getComputedStyle(chatInput);
+    const inputFont = inputStyle.font;
+    const textWidth = getTextWidth(messageInput.value, inputFont); // no trim required
+    const inputWidth = chatInput.offsetWidth;
+	/* pulse */
+	clearTimeout(typingTimer);
+    agentSpinner.style.display = 'none';
+    resetAnimation(agentSpinner); // Reset animation
+    typingTimer = setTimeout(() => {
+        agentSpinner.style.display = 'block';
+        resetAnimation(agentSpinner); // Restart animation
+    }, 2000);
+
+    if (textWidth > inputWidth && messageInput.tagName !== 'TEXTAREA') { // Expand to textarea
         messageInput = replaceElement(messageInput, 'textarea');
         focusAndSetCursor(messageInput);
-    } else if (_message.length < 36 && messageInput.tagName === 'TEXTAREA' ) { // Revert to input
+    } else if (textWidth <= inputWidth && messageInput.tagName === 'TEXTAREA' ) { // Revert to input
 		messageInput = replaceElement(messageInput, 'input');
         focusAndSetCursor(messageInput);
     }
+	toggleSubmitButtonState();
+}
+function toggleSubmitButtonState() {
+	submitButton.disabled = !messageInput.value?.trim()?.length??true;
 }
 </script>
\ No newline at end of file