diff --git a/archive/cards/archive_27.json b/archive/cards/archive_27.json
new file mode 100644
index 000000000..b18980414
--- /dev/null
+++ b/archive/cards/archive_27.json
@@ -0,0 +1,28 @@
+{
+  "name": "Mistu",
+  "contacts": [
+    {
+      "icon": "fab fa-github",
+      "link": "https://github.com/<your-github-username>",
+      "handle": "@<your-github-username>"
+    }
+  ],
+  "about": "I am a student learning web development and open-source. I love building projects and improving my coding skills.",
+  "resources": [
+    {
+      "title": "Frontend Resources",
+      "link": "https://www.w3schools.com/",
+      "text": "Best place for beginners to learn HTML, CSS & JS"
+    },
+    {
+      "title": "JavaScript Learning",
+      "link": "https://javascript.info/",
+      "text": "Full JavaScript tutorial"
+    },
+    {
+      "title": "Practice Coding",
+      "link": "https://leetcode.com/",
+      "text": "Solve coding problems to improve logic"
+    }
+  ]
+}
diff --git a/assets/script.js b/assets/script.js
index be379f3b0..23236a180 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -65,6 +65,10 @@ numberOfFilesArray.forEach(number => {
     })
     .finally(() => countUp())
 })
+const banner = document.createElement("div");
+banner.className = "retro-banner";
+banner.innerHTML = `<span>🚀 Welcome to the 2000s Retro Theme Website! 🚀</span>`;
+document.body.prepend(banner);
 
 // Prompt to archive when there are too many cards
 const showInfoInConsole = () => {
diff --git a/assets/style.css b/assets/style.css
index af8f81223..79ca76c89 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,455 +1,233 @@
-:root {
-  --dark-purple: #100633;
-  --purple: #1f0b6b;
-  --white: #fff;
-  --light-grey: #f2f2f2;
-  --light-grey1: #d2d6dc;
-  --pink: #fa3d66;
-  --orange: #ffbc22;
-  --box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.25);
-  --ease-out: 0.25s ease-in-out;
-}
-
-body {
-  color: var(--dark-purple);
-  background-size: 100% 400%;
-  background-position: 100% 0%;
-  transition: all 1s;
-  box-sizing: border-box;
-  font-family: 'Poppins', arial, sans-serif;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-header {
-  margin: 10px auto 20px auto;
-  text-align: left;
-  max-width: 1575px;
-}
-
-a {
-  color: #fa3d66;
-  text-decoration: none;
-}
-
-a:link {
-  color: var(--pink);
-  text-decoration: none;
-}
-
-p {
-  margin: 0;
-  padding: 0;
-  font-size: 18px;
-}
+/* ============================
+   2000s RETRO WEB THEME
+   Glossy buttons | XP colors
+   ============================ */
 
-.description {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 25px;
-  line-height: 1.7;
-}
-
-.searchContainer {
-  background: none;
-  text-decoration: inherit;
-  font-family: system-ui;
-  font-size: 1rem;
-  padding: 1rem 2rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin: 18px;
-  transition: all 1s;
-}
-
-#searchbar {
-  font-size: 1.1em;
-  width: 500px;
-  height: 50px;
+header::before {
+  content: "🚧 Site Under Construction – 2000s Mode Activated 🚧";
+  display: block;
+  background: #ffeb3b;
+  padding: 8px;
+  border: 2px solid #c4a600;
+  font-family: "Comic Sans MS", cursive;
+  color: #000;
   text-align: center;
-  border: none;
-  color: gray;
-  font-weight: 400;
-  transition: all 1s;
-  border: 10px solid;
-  border-image-slice: 1;
-  border-width: 3px;
-  box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.25);
-  border-image-source: linear-gradient(90deg, var(--pink) 0%, var(--orange) 100%);
+  margin-bottom: 10px;
+  box-shadow: 3px 3px 8px rgba(0,0,0,0.4);
 }
-
-#searchbar:focus {
-  outline: none;
+body::after {
+  content: "";
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 60px;
+  height: 60px;
+  background-image: url("https://i.imgur.com/1XWnS5D.gif");
+  background-size: cover;
+  z-index: 9999;
+  border: 3px solid #3a6ea5;
+  border-radius: 10px;
+  box-shadow: 3px 3px 8px rgba(0,0,0,0.4);
 }
 
