diff --git a/packages/swr-devtools/src/components/CacheData.tsx b/packages/swr-devtools/src/components/CacheData.tsx
index 517e6e2..13766e9 100644
--- a/packages/swr-devtools/src/components/CacheData.tsx
+++ b/packages/swr-devtools/src/components/CacheData.tsx
@@ -1,5 +1,6 @@
 import React, { lazy, Suspense } from "react";
 import styled from "styled-components";
+import { mutate } from "swr";
 import { SWRCacheData } from "../swr-cache";
 import { CacheKey } from "./CacheKey";
 
@@ -10,9 +11,14 @@ type Props = {
 export const CacheData = React.memo(({ data }: Props) => (
   <>
     <Title>
-      <CacheKey cacheKey={data.key} />
-      &nbsp;
-      <TimestampText>{data.timestampString}</TimestampText>
+      <CacheTitle cacheKey={data.key} />
+      <MutateButton
+        onClick={() => {
+          mutate(data.key);
+        }}
+      >
+        mutate
+      </MutateButton>
     </Title>
     <DataWrapper>
       <CacheDataView data={data.data} />
@@ -53,17 +59,30 @@ const AsyncReactJson = ({ data }: Props) => {
   );
 };
 
+const CacheTitle = styled(CacheKey)`
+  flex-grow: 1;
+`;
+
+const MutateButton = styled.button`
+  font-size: 1rem;
+  border: none;
+  padding: 0.3rem;
+  background-color: var(--swr-devtools-mutate-btn-color);
+  border-radius: 5px;
+  color: var(--swr-devtools-mutate-btn-text-color);
+
+  &:hover {
+    background-color: var(--swr-devtools-mutate-btn-hover-color);
+  }
+`;
+
 const ErrorText = styled.p`
   color: var(--swr-devtools-error-text-colora);
 `;
 
 const Title = styled.h3`
+  display: flex;
   margin: 0;
   padding: 1rem 0.5rem;
   color: var(--swr-devtools-text-color);
 `;
-
-const TimestampText = styled.span`
-  font-size: 1rem;
-  font-weight: normal;
-`;
diff --git a/packages/swr-devtools/src/components/CacheKey.tsx b/packages/swr-devtools/src/components/CacheKey.tsx
index f0c14dc..bf49f86 100644
--- a/packages/swr-devtools/src/components/CacheKey.tsx
+++ b/packages/swr-devtools/src/components/CacheKey.tsx
@@ -3,18 +3,31 @@ import styled from "styled-components";
 
 import { isInfiniteCache, getInfiniteCacheKey } from "../swr-cache";
 
-export const CacheKey = ({ cacheKey }: { cacheKey: string }) => {
-  if (isInfiniteCache(cacheKey)) {
-    return (
-      <span>
-        <CacheTag>Infinite</CacheTag>
-        {getInfiniteCacheKey(cacheKey)}
-      </span>
-    );
-  }
-  return <span>{cacheKey}</span>;
+export const CacheKey = ({
+  cacheKey,
+  className,
+}: {
+  cacheKey: string;
+  className?: string;
+}) => {
+  return (
+    <Wrapper className={className}>
+      {isInfiniteCache(cacheKey) ? (
+        <>
+          <CacheTag>Infinite</CacheTag>
+          {getInfiniteCacheKey(cacheKey)}
+        </>
+      ) : (
+        cacheKey
+      )}
+    </Wrapper>
+  );
 };
 
+const Wrapper = styled.span`
+  display: inline-block;
+`;
+
 const CacheTag = styled.b`
   margin-right: 0.3rem;
   padding: 0.2rem;
diff --git a/packages/swr-devtools/src/components/SWRDevTool.tsx b/packages/swr-devtools/src/components/SWRDevTool.tsx
index 0cd1c88..68f9a39 100644
--- a/packages/swr-devtools/src/components/SWRDevTool.tsx
+++ b/packages/swr-devtools/src/components/SWRDevTool.tsx
@@ -40,6 +40,9 @@ const GlobalStyle = createGlobalStyle`
     --swr-devtools-tag-bg-color: #464242
     --swr-devtools-tag-text-color: #FFF;
     --swr-devtools-error-text-color: red;
+    --swr-devtools-mutate-btn-text-color: #FFF;
+    --swr-devtools-mutate-btn-color: #f1492b;
+    --swr-devtools-mutate-btn-hover-color: #b65442;
 
     @media (prefers-color-scheme: dark) {
       --swr-devtools-text-color: #FFF;
@@ -51,6 +54,9 @@ const GlobalStyle = createGlobalStyle`
       --swr-devtools-tag-bg-color: #FFF;
       --swr-devtools-tag-text-color: #464242;
       --swr-devtools-error-text-color: red;
+      --swr-devtools-mutate-btn-text-color: #FFF;
+      --swr-devtools-mutate-btn-color: #f1492b;
+      --swr-devtools-mutate-btn-hover-color: #b65442;
     }
   }
 `;