diff --git a/timeLineManager/scripts.js b/timeLineManager/scripts.js
deleted file mode 100644
index 7ee5291..0000000
--- a/timeLineManager/scripts.js
+++ /dev/null
@@ -1,174 +0,0 @@
-let events = [];
-        let scrollPosition = 0;
-
-        function addEvent() {
-            const date = document.getElementById('eventDate').value;
-            const title = document.getElementById('eventTitle').value;
-            const description = document.getElementById('eventDescription').value;
-            const position = document.getElementById('eventPosition').value;
-            const icon = document.querySelector('input[name="icon"]:checked').value;
-
-            if (!date || !title || !description) {
-                alert('Please fill in all fields of your chronicle');
-                return;
-            }
-
-            events.push({
-                date: new Date(date),
-                title,
-                description,
-                position,
-                icon
-            });
-
-            events.sort((a, b) => a.date - b.date);
-            renderEvents();
-            clearForm();
-        }
-
-        function renderEvents() {
-            const container = document.getElementById('eventsContainer');
-            container.innerHTML = '';
-
-            if (events.length === 0) return;
-
-            const timelineStart = events[0].date;
-            const timelineEnd = events[events.length - 1].date;
-            const timelineRange = timelineEnd - timelineStart;
-
-            events.forEach((event, index) => {
-                const eventElement = document.createElement('div');
-                eventElement.className = `event ${event.position}`;
-
-                const position = timelineRange === 0 ? 50 :
-                    10 + ((event.date - timelineStart) / timelineRange) * 80;
-
-                eventElement.style.left = `${position}%`;
-                eventElement.style.transform = 'translateX(-50%)';
-
-                eventElement.innerHTML = `
-                    <div class="event-icon">
-                        <i class="fas ${event.icon}"></i>
-                    </div>
-                    <div class="event-date">${event.date.toLocaleDateString('en-US', { 
-                        year: 'numeric', 
-                        month: 'long', 
-                        day: 'numeric' 
-                    })}</div>
-                    <div class="event-title">${event.title}</div>
-                    <div class="event-description">${event.description}</div>
-                `;
-
-                const dot = document.createElement('div');
-                dot.className = 'event-dot';
-                dot.style.left = `${position}%`;
-
-                container.appendChild(eventElement);
-                container.appendChild(dot);
-            });
-        }
-
-        function clearForm() {
-            document.getElementById('eventDate').value = '';
-            document.getElementById('eventTitle').value = '';
-            document.getElementById('eventDescription').value = '';
-        }
-
-        function clearEvents() {
-            if (confirm('Are you sure you wish to clear all chronicles from the timeline?')) {
-                events = [];
-                renderEvents();
-            }
-        }
-
-
- // Save timeline to localStorage whenever it changes
-        function saveToLocalStorage() {
-            localStorage.setItem('fantasyTimeline', JSON.stringify(events));
-        }
-
-        // Load timeline from localStorage on page load
-        function loadFromLocalStorage() {
-            const savedTimeline = localStorage.getItem('fantasyTimeline');
-            if (savedTimeline) {
-                events = JSON.parse(savedTimeline).map(event => ({
-                    ...event,
-                    date: new Date(event.date)
-                }));
-                renderEvents();
-            }
-        }
-
-        // Export timeline to JSON file
-        function saveToFile() {
-            const timelineData = JSON.stringify(events, null, 2);
-            const blob = new Blob([timelineData], { type: 'application/json' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'fantasy-timeline.json';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-        }
-
-        // Import timeline from JSON file
-        function loadFromFile() {
-            const input = document.createElement('input');
-            input.type = 'file';
-            input.accept = '.json';
-            
-            input.onchange = e => {
-                const file = e.target.files[0];
-                const reader = new FileReader();
-                
-                reader.onload = function(event) {
-                    try {
-                        const importedEvents = JSON.parse(event.target.result);
-                        // Validate the imported data
-                        if (Array.isArray(importedEvents) && importedEvents.every(event => 
-                            event.date && event.title && event.description && event.position && event.icon
-                        )) {
-                            events = importedEvents.map(event => ({
-                                ...event,
-                                date: new Date(event.date)
-                            }));
-                            saveToLocalStorage();
-                            renderEvents();
-                            alert('Timeline imported successfully!');
-                        } else {
-                            alert('Invalid timeline file format');
-                        }
-                    } catch (error) {
-                        alert('Error importing timeline: ' + error.message);
-                    }
-                };
-                
-                reader.readAsText(file);
-            };
-            
-            input.click();
-        }
-
-        // Update existing functions to auto-save
-        const originalAddEvent = addEvent;
-        addEvent = function() {
-            originalAddEvent();
-            saveToLocalStorage();
-        };
-
-        const originalClearEvents = clearEvents;
-        clearEvents = function() {
-            if (confirm('Are you sure you wish to clear all chronicles from the timeline?')) {
-                events = [];
-                renderEvents();
-                saveToLocalStorage();
-            }
-        };
-
-        // Initialize timeline on page load
-        document.addEventListener('DOMContentLoaded', function() {
-            loadFromLocalStorage();
-            addFloatingDecorations();
-        });
diff --git a/timeLineManager/styles.css b/timeLineManager/styles.css
deleted file mode 100644
index e6b192c..0000000
--- a/timeLineManager/styles.css
+++ /dev/null
@@ -1,252 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Palatino', 'Times New Roman', serif;
-}
-
-body {
-    padding: 20px;
-    background: #f4e4bc;
-    color: #2c1810;
-    background-blend-mode: multiply;
-}
-
-.page-title {
-    text-align: center;
-    font-size: 2.5em;
-    margin-bottom: 30px;
-    color: #2c1810;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.input-section {
-    background-color: #fff9e6;
-    padding: 30px;
-    border-radius: 15px;
-    border: 3px solid #8b4513;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-    margin-bottom: 40px;
-    position: relative;
-    background-blend-mode: overlay;
-}
-
-.input-section::before {
-    content: '';
-    position: absolute;
-    top: -10px;
-    left: -10px;
-    right: -10px;
-    bottom: -10px;
-    border: 2px solid #8b4513;
-    border-radius: 20px;
-    z-index: -1;
-}
-
-.form-group {
-    margin-bottom: 20px;
-}
-
-label {
-    display: block;
-    margin-bottom: 8px;
-    color: #4a2810;
-    font-weight: bold;
-    font-size: 1.1em;
-}
-
-input[type="date"],
-input[type="text"],
-textarea,
-select {
-    width: 100%;
-    padding: 12px;
-    background-color: #fff9e6;
-    border: 2px solid #8b4513;
-    border-radius: 8px;
-    color: #2c1810;
-    font-size: 1em;
-    transition: all 0.3s ease;
-}
-
-.icon-select {
-    margin-bottom: 15px;
-}
-
-.icon-select label {
-    display: inline-block;
-    margin-right: 15px;
-    cursor: pointer;
-}
-
-.icon-select input[type="radio"] {
-    display: none;
-}
-
-.icon-select i {
-    font-size: 24px;
-    padding: 10px;
-    border: 2px solid transparent;
-    border-radius: 5px;
-    color: #8b4513;
-}
-
-.icon-select input[type="radio"]:checked+i {
-    border-color: #8b4513;
-    background-color: #fff3d4;
-}
-
-button {
-    background-color: #8b4513;
-    color: #fff9e6;
-    margin-left: 150px;
-    border: none;
-    padding: 12px 25px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 1.1em;
-    font-weight: bold;
-    transition: all 0.3s ease;
-    margin-right: 10px;
-    position: relative;
-    overflow: hidden;
-}
-
-button:hover {
-    background-color: #6b3410;
-    transform: translateY(-2px);
-}
-
-.timeline-container {
-    position: relative;
-    padding: 40px 0;
-    margin-top: 60px;
-}
-
-.timeline-line {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    height: 6px;
-    background: #8b4513;
-    transform: translateY(-50%);
-    border-radius: 3px;
-}
-
-.timeline-line::before,
-.timeline-line::after {
-    content: '';
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    background: #8b4513;
-    border-radius: 50%;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.timeline-line::before {
-    left: -10px;
-}
-
-.timeline-line::after {
-    right: -10px;
-}
-
-.events-container {
-    position: relative;
-    min-height: 500px;
-}
-
-.event {
-    position: absolute;
-    width: 300px;
-    background-color: #fff9e6;
-    padding: 20px;
-    border-radius: 12px;
-    border: 2px solid #8b4513;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-}
-
-.event:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
-}
-
-.event.above {
-    bottom: 60%;
-}
-
-.event.below {
-    top: 60%;
-}
-
-.event::after {
-    content: '';
-    position: absolute;
-    width: 3px;
-    height: 40px;
-    background: #8b4513;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.event.above::after {
-    bottom: -40px;
-}
-
-.event.below::after {
-    top: -40px;
-}
-
-.event-icon {
-    text-align: center;
-    font-size: 24px;
-    color: #8b4513;
-    margin-bottom: 10px;
-}
-
-
-.event-date {
-    text-align: center;
-    font-size: 0.9em;
-    color: #666;
-    margin-bottom: 8px;
-    font-style: italic;
-}
-
-.event-title {
-    text-align: center;
-
-    font-size: 1.2em;
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: #4a2810;
-}
-
-.event-description {
-    text-align: center;
-
-    font-size: 0.95em;
-    color: #2c1810;
-    line-height: 1.6;
-}
-
-.event-dot {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    background-color: #8b4513;
-    border: 3px solid #fff9e6;
-    border-radius: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    box-shadow: 0 0 10px rgba(139, 69, 19, 0.3);
-}
diff --git a/timeLineManager/timeLine.html b/timeLineManager/timeLine.html
deleted file mode 100644
index 597bc4d..0000000
--- a/timeLineManager/timeLine.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Fantasy Chronicle Timeline</title>
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
-    <link href="styles.css" rel="stylesheet">
-
-</head>
-<body>
-      <h1 class="page-title">Time Line Manager </h1>
-    <div class="container">
-        <div class="input-section">
-            <div class="form-group">
-                <label for="eventDate">Date of the Event:</label>
-                <input type="date" id="eventDate" required>
-            </div>
-            <div class="form-group">
-                <label for="eventTitle">Title of the Event:</label>
-                <input type="text" id="eventTitle" placeholder="Enter the title of your tale" required>
-            </div>
-            <div class="form-group">
-                <label>Choose an Icon:</label>
-                <div class="icon-select">
-                    <label>
-                        <input type="radio" name="icon" value="fa-crown" checked>
-                        <i class="fas fa-crown"></i>
-                    </label>
-                    <label>
-                        <input type="radio" name="icon" value="fa-dragon">
-                        <i class="fas fa-dragon"></i>
-                    </label>
-                    <label>
-                        <input type="radio" name="icon" value="fa-sword">
-                        <i class="fas fa-sword"></i>
-                    </label>
-                    <label>
-                        <input type="radio" name="icon" value="fa-scroll">
-                        <i class="fas fa-scroll"></i>
-                    </label>
-                    <label>
-                        <input type="radio" name="icon" value="fa-magic">
-                        <i class="fas fa-magic"></i>
-                    </label>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="eventDescription">Event Description:</label>
-                <textarea id="eventDescription" placeholder="Tell your story..." required></textarea>
-            </div>
-            <div class="form-group">
-                <label for="eventPosition">Position in the Timeline:</label>
-                <select id="eventPosition">
-                    <option value="above">Above the Timeline</option>
-                    <option value="below">Below the Timeline</option>
-                </select>
-            </div>
-            <button onclick="addEvent()">Record Event</button>
-        </div>
-
-        <div class="timeline-container">
-            <div class="timeline-line"></div>
-            <div class="events-container" id="eventsContainer"></div>
-        </div>
-
-        <div class="bottom-but">
-            <button onclick="clearEvents()" style="background-color: #8b4513;">Clear All Tales</button>
-            <button onclick="saveToFile()" style="background-color: #2c5530;">Export Timeline</button>
-            <button onclick="loadFromFile()" style="background-color: #2c5530;">Import Timeline</button>
-        </div>
-    </div>
-    <script src="scripts.js">
-    </script>
-</body>
-</html>