diff --git a/asc/src/components/GameSetup.js b/asc/src/components/GameSetup.js
index be7ae7f..54cf74a 100644
--- a/asc/src/components/GameSetup.js
+++ b/asc/src/components/GameSetup.js
@@ -1,150 +1,216 @@
 import React, { useState } from 'react';
-import { 
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  Grid,
-  Typography,
-  FormControl,
-  FormControlLabel,
-  Radio,
-  RadioGroup,
-  Divider
-} from '@mui/material';
 import { useScore, ACTIONS } from '../context/ScoreContext';
+import { Button, Grid, Typography, TextField, Box } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 
-const GameSetup = ({ onGameStart }) => {
-  const { dispatch } = useScore();
-  const [selectedGameType, setSelectedGameType] = useState('');
-  const [selectedTargetFace, setSelectedTargetFace] = useState('standard');
+const ScoreTracker = () => {
+  const { state, dispatch } = useScore();
+  const navigate = useNavigate();
 
-  const handleGameTypeSelect = (gameType) => {
-    setSelectedGameType(gameType);
-    setSelectedTargetFace('standard'); // Reset to standard when game type changes
+  const gameType = state.currentGame.gameType;
+  
+  // Determine the number of arrows per round based on game type
+  const maxArrowsPerRound = gameType === '450' ? 3 : 5;
+  const maxScore = gameType === '450' ? 10 : 5;
+  const maxRounds = gameType === '450' ? 16 : 12;
+
+  const [arrowScores, setArrowScores] = useState(Array(maxArrowsPerRound).fill(''));
+
+  const handleScoreChange = (index, value) => {
+    const updatedScores = [...arrowScores];
+    updatedScores[index] = value;
+    setArrowScores(updatedScores);
   };
 
-  const startGame = () => {
-    if (!selectedGameType) return;
+  const handleAddRound = () => {
+    const valid = arrowScores.slice(0, maxArrowsPerRound).every(score =>
+      (score >= 0 && score <= maxScore) || score.toUpperCase() === 'X'
+    );
     
-    dispatch({
-      type: ACTIONS.START_GAME,
-      payload: { 
-        gameType: selectedGameType, 
-        isLeague: false,
-        targetFace: selectedTargetFace
-      }
+    if (!valid) {
+      alert(`Please enter valid scores between 0-${maxScore} or X for bullseyes.`);
+      return;
+    }
+
+    const roundArrows = arrowScores.slice(0, maxArrowsPerRound).map((score) => {
+      const arrowScore = score.toUpperCase() === 'X' ? maxScore : parseInt(score, 10);
+      return {
+        score: arrowScore,
+        isBullseye: score.toUpperCase() === 'X',
+      };
     });
-    onGameStart();
+
+    const roundTotal = roundArrows.reduce((sum, arrow) => sum + arrow.score, 0);
+
+    dispatch({
+      type: ACTIONS.ADD_ROUND,
+      payload: {
+        roundIndex: state.currentGame.rounds.length,
+        arrows: roundArrows,
+        total: roundTotal
+      },
+    });
+
+    setArrowScores(Array(maxArrowsPerRound).fill(''));
+
+    if (state.currentGame.rounds.length >= maxRounds - 1) {
+      navigate('/summary');
+    }
   };
 
-  // Determine if we should show target face options
-  const showTargetFaceOptions = selectedGameType !== '';
+  const handleMainMenu = () => {
+    dispatch({ type: ACTIONS.RESET_GAME });
+    navigate('/');
+  };
 
   return (
-    <Grid container spacing={3} justifyContent="center" alignItems="center" style={{ minHeight: '80vh' }}>
-      <Grid item xs={12} sm={8} md={6}>
-        <Card>
-          <CardHeader 
-            title="Start New Game" 
-            titleTypographyProps={{ align: 'center' }}
-          />
-          <CardContent>
-            <Grid container spacing={3}>
-              <Grid item xs={12}>
-                <Typography variant="body1" align="center" gutterBottom>
-                  Select your game type:
-                </Typography>
-              </Grid>
-              <Grid item xs={6}>
-                <Button
-                  fullWidth
-                  variant="contained"
-                  color="primary"
-                  size={selectedGameType === '450' ? "large" : "medium"}
-                  onClick={() => handleGameTypeSelect('450')}
-                  style={{ 
-                    backgroundColor: selectedGameType === '450' ? undefined : '#1976d2',
-                    boxShadow: selectedGameType === '450' ? '0 0 10px #1976d2' : undefined 
-                  }}
-                >
-                  450 Round
-                </Button>
-              </Grid>
-              <Grid item xs={6}>
-                <Button
-                  fullWidth
-                  variant="contained"
-                  color="secondary"
-                  size={selectedGameType === '300' ? "large" : "medium"}
-                  onClick={() => handleGameTypeSelect('300')}
-                  style={{ 
-                    backgroundColor: selectedGameType === '300' ? undefined : '#9c27b0',
-                    boxShadow: selectedGameType === '300' ? '0 0 10px #9c27b0' : undefined 
-                  }}
-                >
-                  300 Round
-                </Button>
-              </Grid>
+    <Grid container spacing={2} justifyContent="center">
+      {/* Main Menu Button */}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 16,
+          left: 16,
+        }}
+      >
+        <Button
+          variant="outlined"
+          onClick={handleMainMenu}
+        >
+          Main Menu
+        </Button>
+      </Box>
 
-              {showTargetFaceOptions && (
-                <>
-                  <Grid item xs={12}>
-                    <Divider style={{ margin: '16px 0' }} />
-                    <Typography variant="body1" align="center" gutterBottom>
-                      Select your target face:
-                    </Typography>
-                  </Grid>
-                  <Grid item xs={12}>
-                    <FormControl component="fieldset">
-                      <RadioGroup
-                        row
-                        name="targetFace"
-                        value={selectedTargetFace}
-                        onChange={(e) => setSelectedTargetFace(e.target.value)}
-                      >
-                        <FormControlLabel 
-                          value="standard" 
-                          control={<Radio />} 
-                          label="Standard" 
-                        />
-                        {selectedGameType === '300' && (
-                          <FormControlLabel 
-                            value="5-spot" 
-                            control={<Radio />} 
-                            label="5-Spot" 
-                          />
-                        )}
-                        {selectedGameType === '450' && (
-                          <FormControlLabel 
-                            value="3-spot" 
-                            control={<Radio />} 
-                            label="3-Spot" 
-                          />
-                        )}
-                      </RadioGroup>
-                    </FormControl>
-                  </Grid>
+      <Grid item xs={12}>
+        <Typography variant="h5" align="center" gutterBottom>
+          {gameType} Round - Round {state.currentGame.rounds.length + 1}
+        </Typography>
+      </Grid>
 
-                  <Grid item xs={12} style={{ marginTop: '16px' }}>
-                    <Button
-                      fullWidth
-                      variant="contained"
-                      color="success"
-                      size="large"
-                      onClick={startGame}
-                    >
-                      Start Game
-                    </Button>
-                  </Grid>
-                </>
-              )}
-            </Grid>
-          </CardContent>
-        </Card>
+      {/* Score input section */}
+      <Grid item xs={12}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            gap: 1,
+            mb: 2
+          }}
+        >
+          {Array.from({ length: maxArrowsPerRound }).map((_, index) => (
+            <TextField
+              key={index}
+              value={arrowScores[index]}
+              onChange={(e) => handleScoreChange(index, e.target.value)}
+              placeholder="0"
+              size="small"
+              sx={{
+                width: '60px',
+                '& .MuiInputBase-input': {
+                  padding: '8px',
+                  textAlign: 'center'
+                }
+              }}
+              inputProps={{
+                maxLength: 1,
+                style: { textAlign: 'center' }
+              }}
+            />
+          ))}
+        </Box>
+      </Grid>
+
+      {/* Score buttons */}
+      <Grid item xs={12}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            gap: 1,
+            mb: 2
+          }}
+        >
+          {Array.from({ length: maxScore + 1 }).map((_, i) => (
+            <Button
+              key={i}
+              variant="outlined"
+              size="small"
+              sx={{ minWidth: '40px', height: '40px' }}
+              onClick={() => {
+                const emptyIndex = arrowScores.findIndex(score => score === '');
+                if (emptyIndex >= 0 && emptyIndex < maxArrowsPerRound) {
+                  handleScoreChange(emptyIndex, i.toString());
+                }
+              }}
+            >
+              {i}
+            </Button>
+          ))}
+          <Button
+            variant="outlined"
+            size="small"
+            sx={{ minWidth: '40px', height: '40px' }}
+            onClick={() => {
+              const emptyIndex = arrowScores.findIndex(score => score === '');
+              if (emptyIndex >= 0 && emptyIndex < maxArrowsPerRound) {
+                handleScoreChange(emptyIndex, 'X');
+              }
+            }}
+          >
+            X
+          </Button>
+        </Box>
+      </Grid>
+
+      {/* Control buttons */}
+      <Grid item xs={12}>
+        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2 }}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleAddRound}
+            disabled={!arrowScores.slice(0, maxArrowsPerRound).every(score => score !== '')}
+          >
+            Add Round
+          </Button>
+          <Button
+            variant="outlined"
+            onClick={() => setArrowScores(Array(maxArrowsPerRound).fill(''))}
+          >
+            Clear
+          </Button>
+        </Box>
+      </Grid>
+
+      {/* Scores display */}
+      <Grid item xs={12}>
+        <Typography variant="h6" align="center">
+          Total Score: {state.currentGame.totalScore} | 
+          Bullseyes: {state.currentGame.totalBullseyes}
+        </Typography>
+      </Grid>
+
+      {/* Round history */}
+      <Grid item xs={12}>
+        <Box sx={{ maxHeight: '200px', overflow: 'auto' }}>
+          {state.currentGame.rounds.length > 0 ? (
+            state.currentGame.rounds.map((round, roundIndex) => (
+              <Typography key={roundIndex} variant="body2" align="center">
+                Round {roundIndex + 1}: {round.arrows.map(arrow => arrow.score).join(', ')} 
+                (Total: {round.total}, Bullseyes: {round.bullseyes})
+              </Typography>
+            ))
+          ) : (
+            <Typography variant="body2" align="center">
+              No rounds played yet.
+            </Typography>
+          )}
+        </Box>
       </Grid>
     </Grid>
   );
 };
 
