diff --git a/.DS_Store b/.DS_Store
index daa33ae4a..8a8212f07 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/Blog Application/.DS_Store b/Blog Application/.DS_Store
new file mode 100644
index 000000000..f7c2402eb
Binary files /dev/null and b/Blog Application/.DS_Store differ
diff --git a/Blog Application/README.md b/Blog Application/README.md
index 1147aedfd..45f3a25f5 100644
--- a/Blog Application/README.md	
+++ b/Blog Application/README.md	
@@ -1,33 +1,191 @@
-# Blog Application
+# Professional Blog Application
 
 ## Description
-Blog Application is an application where user can add a new blog, edit it, delete it as well as view other blogs and make changes in them. 
+Professional Blog Application is a feature-rich web application where users can create, edit, delete, and view blog posts. The application uses LocalStorage to persist data, ensuring that blog posts remain available even after the browser is closed or the page is refreshed.
 
-Application uses LocalStorage, the localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available when the user comes again.
+This enhanced version includes a modern UI design, improved functionality, and a better user experience, making it perfect for Hacktoberfest contributions.
 
-## Stacks Used
-* HTML & CSS
-* Bootstrap - A CSS Framework
-* JavaScript -> LocalStorage
+## Features
+- ✨ Modern, professional UI with blue/gray color scheme
+- 📝 Create new blog posts with images, titles, categories, and content
+- ✏️ Edit existing blog posts in-place
+- 🗑️ Delete blog posts with confirmation
+- 👁️ View full blog posts in a modal
+- 💾 Data persistence using LocalStorage
+- 📱 Fully responsive design for all devices
+- 🔍 Search functionality
+- 🎯 Category filtering
+- 📊 Sorting options (newest, oldest, title)
+- 📈 Statistics dashboard with 5 key metrics
+- 🎉 Success notifications
+- 🖼️ Fallback images for broken links
+- 📋 Category management with dropdown and custom options
+
+## Technologies Used
+- HTML5
+- CSS3 (with Flexbox and Grid)
+- Bootstrap 5
+- JavaScript (ES6+)
+- Font Awesome Icons
+- LocalStorage API
 
 ## Use of Project
+This project is excellent for:
+1. Understanding the concept of LocalStorage and how it persists data
+2. Learning modern web development techniques
+3. Practicing JavaScript DOM manipulation
+4. Contributing to open-source during Hacktoberfest
+5. Building a portfolio project
+
+## How to Use
+
+1. Clone or download this repository
+2. Open `index.html` in your web browser
+3. Start creating blog posts by clicking the "New Article" button
+
+### Creating a Blog Post
+1. Click the "New Article" button in the navbar or on the main page
+2. Fill in the form with:
+   - Image URL (use a valid image URL)
+   - Blog Title
+   - Category (select from dropdown or enter custom)
+   - Content (your blog post content)
+3. Click "Publish Article"
+
+### Editing a Blog Post
+1. Click the green edit button (pencil icon) on any blog card
+2. Edit the title, category, or content directly in the card
+3. Click the "Save Changes" button to save your changes
+
+### Deleting a Blog Post
+1. Click the red delete button (trash icon) on any blog card
+2. Confirm the deletion in the popup dialog
+
+### Viewing a Blog Post
+1. Click the "Read" button on any blog card
+2. View the full blog post in a modal window
+
+### Searching and Filtering
+1. Use the search box to find articles by title, content, or category
+2. Filter articles by category using the filter buttons
+3. Sort articles by newest, oldest, or title using the sort dropdown
+
+## Screenshots
+
+### Main Dashboard with Statistics
+![Main Dashboard](Screenshots/kshitizscreenshot/dashboard.png)
+
+### Create New Article Modal
+![Create New Article](Screenshots/kshitizscreenshot/create-article.png)
+
+### Article Preview Modal
+![Article Preview](Screenshots/kshitizscreenshot/article-preview.png)
+
+### Article Management
+![Article Management](Screenshots/kshitizscreenshot/article-management.png)
+
+## Contributing to Hacktoberfest
+
+This project is part of Hacktoberfest! We welcome contributions from the community. Here's how you can contribute:
+
+### Getting Started
+1. Fork this repository
+2. Clone your forked repository to your local machine
+3. Create a new branch for your feature or bug fix
+4. Make your changes
+5. Commit your changes with a descriptive commit message
+6. Push your changes to your forked repository
+7. Create a Pull Request to the main repository
+
+### Ideas for Contributions
+
+We're looking for contributions in the following areas:
+
+1. **New Features**
+   - Add search functionality
+   - Implement blog categories/tags
+   - Add a dark/light mode toggle
+   - Implement blog sharing capabilities
+   - Add blog post statistics (views, likes)
+   - Implement draft saving functionality
+
+2. **UI/UX Improvements**
+   - Improve animations and transitions
+   - Add more visual feedback
+   - Enhance mobile responsiveness
+   - Add keyboard shortcuts
+   - Improve accessibility (ARIA labels, screen reader support)
+
+3. **Functionality Enhancements**
+   - Add export/import functionality (PDF, Markdown)
+   - Implement blog post sorting options
+   - Add rich text editing for blog content
+   - Implement pagination for blog lists
+   - Add blog post filtering by category
+
+4. **Code Quality**
+   - Refactor existing code for better performance
+   - Add more comprehensive error handling
+   - Improve code documentation
+   - Add unit tests
+   - Implement design patterns
+
+5. **Documentation**
+   - Improve this README file
+   - Add user guides
+   - Create setup instructions
+   - Add contribution guidelines
+   - Create API documentation
+
+### Contribution Guidelines
+
+1. Ensure your code follows the existing style and conventions
+2. Write clear, descriptive commit messages
+3. Test your changes thoroughly
+4. Update documentation if needed
+5. Be respectful and constructive in all interactions
+
+### Pull Request Process
+
+1. Ensure any install or build dependencies are removed before the end of the layer when doing a build
+2. Update the README.md with details of changes to the interface, if applicable
+3. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent
+4. Your Pull Request will be reviewed by maintainers, who may request changes before merging
+
+## Project Structure
 
-To understand the concept of the localstorage, how localstorage persist the data, even the tab is closed or user refersh the page.
+```
+Blog Application/
+├── index.html
+├── style.css
+├── script.js
+├── README.md
+└── Screenshots/
+    └── kshitizscreenshot/
+        ├── dashboard.png
+        ├── create-article.png
+        ├── article-preview.png
+        └── article-management.png
+```
 
-## ScreenShot
+## License
 
-<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/main/Blog%20Application/Screenshots/ss1.png?raw=true" />
+This project is open source and available under the [MIT License](LICENSE).
 
-Click on the `Add New`, UI looks like:
+## Author
 