-.twitter-button {
-  text-align: right;
-  margin-bottom: 24px;
-}
+   :root {
+  --xp-blue: #3a6ea5;
+  --xp-light-blue: #bcd4f6;
+  --xp-dark-blue: #1a4e8a;
 
-#contributions-number {
-  color: var(--pink);
-  transition: 2.8s;
-  font-weight: bold;
-  font-size: 36px;
-}
+  --xp-silver: #d9d9d9;
+  --xp-grey: #c4c4c4;
 
-.button {
-  padding: 16px 22px;
-  gap: 8px;
-  color: var(--white) !important;
-  width: 222px;
-  border-radius: 5px;
-  background: linear-gradient(90deg, var(--pink) 0%, var(--orange) 100%);
-  border: none;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 24px 2px;
-  cursor: pointer;
-  -webkit-box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.25);
-  -moz-box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.25);
-  box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.25);
-}
+  --xp-green: #00cc66;
+  --xp-yellow: #ffee58;
 
-.button:hover {
-  box-shadow: 4px 5px 27px 4px rgba(195, 164, 48, 1);
-  -moz-transition: all 0.4s ease-in-out;
-  -o-transition: all 0.4s ease-in-out;
-  -webkit-transition: all 0.4s ease-in-out;
-  transition: all 0.4s ease-in-out;
-}
+  --white: #ffffff;
 
-.container {
-  max-width: 1614px;
-  margin: auto;
-}
+  --shadow-strong: 3px 3px 8px rgba(0,0,0,0.4);
+  --shadow-light: 1px 1px 3px rgba(0,0,0,0.25);
 
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  --bevel: inset 1px 1px 2px #ffffff, inset -2px -2px 3px #999;
 }
 
-.row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
-  padding-top: 16px;
-  padding-bottom: 16px;
+body {
+  font-family: "Verdana", Arial, sans-serif;
+  background: linear-gradient(180deg, var(--xp-light-blue), var(--white));
+  background-attachment: fixed;
+  color: #000;
+  margin: 0;
+  padding: 0;
 }
 
