diff --git a/app/backend/approaches/mathassistant.py b/app/backend/approaches/mathassistant.py
index 62a9a1b51..a770ef664 100644
--- a/app/backend/approaches/mathassistant.py
+++ b/app/backend/approaches/mathassistant.py
@@ -135,7 +135,7 @@ def process_agent_scratch_pad( question):
         if "actions" in chunk:
             for action in chunk["actions"]:
                 messages.append(f"Calling Tool: `{action.tool}` with input `{action.tool_input}`\n")
-                messages.append(f'I am thinking...: {action.log} \n')
+                messages.append(f'Processing: {action.log} \n')
         elif "steps" in chunk:
             for step in chunk["steps"]:
                 messages.append(f"Tool Result: `{step.observation}`\n")                               
diff --git a/app/backend/approaches/tabulardataassistant.py b/app/backend/approaches/tabulardataassistant.py
index 1820b4c04..0ea281d75 100644
--- a/app/backend/approaches/tabulardataassistant.py
+++ b/app/backend/approaches/tabulardataassistant.py
@@ -90,7 +90,7 @@ def process_agent_scratch_pad(question, df):
         if "actions" in chunk:
             for action in chunk["actions"]:
                 messages.append(f"Calling Tool: `{action.tool}` with input `{action.tool_input}`\n")
-                messages.append(f'\nI am thinking...: {action.log}\n')
+                messages.append(f'\nProcessing...: {action.log}\n')
         elif "steps" in chunk:
             for step in chunk["steps"]:
                 if isinstance(step.observation, str):
diff --git a/app/frontend/src/components/RAIPanel/RAIPanel.tsx b/app/frontend/src/components/RAIPanel/RAIPanel.tsx
index 1b18ca81b..a27e8de06 100644
--- a/app/frontend/src/components/RAIPanel/RAIPanel.tsx
+++ b/app/frontend/src/components/RAIPanel/RAIPanel.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Options16Filled, ArrowSync16Filled, Briefcase16Filled, Globe16Filled } from "@fluentui/react-icons";
+import { Options16Filled, ArrowSync16Filled, Briefcase16Filled, Globe16Filled, BuildingMultipleFilled } from "@fluentui/react-icons";
 
 import styles from "./RAIPanel.module.css";
 import { Icon } from "@fluentui/react";
