diff --git a/.changeset/large-rats-share.md b/.changeset/large-rats-share.md
new file mode 100644
index 000000000..e005d883d
--- /dev/null
+++ b/.changeset/large-rats-share.md
@@ -0,0 +1,5 @@
+---
+"arconnect": minor
+---
+
+feat: adds ao token support
diff --git a/assets/_locales/en/messages.json b/assets/_locales/en/messages.json
index 75cd58472..e88d2bd32 100644
--- a/assets/_locales/en/messages.json
+++ b/assets/_locales/en/messages.json
@@ -1649,5 +1649,25 @@
   "setting_ao_support_description": {
     "message": "Show ao tokens in your wallet (beta)",
     "description": "ao support settings description"
+  },
+  "got_it": {
+    "message": "Got it",
+    "description": "Got it button text"
+  },
+  "display_ao_tokens": {
+    "message": "Display AO tokens in ArConnect (Beta)",
+    "description": "Display AO tokens description"
+  },
+  "ao_computer": {
+    "message": "ao.computer",
+    "description": "ao computer url"
+  },
+  "ao_announcement_text": {
+    "message": "Look out for new updates around ao in the future. To learn more visit",
+    "description": "ao announcement description text"
+  },
+  "ao_announcement_title": {
+    "message": "AO testnet is now live!",
+    "description": "ao announcement title text"
   }
 }
diff --git a/package.json b/package.json
index 23320bbed..2d78b2914 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arconnect",
   "displayName": "ArConnect",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "__MSG_extensionDescription__",
   "author": "th8ta",
   "packageManager": "yarn@1.22.18",
