diff --git a/qwik-graphql-tailwind/src/routes/[owner]/[name]/index.tsx b/qwik-graphql-tailwind/src/routes/[owner]/[name]/index.tsx
index 4e8f4a576..d490e57f4 100644
--- a/qwik-graphql-tailwind/src/routes/[owner]/[name]/index.tsx
+++ b/qwik-graphql-tailwind/src/routes/[owner]/[name]/index.tsx
@@ -7,9 +7,7 @@ import { parseTopics } from './parseTopics';
 import { RepoTree } from '~/components/repo-tree';
 import { RepoReadMe } from '~/components/repo-read-me';
 import { RepoAboutWidget } from '~/components/repo-about';
-import { ISSUES_QUERY } from '~/utils/queries/issues-query';
 import { BranchNavigation } from '~/components/branch-navigation';
-import { PULL_REQUEST_QUERY } from '~/utils/queries/pull-request';
 import { RepoHeader } from '~/components/repo-header';
 
 export interface SharedState {
@@ -48,12 +46,6 @@ export interface SharedState {
   };
 }
 
-interface IssuesPullRequestsQueryParams {
-  owner: string;
-  name: string;
-  first: number;
-}
-
 export const RepoContext = createContext<SharedState>('repo-context');
 
 export default component$(() => {
@@ -110,7 +102,7 @@ export default component$(() => {
   useContextProvider(RepoContext, store);
 
   return (
-    <div class="bg-white h-screen">
+    <div className="bg-white h-screen">
       <RepoHeader
         name={_name}
         owner={_owner}
@@ -182,49 +174,3 @@ export async function fetchRepoInfo(
 
   return await resp.json();
 }
-
-export async function fetchIssues(
-  { owner, name, first }: IssuesPullRequestsQueryParams,
-  abortController?: AbortController
-): Promise<any> {
-  const { executeQuery$ } = useQuery(ISSUES_QUERY);
-
-  const resp = await executeQuery$({
-    signal: abortController?.signal,
-    url: GITHUB_GRAPHQL,
-    variables: {
-      owner,
-      name,
-      first,
-    },
-    headersOpt: {
-      Accept: 'application/vnd.github+json',
-      authorization: `Bearer ${sessionStorage.getItem('token')}`,
-    },
-  });
-
-  return await resp.json();
-}
-
-export async function fetchPullRequests(
-  { owner, name, first }: IssuesPullRequestsQueryParams,
-  abortController?: AbortController
-): Promise<any> {
-  const { executeQuery$ } = useQuery(PULL_REQUEST_QUERY);
-
-  const resp = await executeQuery$({
-    signal: abortController?.signal,
-    url: GITHUB_GRAPHQL,
-    variables: {
-      owner,
-      name,
-      first,
-    },
-    headersOpt: {
-      Accept: 'application/vnd.github+json',
-      authorization: `Bearer ${sessionStorage.getItem('token')}`,
-    },
-  });
-
-  return await resp.json();
-}
diff --git a/solidjs-tailwind/src/App.jsx b/solidjs-tailwind/src/App.jsx
index 2353d0fe9..bc0d5352f 100644
--- a/solidjs-tailwind/src/App.jsx
+++ b/solidjs-tailwind/src/App.jsx
@@ -6,6 +6,10 @@ import SigninPage from './pages/Signin';
 import RedirectPage from './pages/Redirect';
 import Profile from './pages/Profile';
 import OrgProfile from './pages/OrgProfile';
+import RepoDetails from './pages/RepoDetails';
+// import RepoBlob from './pages/RepoBlob';
+import RepoTree from './pages/RepoTree';
+import { Repo } from './components/Repo';
 
 function App() {
   return (
@@ -17,6 +21,11 @@ function App() {
           <Route component={Home} path={ROUTES.HOME} />
           <Route component={Profile} path={ROUTES.PROFILE} />
           <Route component={OrgProfile} path={ROUTES.ORGPROFILE} />
+          <Route component={Repo} path={ROUTES.REPO_DETAILS}>
+            <Route component={RepoDetails} path={'/'}  />
+            <Route component={RepoTree} path={ROUTES.REPO_TREE} />
+            {/* <Route component={RepoBlob} path={ROUTES.REPO_BLOB} /> */}
+          </Route>
         </Route>
       </Routes>
     </>
diff --git a/solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.jsx b/solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.jsx
similarity index 62%
rename from solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.jsx
rename to solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.jsx
index d10c72726..41e09f3c5 100644
--- a/solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.jsx
+++ b/solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.jsx
@@ -1,41 +1,47 @@
 import { For } from 'solid-js';
 import { Link } from '@solidjs/router';
 import { GitBranchIcon } from '../Icons';
-import styles from './RepoNavigation.module.css';
+import styles from './BranchNavigation.module.css';
+import { useParams } from '@solidjs/router';
+import { useRepo } from '../../contexts/RepoContext';
+
+function BranchNavigation() {
+  const params = useParams();
+  const { info } = useRepo();
+
+  const branch = info().branch || params.branch;
 
-function RepoNavigation(props) {
   // creates a proper GitHub url path from a repo path
   const hrefPath = (index) => {
-    const crumbPath = props.path
-      .split('/')
+    const crumbPath = params.path?.split('/')
       .filter(Boolean)
       .slice(0, index + 1)
       .join('/');
-    return `/${props.owner}/${props.name}/tree/${props.branch}/${crumbPath}`;
+    return `/${params.owner}/${params.name}/tree/${branch}/${crumbPath}`;
   };
 
   return (
     <nav class={styles.container}>
       <button class={styles.btn}>
-        <GitBranchIcon class={styles.btnIcon} /> {props.branch}{' '}
+        <GitBranchIcon class={styles.btnIcon} /> {branch}{' '}
         <span class={styles.btnCaret}>{'\u25BC'}</span>
       </button>
-      {props.path.split('/').filter(Boolean).length > 0 && (
+      {params.path?.split('/').filter(Boolean).length > 0 && (
         <div class={styles.crumbs}>
-          <Link href={`/${props.owner}/${props.name}`}>
+          <Link href={`/${params.owner}/${params.name}`}>
             <a
-              data-testid={`file explorer nav root ${props.name}`}
+              data-testid={`file explorer nav root ${params.name}`}
               class={styles.rootLink}
             >
-              {props.name}
+              {params.name}
             </a>
           </Link>
           <span class={styles.separator}>/</span>
-          <For each={props.path.split('/').filter(Boolean)}>
+          <For each={params.path?.split('/').filter(Boolean)}>
             {(crumb, index) => (
               <>
                 {index() ===
-                props.path.split('/').filter(Boolean).length - 1 ? (
+                params.path?.split('/').filter(Boolean).length - 1 ? (
                   <span
                     data-testid={`file explorer nav end ${crumb}`}
                     class={styles.crumbEnd}
@@ -64,4 +70,4 @@ function RepoNavigation(props) {
   );
 }
 
-export default RepoNavigation;
+export default BranchNavigation;
diff --git a/solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.module.css b/solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.module.css
similarity index 100%
rename from solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.module.css
rename to solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.module.css
diff --git a/solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.stories.jsx b/solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.stories.jsx
similarity index 89%
rename from solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.stories.jsx
rename to solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.stories.jsx
index 96284fb20..b734c1fed 100644
--- a/solidjs-tailwind/src/components/RepoNavigation/RepoNavigation.stories.jsx
+++ b/solidjs-tailwind/src/components/BranchNavigation/BranchNavigation.stories.jsx
@@ -1,8 +1,8 @@
 import { Router } from '@solidjs/router';
-import RepoNavigation from './RepoNavigation';
+import RepoNavigation from './BranchNavigation';
 
 export default {
-  title: 'Components/Repo Navigation',
+  title: 'Components/Branch Navigation',
   component: RepoNavigation,
   argTypes: {
     name: {},
diff --git a/solidjs-tailwind/src/components/BranchNavigation/index.js b/solidjs-tailwind/src/components/BranchNavigation/index.js
new file mode 100644
index 000000000..f6232a3a9
--- /dev/null
+++ b/solidjs-tailwind/src/components/BranchNavigation/index.js
@@ -0,0 +1 @@
+export { default as BranchNavigation } from './BranchNavigation';
diff --git a/solidjs-tailwind/src/components/FileExplorer/FileExplorer.jsx b/solidjs-tailwind/src/components/FileExplorer/FileExplorer.jsx
index 7562b33d6..a4aa3563a 100644
--- a/solidjs-tailwind/src/components/FileExplorer/FileExplorer.jsx
+++ b/solidjs-tailwind/src/components/FileExplorer/FileExplorer.jsx
@@ -1,51 +1,80 @@
 import { For } from 'solid-js';
 import { Link } from '@solidjs/router';
-import { removeLastPathPart } from '../../utils/removeLastPathPart';
 import { document } from 'solid-heroicons/outline';
 import { folder } from 'solid-heroicons/solid';
 import { Icon } from 'solid-heroicons';
 import styles from './FileExplorer.module.css';
+import { useRepo } from '../../contexts/RepoContext';
+import { useParams } from '@solidjs/router';
+import { createResource } from 'solid-js';
+import getRepoTree from '../../services/get-repo-tree';
+import { createSignal } from 'solid-js';
+import { createEffect } from 'solid-js';
+
+const FileExplorerView = () => {
+  const [tree, setTree] = createSignal([]);
+  const { info } = useRepo();
+  const params = useParams();
+
+  const branch = params.branch || info().branch;
+  const basePath = `/${params.owner}/${params.name}`;
+  const backLink = `${basePath}/tree/${branch}/${params.path}`;
+
+  const [resTree] = createResource(`${branch}_${params.path}`, () =>
+    getRepoTree({
+      owner: params.owner,
+      name: params.name,
+      expression: `${branch}:${params.path || ''}`,
+    })
+  );
+
+  createEffect(() => {
+    if (resTree() && !resTree.loading) {
+      setTree(resTree()?.tree);
+    }
+  });
 
-const FileExplorerView = (props) => {
   return (
-    <div class={styles.container}>
-      {props.repoPath && (
-        <Link
-          href={`${props.basePath}/tree/${props.branch}/${removeLastPathPart(
-            props.repoPath
-          )}`}
-        >
-          <a class={styles.cellBack}>
-            <div class="text-blue-600">..</div>
-          </a>
-        </Link>
-      )}
-      <For each={props.items}>
-        {(item) => (
-          <div class={styles.cell}>
-            <div class="flex items-center">
-              <div class="mr-2.5">
-                {item.type === 'tree' ? (
-                  <Icon path={folder} class={styles.iconDir} />
-                ) : (
-                  <Icon path={document} class={styles.iconFile} />
-                )}
+    <>
+      {resTree.loading ? (
+        <div>Loading...</div>
+      ) : (
+        <div class={styles.container}>
+          {params.path && (
+            <Link href={backLink}>
+              <a class={styles.cellBack}>
+                <div class="text-blue-600">..</div>
+              </a>
+            </Link>
+          )}
+          <For each={tree()}>
+            {(item) => (
+              <div class={styles.cell}>
+                <div class="flex items-center">
+                  <div class="mr-2.5">
+                    {item.type === 'tree' ? (
+                      <Icon path={folder} class={styles.iconDir} />
+                    ) : (
+                      <Icon path={document} class={styles.iconFile} />
+                    )}
+                  </div>
+                  <Link
+                    href={`${basePath}/${item.type}/${branch}/${item.path}`}
+                  >
+                    <span
+                      data-testid={`file explorer list ${item.name}`}
+                      class={styles.link}
+                    >
+                      {item.name}
+                    </span>
+                  </Link>
+                </div>
               </div>
-              <Link
-                href={`${props.basePath}/${item.type}/${props.branch}/${item.path}`}
-              >
-                <a
-                  data-testid={`file explorer list ${item.name}`}
-                  class={styles.link}
-                >
-                  {item.name}
-                </a>
-              </Link>
-            </div>
-          </div>
-        )}
-      </For>
-    </div>
+            )}
+          </For>
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/solidjs-tailwind/src/components/Repo/Repo.jsx b/solidjs-tailwind/src/components/Repo/Repo.jsx
new file mode 100644
index 000000000..47822414e
--- /dev/null
+++ b/solidjs-tailwind/src/components/Repo/Repo.jsx
@@ -0,0 +1,12 @@
+import { Outlet } from '@solidjs/router';
+import { RepoProvider } from '../../contexts/RepoContext';
+
+const Repo = () => {
+  return (
+    <RepoProvider>
+      <Outlet />
+    </RepoProvider>
+  );
+};
+
+export default Repo;
diff --git a/solidjs-tailwind/src/components/Repo/index.jsx b/solidjs-tailwind/src/components/Repo/index.jsx
new file mode 100644
index 000000000..3d36609e5
--- /dev/null
+++ b/solidjs-tailwind/src/components/Repo/index.jsx
@@ -0,0 +1 @@
+export { default as Repo } from './Repo';
diff --git a/solidjs-tailwind/src/components/RepoAbout/RepoAbout.jsx b/solidjs-tailwind/src/components/RepoAbout/RepoAbout.jsx
index 0a6d3526a..7780e286a 100644
--- a/solidjs-tailwind/src/components/RepoAbout/RepoAbout.jsx
+++ b/solidjs-tailwind/src/components/RepoAbout/RepoAbout.jsx
@@ -3,16 +3,19 @@ import { Description } from './Description';
 import { HomepageUrl } from './HomePageUrl';
 import { Topics } from './Topics';
 import styles from './RepoAbout.module.css';
+import { useRepo } from '../../contexts/RepoContext';
+
+export const RepoAboutWidget = () => {
+  const {info} = useRepo();
 
-export const RepoAboutWidget = (props) => {
   return (
     <div class={styles.container}>
       <h3 class={styles.heading}>About</h3>
       <div class={styles.description}>
         <div data-testid="about-info" class="space-y-4">
-          <Description text={props.info.data?.description} />
-          <HomepageUrl homepageUrl={props.info.data?.homepageUrl} />
-          <Topics topics={props.info.data?.topics} />
+          <Description text={info().info?.description} />
+          <HomepageUrl homepageUrl={info().info?.homepageUrl} />
+          <Topics topics={info().info?.topics || []} />
         </div>
       </div>
       <div>
@@ -23,3 +26,5 @@ export const RepoAboutWidget = (props) => {
     </div>
   );
 }
+
+export default RepoAboutWidget;
diff --git a/solidjs-tailwind/src/components/RepoAbout/RepoAbout.spec.jsx b/solidjs-tailwind/src/components/RepoAbout/RepoAbout.spec.jsx
index d9154e57b..307527df2 100644
--- a/solidjs-tailwind/src/components/RepoAbout/RepoAbout.spec.jsx
+++ b/solidjs-tailwind/src/components/RepoAbout/RepoAbout.spec.jsx
@@ -1,15 +1,63 @@
 import { Router } from '@solidjs/router';
 import { render } from 'solid-testing-library';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { aboutData } from './data';
 import { RepoAboutWidget } from './RepoAbout';
+import { RepoProvider } from '../../contexts/RepoContext';
 
 describe('Repo About', () => {
   let wrapper;
   beforeEach(async () => {
-    wrapper = render(() => (
+    window.fetch = () => {
+      return new Promise((resolve) => {
+        resolve({
+          json: () => {
+            return new Promise((resolve) => {
+              resolve({
+                data: {
+                  repository: {
+                    isPrivate: false,
+                    forkCount: 1,
+                    description: 'Test Repo',
+                    homepageUrl: 'http://localhost',
+                    readme: {
+                      text: '# Test Repo',
+                    },
+                    stargazerCount: 1,
+                    issues: {
+                      totalCount: 1,
+                    },
+                    topics: {
+                      nodes: [
+                        {
+                          topic: {
+                            name: 'test',
+                          },
+                        },
+                      ],
+                    },
+                    watchers: {
+                      totalCount: 1,
+                    },
+                    pullRequests: {
+                      totalCount: 1,
+                    },
+                    owner: {
+                      orgName: 'test',
+                    },
+                  },
+                },
+              });
+            });
+          },
+        });
+      });
+    };
+
+    wrapper = await render(() => (
       <Router>
-        <RepoAboutWidget {...aboutData} />
+        <RepoProvider>
+          <RepoAboutWidget />
+        </RepoProvider>
       </Router>
     ));
   });
@@ -18,10 +66,12 @@ describe('Repo About', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  it('should show show contents', async () => {
-    const contents = await wrapper.getByTestId('about-info');
-    const topic = await wrapper.getByText(aboutData.info.data.topics[0]);
-    expect(contents.innerHTML).toBeTruthy();
-    expect(topic).toBeVisible();
-  })
-})
+  it('should show contents', () => {
+    setTimeout(async () => {
+      const contents = await wrapper.getByTestId('about-info');
+      const topic = await wrapper.getByText('test');
+      expect(contents.innerHTML).toBeTruthy();
+      expect(topic).toBeVisible();
+    }, 500);
+  });
+});
diff --git a/solidjs-tailwind/src/components/RepoHeading/index.ts b/solidjs-tailwind/src/components/RepoHeading/index.js
similarity index 100%
rename from solidjs-tailwind/src/components/RepoHeading/index.ts
rename to solidjs-tailwind/src/components/RepoHeading/index.js
diff --git a/solidjs-tailwind/src/components/RepoNavigation/index.js b/solidjs-tailwind/src/components/RepoNavigation/index.js
deleted file mode 100644
index 90ad0e1d8..000000000
--- a/solidjs-tailwind/src/components/RepoNavigation/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as default } from './FileExplorerNav';
diff --git a/solidjs-tailwind/src/components/RepoReadMe/RepoReadMe.jsx b/solidjs-tailwind/src/components/RepoReadMe/RepoReadMe.jsx
index ba59fd9da..58201602e 100644
--- a/solidjs-tailwind/src/components/RepoReadMe/RepoReadMe.jsx
+++ b/solidjs-tailwind/src/components/RepoReadMe/RepoReadMe.jsx
@@ -10,35 +10,27 @@ import styles from './RepoReadMe.module.css';
 
 const RepoReadMe = () => {
   const { pathname } = useLocation();
-  const [readme] = useRepo();
+  const {readme} = useRepo();
 
   return (
     <>
-      {readme().isLoading ? (
-        <div>Loading...</div>
+      {readme() ? (
+        <div class={styles.container} data-testid="readme">
+          <header class={styles.header}>
+            <span class={styles.tocIconContainer}>
+              <TOCIcon class={styles.tocIcon} />
+            </span>
+            <span class={styles.filename}>README.md</span>
+          </header>
+          <article class={styles.article}>
+            <SolidMarkdown
+              rehypePlugins={[rehypeRaw, remarkGfm]}
+              children={readme()}
+            />
+          </article>
+        </div>
       ) : (
-        <>
-          {readme().text ? (
-            <>
-              <div class={styles.container} data-testid="readme">
-                <header class={styles.header}>
-                  <span class={styles.tocIconContainer}>
-                    <TOCIcon class={styles.tocIcon} />
-                  </span>
-                  <span class={styles.filename}>README.md</span>
-                </header>
-                <article class={styles.article}>
-                  <SolidMarkdown
-                    rehypePlugins={[rehypeRaw, remarkGfm]}
-                    children={readme().text}
-                  />
-                </article>
-              </div>
-            </>
-          ) : (
-            <>{!pathname.includes('tree') ? <Empty /> : null}</>
-          )}
-        </>
+        <>{!pathname.includes('tree') ? <Empty /> : null}</>
       )}
     </>
   );
diff --git a/solidjs-tailwind/src/contexts/RepoContext.jsx b/solidjs-tailwind/src/contexts/RepoContext.jsx
index 0dae617d3..0cfbaad31 100644
--- a/solidjs-tailwind/src/contexts/RepoContext.jsx
+++ b/solidjs-tailwind/src/contexts/RepoContext.jsx
@@ -1,21 +1,72 @@
-import { createSignal, createEffect,  createContext, useContext } from "solid-js";
+import { useParams } from '@solidjs/router';
+import {
+  createSignal,
+  createEffect,
+  createContext,
+  useContext,
+  createResource,
+} from 'solid-js';
+import getRepoInfo from '../services/get-repo-info';
+import getReadme from '../services/get-readme';
 
 const RepoContext = createContext();
 
 export function RepoProvider(props) {
-  const [readme, setReadme] = createSignal({error: undefined,  text: undefined, isLoading: false});
+  const [loading, setLoading] = createSignal(false);
+  const [readme, setReadme] = createSignal(null);
+  const [info, setInfo] = createSignal({});
+  const params = useParams();
+
+  const isOwnerAndNameValid =
+    typeof params.owner === 'string' && typeof params.name === 'string';
+
+  const [resInfo] = createResource(() =>
+    getRepoInfo(
+      isOwnerAndNameValid
+        ? {
+            owner: params.owner,
+            name: params.name,
+          }
+        : {
+            owner: '',
+            name: '',
+          }
+    )
+  );
+
+  const [resReadMe] = createResource(() =>
+    getReadme({
+      owner: params.owner,
+      name: params.name,
+      expression: params.path
+        ? `HEAD:${params.path}/README.md`
+        : 'HEAD:README.md',
+    })
+  );
 
   createEffect(() => {
-    setReadme(props.readme)
+    if (resInfo() && !resInfo.loading) {
+      setInfo(resInfo());
+    }
+
+    if (resReadMe() && !resReadMe.loading) {
+      setReadme(resReadMe());
+    }
+
+    if (resInfo.loading || resReadMe.loading) {
+      setLoading(true);
+    } else {
+      setLoading(false);
+    }
   });
 
-  const repo = [
-    readme
-  ]
+  const repo = {
+    info, readme, setLoading
+  };
 
   return (
     <RepoContext.Provider value={repo}>
-      {props.children}
+      <>{loading() ? <div>Loading...</div> : props.children}</>
     </RepoContext.Provider>
   );
 }
diff --git a/solidjs-tailwind/src/pages/RepoDetails.jsx b/solidjs-tailwind/src/pages/RepoDetails.jsx
new file mode 100644
index 000000000..2c6787243
--- /dev/null
+++ b/solidjs-tailwind/src/pages/RepoDetails.jsx
@@ -0,0 +1,26 @@
+import FileExplorer from '../components/FileExplorer';
+import RepoReadMe from '../components/RepoReadMe/RepoReadMe';
+import { BranchNavigation } from '../components/BranchNavigation';
+import { RepoAbout } from '../components/RepoAbout';
+
+const RepoDetails = () => {
+  return (
+      <div class="bg-white h-screen">
+        {/* <RepoHeader /> */}
+        <div class="max-w-screen-2xl mx-auto md:py-8 px-4">
+          <div class="grid grid-cols-12 gap-8">
+            <div class="col-span-12 md:col-span-7 xl:col-span-9">
+              <BranchNavigation />
+              <FileExplorer />
+              <RepoReadMe />
+            </div>
+            <div class="col-span-12 md:col-span-5 xl:col-span-3">
+              <RepoAbout />
+            </div>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export default RepoDetails;
diff --git a/solidjs-tailwind/src/pages/RepoTree.jsx b/solidjs-tailwind/src/pages/RepoTree.jsx
new file mode 100644
index 000000000..23ab0176e
--- /dev/null
+++ b/solidjs-tailwind/src/pages/RepoTree.jsx
@@ -0,0 +1,23 @@
+import FileExplorer from '../components/FileExplorer';
+import { RepoProvider } from '../contexts/RepoContext';
+import { BranchNavigation } from '../components/BranchNavigation';
+
+const RepoTree = () => {
+  return (
+    <RepoProvider>
+      <div class="bg-white h-screen">
+        {/* <RepoHeader /> */}
+        <div class="max-w-screen-2xl mx-auto md:py-8 px-4">
+          <div class="grid grid-cols-12 gap-8">
+            <div class="col-span-12 md:col-span-7 xl:col-span-9">
+              <BranchNavigation  />
+              <FileExplorer />
+            </div>
+          </div>
+        </div>
+      </div>
+    </RepoProvider>
+  );
+};
+
+export default RepoTree;
diff --git a/solidjs-tailwind/src/routes.js b/solidjs-tailwind/src/routes.js
index 8757cc00e..a3c64976a 100644
--- a/solidjs-tailwind/src/routes.js
+++ b/solidjs-tailwind/src/routes.js
@@ -4,6 +4,9 @@ const ROUTES = {
   REDIRECT: '/auth/redirect',
   PROFILE: '/:login',
   ORGPROFILE: '/orgs/:org',
+  REPO_DETAILS: '/:owner/:name',
+  REPO_TREE: '/tree/:branch/:path',
+  REPO_BLOB: '/blob/:branch/:path',
 };
 
 export default ROUTES;