diff --git a/components/GroupTitleInput.scss b/components/GroupTitleInput.scss
index 0e70d7f2575f..8b30d0e4cdb0 100644
--- a/components/GroupTitleInput.scss
+++ b/components/GroupTitleInput.scss
@@ -13,12 +13,24 @@
     background: $color-white;
     color: $color-black;
     border-color: $color-gray-15;
+
+    &:disabled {
+      background: $color-gray-02;
+      border-color: $color-gray-05;
+      color: $color-gray-90;
+    }
   }
 
   @include dark-theme {
     background: $color-gray-80;
     color: $color-gray-05;
     border-color: $color-gray-45;
+
+    &:disabled {
+      background: $color-gray-95;
+      border-color: $color-gray-60;
+      color: $color-gray-20;
+    }
   }
 
   &:focus {
diff --git a/ts/components/GroupTitleInput.stories.tsx b/ts/components/GroupTitleInput.stories.tsx
index e6e0a43e2304..5ee5cbe66d3b 100644
--- a/ts/components/GroupTitleInput.stories.tsx
+++ b/ts/components/GroupTitleInput.stories.tsx
@@ -14,8 +14,14 @@ const i18n = setupI18n('en', enMessages);
 
 const story = storiesOf('Components/GroupTitleInput', module);
 
-const Wrapper = ({ disabled }: { disabled?: boolean }) => {
-  const [value, setValue] = useState('');
+const Wrapper = ({
+  disabled,
+  startingValue = '',
+}: {
+  disabled?: boolean;
+  startingValue?: string;
+}) => {
+  const [value, setValue] = useState(startingValue);
 
   return (
     <GroupTitleInput
@@ -29,4 +35,10 @@ const Wrapper = ({ disabled }: { disabled?: boolean }) => {
 
 story.add('Default', () => <Wrapper />);
 
-story.add('Disabled', () => <Wrapper disabled />);
+story.add('Disabled', () => (
+  <>
+    <Wrapper disabled />
+    <br />
+    <Wrapper disabled startingValue="Has a value" />
+  </>
+));