diff --git a/ceres/src/api_service/mono_api_service.rs b/ceres/src/api_service/mono_api_service.rs
index 16a511cc..2b1af7ff 100644
--- a/ceres/src/api_service/mono_api_service.rs
+++ b/ceres/src/api_service/mono_api_service.rs
@@ -19,7 +19,6 @@ use venus::monorepo::converter;
 use crate::api_service::ApiHandler;
 use crate::model::create_file::CreateFileInfo;
 use crate::model::mr::{MRDetail, MrInfoItem};
-use crate::model::tree::MRFileTree;
 
 #[derive(Clone)]
 pub struct MonoApiService {
@@ -217,16 +216,57 @@ impl MonoApiService {
         Ok(None)
     }
 
-    pub async fn mr_tree_files(&self, mr_id: i64) -> Result<MRFileTree, MegaError> {
+    pub async fn mr_tree_files(&self, mr_id: i64) -> Result<Vec<PathBuf>, MegaError> {
         let storage = self.context.services.mega_storage.clone();
         let model = storage.get_mr(mr_id).await.unwrap();
         if let Some(model) = model {
-            let start_tree = storage.get_commit_by_hash(&model.to_hash).await.unwrap().unwrap().tree;
-            let mut stack = VecDeque::new();
-            stack.push_back(start_tree);
-            // while let Some(_) = stack.pop_front() {
+            let to_tree_id = storage
+                .get_commit_by_hash(&model.to_hash)
+                .await
+                .unwrap()
+                .unwrap()
+                .tree;
+
+            let from_tree_id = storage
+                .get_commit_by_hash(&model.from_hash)
+                .await
+                .unwrap()
+                .unwrap()
+                .tree;
+
+            let mut tree_comparation = TreeComparation {
+                left_tree: VecDeque::new(),
+                result_file: vec![],
+            };
+            tree_comparation.left_tree.push_back((
+                SHA1::from_str(&to_tree_id).unwrap(),
+                Some(SHA1::from_str(&from_tree_id).unwrap()),
+                PathBuf::from(model.path),
+            ));
+            while let Some((new_tree, base_tree, mut current_path)) =
+                tree_comparation.left_tree.pop_front()
+            {
+                let new_tree: Tree = storage
+                    .get_tree_by_hash(&new_tree.to_plain_str())
+                    .await
+                    .unwrap()
+                    .unwrap()
+                    .into();
 
-            // }
+                let base_tree = if let Some(base_tree) = base_tree {
+                    let base_tree: Tree = storage
+                        .get_tree_by_hash(&base_tree.to_plain_str())
+                        .await
+                        .unwrap()
+                        .unwrap()
+                        .into();
+                    Some(base_tree)
+                } else {
+                    None
+                };
+                tree_comparation.compare(new_tree, base_tree, &mut current_path);
+            }
+            return Ok(tree_comparation.result_file);
         }
         Err(MegaError::with_message("Can not find related MR by id"))
     }
@@ -337,9 +377,91 @@ impl MonoApiService {
     }
 }
 
+pub struct TreeComparation {
+    pub left_tree: VecDeque<(SHA1, Option<SHA1>, PathBuf)>,
+    pub result_file: Vec<PathBuf>,
+}
+
+impl TreeComparation {
+    // fn compare(&mut self, new: Tree, base: Option<Tree>) {
+    //     let new_set: HashSet<_> = new.tree_items.into_iter().collect();
+    //     let base_set = if let Some(tree) = base {
+    //         tree.tree_items.into_iter().collect()
+    //     } else {
+    //         HashSet::new()
+    //     };
+    //     let diff: Vec<_> = new_set.symmetric_difference(&base_set).cloned().collect();
+    //     for item in diff {
+    //         if item.mode == TreeItemMode::Tree {
+    //             let t_id = item.id.to_plain_str();
+    //             if !self.left_tree.contains(&t_id) {
+    //                 self.left_tree.push_back(t_id);
+    //             }
+    //         } else {
+    //             self.result_file.push(item.name)
+    //         }
+    //     }
+    // }
+
+    pub fn compare(&mut self, new: Tree, base: Option<Tree>, current_path: &mut PathBuf) {
+        let mut map_name_to_item = HashMap::new();
+        let mut map_id_to_item = HashMap::new();
+
+        if let Some(tree) = base {
+            for item in tree.tree_items {
+                map_name_to_item.insert(item.name.clone(), item.clone());
+                map_id_to_item.insert(item.id, item.clone());
+            }
+        }
+
+        for item in new.tree_items {
+            match (
+                map_name_to_item.get(&item.name),
+                map_id_to_item.get(&item.id),
+            ) {
+                (Some(base_item), _) if base_item.id != item.id => {
+                    self.process_diff(item, Some(base_item.id), current_path);
+                }
+                (_, Some(base_item)) if base_item.name != item.name => {
+                    self.process_diff(item, None, current_path);
+                }
+                (None, None) => {
+                    self.process_diff(item, None, current_path);
+                }
+                _ => {}
+            }
+        }
+    }
+
+    fn process_diff(&mut self, item: TreeItem, base_id: Option<SHA1>, current_path: &mut PathBuf) {
+        if item.mode == TreeItemMode::Tree {
+            if !self
+                .left_tree
+                .contains(&(item.id, base_id, current_path.to_path_buf()))
+            {
+                current_path.push(item.name);
+                self.left_tree
+                    .push_back((item.id, base_id, current_path.to_path_buf()));
+                current_path.pop();
+            }
+        } else {
+            current_path.push(item.name);
+            self.result_file.push(current_path.to_path_buf());
+            current_path.pop();
+        }
+    }
+}
+
 #[cfg(test)]
 mod test {
-    use std::path::PathBuf;
+    use std::{collections::VecDeque, path::PathBuf};
+
+    use mercury::{
+        hash::SHA1,
+        internal::object::tree::{Tree, TreeItem, TreeItemMode},
+    };
+
+    use crate::api_service::mono_api_service::TreeComparation;
 
     #[test]
     pub fn test() {
@@ -351,4 +473,66 @@ mod test {
             println!("name: {}, path: {:?}", name, full_path);
         }
     }
+
+    #[test]
+    fn test_compare_tree() {
+        let base = Tree::from_tree_items(vec![
+            TreeItem {
+                mode: TreeItemMode::Tree,
+                id: SHA1::new(&"src".as_bytes().to_vec()),
+                name: "src".to_string(),
+            },
+            TreeItem {
+                mode: TreeItemMode::Tree,
+                id: SHA1::new(&"mega".as_bytes().to_vec()),
+                name: "mega".to_string(),
+            },
+            TreeItem {
+                mode: TreeItemMode::Blob,
+                id: SHA1::new(&"delete.txt".as_bytes().to_vec()),
+                name: "delete.txt".to_string(),
+            },
+            TreeItem {
+                mode: TreeItemMode::Blob,
+                id: SHA1::new(&"README.md".as_bytes().to_vec()),
+                name: "README.md".to_string(),
+            },
+        ])
+        .unwrap();
+
+        let new = Tree::from_tree_items(vec![
+            TreeItem {
+                mode: TreeItemMode::Tree,
+                id: SHA1::new(&"src".as_bytes().to_vec()),
+                name: "src_new".to_string(),
+            },
+            TreeItem {
+                mode: TreeItemMode::Tree,
+                id: SHA1::new(&"mega222".as_bytes().to_vec()),
+                name: "mega".to_string(),
+            },
+            TreeItem {
+                mode: TreeItemMode::Blob,
+                id: SHA1::new(&"Cargo.toml".as_bytes().to_vec()),
+                name: "Cargo.toml".to_string(),
+            },
+            TreeItem {
+                mode: TreeItemMode::Blob,
+                id: SHA1::new(&"README.md".as_bytes().to_vec()),
+                name: "README.md".to_string(),
+            },
+        ])
+        .unwrap();
+
+        let mut tree_comparation = TreeComparation {
+            left_tree: VecDeque::new(),
+            result_file: vec![],
+        };
+        // let mut current_path = Path::new("/");
+        tree_comparation.compare(new, Some(base), &mut PathBuf::from("/"));
+        println!(
+            "files: {:?} left Tree: {:?}",
+            tree_comparation.result_file, tree_comparation.left_tree
+        );
+    }
 }
diff --git a/gateway/src/api/mr_router.rs b/gateway/src/api/mr_router.rs
index e4fe2448..65feab74 100644
--- a/gateway/src/api/mr_router.rs
+++ b/gateway/src/api/mr_router.rs
@@ -1,4 +1,4 @@
-use std::collections::HashMap;
+use std::{collections::HashMap, path::PathBuf};
 
 use axum::{
     extract::{Path, Query, State},
@@ -10,7 +10,6 @@ use axum::{
 use crate::api::ApiServiceState;
 use ceres::model::{
     mr::{MRDetail, MrInfoItem},
-    tree::MRFileTree,
     CommonResult,
 };
 
@@ -62,7 +61,7 @@ async fn mr_detail(
 async fn get_mr_files(
     Path(mr_id): Path<i64>,
     state: State<ApiServiceState>,
-) -> Result<Json<CommonResult<MRFileTree>>, (StatusCode, String)> {
+) -> Result<Json<CommonResult<Vec<PathBuf>>>, (StatusCode, String)> {
     let res = state.monorepo().mr_tree_files(mr_id).await;
     let res = match res {
         Ok(data) => CommonResult::success(Some(data)),
diff --git a/moon/src/components/Bottombar.tsx b/moon/src/components/Bottombar.tsx
index 0b5dd4fe..f2935ed0 100644
--- a/moon/src/components/Bottombar.tsx
+++ b/moon/src/components/Bottombar.tsx
@@ -62,7 +62,7 @@ const navigation = [
     },
 ]
 
-export default function Bottombar() {
+export default function BottomBar() {
     const currentYear = new Date().getFullYear();
     return (
         <footer className="bg-white">
diff --git a/moon/src/components/BreadCrumb.module.css b/moon/src/components/BreadCrumb.module.css
new file mode 100644
index 00000000..bf9772c6
--- /dev/null
+++ b/moon/src/components/BreadCrumb.module.css
@@ -0,0 +1,5 @@
+.breadCrumb {
+    width: 80%;
+    margin-left: 18%;
+    margin-top: 20px;
+}
\ No newline at end of file
diff --git a/moon/src/components/BreadCrumb.tsx b/moon/src/components/BreadCrumb.tsx
index 30465ca6..7ffca916 100644
--- a/moon/src/components/BreadCrumb.tsx
+++ b/moon/src/components/BreadCrumb.tsx
@@ -1,7 +1,8 @@
 
-import 'github-markdown-css/github-markdown-light.css';
-import { useRouter } from 'next/router';
-import { Breadcrumb } from 'antd/lib';
+import 'github-markdown-css/github-markdown-light.css'
+import { useRouter } from 'next/router'
+import { Breadcrumb } from 'antd/lib'
+import styles from './BreadCrumb.module.css'
 
 const Bread = () => {
     const router = useRouter();
@@ -18,7 +19,7 @@ const Bread = () => {
     }));
 
     return (
-        <Breadcrumb className='breadCrumb'
+        <Breadcrumb className={styles.breadCrumb}
             items={breadCrumbItems}
         />
     );
diff --git a/moon/src/components/CodeContent.module.css b/moon/src/components/CodeContent.module.css
new file mode 100644
index 00000000..7762baab
--- /dev/null
+++ b/moon/src/components/CodeContent.module.css
@@ -0,0 +1,41 @@
+.codeShowContainer {
+    border-radius: 1rem;
+    padding-top: 70px;
+}
+
+.codeLineNumber {
+    margin-left: 15px;
+    margin-right: 25px;
+}
+
+.viewChangeTab {
+    background-color: rgba(53, 53, 53, 0.103);
+    display: flex;
+    position: absolute;
+    width: 80%;
+    height: 50px;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+}
+
+.viewChangeTabButton {
+    padding-left: 20px;
+    padding-right: 20px;
+    height: 100%;
+    border-radius: 1rem;
+    border: none;
+    background-color: transparent;
+}
+
+.viewChangeTabButton:hover,
+.viewChangeTabButton:checked {
+    background-color: rgba(0, 0, 0, 0.121);
+}
+
+.fileCodeContainer {
+    width: 80%;
+    margin-left: 18%;
+    border-radius: 0.5rem;
+    margin-top: 10px;
+
+}
\ No newline at end of file
diff --git a/moon/src/components/CodeContent.tsx b/moon/src/components/CodeContent.tsx
index af278a06..d3cc85a0 100644
--- a/moon/src/components/CodeContent.tsx
+++ b/moon/src/components/CodeContent.tsx
@@ -1,8 +1,9 @@
-import Editor from './editor/Editor';
-import 'github-markdown-css/github-markdown-light.css';
-import { Highlight, themes } from "prism-react-renderer";
-import { useState } from 'react';
-import { createRoot } from 'react-dom/client';
+import Editor from './editor/Editor'
+import 'github-markdown-css/github-markdown-light.css'
+import { Highlight, themes } from "prism-react-renderer"
+import { useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import styles from './CodeContent.module.css'
 
 const CodeContent = ({ fileContent }) => {
 
@@ -34,12 +35,12 @@ const CodeContent = ({ fileContent }) => {
 
 
     return (
-        <div className="fileCodeContainer">
-            <div className="viewChangeTab">
-                <button className='viewChangeTabButton'>
+        <div className={styles.fileCodeContainer} >
+            <div className={styles.viewChangeTab}>
+                <button className={styles.viewChangeTabButton}>
                     Code
                 </button>
-                <button className='viewChangeTabButton'>
+                <button className={styles.viewChangeTabButton}>
                     Blame
                 </button>
             </div>
@@ -50,11 +51,11 @@ const CodeContent = ({ fileContent }) => {
                 language="rust"
             >
                 {({ className, style, tokens, getLineProps, getTokenProps }) => (
-                    <pre style={style} className="codeShowContainer">
+                    <pre style={style} className={styles.codeShowContainer}>
                         {tokens.map((line, i) => (
                             <div key={i} {...getLineProps({ line })}>
-                                <button onClick={(event) => handleLineNumberClick(i)} className="lineNumberButton" style={{ marginLeft: '8px', backgroundColor: 'rgb(247, 237, 224, 0.7)', width: '25px', height: '17px', lineHeight: '17px', borderRadius: '3px', marginTop: '5px', border: 'none' }}>+</button>
-                                <span className="codeLineNumber">{i + 1}</span>
+                                <button onClick={(event) => handleLineNumberClick(i)} className={styles.lineNumberButton} style={{ marginLeft: '8px', backgroundColor: 'rgb(247, 237, 224, 0.7)', width: '25px', height: '17px', lineHeight: '17px', borderRadius: '3px', marginTop: '5px', border: 'none' }}>+</button>
+                                <span className={styles.codeLineNumber}>{i + 1}</span>
                                 {line.map((token, key) => (
                                     <span key={key} {...getTokenProps({ token })} />
                                 ))}
diff --git a/moon/src/styles/index.css b/moon/src/components/CodeTable.module.css
similarity index 65%
rename from moon/src/styles/index.css
rename to moon/src/components/CodeTable.module.css
index ac2cf4b3..4800c03b 100644
--- a/moon/src/styles/index.css
+++ b/moon/src/components/CodeTable.module.css
@@ -1,8 +1,3 @@
-body {
-    margin: 0;
-    padding: 0;
-}
-
 .projectName {
     display: flex;
 }
@@ -105,89 +100,10 @@ body {
 
 }
 
-.dirTreeContainer {
-    margin-top: 20px;
-    float: left;
-}
-
-.breadCrumb {
-    width: 80%;
-    margin-left: 18%;
-    margin-top: 20px;
-}
-
-.navSearchContainer {
-    position: relative;
-    border-radius: 0.375rem;
-    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.navSearchNextContainer {
-    position: absolute;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    display: flex;
-    align-items: center;
-    padding-left: 0.75rem;
-}
-
-.navSearchContainerSvg {
-    width: 1.5rem;
-    width: 1.5rem;
-    width: 1.5rem
-}
-
-.navSerchInput {
-    display: block;
-    border-radius: 0.375rem;
-    border: 1px solid rgba(128, 128, 128, 0.321);
-}
-
-.fileCodeContainer {
-    width: 80%;
-    margin-left: 18%;
-    border-radius: 0.5rem;
-    margin-top: 10px;
-
-}
-
-.codeShowContainer {
-    border-radius: 1rem;
-    padding-top: 70px;
-}
 
-.codeLineNumber {
-    margin-left: 15px;
-    margin-right: 25px;
-}
-
-.viewChangeTab {
-    background-color: rgba(53, 53, 53, 0.103);
-    display: flex;
-    position: absolute;
-    width: 80%;
-    height: 50px;
-    border-top-left-radius: 1rem;
-    border-top-right-radius: 1rem;
-}
 
-.viewChangeTabButton {
-    padding-left: 20px;
-    padding-right: 20px;
-    height: 100%;
-    border-radius: 1rem;
-    border: none;
-    background-color: transparent;
-}
-
-.viewChangeTabButton:hover,
-.viewChangeTabButton:checked {
-    background-color: rgba(0, 0, 0, 0.121);
-}
+/* 
 
 .token-line .comment {
     white-space: pre-wrap;
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/moon/src/components/CodeTable.tsx b/moon/src/components/CodeTable.tsx
index 28b940cc..661d1d66 100644
--- a/moon/src/components/CodeTable.tsx
+++ b/moon/src/components/CodeTable.tsx
@@ -6,6 +6,7 @@ import { formatDistance, fromUnixTime } from 'date-fns'
 import folderPic from '../../public/icons/folder.svg'
 import filePic from '../../public/icons/file.svg'
 import Image from 'next/image'
+import styles from './CodeTable.module.css'
 
 const CodeTable = ({ directory, readmeContent, showTree }) => {
 
@@ -59,27 +60,27 @@ const CodeTable = ({ directory, readmeContent, showTree }) => {
     });
 
     return (
-        <div className="dirTable" style={fileCodeContainerStyle}>
-            <div className="innerTable">
-                <table className="dirShowTable">
-                    <thead className="dirShowTableThead">
+        <div className= {styles.dirTable} style={fileCodeContainerStyle}>
+            <div className={styles.innerTable}>
+                <table className={styles.dirShowTable}>
+                    <thead className={styles.dirShowTableThead}>
                         <tr>
-                            <th scope="col" className="dirShowTableTr">
+                            <th scope="col" className={styles.dirShowTableTr}>
                                 Name
                             </th>
-                            <th scope="col" className="dirShowTableTr">
+                            <th scope="col" className={styles.dirShowTableTr}>
                                 Message
                             </th>
-                            <th scope="col" className="dirShowTableTr">
+                            <th scope="col" className={styles.dirShowTableTr}>
                                 Date
                             </th>
                         </tr>
                     </thead>
-                    <tbody className="dirShowTableTbody">
+                    <tbody className={styles.dirShowTableTbody}>
                         {showTree && (
-                            <tr style={dirShowTrStyle} className="dirShowTr" key="back">
-                                <td className="projectName ">
-                                    <Image src={folderPic} alt="File icon" className='fileTableIcon' />
+                            <tr style={dirShowTrStyle} className={styles.dirShowTr} key="back">
+                                <td className={styles.projectName}>
+                                    <Image src={folderPic} alt="File icon" className={styles.fileTableIcon} />
                                     <span onClick={() => handleGoBack()}>..</span>
                                 </td>
                                 <td></td>
@@ -88,21 +89,21 @@ const CodeTable = ({ directory, readmeContent, showTree }) => {
                         )}
 
                         {sortedProjects.map((project) => (
-                            <tr style={dirShowTrStyle} className="dirShowTr" key={project.id}>
+                            <tr style={dirShowTrStyle} className={styles.dirShowTr} key={project.id}>
                                 {project.content_type === 'file' && (
-                                    <td className="projectName ">
-                                        <Image src={filePic} alt="File icon" className='fileTableIcon' />
+                                    <td className={styles.projectName} >
+                                        <Image src={filePic} alt="File icon" className={styles.fileTableIcon} />
                                         <span onClick={() => handleFileClick(project)}>{project.name}</span>
                                     </td>
                                 )}
                                 {project.content_type === 'directory' && (
-                                    <td className="projectName ">
-                                        <Image src={folderPic} alt="File icon" className='fileTableIcon' />
+                                    <td className={styles.projectName} >
+                                        <Image src={folderPic} alt="File icon" className={styles.fileTableIcon} />
                                         <span onClick={() => handleDirectoryClick(project)}>{project.name}</span>
                                     </td>
                                 )}
-                                <td className="projectCommitMsg ">{project.message}</td>
-                                <td className="projectCommitMsg">
+                                <td className={styles.projectCommitMsg} >{project.message}</td>
+                                <td className={styles.projectCommitMsg}>
                                     {project.date && formatDistance(fromUnixTime(project.date), new Date(), { addSuffix: true })}
                                 </td>
                             </tr>
@@ -111,7 +112,7 @@ const CodeTable = ({ directory, readmeContent, showTree }) => {
                 </table>
             </div>
             {readmeContent && (
-                <div className='markdownContent'>
+                <div className={styles.markdownContent}>
                     <div className="markdown-body">
                         <Markdown>{readmeContent}</Markdown>
                     </div>
diff --git a/moon/src/components/MergeDetail.tsx b/moon/src/components/MergeDetail.tsx
index 4a5280ff..195c620f 100644
--- a/moon/src/components/MergeDetail.tsx
+++ b/moon/src/components/MergeDetail.tsx
@@ -1,24 +1,52 @@
-import React, { useState } from 'react';
-import { Card, Button } from 'antd/lib';
+import React, { useEffect, useState } from 'react';
+import { Card, Button, List, Typography } from 'antd/lib';
 import { useRouter } from 'next/router';
 
 const MRDetailPage = ({ mrDetail }) => {
     const router = useRouter();
+    const [filedata, setFileData] = useState([]);
     const [loadings, setLoadings] = useState<boolean[]>([]);
+    const [error, setError] = useState(null);
 
-    const enterLoading = async (index: number, id: number) => {
+    useEffect(() => {
+        const fetchFileList = async () => {
+            set_to_loading(2)
+            try {
+                const res = await fetch(`/api/mr/files?id=${mrDetail.id}`);
+                const result = await res.json();
+
+                setFileData(result.data);
+            } catch (err) {
+                setError(err);
+            } finally {
+                cancel_loading(2)
+            }
+        };
+        fetchFileList();
+    }, [mrDetail]);
+
+
+    const set_to_loading = (index: number) => {
         setLoadings((prevLoadings) => {
             const newLoadings = [...prevLoadings];
             newLoadings[index] = true;
             return newLoadings;
         });
+    }
+
+    const cancel_loading = (index: number) => {
+        setLoadings((prevLoadings) => {
+            const newLoadings = [...prevLoadings];
+            newLoadings[index] = false;
+            return newLoadings;
+        });
+    }
+
+    const enterLoading = async (index: number, id: number) => {
+        set_to_loading(index);
         const res = await fetch(`/api/mr/merge?id=${id}`);
         if (res) {
-            setLoadings((prevLoadings) => {
-                const newLoadings = [...prevLoadings];
-                newLoadings[index] = false;
-                return newLoadings;
-            });
+            cancel_loading(index);
         }
         if (res.ok) {
             router.reload();
@@ -44,7 +72,18 @@ const MRDetailPage = ({ mrDetail }) => {
                 title={mrDetail.id}
                 extra={<a href="#">More</a>}
             >
-                {mrDetail.status}
+                <List
+                    style={{ width: '30%' }}
+                    header={<div>Change File List</div>}
+                    bordered
+                    dataSource={filedata}
+                    loading = {loadings[2]}
+                    renderItem={(item) => (
+                        <List.Item>
+                            {item}
+                        </List.Item>
+                    )}
+                />
             </Card>
         </Card>
     )
diff --git a/moon/src/components/RepoTree.module.css b/moon/src/components/RepoTree.module.css
new file mode 100644
index 00000000..04808d88
--- /dev/null
+++ b/moon/src/components/RepoTree.module.css
@@ -0,0 +1,4 @@
+.dirTreeContainer {
+    margin-top: 20px;
+    float: left;
+}
\ No newline at end of file
diff --git a/moon/src/components/RepoTree.tsx b/moon/src/components/RepoTree.tsx
index 28282ef8..0dc89e15 100644
--- a/moon/src/components/RepoTree.tsx
+++ b/moon/src/components/RepoTree.tsx
@@ -1,8 +1,9 @@
-import 'github-markdown-css/github-markdown-light.css';
-import { DownOutlined } from '@ant-design/icons/lib';
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
-import { Tree } from 'antd/lib';
+import 'github-markdown-css/github-markdown-light.css'
+import { DownOutlined } from '@ant-design/icons/lib'
+import { useState, useEffect } from 'react'
+import { useRouter } from 'next/router'
+import { Tree } from 'antd/lib'
+import styles from './RepoTree.module.css'
 
 const Bread = ({ directory }) => {
     const router = useRouter();
@@ -109,7 +110,7 @@ const Bread = ({ directory }) => {
     };
 
     return (
-        <div className='dirTreeContainer'>
+        <div className={styles.dirTreeContainer}>
             <Tree
                 // multiple
                 onSelect={onSelect}
@@ -119,7 +120,7 @@ const Bread = ({ directory }) => {
                 switcherIcon={<DownOutlined />}
                 expandedKeys={expandedKeys}
             />
-        </div>
+        </div >
     );
 };
 
diff --git a/moon/src/components/layout.tsx b/moon/src/components/layout.tsx
index c5070419..5f5cc5f2 100644
--- a/moon/src/components/layout.tsx
+++ b/moon/src/components/layout.tsx
@@ -1,12 +1,14 @@
 import Navbar from './TopNavBar'
-import Footer from './Bottombar'
+import Footer from './BottomBar'
 
 export default function Layout({ children }) {
     return (
-        <>
+        <div className="flex flex-col min-h-screen">
             <Navbar />
-            <main className='h-dvh'>{children}</main>
+            <main className="flex-grow">
+                {children}
+            </main>
             <Footer />
-        </>
+        </div>
     )
 }
\ No newline at end of file
diff --git a/moon/src/pages/api/mr/files.ts b/moon/src/pages/api/mr/files.ts
new file mode 100644
index 00000000..11959e36
--- /dev/null
+++ b/moon/src/pages/api/mr/files.ts
@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+export default async function handler(req, res) {
+    const endpoint = process.env.NEXT_MEGA_API_URL;
+    const { id } = req.query;
+
+    try {
+        const apiUrl = `${endpoint}/api/v1/mr-files/${id}`;
+        const response = await axios.get(apiUrl);
+        const data = response.data;
+        res.status(200).json(data);
+    } catch (error) {
+        console.error('Error fetching data:', error);
+        res.status(500).json({ error: 'Error fetching data' });
+    }
+}
diff --git a/moon/src/pages/index.tsx b/moon/src/pages/index.tsx
index 2d35b06d..210a7cbb 100644
--- a/moon/src/pages/index.tsx
+++ b/moon/src/pages/index.tsx
@@ -1,7 +1,6 @@
 import CodeTable from '../components/CodeTable';
-import '../styles/index.css';
 
-export default function HomePage({ directory, readmeContent, fileContent }) {
+export default function HomePage({ directory, readmeContent }) {
     return (
         <div>
             <CodeTable directory={directory} readmeContent={readmeContent} showTree={false} />
diff --git a/moon/src/pages/tree/[...path].tsx b/moon/src/pages/tree/[...path].tsx
index 903d808c..75f3feaa 100644
--- a/moon/src/pages/tree/[...path].tsx
+++ b/moon/src/pages/tree/[...path].tsx
@@ -1,7 +1,6 @@
-import CodeTable from '../../components/CodeTable';
-import Bread from '../../components/BreadCrumb';
-import RepoTree from '../../components/RepoTree';
-
+import CodeTable from '../../components/CodeTable'
+import Bread from '../../components/BreadCrumb'
+import RepoTree from '../../components/RepoTree'
 
 export default function TreePage({ directory, readmeContent }) {
     return (
diff --git a/moon/src/styles/globals.css b/moon/src/styles/globals.css
index 95b04850..4e4fc94b 100644
--- a/moon/src/styles/globals.css
+++ b/moon/src/styles/globals.css
@@ -20,10 +20,10 @@
 body {
     margin: 0;
     padding: 0;
-    color: rgb(var(--foreground-rgb));
+    /* color: rgb(var(--foreground-rgb));
     background: linear-gradient(to bottom,
             transparent,
-            rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+            rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); */
 }
 
 @layer utilities {