diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index df7ac4aec7d6..ebcf346802a0 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -170,13 +170,7 @@ module.exports = {
         "@typescript-eslint/no-unnecessary-type-arguments": "error",
         "@typescript-eslint/prefer-string-starts-ends-with": "error",
         "@typescript-eslint/switch-exhaustiveness-check": "error",
-        "@typescript-eslint/restrict-template-expressions": [
-          "error",
-          {
-            allowNumber: true,
-            allowBoolean: true,
-          },
-        ],
+        "@typescript-eslint/restrict-template-expressions": "off",
       },
     },
   ],
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
index 55fb7d5e88c8..22dd6bd6d82d 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@@ -1,7 +1,7 @@
 "use client";
-import { useTranslation } from "react-i18next";
 
-import Button from "@/lib/components/ui/Button";
+import Icon from "@/lib/components/ui/Icon/Icon";
+import { LoaderIcon } from "@/lib/components/ui/LoaderIcon/LoaderIcon";
 
 import { OnboardingQuestions } from "./components";
 import { ChatEditor } from "./components/ChatEditor/ChatEditor";
@@ -11,7 +11,11 @@ export const ChatInput = (): JSX.Element => {
   const { setMessage, submitQuestion, generatingAnswer, message } =
     useChatInput();
 
-  const { t } = useTranslation(["chat"]);
+  const handleSubmitQuestion = () => {
+    if (message.trim() !== "") {
+      submitQuestion();
+    }
+  };
 
   return (
     <>
@@ -21,7 +25,7 @@ export const ChatInput = (): JSX.Element => {
           data-testid="chat-input-form"
           onSubmit={(e) => {
             e.preventDefault();
-            submitQuestion();
+            handleSubmitQuestion();
           }}
           className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
         >
@@ -29,22 +33,21 @@ export const ChatInput = (): JSX.Element => {
             <ChatEditor
               message={message}
               setMessage={setMessage}
-              onSubmit={submitQuestion}
+              onSubmit={handleSubmitQuestion}
             />
           </div>
-
-          <div className="flex flex-row items-center gap-4">
-            <Button
-              className="px-3 py-2 sm:px-4 sm:py-2 bg-primary border-0"
-              type="submit"
-              isLoading={generatingAnswer}
-              data-testid="submit-button"
-            >
-              {generatingAnswer
-                ? t("thinking", { ns: "chat" })
-                : t("chat", { ns: "chat" })}
-            </Button>
-          </div>
+          {generatingAnswer ? (
+            <LoaderIcon size="large" color="accent" />
+          ) : (
+            <Icon
+              name="followUp"
+              size="large"
+              color="accent"
+              disabled={!message}
+              handleHover={true}
+              onClick={handleSubmitQuestion}
+            />
+          )}
         </form>
       </div>
     </>
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx
index c4f2f4ac2f8b..2079c87f0170 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx
@@ -23,7 +23,6 @@ export const QADisplay = ({ content }: QADisplayProps): JSX.Element => {
         speaker={"user"}
         text={user_message}
         promptName={prompt_title}
-        brainName={brain_name}
         metadata={metadata} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
       />
       <MessageRow
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss
new file mode 100644
index 000000000000..046bfa986150
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -0,0 +1,71 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.message_row_container {
+  display: flex;
+  flex-direction: column;
+  padding-right: Spacings.$spacing05;
+  width: 85%;
+  padding-block: Spacings.$spacing03;
+
+  .message_row_content {
+    align-self: flex-end;
+    border-radius: 12px;
+    width: fit-content;
+    padding-block: Spacings.$spacing03;
+    padding-inline: Spacings.$spacing05;
+  }
+
+  .message_header {
+    padding: Spacings.$spacing02;
+  }
+
+  &.user {
+    align-self: flex-end;
+
+    .message_header {
+      align-self: flex-end;
+      display: flex;
+      gap: Spacings.$spacing02;
+      align-items: center;
+      color: Colors.$dark-grey;
+    }
+
+    .message_row_content {
+      background-color: Colors.$highlight;
+      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  &.brain {
+    .message_header {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .left_wrapper {
+        display: flex;
+        gap: Spacings.$spacing05;
+        align-items: center;
+      }
+
+      .copy_button {
+        visibility: hidden;
+      }
+    }
+
+    .message_row_content {
+      align-self: flex-start;
+      background-color: Colors.$light-black;
+      margin-left: 1px;
+    }
+  }
+
+  &:hover {
+    .message_header {
+      .copy_button {
+        visibility: visible;
+      }
+    }
+  }
+}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx
index 189638341b78..43780029e200 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx
@@ -1,9 +1,12 @@
 import React from "react";
 
+import Icon from "@/lib/components/ui/Icon/Icon";
+
+import styles from "./MessageRow.module.scss";
 import { CopyButton } from "./components/CopyButton";
-import { MessageContent } from "./components/MessageContent";
-import { QuestionBrain } from "./components/QuestionBrain";
-import { QuestionPrompt } from "./components/QuestionPrompt";
+import { MessageContent } from "./components/MessageContent/MessageContent";
+import { QuestionBrain } from "./components/QuestionBrain/QuestionBrain";
+import { QuestionPrompt } from "./components/QuestionPrompt/QuestionPrompt";
 import { useMessageRow } from "./hooks/useMessageRow";
 
 type MessageRowProps = {
@@ -22,14 +25,7 @@ export const MessageRow = React.forwardRef(
     { speaker, text, brainName, promptName, children }: MessageRowProps,
     ref: React.Ref<HTMLDivElement>
   ) => {
-    const {
-      containerClasses,
-      containerWrapperClasses,
-      handleCopy,
-      isCopied,
-      isUserSpeaker,
-      markdownClasses,
-    } = useMessageRow({
+    const { handleCopy, isCopied, isUserSpeaker } = useMessageRow({
       speaker,
       text,
     });
@@ -37,28 +33,32 @@ export const MessageRow = React.forwardRef(
     const messageContent = text ?? "";
 
     return (
-      <div className={containerWrapperClasses}>
-        <div ref={ref} className={containerClasses}>
-          <div className="flex justify-between items-start w-full">
-            {/* Left section for the question and prompt */}
-            <div className="flex gap-1">
+      <div
+        className={`
+      ${styles.message_row_container ?? ""} 
+      ${isUserSpeaker ? styles.user ?? "" : styles.brain ?? ""}
+      `}
+      >
+        {!isUserSpeaker ? (
+          <div className={styles.message_header}>
+            <div className={styles.left_wrapper}>
               <QuestionBrain brainName={brainName} />
               <QuestionPrompt promptName={promptName} />
             </div>
-            {/* Right section for buttons */}
-            <div className="flex items-center gap-2">
-              {!isUserSpeaker && (
-                <>
-                  <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
-                </>
-              )}
+            <div className={styles.copy_button}>
+              <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
             </div>
           </div>
+        ) : (
+          <div className={styles.message_header}>
+            <Icon name="user" color="dark-grey" size="normal" />
+            <span className={styles.me}>Me</span>
+          </div>
+        )}
+        {}
+        <div ref={ref} className={styles.message_row_content}>
           {children ?? (
-            <MessageContent
-              text={messageContent}
-              markdownClasses={markdownClasses}
-            />
+            <MessageContent text={messageContent} isUser={isUserSpeaker} />
           )}
         </div>
       </div>
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx
index 2810d0072511..1b4f843c15f7 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx
@@ -1,4 +1,4 @@
-import { FaCheckCircle, FaCopy } from "react-icons/fa";
+import Icon from "@/lib/components/ui/Icon/Icon";
 
 type CopyButtonProps = {
   handleCopy: () => void;
@@ -14,6 +14,11 @@ export const CopyButton = ({
     onClick={handleCopy}
     title={isCopied ? "Copied!" : "Copy to clipboard"}
   >
-    {isCopied ? <FaCheckCircle /> : <FaCopy />}
+    <Icon
+      name={isCopied ? "checkCircle" : "copy"}
+      color={isCopied ? "primary" : "black"}
+      size="normal"
+      handleHover={true}
+    />
   </button>
 );
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
new file mode 100644
index 000000000000..30ab6d5645e5
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
@@ -0,0 +1,68 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.markdown {
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul {
+    list-style-type: disc;
+    margin-top: 0;
+    padding: 0;
+    margin-left: Spacings.$spacing05;
+  }
+
+  ol {
+    list-style-type: decimal;
+    padding-left: Spacings.$spacing05;
+    list-style-position: outside;
+
+    li {
+      white-space-collapse: collapse;
+    }
+  }
+
+  h1 {
+    @include Typography.H1;
+  }
+
+  h2 {
+    @include Typography.H2;
+  }
+
+  h3 {
+    @include Typography.H3;
+  }
+}
+
+.user {
+  color: Colors.$black;
+}
+
+.brain {
+  color: Colors.$white;
+}
+
+.thinking {
+  animation: pulse 1s infinite;
+  font-size: 2px;
+  line-height: 16px;
+  width: 16px;
+  display: flex;
+  justify-content: center;
+}
+
+@keyframes pulse {
+  0% {
+    font-size: 6px;
+  }
+  50% {
+    font-size: 16px;
+  }
+  100% {
+    font-size: 6px;
+  }
+}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
similarity index 75%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
index 232736c542c2..749075384c24 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
@@ -1,12 +1,14 @@
 import { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 
+import styles from "./MessageContent.module.scss";
+
 export const MessageContent = ({
   text,
-  markdownClasses,
+  isUser,
 }: {
   text: string;
-  markdownClasses: string;
+  isUser: boolean;
 }): JSX.Element => {
   const [showLog] = useState(true);
   const [isLog, setIsLog] = useState(true);
@@ -39,13 +41,19 @@ export const MessageContent = ({
   const { logs, cleanedText } = extractLog(text);
 
   return (
-    <div data-testid="chat-message-text" className="mt-2">
+    <div data-testid="chat-message-text">
       {isLog && showLog && logs.length > 0 && (
-        <div className="text-xs text-gray-600 bg-gray-100 p-2 rounded">
+        <div className="text-xs text-white p-2 rounded">
           <ReactMarkdown>{logs}</ReactMarkdown>
         </div>
       )}
-      <ReactMarkdown className={`text-base ${markdownClasses}`}>
+      <ReactMarkdown
+        className={`
+        ${styles.markdown} 
+        ${isUser ? styles.user : styles.brain}
+        ${cleanedText === "🧠" ? styles.thinking : ""} 
+        `}
+      >
         {cleanedText}
       </ReactMarkdown>
     </div>
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
new file mode 100644
index 000000000000..cc815cada395
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
@@ -0,0 +1,9 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.brain_name_wrapper {
+  display: flex;
+  align-items: center;
+  gap: Spacings.$spacing02;
+  color: Colors.$black;
+}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
similarity index 51%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
index e8ed11b2d30a..cc3b5b1d3bf4 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
@@ -1,5 +1,9 @@
 import { Fragment } from "react";
 
+import Icon from "@/lib/components/ui/Icon/Icon";
+
+import styles from "./QuestionBrain.module.scss";
+
 type QuestionBrainProps = {
   brainName?: string | null;
 };
@@ -11,11 +15,9 @@ export const QuestionBrain = ({
   }
 
   return (
-    <span
-      data-testid="brain-tags"
-      className="text-msg-header-gray mb-1 text-xs"
-    >
-      @{brainName}
-    </span>
+    <div data-testid="brain-tags" className={styles.brain_name_wrapper}>
+      <Icon name="brain" color="black" size="normal" />
+      <span>{brainName}</span>
+    </div>
   );
 };
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
new file mode 100644
index 000000000000..2903ec0411f5
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
@@ -0,0 +1,8 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.prompt_name_wrapper {
+  display: flex;
+  align-items: center;
+  color: Colors.$black;
+}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
similarity index 51%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
index ccc6d5776c88..29699cdaf4bc 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
@@ -1,5 +1,9 @@
 import { Fragment } from "react";
 
+import Icon from "@/lib/components/ui/Icon/Icon";
+
+import styles from "./QuestionPompt.module.scss";
+
 type QuestionProptProps = {
   promptName?: string | null;
 };
@@ -11,11 +15,9 @@ export const QuestionPrompt = ({
   }
 
   return (
-    <span
-      data-testid="prompt-tags"
-      className="text-msg-header-gray mb-1 text-xs"
-    >
-      #{promptName}
-    </span>
+    <div data-testid="prompt-tags" className={styles.prompt_name_wrapper}>
+      <Icon name="hastag" color="black" size="normal" />
+      <span>{promptName}</span>
+    </div>
   );
 };
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx
deleted file mode 100644
index 54146151d1ef..000000000000
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import ReactDOM from "react-dom";
-import { FaQuestionCircle } from "react-icons/fa";
-
-import { useEventTracking } from "@/services/analytics/june/useEventTracking";
-
-type SourcesButtonProps = {
-  sources: [string] | [];
-};
-
-export const SourcesButton = ({ sources }: SourcesButtonProps): JSX.Element => {
-  const [showSources, setShowSources] = useState(false);
-  const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
-  const { track } = useEventTracking();
-  // Specify the type of element the ref will be attached to
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  const updatePopupPosition = () => {
-    // Use the 'current' property of the ref with the correct type
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      setPopupPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-      });
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener("scroll", updatePopupPosition);
-
-    // Remove the event listener when the component is unmounted
-    return () => {
-      window.removeEventListener("scroll", updatePopupPosition);
-    };
-  }, []);
-
-  const sourcesList = (
-    <ul className="list-disc list-inside">
-      {sources.map((source, index) => (
-        <li key={index} className="truncate">
-          {source.trim()}
-        </li>
-      ))}
-    </ul>
-  );
-
-  return (
-    <div className="relative inline-block">
-      <button
-        ref={buttonRef} // Attach the ref to the button
-        onMouseEnter={() => {
-          setShowSources(true);
-          updatePopupPosition();
-          void track("SOURCE_CHECKED");
-        }}
-        onMouseLeave={() => setShowSources(false)}
-        className="text-gray-500 hover:text-gray-700 transition p-1"
-        title="View sources"
-      >
-        <FaQuestionCircle />
-      </button>
-      {showSources &&
-        ReactDOM.createPortal(
-          <div
-            className="absolute z-50 min-w-max p-2 bg-white shadow-lg rounded-md border border-gray-200"
-            style={{
-              top: `${popupPosition.top}px`,
-              left: `${popupPosition.left}px`,
-            }}
-          >
-            {/* Display the sources list here */}
-            {sourcesList}
-          </div>,
-          document.body // Render the popup to the body element
-        )}
-    </div>
-  );
-};
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/hooks/useMessageRow.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/hooks/useMessageRow.ts
index e7dcb907b5c2..1c6e34c02bfb 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/hooks/useMessageRow.ts
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/hooks/useMessageRow.ts
@@ -1,7 +1,5 @@
 import { useState } from "react";
 
-import { cn } from "@/lib/utils";
-
 type UseMessageRowProps = {
   speaker: "user" | "assistant";
   text?: string;
@@ -23,25 +21,9 @@ export const useMessageRow = ({ speaker, text }: UseMessageRowProps) => {
     setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
   };
 
-  const containerClasses = cn(
-    "py-3 px-5 w-fit",
-    isUserSpeaker ? "bg-msg-gray bg-opacity-10" : "bg-msg-purple bg-opacity-40",
-    "dark:bg-gray-800 rounded-3xl flex flex-col overflow-hidden scroll-pb-32"
-  );
-
-  const containerWrapperClasses = cn(
-    "flex flex-col",
-    isUserSpeaker ? "items-end" : "items-start"
-  );
-
-  const markdownClasses = cn("prose", "dark:prose-invert");
-
   return {
     isUserSpeaker,
     isCopied,
     handleCopy,
-    containerClasses,
-    containerWrapperClasses,
-    markdownClasses,
   };
 };
diff --git a/frontend/app/chat/[chatId]/utils/generatePlaceHolderMessage.ts b/frontend/app/chat/[chatId]/utils/generatePlaceHolderMessage.ts
index 955ecad079e8..601ade7d0974 100644
--- a/frontend/app/chat/[chatId]/utils/generatePlaceHolderMessage.ts
+++ b/frontend/app/chat/[chatId]/utils/generatePlaceHolderMessage.ts
@@ -11,8 +11,10 @@ export const generatePlaceHolderMessage = ({
 }: GeneratePlaceHolderMessageProps): ChatMessage => {
   return {
     message_id: new Date().getTime().toString(),
-    message_time: new Date(new Date().setDate(new Date().getDate() + 1)).toISOString(),
-    assistant: 'Thinking..',
+    message_time: new Date(
+      new Date().setDate(new Date().getDate() + 1)
+    ).toISOString(),
+    assistant: "🧠",
     chat_id,
     user_message,
   };
diff --git a/frontend/app/search/page.module.scss b/frontend/app/search/page.module.scss
index 2fdef462a2b4..f315552ea1c7 100644
--- a/frontend/app/search/page.module.scss
+++ b/frontend/app/search/page.module.scss
@@ -34,7 +34,7 @@
       align-items: center;
 
       .quivr_text {
-        @include Typography.H1;
+        @include Typography.Big;
 
         .quivr_text_primary {
           color: Colors.$primary;
diff --git a/frontend/lib/components/ui/Icon/Icon.module.scss b/frontend/lib/components/ui/Icon/Icon.module.scss
index 46cd8a093488..5ea013ec6aa2 100644
--- a/frontend/lib/components/ui/Icon/Icon.module.scss
+++ b/frontend/lib/components/ui/Icon/Icon.module.scss
@@ -29,6 +29,10 @@
   }
 }
 
+.dark-grey {
+  color: Colors.$dark-grey;
+}
+
 .primary {
   color: Colors.$primary;
 }
@@ -42,5 +46,11 @@
 }
 
 .disabled {
+  color: Colors.$black;
+  pointer-events: none;
   opacity: 0.2;
 }
+
+.hovered {
+  cursor: pointer;
+}
diff --git a/frontend/lib/helpers/iconList.ts b/frontend/lib/helpers/iconList.ts
index 0a04ccfbc054..5a5228a5c8a6 100644
--- a/frontend/lib/helpers/iconList.ts
+++ b/frontend/lib/helpers/iconList.ts
@@ -1,4 +1,6 @@
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import { FaCheckCircle, FaRegUserCircle } from "react-icons/fa";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
 import { IconType } from "react-icons/lib";
 import {
   LuBrain,
@@ -8,13 +10,18 @@ import {
   LuPlusCircle,
   LuSearch,
 } from "react-icons/lu";
+import { RiHashtag } from "react-icons/ri";
 
 export const iconList: { [name: string]: IconType } = {
   add: LuPlusCircle,
   brain: LuBrain,
+  checkCircle: FaCheckCircle,
   chevronDown: LuChevronDown,
   chevronRight: LuChevronRight,
   copy: LuCopy,
+  followUp: FaArrowUpFromBracket,
+  hastag: RiHashtag,
   loader: AiOutlineLoading3Quarters,
   search: LuSearch,
+  user: FaRegUserCircle,
 };
diff --git a/frontend/lib/types/Colors.ts b/frontend/lib/types/Colors.ts
index 6afa9fc0a093..b6108d5c2fa2 100644
--- a/frontend/lib/types/Colors.ts
+++ b/frontend/lib/types/Colors.ts
@@ -1 +1 @@
-export type Color = "black" | "primary" | "accent" | "white";
+export type Color = "black" | "dark-grey" | "primary" | "accent" | "white";
diff --git a/frontend/styles/_Colors.module.scss b/frontend/styles/_Colors.module.scss
index 9ebfd04bfe09..443d164f33f6 100644
--- a/frontend/styles/_Colors.module.scss
+++ b/frontend/styles/_Colors.module.scss
@@ -3,6 +3,7 @@ $lightest-grey: #f5f5f5;
 $light-grey: #d3d3d3;
 $normal-grey: #c8c8c8;
 $dark-grey: #707070;
+$light-black: #415065;
 $black: #11243e;
 $dark-black: #081621;
 $primary: #6142d4;
diff --git a/frontend/styles/_Typography.module.scss b/frontend/styles/_Typography.module.scss
index 72ab2abef0ea..e90da26d814e 100644
--- a/frontend/styles/_Typography.module.scss
+++ b/frontend/styles/_Typography.module.scss
@@ -1,4 +1,19 @@
+@mixin Big {
+  font-weight: 500;
+  font-size: 36px;
+}
+
 @mixin H1 {
-    font-weight: 500;
-    font-size: 36px;
-}
\ No newline at end of file
+  font-weight: 600;
+  font-size: 20px;
+}
+
+@mixin H2 {
+  font-weight: 600;
+  font-size: 18px;
+}
+
+@mixin H3 {
+  font-weight: 500;
+  font-size: 16px;
+}