diff --git a/src/App.tsx b/src/App.tsx
index b8705da..8ae9b8d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,8 @@ import BinaryNumberGamePage from "./pages/BinaryNumberGamePage";
 import BinaryNumberGameGreenScreen from "./pages/BinaryNumberGameGreenScreen";
 import BinarySearchTrickPage from "./pages/BinarySearchTrickPage";
 import BinarySearchTrickGreenScreen from "./pages/BinarySearchTrickGreenScreen";
+import GameOfSimGreenScreen from "./pages/GameOfSimGreenScreen";
+import GameOfSimPage from "./pages/GameOfSimPage";
 import Foundations from "./pages/theme-pages/discrete-math/Foundations";
 import Proofs from "./pages/theme-pages/discrete-math/Proofs";
 import Counting from "./pages/theme-pages/discrete-math/Counting";
@@ -60,6 +62,8 @@ const App = () => (
           <Route path="/binary-number-game/:mode" element={<BinaryNumberGameGreenScreen />} />
           <Route path="/binary-search-trick" element={<BinarySearchTrickPage />} />
           <Route path="/binary-search-trick/:mode" element={<BinarySearchTrickGreenScreen />} />
+          <Route path="/game-of-sim" element={<GameOfSimPage />} />
+          <Route path="/game-of-sim/:mode" element={<GameOfSimGreenScreen />} />
           
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
diff --git a/src/components/GameOfSim.tsx b/src/components/GameOfSim.tsx
index 52ca88c..455f02f 100644
--- a/src/components/GameOfSim.tsx
+++ b/src/components/GameOfSim.tsx
@@ -20,7 +20,11 @@ interface GameState {
   moveHistory: Edge[];
 }
 
-const GameOfSim = () => {
+interface GameOfSimProps {
+  showSocialShare?: boolean;
+}
+
+const GameOfSim: React.FC<GameOfSimProps> = ({ showSocialShare = true }) => {
   const [vertices, setVertices] = useState(6);
   const [gameState, setGameState] = useState<GameState>(() => initializeGame(6));
 
@@ -268,13 +272,15 @@ const GameOfSim = () => {
           </div>
 
           {/* Social Share */}
-          <div className="flex justify-center">
-            <SocialShare 
-              title="Game of Sim"
-              description="Play the strategic Game of Sim! Take turns coloring edges between vertices while avoiding creating triangles of your own color."
-              url={`${window.location.origin}/themes/games`}
-            />
-          </div>
+          {showSocialShare && (
+            <div className="flex justify-center">
+              <SocialShare 
+                title="Game of Sim"
+                description="Play the strategic Game of Sim! Take turns coloring edges between vertices while avoiding creating triangles of your own color."
+                url={`${window.location.origin}/themes/games#game-of-sim`}
+              />
+            </div>
+          )}
         </CardContent>
       </Card>
     </div>
diff --git a/src/components/GamesGallery.tsx b/src/components/GamesGallery.tsx
index 669d57b..feee23d 100644
--- a/src/components/GamesGallery.tsx
+++ b/src/components/GamesGallery.tsx
@@ -3,6 +3,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Search } from 'lucide-react';
+import Layout from '@/components/Layout';
 import GameOfSim from '@/components/GameOfSim';
 
 interface Game {
@@ -10,7 +11,7 @@ interface Game {
   title: string;
   description: string;
   tags: string[];
-  component: React.ComponentType;
+  component: React.ComponentType<{ showSocialShare?: boolean }>;
 }
 
 const games: Game[] = [
@@ -46,65 +47,69 @@ const GamesGallery = () => {
               ← Back to Educational Games
             </button>
           </div>
-          <GameComponent />
+          <GameComponent showSocialShare={true} />
         </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>
+    <Layout>
+      <div className="container mx-auto px-4 py-8">
+        <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>
+          {/* 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>
+          {/* 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>
+          {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>
-      )}
-    </div>
+      </div>
+    </Layout>
   );
 };
 
diff --git a/src/pages/GameOfSimGreenScreen.tsx b/src/pages/GameOfSimGreenScreen.tsx
new file mode 100644
index 0000000..591ac7f
--- /dev/null
+++ b/src/pages/GameOfSimGreenScreen.tsx
@@ -0,0 +1,18 @@
+import { useParams } from 'react-router-dom';
+import GameOfSim from '@/components/GameOfSim';
+import GreenScreenWrapper from '@/components/GreenScreenWrapper';
+
+const GameOfSimGreenScreen = () => {
+  const { mode } = useParams<{ mode: 'gs-lite' | 'gs-dark' }>();
+  const greenScreenMode = mode === 'gs-dark' ? 'dark' : 'lite';
+
+  return (
+    <GreenScreenWrapper mode={greenScreenMode}>
+      <div className="space-y-6">
+        <GameOfSim showSocialShare={false} />
+      </div>
+    </GreenScreenWrapper>
+  );
+};
+
+export default GameOfSimGreenScreen; 
\ No newline at end of file
diff --git a/src/pages/GameOfSimPage.tsx b/src/pages/GameOfSimPage.tsx
new file mode 100644
index 0000000..37745b6
--- /dev/null
+++ b/src/pages/GameOfSimPage.tsx
@@ -0,0 +1,13 @@
+import GameOfSim from '@/components/GameOfSim';
+
+const GameOfSimPage = () => {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-8">
+        <GameOfSim showSocialShare={true} />
+      </div>
+    </div>
+  );
+};
+
+export default GameOfSimPage; 
\ No newline at end of file
diff --git a/src/pages/theme-pages/Games.tsx b/src/pages/theme-pages/Games.tsx
index 7e0a5a9..6818bee 100644
--- a/src/pages/theme-pages/Games.tsx
+++ b/src/pages/theme-pages/Games.tsx
@@ -2,13 +2,7 @@ import Layout from "@/components/Layout";
 import GamesGallery from "@/components/GamesGallery";
 
 const Games = () => {
-  return (
-    <Layout>
-      <div className="container mx-auto px-4 py-8">
-        <GamesGallery />
-      </div>
-    </Layout>
-  );
+  return <GamesGallery />;
 };
 
 export default Games;
\ No newline at end of file