diff --git a/.gitignore b/.gitignore
index 2fb9646..6fbcf1c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -300,4 +300,3 @@ dist
 .yarn/install-state.gz
 .pnp.*
 .pnpm-store/
-
diff --git a/README.md b/README.md
index af8d95f..f706d89 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 # Airflow3Plugin
 
-Plugins for Airflow 3
\ No newline at end of file
+Plugins for Airflow 3
diff --git a/markdown_view_plugin/.pre-commit-config.yaml b/markdown_view_plugin/.pre-commit-config.yaml
new file mode 100755
index 0000000..7a1acfe
--- /dev/null
+++ b/markdown_view_plugin/.pre-commit-config.yaml
@@ -0,0 +1,15 @@
+repos:
+-   repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.1.11
+    hooks:
+    -   id: ruff
+        args: [--fix]
+    -   id: ruff-format
+
+-   repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.5.0
+    hooks:
+    -   id: trailing-whitespace
+    -   id: end-of-file-fixer
+    -   id: check-yaml
+    -   id: check-added-large-files
diff --git a/markdown_view_plugin/markdown_view_plugin.py b/markdown_view_plugin/markdown_view_plugin.py
index 0ee00a7..76f4935 100644
--- a/markdown_view_plugin/markdown_view_plugin.py
+++ b/markdown_view_plugin/markdown_view_plugin.py
@@ -82,4 +82,3 @@ class MarkdownViewPlugin(AirflowPlugin):
 # For Airflow to pick up the plugin, the class name must match the filename (snake_case to PascalCase)
 # or be explicitly defined in an __init__.py in the plugin\'s root directory.
 # Assuming filename is markdown_view_plugin.py, class MarkdownViewPlugin is correct.
-
diff --git a/markdown_view_plugin/ui/src/View.tsx b/markdown_view_plugin/ui/src/View.tsx
index 63644a7..dcf6849 100644
--- a/markdown_view_plugin/ui/src/View.tsx
+++ b/markdown_view_plugin/ui/src/View.tsx
@@ -2,21 +2,21 @@ import React, { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { fetchMarkdownContent } from './api';
-import { 
-  Box, 
-  Heading, 
-  Text, 
-  Code, 
-  Link, 
-  ListItem, 
-  OrderedList, 
-  UnorderedList, 
-  Table, 
-  Thead, 
-  Tbody, 
-  Tr, 
-  Th, 
-  Td, 
+import {
+  Box,
+  Heading,
+  Text,
+  Code,
+  Link,
+  ListItem,
+  OrderedList,
+  UnorderedList,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
   Divider,
   Container, // Added for layout
   Flex,      // Added for layout
@@ -34,13 +34,13 @@ const chakraComponents = {
   code: (props: any) => {
     const { inline, className, children, ...rest } = props;
     return !inline ? (
-      <Box 
-        as="pre" 
-        p={4} 
-        rounded="md" 
-        bg="chakra-body-bg" 
+      <Box
+        as="pre"
+        p={4}
+        rounded="md"
+        bg="chakra-body-bg"
         boxShadow="sm"
-        overflowX="auto" 
+        overflowX="auto"
         my={2}
       >
         <Code className={className} bg="transparent" {...rest}>
@@ -102,10 +102,10 @@ const View: React.FC = () => {
     <Container maxW="container.xl" py={6} height="100%" display="flex" flexDirection="column">
       <Flex justifyContent="space-between" alignItems="center" mb={6} flexShrink={0}>
         <Heading as="h1" size="lg">Markdown View</Heading>
-        <IconButton 
-          aria-label="Toggle theme" 
-          icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />} 
-          onClick={toggleColorMode} 
+        <IconButton
+          aria-label="Toggle theme"
+          icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+          onClick={toggleColorMode}
         />
       </Flex>
       <Box p={5} borderWidth="1px" borderRadius="lg" boxShadow="md" overflowY="auto" flexGrow={1}>
diff --git a/markdown_view_plugin/ui/src/theme.ts b/markdown_view_plugin/ui/src/theme.ts
index 02efe8f..05d2c0a 100644
--- a/markdown_view_plugin/ui/src/theme.ts
+++ b/markdown_view_plugin/ui/src/theme.ts
@@ -11,7 +11,7 @@ const config: ThemeConfig = {
 const colors = {
   airflow: {
     50: '#EBF8FF',  // Lightest blue
-    100: '#BEE3F8', 
+    100: '#BEE3F8',
     200: '#90CDF4',
     300: '#63B3ED',
     400: '#4299E1', // Primary blue