diff --git a/assets/images/cactus.png b/assets/images/cactus.png
new file mode 100644
index 0000000..106c60d
Binary files /dev/null and b/assets/images/cactus.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..11d1a82
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+<html>
+    <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
+        <link href="/styles/index.css" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+        <script src="/js/copy.js"></script>
+    </head>
+    <body>
+        <div id="navbarContainer">
+            <div id="navbar">
+                <p id="bigtext">CactusSMP</p>
+                <a>About</a>
+                <a>Play</a>
+                <a href="https://discord.gg/2xHAsegC">Discord</a>
+                <div id="copyIp">
+                    <button id="copyButton" type="button">
+                        <i class="bi bi-clipboard-check-fill" id="copyIcon"></i>
+                    </button>
+                    <input type="text" readonly="true" value="Coming Soon!" id="ip"/>
+                </div>
+            </div>
+        </div>
+        <div id="footer">
+
+        <div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/js/copy.js b/js/copy.js
new file mode 100644
index 0000000..50e4e13
--- /dev/null
+++ b/js/copy.js
@@ -0,0 +1,8 @@
+var copyButton = document.getElementById("copyButton")
+var ipField = document.getElementById("ip")
+async function copyToClipboard(){
+    await Clipboard.writeText(ipField.value)
+    //im too lazy to go make a proper hovertext thing, il do it later
+    alert("Copied!")
+}
+copyButton.addEventListener("click",copyToClipboard)
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
new file mode 100644
index 0000000..12b5234
--- /dev/null
+++ b/styles/index.css
@@ -0,0 +1,66 @@
+#navbar {
+    display: flex;
+    background: rgb(2,0,36);
+    background: linear-gradient(42deg, rgba(2,0,36,1) 0%, rgba(36,121,9,1) 53%, rgba(49,255,0,1) 100%);
+    border-radius: 5px;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width:90%;
+    height:15%;
+}
+#navbarContainer{
+    display: flex;
+    width:100%;
+    height:17%;
+    justify-content: center;
+    align-items: center;
+}
+#navbar > a {
+    padding-left: 5px;
+    padding-right: 5px;
+    font-size: 10px;
+    text-decoration: none;
+}
+#bigtext{
+    font-size: 13px;
+    font-weight: bold;
+    padding-left: 10px;
+    padding-right: 10px;
+    color:#247909;
+}
+#footer{
+    color:grey;
+
+}
+body{
+    /* ask cactus for a nice background color (or if he just wants white) */
+}
+p {
+    color: white;
+    font-style: "Raleway", "Arial", sans-serif;
+}
+#copyIp{
+    display: flex;
+    flex-direction: row;
+    height:15px;
+}
+#copyIcon{
+    font-size:7px;
+    z-index: 2;
+}
+#copyButton{
+    background-color: #fc9e2a;
+    border-radius:3px;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    height:15px;
+}
+#ip{
+    height:15px;
+    width: 25px;
+}
+input{
+    font-style: "Raleway", "Arial", sans-serif;
+}
\ No newline at end of file
