diff --git a/packages/web/components/table/asset-balances.tsx b/packages/web/components/table/asset-balances.tsx
index 998febb8cd..92d895596a 100644
--- a/packages/web/components/table/asset-balances.tsx
+++ b/packages/web/components/table/asset-balances.tsx
@@ -25,11 +25,12 @@ import { useLocalStorage } from "react-use";
 
 import { AssetCell } from "~/components/table/cells/asset";
 import { SpriteIconId } from "~/config";
-import { MultiLanguageT } from "~/hooks";
 import {
   Breakpoint,
+  MultiLanguageT,
   useFeatureFlags,
   useTranslation,
+  useUserWatchlist,
   useWalletSelect,
   useWindowSize,
 } from "~/hooks";
@@ -169,6 +170,8 @@ export const AssetBalancesTable: FunctionComponent<{
 
   const noSearchResults = Boolean(searchQuery) && !filteredAssetsData.length;
 
+  const { watchListDenoms, toggleWatchAssetDenom } = useUserWatchlist();
+
   // Define columns
   const columns = useMemo(() => {
     const columnHelper = createColumnHelper<AssetRow>();
@@ -180,6 +183,8 @@ export const AssetBalancesTable: FunctionComponent<{
           <AssetCell
             {...asset}
             warnUnverified={showUnverifiedAssets && !asset.isVerified}
+            isInUserWatchlist={watchListDenoms.includes(asset.coinDenom)}
+            onClickWatchlist={() => toggleWatchAssetDenom(asset.coinDenom)}
           />
         ),
       }),
@@ -225,7 +230,15 @@ export const AssetBalancesTable: FunctionComponent<{
         ),
       }),
     ];
-  }, [sortKey, sortDirection, showUnverifiedAssets, setSortKey, t]);
+  }, [
+    sortKey,
+    sortDirection,
+    showUnverifiedAssets,
+    setSortKey,
+    t,
+    watchListDenoms,
+    toggleWatchAssetDenom,
+  ]);
 
   /** Columns collapsed for screen size responsiveness. */
   const collapsedColumns = useMemo(() => {
diff --git a/packages/web/components/table/cells/asset.tsx b/packages/web/components/table/cells/asset.tsx
index e24134e94d..5fbc806eb4 100644
--- a/packages/web/components/table/cells/asset.tsx
+++ b/packages/web/components/table/cells/asset.tsx
@@ -34,14 +34,13 @@ export const AssetCell: FunctionComponent<
             onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();
-
               onClickWatchlist();
             }}
             className={classNames(
               "cursor-pointer transition-colors duration-150 ease-out hover:text-wosmongton-300",
               isInUserWatchlist ? "text-wosmongton-400" : "text-osmoverse-600"
             )}
-            id="star"
+            id={isInUserWatchlist ? "star" : "star-outlined"}
           />
         </div>
       )}
diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg
index 4e1a52476a..1758138b8d 100644
--- a/packages/web/public/icons/sprite.svg
+++ b/packages/web/public/icons/sprite.svg
@@ -877,11 +877,9 @@
       />
     </symbol>
 
-    <symbol id="star" viewBox="0 0 24 24">
-      <path d="M0 0h24v24H0z" fill="none" />
+    <symbol id="star" viewBox="0 0 16 16" fill="currentColor">
       <path
-        fill="currentColor"
-        d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"
+        d="M8.27794 1.81331L9.76671 5.27039L14.1342 6.06815C14.398 6.09261 14.5046 6.42065 14.3056 6.59546L11.4777 9.07966L12.0687 13.4799C12.1269 13.7383 11.8479 13.9411 11.6201 13.8058L8.00071 11.6567L4.38131 13.8058C4.15356 13.9411 3.87452 13.7383 3.93275 13.4799L4.76033 9.80802L1.69584 6.59546C1.49686 6.42065 1.60344 6.09261 1.86718 6.06815L6.2347 5.27039L7.72348 1.81331C7.82824 1.57004 8.17317 1.57004 8.27794 1.81331Z"
       />
     </symbol>