diff --git a/Components/Breadcrumbs.jsx b/Components/Breadcrumbs.jsx
new file mode 100644
index 0000000..187a3e5
--- /dev/null
+++ b/Components/Breadcrumbs.jsx
@@ -0,0 +1,7 @@
+import {spacing} from "@material-ui/system";
+import styled from "styled-components";
+import {Breadcrumbs as MuiBreadcrumbs} from "@material-ui/core";
+
+export const Breadcrumbs = styled(MuiBreadcrumbs)(spacing);
+
+export default Breadcrumbs;
diff --git a/Components/Divider.jsx b/Components/Divider.jsx
new file mode 100644
index 0000000..b283ac7
--- /dev/null
+++ b/Components/Divider.jsx
@@ -0,0 +1,7 @@
+import {spacing} from "@material-ui/system";
+import {Divider as MuiDivider} from "@material-ui/core";
+import styled from "styled-components";
+
+export const Divider = styled(MuiDivider)(spacing);
+
+export default Divider;
diff --git a/Components/Paper.jsx b/Components/Paper.jsx
new file mode 100644
index 0000000..d156053
--- /dev/null
+++ b/Components/Paper.jsx
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import {Paper as MuiPaper} from "@material-ui/core";
+import {spacing} from "@material-ui/system";
+
+export const Paper = styled(MuiPaper)(spacing);
+
+export default Paper;
diff --git a/Components/index.js b/Components/index.js
new file mode 100644
index 0000000..5731b77
--- /dev/null
+++ b/Components/index.js
@@ -0,0 +1,3 @@
+export {default as Paper} from "./Paper";
+export {default as Divider} from "./Divider";
+export {default as Breadcrumbs} from "./Breadcrumbs";
diff --git a/RepositoryDetails.js b/RepositoryDetails.js
deleted file mode 100644
index c8842b6..0000000
--- a/RepositoryDetails.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-import Helmet from 'react-helmet';
-
-import MuiPaper from "@material-ui/core/Paper";
-
-import {
-    Breadcrumbs as MuiBreadcrumbs,
-    Divider as MuiDivider,
-    Grid,
-    Link,
-    Table,
-    TableBody,
-    TableCell,
-    TableRow,
-    Typography
-} from "@material-ui/core";
-
-import {spacing} from "@material-ui/system";
-import {Link as RouterLink, useParams} from "react-router-dom";
-import SupersetChart from "../components/superset/SupersetChart";
-import {person_languages_url} from "../../utils/superset";
-import {useOne} from "../../context/OneContext";
-import {useProjectsRepositoriesRead} from "../../api-client/one-api";
-
-const Paper = styled(MuiPaper)(spacing);
-
-const TableCellLabel = styled(TableCell)`
-  width: 200px;
-  text-align: right;
-`;
-
-
-const Divider = styled(MuiDivider)(spacing);
-
-const Breadcrumbs = styled(MuiBreadcrumbs)(spacing);
-
-const RepositoryInfo = ({repository}) => {
-
-    return (
-        <Table>
-            <TableBody>
-                <TableRow>
-                    <TableCellLabel variant="head">
-                        Name
-                    </TableCellLabel>
-                    <TableCell>
-                        {repository.name}
-                    </TableCell>
-                </TableRow>
-            </TableBody>
-        </Table>
-    )
-}
-
-const RepositoryDetails = () => {
-    const {selectedProject} = useOne();
-    let {id: repositoryId} = useParams();
-
-    const {data: repository, refetch: reloadRepository} = useProjectsRepositoriesRead({
-        project_pk: selectedProject ? selectedProject.id : undefined,
-        repository_pk: repositoryId,
-        lazy: !Boolean(selectedProject)
-    });
-
-    const chartUrl = repository ?
-        person_languages_url('repository', repository.name)
-        :
-        undefined
-
-    return (
-        <React.Fragment>
-            <Helmet title={`Repository: ${repository && repository.name}`}/>
-            <Typography variant="h3" gutterBottom display="inline">
-                Repository: {repository && repository.name}
-            </Typography>
-
-            <Breadcrumbs aria-label="Breadcrumb" mt={2}>
-                <Link component={RouterLink} to="/repositories">
-                    Repositories
-                </Link>
-
-                <Typography>{repository && repository.name}</Typography>
-            </Breadcrumbs>
-
-            <Divider my={6}/>
-
-            <Grid container spacing={6}>
-                <Grid item xs={12} xl={6}>
-                    <Paper p={6} mb={6}>
-                        <Typography variant="h4">Repository info</Typography>
-                        {repository && (
-                            <RepositoryInfo project={selectedProject} repository={repository}
-                                      onRepositoryUpdate={reloadRepository}/>
-                        )}
-                    </Paper>
-                </Grid>
-                <Grid item xs={12} xl={6}>
-                    <Paper p={6} mb={6}>
-                        <Typography variant="h4">Languages</Typography>
-                        <SupersetChart chartUrl={chartUrl}/>
-                    </Paper>
-                </Grid>
-            </Grid>
-        </React.Fragment>
-    );
-}
-
-export default RepositoryDetails;
diff --git a/RepositoryDetails/Layout.jsx b/RepositoryDetails/Layout.jsx
new file mode 100644
index 0000000..1a812ef
--- /dev/null
+++ b/RepositoryDetails/Layout.jsx
@@ -0,0 +1,50 @@
+import {Grid, Link, Typography} from "@material-ui/core";
+import {Helmet} from "react-helmet";
+import {Link as RouterLink} from "react-router-dom";
+import {Breadcrumbs, Divider, Paper} from "../Components";
+import RepositoryInfo from "./RepositoryInfo";
+import SupersetChart from "../components/superset/SupersetChart";
+import SkeletonLoading from "./SkeletonLoading";
+
+const Layout = ({repository, selectedProject, reloadRepository, chartUrl}) => {
+    if (!repository) return <SkeletonLoading />;
+    return (
+        <>
+            <Helmet title={`Repository: ${repository.name}`} />
+            <Typography variant="h3" gutterBottom display="inline">
+                Repository: {repository.name}
+            </Typography>
+
+            <Breadcrumbs aria-label="Breadcrumb" mt={2}>
+                <Link component={RouterLink} to="/repositories">
+                    Repositories
+                </Link>
+
+                <Typography>{repository.name}</Typography>
+            </Breadcrumbs>
+
+            <Divider my={6} />
+
+            <Grid container spacing={6}>
+                <Grid item xs={12} xl={6}>
+                    <Paper p={6} mb={6}>
+                        <Typography variant="h4">Repository info</Typography>
+                        <RepositoryInfo
+                            project={selectedProject}
+                            repository={repository}
+                            onRepositoryUpdate={reloadRepository}
+                        />
+                    </Paper>
+                </Grid>
+                <Grid item xs={12} xl={6}>
+                    <Paper p={6} mb={6}>
+                        <Typography variant="h4">Languages</Typography>
+                        <SupersetChart chartUrl={chartUrl} />
+                    </Paper>
+                </Grid>
+            </Grid>
+        </>
+    );
+};
+
+export default Layout;
diff --git a/RepositoryDetails/RepositoryDetails.js b/RepositoryDetails/RepositoryDetails.js
new file mode 100644
index 0000000..f09e5fb
--- /dev/null
+++ b/RepositoryDetails/RepositoryDetails.js
@@ -0,0 +1,33 @@
+import React from "react";
+import {useParams} from "react-router-dom";
+import {person_languages_url} from "../../utils/superset";
+import {useOne} from "../../context/OneContext";
+import {useProjectsRepositoriesRead} from "../../api-client/one-api";
+import Layout from "./Layout";
+
+const RepositoryDetails = () => {
+    const {selectedProject} = useOne();
+    const {id: repositoryId} = useParams();
+
+    const {data: repository, refetch: reloadRepository} =
+        useProjectsRepositoriesRead({
+            project_pk: selectedProject?.id,
+            repository_pk: repositoryId,
+            lazy: !selectedProject,
+        });
+
+    const chartUrl = repository
+        ? person_languages_url("repository", repository.name)
+        : undefined;
+
+    return (
+        <Layout
+            repository={repository}
+            selectedProject={selectedProject}
+            reloadRepository={reloadRepository}
+            chartUrl={chartUrl}
+        />
+    );
+};
+
+export default RepositoryDetails;
diff --git a/RepositoryDetails/RepositoryInfo.jsx b/RepositoryDetails/RepositoryInfo.jsx
new file mode 100644
index 0000000..fded9ed
--- /dev/null
+++ b/RepositoryDetails/RepositoryInfo.jsx
@@ -0,0 +1,20 @@
+import {Table, TableBody, TableCell, TableRow} from "@material-ui/core";
+import styled from "styled-components";
+
+const TableCellLabel = styled(TableCell)`
+    width: 200px;
+    text-align: right;
+`;
+
+const RepositoryInfo = ({repository}) => (
+    <Table>
+        <TableBody>
+            <TableRow>
+                <TableCellLabel variant="head">Name</TableCellLabel>
+                <TableCell>{repository.name}</TableCell>
+            </TableRow>
+        </TableBody>
+    </Table>
+);
+
+export default RepositoryInfo;
diff --git a/RepositoryDetails/SkeletonLoading.jsx b/RepositoryDetails/SkeletonLoading.jsx
new file mode 100644
index 0000000..4885647
--- /dev/null
+++ b/RepositoryDetails/SkeletonLoading.jsx
@@ -0,0 +1,6 @@
+//TODO: Skeleton loading to be implemented
+const SkeletonLoading = () => {
+    return <>Here will be skeleton loading for the repository details...</>;
+};
+
+export default SkeletonLoading;
diff --git a/RepositoryDetails/index.js b/RepositoryDetails/index.js
new file mode 100644
index 0000000..b59d2c6
--- /dev/null
+++ b/RepositoryDetails/index.js
@@ -0,0 +1,3 @@
+import RepositoryDetails from "./RepositoryDetails";
+
+export default RepositoryDetails;