@@ -32,11 +32,11 @@ export const RAIPanel = ({approach, chatMode, onAdjustClick, onRegenerateClick,
             {(approach == Approaches.ChatWebRetrieveRead && chatMode == ChatMode.WorkPlusWeb) &&
                     <>
                         <div className={styles.adjustInput} onClick={onRagSearchClicked}>
-                            <Briefcase16Filled primaryFill="rgba(133, 133, 133, 1)" />
+                            <BuildingMultipleFilled primaryFill="rgba(133, 133, 133, 1)" />
                             <span className={styles.adjustInputText}>Search Work</span>
                         </div>
                         <div className={styles.adjustInput} onClick={onRagCompareClicked}>
-                            <Briefcase16Filled primaryFill="rgba(133, 133, 133, 1)" />
+                            <BuildingMultipleFilled primaryFill="rgba(133, 133, 133, 1)" />
                             <span className={styles.adjustInputText}>Compare with Work</span>
                         </div>
                     </>
diff --git a/app/frontend/src/pages/chat/Chat.module.css b/app/frontend/src/pages/chat/Chat.module.css
index e215a4d5c..b02d5205c 100644
--- a/app/frontend/src/pages/chat/Chat.module.css
+++ b/app/frontend/src/pages/chat/Chat.module.css
@@ -46,6 +46,7 @@
 }
 
 .chatEmptyStateTitle {
+    display: contents;
     font-size: 3rem;
     font-weight: 500;
     margin-top: 0;
diff --git a/app/frontend/src/pages/layout/Layout.tsx b/app/frontend/src/pages/layout/Layout.tsx
index 103cde3b8..5b7c5b849 100644
--- a/app/frontend/src/pages/layout/Layout.tsx
+++ b/app/frontend/src/pages/layout/Layout.tsx
@@ -51,6 +51,8 @@ export const Layout = () => {
                                 <li className={styles.headerNavLeftMargin}>
                                     <NavLink to="/tutor" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
                                     Math Assistant
+                                    <br />  
+                                    <p className={styles.centered}>(preview)</p>
                                     </NavLink>
                                 </li>
                             }
@@ -58,7 +60,11 @@ export const Layout = () => {
                                 <li className={styles.headerNavLeftMargin}>
                                     <NavLink to="/tda" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
                                     Tabular Data Assistant
-                                    </NavLink>    
+                                    <br />  
+                                    <p className={styles.centered}>(preview)</p>
+                                    </NavLink>
+                                    
+                                      
                                 </li>
                             }
                     </ul>
diff --git a/app/frontend/src/pages/tda/Tda.module.css b/app/frontend/src/pages/tda/Tda.module.css
index 0f359ada4..800dec3c8 100644
--- a/app/frontend/src/pages/tda/Tda.module.css
+++ b/app/frontend/src/pages/tda/Tda.module.css
@@ -1,6 +1,41 @@
 /* Copyright (c) Microsoft Corporation.
    Licensed under the MIT license. */
-   
+   .chatEmptyStateTitle {
+    font-size: 3rem;
+    font-weight: 500;
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+   .centertext {
+    text-align: center !important;
+}
+   .App {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 600px;
+  }
+  .contentArea {
+    width: 100%;
+    margin-top: 10px;
+    /* display: flex; */
+    align-content: center;
+  }
+  .raiwarning {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgb(133, 133, 133);
+    line-height: 22px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    white-space: pre-line;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
    .mydetailslist:hover {
     overflow: scroll;
   }
@@ -26,8 +61,7 @@
   }
    h1 {
     align-items: flex-start !important;
-    margin-top: 5% !important; /* Sets the top margin to 10% */
-    margin-left: 20% !important; /* Sets the left margin to 20% */
+    margin-top: 0 !important;
 }
    .title {
     text-align: center;
@@ -55,13 +89,14 @@
 .centeredContainer {
     display: flex;
     flex-direction: column;
-    align-items: flex-start; /* Aligns items to the left */
+    align-items: center !important; /* Aligns items to the left */
     border: 1px solid lightgrey;
     border-radius: 10px;
     padding: 20px;
     margin: auto;
     margin-top: 5%;
-    width: 60%; /* Adjust as needed */
+    width: 70%; /* Adjust as needed */
+    text-align: left !important;
     
 }
 .formClass {
diff --git a/app/frontend/src/pages/tda/Tda.tsx b/app/frontend/src/pages/tda/Tda.tsx
index 47b31fee4..dd21505ce 100644
--- a/app/frontend/src/pages/tda/Tda.tsx
+++ b/app/frontend/src/pages/tda/Tda.tsx
@@ -5,7 +5,7 @@ import { BlobServiceClient } from "@azure/storage-blob";
 import { CheckboxVisibility, DetailsList, DetailsListLayoutMode, IColumn, mergeStyles } from '@fluentui/react';
 import classNames from "classnames";
 import { nanoid } from "nanoid";
-import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DropZone } from "./drop-zone"
 import styles from "./file-picker.module.css";
 import { FilesList } from "./files-list";
@@ -14,6 +14,9 @@ import Papa from "papaparse";
 import { postCsv, processCsvAgentResponse, getCsvAnalysis, refresh } from "../../api";
 import { Accordion, Card, Button } from 'react-bootstrap';
 import ReactMarkdown from "react-markdown";
+import estyles from "../../components/Example/Example.module.css";
+import { Example } from "../../components/Example";
+import { DocumentDataFilled, SparkleFilled, TableSearchFilled } from "@fluentui/react-icons";
 
 
 interface Props {
@@ -30,14 +33,28 @@ const Tda = ({folderPath, tags}: Props) => {
   const [fileUploaded, setFileUploaded] = useState(false);
   const [output, setOutput] = useState('');
   const [otherq, setOtherq] = useState('');
-  const [selectedQuery, setSelectedQuery] = useState('How many rows are there?');
+  const [selectedQuery, setSelectedQuery] = useState('');
   const [dataFrame, setDataFrame] = useState<object[]>([]);
   const [loading, setLoading] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [base64Images, setBase64Images] = useState<string[]>([]);
   const [fileu, setFile] = useState<File | null>(null);
 
-  
+  type ExampleModel = {
+    text: string;
+    value: string;
+};
+
+const EXAMPLES: ExampleModel[] = [
+    { text: "How many rows are there?", value: "rows" },
+    { text: "What are the data types of each column?", value: "dataType" },
+    { text: "Are there any missing values in the dataset?", value: "missingValues" },
+    { text: "What are the summary statistics for categorical data?", value: "summaryStats" }
+];
+
+interface Props {
+    onExampleClicked: (value: string) => void;
+}
 
   const setImages = (newBase64Strings: string[]) => {
     setBase64Images(newBase64Strings);
@@ -45,7 +62,7 @@ const Tda = ({folderPath, tags}: Props) => {
 
 
   const setOtherQ = (selectedQuery: string) => {
-    if (selectedQuery === "other") {
+    if (inputValue != "") {
       return inputValue;
     }
     return selectedQuery;
@@ -131,11 +148,10 @@ const Tda = ({folderPath, tags}: Props) => {
 
   // handler called when files are selected via the Dropzone component
 
-  const handleQueryChange = (event: { target: { value: any; }; }) => {
-    const query = event.target.value;
-    setSelectedQuery(query);
+  const handleQueryChange = (value: string) => {
+    setSelectedQuery(value);
     // Handle the selected query here
-  };
+};
   
   const handleOnChange = useCallback((files: any) => {
     let filesArray = Array.from(files);
@@ -211,6 +227,23 @@ const Tda = ({folderPath, tags}: Props) => {
     }
   }, [progress]);
 
+
+  const firstRender = useRef(true);
+
+  useEffect(() => {
+      if (firstRender.current) {
+          // Skip the effect on the first render
+          firstRender.current = false;
+      } else {
+        if (fileu) {
+          handleAnswer();
+        }
+        else {
+          setOutput("no file file has been uploaded.")
+          setLoading(false);
+        }
+      }
+  }, [selectedQuery]);
   let indexLength = 0;
 if (dataFrame.length > 0) {
   for (let i = 0; i < dataFrame.length; i++) {
@@ -259,10 +292,26 @@ if (dataFrame.length > 0) {
   const uploadComplete = useMemo(() => progress === 100, [progress]);
 
 
-  return (<div>
-    <div className={cstyle.centeredContainer}>
-      <p>Upload a CSV file</p>
+  return (<div className={cstyle.contentArea} >
+    <div className={cstyle.App} >
+    <TableSearchFilled fontSize={"6rem"} primaryFill={"#7719aa"} aria-hidden="true" aria-label="Supported File Types" />
+    <h1 className={cstyle.EmptyStateTitle}>
+      Tabular Data Assistant
+    </h1>
+    <span className={styles.chatEmptyObjectives}>
+      <i className={cstyle.centertext}>Information Assistant uses AI. Check for mistakes.</i> <a href="https://github.com/microsoft/PubSec-Info-Assistant/blob/main/docs/transparency.md" target="_blank" rel="noopener noreferrer"> Transparency Note</a>
+    </span>
+    
     
+    <div className={cstyle.centeredContainer}>
+    <h2 className={styles.EmptyStateTitle}>Supported file types</h2>
+
+
+    <DocumentDataFilled fontSize={"40px"} primaryFill={"#7719aa"} aria-hidden="true" aria-label="Data" />
+            <span className={cstyle.EmptyObjectivesListItemText}><b>Data</b><br />
+                csv
+            </span>
+    <br />
     <div className={styles.wrapper}>
       
       {/* canvas */}
@@ -302,16 +351,19 @@ if (dataFrame.length > 0) {
         </button>
       ) : null}
     </div>
-    <div>
-      <p>Select an example query:</p>
-      <select className={cstyle.inputField} onChange={handleQueryChange} style={{ width: "100%" }}>
-        <option value="rows">How many rows are there?</option>
-        <option value="dataType">What is the data type of each column?</option>
-        <option value="summaryStats">What are the summary statistics for categorical data?</option>
-        <option value="other">Other</option>
-    </select>
-  {selectedQuery === 'other' && (
+    
+    <p>Select an example query:</p>
+    <div >
+        <ul className={estyles.examplesNavList}>
+            {EXAMPLES.map((x, i) => (
+                <li key={i}>
+                    <Example text={x.text} value={x.value} onClick={handleQueryChange} />
+                </li>
+            ))}
+        </ul>
     <div >
+    
+    <br></br>
     <p>Ask a question about your CSV:</p>
     <input
       className={cstyle.inputField}
@@ -320,14 +372,24 @@ if (dataFrame.length > 0) {
       value={inputValue}
       onChange={(e) => setInputValue(e.target.value)}
     />
+     <div className={cstyle.buttonContainer}>
+    <Button variant="secondary" onClick={handleAnalysis}>Here is my analysis</Button>
+    <Button variant="secondary" onClick={handleAnswer}>Show me the answer</Button>
+    </div>
+    {loading && <div className="spinner">Loading...</div>}
+    { output !== '' && (
+      <div style={{width: '100%'}}>
+        <h2>Tabular Data Assistant Response:</h2>
+        <ReactMarkdown>{output}</ReactMarkdown>
+        <div className={cstyle.raiwarning}>AI-generated content may be incorrect</div>
       </div>
-      
     )}
       </div>
+      </div>
       
       
     </div>
-    <h1>Ouput</h1>
+    
     <div className={cstyle.centeredContainer}>
     <details style={{ width: '100%' }}>
   <summary>See Dataframe</summary>
@@ -346,20 +408,7 @@ if (dataFrame.length > 0) {
   </div>
 </details>
     </div>
-  <div className={cstyle.centeredContainer}>
-    <div className={cstyle.buttonContainer}>
-    <Button variant="secondary" onClick={handleAnalysis}>Here is my analysis</Button>
-    <Button variant="secondary" onClick={handleAnswer}>Show me the answer</Button>
     </div>
-    {loading && <div className="spinner">Loading...</div>}
-    { output && (
-      <div style={{width: '100%'}}>
-        <h2>Tabular Data Assistant Response:</h2>
-        <ReactMarkdown>{output}</ReactMarkdown>
-      </div>
-    )}
-</div>
-
 </div>
   );
 };
diff --git a/app/frontend/src/pages/tutor/Tutor.module.css b/app/frontend/src/pages/tutor/Tutor.module.css
index b88b2a409..d144e87c8 100644
--- a/app/frontend/src/pages/tutor/Tutor.module.css
+++ b/app/frontend/src/pages/tutor/Tutor.module.css
@@ -209,3 +209,12 @@ h2 {
     margin-right: 20px;
     margin-bottom: 20px;
 }
+
+.App {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 600px;
+  }
\ No newline at end of file
diff --git a/app/frontend/src/pages/tutor/Tutor.tsx b/app/frontend/src/pages/tutor/Tutor.tsx
index cf0022b5f..49be8fa69 100644
--- a/app/frontend/src/pages/tutor/Tutor.tsx
+++ b/app/frontend/src/pages/tutor/Tutor.tsx
@@ -8,13 +8,23 @@ import {getHint, processAgentResponse, getSolve} from "../../api";
 import { useEffect, useState } from "react";
 import styles from './Tutor.module.css';
 import ReactMarkdown from 'react-markdown';
+import { MathFormatProfessionalFilled } from '@fluentui/react-icons';
+import { Example, ExampleModel } from '../../components/Example';
+import estyles from "../../components/Example/Example.module.css";
 
 const Tutor = () => {
     const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
     const [mathProblem, setMathProblem] = useState('');
     const [output, setOutput] = useState<string | null>(null);
     const [selectedButton, setSelectedButton] = useState<string | null>(null);
 
+    enum ButtonValues {
+        Clues = "Give Me Clues",
+        Solve = "Show Me How to Solve It",
+        Answer = "Show Me the Answer"
+    }
 
     const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
@@ -61,19 +71,54 @@ const Tutor = () => {
     
     async function getAnswer(question: string) {
         setOutput(null);
+        setError(false);
         setLoading(true);
-        const result = await processAgentResponse(question);
-        setLoading(false);
-        setOutput(result.toString());
+        await processAgentResponse(question).then((response) => {
+            setLoading(false);
+            setOutput(response.toString());
+        }).catch(error => {
+            setLoading(false);
+            setErrorMessage(error.message);
+            setError(true);
+        });
         // const eventSource = await processAgentResponse(question);
         // eventSource.onmessage = function(event) {
         //     console.log(event.data);
         //     setOutput(event.data);
     };
+
+    async function handleExampleClick(value: string) {
+        setMathProblem(value);
+        getAnswer(value);
+    }
+
+    
+const EXAMPLES: ExampleModel[] = [
+    { text: "Determine the slope of the line passing through the points (2,5)(2,5) and (4,9)(4,9)", value: "Determine the slope of the line passing through the points (2,5)(2,5) and (4,9)(4,9)" },
+    { text: "Calculate the result of (9+3)×4−7", value: "Calculate the result of (9+3)×4−7" },
+    { text: "What's the answer for (4.5*2.1)^2.2?", value: "What's the answer for (4.5*2.1)^2.2?" },
+    { text: "Find the mean of the heights of students in centimeters: 160, 165, 170, 175, 180.", value: "The heights (in centimeters) of students in a class are recorded as follows: 160, 165, 170, 175, 180. Find the mean height of the students." }
+];
+
+
 return (
-    <div>
-    <h1 className={styles.title}>Your Friendly Math Assistant</h1>
+    <div className={styles.App}>
+    <MathFormatProfessionalFilled fontSize={"6rem"} primaryFill={"#8A0B31"} aria-hidden="true" aria-label="Supported File Types" />
+    <h1 className={styles.title}>Math Assistant</h1>
+    <span className={styles.chatEmptyObjectives}>
+      <i className={styles.centered}>Information Assistant uses AI. Check for mistakes.</i> <a href="https://github.com/microsoft/PubSec-Info-Assistant/blob/main/docs/transparency.md" target="_blank" rel="noopener noreferrer"> Transparency Note</a>
+    </span>
     <div className={styles.centeredContainer}>
+    <p>Select an example query:</p>
+    <div >
+        <ul className={estyles.examplesNavList}>
+            {EXAMPLES.map((x, i) => (
+                <li key={i}>
+                    <Example text={x.text} value={x.value} onClick={handleExampleClick} />
+                </li>
+            ))}
+        </ul>
+    </div >
         <form className={styles.formClass} onSubmit={handleInput}>
             <p className={styles.inputLabel}>Enter question:</p>
             <input
@@ -91,7 +136,7 @@ return (
                     hinter(mathProblem);
                 }}
             >
-                Give me clues
+                {ButtonValues.Clues}
             </Button>
             <Button variant="secondary"
                 className={selectedButton === 'button2' ? styles.selectedButton : ''}
@@ -100,7 +145,7 @@ return (
                     solver(mathProblem);
                 }}
             >
-                Show me how to solve it
+                {ButtonValues.Solve}
             </Button>
             <Button variant="secondary"
                 className={selectedButton === 'button3' ? styles.selectedButton : ''}
@@ -109,11 +154,12 @@ return (
                     getAnswer(mathProblem);
                 }}
             >
-                Show me the answer
+                {ButtonValues.Answer}
             </Button>
         </div>
         </form>
         {loading && <div className="spinner">Loading...</div>}
+        {error && <div className="spinner">{errorMessage}</div>}
         {output && 
                 <Accordion defaultActiveKey="0">