Redesign complete. Not much UI changes

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider, CssBaseline } from '@mui/material';
+import { ThemeProvider, CssBaseline, AppBar, Toolbar, Typography, Box } from '@mui/material';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import theme from './theme';
 import CreateSession from './pages/CreateSession';
@@ -11,11 +11,25 @@ function App() {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Router>
-        <Routes>
-          <Route path="/" element={<CreateSession />} />
-          {/* Other routes will be added here */}
-          <Route path="/session/:sessionId" element={<SessionPage />} />
-        </Routes>
+        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+          <AppBar position="static">
+            <Toolbar>
+              <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
+                <img src="/logo.svg" alt="Unisono Logo" style={{ height: 24, marginRight: 8 }} /> {/* Placeholder for logo */}
+                <Typography variant="h6" component="div">
+                  Unisono
+                </Typography>
+              </Box>
+            </Toolbar>
+          </AppBar>
+          <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+            <Routes>
+              <Route path="/" element={<CreateSession />} />
+              {/* Other routes will be added here */}
+              <Route path="/session/:sessionId" element={<SessionPage />} />
+            </Routes>
+          </Box>
+        </Box>
       </Router>
     </ThemeProvider>
   );

frontend/src/components/DesireForm.tsx

@@ -39,9 +39,8 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
 
     return (
         <Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}>
-            <Typography variant="h6" gutterBottom>What you WANT</Typography>
+            <Typography variant="h6" gutterBottom>What You Want</Typography>
             <TextField
-                label="List items you want (one per line)"
                 multiline
                 rows={4}
                 fullWidth
@@ -49,12 +48,11 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
                 onChange={(e) => setWants(e.target.value)}
                 margin="normal"
                 inputProps={{ maxLength: 500 }}
-                helperText={`${wants.length}/500`}
+                helperText={`Enter items you want, one per line. Max 500 characters per item. ${wants.length}/500`}
             />
 
-            <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>What you ACCEPT</Typography>
+            <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>What You Accept</Typography>
             <TextField
-                label="List items you accept (one per line)"
                 multiline
                 rows={4}
                 fullWidth
@@ -62,12 +60,11 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
                 onChange={(e) => setAccepts(e.target.value)}
                 margin="normal"
                 inputProps={{ maxLength: 500 }}
-                helperText={`${accepts.length}/500`}
+                helperText={`Enter items you accept, one per line. Max 500 characters per item. ${accepts.length}/500`}
             />
 
-            <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>What you DO NOT WANT</Typography>
+            <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>What You Do Not Want</Typography>
             <TextField
-                label="List items you absolutely do not want (one per line)"
                 multiline
                 rows={4}
                 fullWidth
@@ -75,7 +72,7 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
                 onChange={(e) => setNoGoes(e.target.value)}
                 margin="normal"
                 inputProps={{ maxLength: 500 }}
-                helperText={`${noGoes.length}/500`}
+                helperText={`Enter items you absolutely do not want, one per line. Max 500 characters per item. ${noGoes.length}/500`}
             />
 
             <Button

frontend/src/components/EmptyState.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+interface EmptyStateProps {
+  message?: string;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ message = 'No data available.' }) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      minHeight="200px"
+      p={2}
+    >
+      <Typography variant="h6" color="text.secondary" gutterBottom>
+        {message}
+      </Typography>
+    </Box>
+  );
+};
+
+export default EmptyState;

frontend/src/components/ErrorState.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box, Typography, Button } from '@mui/material';
+
+interface ErrorStateProps {
+  message?: string;
+  onRetry?: () => void;
+}
+
+const ErrorState: React.FC<ErrorStateProps> = ({ message = 'An unexpected error occurred.', onRetry }) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      minHeight="200px"
+      p={2}
+    >
+      <Typography variant="h6" color="error" gutterBottom>
+        Error
+      </Typography>
+      <Typography variant="body1" color="text.secondary" textAlign="center" mb={2}>
+        {message}
+      </Typography>
+      {onRetry && (
+        <Button variant="contained" onClick={onRetry}>
+          Retry
+        </Button>
+      )}
+    </Box>
+  );
+};
+
+export default ErrorState;

frontend/src/components/LoadingState.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, CircularProgress, Typography } from '@mui/material';
+
+interface LoadingStateProps {
+  message?: string;
+}
+
+const LoadingState: React.FC<LoadingStateProps> = ({ message = 'Loading...' }) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      minHeight="200px"
+      p={2}
+    >
+      <CircularProgress sx={{ mb: 2 }} />
+      <Typography variant="body1" color="text.secondary">
+        {message}
+      </Typography>
+    </Box>
+  );
+};
+
+export default LoadingState;

frontend/src/pages/SessionPage.tsx

@@ -45,7 +45,7 @@ const SessionPage = () => {
                 {wsError && <Alert severity="error" sx={{ mb: 2 }}>{wsError}</Alert>}
 
                 <Typography variant="h4" component="h1" gutterBottom>
-                    Session: {session.topic || session.sessionId}
+                    {session.topic || session.sessionId}
                 </Typography>
 
                 {session.state === SessionState.SETUP && (
@@ -88,15 +88,11 @@ const SessionPage = () => {
                     </Box>
                 )}
 
+                {/* Session status is hidden as per FR-008 */}
                 {session.state !== SessionState.SETUP && (
-                    <>
-                        <Typography variant="h6" gutterBottom>
-                            Expected Responses: {session.expectedResponses}
-                        </Typography>
-                        <Typography variant="body1" gutterBottom>
-                            Status: {session.state}
-                        </Typography>
-                    </>
+                    <Typography variant="h6" gutterBottom>
+                        Expected Responses: {session.expectedResponses}
+                    </Typography>
                 )}
 
                 {session.state === SessionState.GATHERING && !hasSubmittedCurrentParticipant && (