@@ -47,7 +47,7 @@
     ]
   },
   "dependencies": {
-    "@arconnect/components": "^0.2.7",
+    "@arconnect/components": "^0.2.8",
     "@arconnect/keystone-sdk": "^0.0.5",
     "@arconnect/warp-dre": "^0.0.1",
     "@arconnect/webext-bridge": "^5.0.6",
diff --git a/src/components/popup/HeadV2.tsx b/src/components/popup/HeadV2.tsx
index 7631e9d76..5b8b240a9 100644
--- a/src/components/popup/HeadV2.tsx
+++ b/src/components/popup/HeadV2.tsx
@@ -98,13 +98,13 @@ export default function HeadV2({
       collapse={scrollDirection === "down"}
       scrolled={scrolled}
     >
-      <BackWrapper>
-        <BackButton
-          onClick={async () => {
-            if (back) await back();
-            else goBack();
-          }}
-        />
+      <BackWrapper
+        onClick={async () => {
+          if (back) await back();
+          else goBack();
+        }}
+      >
+        <BackButton />
       </BackWrapper>
 
       <PageTitle>{title}</PageTitle>
@@ -170,17 +170,12 @@ const BackWrapper = styled.div`
   position: relative;
   display: flex;
   width: max-content;
-  height: max-content;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  height: 100%;
   cursor: pointer;
 
-  ${hoverEffect}
-
-  &::after {
-    width: 158%;
-    height: 158%;
-    border-radius: 100%;
-  }
-
   &:active svg {
     transform: scale(0.92);
   }
diff --git a/src/routes/popup/announcement.tsx b/src/routes/popup/announcement.tsx
index ea4611ceb..623f0dc72 100644
--- a/src/routes/popup/announcement.tsx
+++ b/src/routes/popup/announcement.tsx
@@ -1,13 +1,22 @@
-import { ButtonV2, ModalV2, Spacer, Text } from "@arconnect/components";
+import {
+  ButtonV2,
+  ModalV2,
+  Spacer,
+  Text,
+  type DisplayTheme
+} from "@arconnect/components";
 import aoGraphic from "url:/assets/ecosystem/ao-arconnect.svg";
 import { ExtensionStorage } from "~utils/storage";
 import { useEffect, useState } from "react";
 import browser from "webextension-polyfill";
+import { useTheme } from "~utils/theme";
 import styled from "styled-components";
 
 export const AnnouncementPopup = ({ isOpen, setOpen }) => {
   const [checked, setChecked] = useState(true);
 
+  const theme = useTheme();
+
   const handleCheckbox = async () => {
     const newState = !checked;
     setChecked(newState);
@@ -35,18 +44,17 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
           <img src={aoGraphic} alt="ao graphic" />
           <div>
             <HeaderText noMargin heading>
-              AO testnet is now live!
+              {browser.i18n.getMessage("ao_announcement_title")}
             </HeaderText>
             <Spacer y={1} />
             <CenterText>
-              Look out for new updates around ao in the future. To learn more
-              visit{" "}
+              {browser.i18n.getMessage("ao_announcement_text")}{" "}
               <Link
                 onClick={() =>
                   browser.tabs.create({ url: "https://ao.computer" })
                 }
               >
-                ao.computer
+                {browser.i18n.getMessage("ao_computer")}
               </Link>
             </CenterText>
             <Spacer y={1} />
@@ -83,8 +91,8 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
                   />
                 </UncheckedSvg>
               )}
-              <CenterText style={{ marginLeft: "24px", fontWeight: "400" }}>
-                Display AO tokens in ArConnect (Beta)
+              <CenterText displayTheme={theme} style={{ marginLeft: "24px" }}>
+                {browser.i18n.getMessage("display_ao_tokens")}
               </CenterText>
             </CheckContainer>
           </div>
@@ -97,7 +105,7 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
           }}
           style={{ marginTop: "43px", fontWeight: "400" }}
         >
-          Dismiss
+          {browser.i18n.getMessage("got_it")}
         </ButtonV2>
       </ContentWrapper>
     </ModalV2>
@@ -125,11 +133,12 @@ const ContentWrapper = styled.div`
 
 const CenterText = styled(Text).attrs({
   noMargin: true
-})`
+})<{ displayTheme: DisplayTheme }>`
   width: 245px;
   text-align: center;
-  color: #ffffff;
-  font-weight: 400;
+  color: ${(props) =>
+    props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"};
+  font-weight: 500;
   font-size: 11px;
   line-height: 16px;
   align-self: stretch;
@@ -175,7 +184,9 @@ const UncheckedSvg = styled.svg`
   flex-grow: 0;
 `;
 
-const HeaderText = styled(Text)`
+const HeaderText = styled(Text)<{ displayTheme: DisplayTheme }>`
   font-size: 18px;
   font-weight: 500;
+  color: ${(props) =>
+    props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"};
 `;
diff --git a/src/routes/popup/send/index.tsx b/src/routes/popup/send/index.tsx
index d49ca6940..16943cb7e 100644
--- a/src/routes/popup/send/index.tsx
+++ b/src/routes/popup/send/index.tsx
@@ -382,218 +382,222 @@ export default function Send({ id }: Props) {
   }
 
   return (
-    <Wrapper showOverlay={showSlider}>
-      <SendForm>
-        <HeadV2
-          back={() => {
-            TempTransactionStorage.removeItem("send");
-            setQty("");
-            goBack();
-          }}
-          title={browser.i18n.getMessage("send")}
-        />
-        {/* TOP INPUT */}
-        <RecipientAmountWrapper>
-          <SendButton
-            fullWidth
-            alternate
-            onClick={() => {
-              setShowSlider(!showSlider);
-            }}
-          >
-            <span style={{ display: "flex", alignItems: "center" }}>
-              {contact && contact.profileIcon ? (
-                <ProfilePicture size="24px" src={contact.profileIcon} />
-              ) : (
-                contact && (
-                  <AutoContactPic size="24px">
-                    {generateProfileIcon(contact.name || contact.address)}
-                  </AutoContactPic>
-                )
-              )}
-              {!recipient.address
-                ? browser.i18n.getMessage("select_recipient")
-                : contact && contact.name
-                ? contact.name
-                : formatAddress(recipient.address, 10)}
-            </span>
-            <ChevronDownIcon />
-          </SendButton>
-          <SendInput
-            alternative
-            type="number"
-            placeholder={"Amount"}
-            value={qty}
-            error={invalidQty}
-            status={invalidQty ? "error" : "default"}
-            onChange={(e) => setQty((e.target as HTMLInputElement).value)}
-            onKeyDown={(e) => {
-              if (
-                e.key !== "Enter" ||
-                invalidQty ||
-                parseFloat(qty) === 0 ||
-                qty === "" ||
-                recipient.address === ""
-              )
-                return;
-              send();
-            }}
-            fullWidth
-            icon={
-              <InputIcons>
-                {!!price && (
-                  <CurrencyButton small onClick={switchQtyMode}>
-                    <Currency active={qtyMode === "fiat"}>USD</Currency>/
-                    <Currency active={qtyMode === "token"}>
-                      {token.ticker.toUpperCase()}
-                    </Currency>
-                  </CurrencyButton>
+    <>
+      <HeadV2
+        back={() => {
+          TempTransactionStorage.removeItem("send");
+          setQty("");
+          goBack();
+        }}
+        title={browser.i18n.getMessage("send")}
+      />
+      <Wrapper showOverlay={showSlider}>
+        <SendForm>
+          {/* TOP INPUT */}
+          <RecipientAmountWrapper>
+            <SendButton
+              fullWidth
+              alternate
+              onClick={() => {
+                setShowSlider(!showSlider);
+              }}
+            >
+              <span style={{ display: "flex", alignItems: "center" }}>
+                {contact && contact.profileIcon ? (
+                  <ProfilePicture size="24px" src={contact.profileIcon} />
+                ) : (
+                  contact && (
+                    <AutoContactPic size="24px">
+                      {generateProfileIcon(contact.name || contact.address)}
+                    </AutoContactPic>
+                  )
                 )}
-                <MaxButton
-                  altColor={theme === "dark" && "#423D59"}
-                  small
-                  onClick={() => setQty(max.toString())}
-                >
-                  Max
-                </MaxButton>
-              </InputIcons>
-            }
-          />
-        </RecipientAmountWrapper>
-        <Datas>
-          {!!price && !isAo ? (
-            <Text noMargin>
-              ≈
-              {qtyMode === "fiat"
-                ? formatTokenBalance(secondaryQty)
-                : formatFiatBalance(secondaryQty, currency)}
-              {qtyMode === "fiat" && " " + token.ticker}
-            </Text>
-          ) : (
-            <></>
-          )}
-          <Text noMargin>
-            ~{networkFee}
-            {" AR "}
-            {browser.i18n.getMessage("network_fee")}
-          </Text>
-        </Datas>
-        {!uToken && (
-          <MessageWrapper>
+                {!recipient.address
+                  ? browser.i18n.getMessage("select_recipient")
+                  : contact && contact.name
+                  ? contact.name
+                  : formatAddress(recipient.address, 10)}
+              </span>
+              <ChevronDownIcon />
+            </SendButton>
             <SendInput
               alternative
-              {...message.bindings}
-              type="text"
-              placeholder={browser.i18n.getMessage("send_message_optional")}
+              type="number"
+              placeholder={"Amount"}
+              value={qty}
+              error={invalidQty}
+              status={invalidQty ? "error" : "default"}
+              onChange={(e) => setQty((e.target as HTMLInputElement).value)}
+              onKeyDown={(e) => {
+                if (
+                  e.key !== "Enter" ||
+                  invalidQty ||
+                  parseFloat(qty) === 0 ||
+                  qty === "" ||
+                  recipient.address === ""
+                )
+                  return;
+                send();
+              }}
               fullWidth
+              icon={
+                <InputIcons>
+                  {!!price && (
+                    <CurrencyButton small onClick={switchQtyMode}>
+                      <Currency active={qtyMode === "fiat"}>USD</Currency>/
+                      <Currency active={qtyMode === "token"}>
+                        {token.ticker.toUpperCase()}
+                      </Currency>
+                    </CurrencyButton>
+                  )}
+                  <MaxButton
+                    altColor={theme === "dark" && "#423D59"}
+                    small
+                    onClick={() => setQty(max.toString())}
+                  >
+                    Max
+                  </MaxButton>
+                </InputIcons>
+              }
             />
-          </MessageWrapper>
-        )}
-      </SendForm>
-      <Spacer y={1} />
-      <BottomActions>
-        <TokenSelector onClick={() => setShownTokenSelector(true)}>
-          <LogoAndDetails>
-            <LogoWrapper small>
-              <Logo src={logo || arweaveLogo} />
-            </LogoWrapper>
-            <TokenName>{token.name || token.ticker}</TokenName>
-            {isAo && <Image src={aoLogo} alt="ao logo" />}
-          </LogoAndDetails>
-          <TokenSelectorRightSide>
-            <Text noMargin>{browser.i18n.getMessage("setting_currency")}</Text>
-            <ChevronRightIcon />
-          </TokenSelectorRightSide>
-        </TokenSelector>
-
-        <SendButton
-          disabled={
-            invalidQty ||
-            parseFloat(qty) === 0 ||
-            qty === "" ||
-            recipient.address === ""
-          }
-          fullWidth
-          onClick={send}
-        >
-          {browser.i18n.getMessage("next")}
-          <ArrowUpRightIcon />
-        </SendButton>
-      </BottomActions>
-      <AnimatePresence>
-        {showTokenSelector && (
-          <SliderWrapper
-            variants={animation}
-            initial="hidden"
-            animate="shown"
-            exit="hidden"
-          >
-            <TokensSection>
-              <ArToken onClick={() => updateSelectedToken("AR")} />
-              {tokens
-                .filter((token) => token.type === "asset")
-                .map((token, i) => (
-                  <Token
-                    {...token}
-                    onClick={() => updateSelectedToken(token.id)}
-                    key={i}
-                  />
-                ))}
-              {aoTokens
-                .filter((token) => token.balance > 0)
-                .map((token, i) => (
-                  <Token
-                    key={token.id}
-                    ao={true}
-                    type={"asset"}
-                    defaultLogo={token?.Logo}
-                    id={token.id}
-                    ticker={token.Ticker}
-                    balance={Number(token.balance)}
-                    onClick={() => updateSelectedToken(token.id)}
-                  />
-                ))}
-            </TokensSection>
-            <CollectiblesList>
-              {tokens
-                .filter((token) => token.type === "collectible")
-                .map((token, i) => (
-                  <Collectible
-                    id={token.id}
-                    name={token.name || token.ticker}
-                    balance={token.balance}
-                    divisibility={token.divisibility}
-                    decimals={token.decimals}
-                    onClick={() => updateSelectedToken(token.id)}
-                    key={i}
-                  />
-                ))}
-            </CollectiblesList>
-          </SliderWrapper>
-        )}
-        {showSlider && (
-          <SliderWrapper
-            partial
-            variants={animation2}
-            initial="hidden"
-            animate="shown"
-            exit="hidden"
+          </RecipientAmountWrapper>
+          <Datas>
+            {!!price && !isAo ? (
+              <Text noMargin>
+                ≈
+                {qtyMode === "fiat"
+                  ? formatTokenBalance(secondaryQty)
+                  : formatFiatBalance(secondaryQty, currency)}
+                {qtyMode === "fiat" && " " + token.ticker}
+              </Text>
+            ) : (
+              <></>
+            )}
+            <Text noMargin>
+              ~{networkFee}
+              {" AR "}
+              {browser.i18n.getMessage("network_fee")}
+            </Text>
+          </Datas>
+          {!uToken && (
+            <MessageWrapper>
+              <SendInput
+                alternative
+                {...message.bindings}
+                type="text"
+                placeholder={browser.i18n.getMessage("send_message_optional")}
+                fullWidth
+              />
+            </MessageWrapper>
+          )}
+        </SendForm>
+        <Spacer y={1} />
+        <BottomActions>
+          <TokenSelector onClick={() => setShownTokenSelector(true)}>
+            <LogoAndDetails>
+              <LogoWrapper small>
+                <Logo src={logo || arweaveLogo} />
+              </LogoWrapper>
+              <TokenName>{token.name || token.ticker}</TokenName>
+              {isAo && <Image src={aoLogo} alt="ao logo" />}
+            </LogoAndDetails>
+            <TokenSelectorRightSide>
+              <Text noMargin>
+                {browser.i18n.getMessage("setting_currency")}
+              </Text>
+              <ChevronRightIcon />
+            </TokenSelectorRightSide>
+          </TokenSelector>
+
+          <SendButton
+            disabled={
+              invalidQty ||
+              parseFloat(qty) === 0 ||
+              qty === "" ||
+              recipient.address === ""
+            }
+            fullWidth
+            onClick={send}
           >
-            <SliderMenu
-              title={browser.i18n.getMessage("send_to")}
-              onClose={() => {
-                setShowSlider(false);
-              }}
+            {browser.i18n.getMessage("next")}
+            <ArrowUpRightIcon />
+          </SendButton>
+        </BottomActions>
+        <AnimatePresence>
+          {showTokenSelector && (
+            <SliderWrapper
+              variants={animation}
+              initial="hidden"
+              animate="shown"
+              exit="hidden"
             >
-              <Recipient
-                onClick={setRecipient}
-                onClose={() => setShowSlider(false)}
-              />
-            </SliderMenu>
-          </SliderWrapper>
-        )}
-      </AnimatePresence>
-    </Wrapper>
+              <TokensSection>
+                <ArToken onClick={() => updateSelectedToken("AR")} />
+                {tokens
+                  .filter((token) => token.type === "asset")
+                  .map((token, i) => (
+                    <Token
+                      {...token}
+                      onClick={() => updateSelectedToken(token.id)}
+                      key={i}
+                    />
+                  ))}
+                {aoTokens
+                  .filter((token) => token.balance > 0)
+                  .map((token, i) => (
+                    <Token
+                      key={token.id}
+                      ao={true}
+                      type={"asset"}
+                      defaultLogo={token?.Logo}
+                      id={token.id}
+                      ticker={token.Ticker}
+                      balance={Number(token.balance)}
+                      onClick={() => updateSelectedToken(token.id)}
+                    />
+                  ))}
+              </TokensSection>
+              <CollectiblesList>
+                {tokens
+                  .filter((token) => token.type === "collectible")
+                  .map((token, i) => (
+                    <Collectible
+                      id={token.id}
+                      name={token.name || token.ticker}
+                      balance={token.balance}
+                      divisibility={token.divisibility}
+                      decimals={token.decimals}
+                      onClick={() => updateSelectedToken(token.id)}
+                      key={i}
+                    />
+                  ))}
+              </CollectiblesList>
+            </SliderWrapper>
+          )}
+          {showSlider && (
+            <SliderWrapper
+              partial
+              variants={animation2}
+              initial="hidden"
+              animate="shown"
+              exit="hidden"
+            >
+              <SliderMenu
+                title={browser.i18n.getMessage("send_to")}
+                onClose={() => {
+                  setShowSlider(false);
+                }}
+              >
+                <Recipient
+                  onClick={setRecipient}
+                  onClose={() => setShowSlider(false)}
+                />
+              </SliderMenu>
+            </SliderWrapper>
+          )}
+        </AnimatePresence>
+      </Wrapper>
+    </>
   );
 }
 
@@ -638,7 +642,8 @@ const CurrencyButton = styled(Button)`
 `;
 
 const Wrapper = styled.div<{ showOverlay: boolean }>`
-  height: calc(100vh - 72px);
+  height: calc(100vh - 144px);
+  padding-top: 2px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git a/yarn.lock b/yarn.lock
index 76e5cd0c7..f3baa74a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,10 +15,10 @@
   resolved "https://registry.yarnpkg.com/@apocentre/alias-sampling/-/alias-sampling-0.5.3.tgz#897ff181b48ad7b2bcb4ecf29400214888244f08"
   integrity sha512-7UDWIIF9hIeJqfKXkNIzkVandlwLf1FWTSdrb9iXvOP8oF544JRXQjCbiTmCv2c9n44n/FIWtehhBfNuAx2CZA==
 
-"@arconnect/components@^0.2.7":
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/@arconnect/components/-/components-0.2.7.tgz#71f6469d6c169fc6ac179917bef798bb0f288402"
-  integrity sha512-qfdsOKeeo5BKeL4ozJhj0Pm5miSr8760rgX95p5upsPJYg5RSikHFwm9jN+pS0OyEYWMBUom6Aa2NfVjwrvtAw==
+"@arconnect/components@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@arconnect/components/-/components-0.2.8.tgz#ed400223da5a8682da69262712e56f4663b605ed"
+  integrity sha512-CM8clY8LGr7PBjhhg+2ynI83OqRJSJspyC2xltZh9D/vcN24deFalWcgOFRIQOYMCYQZKZPcCt+oRm2lDi/IvA==
   dependencies:
     "@iconicicons/react" "^1.5.1"
     axios "^1.6.7"