--- a
+++ b/src/pages/GeneAnalysis/GeneAnalysis.tsx
@@ -0,0 +1,184 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Grid,
+  Card,
+  CardContent,
+  Button,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  CircularProgress,
+  Alert,
+  LinearProgress,
+} from '@mui/material';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import { GeneAssembly } from '../../types';
+import { usePipeline, useGenomicAnalyses } from '../../hooks/usePipeline';
+import { mockGeneAssemblies } from '../../data/mockData';
+
+const defaultExperimentConfig = {
+  id: Math.random().toString(36).substr(2, 9),
+  name: 'Gene Analysis Experiment',
+  environmentalParams: {
+    temperature: 25,
+    humidity: 60,
+    soilConditions: 'Controlled',
+  },
+  duration: 30,
+  samplingFrequency: 24,
+  baselineGenotypes: ['WT-Col-0'],
+  targetTraits: ['stress_tolerance', 'growth_rate'],
+};
+
+const GeneAnalysis: React.FC = () => {
+  const [selectedAssembly, setSelectedAssembly] = useState<string>('');
+  const { startPipeline, isProcessing, error, clearError } = usePipeline();
+  const analysisResults = useGenomicAnalyses();
+
+  const handleAnalyze = useCallback(async () => {
+    if (!selectedAssembly) return;
+
+    const assembly = mockGeneAssemblies.find(a => a.id === selectedAssembly);
+    if (!assembly) return;
+
+    await startPipeline({
+      experimentConfig: {
+        ...defaultExperimentConfig,
+        name: `Analysis of ${assembly.name}`,
+      },
+      assembly,
+    });
+  }, [selectedAssembly, startPipeline]);
+
+  const renderAnalysisResults = () => {
+    if (!analysisResults.length) return null;
+
+    const latestResult = analysisResults[analysisResults.length - 1];
+    const geneExpressionData = latestResult.metrics.geneExpression.map((value, index) => ({
+      time: `T${index}`,
+      expression: value,
+    }));
+
+    return (
+      <Card sx={{ mt: 3 }}>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>
+            Analysis Results
+          </Typography>
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <Typography variant="subtitle2">Gene Expression Levels</Typography>
+              <ResponsiveContainer width="100%" height={300}>
+                <LineChart data={geneExpressionData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="time" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Line
+                    type="monotone"
+                    dataKey="expression"
+                    stroke="#8884d8"
+                    name="Expression Level"
+                  />
+                </LineChart>
+              </ResponsiveContainer>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Typography variant="subtitle2" gutterBottom>
+                Regulatory Elements
+              </Typography>
+              {latestResult.metrics.regulatoryElements.map((element, index) => (
+                <Typography key={index} variant="body2">
+                  • {element}
+                </Typography>
+              ))}
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Typography variant="subtitle2" gutterBottom>
+                Pathway Enrichment
+              </Typography>
+              {latestResult.metrics.pathwayEnrichment.map((pathway, index) => (
+                <Box key={index} sx={{ mb: 1 }}>
+                  <Typography variant="body2">
+                    {pathway.pathway}: {(pathway.score * 100).toFixed(1)}%
+                  </Typography>
+                  <LinearProgress
+                    variant="determinate"
+                    value={pathway.score * 100}
+                    sx={{ height: 8, borderRadius: 4 }}
+                  />
+                </Box>
+              ))}
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+    );
+  };
+
+  return (
+    <Box>
+      <Typography variant="h4" gutterBottom>
+        Gene Analysis
+      </Typography>
+
+      {error && (
+        <Alert severity="error" onClose={clearError} sx={{ mb: 2 }}>
+          {error}
+        </Alert>
+      )}
+
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={4}>
+          <Paper sx={{ p: 2 }}>
+            <Typography variant="h6" gutterBottom>
+              Gene Assembly Selection
+            </Typography>
+            <FormControl fullWidth sx={{ mb: 2 }}>
+              <InputLabel>Select Assembly</InputLabel>
+              <Select
+                value={selectedAssembly}
+                label="Select Assembly"
+                onChange={(e) => setSelectedAssembly(e.target.value)}
+              >
+                {mockGeneAssemblies.map((assembly) => (
+                  <MenuItem key={assembly.id} value={assembly.id}>
+                    {assembly.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <Button
+              variant="contained"
+              fullWidth
+              onClick={handleAnalyze}
+              disabled={!selectedAssembly || isProcessing}
+            >
+              {isProcessing ? <CircularProgress size={24} /> : 'Analyze Assembly'}
+            </Button>
+          </Paper>
+        </Grid>
+
+        <Grid item xs={12} md={8}>
+          {renderAnalysisResults()}
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default GeneAnalysis;