diff --git a/src/components/GameOfSim.tsx b/src/components/GameOfSim.tsx
new file mode 100644
index 0000000..f404cf1
--- /dev/null
+++ b/src/components/GameOfSim.tsx
@@ -0,0 +1,274 @@
+import React, { useState, useCallback } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { RotateCcw, Undo2 } from 'lucide-react';
+
+interface Edge {
+  from: number;
+  to: number;
+  color: 'red' | 'blue' | null;
+}
+
+interface GameState {
+  edges: Edge[];
+  currentPlayer: 'red' | 'blue';
+  gameOver: boolean;
+  winner: 'red' | 'blue' | null;
+  moveHistory: Edge[];
+}
+
+const GameOfSim = () => {
+  const [vertices, setVertices] = useState(6);
+  const [gameState, setGameState] = useState<GameState>(() => initializeGame(6));
+
+  function initializeGame(numVertices: number): GameState {
+    const edges: Edge[] = [];
+    
+    // Create all possible edges between vertices
+    for (let i = 0; i < numVertices; i++) {
+      for (let j = i + 1; j < numVertices; j++) {
+        edges.push({ from: i, to: j, color: null });
+      }
+    }
+
+    return {
+      edges,
+      currentPlayer: 'red',
+      gameOver: false,
+      winner: null,
+      moveHistory: []
+    };
+  }
+
+  const resetGame = useCallback(() => {
+    setGameState(initializeGame(vertices));
+  }, [vertices]);
+
+  const undoMove = useCallback(() => {
+    if (gameState.moveHistory.length === 0) return;
+
+    const lastMove = gameState.moveHistory[gameState.moveHistory.length - 1];
+    const newEdges = gameState.edges.map(edge => {
+      if (edge.from === lastMove.from && edge.to === lastMove.to) {
+        return { ...edge, color: null };
+      }
+      return edge;
+    });
+
+    setGameState(prev => ({
+      ...prev,
+      edges: newEdges,
+      currentPlayer: prev.currentPlayer === 'red' ? 'blue' : 'red',
+      moveHistory: prev.moveHistory.slice(0, -1),
+      gameOver: false,
+      winner: null
+    }));
+  }, [gameState.moveHistory, gameState.edges]);
+
+  const checkForTriangle = useCallback((edges: Edge[], player: 'red' | 'blue'): boolean => {
+    const playerEdges = edges.filter(edge => edge.color === player);
+    
+    // Check all possible triangles
+    for (let i = 0; i < vertices; i++) {
+      for (let j = i + 1; j < vertices; j++) {
+        for (let k = j + 1; k < vertices; k++) {
+          // Check if all three edges of triangle exist for this player
+          const edge1 = playerEdges.find(e => (e.from === i && e.to === j) || (e.from === j && e.to === i));
+          const edge2 = playerEdges.find(e => (e.from === i && e.to === k) || (e.from === k && e.to === i));
+          const edge3 = playerEdges.find(e => (e.from === j && e.to === k) || (e.from === k && e.to === j));
+          
+          if (edge1 && edge2 && edge3) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }, [vertices]);
+
+  const handleEdgeClick = useCallback((edgeIndex: number) => {
+    if (gameState.gameOver || gameState.edges[edgeIndex].color !== null) return;
+
+    const newEdges = [...gameState.edges];
+    const clickedEdge = { ...newEdges[edgeIndex], color: gameState.currentPlayer };
+    newEdges[edgeIndex] = clickedEdge;
+
+    // Check if this move creates a triangle
+    const hasTriangle = checkForTriangle(newEdges, gameState.currentPlayer);
+
+    setGameState(prev => ({
+      edges: newEdges,
+      currentPlayer: hasTriangle ? prev.currentPlayer : (prev.currentPlayer === 'red' ? 'blue' : 'red'),
+      gameOver: hasTriangle,
+      winner: hasTriangle ? (prev.currentPlayer === 'red' ? 'blue' : 'red') : null,
+      moveHistory: [...prev.moveHistory, clickedEdge]
+    }));
+  }, [gameState, checkForTriangle]);
+
+  const getVertexPosition = (index: number, total: number) => {
+    const angle = (2 * Math.PI * index) / total;
+    const radius = 120;
+    const centerX = 150;
+    const centerY = 150;
+    
+    return {
+      x: centerX + radius * Math.cos(angle - Math.PI / 2),
+      y: centerY + radius * Math.sin(angle - Math.PI / 2)
+    };
+  };
+
+  const handleVerticesChange = (value: string) => {
+    const newVertices = parseInt(value);
+    setVertices(newVertices);
+    setGameState(initializeGame(newVertices));
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold text-center">Game of Sim</CardTitle>
+          <CardDescription className="text-center">
+            Take turns coloring the lines between dots. Avoid creating a triangle of your color - first player to make one loses!
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Game Controls */}
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+            <div className="flex items-center gap-3">
+              <label htmlFor="vertices-select" className="text-sm font-medium">
+                Vertices:
+              </label>
+              <Select value={vertices.toString()} onValueChange={handleVerticesChange}>
+                <SelectTrigger className="w-20">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="3">3</SelectItem>
+                  <SelectItem value="4">4</SelectItem>
+                  <SelectItem value="5">5</SelectItem>
+                  <SelectItem value="6">6</SelectItem>
+                  <SelectItem value="7">7</SelectItem>
+                  <SelectItem value="8">8</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={undoMove}
+                disabled={gameState.moveHistory.length === 0}
+              >
+                <Undo2 className="w-4 h-4 mr-1" />
+                Undo
+              </Button>
+              <Button variant="outline" size="sm" onClick={resetGame}>
+                <RotateCcw className="w-4 h-4 mr-1" />
+                Reset Game
+              </Button>
+            </div>
+          </div>
+
+          {/* Current Turn Indicator */}
+          <div className="text-center">
+            {gameState.gameOver ? (
+              <div className="space-y-2">
+                <Badge variant="destructive" className="text-lg px-4 py-2">
+                  Game Over!
+                </Badge>
+                <p className="text-lg font-medium">
+                  <span className={gameState.winner === 'blue' ? 'text-blue-600' : 'text-red-600'}>
+                    {gameState.winner === 'blue' ? 'Blue' : 'Red'} Player
+                  </span>{' '}
+                  wins!
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <p className="text-sm text-muted-foreground">Current Turn:</p>
+                <Badge 
+                  variant="outline" 
+                  className={`text-lg px-4 py-2 ${
+                    gameState.currentPlayer === 'red' 
+                      ? 'border-red-500 text-red-600' 
+                      : 'border-blue-500 text-blue-600'
+                  }`}
+                >
+                  {gameState.currentPlayer === 'red' ? 'Red' : 'Blue'} Player
+                </Badge>
+              </div>
+            )}
+          </div>
+
+          {/* Game Board */}
+          <div className="flex justify-center">
+            <div className="bg-surface rounded-lg p-8 border">
+              <svg width="300" height="300" viewBox="0 0 300 300">
+                {/* Draw edges */}
+                {gameState.edges.map((edge, index) => {
+                  const pos1 = getVertexPosition(edge.from, vertices);
+                  const pos2 = getVertexPosition(edge.to, vertices);
+                  
+                  return (
+                    <line
+                      key={index}
+                      x1={pos1.x}
+                      y1={pos1.y}
+                      x2={pos2.x}
+                      y2={pos2.y}
+                      stroke={edge.color || '#e2e8f0'}
+                      strokeWidth={edge.color ? 3 : 2}
+                      className="cursor-pointer hover:stroke-gray-400 transition-colors"
+                      onClick={() => handleEdgeClick(index)}
+                    />
+                  );
+                })}
+                
+                {/* Draw vertices */}
+                {Array.from({ length: vertices }, (_, i) => {
+                  const pos = getVertexPosition(i, vertices);
+                  return (
+                    <g key={i}>
+                      <circle
+                        cx={pos.x}
+                        cy={pos.y}
+                        r="8"
+                        fill="hsl(var(--primary))"
+                        stroke="hsl(var(--background))"
+                        strokeWidth="2"
+                      />
+                      <text
+                        x={pos.x}
+                        y={pos.y + 20}
+                        textAnchor="middle"
+                        className="text-sm font-medium fill-foreground"
+                      >
+                        {i + 1}
+                      </text>
+                    </g>
+                  );
+                })}
+              </svg>
+            </div>
+          </div>
+
+          {/* Instructions */}
+          <div className="text-center space-y-2 p-4 bg-muted rounded-lg">
+            <p className="text-sm text-muted-foreground">
+              Click on the lines between dots to color them with your color.
+            </p>
+            <p className="text-sm font-medium text-foreground">
+              Avoid creating a triangle of your own color!
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default GameOfSim;
\ No newline at end of file
diff --git a/src/components/GamesGallery.tsx b/src/components/GamesGallery.tsx
new file mode 100644
index 0000000..8604242
--- /dev/null
+++ b/src/components/GamesGallery.tsx
@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Search } from 'lucide-react';
+import GameOfSim from '@/components/GameOfSim';
+
+interface Game {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  component: React.ComponentType;
+}
+
+const games: Game[] = [
+  {
+    id: 'game-of-sim',
+    title: 'Game of Sim',
+    description: 'A strategic two-player game where you take turns coloring edges between vertices, trying to avoid creating a triangle of your own color.',
+    tags: ['strategy', 'graph-theory', 'two-player', 'logic', 'game-theory'],
+    component: GameOfSim
+  }
+];
+
+const GamesGallery = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedGame, setSelectedGame] = useState<Game | null>(null);
+
+  const filteredGames = games.filter(game => 
+    game.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    game.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    game.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+  );
+
+  if (selectedGame) {
+    const GameComponent = selectedGame.component;
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <button 
+            onClick={() => setSelectedGame(null)}
+            className="text-primary hover:text-primary/80 font-medium"
+          >
+            ← Back to Educational Games
+          </button>
+        </div>
+        <div className="bg-background border rounded-lg p-6">
+          <GameComponent />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h1 className="text-3xl font-bold text-foreground">Educational Games</h1>
+        <p className="text-muted-foreground text-lg">
+          Learn through play with interactive games that reinforce computer science and mathematical concepts.
+        </p>
+      </div>
+
+      {/* Search bar */}
+      <div className="relative max-w-md">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+        <Input 
+          placeholder="Search games..." 
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      {/* Games Gallery */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredGames.map(game => (
+          <Card 
+            key={game.id}
+            className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105"
+            onClick={() => setSelectedGame(game)}
+          >
+            <CardHeader className="space-y-3">
+              <CardTitle className="text-xl text-foreground">{game.title}</CardTitle>
+              <CardDescription className="text-muted-foreground line-clamp-3">
+                {game.description}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-wrap gap-2">
+                {game.tags.map(tag => (
+                  <Badge key={tag} variant="secondary" className="text-xs">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {filteredGames.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground text-lg">No games found matching your search.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GamesGallery;
\ No newline at end of file
diff --git a/src/pages/theme-pages/Games.tsx b/src/pages/theme-pages/Games.tsx
index 8cb70fa..7e0a5a9 100644
--- a/src/pages/theme-pages/Games.tsx
+++ b/src/pages/theme-pages/Games.tsx
@@ -1,11 +1,13 @@
-import ComingSoon from "@/components/ComingSoon";
+import Layout from "@/components/Layout";
+import GamesGallery from "@/components/GamesGallery";
 
 const Games = () => {
   return (
-    <ComingSoon 
-      title="Educational Games"
-      description="Learn through play with educational games that reinforce computer science and mathematical concepts. Interactive challenges that make learning engaging and memorable."
-    />
+    <Layout>
+      <div className="container mx-auto px-4 py-8">
+        <GamesGallery />
+      </div>
+    </Layout>
   );
 };