+[Kshitiz Maurya](https://github.com/kshitizmaurya)
 
-<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/main/Blog%20Application/Screenshots/ss2.png?raw=true" />
+## Acknowledgements
 
-Click on the `Open Blog`, UI looks like:
+- [Bootstrap](https://getbootstrap.com/) for the CSS framework
+- [Font Awesome](https://fontawesome.com/) for icons
+- All contributors to this project
 
+## Support
 
-<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/main/Blog%20Application/Screenshots/ss3.png?raw=true" />
+If you like this project, please give it a ⭐️ on GitHub!
 
-## Live Demo
+---
 
-<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/main/Blog%20Application/Screenshots/demo.gif?raw=true" />
+Made with ❤️ for Hacktoberfest 2023
\ No newline at end of file
diff --git a/Blog Application/Screenshots/.DS_Store b/Blog Application/Screenshots/.DS_Store
new file mode 100644
index 000000000..6480fac39
Binary files /dev/null and b/Blog Application/Screenshots/.DS_Store differ
diff --git a/Blog Application/Screenshots/kshitizscreenshot/.DS_Store b/Blog Application/Screenshots/kshitizscreenshot/.DS_Store
new file mode 100644
index 000000000..755b56ddc
Binary files /dev/null and b/Blog Application/Screenshots/kshitizscreenshot/.DS_Store differ
diff --git "a/Blog Application/Screenshots/kshitizscreenshot/Screenshot 2025-10-16 at 1.58.32\342\200\257PM.png" "b/Blog Application/Screenshots/kshitizscreenshot/Screenshot 2025-10-16 at 1.58.32\342\200\257PM.png"
new file mode 100644
index 000000000..9f87f2249
Binary files /dev/null and "b/Blog Application/Screenshots/kshitizscreenshot/Screenshot 2025-10-16 at 1.58.32\342\200\257PM.png" differ
diff --git "a/Blog Application/Screenshots/kshitizscreenshot/Screenshot 2025-10-16 at 1.58.53\342\200\257PM.png" "b/Blog Application/Screenshots/kshitizscreenshot/Screenshot 2025-10-16 at 1.58.53\342\200\257PM.png"
new file mode 100644
index 000000000..98753fcdb
Binary files /dev/null and "b/Blog Application/Screenshots/kshitizscreenshot/Screenshot 2025-10-16 at 1.58.53\342\200\257PM.png" differ
diff --git a/Blog Application/index.html b/Blog Application/index.html
index 65601c7ff..0eff077e7 100644
--- a/Blog Application/index.html	
+++ b/Blog Application/index.html	
@@ -5,90 +5,220 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<!-- google fonts -->
+	<meta name="description" content="Professional Blog Application with LocalStorage">
+	<meta name="keywords" content="Blog, JavaScript, LocalStorage, Web App, Professional">
+	<meta name="author" content="Kshitiz Maurya">
+	
+	<!-- Google Fonts -->
 	<link rel="preconnect" href="https://fonts.gstatic.com" />
 	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
-	<!-- icons -->
+	
+	<!-- Font Awesome -->
 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" />
-	<!-- bootstrap cdn -->
+	
+	<!-- Bootstrap CSS -->
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
-	<!--  our stylesheet -->
+	
+	<!-- Our Stylesheet -->
 	<link rel="stylesheet" href="style.css">
-	<title>Blog App</title>
+	
+	<title>Professional Blog App</title>
 </head>
 
 <body onload="loadData()">
-	<!--Navbar Modal -->
+	<!-- Add New Blog Modal -->
 	<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
 		<div class="modal-dialog">
 			<div class="modal-content">
 				<div class="modal-header">
-					<h5 class="modal-title" id="staticBackdropLabel">Add New Task</h5>
+					<h5 class="modal-title" id="staticBackdropLabel"><i class="fas fa-plus-circle me-4 margin-top:10"></i>Create New Article</h5>
 					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 				</div>
 				<div class="modal-body">
-					<form>
+					<form id="blogForm">
 						<div class="mb-3">
-							<label for="imageurl" class="form-label">Image URL</label>
-							<input type="url" class="form-control" id="imageurl" aria-describedby="emailHelp" placeholder="https://images.hello.com/hello.png">
+							<label for="imageurl" class="form-label">Featured Image URL</label>
+							<input type="url" class="form-control" id="imageurl" aria-describedby="imageHelp" placeholder="https://example.com/image.jpg" required>
+							<div id="imageHelp" class="form-text">Enter a valid image URL for your blog post</div>
 						</div>
 						<div class="mb-3">
-							<label for="title" class="form-label">Title</label>
-							<input type="text" class="form-control" id="title" placeholder="Artificial Intelligence">
+							<label for="title" class="form-label">Article Title</label>
+							<input type="text" class="form-control" id="title" placeholder="Enter your article title" required>
 						</div>
 						<div class="mb-3">
-							<label for="type" class="form-label">Type</label>
-							<input type="text" class="form-control" id="type" placeholder="AI">
+							<label for="type" class="form-label">Category</label>
+							<select class="form-control" id="type" required>
+								<option value="">Select a category</option>
+								<option value="Technology">Technology</option>
+								<option value="Business">Business</option>
+								<option value="Lifestyle">Lifestyle</option>
+								<option value="Travel">Travel</option>
+								<option value="Health">Health</option>
+								<option value="Education">Education</option>
+								<option value="Entertainment">Entertainment</option>
+								<option value="Other">Other</option>
+							</select>
+							<div class="form-text">Or enter a custom category below</div>
+							<input type="text" class="form-control mt-2" id="customType" placeholder="Custom category">
 						</div>
 						<div class="mb-3">
-							<label for="description" class="form-label">Description</label>
-							<textarea rows="4" class="form-control" id="description"></textarea>
+							<label for="description" class="form-label">Content</label>
+							<textarea rows="5" class="form-control" id="description" placeholder="Write your article content here..." required></textarea>
 						</div>
 					</form>
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-					<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="saveChanges()">Save Changes</button>
+					<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i class="fas fa-times me-1"></i>Cancel</button>
+					<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="saveChanges()"><i class="fas fa-save me-1"></i>Publish Article</button>
 				</div>
 			</div>
 		</div>
 	</div>
-	<!--  card modal -->
+
+	<!-- View Blog Modal -->
 	<div class="modal fade" id="showblog" tabindex="-1" aria-labelledby="showTaskLabel" aria-hidden="true">
 		<div class="modal-dialog modal-lg">
 			<div class="modal-content">
-				<div class="modal-body blog__modal__body"></div>
+				<div class="modal-body blog__modal__body">
+					<!-- Blog content will be loaded here -->
+				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+					<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i class="fas fa-times me-1"></i>Close</button>
 				</div>
 			</div>
 		</div>
 	</div>
-	</div>
-	<!-- navbar -->
+
+	<!-- Navbar -->
 	<nav class="navbar navbar-expand-md navbar-light bg-light shadow-sm">
-		<div class="container-fluid"> <a class="navbar-brand  fw-bold text-primary" href="#">Blog</a>
-			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> 
+		<div class="container-fluid">
+			<a class="navbar-brand fw-bold" href="#">
+				<i class="fas fa-newspaper me-2"></i>ProBlog
+			</a>
+			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+				<span class="navbar-toggler-icon"></span>
 			</button>
 			<div class="collapse navbar-collapse" id="navbarSupportedContent">
 				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
-					<li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> 
+					<li class="nav-item">
+						<a class="nav-link active" aria-current="page" href="#"><i class="fas fa-home me-1"></i>Home</a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"><i class="fas fa-th-list me-1"></i>Categories</a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#"><i class="fas fa-info-circle me-1"></i>About</a>
 					</li>
 				</ul>
-				<button type="button" class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="fas fa-plus"></i> Add New</button>
+				<div class="d-flex align-items-center">
+					<span class="badge bg-primary me-3" id="blogCount">0 Articles</span>
+					<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+						<i class="fas fa-plus me-1"></i>New Article
+					</button>
+				</div>
 			</div>
 		</div>
 	</nav>
+
+	<!-- Main Content -->
 	<div class="container">
+		<!-- Header Section -->
+
+
+		<!-- Stats Section -->
+		<div class="stats-section">
+			<div class="stat-card">
+				<div class="icon-wrapper">
+					<i class="fas fa-newspaper"></i>
+				</div>
+				<div class="number" id="totalArticles">0</div>
+				<div class="label">Total Articles</div>
+			</div>
+			<div class="stat-card">
+				<div class="icon-wrapper">
+					<i class="fas fa-calendar-day"></i>
+				</div>
+				<div class="number" id="publishedToday">0</div>
+				<div class="label">Published Today</div>
+			</div>
+			<div class="stat-card">
+				<div class="icon-wrapper">
+					<i class="fas fa-tags"></i>
+				</div>
+				<div class="number" id="categoriesCount">0</div>
+				<div class="label">Categories</div>
+			</div>
+			<div class="stat-card">
+				<div class="icon-wrapper">
+					<i class="fas fa-eye"></i>
+				</div>
+				<div class="number" id="totalViews">0</div>
+				<div class="label">Total Views</div>
+			</div>
+			<div class="stat-card">
+				<div class="icon-wrapper">
+					<i class="fas fa-comment"></i>
+				</div>
+				<div class="number" id="totalComments">0</div>
+				<div class="label">Comments</div>
+			</div>
+			<div class="stat-card">
+				<div class="icon-wrapper">
+					<i class="fas fa-users"></i>
+				</div>
+				<div class="number" id="activeAuthors">0</div>
+				<div class="label">Active Authors</div>
+			</div>
+		</div>
+
+		<!-- Search and Filter Section -->
+		<div class="search-filter-section">
+			<div class="row">
+				<div class="col-md-6">
+					<div class="search-box">
+						<i class="fas fa-search"></i>
+						<input type="text" class="form-control" id="searchInput" placeholder="Search articles...">
+					</div>
+				</div>
+				<div class="col-md-6">
+					<div class="d-flex justify-content-end">
+						<select class="form-control" id="sortSelect" style="width: auto;">
+							<option value="newest">Newest First</option>
+							<option value="oldest">Oldest First</option>
+							<option value="title">Title A-Z</option>
+						</select>
+					</div>
+				</div>
+			</div>
+			<div class="filter-buttons">
+				<button class="filter-btn active" data-filter="all">All Articles</button>
+				<button class="filter-btn" data-filter="Technology">Technology</button>
+				<button class="filter-btn" data-filter="Business">Business</button>
+				<button class="filter-btn" data-filter="Lifestyle">Lifestyle</button>
+				<button class="filter-btn" data-filter="Other">Other</button>
+			</div>
+		</div>
+
+		<!-- Blog Container -->
 		<section>
-			<div class="row blog__container mt-5 mb-3 ">
-		        </div>
+			<div class="row blog__container mt-3 mb-5">
+				<!-- Blog cards will be loaded here -->
+			</div>
 		</section>
 	</div>
+
+	<!-- Footer -->
+	<footer class="text-center text-light">
+		<div class="container">
+			<p>© 2023  Blog App. All rights reserved.</p>
+			<p class="small">Designed for Hacktoberfest contributions</p>
+		</div>
+	</footer>
+
+	<!-- Scripts -->
 	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
 	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
 	<script src="script.js"></script>
 </body>
-</html>
-
 
+</html>
\ No newline at end of file
diff --git a/Blog Application/script.js b/Blog Application/script.js
index 0c7fba9eb..e987ad7ce 100644
--- a/Blog Application/script.js	
+++ b/Blog Application/script.js	
@@ -1,245 +1,566 @@
-// targeting the parent element
+// Targeting the parent element
 const blogContainer = document.querySelector('.blog__container');
 const blogModal = document.querySelector(".blog__modal__body");
-// global 
+const blogCount = document.getElementById("blogCount");
+const totalArticles = document.getElementById("totalArticles");
+const publishedToday = document.getElementById("publishedToday");
+const categoriesCount = document.getElementById("categoriesCount");
+const totalViews = document.getElementById("totalViews");
+const totalComments = document.getElementById("totalComments");
+const activeAuthors = document.getElementById("activeAuthors");
+const searchInput = document.getElementById("searchInput");
+const sortSelect = document.getElementById("sortSelect");
+const filterButtons = document.querySelectorAll(".filter-btn");
+
+// Global store for blog data
 let globalStore = [];
+let currentFilter = "all";
+
+// Function to update blog count in navbar and stats
+const updateBlogCount = () => {
+    const count = globalStore.length;
+    blogCount.textContent = `${count} ${count === 1 ? 'Article' : 'Articles'}`;
+    totalArticles.textContent = count;
+    
+    // Update published today count
+    const today = new Date().toDateString();
+    const todayCount = globalStore.filter(blog => {
+        const blogDate = new Date(parseInt(blog.id)).toDateString();
+        return blogDate === today;
+    }).length;
+    publishedToday.textContent = todayCount;
+    
+    // Update categories count
+    const categories = [...new Set(globalStore.map(blog => blog.blogType))];
+    categoriesCount.textContent = categories.length;
+    
+    // Update views count (simulated)
+    const viewsCount = globalStore.reduce((total, blog) => {
+        // Simulate views based on article age and length
+        const ageInDays = (Date.now() - parseInt(blog.id)) / (1000 * 60 * 60 * 24);
+        const contentLength = blog.blogDescription.length;
+        const baseViews = Math.max(10, 100 - ageInDays * 2);
+        const contentBonus = contentLength > 500 ? 20 : 0;
+        return total + Math.floor(baseViews + contentBonus);
+    }, 0);
+    totalViews.textContent = viewsCount;
+    
+    // Update comments count (simulated)
+    const commentsCount = globalStore.reduce((total, blog) => {
+        // Simulate comments based on views
+        const ageInDays = (Date.now() - parseInt(blog.id)) / (1000 * 60 * 60 * 24);
+        const baseComments = Math.max(1, 10 - ageInDays * 0.5);
+        return total + Math.floor(baseComments);
+    }, 0);
+    totalComments.textContent = commentsCount;
+    
+    // Update active authors count (simulated)
+    // In a real app, this would be based on unique author IDs
+    const authorsCount = globalStore.length > 0 ? Math.max(1, Math.floor(globalStore.length / 3)) : 0;
+    activeAuthors.textContent = authorsCount;
+};
+
+// Function to show empty state when no blogs exist
+const showEmptyState = () => {
+    if (globalStore.length === 0) {
+        blogContainer.innerHTML = `
+            <div class="col-12">
+                <div class="empty-state">
+                    <i class="fas fa-newspaper"></i>
+                    <h3>No Articles Published Yet</h3>
+                    <p>Get started by creating your first professional article. Share your expertise and insights with our readers!</p>
+                    <button type="button" class="btn btn-primary hero-btn" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+                        <i class="fas fa-plus-circle me-2"></i>Create Your First Article
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+};
 
-// -----------------------------------------------------
-// a function for creating a new card
+// Function to show loading state
+const showLoading = () => {
+    blogContainer.innerHTML = `
+        <div class="col-12">
+            <div class="loading">
+                <div class="loading-spinner"></div>
+            </div>
+        </div>
+    `;
+};
+
+// Function to create a new blog card
 const newCard = ({
-	id,
-	imageUrl,
-	blogTitle,
-	blogType,
-	blogDescription
-}) => `<div class="col-lg-4 col-md-6" id=${id}>
-<div class="card m-2">
-  <div class="card-header d-flex justify-content-end gap-2">
-    <button type="button" class="btn btn-outline-success" id="${id}" onclick="editCard.apply(this, arguments)"><i class="fas fa-pencil-alt" id="${id}" onclick="editCard.apply(this, arguments)"></i></button>
-    <button type="button" class="btn btn-outline-danger" id="${id}" onclick="deleteCard.apply(this, arguments)"><i class="fas fa-trash-alt" id="${id}" onclick="deleteCard.apply(this, arguments)"></i></button>
-  </div>
-  <img
-    src=${imageUrl}
-    class="card-img-top" alt="...">
-  <div class="card-body">
-    <h5 class="card-title">${blogTitle}</h5>
-    <p class="card-text">${blogDescription}</p>
-    <span class="badge bg-primary">${blogType}</span>
-  </div>
-  <div class="card-footer text-muted">
-    <button type="button" id="${id}" class="btn btn-outline-primary float-end" data-bs-toggle="modal"
-    data-bs-target="#showblog" onclick="openBlog.apply(this, arguments)">Open Blog</button>
-  </div>
-</div>
+    id,
+    imageUrl,
+    blogTitle,
+    blogType,
+    blogDescription
+}) => `
+<div class="col-lg-4 col-md-6 mb-4" id=${id} data-category="${blogType}">
+    <div class="card h-100">
+        <div class="card-header d-flex justify-content-end gap-2">
+            <button type="button" class="btn btn-outline-success" id="${id}" onclick="editCard.apply(this, arguments)" title="Edit Article">
+                <i class="fas fa-edit" id="${id}" onclick="editCard.apply(this, arguments)"></i>
+            </button>
+            <button type="button" class="btn btn-outline-danger" id="${id}" onclick="deleteCard.apply(this, arguments)" title="Delete Article">
+                <i class="fas fa-trash-alt" id="${id}" onclick="deleteCard.apply(this, arguments)"></i>
+            </button>
+        </div>
+        <img src="${imageUrl}" class="card-img-top" alt="${blogTitle}" onerror="this.src='https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80';">
+        <div class="card-body">
+            <h5 class="card-title">${blogTitle}</h5>
+            <p class="card-text">${blogDescription.substring(0, 120)}${blogDescription.length > 120 ? '...' : ''}</p>
+            <span class="badge">${blogType}</span>
+        </div>
+        <div class="card-footer">
+            <small class="text-muted">Published on ${new Date(parseInt(id)).toLocaleDateString()}</small>
+            <button type="button" id="${id}" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#showblog" onclick="openBlog.apply(this, arguments)">
+                <i class="fas fa-book-open me-1"></i>Read
+            </button>
+        </div>
+    </div>
 </div>`;
 
-// --------------------------------------------------
+// Function to load data from localStorage
 const loadData = () => {
-
-	// access localstorage
-	// localStorage.getItem("blog") ===  localStorage.blog
-	const getInitialData = localStorage.blog; // if null, then
-	if (!getInitialData) return;
-
-	// convert stringified-object to object
-	const {
-		cards
-	} = JSON.parse(getInitialData);
-
-	// map around the array to generate HTML card and inject it to DOM
-	cards.map((blogObject) => {
-		const createNewBlog = newCard(blogObject);
-		blogContainer.insertAdjacentHTML("beforeend", createNewBlog);
-		globalStore.push(blogObject);
-	});
+    showLoading();
+    
+    // Simulate loading delay for better UX
+    setTimeout(() => {
+        // Access localStorage
+        const getInitialData = localStorage.blog;
+        
+        if (!getInitialData) {
+            globalStore = [];
+            showEmptyState();
+            updateBlogCount();
+            return;
+        }
+
+        // Convert stringified-object to object
+        const { cards } = JSON.parse(getInitialData);
+
+        // Map around the array to generate HTML card and inject it to DOM
+        cards.map((blogObject) => {
+            const createNewBlog = newCard(blogObject);
+            blogContainer.insertAdjacentHTML("beforeend", createNewBlog);
+            globalStore.push(blogObject);
+        });
+        
+        updateBlogCount();
+        setupEventListeners();
+        
+        // Show empty state if no blogs after loading
+        if (globalStore.length === 0) {
+            showEmptyState();
+        }
+    }, 500);
 };
 
+// Function to update localStorage
 const updateLocalStorage = () => {
-	localStorage.setItem("blog", JSON.stringify({
-		cards: globalStore
-	}))
-}
-
-//  function for save changes----------------------------------------
+    localStorage.setItem("blog", JSON.stringify({
+        cards: globalStore
+    }));
+    updateBlogCount();
+};
 
-// create a function which will trigerred on clicking on save changes in the modal
+// Function to save new blog
 const saveChanges = () => {
-	const blogData = {
-		id: `${Date.now()}`, // generating a unique id for each card
-		imageUrl: document.getElementById('imageurl').value,
-		blogTitle: document.getElementById('title').value,
-		blogType: document.getElementById('type').value,
-		blogDescription: document.getElementById('description').value
-	};
-
-	const createNewBlog = newCard(blogData);
-	blogContainer.insertAdjacentHTML("beforeend", createNewBlog);
-
-	globalStore.push(blogData);
-
-	//  API  -> add t localStorage
-	updateLocalStorage()
-	// provide some unique identification, i.e key, here key is "blog", 
-
+    // Get form values
+    const imageUrl = document.getElementById('imageurl').value;
+    const blogTitle = document.getElementById('title').value;
+    let blogType = document.getElementById('type').value;
+    const customType = document.getElementById('customType').value;
+    const blogDescription = document.getElementById('description').value;
+    
+    // Use custom type if provided
+    if (customType.trim() !== '') {
+        blogType = customType;
+    }
+    
+    // Validate form
+    if (!imageUrl || !blogTitle || !blogType || !blogDescription) {
+        alert("Please fill in all required fields");
+        return;
+    }
+    
+    const blogData = {
+        id: `${Date.now()}`, // Generating a unique id for each card
+        imageUrl: imageUrl,
+        blogTitle: blogTitle,
+        blogType: blogType,
+        blogDescription: blogDescription
+    };
+
+    const createNewBlog = newCard(blogData);
+    
+    // If this is the first blog, remove empty state
+    if (globalStore.length === 0) {
+        blogContainer.innerHTML = '';
+    }
+    
+    blogContainer.insertAdjacentHTML("beforeend", createNewBlog);
+    globalStore.push(blogData);
+    
+    // Update localStorage
+    updateLocalStorage();
+    
+    // Reset form
+    document.getElementById('blogForm').reset();
+    
+    // Show success message
+    showSuccessMessage("Article published successfully!");
+    
+    // Re-setup event listeners
+    setupEventListeners();
 };
 
-// function for deleting a card -------------------
+// Function to show success message
+const showSuccessMessage = (message) => {
+    // Create alert element
+    const alertDiv = document.createElement('div');
+    alertDiv.className = 'alert alert-success alert-dismissible fade show position-fixed';
+    alertDiv.style = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
+    alertDiv.role = 'alert';
+    alertDiv.innerHTML = `
+        <i class="fas fa-check-circle me-2"></i>${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    `;
+    
+    // Add to body
+    document.body.appendChild(alertDiv);
+    
+    // Auto remove after 3 seconds
+    setTimeout(() => {
+        if (alertDiv.parentNode) {
+            alertDiv.parentNode.removeChild(alertDiv);
+        }
+    }, 3000);
+};
 
+// Function to delete a blog card
 const deleteCard = (event) => {
-	// id
-	event = window.event;
-	const targetID = event.target.id;
-	const tagname = event.target.tagName; // BUTTON OR I
-
-	// assign the same id of card to button also
-
-	// search the globalStore, remove the object which matches with the id
-	globalStore = globalStore.filter((blogObject) => blogObject.id !== targetID);
-
-	updateLocalStorage();
-
-	// access DOM to remove them
-
-	if (tagname === "BUTTON") {
-		// task__container
-		return blogContainer.removeChild(
-			event.target.parentNode.parentNode.parentNode // col-lg-4
-		);
-	}
-
-	// else
-	// blog__container
-	return blogContainer.removeChild(
-		event.target.parentNode.parentNode.parentNode.parentNode // col-lg-4
-	);
+    event = window.event;
+    const targetID = event.target.id;
+    const tagname = event.target.tagName; // BUTTON OR I
+
+    // Confirm deletion
+    if (!confirm("Are you sure you want to delete this article? This action cannot be undone.")) {
+        return;
+    }
+
+    // Search the globalStore, remove the object which matches with the id
+    globalStore = globalStore.filter((blogObject) => blogObject.id !== targetID);
+    updateLocalStorage();
+
+    // Access DOM to remove them
+    let parentElement;
+    if (tagname === "BUTTON") {
+        parentElement = event.target.parentNode.parentNode.parentNode; // col-lg-4
+    } else {
+        parentElement = event.target.parentNode.parentNode.parentNode.parentNode; // col-lg-4
+    }
+    
+    // Add animation before removing
+    parentElement.style.transition = "opacity 0.3s ease, transform 0.3s ease";
+    parentElement.style.opacity = "0";
+    parentElement.style.transform = "translateX(100px)";
+    
+    setTimeout(() => {
+        if (parentElement.parentNode) {
+            parentElement.parentNode.removeChild(parentElement);
+        }
+        
+        // Show empty state if no blogs left
+        if (globalStore.length === 0) {
+            showEmptyState();
+        }
+        
+        showSuccessMessage("Article deleted successfully!");
+        setupEventListeners();
+    }, 300);
 };
 
-// function for editing
+// Function to edit a blog card
 const editCard = (event) => {
+    event = window.event;
+    const targetID = event.target.id;
+    const tagname = event.target.tagName;
+
+    let parentElement;
+    if (tagname === "BUTTON") {
+        parentElement = event.target.parentNode.parentNode;
+    } else {
+        parentElement = event.target.parentNode.parentNode.parentNode;
+    }
+
+    let blogTitle = parentElement.childNodes[5].childNodes[1];
+    let blogDescription = parentElement.childNodes[5].childNodes[3];
+    let blogType = parentElement.childNodes[5].childNodes[5];
+    let submitBtn = parentElement.childNodes[7].childNodes[3];
+
+    // Set attributes for editing
+    blogTitle.setAttribute("contenteditable", "true");
+    blogTitle.style.outline = "2px solid #3498db";
+    blogTitle.style.borderRadius = "5px";
+    blogTitle.style.padding = "5px";
+
+    blogDescription.setAttribute("contenteditable", "true");
+    blogDescription.style.outline = "2px solid #3498db";
+    blogDescription.style.borderRadius = "5px";
+    blogDescription.style.padding = "5px";
+
+    blogType.setAttribute("contenteditable", "true");
+    blogType.style.outline = "2px solid #3498db";
+    blogType.style.borderRadius = "5px";
+    blogType.style.padding = "5px";
+
+    submitBtn.setAttribute("onclick", "saveEditChanges.apply(this, arguments)");
+    submitBtn.innerHTML = '<i class="fas fa-save me-1"></i>Save Changes';
+    submitBtn.classList.remove("btn-outline-primary");
+    submitBtn.classList.add("btn-primary");
+
+    // Remove modal attributes
+    submitBtn.removeAttribute("data-bs-toggle");
+    submitBtn.removeAttribute("data-bs-target");
+    
+    showSuccessMessage("Editing mode activated. Click 'Save Changes' when done.");
+};
 
-	event = window.event;
-	const targetID = event.target.id;
-	const tagname = event.target.tagName;
-
-	let parentElement;
-	if (tagname === "BUTTON") {
-		parentElement = event.target.parentNode.parentNode;
-
-	} else {
-		parentElement = event.target.parentNode.parentNode.parentNode;
-	}
-
-	let blogTitle = parentElement.childNodes[5].childNodes[1];
-	let blogDescription = parentElement.childNodes[5].childNodes[3];
-	let blogType = parentElement.childNodes[5].childNodes[5];
-	let submitBtn = parentElement.childNodes[7].childNodes[1];
-	// console.log(taskTitle, taskDescription, taskType);
-
-	// setAttributes
-	blogTitle.setAttribute("contenteditable", "true");
-
-	blogDescription.setAttribute("contenteditable", "true");
-	blogType.setAttribute("contenteditable", "true");
-	submitBtn.setAttribute(
-		"onclick",
-		"saveEditChanges.apply(this, arguments)"
-	);
-	submitBtn.innerHTML = "Save Changes";
-
-	//  modal removed
-	submitBtn.removeAttribute("data-bs-toggle");
-	submitBtn.removeAttribute("data-bs-target");
-
-}
-
+// Function to save edited changes
 const saveEditChanges = (event) => {
+    event = window.event;
+    const targetID = event.target.id;
+    const tagname = event.target.tagName;
+
+    let parentElement;
+    if (tagname === "BUTTON") {
+        parentElement = event.target.parentNode.parentNode;
+    } else {
+        parentElement = event.target.parentNode.parentNode.parentNode;
+    }
+
+    let blogTitle = parentElement.childNodes[5].childNodes[1];
+    let blogDescription = parentElement.childNodes[5].childNodes[3];
+    let blogType = parentElement.childNodes[5].childNodes[5];
+    let submitBtn = parentElement.childNodes[7].childNodes[3];
+
+    // Get updated data
+    const updatedData = {
+        blogTitle: blogTitle.innerHTML,
+        blogDescription: blogDescription.innerHTML,
+        blogType: blogType.innerHTML,
+    };
+
+    // Update globalStore
+    globalStore = globalStore.map((blog) => {
+        if (blog.id === targetID) {
+            return {
+                id: blog.id,
+                imageUrl: blog.imageUrl,
+                blogTitle: updatedData.blogTitle,
+                blogType: updatedData.blogType,
+                blogDescription: updatedData.blogDescription,
+            };
+        }
+        return blog;
+    });
+
+    updateLocalStorage();
+
+    // Remove editing styles
+    blogTitle.setAttribute("contenteditable", "false");
+    blogTitle.style.outline = "none";
+    blogTitle.style.padding = "";
+    blogTitle.style.borderRadius = "";
+
+    blogDescription.setAttribute("contenteditable", "false");
+    blogDescription.style.outline = "none";
+    blogDescription.style.padding = "";
+    blogDescription.style.borderRadius = "";
+
+    blogType.setAttribute("contenteditable", "false");
+    blogType.style.outline = "none";
+    blogType.style.padding = "";
+    blogType.style.borderRadius = "";
+
+    // Restore button styles
+    submitBtn.setAttribute("onclick", "openBlog.apply(this, arguments)");
+    submitBtn.setAttribute("data-bs-toggle", "modal");
+    submitBtn.setAttribute("data-bs-target", "#showblog");
+    submitBtn.innerHTML = '<i class="fas fa-book-open me-1"></i>Read';
+    submitBtn.classList.remove("btn-primary");
+    submitBtn.classList.add("btn-outline-primary");
+    
+    showSuccessMessage("Article updated successfully!");
+};
 
-	event = window.event;
-	const targetID = event.target.id;
-	const tagname = event.target.tagName;
-
-	let parentElement;
-	if (tagname === "BUTTON") {
-		parentElement = event.target.parentNode.parentNode;
-
-	} else {
-		parentElement = event.target.parentNode.parentNode.parentNode;
-	}
-
-	let blogTitle = parentElement.childNodes[5].childNodes[1];
-	let blogDescription = parentElement.childNodes[5].childNodes[3];
-	let blogType = parentElement.childNodes[5].childNodes[5];
-	let submitBtn = parentElement.childNodes[7].childNodes[1];
-
-	const updatedData = {
-
-		blogTitle: blogTitle.innerHTML,
-		blogDescription: blogDescription.innerHTML,
-		blogType: blogType.innerHTML,
-	}
-
-	// console.log(updatedData);
-	globalStore = globalStore.map((blog) => {
-		if (blog.id === targetID) {
-			return {
-				id: blog.id,
-				imageUrl: blog.imageUrl,
-				blogTitle: updatedData.blogTitle,
-				blogType: updatedData.blogType,
-				blogDescription: updatedData.blogDescription,
-			};
-		}
-		return blog; // important statement
-	});
-
-	updateLocalStorage();
+// Function to generate HTML for blog modal
+const htmlModalContent = ({
+    id,
+    blogTitle,
+    blogDescription,
+    imageUrl,
+    blogType
+}) => {
+    const date = new Date(parseInt(id));
+    return `
+    <div id=${id}>
+        <img src="${imageUrl}" alt="${blogTitle}" class="img-fluid place__holder__image mb-4" onerror="this.src='https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80';">
+        <div class="text-sm text-muted mb-3">
+            <i class="fas fa-calendar-alt me-1"></i>Published on ${date.toLocaleDateString()}
+        </div>
+        <h2 class="my-4">${blogTitle}</h2>
+        <span class="badge mb-4">${blogType}</span>
+        <div class="blog-content">
+            <p class="lead">
+                ${blogDescription}
+            </p>
+        </div>
+    </div>`;
+};
 
-	blogTitle.setAttribute("contenteditable", "false");
+// Function to open blog in modal
+const openBlog = (event) => {
+    event = window.event;
+    const targetID = event.target.id;
 
-	blogDescription.setAttribute("contenteditable", "false");
-	blogType.setAttribute("contenteditable", "false");
+    const getBlog = globalStore.filter(({ id }) => id === targetID);
+    blogModal.innerHTML = htmlModalContent(getBlog[0]);
+};
 
-	// modal added
-	submitBtn.setAttribute("onclick", "openBlog.apply(this, arguments)");
-	submitBtn.setAttribute("data-bs-toggle", "modal");
-	submitBtn.setAttribute("data-bs-target", "#showblog");
+// Function to filter blogs
+const filterBlogs = (category) => {
+    currentFilter = category;
+    
+    // Update active filter button
+    filterButtons.forEach(btn => {
+        if (btn.dataset.filter === category) {
+            btn.classList.add('active');
+        } else {
+            btn.classList.remove('active');
+        }
+    });
+    
+    // Filter and display blogs
+    renderBlogs();
+};
 
-	submitBtn.innerHTML = "Open Blog";
+// Function to search blogs
+const searchBlogs = (query) => {
+    renderBlogs(query);
+};
 
-}
+// Function to sort blogs
+const sortBlogs = (criteria) => {
+    renderBlogs(null, criteria);
+};
 
