diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx
index e68821ff8..16f33f20b 100644
--- a/web/src/components/Editor/Editor.tsx
+++ b/web/src/components/Editor/Editor.tsx
@@ -23,6 +23,7 @@ import type { ViewUpdate } from '@codemirror/view'
 import type { Text } from '@codemirror/state'
 import { languages } from '@codemirror/language-data'
 import { markdown } from '@codemirror/lang-markdown'
+import { java } from '@codemirror/lang-java'
 import { EditorView, keymap, placeholder as placeholderExtension } from '@codemirror/view'
 import { Compartment, EditorState, Extension } from '@codemirror/state'
 import { color } from '@uiw/codemirror-extensions-color'
@@ -205,6 +206,25 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
         })
     }
   }, [filename, forMarkdown, view, languageConfig, markdownLanguageSupport])
+  useEffect(() => {
+    if (filename) {
+      let languageSupport
+      if (
+        filename.endsWith('.tf') ||
+        filename.endsWith('.hcl') ||
+        filename.endsWith('.tfstate') ||
+        filename.endsWith('.tfvars')
+      ) {
+        languageSupport = java()
+      }
+      // Add other file extensions and their corresponding language modes
+      if (languageSupport) {
+        view.current?.dispatch({
+          effects: languageConfig.reconfigure(languageSupport)
+        })
+      }
+    }
+  }, [filename, view, languageConfig, markdownLanguageSupport])
   const handleUploadCallback = (file: File) => {
     if (!inGitBlame) {
       setFile(file)
diff --git a/web/src/utils/FileUtils.ts b/web/src/utils/FileUtils.ts
index c7d4a6840..7cb0fab6b 100644
--- a/web/src/utils/FileUtils.ts
+++ b/web/src/utils/FileUtils.ts
@@ -483,6 +483,7 @@ const TextExtensions = [
   'alpine',
   'tf',
   'tfvars',
+  'tfstate',
   'hcl'
 ]
 
diff --git a/web/src/utils/Utils.ts b/web/src/utils/Utils.ts
index 655c38c17..b89376c20 100644
--- a/web/src/utils/Utils.ts
+++ b/web/src/utils/Utils.ts
@@ -471,7 +471,8 @@ const EXTENSION_TO_LANG: Record<string, string> = {
   tsx: 'typescript',
   tf: 'hcl',
   tfvars: 'hcl',
-  workspace: 'python'
+  workspace: 'python',
+  tfstate: 'hcl'
 }
 
 export const PLAIN_TEXT = 'plaintext'