-.column {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
-}
-.column-left {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+/* HEADER */
+header {
   text-align: center;
-  margin-left: 16px;
-  margin-right: 16px;
+  padding: 20px;
+  background: var(--xp-blue);
+  color: white;
+  box-shadow: var(--shadow-strong);
+  border-bottom: 3px solid var(--xp-dark-blue);
 }
 
-.column-left p {
-  max-width: 675px;
-  line-height: 22px;
+/* LINKS */
+a {
+  color: var(--xp-green);
+  font-weight: bold;
+  text-decoration: underline;
 }
 
-.column-right {
-  text-align: right;
-  margin-left: 16px;
-  margin-right: 16px;
-}
-.column-double {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
+a:hover {
+  color: var(--xp-dark-blue);
 }
 
-footer {
-  height: 50px;
+/* SEARCH BAR (2000s bubble style) */
+.searchContainer {
+  margin: 20px auto;
   text-align: center;
-  line-height: 50px;
-  letter-spacing: 2px;
-  margin: 16px;
-}
-
-/* Card
------- */
-.contact i {
-  color: var(--pink);
 }
 
-.about {
-  background-color: var(--white);
+#searchbar {
+  width: 450px;
+  height: 42px;
+  border-radius: 20px;
+  border: 2px solid var(--xp-blue);
+  background: linear-gradient(180deg, #ffffff, #e1e1e1);
+  box-shadow: var(--shadow-light);
+  font-size: 1rem;
+  text-align: center;
 }
 
-.resources p {
+/* BUTTON — glossy XP style */
+.button {
+  padding: 12px 20px;
+  background: linear-gradient(180deg, #ffffff, #d0d0d0);
+  border: 2px solid var(--xp-grey);
+  border-radius: 25px;
   font-weight: bold;
+  color: #000;
+  cursor: pointer;
+  box-shadow: var(--shadow-light), var(--bevel);
+  margin: 10px;
 }
 
-.card p {
-  padding: 8px 24px 8px 24px;
+.button:hover {
+  background: linear-gradient(180deg, #f7f7f7, #c8c8c8);
+  box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 }
 
+/* CARD STYLING — XP Windows bubble */
 .card {
-  display: flex;
-  flex-direction: column;
-  margin: 20px;
-  border-radius: 5px;
   width: 400px;
-  -webkit-box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.25);
-  -moz-box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.25);
-  box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.2);
-  transition: 0.5s;
+  margin: 20px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #ffffff, #e6e6e6);
+  border: 2px solid var(--xp-blue);
+  box-shadow: var(--shadow-strong);
+  transition: 0.3s;
 }
 
 .card:hover {
-  -webkit-box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.5);
-  -moz-box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.5);
-  box-shadow: 2px 2px 5px 2px rgba(82, 81, 85, 0.35);
-  transform: translateY(-5px);
+  transform: translateY(-4px);
+  box-shadow: 4px 4px 12px rgba(0,0,0,0.5);
 }
 
+/* CARD SECTIONS */
 .name {
-  background-color: var(--white);
+  background: var(--xp-blue);
+  color: white;
+  padding: 12px;
+  font-size: 18px;
   font-weight: bold;
-  border-radius: 5px 5px 0 0;
-  font-size: 20px;
+  border-radius: 10px 10px 0 0;
+  border-bottom: 2px solid var(--xp-dark-blue);
 }
 
 .contact {
-  background-color: var(--white);
-  border-bottom: 1px solid var(--dark-purple);
-  margin-bottom: 8px;
-}
-
-.resources {
-  background-color: var(--white);
-  height: 100%;
-  padding-right: 25px;
-  border-radius: 0 0 5px 5px;
-  word-break: break-word;
-}
-
-.resources a:hover {
-  color: var(--purple);
-}
-
-/* Night Mode Code */
-
-.night.card .contact i {
-  color: var(--orange);
-}
-
-.night.card .resources a:hover {
-  color: var(--orange);
-}
-
-/* only updates description about project, no text in card */
-.night .container .row {
-  color: var(--light-grey1);
-}
-
-.night h1 {
-  color: var(--orange);
-}
-
-.night.card {
-  border: 1px solid var(--orange);
-}
-
-.night.card:hover {
-  background-color: var(--orange);
-}
-
-.toggle-box-label-left:empty {
-  margin-left: -10px;
-}
-
-body.night {
-  background-position: 100% 100%;
-  background-color: var(--dark-purple);
+  padding: 12px;
+  background: #f2f2f2;
+  border-bottom: 1px solid #ccc;
 }
 
-.night.card .name {
-  color: var(--light-grey1);
-  background-color: var(--purple);
-}
-
-.night.card .contact {
-  background-color: var(--purple);
-  border-bottom: 1px solid var(--orange);
-}
-
-.night.card .about {
-  color: var(--light-grey1);
-  background-color: var(--dark-purple);
+.contact i {
+  color: var(--xp-blue);
 }
 
-.night.card .resources {
-  color: var(--light-grey1);
-  background-color: var(--dark-purple);
+.about {
+  padding: 12px;
+  background: #ffffff;
+  font-size: 14px;
 }
 
-.night.card .resources:hover {
-  color: var(--pink);
-  background-color: var(--purple);
+.resources {
+  padding: 12px 20px;
+  background: #fafafa;
+  border-radius: 0 0 10px 10px;
 }
 
-.night #searchbar {
-  background-color: var(--dark-purple);
-  color: var(--light-grey1);
+/* RESOURCE HOVER */
+.resources a:hover {
+  color: var(--xp-blue);
 }
 
-.toggle-box-label-left:before,
-.toggle-box-label-left:after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  /*transition*/
-  -webkit-transition: 0.25s ease-in-out;
-  -moz-transition: 0.25s ease-in-out;
-  -o-transition: 0.25s ease-in-out;
-  transition: 0.25s ease-in-out;
-  outline: none;
+/* CONTAINERS */
+.container {
+  max-width: 1500px;
+  margin: auto;
 }
 
-.toggle-box input[type='checkbox'],
-.toggle-box input[type='checkbox']:active {
-  height: 0;
-  width: 0;
-  opacity: 0;
-  border: none;
-  outline: none;
+.grid, .row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
-.toggle-box label {
-  display: inline-block;
-  position: relative;
-  padding: 0px;
-  margin-bottom: 20px;
+/* FOOTER */
+footer {
+  text-align: center;
+  padding: 20px;
+  margin-top: 30px;
+  background: var(--xp-silver);
+  border-top: 3px solid var(--xp-grey);
   font-size: 14px;
-  line-height: 16px;
-  cursor: pointer;
-  color: rgba(149, 149, 149, 0.51);
-  font-weight: normal;
-  left: 9px;
-  top: 5px;
-}
-
-.toggle-box-label-left:before {
-  content: '';
-  display: block;
-  position: absolute;
-  z-index: 1;
-  line-height: 34px;
-  text-indent: 40px;
-  height: 16px;
-  width: 16px;
-  margin: 4px;
-  /*border-radius*/
-  -webkit-border-radius: 100%;
-  -moz-border-radius: 100%;
-  border-radius: 100%;
-  right: 26px;
-  bottom: 0px;
-  background: var(--orange);
-  transform: rotate(-45deg);
-  box-shadow: 0 0 10px var(--white);
-}
-
-.toggle-box-label-left:after {
-  content: '';
-  display: inline-block;
-  width: 40px;
-  height: 24px;
-  /*border-radius*/
-  -webkit-border-radius: 16px;
-  -moz-border-radius: 16px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.15);
-  vertical-align: middle;
-  margin: 0 10px;
-  border: 2px solid var(--orange);
-}
-
-.toggle-box input[type='checkbox']:checked + .toggle-box-label-left:before {
-  right: 17px;
-  box-shadow: 5px 5px 0 0 var(--white);
-  background: transparent;
+  box-shadow: var(--shadow-strong);
 }
 
-.toggle-box input[type='checkbox']:checked + .toggle-box-label-left:after {
-  background: rgba(0, 0, 0, 0.15);
-  border: 2px solid var(--white);
+/* SCROLL TO TOP (retro round button) */
+#topButton {
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  border-radius: 50%;
+  background: var(--xp-blue);
+  color: white;
+  padding: 10px;
+  border: 2px solid var(--xp-dark-blue);
+  box-shadow: var(--shadow-strong);
 }
 
-.toggle-box input[type='checkbox'] + .toggle-box-label-left {
-  color: rgba(250, 250, 250, 0.51);
-  font-weight: bold;
+#topButton:hover {
+  background: var(--xp-light-blue);
+  color: #000;
 }
-
-.toggle-box input[type='checkbox']:checked + .toggle-box-label-left {
-  color: rgba(149, 149, 149, 0.51);
-  font-weight: normal;
+.retro-banner {
+  width: 100%;
+  overflow: hidden;
+  background: linear-gradient(180deg, #bcd4f6, #ffffff);
+  border: 2px solid #3a6ea5;
+  padding: 10px 0;
+  text-align: center;
+  box-shadow: 3px 3px 8px rgba(0,0,0,0.4);
 }
 
-.toggle-box input[type='checkbox']:checked + .toggle-box-label-left + .toggle-box-label {
-  color: rgba(250, 250, 250, 0.51);
+.retro-banner span {
+  display: inline-block;
+  white-space: nowrap;
+  animation: scroll2000 10s linear infinite;
+  font-size: 18px;
   font-weight: bold;
+  color: #1a4e8a;
 }
 
-@media screen and (min-width: 800px) {
-  .column {
-    flex: 1;
-  }
-  .double-column {
-    flex: 2;
-  }
+@keyframes scroll2000 {
+  from { transform: translateX(100%); }
+  to { transform: translateX(-100%); }
 }
-
-#topButton {
-  display: none;
-  align-items: center;
-  position: fixed; /* Fixed/sticky position */
-  bottom: 20px; /* Place the button at the bottom of the page */
-  right: 30px; /* Place the button 30px from the right */
-  z-index: 99; /* Make sure it does not overlap */
-  border: none; /* Remove borders */
-  outline: none; /* Remove outline */
-  background: linear-gradient(90deg, var(--pink) 0%, var(--orange) 100%);
-  color: white; /* Text color */
-  cursor: pointer; /* Add a mouse pointer on hover */
-  padding: 12px; /* Some padding */
-  border-radius: 8.471rem !important;
-  width: 3.088rem;
-  height: 3.088rem;
-}
-
-@keyframes animate {
-  50%{
-    transform: translateY(8px);
-  }
-}
-
-#topButton:hover {
-  background-color: #555; /* Add a dark-grey background on hover */
-  animation: animate 1s linear infinite;
-}
-
-@media screen and (max-width: 550px) {
-  #topButton {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-}
\ No newline at end of file