diff --git a/.env.development b/.env.development
index b54247c6..35e06cf9 100644
--- a/.env.development
+++ b/.env.development
@@ -16,6 +16,6 @@ NODE_VERSION=v18.17.1
 #VITE_WS_TENDERMINT_FALLBACK=https://cardchain2.crowdcontrol.network/tendermint/
 #VITE_APP_FAUCET_FALLBACK=https://cardchain2.crowdcontrol.network/faucet/claimTokens
 
-VITE_API_COSMOS="http://lxgr.xyz:1317"
-VITE_WS_TENDERMINT="http://lxgr.xyz:26657"
-VITE_APP_FAUCET="http://lxgr.xyz:4500/claimTokens"
+#VITE_API_COSMOS="http://lxgr.xyz:1317"
+#VITE_WS_TENDERMINT="http://lxgr.xyz:26657"
+#VITE_APP_FAUCET="http://lxgr.xyz:4500/claimTokens"
diff --git a/src/components/elements/Login/LoginComponent.vue b/src/components/elements/Login/LoginComponent.vue
new file mode 100644
index 00000000..749814a2
--- /dev/null
+++ b/src/components/elements/Login/LoginComponent.vue
@@ -0,0 +1,37 @@
+<template>
+  <button
+    class="text-white font-bold uppercase flex hover:underline my-auto"
+    @click="tryLogin"
+  >
+    <ProfilePicComponent
+      class="min-h-8 min-w-8 h-8 w-8 mr-4 my-auto"
+      size="8"
+      :src="loggedIn ? loggedInProfilePic : Profile"
+      alt="PP"
+    />
+    <a class="my-auto">{{
+      isSignUpRequired ? "Log in / Sign up" : loggedIn ? "Profile" : "Login"
+    }}</a>
+  </button>
+</template>
+
+<script setup lang="ts">
+import Profile from "@/assets/figma/Profile.png";
+import { useProfilePic } from "@/def-composables/useProfilePic";
+import { useLoggedIn } from "@/def-composables/useLoggedIn";
+import { useLogin } from "@/def-composables/useLogin";
+import { onMounted } from "vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
+
+const { loggedInProfilePic } = useProfilePic();
+const { loggedIn } = useLoggedIn();
+const { tryLogin, isSignUpRequired, checkSignUpRequired } = useLogin();
+
+onMounted(() => {
+  checkSignUpRequired().then((value) => {
+    if (!value) {
+      tryLogin();
+    }
+  });
+});
+</script>
diff --git a/src/components/elements/Login/SignupComponent.vue b/src/components/elements/Login/SignupComponent.vue
new file mode 100644
index 00000000..ee709c54
--- /dev/null
+++ b/src/components/elements/Login/SignupComponent.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <BaseCCButton v-if="!isSignUpRequired" @click="login">
+      Login with keplr
+    </BaseCCButton>
+    <div v-else>
+      <div v-if="isKeplrAvailable" class="flex flex-col justify-center">
+        <p class="p-7">You have to sign up first</p>
+        <vue-hcaptcha
+          :sitekey="state.siteKey"
+          class="mx-auto"
+          @verify="onVerify"
+        />
+      </div>
+      <div v-else>
+        <p class="p-7">
+          To log in you first need download and install the
+          <a href="https://www.keplr.app" class="underline">keplr wallet</a>
+          browser extension
+        </p>
+        <a href="https://www.keplr.app/download" class="mx-auto">
+          <BaseCCButton :type="ButtonType.TEAL"> Download Keplr</BaseCCButton>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
+import useKeplr from "@/def-composables/useKeplr";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+import { useLogin } from "@/def-composables/useLogin";
+import { onMounted, reactive } from "vue";
+import { env } from "@/env";
+import SignupComponent from "@/components/elements/Login/SignupComponent.vue";
+
+const { isKeplrAvailable } = useKeplr();
+const { checkSignUpRequired, login, isSignUpRequired, onVerify } = useLogin();
+
+const initialState: {
+  siteKey: string;
+} = {
+  siteKey: env.faucetSiteKey,
+};
+
+const state = reactive(initialState);
+
+onMounted(checkSignUpRequired);
+</script>