diff --git a/web/package.json b/web/package.json
index 77e9b398..9eff4167 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,7 @@
     "lint": "next lint",
     "knip": "knip",
     "format": "prettier --write ./src",
+    "clean": "git clean -xdf && pnpm store prune",
     "gen": "graphql-codegen --config codegen.yaml",
     "gen:dojo": "pnpm gen && pnpm gen:events",
     "gen:events": "npx create-events ./src/manifests/dev/manifest.json ./src/dojo/generated/contractEvents.ts"
@@ -18,6 +19,7 @@
     "create-events": "./bin/generateEvents.cjs"
   },
   "dependencies": {
+    "@cartridge/connector": "../../cartridge/packages/connector",
     "@chakra-ui/anatomy": "^2.1.1",
     "@chakra-ui/react": "^2.8.1",
     "@dojoengine/core": "0.6.122",
@@ -68,4 +70,4 @@
     "prettier": "^2.8.8",
     "typescript": "5.2.2"
   }
-}
\ No newline at end of file
+}
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 994cbd5c..7c532ce2 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@cartridge/connector':
+    specifier: ../../cartridge/packages/connector
+    version: link:../../cartridge/packages/connector
   '@chakra-ui/anatomy':
     specifier: ^2.1.1
     version: 2.2.2
diff --git a/web/src/components/wallet/StarknetProvider.tsx b/web/src/components/wallet/StarknetProvider.tsx
index 39c47b4c..0328e099 100644
--- a/web/src/components/wallet/StarknetProvider.tsx
+++ b/web/src/components/wallet/StarknetProvider.tsx
@@ -2,6 +2,7 @@ import { getStarknetProviderChains } from "@/dojo/setup/config";
 import { Chain } from "@starknet-react/chains";
 import {
   ExplorerFactory,
+  InjectedConnector,
   StarknetConfig,
   argent,
   braavos,
@@ -11,6 +12,8 @@ import {
   useInjectedConnectors,
 } from "@starknet-react/core";
 import { ReactNode, useState } from "react";
+import CartridgeConnector from "@cartridge/connector"
+import colors from "@/theme/colors";
 
 export const walletInstallLinks = {
   argentX: "https://www.argent.xyz/argent-x/",
@@ -28,7 +31,12 @@ function rpc(chain: Chain) {
 export function StarknetProvider({ children }: { children: ReactNode }) {
   const { connectors } = useInjectedConnectors({
     // Show these connectors if the user has no connector installed.
-    recommended: [argent(), braavos(), injected({ id: "dojoburner" })],
+    recommended: [
+      argent(),
+      braavos(),
+      injected({ id: "dojoburner" }),
+      cartridgeConnector
+    ],
     // Hide recommended connectors if the user has any connector installed.
     includeRecommended: "always",
     // Randomize the order of the connectors.
@@ -49,3 +57,21 @@ export function StarknetProvider({ children }: { children: ReactNode }) {
     </StarknetConfig>
   );
 }
+
+const cartridgeConnector = new CartridgeConnector(
+  [
+    // {
+    //   target: "0x...",
+    //   method: "todo",
+    // },
+  ],
+  {
+    url: "https://x.cartridge.gg",
+    theme: {
+      colors: {
+        // e.g. button bg
+        primary: colors.neon["200"] as string,
+      }
+    },
+  }
+) as unknown as InjectedConnector