diff --git a/front-end/components/AncientRunicPage.jsx b/front-end/components/AncientRunicPage.jsx
new file mode 100644
index 0000000..c0a23f1
--- /dev/null
+++ b/front-end/components/AncientRunicPage.jsx
@@ -0,0 +1,118 @@
+import React from "react";
+
+const AncientRunicPage = ({ 
+  variant = "default", 
+  centerText = "ᛋᚢᛗᛗᛟᚾᛖᚱ'ᛋ ᛏᛟᛗᛖ",
+  runeColor = "#8b7355",
+  runeCount = 9
+}) => {
+  // Different rune sets for variety
+  const runeSymbols = {
+    default: ["ᚠ", "ᚢ", "ᚦ", "ᚨ", "ᚱ", "ᚲ", "ᚷ", "ᚹ", "ᚺ", "ᚾ", "ᛁ", "ᛃ"],
+    power: ["ᛉ", "ᛊ", "ᛏ", "ᛒ", "ᛖ", "ᛗ", "ᛚ", "ᛜ", "ᛞ", "ᛟ"],
+    mystical: ["◉", "◈", "◊", "✦", "✧", "✺", "✹", "❂", "✶", "✷"],
+    elements: ["🜁", "🜂", "🜃", "🜄", "☿", "♀", "♂", "♃", "♄", "⚡"],
+  };
+
+  const runes = React.useMemo(() => {
+    const runes = [];
+    const usedRunes = (runeSymbols[variant] || runeSymbols.default).slice(0, runeCount);
+    
+    for (let i = 0; i < usedRunes.length; i++) {
+      runes.push({
+        symbol: usedRunes[i],
+        x: `${15 + (Math.random() * 70)}%`,
+        y: `${15 + (Math.random() * 70)}%`,
+        rotation: Math.random() * 360,
+        opacity: 0.3 + Math.random() * 0.4,
+      });
+    }
+    return runes;
+    }, [variant, runeCount]);
+
+  // Different circle patterns based on variant
+  const circlePatterns = {
+    default: { circles: 3 },
+    power: { circles: 5 },
+    mystical: { circles: 4 },
+    elements: { circles: 2 },
+  };
+
+  const pattern = circlePatterns[variant] || circlePatterns.default;
+
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      <style jsx>{`
+        .rune-symbol {
+          position: absolute;
+          font-size: 3rem;
+          color: ${runeColor};
+          font-family: serif;
+          user-select: none;
+          pointer-events: none;
+          text-shadow: 0 0 10px rgba(139, 115, 85, 0.3);
+        }
+
+        .center-circle {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          border: 3px solid rgba(139, 115, 85, 0.3);
+          border-radius: 50%;
+        }
+
+        .ancient-text {
+          position: absolute;
+          bottom: 10%;
+          left: 50%;
+          transform: translateX(-50%);
+          text-align: center;
+          font-family: Georgia, serif;
+          font-style: italic;
+          color: rgba(86, 55, 78, 0.6);
+          font-size: 0.9rem;
+          letter-spacing: 2px;
+        }
+      `}</style>
+
+      {/* Central decorative circles */}
+      {Array.from({ length: pattern.circles }).map((_, i) => (
+        <div
+          key={i}
+          className="center-circle"
+          style={{
+            width: `${200 - i * 40}px`,
+            height: `${200 - i * 40}px`,
+            opacity: 0.5 - i * 0.1,
+          }}
+        />
+      ))}
+
+      {/* Static runes */}
+      {runes.map((rune, index) => (
+        <div
+          key={index}
+          className="rune-symbol"
+          style={{
+            left: rune.x,
+            top: rune.y,
+            transform: `rotate(${rune.rotation}deg)`,
+            opacity: rune.opacity,
+          }}
+        >
+          {rune.symbol}
+        </div>
+      ))}
+
+      {/* Ancient text at bottom */}
+      {centerText && (
+        <div className="ancient-text">
+          {centerText}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AncientRunicPage;
\ No newline at end of file
diff --git a/front-end/components/ChatInput.jsx b/front-end/components/ChatInput.jsx
new file mode 100644
index 0000000..f13ba98
--- /dev/null
+++ b/front-end/components/ChatInput.jsx
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+
+const ChatInput = ({ onSendMessage, isLoading }) => {
+  const [input, setInput] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+    
+    onSendMessage(input);
+    setInput("");
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-8">
+      <h2 className="section-title">Ask the Book</h2>
+      
+      <div className="bg-black bg-opacity-70 rounded-lg p-8 w-full max-w-2xl">
+        <div className="mb-4">
+          <p className="text-gray-300 text-sm mb-4">
+            Ask questions about your gameplay, get strategic advice, or learn more about your matches.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyPress={handleKeyPress}
+              disabled={isLoading}
+              className="w-full px-4 py-3 bg-gray-800 bg-opacity-70 border border-gray-700 rounded text-white focus:outline-none focus:border-gray-500 resize-none"
+              placeholder="What would you like to know about your gameplay?"
+              rows={6}
+            />
+          </div>
+
+          <div className="flex justify-between items-center">
+            <span className="text-gray-400 text-sm">
+              {input.length > 0 && `${input.length} characters`}
+            </span>
+            
+            <button
+              type="submit"
+              disabled={!input.trim() || isLoading}
+              className="magical-button disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <span className="button-text">
+                {isLoading ? "Sending..." : "Enter"}
+              </span>
+              <div className="particles">
+                <span className="particle"></span>
+                <span className="particle"></span>
+                <span className="particle"></span>
+                <span className="particle"></span>
+              </div>
+            </button>
+          </div>
+        </form>
+
+        {isLoading && (
+          <div className="mt-4 flex items-center justify-center text-gray-400">
+            <div className="animate-pulse">The Book is thinking...</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ChatInput;
\ No newline at end of file
diff --git a/front-end/components/ChatOutput.jsx b/front-end/components/ChatOutput.jsx
new file mode 100644
index 0000000..9931e90
--- /dev/null
+++ b/front-end/components/ChatOutput.jsx
@@ -0,0 +1,66 @@
+import React, { useRef, useEffect } from "react";
+
+const ChatOutput = ({ messages }) => {
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  return (
+    <div className="flex flex-col h-full p-8">
+      <h2 className="section-title">Book&apos;s Wisdom</h2>
+      
+      <div className="flex-1 bg-black bg-opacity-70 rounded-lg p-6 overflow-hidden flex flex-col">
+        <div className="flex-1 overflow-y-auto space-y-4 pr-2">
+          {messages.length === 0 ? (
+            <div className="flex items-center justify-center h-full">
+              <p className="text-gray-400 text-center">
+                No messages yet. Ask a question to get started.
+              </p>
+            </div>
+          ) : (
+            <>
+              {messages.map((msg, idx) => (
+                <div
+                  key={idx}
+                  className={`flex ${
+                    msg.sender === "user" ? "justify-end" : "justify-start"
+                  }`}
+                >
+                  <div
+                    className={`max-w-[80%] rounded-lg p-4 ${
+                      msg.sender === "user"
+                        ? "bg-blue-600 bg-opacity-60 text-white"
+                        : "bg-gray-800 bg-opacity-60 text-gray-100"
+                    }`}
+                  >
+                    {msg.sender === "bot" && (
+                      <div className="flex items-center gap-2 mb-2">
+                        <span className="text-yellow-400 text-xl">🔮</span>
+                        <span className="text-sm font-semibold text-yellow-400">
+                          Book
+                        </span>
+                      </div>
+                    )}
+                    <p className="whitespace-pre-wrap break-words">{msg.text}</p>
+                    <span className="text-xs text-gray-400 mt-2 block">
+                      {msg.timestamp}
+                    </span>
+                  </div>
+                </div>
+              ))}
+              <div ref={messagesEndRef} />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatOutput;
\ No newline at end of file
diff --git a/front-end/components/FlipBook.jsx b/front-end/components/FlipBook.jsx
index 9a03fa8..9ae6318 100644
--- a/front-end/components/FlipBook.jsx
+++ b/front-end/components/FlipBook.jsx
@@ -6,7 +6,11 @@ import Social from "./Social";
 import SearchAndCompare from "./SearchandCompare";
 import MatchSelector from "./MatchSelector";
 import MatchTimeline from "./MatchTimeline";
+import ChatInput from "./ChatInput";
+import ChatOutput from "./ChatOutput.jsx";
 import matchesData from "../data/matches.json";
+import AncientRunicPage from "./AncientRunicPage.jsx";
+import MapFragmentPage from "./MapFragmentPage";
 
 
 const FlipBook = () => {
@@ -43,6 +47,10 @@ const FlipBook = () => {
     DPM: ""
   });
 
+  // Chat state
+  const [chatMessages, setChatMessages] = useState([]);
+  const [isLoadingChat, setIsLoadingChat] = useState(false);
+
   const handlePlayer2Found = useCallback((stats) => {
     setPlayer2Stats(stats);
   }, []);
@@ -63,23 +71,93 @@ const FlipBook = () => {
     }
   }, []);
 
-  // Get the currently selected match - use useMemo to prevent unnecessary recalculations
+  // Get the currently selected match
   const selectedMatch = useMemo(() => 
     matches.find(m => m.match_id === selectedMatchId),
     [matches, selectedMatchId]
   );
 
-  // Memoize the match selector callback to prevent recreating it
+  // Memoize the match selector callback
   const handleMatchSelect = useCallback((matchId) => {
     setSelectedMatchId(matchId);
   }, []);
 
+  // Handle sending chat messages
+  const handleSendMessage = useCallback(async (userMessage) => {
+    const timestamp = new Date().toLocaleTimeString([], { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+
+    // Add user message
+    const newUserMessage = { 
+      sender: "user", 
+      text: userMessage, 
+      timestamp 
+    };
+    setChatMessages(prev => [...prev, newUserMessage]);
+    setIsLoadingChat(true);
+
+    try {
+      // TODO: Replace with actual API call to your backend
+      const response = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: userMessage }),
+      });
+
+      const data = await response.json();
+      
+      // Add bot response
+      const botMessage = { 
+        sender: "bot", 
+        text: data.reply || "I received your question. Let me analyze that for you...",
+        timestamp: new Date().toLocaleTimeString([], { 
+          hour: '2-digit', 
+          minute: '2-digit' 
+        })
+      };
+      setChatMessages(prev => [...prev, botMessage]);
+    } catch (error) {
+      console.error("Chat error:", error);
+      // Add error message
+      const errorMessage = {
+        sender: "bot",
+        text: "I apologize, but I'm having trouble connecting right now. Please try again later.",
+        timestamp: new Date().toLocaleTimeString([], { 
+          hour: '2-digit', 
+          minute: '2-digit' 
+        })
+      };
+      setChatMessages(prev => [...prev, errorMessage]);
+    } finally {
+      setIsLoadingChat(false);
+    }
+  }, []);
+
   // Create page structure once and store it in a ref
   const pageStructure = useMemo(() => [
     { cover: "book_cover.jpg", frontCover: true, id: 0 },
-    { front: "test.txt", back: "test.txt", id: 1 },
+    { front: <AncientRunicPage 
+        variant="power"           // "default", "power", "mystical", "elements"
+        centerText="ᛗᚨᚷᛁᚲ"       // Custom text at bottom (or null to hide)
+        runeColor="#8b7355"       // Color of the runes
+        runeCount={12}            // Number of runes (default 9)
+      />, back: <MapFragmentPage 
+        region="Shurima"          // Text displayed in center
+        variant="mountains"       // "default", "mountains", "rivers", "forest"
+        showCompass={true}        // Show/hide compass rose
+        markerCount={5}           // Number of location markers (default 3)
+        fragmentCount={3}         // Number of map fragments (1-3)
+        theme="mystical"          // "warm", "cool", "dark", "mystical"
+      />, id: 1 },
     { 
-      front: "test.txt", 
+      front: <AncientRunicPage 
+        variant="mystical"           // "default", "power", "mystical", "elements"
+        centerText="ᛗᚨᚷᛁᚲ"       // Custom text at bottom (or null to hide)
+        runeColor="#558b7dff"       // Color of the runes
+        runeCount={10}            // Number of runes (default 9)
+      />, 
       back: <SummaryBack data={{ 
         region: "Shurima", 
         profile:["Late-Game", "Scaling", "Empire-Building"],
@@ -98,37 +176,110 @@ const FlipBook = () => {
         strengths:["Azir", "Sivir", "Cassiopeia"], 
         weaknesses:["Nasus", "Taliyah"] 
       }}/>, 
-      back: "test.txt",
+      back: <MapFragmentPage 
+        region="Ionia"          // Text displayed in center
+        variant="forest"       // "default", "mountains", "rivers", "forest"
+        showCompass={true}        // Show/hide compass rose
+        markerCount={8}           // Number of location markers (default 3)
+        fragmentCount={3}         // Number of map fragments (1-3)
+        theme="mystical"          // "warm", "cool", "dark", "mystical"
+      />,
       bookmark: { label: "Summary", targetPage: 3, x: "12%", color: "#7B4643" },
       id: 3
     },
-    { front: "test.txt", back: "test.txt", id: 4 },
+    { front: <AncientRunicPage 
+        variant="elements"           // "default", "power", "mystical", "elements"
+        centerText="ᛗᚨᚷᛁᚲ"       // Custom text at bottom (or null to hide)
+        runeColor="#8b5582ff"       // Color of the runes
+        runeCount={7}            // Number of runes (default 9)
+      />, back: <MapFragmentPage 
+        region="Zaun"          // Text displayed in center
+        variant="default"       // "default", "mountains", "rivers", "forest"
+        showCompass={true}        // Show/hide compass rose
+        markerCount={4}           // Number of location markers (default 3)
+        fragmentCount={8}         // Number of map fragments (1-3)
+        theme="dark"          // "warm", "cool", "dark", "mystical"
+      />, id: 4 },
     { 
-      front: "test.txt", 
-      back: "social", // Placeholder - will be replaced
+      front: <AncientRunicPage 
+        variant="default"           // "default", "power", "mystical", "elements"
+        centerText="ᛗᚨᚷᛁᚲ"       // Custom text at bottom (or null to hide)
+        runeColor="#377b45ff"       // Color of the runes
+        runeCount={16}            // Number of runes (default 9)
+      />, 
+      back: "social",
       id: 5
     },
     { 
-      front: "search", // Placeholder - will be replaced
-      back: "text",
-      bookmark: { label: "Social", targetPage: 6, x: "50%", color: "#354B89" },
+      front: "search",
+      back: <MapFragmentPage 
+        region="Shadow Isles"          // Text displayed in center
+        variant="rivers"       // "default", "mountains", "rivers", "forest"
+        showCompass={true}        // Show/hide compass rose
+        markerCount={7}           // Number of location markers (default 3)
+        fragmentCount={6}         // Number of map fragments (1-3)
+        theme="dark"          // "warm", "cool", "dark", "mystical"
+      />,
+      bookmark: { label: "Social", targetPage: 6, x: "40%", color: "#354B89" },
       id: 6
     },
-    { front: "text", back: "test.txt", id: 7 },
+    { front: <AncientRunicPage 
+        variant="power"           // "default", "power", "mystical", "elements"
+        centerText="ᛗᚨᚷᛁᚲ"       // Custom text at bottom (or null to hide)
+        runeColor="#91b047ff"       // Color of the runes
+        runeCount={12}            // Number of runes (default 9)
+      />, back: <MapFragmentPage 
+        region="Demacia"          // Text displayed in center
+        variant="mountains"       // "default", "mountains", "rivers", "forest"
+        showCompass={true}        // Show/hide compass rose
+        markerCount={6}           // Number of location markers (default 3)
+        fragmentCount={9}         // Number of map fragments (1-3)
+        theme="warm"          // "warm", "cool", "dark", "mystical"
+      />, id: 7 },
     { 
-      front: "test.txt", 
-      back: "matchSelector", // Placeholder - will be replaced
+      front: <AncientRunicPage 
+        variant="mystical"           // "default", "power", "mystical", "elements"
+        centerText="ᛗᚨᚷᛁᚲ"       // Custom text at bottom (or null to hide)
+        glowColor="rgba(59, 185, 162, 0.8)"  // Glow effect color
+        runeCount={15}            // Number of runes (default 9)
+      />, 
+      back: "matchSelector",
       id: 8
     },
     { 
-      front: "matchTimeline", // Placeholder - will be replaced
-      back: "test.txt",
-      bookmark: { label: "Matches", targetPage: 9, x: "75%", color: "#595440" },
+      front: "matchTimeline",
+      back: <MapFragmentPage 
+        region="Freljord"          // Text displayed in center
+        variant="mountains"       // "default", "mountains", "rivers", "forest"
+        showCompass={true}        // Show/hide compass rose
+        markerCount={8}           // Number of location markers (default 3)
+        fragmentCount={8}         // Number of map fragments (1-3)
+        theme="cool"          // "warm", "cool", "dark", "mystical"
+      />,
+      bookmark: { label: "Matches", targetPage: 9, x: "65%", color: "#595440" },
       id: 9
     },
-    { front: "test.txt", back: "test.txt", id: 10 },
-    { cover: "green-cover.jpg", id: 11 },
-  ], []); // Empty dependency array - only create once
+    { front: <AncientRunicPage 
+        variant="elements"           // "default", "power", "mystical", "elements"
+        centerText="ᛗᚨᚷᛁᚲ"       // Custom text at bottom (or null to hide)
+        glowColor="rgba(96, 78, 171, 0.8)"  // Glow effect color
+        runeCount={12}            // Number of runes (default 9)
+      />, back: "chatInput", id: 10 },
+    { 
+      front: "chatOutput", 
+      back: <MapFragmentPage 
+        region="Shurima"          // Text displayed in center
+        variant="mountains"       // "default", "mountains", "rivers", "forest"
+        showCompass={true}        // Show/hide compass rose
+        markerCount={5}           // Number of location markers (default 3)
+        fragmentCount={3}         // Number of map fragments (1-3)
+        theme="mystical"          // "warm", "cool", "dark", "mystical"
+      />,
+      bookmark: { label: "Questions", targetPage: 11, x: "78%", color: "#4A5568" },
+      id: 11 
+    },
+    { cover: "green-cover.jpg", id: 12 },
+  ], []);
 
   // Initialize pages only once
   useEffect(() => {
@@ -232,9 +383,22 @@ const FlipBook = () => {
     if (page.front === "matchTimeline") {
       newPage.front = <MatchTimeline match={selectedMatch} />;
     }
+
+    // Replace ChatInput component
+    if (page.back === "chatInput") {
+      newPage.back = <ChatInput 
+        onSendMessage={handleSendMessage} 
+        isLoading={isLoadingChat}
+      />;
+    }
+
+    // Replace ChatOutput component
+    if (page.front === "chatOutput") {
+      newPage.front = <ChatOutput messages={chatMessages} />;
+    }
     
     return newPage;
-  }, [player1Stats, player2Stats, matches, selectedMatchId, selectedMatch, handleMatchSelect, handlePlayer2Found]);
+  }, [player1Stats, player2Stats, matches, selectedMatchId, selectedMatch, handleMatchSelect, handlePlayer2Found, chatMessages, isLoadingChat, handleSendMessage]);
 
   return (
     <div className="book-frame">
diff --git a/front-end/components/MapFragmentPage.jsx b/front-end/components/MapFragmentPage.jsx
new file mode 100644
index 0000000..a91dedd
--- /dev/null
+++ b/front-end/components/MapFragmentPage.jsx
@@ -0,0 +1,285 @@
+import React from "react";
+
+const MapFragmentPage = ({ 
+  region = "Runeterra",
+  variant = "default",
+  showCompass = true,
+  markerCount = 3,
+  fragmentCount = 3,
+  theme = "warm"
+}) => {
+  // Different color themes
+  const themes = {
+    warm: {
+      primary: "rgba(139, 115, 85, 0.6)",
+      secondary: "rgba(185, 151, 88, 0.5)",
+      accent: "rgba(120, 188, 176, 0.4)",
+      fill: "rgba(139, 115, 85, 0.15)",
+    },
+    cool: {
+      primary: "rgba(83, 140, 176, 0.6)",
+      secondary: "rgba(120, 188, 176, 0.5)",
+      accent: "rgba(78, 188, 120, 0.4)",
+      fill: "rgba(83, 140, 176, 0.15)",
+    },
+    dark: {
+      primary: "rgba(86, 55, 78, 0.6)",
+      secondary: "rgba(119, 66, 95, 0.5)",
+      accent: "rgba(86, 55, 78, 0.4)",
+      fill: "rgba(86, 55, 78, 0.15)",
+    },
+    mystical: {
+      primary: "rgba(139, 92, 176, 0.6)",
+      secondary: "rgba(185, 88, 151, 0.5)",
+      accent: "rgba(197, 107, 197, 0.4)",
+      fill: "rgba(139, 92, 176, 0.15)",
+    },
+  };
+
+  const colors = themes[theme] || themes.warm;
+
+  const markers = React.useMemo(() => {
+    const markers = [];
+    for (let i = 0; i < markerCount; i++) {
+      markers.push({
+        top: `${20 + Math.random() * 60}%`,
+        left: `${20 + Math.random() * 60}%`,
+      });
+    }
+    return markers;
+  }, [markerCount]);
+
+  // Different map patterns based on variant
+  const mapPatterns = {
+    default: [
+      { path: "M 20 50 Q 40 30, 80 40 T 150 60 L 180 100 Q 160 120, 120 110 T 50 90 Z", type: "path" },
+      { path: "M 30 80 L 60 50 L 100 60 L 130 40 L 160 70 L 140 120 L 90 110 L 50 130 Z", type: "region" },
+      { cx: 100, cy: 100, rx: 60, ry: 40, type: "water" },
+    ],
+    mountains: [
+      { path: "M 20 120 L 40 80 L 60 100 L 80 60 L 100 90 L 120 50 L 140 80 L 160 100 L 180 120", type: "path" },
+      { path: "M 50 140 L 70 110 L 90 125 L 110 95 L 130 120 L 150 140", type: "path" },
+      { path: "M 80 110 L 100 80 L 120 110", type: "region" },
+    ],
+    rivers: [
+      { path: "M 30 20 Q 50 60, 70 100 T 110 160", type: "water" },
+      { path: "M 150 30 Q 130 70, 110 110 T 70 170", type: "water" },
+      { path: "M 90 80 Q 100 100, 110 120", type: "water" },
+    ],
+    forest: [
+      { path: "M 40 60 L 50 40 L 60 60 Z", type: "region" },
+      { path: "M 100 80 L 110 60 L 120 80 Z", type: "region" },
+      { path: "M 140 100 L 150 80 L 160 100 Z", type: "region" },
+      { path: "M 70 120 L 80 100 L 90 120 Z", type: "region" },
+    ],
+  };
+
+  const patterns = mapPatterns[variant] || mapPatterns.default;
+
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      <style jsx>{`
+        .map-container {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          background: linear-gradient(135deg, 
+            rgba(139, 112, 78, 0.1) 0%, 
+            rgba(185, 151, 88, 0.05) 100%);
+        }
+
+        .map-fragment {
+          position: absolute;
+          opacity: 0.6;
+        }
+
+        .map-fragment:nth-child(1) {
+          top: 5%;
+          left: 10%;
+          width: 35%;
+        }
+
+        .map-fragment:nth-child(2) {
+          top: 15%;
+          right: 5%;
+          width: 40%;
+        }
+
+        .map-fragment:nth-child(3) {
+          bottom: 10%;
+          left: 15%;
+          width: 45%;
+        }
+
+        .map-svg {
+          filter: sepia(60%) brightness(0.8) contrast(1.2);
+          opacity: 0.7;
+        }
+
+        .location-marker {
+          position: absolute;
+          width: 12px;
+          height: 12px;
+          background: radial-gradient(circle, ${colors.secondary} 0%, transparent 70%);
+          border: 2px solid ${colors.primary};
+          border-radius: 50%;
+          opacity: 0.8;
+        }
+
+        .torn-edge {
+          position: absolute;
+          width: 100%;
+          height: 20px;
+          background: repeating-linear-gradient(
+            90deg,
+            transparent,
+            transparent 5px,
+            rgba(139, 112, 78, 0.2) 5px,
+            rgba(139, 112, 78, 0.2) 10px
+          );
+        }
+
+        .torn-edge.top {
+          top: 0;
+          transform: rotate(180deg);
+        }
+
+        .torn-edge.bottom {
+          bottom: 0;
+        }
+
+        .compass-rose {
+          position: absolute;
+          bottom: 15%;
+          right: 10%;
+          width: 80px;
+          height: 80px;
+          opacity: 0.4;
+        }
+
+        .map-legend {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          text-align: center;
+          font-family: Georgia, serif;
+          font-style: italic;
+          color: rgba(86, 55, 78, 0.5);
+          font-size: 1.2rem;
+          letter-spacing: 3px;
+          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .decorative-corner {
+          position: absolute;
+          width: 60px;
+          height: 60px;
+          border: 2px solid rgba(139, 115, 85, 0.3);
+        }
+
+        .corner-tl {
+          top: 5%;
+          left: 5%;
+          border-right: none;
+          border-bottom: none;
+        }
+
+        .corner-br {
+          bottom: 5%;
+          right: 5%;
+          border-left: none;
+          border-top: none;
+        }
+      `}</style>
+
+      <div className="map-container">
+        {/* Torn edges effect */}
+        <div className="torn-edge top" />
+        <div className="torn-edge bottom" />
+
+        {/* Decorative corners */}
+        <div className="decorative-corner corner-tl" />
+        <div className="decorative-corner corner-br" />
+
+        {/* Map fragments */}
+        {Array.from({ length: Math.min(fragmentCount, 3) }).map((_, idx) => {
+          const pattern = patterns[idx] || patterns[0];
+          
+          return (
+            <div key={idx} className="map-fragment">
+              <svg className="map-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+                {pattern.type === "water" && pattern.cx ? (
+                  <ellipse 
+                    cx={pattern.cx} 
+                    cy={pattern.cy} 
+                    rx={pattern.rx} 
+                    ry={pattern.ry}
+                    fill={colors.fill}
+                    stroke={colors.accent}
+                    strokeWidth="2"
+                  />
+                ) : pattern.type === "water" ? (
+                  <path
+                    d={pattern.path}
+                    fill="none"
+                    stroke={colors.accent}
+                    strokeWidth="3"
+                    strokeLinecap="round"
+                  />
+                ) : pattern.type === "region" ? (
+                  <path
+                    d={pattern.path}
+                    fill={colors.fill}
+                    stroke={colors.primary}
+                    strokeWidth="1.5"
+                  />
+                ) : (
+                  <path
+                    d={pattern.path}
+                    fill="none"
+                    stroke={colors.primary}
+                    strokeWidth="2"
+                    strokeDasharray="5,5"
+                  />
+                )}
+              </svg>
+            </div>
+          );
+        })}
+
+        {/* Location markers */}
+        {markers.map((marker, idx) => (
+          <div 
+            key={idx}
+            className="location-marker" 
+            style={{ 
+              top: marker.top, 
+              left: marker.left,
+            }} 
+          />
+        ))}
+
+        {/* Compass rose */}
+        {showCompass && (
+          <svg className="compass-rose" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="50" cy="50" r="45" fill="none" stroke={colors.primary} strokeWidth="1" />
+            <circle cx="50" cy="50" r="35" fill="none" stroke={colors.primary} strokeWidth="1" opacity="0.6" />
+            <polygon points="50,10 55,45 50,50 45,45" fill={colors.secondary} />
+            <polygon points="50,90 55,55 50,50 45,55" fill={colors.primary} />
+            <polygon points="10,50 45,55 50,50 45,45" fill={colors.primary} />
+            <polygon points="90,50 55,55 50,50 55,45" fill={colors.primary} />
+            <text x="50" y="20" textAnchor="middle" fill="rgba(86, 55, 78, 0.6)" fontSize="12" fontFamily="serif">N</text>
+          </svg>
+        )}
+
+        {/* Central legend text */}
+        <div className="map-legend">
+          {region.toUpperCase()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MapFragmentPage;
\ No newline at end of file