diff --git a/Choice coin/index.html b/Choice coin/index.html
new file mode 100644
index 000000000..483245051
--- /dev/null
+++ b/Choice coin/index.html	
@@ -0,0 +1,31 @@
+<!-- @format -->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Choice Coin</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="refresh" content="30" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="headChoice">
+      <h1 class="hh1">Choice Coin</h1>
+      <button class="button1">Connect Wallet</button>
+    </div>
+    <div class="square">
+      <div>
+        <input class="hint" type="text" placeholder="Address" />
+        <h3>Choice Coin Voting Software</h3>
+        <input class="Writeup" type="text" placeholder="Writeup" />
+        <div class="YesNo">
+          <h1 class="Yes">Yes</h1>
+          <h1 class="No">No</h1>
+        </div>
+        <button class="button2">Submit</button>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Choice coin/script.js b/Choice coin/script.js
new file mode 100644
index 000000000..90ae33654
--- /dev/null
+++ b/Choice coin/script.js	
@@ -0,0 +1,20 @@
+/** @format */
+
+// Retrieve AlgoSigner sdk from the browser
+const { AlgoSigner } = window;
+const connectWallet = document.querySelector(".button1");
+const ConnectAccount = async () => {
+  //Check  if AlgoSigner is installed
+  if (!AlgoSigner) {
+    return alert("Kindly install AlgoSigner");
+  }
+
+  //Connect Account if AlgoSigner is installed
+  await AlgoSigner.connect()
+    .then((d) => {})
+    .catch((e) => console.log("error in connection"));
+};
+connectWallet.addEventListener("click", async (e) => {
+  await ConnectAccount();
+  connectWallet.value = "Connected";
+});
diff --git a/Choice coin/style.css b/Choice coin/style.css
new file mode 100644
index 000000000..2fb653dc1
--- /dev/null
+++ b/Choice coin/style.css	
@@ -0,0 +1,78 @@
+/** @format */
+* {
+  margin: 0%;
+  padding: 0%;
+}
+body {
+  background-color: rgb(255, 255, 255);
+}
+.headChoice {
+  background-color: rgb(0, 174, 255);
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+}
+.button1 {
+  padding: 15px;
+  border-radius: 30px;
+  background-color: #fff;
+  color: rgb(113, 165, 189);
+}
+.hh1 {
+  color: #fff;
+}
+.square {
+  width: 460px;
+  background-color: rgb(0, 174, 255);
+  height: 530px;
+  margin: auto;
+  margin-top: 140px;
+  border: solid;
+  display: flex;
+  justify-content: center;
+}
+.hint {
+  padding: 10px;
+  width: 340px;
+  height: 35px;
+  margin-top: 20px;
+  text-align: center;
+}
+h3 {
+  margin-top: 20px;
+  color: #fff;
+  text-align: center;
+}
+.Writeup {
+  margin-top: 20px;
+  width: 360px;
+  height: 200px;
+  text-align: center;
+}
+.YesNo {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  color: #fff;
+  margin-top: 20px;
+}
+.button2 {
+  margin-top: 20px;
+  width: 370px;
+  height: 50px;
+  text-align: center;
+  color: #fff;
+  background-color: black;
+}
+.Yes:hover {
+  background-color: green;
+  padding: 10px;
+  color: black;
+  border-radius: 5px;
+}
+.No:hover {
+  background-color: red;
+  padding: 10px;
+  color: black;
+  border-radius: 5px;
+}
