diff --git a/SigilMatrix.html b/SigilMatrix.html
new file mode 100644
index 0000000..0d07f90
--- /dev/null
+++ b/SigilMatrix.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sigil Matrix</title>
+</head>
+<body>
+    <h1>Welcome to the Sigil Matrix</h1>
+    <p>Explore the fascinating world of sigils and their meanings.</p>
+    <style>
+        span {
+  display: inline-block;
+  margin: 4px 6px;
+  padding: 4px 8px;
+  font-size: 1.2em;
+  font-family: 'Fira Mono', 'Consolas', monospace;
+  background: #f5f5fa;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  transition: background 0.2s, color 0.2s;
+  cursor: pointer;
+}
+
+span[title]:hover,
+span[title]:focus {
+  background: #6366f1;
+  color: #fff;
+  border-color: #6366f1;
+}
+
+body {
+  background: #f0f1f6;
+  color: #22223b;
+  font-family: 'Segoe UI', Arial, sans-serif;
+  padding: 32px;
+}
+
+@media (max-width: 600px) {
+  span {
+    font-size: 1em;
+    padding: 3px 6px;
+    margin: 3px 4px;
+  }
+}
+    </style>
+
+
+'<span title="Exclamation">!</span> <span title="At">@</span> <span title="Hash">#</span> <span title="Dollar">$</span> <span title="Percent">%</span> <span title="Caret">^</span> <span title="Ampersand">&</span> <span title="Asterisk">*</span> <span title="Left Paren">(</span> <span title="Right Paren">!)</span>',
+'<span title="Exclamation">!!</span> <span title="Exclamation At">!@</span> <span title="Exclamation Hash">!#</span> <span title="Exclamation Dollar">!$</span> <span title="Exclamation Percent">!%</span> <span title="Exclamation Caret">!^</span> <span title="Exclamation Ampersand">!&</span> <span title="Exclamation Asterisk">!*</span> <span title="Exclamation Left Paren">!(</span> <span title="At Right Paren">@)</span>',
+'<span title="At Exclamation">@!</span> <span title="At At">@@</span> <span title="At Hash">@#</span> <span title="At Dollar">@$</span> <span title="At Percent">@%</span> <span title="At Caret">@^</span> <span title="At Ampersand">@&</span> <span title="At Asterisk">@*</span> <span title="At Left Paren">@ (</span> <span title="Hash Right Paren">#)</span>',
+'<span title="Hash Exclamation">#!</span> <span title="Hash At">#@</span> <span title="Hash Hash">##</span> <span title="Hash Dollar">#$</span> <span title="Hash Percent">#%</span> <span title="Hash Caret">#^</span> <span title="Hash Ampersand">#&</span> <span title="Hash Asterisk">#*</span> <span title="Hash Left Paren">#(</span> <span title="Dollar Right Paren">$)</span>',
+'<span title="Dollar Exclamation">$!</span> <span title="Dollar At">$@</span> <span title="Dollar Hash">#$</span> <span title="Dollar Dollar">$$</span> <span title="Dollar Percent">$%</span> <span title="Dollar Caret">$^</span> <span title="Dollar Ampersand">$&</span> <span title="Dollar Asterisk">$*</span> <span title="Dollar Left Paren">$(</span> <span title="Percent Right Paren">%)</span>',
+'<span title="Percent Exclamation">%!</span> <span title="Percent At">%@</span> <span title="Percent Hash">%#</span> <span title="Percent Dollar">%$</span> <span title="Percent Percent">%%</span> <span title="Percent Caret">%^</span> <span title="Percent Ampersand">%&</span> <span title="Percent Asterisk">%*</span> <span title="Percent Left Paren">%(</span> <span title="Caret Right Paren">^)</span>',
+'<span title="Caret Exclamation">^!</span> <span title="Caret At">^@</span> <span title="Caret Hash">^#</span> <span title="Caret Dollar">^$</span> <span title="Caret Percent">^%</span> <span title="Caret Caret">^^</span> <span title="Caret Ampersand">^&</span> <span title="Caret Asterisk">^*</span> <span title="Caret Left Paren">^(</span> <span title="Ampersand Right Paren">&)</span>',
+'<span title="Ampersand Exclamation">&!</span> <span title="Ampersand At">&@</span> <span title="Ampersand Hash">&#</span> <span title="Ampersand Dollar">&$</span> <span title="Ampersand Percent">&%</span> <span title="Ampersand Caret">&^</span> <span title="Ampersand Ampersand">&&</span> <span title="Ampersand Asterisk">&*</span> <span title="Ampersand Left Paren">& (</span> <span title="Asterisk Right Paren">*)</span>',
+'<span title="Asterisk Exclamation">*! </span><span title="Asterisk At">*@</span> <span title="Asterisk Hash">*#</span> <span title="Asterisk Dollar">*$</span> <span title="Asterisk Percent">*%</span> <span title="Asterisk Caret">*^</span> <span title="Asterisk Ampersand">*&</span> <span title="Asterisk Asterisk">**</span> <span title="Asterisk Left Paren">*(</span> <span title="Left Paren Left Paren">(()</span>',
+'<span title="Left Paren Exclamation">(!</span> <span title="Left Paren At">(@</span> <span title="Left Paren Hash">(#</span> <span title="Left Paren Dollar">($</span> <span title="Left Paren Percent">(%</span> <span title="Left Paren Caret">(^</span> <span title="Left Paren Ampersand">(&</span> <span title="Left Paren Asterisk">(*</span> <span title="Left Paren Left Paren">((</span> <span title="Exclamation Right Paren">!))</span>',
+
+
+
+</body>
+</html>
