diff --git a/.DS_Store b/.DS_Store
index 8fb6244..13a8c04 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/carchived.html b/carchived.html
new file mode 100644
index 0000000..1c8c79c
--- /dev/null
+++ b/carchived.html
@@ -0,0 +1,375 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Miguel Divo</title>
+        <link rel="icon" href="index_resources/tab-logo3.png" type="image/x-icon">
+
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+    </head>
+
+
+    <body>
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk4vzc/dW8b5tv6v0w7pCqF5/2z2PpXhpz3q5t5z" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
+
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
+
+
+        
+
+
+        <nav class="navbar sticky-top shadow-sm" id="navbar" style="background-color: rgb(255, 255, 255);">
+            <div class="container-fluid">
+                <div class="row align-items-center col-12 d-flex">
+                    <div id="logoname" class="col-1 " style="width: 70px;">
+                    <a class="navbar-brand padding-right-0" href="index.html">
+                            <img src="index_resources/logo2.png" alt="" width="50" height="50"  class="d-inline-block align-text-top">
+                        </a>
+                    </div>
+                    <div class="col d-flex">
+                        <a class="navbar-brand" href="index.html">
+                            MIGUEL<br>DIVO
+                        </a>
+                    </div>
+
+
+                    <div id="headerlinks" class="col d-flex justify-content-end align-items-center">
+                        <a id="ux-item" class="navbar-brand ms-auto" href="https://mdivo.github.io/index.html#ux-projects">UX</a>
+
+                        <style>
+                            #ux-item{
+                                margin-right: auto !important;
+                            }
+                        </style>
+
+                        <div id="project-item" class="dropdown">
+                            <a class="navbar-brand ms-auto dropdown-toggle" href="#" role="button" id="projectsDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                PROJECTS
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="projectsDropdown">
+                                <li><a class="dropdown-item" href="code.html">CODE</a></li>
+                                <li><a class="dropdown-item" href="design.html">DESIGN</a></li>
+                                <li><a class="dropdown-item" href="sound.html">SOUND</a></li>
+                            </ul>
+                        </div>
+                        <a id="archive-item" class="navbar-brand ms-auto" href="archives.html">ARCHIVES</a>
+                        <a id="about-item" class="navbar-brand ms-auto" href="about.html">ABOUT</a>
+
+                        <div class="menu-botton-container" onclick="menuAnimate(this)">
+                            <div class="bar1"></div>
+                            <div class="bar2"></div>
+                            <div class="bar3"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+        <div id="overlay-menu">
+            <div id="menu-content">
+                <ul>
+                    <li><a class="navbar-brand ms-auto" href="https://mdivo.github.io/index.html#ux-projects">UX PROJECTS</a></li>
+
+                    <div class="dropdown" style="margin-bottom: 20px; margin-left: 13px;">
+                        <a class="navbar-brand ms-auto dropdown-toggle" href="#" role="button" id="projectsDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-size: 1.5em;">
+                            PROJECTS
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="projectsDropdown">
+                            <li><a class="dropdown-item" style="font-size: 1em;" href="code.html">CODE</a></li>
+                            <li><a class="dropdown-item" style="font-size: 1em;" href="design.html">DESIGN</a></li>
+                            <li><a class="dropdown-item" style="font-size: 1em;" href="sound.html">SOUND</a></li>
+                        </ul>
+                    </div>
+                    
+                    <li><a class="navbar-brand ms-auto" href="archives.html">ARCHIVES</a></li>
+                    <li><a class="navbar-brand ms-auto" href="about.html">ABOUT</a></li>
+                </ul>
+            </div>
+        </div>
+
+
+        <script>
+            function menuAnimate(x) {
+                x.classList.toggle("change");
+                var overlayMenu = document.getElementById("overlay-menu");
+
+                if (overlayMenu.style.opacity === "0" || overlayMenu.style.opacity === "") {
+                    overlayMenu.style.display = "block";
+                    setTimeout(function () {
+                        overlayMenu.style.opacity = "1"; // Set opacity to 1 to fade in
+                    }, 10); // Add a small delay to ensure the display change takes effect before fading in
+                } else {
+                    overlayMenu.style.opacity = "0"; // Set opacity to 0 to fade out
+                    setTimeout(function () {
+                        overlayMenu.style.display = "none";
+                    }, 300); // Wait for the fade-out transition to complete before hiding
+                }
+            }
+        </script>
+
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+    
+    
+
+
+
+        <div id="quick-info-page-section" class="container-fluid full-1st-height full-width ">
+            <div class="row " style="height: 70vh; justify-content: center; align-items: center;">
+                
+                
+                <style>
+                    .oval-image {
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      text-align: center;
+                      position: relative;
+                      transition: filter 0.3s;
+                      background-color: rgba(37, 50, 71, 0.467);
+                    }
+                  
+                    .oval-image img {
+                      position: absolute;
+                      width: 125%;
+                      height: 125%;
+                      object-fit: cover;
+                      z-index: -1;
+                    }
+                  
+                    .oval-image .content {
+                      height: 42vh;
+                      width: 40vw;
+                      display: flex;
+                      flex-direction: column;
+                      align-items: center;
+                      justify-content: space-between;
+                      overflow: hidden;
+                      position: relative;
+                      z-index: 1;
+                      color: rgb(255, 255, 255);
+                      
+                    }
+                  
+                   
+                </style>
+                  
+                <div class="oval-image ">
+           
+                    <img class="rounded-5" src="carchived_resources/oval-image.png" >
+
+                    <div class="content">
+                        <p style="font-size: 0.7rem; margin-top: 0;"></p>
+                        <a href="https://www.figma.com/file/HIWfu6AyYGb06NDAL23U8M/Archive-Radio?type=design&node-id=0%3A1&mode=design&t=5BByDEi76zZZgsDF-1" target="_blank" style="font-size: 2rem; color: white;"> CLICK <i class="fancy-font">Here</i> TO VIEW<br><i class="fancy-font">The Prototype</i> </a>
+                        <p style="font-size: 0.7rem; margin-bottom: 0;"></p>
+                    </div>
+                </div>
+                  
+    
+    
+            </div>
+    
+            
+            <div class="col-12 ">
+                <div class="row">
+            
+                    <div class="col-12" style="height: 14vh;">
+                        <p style="font-size: 2rem; padding-top: 5vh; padding-bottom: 0px; margin-bottom: 0px;">CARCHIVED<i class="fancy-font"> / Web UI Design</i></p>
+                        <hr style="color: #000000; height: 12px; margin-top: 0px;">
+                    </div>
+
+                    <div>
+                        <img src="carchived_resources/carchive-bg.png" width="100%">
+                    </div>
+            
+                    
+                    
+                    
+    
+    
+                </div>
+            </div>
+
+            <style>
+                .card:hover h5 {
+                    text-decoration: underline;
+                }
+
+                .card:hover img {
+                    transform: scale(1.03); /* Zoom in effect on hover (adjust the scale value as needed) */
+                    transition: transform 0.3s ease-in-out; /* Add smooth transition for zoom effect */
+
+                }
+
+            </style>
+    
+    
+    
+    
+    
+  
+  
+        </div>
+    
+    
+    </body>
+</html>
+
+
+
+
+
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen&display=swap');
+
+    
+</style>
+
+
+<style>
+    .fancy-font{
+        font-family: 'Adobe-Caslon-Pro';
+    }
+</style>
+
+<style>
+#overlay-menu {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255); /* Semi-transparent white background */
+    z-index: 1000;
+    opacity: 0; /* Initially, set opacity to 0 */
+    transition: opacity 0.8s ease; /* Transition for opacity property */
+}
+
+#menu-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+
+}
+
+#menu-content ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+#menu-content ul li {
+    margin-bottom: 20px;
+}
+
+#menu-content ul li a {
+    color: #000000;
+    font-size: 24px;
+    text-decoration: none;
+}
+</style>
+
+ 
+
+<style>
+/* Styles for screens 591px or higher */
+@media (min-width: 592px) {
+    #ux-item, #project-item, #archive-item, #about-item {
+        display: block !important;
+    }
+
+    .menu-botton-container {
+        display: none;
+    }
+}
+
+/* Styles for screens 590px or lower */
+@media (max-width: 590px) {
+    #ux-item, #project-item, #archive-item, #about-item {
+        display: none !important;
+    }
+
+    .menu-botton-container {
+        display: inline-block;
+    }
+}
+
+.menu-botton-container {
+    cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+    width: 35px;
+    height: 2px;
+    background-color: #333;
+    margin: 9px 0;
+    transition: 0.4s;
+}
+
+.change .bar1 {
+    transform: translate(0, 11px) rotate(-45deg);
+}
+
+.change .bar2 {
+    opacity: 0;
+}
+
+.change .bar3 {
+    transform: translate(0, -11px) rotate(45deg);
+}
+</style>
+
+<style>
+
+    .no-margin {
+        margin: 0 !important;
+    }
+
+    .full-width {
+        width: 100vw;
+    }
+
+    .four-col-height {
+        height: 22.625vh; 
+    }
+  
+    .full-1st-height {
+        height: 90.5vh; 
+    }
+
+    .font-weight-normal {
+        font-weight: 400!important;
+    }
+    .text-dark {
+        color: #343a40!important;
+    }
+
+    html{
+        font-size: 100%;
+    }
+
+    .font-size-for-scroll{
+        font-size: 0.8rem;
+    }
+
+
+    .oval-image {
+        width: 77vw; 
+        height: 50vh;
+        overflow: hidden;
+        border-radius: 50%; 
+    }
+
+    .oval-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+
+  
+</style>
\ No newline at end of file
diff --git a/carchived_resources/.DS_Store b/carchived_resources/.DS_Store
new file mode 100644
index 0000000..72749c8
Binary files /dev/null and b/carchived_resources/.DS_Store differ
diff --git a/carchived_resources/carchive-bg.png b/carchived_resources/carchive-bg.png
new file mode 100644
index 0000000..9fe5b31
Binary files /dev/null and b/carchived_resources/carchive-bg.png differ
diff --git a/carchived_resources/oval-image.png b/carchived_resources/oval-image.png
new file mode 100644
index 0000000..58b2cc1
Binary files /dev/null and b/carchived_resources/oval-image.png differ
diff --git a/index.html b/index.html
index 994ae8e..a39eab9 100644
--- a/index.html
+++ b/index.html
@@ -671,7 +671,7 @@ <h5 class="card-title-projects-1" style="font-weight: 400;">FDM UX/UI HACKATHON
                 <!-- Card 8 -->
                 <div class="col-12 col-sm-6 col-md-3 d-flex justify-content-center align-items-center">
                     <div class="card" style="width: 90%; height: 100%; margin-bottom: 2vh; border-color: rgb(255, 255, 255);">
-                        <a href="https://www.figma.com/file/6F8U0r2etoaRG6tzbcQkJJ/BrainStation-UX-Design-Workshop?node-id=0%3A1&t=xaUOstMiLKFocDfK-1" target="_blank" style="text-decoration: none !important; color: #000000 !important;">
+                        <a href="carchived.html" target="_blank" style="text-decoration: none !important; color: #000000 !important;">
                             <ul class="list-group list-group-flush"">
                                 <li class="list-group-item" style="font-weight:300; font-size: 0.9em;">No. ⑧ - WEB UI DESIGN</li>
                             </ul>