-const htmlModalContent = ({
-	id,
-	blogTitle,
-	blogDescription,
-	imageUrl,
-	blogType
-}) => {
-	const date = new Date(parseInt(id));
-	return ` <div id=${id}>
-   <img
-   src=${imageUrl}
-   alt="bg image"
-   class="img-fluid place__holder__image mb-3 p-4"
-   />
-   <div class="text-sm text-muted ">Created on ${date.toDateString()}</div>
-   <h2 class="my-5 mt-5" style="display:inline;">${blogTitle}</h2>
-   <span class="badge bg-primary">${blogType}</span>
-   <p class="lead mt-2">
-   ${blogDescription}
-   </p></div>`;
+// Function to render blogs with filtering, searching, and sorting
+const renderBlogs = (searchQuery = null, sortCriteria = null) => {
+    // Clear container
+    blogContainer.innerHTML = '';
+    
+    // Filter blogs
+    let filteredBlogs = globalStore;
+    
+    if (currentFilter !== "all") {
+        filteredBlogs = globalStore.filter(blog => blog.blogType === currentFilter);
+    }
+    
+    // Search blogs
+    if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        filteredBlogs = filteredBlogs.filter(blog => 
+            blog.blogTitle.toLowerCase().includes(query) || 
+            blog.blogDescription.toLowerCase().includes(query) ||
+            blog.blogType.toLowerCase().includes(query)
+        );
+    }
+    
+    // Sort blogs
+    if (sortCriteria) {
+        switch(sortCriteria) {
+            case 'newest':
+                filteredBlogs.sort((a, b) => parseInt(b.id) - parseInt(a.id));
+                break;
+            case 'oldest':
+                filteredBlogs.sort((a, b) => parseInt(a.id) - parseInt(b.id));
+                break;
+            case 'title':
+                filteredBlogs.sort((a, b) => a.blogTitle.localeCompare(b.blogTitle));
+                break;
+        }
+    } else {
+        // Default sort by newest
+        filteredBlogs.sort((a, b) => parseInt(b.id) - parseInt(a.id));
+    }
+    
+    // Display blogs
+    if (filteredBlogs.length === 0) {
+        blogContainer.innerHTML = `
+            <div class="col-12">
+                <div class="empty-state">
+                    <i class="fas fa-search"></i>
+                    <h3>No Articles Found</h3>
+                    <p>Try adjusting your search or filter criteria</p>
+                </div>
+            </div>
+        `;
+        return;
+    }
+    
+    filteredBlogs.forEach(blog => {
+        const createNewBlog = newCard(blog);
+        blogContainer.insertAdjacentHTML("beforeend", createNewBlog);
+    });
+    
+    // Re-setup event listeners
+    setupEventListeners();
 };
 