-export default GameSetup;
+export default ScoreTracker;
+
diff --git a/asc/src/components/ScoreTracker.js b/asc/src/components/ScoreTracker.js
index 0ffe297..1be2b61 100644
--- a/asc/src/components/ScoreTracker.js
+++ b/asc/src/components/ScoreTracker.js
@@ -1,231 +1,162 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  FormControl,
+  FormControlLabel,
+  RadioGroup,
+  Radio,
+  Grid,
+  Typography,
+  Select,
+  MenuItem
+} from '@mui/material';
 import { useScore, ACTIONS } from '../context/ScoreContext';
-import { Button, Grid, Typography, TextField, Box } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
 
-const ScoreTracker = () => {
-  const { state, dispatch } = useScore();
-  const navigate = useNavigate();
-  
-  const gameType = state.currentGame.gameType;
-  const isLeague = state.currentGame.isLeague;  // Check if it's a league game
-  const maxArrowsPerRound = gameType === '450' ? 3 : 5;
-  const maxScore = gameType === '450' ? 10 : 5;
-  const maxRounds = gameType === '450' ? 16 : 12;
+const GameSetup = ({ onGameStart }) => {
+  const { dispatch } = useScore();
 
-  const [arrowScores, setArrowScores] = useState(Array(maxArrowsPerRound).fill(''));
+  const [selectedGameType, setSelectedGameType] = useState('');
+  const [isLeague, setIsLeague] = useState(false);  // This tracks if it's a league game
+  const [selectedTargetFace, setSelectedTargetFace] = useState('single');  // Assuming single as default target face
 
-  const handleScoreChange = (index, value) => {
-    const updatedScores = [...arrowScores];
-    updatedScores[index] = value;
-    setArrowScores(updatedScores);
+  // Log isLeague to verify if it changes correctly
+  useEffect(() => {
+    console.log("Game mode isLeague:", isLeague);  // Check this in the console
+  }, [isLeague]);
+
+  const handleGameModeChange = (event) => {
+    const leagueMode = event.target.value === "league";
+    setIsLeague(leagueMode);  // Update isLeague based on user selection
   };
 
-  const handleAddRound = () => {
-    const valid = arrowScores.slice(0, maxArrowsPerRound).every(score =>
-      (score >= 0 && score <= maxScore) || score.toUpperCase() === 'X'
-    );
-    
-    if (!valid) {
-      alert(`Please enter valid scores between 0-${maxScore} or X for bullseyes.`);
-      return;
-    }
+  const handleTargetFaceChange = (event) => {
+    setSelectedTargetFace(event.target.value);
+  };
 
-    const roundArrows = arrowScores.slice(0, maxArrowsPerRound).map((score) => {
-      const arrowScore = score.toUpperCase() === 'X' ? maxScore : parseInt(score, 10);
-      return {
-        score: arrowScore,
-        isBullseye: score.toUpperCase() === 'X',
-      };
+  const startGame = () => {
+    if (!selectedGameType) return;
+
+    // Log the values to ensure they're correct
+    console.log("Starting game with settings:", {
+      gameType: selectedGameType,
+      isLeague: isLeague,
+      targetFace: selectedTargetFace
     });
 
-    const roundTotal = roundArrows.reduce((sum, arrow) => sum + arrow.score, 0);
-
     dispatch({
-      type: ACTIONS.ADD_ROUND,
+      type: ACTIONS.START_GAME,
       payload: {
-        roundIndex: state.currentGame.rounds.length,
-        arrows: roundArrows,
-        total: roundTotal
-      },
-    });
-
-    setArrowScores(Array(maxArrowsPerRound).fill(''));
-
-    if (state.currentGame.rounds.length >= maxRounds - 1) {
-      navigate('/summary');
-    }
-  };
-
-  const handleMainMenu = () => {
-    dispatch({ type: ACTIONS.RESET_GAME });
-    navigate('/');
-  };
-
-  const handleGameStart = (gameType, isLeague) => {
-    // Dispatch the action to start a new round with the correct game type and isLeague flag
-    dispatch({
-      type: ACTIONS.START_NEW_ROUND,
-      payload: {
-        gameType,   // '450' or '300'
-        isLeague    // true for league games, false for practice games
+        gameType: selectedGameType,
+        isLeague: isLeague,  // Pass the league/practice mode correctly
+        targetFace: selectedTargetFace
       }
     });
-    navigate('/score-tracker');  // Navigate directly to the score tracker
+    onGameStart();
   };
 
-
   return (
-    <Grid container spacing={2} justifyContent="center">
-      {/* Main Menu Button */}
-      <Box
-        sx={{
-          position: 'absolute',
-          top: 16,
-          left: 16,
-        }}
-      >
-        <Button
-          variant="outlined"
-          onClick={handleMainMenu}
-        >
-          Main Menu
-        </Button>
-      </Box>
+    <Grid container spacing={3} justifyContent="center" alignItems="center" style={{ minHeight: '80vh' }}>
+      <Grid item xs={12} sm={8} md={6}>
+        <Card>
+          <CardHeader
+            title="Start New Game"
+            titleTypographyProps={{ align: 'center' }}
+          />
+          <CardContent>
+            <Grid container spacing={3}>
+              <Grid item xs={12}>
+                <Typography variant="body1" align="center" gutterBottom>
+                  Select your game type:
+                </Typography>
+              </Grid>
+              <Grid item xs={6}>
+                <Button
+                  fullWidth
+                  variant="contained"
+                  color={selectedGameType === '450' ? 'primary' : 'default'}
+                  size="large"
+                  onClick={() => setSelectedGameType('450')}
+                >
+                  450 Round
+                </Button>
+              </Grid>
+              <Grid item xs={6}>
+                <Button
+                  fullWidth
+                  variant="contained"
+                  color={selectedGameType === '300' ? 'secondary' : 'default'}
+                  size="large"
+                  onClick={() => setSelectedGameType('300')}
+                >
+                  300 Round
+                </Button>
+              </Grid>
 
-      <Grid item xs={12}>
-        <Typography variant="h5" align="center" gutterBottom>
-          {gameType} Round - Round {state.currentGame.rounds.length + 1}
-        </Typography>
-        <Typography variant="subtitle1" align="center" gutterBottom>
-          {isLeague ? 'League Game' : 'Practice Game'}  {/* Display whether it's a league or practice game */}
-        </Typography>
-      </Grid>
+              {/* Select League or Practice Mode */}
+              <Grid item xs={12}>
+                <FormControl component="fieldset" fullWidth>
+                  <Typography variant="body1" align="center" gutterBottom>
+                    Select game mode:
+                  </Typography>
+                  <RadioGroup
+                    row
+                    name="gameMode"
+                    value={isLeague ? "league" : "practice"}  // Display correct mode
+                    onChange={handleGameModeChange}
+                  >
+                    <FormControlLabel
+                      value="practice"
+                      control={<Radio />}
+                      label="Practice"
+                    />
+                    <FormControlLabel
+                      value="league"
+                      control={<Radio />}
+                      label="League"
+                    />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
 
-      {/* Score input section */}
-      <Grid item xs={12}>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            gap: 1,
-            mb: 2
-          }}
-        >
-          {Array.from({ length: maxArrowsPerRound }).map((_, index) => (
-            <TextField
-              key={index}
-              value={arrowScores[index]}
-              onChange={(e) => handleScoreChange(index, e.target.value)}
-              placeholder="0"
-              size="small"
-              sx={{
-                width: '60px',
-                '& .MuiInputBase-input': {
-                  padding: '8px',
-                  textAlign: 'center'
-                }
-              }}
-              inputProps={{
-                maxLength: 1,
-                style: { textAlign: 'center' }
-              }}
-            />
-          ))}
-        </Box>
-      </Grid>
+              {/* Target face selection */}
+              <Grid item xs={12}>
+                <FormControl fullWidth>
+                  <Typography variant="body1" align="center" gutterBottom>
+                    Select target face:
+                  </Typography>
+                  <Select
+                    value={selectedTargetFace}
+                    onChange={handleTargetFaceChange}
+                  >
+                    <MenuItem value="single">Single Spot</MenuItem>
+                    <MenuItem value="five">Five Spot</MenuItem>
+                  </Select>
+                </FormControl>
+              </Grid>
 
-      {/* Score buttons */}
-      <Grid item xs={12}>
-        <Box
-          sx={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            justifyContent: 'center',
-            gap: 1,
-            mb: 2
-          }}
-        >
-          {Array.from({ length: maxScore + 1 }).map((_, i) => (
-            <Button
-              key={i}
-              variant="outlined"
-              size="small"
-              sx={{ minWidth: '40px', height: '40px' }}
-              onClick={() => {
-                const emptyIndex = arrowScores.findIndex(score => score === '');
-                if (emptyIndex >= 0 && emptyIndex < maxArrowsPerRound) {
-                  handleScoreChange(emptyIndex, i.toString());
-                }
-              }}
-            >
-              {i}
-            </Button>
-          ))}
-          <Button
-            variant="outlined"
-            size="small"
-            sx={{ minWidth: '40px', height: '40px' }}
-            onClick={() => {
-              const emptyIndex = arrowScores.findIndex(score => score === '');
-              if (emptyIndex >= 0 && emptyIndex < maxArrowsPerRound) {
-                handleScoreChange(emptyIndex, 'X');
-              }
-            }}
-          >
-            X
-          </Button>
-        </Box>
-      </Grid>
-
-      {/* Control buttons */}
-      <Grid item xs={12}>
-        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2 }}>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={handleAddRound}
-            disabled={!arrowScores.slice(0, maxArrowsPerRound).every(score => score !== '')}
-          >
-            Add Round
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() => setArrowScores(Array(maxArrowsPerRound).fill(''))}
-          >
-            Clear
-          </Button>
-        </Box>
-      </Grid>
-
-      {/* Scores display */}
-      <Grid item xs={12}>
-        <Typography variant="h6" align="center">
-          Total Score: {state.currentGame.totalScore} | 
-          Bullseyes: {state.currentGame.totalBullseyes}
-        </Typography>
-      </Grid>
-
-      {/* Round history */}
-      <Grid item xs={12}>
-        <Box sx={{ maxHeight: '200px', overflow: 'auto' }}>
-          {state.currentGame.rounds.length > 0 ? (
-            state.currentGame.rounds.map((round, roundIndex) => (
-              <Typography key={roundIndex} variant="body2" align="center">
-                Round {roundIndex + 1}: {round.arrows.map(arrow => arrow.score).join(', ')} 
-                (Total: {round.total}, Bullseyes: {round.bullseyes})
-              </Typography>
-            ))
-          ) : (
-            <Typography variant="body2" align="center">
-              No rounds played yet.
-            </Typography>
-          )}
-        </Box>
+              {/* Start Game Button */}
+              <Grid item xs={12}>
+                <Button
+                  fullWidth
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  onClick={startGame}
+                  disabled={!selectedGameType}  // Disable button if no game type selected
+                >
+                  Start Game
+                </Button>
+              </Grid>
+            </Grid>
+          </CardContent>
+        </Card>
       </Grid>
     </Grid>
   );
 };
 
-export default ScoreTracker;
+export default GameSetup;