diff --git a/html/html_acessibility/index.html b/html/html_acessibility/index.html
index 345026d..86d3748 100644
--- a/html/html_acessibility/index.html
+++ b/html/html_acessibility/index.html
@@ -88,7 +88,7 @@
     <main class="main">
         <div class="navigation-link">
             <a href="../html_math/"><i class="bi bi-chevron-double-left"></i> Previous</a>
-            <a href="../html_intro/">Next <i class="bi bi-chevron-double-right"></i></a>
+            <a href="../html_media/">Next <i class="bi bi-chevron-double-right"></i></a>
         </div>
 
         <div class="htmlpost__box">
@@ -144,7 +144,7 @@ <h2>Read the WCAG and learn best practices</h2>
 
         <div class="navigation-link">
             <a href="../html_math/"><i class="bi bi-chevron-double-left"></i> Previous</a>
-            <a href="../html_intro/">Next <i class="bi bi-chevron-double-right"></i></a>
+            <a href="../html_media/">Next <i class="bi bi-chevron-double-right"></i></a>
         </div>
     </main>
 
diff --git a/html/html_media/404.html b/html/html_media/404.html
new file mode 100644
index 0000000..6ce8c99
--- /dev/null
+++ b/html/html_media/404.html
@@ -0,0 +1,83 @@
+<title>html.org.in | Page Not Found</title><!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>html.org.in | Page Not Found</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="../../favicon_io/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../../favicon_io/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="../../favicon_io/favicon-16x16.png">
+    <link rel="manifest" href="../../favicon_io/site.webmanifest">
+    <style>
+        .page_404 {
+            padding: 40px 0;
+            background: #fff;
+            font-family: 'Arvo', serif;
+        }
+
+        .page_404 img {
+            width: 100%;
+        }
+
+        .four_zero_four_bg {
+
+            background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
+            height: 400px;
+            background-position: center;
+        }
+
+        .four_zero_four_bg h1 {
+            font-size: 80px;
+        }
+
+        .four_zero_four_bg h3 {
+            font-size: 80px;
+        }
+
+        .link_404 {
+            color: #fff !important;
+            padding: 10px 20px;
+            background: #39ac31;
+            margin: 20px 0;
+            display: inline-block;
+        }
+
+        .contant_box_404 {
+            margin-top: -50px;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="page_404">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-12 ">
+                    <div class="col-sm-10 col-sm-offset-1  text-center">
+                        <div class="four_zero_four_bg">
+                            <h1 class="text-center ">404</h1>
+
+
+                        </div>
+
+                        <div class="contant_box_404">
+                            <h3 class="h2">
+                                Look like you're lost
+                            </h3>
+
+                            <p>the page you are looking for not avaible!</p>
+
+                            <a href="./" class="link_404">Go to Home</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/html/html_media/index.html b/html/html_media/index.html
new file mode 100644
index 0000000..0af9305
--- /dev/null
+++ b/html/html_media/index.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="generator" content="Dsky Solution v1.0.0" />
+    <meta property="og:title" content="HTML Elements | A open source project 💖" />
+    <meta property="og:locale" content="en_IN" />
+    <meta name="description" content="HTML.ORG.IN A free platform for html learning " />
+    <meta property="og:description" content="HTML.ORG.IN A free platform for html learning " />
+    <link rel="canonical" href="https://html.org.in/" />
+    <meta property="og:url" content="https://html.org.in/" />
+    <meta property="og:site_name" content="html.org.in for html learner" />
+    <meta property="og:image" content="https://www.html.org.in/Website/assets/image/social-card.png" />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:image" content="https://www.html.org.in/Website/assets/image/social-card.png" />
+    <meta property="twitter:title" content="html.org.in for html learner" />
+    <meta name="twitter:site" content="@diptenusarkar" />
+
+    <title>HTML Elements | A open source project 💖</title>
+
+    <!-- !Stylesheet -->
+    <link rel="stylesheet" href="../../Website/Style/web/main_post_d485f_v1.css">
+    <link rel="stylesheet" href="../../Website/Style/vender/css/prism.css">
+
+    <!-- media query screen  -->
+    <link rel="stylesheet" type="text/css" media="(max-width: 320px)" href="../../Website/media_query/media320.css">
+    <link rel="stylesheet" type="text/css" media="(max-width: 375px)" href="../../Website/media_query/media375.css">
+    <link rel="stylesheet" type="text/css" media="(max-width: 425px)" href="../../Website/media_query/media425.css">
+    <link rel="stylesheet" type="text/css" media="(min-width:426px) and (max-width: 768px)"
+        href="../../Website/media_query/media768.css">
+    <link rel="stylesheet" type="text/css" media="(min-width: 768px)" href="../../Website/media_query/media1000.css">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="../../favicon_io/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../../favicon_io/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="../../favicon_io/favicon-16x16.png">
+    <link rel="manifest" href="../../favicon_io/site.webmanifest">
+</head>
+
+<body>
+    <header class="header">
+        <nav class="menu-wrap nav">
+            <a href="/" class="logo__top" style="color:#ff6d00;"><i class="bi bi-filetype-html"></i> HTML.ORG.IN </a>
+            <input type="checkbox" class="toggler">
+
+            <div class="hamburger">
+                <div></div>
+            </div>
+            <div class="menu">
+                <div>
+                    <div>
+                        <ol>
+                            <li>
+                                <div include-html="../../include/navlink.html" id="navlink_file"></div>
+                            </li>
+                            <li>
+                                <div class="theme__box">
+                                    <select id="themeSwitcher">
+                                        <option value="">Select One</option>
+                                        <option value="theme-dark">Dark</option>
+                                        <option value="theme-light">Light</option>
+                                        <option value="theme-gray">Gray</option>
+                                        <option value="theme-yellow">Yellow</option>
+                                        <option value="theme-blue">Blue</option>
+                                        <option value="theme-purple">Purple</option>
+                                    </select>
+                                </div>
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <!-- <div class="theme__box">
+        <select id="themeSwitcher">
+            <option value="">Select One</option>
+            <option value="theme-dark">Dark</option>
+            <option value="theme-light">Light</option>
+        </select>
+    </div> -->
+
+    <main class="main">
+        <div class="navigation-link">
+            <a href="../html_acessibility/"><i class="bi bi-chevron-double-left"></i> Previous</a>
+            <a href="../html_intro/">Next <i class="bi bi-chevron-double-right"></i></a>
+        </div>
+
+        <div class="htmlpost__box">
+            <h1>Media &#128204;</h1>
+            <hr>
+            <p class="htmlpost__hr-p">
+                Media elements in HTML enrich web content by allowing the integration of audio, video, and external content. They enhance user engagement and interactivity.
+            </p>
+            <hr>
+            <h2>Audio (Using &lt;audio&gt;)</h2>
+            <p>
+                The &lt;audio&gt; element enables you to embed audio content like music or podcasts. You can specify the audio source using the "src" attribute and customize playback controls.
+                <br>
+                Example:
+                <pre class="language-html">
+<code>
+        &lt;audio src="music.mp3" controls&gt;&lt;/audio&gt;
+        </code>
+                </pre>
+            </p>
+            <h2>Video (Using &lt;video&gt;)</h2>
+            <p>
+                The &lt;video&gt; element seamlessly embeds videos into webpages. It supports various formats (e.g., MP4, WebM) for broader compatibility. Customize playback controls, dimensions, and multiple source formats.
+                <br>
+                Example:
+                <pre class="language-html">
+<code>
+        &lt;video width="640" height="360" controls&gt;
+            &lt;source src="video.mp4" type="video/mp4"&gt;
+            &lt;source src="video.webm" type="video/webm"&gt;
+            Your browser does not support the video tag.
+        &lt;/video&gt;
+        </code>
+                </pre>
+            </p>
+            <h2>Embedding YouTube Videos</h2>
+            <p>
+                Use an &lt;iframe&gt; element with the YouTube video URL to easily embed and play YouTube videos on your website.
+                <br>
+                Example:
+                <pre class="language-html">
+<code>
+        &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
+</code>
+                </pre>
+            </p>
+            <h2>Plugins</h2>
+            <p>
+                Plugins extend the functionality of web browsers. Common examples include Flash and Java applets, although their usage has decreased over time due to security concerns and evolving web standards.
+            </p>
+            <h2>Enhancing User Experience</h2>
+            <p>
+                HTML media elements and plugins empower web developers to create interactive, multimedia-rich experiences, making web content more engaging and appealing to users.
+            </p>
+        </div>
+        
+        
+        
+
+        <div class="navigation-link">
+            <a href="../html_acessibility/"><i class="bi bi-chevron-double-left"></i> Previous</a>
+            <a href="../html_intro/">Next <i class="bi bi-chevron-double-right"></i></a>
+        </div>
+    </main>
+
+    <div include-html="../../include/post__footer.html" id="footer_file"></div>
+    <script src="../../Website/JavaScript/jquery-3.6.0.min.js"></script>
+    <script src="../../Website/JavaScript/include-html.min.js"></script>
+
+    <script src="../../Website/Style/vender/js/prism.js"></script>
+    <script src="../../Website/app.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 66c32a5..972cb6b 100644
--- a/index.html
+++ b/index.html
@@ -372,7 +372,8 @@ <h1>HTML Classes</h1>
                     <h1>HTML Block And Inline Elements</h1>
                     <p>
                         We are going to talk about the different block and inline elements in html.
-                        <a href="/html/html_block_and_inline_elements/index.html">Learn More <i class="bi bi-book"></i></a>
+                        <a href="/html/html_block_and_inline_elements/index.html">Learn More <i
+                                class="bi bi-book"></i></a>
                     </p>
                 </div>
             </div>
@@ -468,11 +469,24 @@ <h1>HTML MathML</h1>
                     <h1>HTML Acessibility</h1>
                     <p>
                         Having accessible websites is crucial for inclusivity, legal compliance, a broader audience and
-                        improved user experience
+                        improves user experience
                         <a href="/html/html_acessibility/">Learn More <i class="bi bi-book"></i></a>
                     </p>
                 </div>
             </div>
+            <div class="main__html-componentBox">
+                <div class="main__html-componentBox-logobox">
+                    <img src="/Website/assets/svg/icons8-html-5.svg" alt="html logo">
+                </div>
+                <div class="main__html-componentBox-textBox">
+                    <h1>HTML Media</h1>
+                    <p>
+                        HTML media elements, like audio and video, allow you to embed and play audio or video files
+                        on webpages, enhancing the multimedia experience for users.
+                        <a href="/html/html_media/">Learn More <i class="bi bi-book"></i></a>
+                    </p>
+                </div>
+            </div>
         </section>
     </main>
 