-const openBlog = (event) => {
+// Function to setup event listeners
+const setupEventListeners = () => {
+    // Search input
+    searchInput.removeEventListener('input', handleSearch);
+    searchInput.addEventListener('input', handleSearch);
+    
+    // Sort select
+    sortSelect.removeEventListener('change', handleSort);
+    sortSelect.addEventListener('change', handleSort);
+    
+    // Filter buttons
+    filterButtons.forEach(btn => {
+        btn.removeEventListener('click', handleFilter);
+        btn.addEventListener('click', handleFilter);
+    });
+};
 
-	event = window.event;
-	const targetID = event.target.id;
+// Event handler functions
+const handleSearch = (e) => {
+    searchBlogs(e.target.value);
+};
 
-	const getBlog = globalStore.filter(({
-		id
-	}) => id === targetID);
-	// console.log(getBlog[0]);
-	blogModal.innerHTML = htmlModalContent(getBlog[0]);
+const handleSort = (e) => {
+    sortBlogs(e.target.value);
 };
 
+const handleFilter = (e) => {
+    filterBlogs(e.target.dataset.filter);
+};
 
+// Add event listener for form submission
+document.addEventListener('DOMContentLoaded', function() {
+    const blogForm = document.getElementById('blogForm');
+    if (blogForm) {
+        blogForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            saveChanges();
+        });
+    }
+    
+    // Setup initial event listeners
+    setupEventListeners();
+});
\ No newline at end of file
diff --git a/Blog Application/style.css b/Blog Application/style.css
index 144cc9d10..e8540cd0e 100644
--- a/Blog Application/style.css	
+++ b/Blog Application/style.css	
@@ -1,22 +1,603 @@
 * {
   margin: 0;
   padding: 0;
-  box-sizing: border-box; /* box-model*/
+  box-sizing: border-box;
 }
 
 body {
   font-family: "Poppins", sans-serif;
-  background-color: #ebf2ff;
+  background-color: #f8f9fa;
+  color: #333;
+  min-height: 100vh;
+  padding: 20px 0;
+}
+
+.container {
+  max-width: 1200px;
+}
+
+/* Professional color scheme */
+:root {
+  --primary: #2c3e50;
+  --secondary: #3498db;
+  --accent: #e74c3c;
+  --light: #ecf0f1;
+  --dark: #2c3e50;
+  --success: #27ae60;
+  --warning: #f39c12;
+  --info: #3498db;
+  --danger: #e74c3c;
+}
+
+.navbar {
+  background: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border: none !important;
+  padding: 15px 0;
+}
+
+.navbar-brand {
+  font-weight: 700;
+  color: var(--primary) !important;
+  font-size: 1.8rem;
+}
+
+.navbar-brand i {
+  color: var(--secondary);
+}
+
+.nav-link {
+  font-weight: 500;
+  color: #555 !important;
+  transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+  color: var(--secondary) !important;
+}
+
+.btn-primary {
+  background: var(--primary);
+  border: none;
+  font-weight: 600;
+  padding: 12px 25px;
+  transition: all 0.3s ease;
+  border-radius: 6px;
+  font-size: 1rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary:hover {
+  background: #1a252f;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+/* Enhanced primary button for main CTA */
+.btn-primary.hero-btn {
+  padding: 15px 40px;
+  font-size: 1.2rem;
+  font-weight: 700;
+  border-radius: 50px;
+  background: linear-gradient(135deg, var(--primary) 0%, #1a252f 100%);
+  box-shadow: 0 8px 20px rgba(44, 62, 80, 0.3);
+  transition: all 0.4s ease;
+}
+
+.btn-primary.hero-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 25px rgba(44, 62, 80, 0.4);
+}
+
+.btn-primary.hero-btn:active {
+  transform: translateY(-1px);
+}
+
+.btn-primary.hero-btn i {
+  font-size: 1.3rem;
+  vertical-align: middle;
+  margin-right: 12px;
+}
+
+.card {
+  border-radius: 10px;
+  overflow: hidden;
+  border: none;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  background: white;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+.card-header {
+  background: var(--light);
+  border-bottom: 1px solid #eee;
+  padding: 15px 20px;
 }
 
 .card-img-top {
   padding: 15px;
-  height: 300px;
-  width: auto;
+  height: 200px;
+  width: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.card-body {
+  flex: 1;
+  padding: 20px;
+}
+
+.card-title {
+  font-weight: 700;
+  color: var(--dark);
+  margin-bottom: 10px;
+  font-size: 1.25rem;
+  line-height: 1.4;
+}
+
+.card-text {
+  color: #666;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+.badge {
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  background: var(--secondary);
+}
+
+.card-footer {
+  background: #f8f9fa;
+  border-top: 1px solid #eee;
+  padding: 15px 20px;
+}
+
+.btn-outline-success {
+  border-color: var(--success);
+  color: var(--success);
+  transition: all 0.3s ease;
+  border-radius: 6px;
+  padding: 5px 10px;
+}
+
+.btn-outline-success:hover {
+  background: var(--success);
+  color: white !important;
+  transform: scale(1.1);
+}
+
+.btn-outline-danger {
+  border-color: var(--danger);
+  color: var(--danger);
+  transition: all 0.3s ease;
+  border-radius: 6px;
+  padding: 5px 10px;
+}
+
+.btn-outline-danger:hover {
+  background: var(--danger);
+  color: white !important;
+  transform: scale(1.1);
+}
+
+.btn-outline-primary {
+  border-color: var(--primary);
+  color: var(--primary);
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border-radius: 6px;
+  padding: 8px 15px;
+}
+
+.btn-outline-primary:hover {
+  background: var(--primary);
+  color: white !important;
+  border-color: var(--primary);
+}
+
+.modal-content {
+  border-radius: 10px;
+  border: none;
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+}
+
+.modal-header {
+  background: var(--primary);
+  color: white;
+  border-radius: 10px 10px 0 0 !important;
+  border: none;
+  padding: 20px;
+}
+
+.modal-title {
+  font-weight: 600;
+}
+
+.btn-close {
+  filter: invert(1);
+}
+
+.form-control, .form-control:focus {
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  padding: 12px 15px;
+  transition: all 0.3s ease;
+  background: #f8f9fa;
+}
+
+.form-control:focus {
+  border-color: var(--secondary);
+  box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
+  background: white;
+}
+
+.form-label {
+  font-weight: 600;
+  color: var(--dark);
+  margin-bottom: 8px;
+}
+
+textarea.form-control {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.blog__modal__body {
+  padding: 30px;
 }
 
 .place__holder__image {
   width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.text-muted {
+  color: #6c757d !important;
+  font-size: 0.85rem;
 }
 
+.lead {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #495057;
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  background: white;
+  border-radius: 10px;
+  margin: 20px 0;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+}
+
+.empty-state i {
+  font-size: 4rem;
+  color: var(--secondary);
+  margin-bottom: 20px;
+}
+
+.empty-state h3 {
+  color: var(--dark);
+  margin-bottom: 15px;
+  font-weight: 600;
+}
+
+.empty-state p {
+  color: #6c757d;
+  font-size: 1.1rem;
+  max-width: 500px;
+  margin: 0 auto 25px;
+}
+
+/* Loading animation */
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(44, 62, 80, 0.3);
+  border-top: 4px solid var(--primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+  .container {
+    padding: 0 15px;
+  }
+  
+  .card {
+    margin-bottom: 20px;
+  }
+  
+  .navbar-brand {
+    font-size: 1.5rem;
+  }
+  
+  .btn-primary {
+    padding: 8px 16px;
+    font-size: 0.9rem;
+  }
+  
+  .blog__container {
+    margin-top: 1rem;
+  }
+}
+
+/* Animation for new cards */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.blog__container .col-lg-4 {
+  animation: fadeInUp 0.6s ease forwards;
+}
+
+/* Blog content styling */
+.blog-content h2 {
+  color: var(--dark);
+  margin-bottom: 20px;
+  font-weight: 700;
+}
+
+.blog-content p {
+  line-height: 1.8;
+  color: #444;
+  font-size: 1.05rem;
+}
+
+/* Footer */
+footer {
+  background: var(--primary);
+  color: white;
+  padding: 30px 0;
+  margin-top: 50px;
+}
+
+footer p {
+  margin-bottom: 5px;
+}
+
+footer .small {
+  opacity: 0.8;
+}
+
+/* Header section */
+header {
+  text-align: center;
+  padding: 60px 20px;
+  margin-bottom: 30px;
+  background: linear-gradient(135deg, rgba(236, 240, 241, 0.7) 0%, rgba(255, 255, 255, 0.9) 100%);
+  border-radius: 15px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+}
+
+header h1 {
+  font-weight: 800;
+  color: var(--primary);
+  margin-bottom: 15px;
+  font-size: 2.8rem;
+}
+
+header p {
+  color: #666;
+  font-size: 1.3rem;
+  max-width: 700px;
+  margin: 0 auto 30px;
+}
+
+/* Button enhancements */
+.btn-lg {
+  padding: 12px 30px;
+  font-size: 1.1rem;
+}
+
+.btn i {
+  margin-right: 8px;
+}
+
+/* Alert styling */
+.alert {
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.alert-success {
+  background: #d4edda;
+  color: #155724;
+}
+
+.alert-success i {
+  color: var(--success);
+}
+
+/* Search and filter section */
+.search-filter-section {
+  background: white;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 30px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+}
+
+.search-box {
+  position: relative;
+}
+
+.search-box input {
+  padding-left: 40px;
+  border-radius: 50px;
+  border: 1px solid #ddd;
+}
+
+.search-box i {
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+}
+
+.filter-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.filter-btn {
+  background: #f8f9fa;
+  border: 1px solid #ddd;
+  border-radius: 50px;
+  padding: 8px 20px;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+}
+
+.filter-btn:hover, .filter-btn.active {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+/* Stats section */
+.stats-section {
+  display: flex;
+  justify-content: center;
+  gap: 54px;
+  margin: 30px 0 40px;
+  flex-wrap: wrap;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px 20px;
+  text-align: center;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  min-width: 150px;
+  width: 150px;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(90deg, #2c3e50 0%, #3498db 100%);
+}
+
+.icon-wrapper {
+  width: 55px;
+  height: 55px;
+  background: linear-gradient(135deg, rgba(44, 62, 80, 0.05) 0%, rgba(52, 152, 219, 0.05) 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 15px;
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover .icon-wrapper {
+  background: linear-gradient(135deg, rgba(44, 62, 80, 0.1) 0%, rgba(52, 152, 219, 0.1) 100%);
+  transform: scale(1.1);
+}
+
+.icon-wrapper i {
+  font-size: 22px;
+  color: #2c3e50;
+}
+
+.stat-card .number {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #2c3e50;
+  margin: 10px 0;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover .number {
+  color: #3498db;
+}
+
+.stat-card .label {
+  color: #7f8c8d;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* Category tags */
+.category-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 15px 0;
+}
+
+.category-tag {
+  background: #e9ecef;
+  padding: 5px 15px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
 
+.category-tag:hover {
+  background: var(--secondary);
+  color: white;
+}
\ No newline at end of file
diff --git a/Todo list app/.DS_Store b/Todo list app/.DS_Store
new file mode 100644
index 000000000..3bc1fb2cb
Binary files /dev/null and b/Todo list app/.DS_Store differ
diff --git a/Todo list app/LICENSE b/Todo list app/LICENSE
new file mode 100644
index 000000000..272b26bcd
--- /dev/null
+++ b/Todo list app/LICENSE	
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Kshitiz Maurya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/Todo list app/Readme.md b/Todo list app/Readme.md
index 3508d4fd1..4108125bd 100644
--- a/Todo list app/Readme.md	
+++ b/Todo list app/Readme.md	
@@ -1,18 +1,171 @@
-<h1>To Do List that use local storage to stock task in the navigator</h1>
+# Professional Black Theme Todo List App
 
-<p>To Do list made using HTML, CSS and JS</p>
+A modern, feature-rich Todo List application with a sleek black theme, built with HTML, CSS, and JavaScript. This app uses localStorage to persist tasks between sessions and is perfect for Hacktoberfest contributions.
 
-### To Do List :
+![Todo App Preview](img/improveUIandUx.png)
 
-<p>This app allows you to make a list of events you want to do and you can delete it  if you want.</p>
+## Features
 
-<h3>Used Technologies</h3>
-<ul>
-  <li>HTML5</li>
-  <li>CSS3</li>
-  <li>JavaScript</li>
-</ul>
+- ✅ Add new tasks with priority levels (High, Medium, Low)
+- 📅 Set due dates for tasks
+- ✏️ Edit existing tasks with modal dialog
+- ❌ Delete tasks
+- ✔️ Mark tasks as complete/incomplete
+- 🔍 Search tasks
+- 🎯 Filter tasks (All, Active, Completed)
+- 📊 Task statistics
+- 🗑️ Clear all tasks
+- 📱 Fully responsive design
+- 💾 Local storage persistence
+- 🎨 Modern UI with smooth animations
+- 🎨 Sleek black theme with green accents
+- 📤 Export tasks to JSON
+- 📥 Import tasks from JSON
+- ⏰ Due date indicators (Overdue, Today, Future)
+- 🚩 Priority flags for visual organization
 
-### Screenshot :
+## Technologies Used
 
-<p>the screenshots are in the img folder</p>
\ No newline at end of file
+- HTML5
+- CSS3 (Flexbox, Animations, Responsive Design)
+- JavaScript (ES6+)
+- Font Awesome Icons
+- LocalStorage API
+
+## How to Use
+
+1. Clone or download this repository
+2. Open `index.html` in your web browser
+3. Start adding tasks to your todo list
+
+### Adding Tasks
+- Type your task in the input field
+- Select a priority level (Low, Medium, High)
+- Optionally set a due date
+- Click the "Add" button or press Enter
+
+### Managing Tasks
+- **Complete/Uncomplete**: Click the checkmark/undo button
+- **Edit**: Click the edit button (pencil icon) to open the edit modal
+- **Delete**: Click the trash button
+- **Filter**: Use the filter buttons to show All/Active/Completed tasks
+- **Search**: Use the search box to find specific tasks
+- **Clear All**: Click the "Clear All" button to remove all tasks
+- **Export**: Click the "Export" button to download your tasks as a JSON file
+- **Import**: Click the "Import" button to load tasks from a JSON file
+
+### Task Indicators
+- **Priority Flags**: 
+  - 🔴 Red flag for High priority
+  - 🟠 Orange flag for Medium priority
+  - 🟢 Green flag for Low priority
+- **Due Dates**:
+  - ⚠️ Exclamation icon for overdue tasks
+  - 📅 Calendar icon for future dates
+  - 📆 "Today" label for tasks due today
+
+## Screenshots
+
+![Todo App Screenshot](img/improveUIandUx.png)
+
+## Contributing to Hacktoberfest
+
+This project is part of Hacktoberfest! We welcome contributions from the community. Here's how you can contribute:
+
+### Getting Started
+1. Fork this repository
+2. Clone your forked repository to your local machine
+3. Create a new branch for your feature or bug fix
+4. Make your changes
+5. Commit your changes with a descriptive commit message
+6. Push your changes to your forked repository
+7. Create a Pull Request to the main repository
+
+### Ideas for Contributions
+
+We're looking for contributions in the following areas:
+
+1. **New Features**
+   - Add task categories/tags
+   - Implement drag and drop reordering
+   - Add recurring tasks
+   - Add task notes/descriptions
+   - Implement dark/light mode toggle
+   - Add task sharing capabilities
+   - Implement undo/redo functionality
+
+2. **UI/UX Improvements**
+   - Improve animations and transitions
+   - Add more visual feedback
+   - Enhance mobile responsiveness
+   - Add keyboard shortcuts
+   - Improve accessibility (ARIA labels, screen reader support)
+
+3. **Functionality Enhancements**
+   - Add export/import functionality in different formats (CSV, PDF)
+   - Add notifications/reminders
+   - Add sorting options (by date, priority, etc.)
+   - Add bulk actions (complete all, delete completed, etc.)
+
+4. **Code Quality**
+   - Refactor existing code for better performance
+   - Add more comprehensive error handling
+   - Improve code documentation
+   - Add unit tests
+   - Implement design patterns (MVC, Observer, etc.)
+
+5. **Documentation**
+   - Improve this README file
+   - Add user guides
+   - Create setup instructions
+   - Add contribution guidelines
+   - Create API documentation
+
+### Contribution Guidelines
+
+1. Ensure your code follows the existing style and conventions
+2. Write clear, descriptive commit messages
+3. Test your changes thoroughly
+4. Update documentation if needed
+5. Be respectful and constructive in all interactions
+
+### Pull Request Process
+
+1. Ensure any install or build dependencies are removed before the end of the layer when doing a build
+2. Update the README.md with details of changes to the interface, if applicable
+3. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent
+4. Your Pull Request will be reviewed by maintainers, who may request changes before merging
+
+## Project Structure
+
+```
+todo-list-app/
+├── index.html
+├── style.css
+├── app.js
+├── README.md
+├── LICENSE
+└── img/
+    └── screenshot.png
+```
+
+## License
+
+This project is open source and available .
+
+## Author
+
+[Kshitiz Maurya](https://github.com/kshitiz79)
+
+## Acknowledgements
+
+- [Font Awesome](https://fontawesome.com/) for icons
+- All contributors to this project
+
+## Support
+
+If you like this project, please give it a ⭐️ on GitHub!
+
+---
+
+Made with ❤️ for Hacktoberfest 2025
\ No newline at end of file
diff --git a/Todo list app/app.js b/Todo list app/app.js
index 46fa06ff6..a9e59b8dc 100644
--- a/Todo list app/app.js	
+++ b/Todo list app/app.js	
@@ -1,60 +1,352 @@
-// prendre tout les elements necessaires 
-const inputBox=document.querySelector('.inputField input');
-const addBtn=document.querySelector('.inputField button');
-const deleteAll=document.querySelector('.footer button');
-const todoList=document.querySelector('.todoList');
-
-inputBox.onkeyup=()=>{
-    let userData=inputBox.value; //getting user value
-    if(userData.trim() !=0 ){ //if user values aren't only spaces
-        addBtn.classList.add('active');
-    }else{
-        addBtn.classList.remove('active');
-    }
-}
-showTasks();
-// if user click on the add btn
-addBtn.onclick = ()=>{
-    let userData=inputBox.value; //getting user value
-    let getLocalStorage = localStorage.getItem('New todo'); //get the local storage 
-    if (getLocalStorage == null){
-        listArr=[]; //creating blanck array
-    }else{
-        listArr=JSON.parse(getLocalStorage); //transform json string into js object
-    }
-    listArr.push(userData);// push or add user data 
-    localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string   
+// DOM Elements
+const taskInput = document.getElementById('taskInput');
+const addTaskBtn = document.getElementById('addTaskBtn');
+const todoList = document.getElementById('todoList');
+const clearAllBtn = document.getElementById('clearAllBtn');
+const pendingNumber = document.querySelector('.pendingNumber');
+const totalTasks = document.querySelector('.totalTasks');
+const completedTasks = document.querySelector('.completedTasks');
+const filters = document.querySelectorAll('.filter');
+const searchInput = document.getElementById('searchInput');
+const prioritySelect = document.getElementById('prioritySelect');
+const dueDateInput = document.getElementById('dueDateInput');
+const exportBtn = document.getElementById('exportBtn');
+const importInput = document.getElementById('importInput');
+const importBtn = document.getElementById('importBtn');
+
+// Modal Elements
+const taskModal = document.getElementById('taskModal');
+const editTaskForm = document.getElementById('editTaskForm');
+const editTaskInput = document.getElementById('editTaskInput');
+const editPrioritySelect = document.getElementById('editPrioritySelect');
+const editDueDateInput = document.getElementById('editDueDateInput');
+const closeBtn = document.querySelector('.close');
+
+// Global variables
+let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
+let currentFilter = 'all';
+let editMode = false;
+let editTaskId = null;
+
+// Initialize the app
+document.addEventListener('DOMContentLoaded', () => {
+    showTasks();
+    updateStats();
+    
+    // Set focus on input field
+    taskInput.focus();
+    
+    // Set min date for due date input to today
+    const today = new Date().toISOString().split('T')[0];
+    dueDateInput.min = today;
+    editDueDateInput.min = today;
+});
+
+// Event Listeners
+taskInput.addEventListener('keyup', () => {
+    const userTask = taskInput.value.trim();
+    if(userTask) {
+        addTaskBtn.classList.add('active');
+    } else {
+        addTaskBtn.classList.remove('active');
+    }
+});
+
+addTaskBtn.addEventListener('click', addTask);
+taskInput.addEventListener('keypress', (e) => {
+    if(e.key === 'Enter' && addTaskBtn.classList.contains('active')) {
+        addTask();
+    }
+});
+
+clearAllBtn.addEventListener('click', clearAllTasks);
+exportBtn.addEventListener('click', exportTasks);
+importBtn.addEventListener('click', () => importInput.click());
+importInput.addEventListener('change', importTasks);
+
+filters.forEach(filter => {
+    filter.addEventListener('click', () => {
+        document.querySelector('.filter.active').classList.remove('active');
+        filter.classList.add('active');
+        currentFilter = filter.dataset.filter;
+        showTasks();
+    });
+});
+
+searchInput.addEventListener('input', showTasks);
+
+// Modal event listeners
+closeBtn.addEventListener('click', () => {
+    taskModal.style.display = 'none';
+});
+
+window.addEventListener('click', (e) => {
+    if (e.target === taskModal) {
+        taskModal.style.display = 'none';
+    }
+});
+
+editTaskForm.addEventListener('submit', updateTask);
+
+// Functions
+function addTask() {
+    const userTask = taskInput.value.trim();
+    const priority = prioritySelect.value;
+    const dueDate = dueDateInput.value;
+    
+    if(!userTask) return;
+    
+    if(editMode) {
+        // Update existing task
+        tasks = tasks.map(task => 
+            task.id === editTaskId ? {...task, text: userTask} : task
+        );
+        editMode = false;
+        editTaskId = null;
+        addTaskBtn.innerHTML = '<i class="fas fa-plus"></i> Add';
+    } else {
+        // Add new task
+        const task = {
+            id: Date.now(),
+            text: userTask,
+            completed: false,
+            timestamp: new Date().toISOString(),
+            priority: priority,
+            dueDate: dueDate || null,
+            category: 'general'
+        };
+        tasks.push(task);
+    }
+    
+    saveTasks();
     showTasks();
+    updateStats();
+    
+    // Reset input fields
+    taskInput.value = '';
+    prioritySelect.value = 'medium';
+    dueDateInput.value = '';
+    addTaskBtn.classList.remove('active');
+    taskInput.focus();
 }
-// this function add list inside ul
-function showTasks(){
-    let getLocalStorage = localStorage.getItem('New todo');
-    if (getLocalStorage == null){
-        listArr=[]; //creating blanck array
-    }else{
-        listArr=JSON.parse(getLocalStorage); //transform json string into js object
-    }
-    const pendingNumb=document.querySelector('.pendingNumber');
-    pendingNumb.textContent=listArr.length;
-    let newLiTag='';
-    listArr.forEach((element, index) => {
-        newLiTag +=`<li>${element} <button onclick="deleteTask(${index})";>Delete</button></li>`;
+
+function showTasks() {
+    const searchTerm = searchInput.value.toLowerCase();
+    
+    // Filter tasks based on current filter and search term
+    let filteredTasks = tasks.filter(task => {
+        const matchesSearch = task.text.toLowerCase().includes(searchTerm);
+        
+        if(currentFilter === 'active') {
+            return !task.completed && matchesSearch;
+        } else if(currentFilter === 'completed') {
+            return task.completed && matchesSearch;
+        }
+        return matchesSearch;
+    });
+    
+    if(filteredTasks.length === 0) {
+        todoList.innerHTML = `
+            <div class="empty-state">
+                <i class="fas fa-clipboard-list"></i>
+                <p>${searchTerm ? 'No matching tasks found' : 'No tasks found. Add a new task!'}</p>
+            </div>
+        `;
+        return;
+    }
+    
+    let newLiTag = '';
+    filteredTasks.forEach(task => {
+        // Format due date if exists
+        let dueDateDisplay = '';
+        if (task.dueDate) {
+            const dueDate = new Date(task.dueDate);
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            
+            // Check if due date is today or in the past
+            if (dueDate < today) {
+                dueDateDisplay = `<span class="due-date overdue"><i class="fas fa-exclamation-circle"></i> ${dueDate.toLocaleDateString()}</span>`;
+            } else if (dueDate.toDateString() === today.toDateString()) {
+                dueDateDisplay = `<span class="due-date today"><i class="fas fa-calendar-day"></i> Today</span>`;
+            } else {
+                dueDateDisplay = `<span class="due-date"><i class="fas fa-calendar"></i> ${dueDate.toLocaleDateString()}</span>`;
+            }
+        }
+        
+        // Priority indicator
+        let priorityDisplay = '';
+        if (task.priority) {
+            const priorityText = task.priority.charAt(0).toUpperCase() + task.priority.slice(1);
+            priorityDisplay = `<span class="priority priority-${task.priority}"><i class="fas fa-flag"></i> ${priorityText}</span>`;
+        }
+        
+        newLiTag += `
+            <li class="${task.completed ? 'completed' : ''} task-priority-${task.priority}" data-id="${task.id}">
+                <div class="task-content">
+                    <div class="task-text">${task.text}</div>
+                    <div class="task-meta">
+                        ${priorityDisplay}
+                        ${dueDateDisplay}
+                    </div>
+                </div>
+                <div class="task-actions">
+                    <button class="complete-btn" title="${task.completed ? 'Mark as incomplete' : 'Mark as complete'}">
+                        <i class="fas fa-${task.completed ? 'undo' : 'check'}"></i>
+                    </button>
+                    <button class="edit-btn" title="Edit task">
+                        <i class="fas fa-edit"></i>
+                    </button>
+                    <button class="delete-btn" title="Delete task">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            </li>
+        `;
+    });
+    
+    todoList.innerHTML = newLiTag;
+    
+    // Add event listeners to the new buttons
+    document.querySelectorAll('.complete-btn').forEach(btn => {
+        btn.addEventListener('click', toggleComplete);
     });
-    todoList.innerHTML=newLiTag; //adding new element li
-    inputBox.value="";
-}
-// delete task
-function deleteTask(index){
-    let getLocalStorage = localStorage.getItem('New todo');
-    listArr=JSON.parse(getLocalStorage);
-    listArr.splice(index, 1)// remove de partiicular index
-    localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string   
+    
+    document.querySelectorAll('.edit-btn').forEach(btn => {
+        btn.addEventListener('click', openEditModal);
+    });
+    
+    document.querySelectorAll('.delete-btn').forEach(btn => {
+        btn.addEventListener('click', deleteTask);
+    });
+}
+
+function toggleComplete(e) {
+    const taskId = parseInt(e.target.closest('li').dataset.id);
+    tasks = tasks.map(task => 
+        task.id === taskId ? {...task, completed: !task.completed} : task
+    );
+    saveTasks();
     showTasks();
+    updateStats();
 }
 
-deleteAll.onclick = ()=>{
-    listArr= []; //empty list array
-    //update the local storage
-    localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string   
+function openEditModal(e) {
+    const taskItem = e.target.closest('li');
+    const taskId = parseInt(taskItem.dataset.id);
+    const task = tasks.find(t => t.id === taskId);
+    
+    if(task) {
+        editTaskId = taskId;
+        editTaskInput.value = task.text;
+        editPrioritySelect.value = task.priority;
+        editDueDateInput.value = task.dueDate || '';
+        
+        taskModal.style.display = 'block';
+        editTaskInput.focus();
+    }
+}
+
+function updateTask(e) {
+    e.preventDefault();
+    
+    const updatedTask = {
+        text: editTaskInput.value.trim(),
+        priority: editPrioritySelect.value,
+        dueDate: editDueDateInput.value || null
+    };
+    
+    if(!updatedTask.text) return;
+    
+    tasks = tasks.map(task => 
+        task.id === editTaskId ? {...task, ...updatedTask} : task
+    );
+    
+    saveTasks();
     showTasks();
+    updateStats();
+    
+    // Close modal
+    taskModal.style.display = 'none';
+}
+
+function deleteTask(e) {
+    const taskId = parseInt(e.target.closest('li').dataset.id);
+    tasks = tasks.filter(task => task.id !== taskId);
+    saveTasks();
+    showTasks();
+    updateStats();
+}
+
+function clearAllTasks() {
+    if(tasks.length === 0) return;
+    
+    if(confirm('Are you sure you want to delete all tasks?')) {
+        tasks = [];
+        saveTasks();
+        showTasks();
+        updateStats();
+    }
+}
+
+function updateStats() {
+    const total = tasks.length;
+    const completed = tasks.filter(task => task.completed).length;
+    const pending = total - completed;
+    
+    totalTasks.textContent = total;
+    completedTasks.textContent = completed;
+    pendingNumber.textContent = pending;
+}
+
+function saveTasks() {
+    localStorage.setItem('tasks', JSON.stringify(tasks));
+}
+
+// Export tasks functionality
+function exportTasks() {
+    if (tasks.length === 0) {
+        alert('No tasks to export!');
+        return;
+    }
+    
+    const dataStr = JSON.stringify(tasks, null, 2);
+    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+    
+    const exportFileDefaultName = 'todo-tasks.json';
+    
+    const linkElement = document.createElement('a');
+    linkElement.setAttribute('href', dataUri);
+    linkElement.setAttribute('download', exportFileDefaultName);
+    linkElement.click();
+}
+
+// Import tasks functionality
+function importTasks(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+    
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        try {
+            const importedTasks = JSON.parse(e.target.result);
+            if (Array.isArray(importedTasks)) {
+                // Merge imported tasks with existing tasks
+                const combinedTasks = [...tasks, ...importedTasks];
+                tasks = combinedTasks;
+                saveTasks();
+                showTasks();
+                updateStats();
+                alert('Tasks imported successfully!');
+            } else {
+                alert('Invalid file format. Please import a valid JSON file.');
+            }
+        } catch (error) {
+            alert('Error parsing JSON file. Please check the file format.');
+        }
+    };
+    reader.readAsText(file);
+    
+    // Reset input to allow importing the same file again
+    importInput.value = '';
 }
\ No newline at end of file
diff --git a/Todo list app/img/.DS_Store b/Todo list app/img/.DS_Store
new file mode 100644
index 000000000..1cbf27e7d
Binary files /dev/null and b/Todo list app/img/.DS_Store differ
diff --git a/Todo list app/img/improveUIandUx.png b/Todo list app/img/improveUIandUx.png
new file mode 100644
index 000000000..b5e521c5f
Binary files /dev/null and b/Todo list app/img/improveUIandUx.png differ
diff --git a/Todo list app/index.html b/Todo list app/index.html
index 2e7eb94c0..4d8d5014b 100644
--- a/Todo list app/index.html	
+++ b/Todo list app/index.html	
@@ -3,30 +3,102 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-
+    <title>Professional Black Todo App</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
-    <div class="wrapper">
-        <header><h1>Todo App</h1></header>
-        <div class="inputField">
-            <input type="text" name="" placeholder="Add your new todo" id="">
-            <button>Add</button>
-        </div>
-        <ul class="todoList">
-            
-            
-            
-        </ul>
-        <div class="footer">
-            <span>You have <span class="pendingNumber"></span> tasks </span>
-            <button>Clear All</button>
+    <div class="container">
+        <div class="wrapper">
+            <header>
+                <h1><i class="fas fa-tasks"></i> Todo App</h1>
+                <p>Organize your tasks efficiently</p>
+            </header>
+            <div class="inputField">
+                <input type="text" placeholder="Add a new task..." id="taskInput">
+                <button id="addTaskBtn"><i class="fas fa-plus"></i> Add</button>
+            </div>
+            <div class="task-options">
+                <div class="priority-selector">
+                    <label>Priority:</label>
+                    <select id="prioritySelect">
+                        <option value="low">Low</option>
+                        <option value="medium" selected>Medium</option>
+                        <option value="high">High</option>
+                    </select>
+                </div>
+                <div class="due-date-selector">
+                    <label>Due Date:</label>
+                    <input type="date" id="dueDateInput">
+                </div>
+            </div>
+            <div class="controls">
+                <div class="filters">
+                    <span class="filter active" data-filter="all">All</span>
+                    <span class="filter" data-filter="active">Active</span>
+                    <span class="filter" data-filter="completed">Completed</span>
+                </div>
+                <div class="search-box">
+                    <input type="text" placeholder="Search tasks..." id="searchInput">
+                    <i class="fas fa-search"></i>
+                </div>
+            </div>
+            <ul class="todoList" id="todoList">
+                <!-- Tasks will be added here dynamically -->
+            </ul>
+            <div class="footer">
+                <div class="stats">
+                    <span>Total: <span class="totalTasks">0</span></span>
+                    <span>Completed: <span class="completedTasks">0</span></span>
+                    <span>Pending: <span class="pendingNumber">0</span></span>
+                </div>
+                <div class="actions">
+                    <button id="exportBtn" title="Export tasks"><i class="fas fa-file-export"></i> Export</button>
+                    <button id="clearAllBtn" title="Clear all tasks"><i class="fas fa-trash-alt"></i> Clear All</button>
+                </div>
+            </div>
+            <div class="import-section">
+                <input type="file" id="importInput" accept=".json" style="display: none;">
+                <button id="importBtn"><i class="fas fa-file-import"></i> Import Tasks</button>
+            </div>
         </div>
     </div>
 
-
+    <!-- Task Edit Modal -->
+    <div id="taskModal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h2>Edit Task</h2>
+            <form id="editTaskForm">
+                <div class="form-group">
+                    <label for="editTaskInput">Task:</label>
+                    <input type="text" id="editTaskInput" required>
+                </div>
+                <div class="form-group">
+                    <label for="editPrioritySelect">Priority:</label>
+                    <select id="editPrioritySelect">
+                        <option value="low">Low</option>
+                        <option value="medium">Medium</option>
+                        <option value="high">High</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="editDueDateInput">Due Date:</label>
+                    <input type="date" id="editDueDateInput">
+                </div>
+                <button type="submit">Update Task</button>
+            </form>
+        </div>
+    </div>
 
     <script src="app.js"></script>
+    <script>
+        // Additional event listeners for new functionality
+        document.getElementById('exportBtn').addEventListener('click', exportTasks);
+        document.getElementById('importBtn').addEventListener('click', () => {
+            document.getElementById('importInput').click();
+        });
+        document.getElementById('importInput').addEventListener('change', importTasks);
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Todo list app/style.css b/Todo list app/style.css
index 564d309af..e84f903c6 100644
--- a/Todo list app/style.css	
+++ b/Todo list app/style.css	
@@ -4,107 +4,570 @@
     box-sizing: border-box;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
+
 body{
-    height: 100vh;
-    background: linear-gradient(to bottom, #68EACC 0%, #497BEB 100%);
+    min-height: 100vh;
+    background: linear-gradient(135deg, #000000 0%, #333333 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
 }
-.wrapper{
-    margin: 120px auto;
-    max-width: 400px;
+
+.container {
     width: 100%;
-    background: white;
-    border-radius: 5px;
-    padding: 25px;
+    max-width: 500px;
+}
+
+.wrapper{
+    background: #1a1a1a;
+    border-radius: 15px;
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
+    padding: 30px;
+    transition: transform 0.3s ease;
+    border: 1px solid #333;
+}
+
+.wrapper:hover {
+    transform: translateY(-5px);
 }
+
 .wrapper header{
-    font-size: 17px;
-    
+    text-align: center;
+    margin-bottom: 25px;
+}
+
+.wrapper header h1{
+    color: #fff;
+    font-size: 28px;
+    margin-bottom: 5px;
 }
+
+.wrapper header h1 i {
+    color: #4CAF50;
+}
+
+.wrapper header p{
+    color: #aaa;
+    font-size: 14px;
+}
+
 .wrapper .inputField{
     display: flex;
-    height: 45px;
+    height: 55px;
     width: 100%;
-    margin: 20px 0;
+    margin-bottom: 20px;
 }
+
 .inputField input{
     width: 85%;
     height: 100%;
-    border: 1px solid #ccc;
-    font-size: 17px ;
-    border-radius: 3px ;
-    padding-left: 15px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: #fff;
+    font-size: 17px;
+    border-radius: 8px 0 0 8px;
+    padding: 0 20px;
     outline: none;
+    transition: border-color 0.3s;
+}
+
+.inputField input::placeholder {
+    color: #666;
+}
+
+.inputField input:focus{
+    border-color: #4CAF50;
 }
+
 .inputField button{
-    background: rgb(46, 46, 218);
+    width: 15%;
+    height: 100%;
+    background: #4CAF50;
     color: white;
     outline: none;
     border: none;
-    padding-left: 10px;
-    padding-right: 10px;
-    border-radius: 3px;
+    padding: 0 15px;
+    border-radius: 0 8px 8px 0;
     cursor: pointer;
     font-weight: bold;
-    margin-left: 5px;
+    transition: background 0.3s;
     opacity: 0.6;
-    pointer-events: none;
+    /* pointer-events: none; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
+
 .inputField button.active{
     opacity: 1;
-    pointer-events: auto;
+    /* pointer-events: auto; */
+}
+
+.inputField button:hover.active{
+    background: #45a049;
+}
+
+.task-options {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 15px;
+    flex-wrap: wrap;
+}
+
+.priority-selector, .due-date-selector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #aaa;
+    font-size: 14px;
+}
+
+.priority-selector select, .due-date-selector input {
+    background: #2a2a2a;
+    border: 1px solid #333;
+    color: #fff;
+    padding: 5px 10px;
+    border-radius: 5px;
+    outline: none;
+}
+
+.priority-selector select:focus, .due-date-selector input:focus {
+    border-color: #4CAF50;
+}
+
+.controls {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.filters {
+    display: flex;
+    gap: 10px;
+}
+
+.filter {
+    padding: 5px 12px;
+    background: #2a2a2a;
+    color: #aaa;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s;
+    border: 1px solid #333;
+}
+
+.filter.active, .filter:hover {
+    background: #4CAF50;
+    color: white;
+    border-color: #4CAF50;
+}
+
+.search-box {
+    position: relative;
+}
+
+.search-box input {
+    padding: 8px 15px 8px 35px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: #fff;
+    border-radius: 20px;
+    outline: none;
+    font-size: 14px;
+    transition: border-color 0.3s;
+    width: 100%;
+}
+
+.search-box input::placeholder {
+    color: #666;
+}
+
+.search-box input:focus {
+    border-color: #4CAF50;
 }
+
+.search-box i {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #666;
+}
+
 .wrapper .todoList{
-    max-height: 250px;
-    overflow: auto;
+    max-height: 300px;
+    overflow-y: auto;
+    margin-bottom: 20px;
+    padding-right: 5px;
+}
+
+/* Webkit scrollbar styles */
+.todoList::-webkit-scrollbar {
+    width: 6px;
 }
+
+.todoList::-webkit-scrollbar-track {
+    background: #2a2a2a;
+}
+
+.todoList::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 3px;
+}
+
+/* Firefox scrollbar styles */
+.todoList {
+    scrollbar-width: thin;
+    scrollbar-color: #444 #2a2a2a;
+}
+
 .todoList li{
     list-style: none;
-    height: 45px;
-    line-height: 45px;
+    min-height: 55px;
     position: relative;
-    background:  #f2f2f2;
-    border-radius: 3px;
-    margin-bottom: 8px;
-    padding: 0 15px;
-    cursor: default;
+    background: #2a2a2a;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    padding: 15px;
+    cursor: pointer;
     overflow: hidden;
+    display: flex;
+    align-items: center;
+    transition: all 0.3s;
+    border: 1px solid #333;
+    color: #fff;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.todoList li:hover {
+    background: #333;
+    transform: translateX(5px);
+}
+
+.todoList li.completed {
+    background: #2a3a2a;
+}
+
+.todoList li.completed .task-text {
+    text-decoration: line-through;
+    color: #777;
+}
+
+.task-content {
+    flex: 1;
+}
+
+.task-text {
+    padding-right: 10px;
+    word-break: break-word;
+    margin-bottom: 5px;
+    overflow-wrap: break-word;
 }
+
+.task-meta {
+    display: flex;
+    gap: 15px;
+    font-size: 12px;
+    color: #888;
+}
+
+.task-meta .priority, .task-meta .due-date {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.todoList li .task-actions {
+    display: flex;
+    gap: 10px;
+}
+
 .todoList li button{
-    position: absolute;
-    right: -55px;
-    background: rgb(218, 46, 46);
-    color: white;
+    background: transparent;
+    color: #aaa;
     outline: none;
     border: none;
-    padding-left: 10px;
-    padding-right: 10px;
-    border-radius: 3px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
     cursor: pointer;
-    font-weight: bold;
-    margin-left: 5px;
-    height: 45px;
-    transition: all 300ms ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
 }
-.todoList li:hover button{
-    right: 0px;
+
+.todoList li .edit-btn:hover{
+    background: #2196F3;
+    color: white;
 }
+
+.todoList li .delete-btn:hover{
+    background: #f44336;
+    color: white;
+}
+
+.todoList li .complete-btn:hover{
+    background: #4CAF50;
+    color: white;
+}
+
 .wrapper .footer{
     display: flex;
     width: 100%;
     align-items: center;
-    margin-top: 20px;
     justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
+    border-top: 1px solid #333;
+    padding-top: 20px;
+}
+
+.stats {
+    display: flex;
+    gap: 15px;
+    font-size: 14px;
+    color: #aaa;
 }
+
+.stats span {
+    background: #2a2a2a;
+    padding: 5px 10px;
+    border-radius: 15px;
+    border: 1px solid #333;
+}
+
+.actions {
+    display: flex;
+    gap: 10px;
+}
+
 .footer button{
-    background: rgb(46, 46, 218);
+    background: #f44336;
     color: white;
     outline: none;
     border: none;
-    padding-left: 10px;
-    padding-right: 10px;
-    border-radius: 3px;
+    padding: 10px 20px;
+    border-radius: 8px;
     cursor: pointer;
     font-weight: bold;
-    margin-left: 5px;
-    height: 30px;
+    transition: background 0.3s;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.footer button:hover{
+    background: #d32f2f;
+}
+
+#exportBtn {
+    background: #2196F3;
+}
+
+#exportBtn:hover {
+    background: #0b7dda;
+}
+
+.import-section {
+    margin-top: 15px;
+    text-align: center;
+}
+
+#importBtn {
+    background: #9c27b0;
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background 0.3s;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    border: none;
+    color: white;
+}
+
+#importBtn:hover {
+    background: #7b1fa2;
+}
+
+/* Empty state */
+.empty-state {
+    text-align: center;
+    padding: 30px 0;
+    color: #666;
+}
+
+.empty-state i {
+    font-size: 48px;
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.empty-state p {
+    font-size: 16px;
+}
+
+/* Responsive design */
+@media (max-width: 500px) {
+    .wrapper {
+        padding: 20px;
+    }
+    
+    .controls {
+        flex-direction: column;
+    }
+    
+    .wrapper header h1 {
+        font-size: 24px;
+    }
+    
+    .inputField {
+        height: 50px;
+    }
+    
+    .stats {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .task-options {
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .actions {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+}
+
+/* Dark theme improvements */
+.task-priority-high {
+    border-left: 4px solid #f44336;
+}
+
+.task-priority-medium {
+    border-left: 4px solid #ff9800;
+}
+
+.task-priority-low {
+    border-left: 4px solid #4CAF50;
+}
+
+.priority-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.priority-high {
+    background: #f44336;
+}
+
+.priority-medium {
+    background: #ff9800;
+}
+
+.priority-low {
+    background: #4CAF50;
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.modal-content {
+    background-color: #1a1a1a;
+    margin: 10% auto;
+    padding: 30px;
+    border: 1px solid #333;
+    border-radius: 10px;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+    color: #fff;
+}
+
+.modal-content h2 {
+    margin-top: 0;
+    color: #4CAF50;
+    border-bottom: 1px solid #333;
+    padding-bottom: 15px;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: #fff;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    color: #aaa;
+}
+
+.form-group input, .form-group select {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #333;
+    border-radius: 5px;
+    background: #2a2a2a;
+    color: #fff;
+    font-size: 16px;
+}
+
+.form-group input:focus, .form-group select:focus {
+    outline: none;
+    border-color: #4CAF50;
+}
+
+.form-group button {
+    width: 100%;
+    padding: 12px;
+    background: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background 0.3s;
+}
+
+.form-group button:hover {
+    background: #45a049;
+}
+
+/* Animation for new tasks */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
\ No newline at end of file
diff --git a/Youtube-Clone/index.html b/Youtube-Clone/index.html
deleted file mode 100644
index f72ca1db4..000000000
--- a/Youtube-Clone/index.html
+++ /dev/null
@@ -1,764 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>YouTube</title>
-	<link rel="stylesheet" type="text/css" href="./css/styles.css">
-	<link rel="icon" type="image/icon" href="Resources/favicon_32x32.png" sizes="32x32">
-	<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
-	<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport"  />
-</head>
-<body>
-
-	<!--***********START OF HEADER **********-->
-	<header class = "header-container stick">
-		<div class = "container">
-			<div class = "guide-button-box">
-				<span class="iconify hamburger" data-icon="ci:hamburger" data-inline="false"></span>
-			</div>
-			<div class = "logo">	
-				<img class = "logo-img" src = "Resources/youtube_logo.webp">
-				<span class = "country-code">IN</span>
-			</div>
-		</div>
-		<div class = "search-container">
-			<input type="text" placeholder="Search" name="search">
-      		<button type="submit">
-      			<span class="iconify search-btn" data-icon="ant-design:search-outlined" data-inline="false"></span>
-      		</button>
-		</div>
-		<div class = "user-d">
-			<button class = "user-btn">
-				<span class="iconify" data-icon="bx:bxs-video-plus" data-inline="false"></span>
-			</button>
-			<button class = "user-btn">
-				<span class="iconify" data-icon="gg:menu-grid-r" data-inline="false"></span>
-			</button>
-			<button class = "user-btn">
-				<span class="iconify" data-icon="fa-solid:bell" data-inline="false"></span>
-			</button>
-			<button>
-				<span class="iconify user" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-			</button>
-		</div>
-	</header>
-
-	<!--**********END OF HEADER**********-->
-
-	<!--**********START OF SIDEBAR**********-->
-
-		<div class = "sidebar">
-			<div class = "sidebar-categories">
-				<div class = "sidebar-category selected">
-					<span class="iconify user-icon selected-img" data-icon="ci:home-alt-fill" data-inline="false"></span>
-					<span>Home</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ic:baseline-explore" data-inline="false"></span>
-					<span>Explore</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ic:baseline-subscriptions" data-inline="false"></span>
-					<span>Subscriptions</span>
-				</div>
-			</div>
-			
-			<hr/>
-
-			<div class = "sidebar-categories">
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ic:baseline-video-library" data-inline="false"></span>
-					<span>Library</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ic:baseline-history" data-inline="false"></span>
-					<span>History</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ant-design:play-square-outlined" data-inline="false"></span>
-					<span>Your videos</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ic:baseline-watch-later" data-inline="false"></span>
-					<span>Watch later</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="bx:bxs-like" data-inline="false"></span>
-					<span>Liked videos</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ic:outline-expand-more" data-inline="false"></span>
-					<span>Show more</span>
-				</div>
-			</div>
-
-			<hr/>
-
-			<div class = "subscription-categories">
-				<span class = "head-text">
-					SUBSCRIPTIONS
-				</span>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-					<span>Channel 1</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-					<span>Channel 2</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-					<span>Channel 3</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-					<span>Channel 4</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-					<span>Channel 5</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-					<span>Channel 6</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-					<span>Channel 7</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify" data-icon="ic:outline-expand-more" data-inline="false"></span>
-					<span>Show 40 more</span>
-				</div>
-			</div>
-
-			<hr/>
-
-			<div class = "subscription-categories">
-				<span class = "head-text">
-					MORE FROM YOUTUBE
-				</span>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ant-design:youtube-filled" data-inline="false"></span>
-					<span>YouTube Premium</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ic:sharp-local-movies" data-inline="false"></span>
-					<span>Movies</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="simple-icons:youtubegaming" data-inline="false"></span>
-					<span>Gaming</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="fluent:live-24-filled" data-inline="false"></span>
-					<span>Live</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="icon-park-outline:hanger-two" data-inline="false"></span>
-					<span>Fashion & Beauty</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ant-design:bulb-filled" data-inline="false"></span>
-					<span>Learing</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="icomoon-free:trophy" data-inline="false"></span>
-					<span>Sports</span>
-				</div>
-			</div>
-
-			<hr/>
-
-			<div class = "sidebar-categories">
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="fluent:settings-28-filled" data-inline="false"></span>
-					<span>Settings</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ci:flag-fill" data-inline="false"></span>
-					<span>Report history</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ci:help-circle" data-inline="false"></span>				
-					<span>Help</span>
-				</div>
-				<div class = "sidebar-category">
-					<span class="iconify user-icon" data-icon="ic:baseline-feedback" data-inline="false"></span>
-					<span>Send Feedback</span>
-				</div>
-			</div>
-
-			<hr/>
-
-			<div class = "sidebar-bottom-info">
-				<a href="/">About</a>
-				<a href="/">Press</a>
-				<a href="/">Copyright</a><br>
-				<a href="/">Contact us</a>
-				<a href="/">Creators</a><br>
-				<a href="/">Advertise</a>
-				<a href="/">Developers</a><br><br>
-				<a href="/">Terms</a>
-				<a href="/">Privacy</a>
-				<a href="/">Policy & Safety</a><br>
-				<a href="/">How YouTube works</a><br>
-				<a href="/">Test new features</a><br><br>
-				<span>© 2021 Google LLC</span>
-			</div>
-
-			<div class = "sidebar-category-sml">
-				<span class="iconify user-icon selected-img" data-icon="ci:home-alt-fill" data-inline="false"></span>
-				<span>Home</span>
-			</div>
-			<div class = "sidebar-category-sml">
-				<span class="iconify user-icon" data-icon="ic:baseline-explore" data-inline="false"></span>
-				<span>Explore</span>
-			</div>
-			<div class = "sidebar-category-sml">
-				<span class="iconify user-icon" data-icon="ic:baseline-subscriptions" data-inline="false"></span>
-				<span>Subscriptions</span>
-			</div>
-			<div class = "sidebar-category-sml">
-				<span class="iconify user-icon" data-icon="ic:baseline-video-library" data-inline="false"></span>
-				<span>Library</span>
-			</div>
-		</div>
-
-	<!--**********END OF SIDEBAR**********-->
-
-	<!--**********START OF HEADER NAVBAR**********-->
-
-	<div class = "header-navbar">
-		<button class = "navbar-element first active">
-			All
-		</button>
-		<button class = "navbar-element">
-			Music
-		</button>
-		<button class = "navbar-element">
-			Wildlife
-		</button>
-		<button class = "navbar-element">
-			Education
-		</button>
-		<button class = "navbar-element">
-			Recently Uploaded
-		</button>
-		<button class = "navbar-element">
-			Live
-		</button>
-		<button class = "navbar-element">
-			Tamil
-		</button>
-		<button class = "navbar-element">
-			T-Series
-		</button>
-		<button class = "navbar-element">
-			Cricket
-		</button>
-		<button class = "navbar-element">
-			Sports
-		</button>
-		<button class = "navbar-element">
-			Eating
-		</button>
-		<button class = "navbar-element">
-			Laughter
-		</button>
-		<button class = "navbar-element">
-			Music
-		</button>
-		<button class = "navbar-element">
-			Wildlife
-		</button>
-		<button class = "navbar-element">
-			Education
-		</button>
-		<button class = "navbar-element">
-			Recently Uploaded
-		</button>
-		<button class = "navbar-element">
-			Live
-		</button>
-		<button class = "navbar-element">
-			Tamil
-		</button>
-	</div>
-
-	<!--**********END OF HEADER NAVBAR**********-->
-
-	<!--**********START OF BOTTOM NAVBAR**********-->
-
-	<div class = "btm-nav">
-		<div>
-			<button class = "btm-btn">
-				<span class="iconify user-icon selected-img" data-icon="ci:home-alt-fill" data-inline="false"></span>
-			</button>
-			<span>Home</span>
-		</div>	
-		<div>
-			<button class = "btm-btn">
-				<span class="iconify user-icon" data-icon="ic:round-local-fire-department" data-inline="false"></span>
-			</button>
-			<span>Trending</span>
-		</div>		
-		<div>
-			<button class = "btm-btn">
-				<span class="iconify user-icon" data-icon="ic:baseline-subscriptions" data-inline="false"></span>
-			</button>
-			<span>Subscriptions</span>
-		</div>		
-		<div>
-			<button class = "btm-btn">
-				<span class="iconify user-icon" data-icon="ic:baseline-video-library" data-inline="false"></span>
-			</button>
-			<span>Library</span>
-		</div>			
-	</div>
-
-	<!--**********END OF BOTTOM NAVBAR**********-->
-
-	<!--**********START OF MAIN CONTENT**********-->
-
-	<div class = "main-content">
-		<div class = "videos">
-			<div class = "videos-container">
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>
-
-				<div class = "video">
-					<div class = "video-thumbnail">
-						<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt = "" />
-					</div>					
-
-					<div class = "video-details">
-						<div class = "author">
-							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
-						</div>
-
-						<div class = "title">
-							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-							<a href="">Channel 1</a>
-							<span>10M views • 3 Months Ago</span>
-						</div>
-					</div>
-				</div>				
-			</div>
-		</div>
-	</div>
-
-	<!--**********END OF MAIN CONTENT**********-->
-	<script type="text/javascript" src = "script.js"></script>
-</body>
-</html>
\ No newline at end of file