diff --git a/assets/gear-icon-72a7cf.svg b/assets/gear-icon-72a7cf.svg
new file mode 100644
index 0000000..e20d7b8
--- /dev/null
+++ b/assets/gear-icon-72a7cf.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256" width="96" height="96">
+  <path d="m107.75 22.159v21.571c-8.835 2.117-17.286 5.608-25.04 10.347l-15.234-15.234-28.632 28.634 15.26 15.26c-4.7448 7.7444-8.2443 16.186-10.371 25.016h-21.573v40.493h21.571c2.1161 8.8382 5.6076 17.289 10.347 25.043l-15.234 15.234 28.632 28.634 15.262-15.262c7.7444 4.7448 16.186 8.2443 25.016 10.371v21.573h40.493v-21.571c8.8375-2.1163 17.288-5.6078 25.041-10.347l15.236 15.236 28.632-28.634-15.26-15.26c4.745-7.745 8.2445-16.187 10.371-25.018h21.573v-40.493h-21.571c-2.1163-8.8375-5.6078-17.288-10.347-25.041l15.25-15.222-28.64-28.634-15.26 15.26c-7.745-4.745-16.187-8.2445-25.018-10.371v-21.573h-40.493zm20.247 57.537a48.303 48.303 0 0 1 48.3 48.304 48.303 48.303 0 0 1 -48.3 48.3 48.303 48.303 0 0 1 -48.303 -48.3 48.303 48.303 0 0 1 48.303 -48.304z" fill-rule="evenodd" fill="#72a7cf"/>
+</svg>
diff --git a/components/ContentHeader/index.tsx b/components/ContentHeader/index.tsx
index 073e2eb..74a3df5 100644
--- a/components/ContentHeader/index.tsx
+++ b/components/ContentHeader/index.tsx
@@ -4,9 +4,12 @@ import HamburgerIcon from 'assets/icons/hamburger.svg';
 import UnionIcon from 'assets/icons/union.svg';
 import Dropdown from 'components/Dropdown';
 import usePods from 'hooks/usePods';
+import { useRouter } from 'next/router';
 
 const ContentHeader = () => {
   const { pods } = usePods();
+  const router = useRouter();
+  const { slug = '/' } = router.query;
 
   return (
     <div className="my-6 flex justify-between">
@@ -15,7 +18,7 @@ const ContentHeader = () => {
           <FolderIcon />
         </Dropdown>
         <span className="text-xl font-semibold text-purple">
-          Pod 2 / Folder 111
+          {slug[0]} {slug[1] && `/ ${slug[1]}`}
         </span>
       </div>
 
diff --git a/components/DirsGrid/index.tsx b/components/DirsGrid/index.tsx
new file mode 100644
index 0000000..dc4caae
--- /dev/null
+++ b/components/DirsGrid/index.tsx
@@ -0,0 +1,34 @@
+import { PodDir } from 'contexts/Dirs';
+import Link from 'next/link';
+
+interface Props {
+  pod: string;
+  dirs: PodDir[];
+}
+
+const DirsGrid = ({ pod, dirs }: Props) => {
+  return (
+    <div className="flex flex-wrap my-6">
+      {dirs &&
+        dirs.map((dir, key: number) => (
+          <div key={key} className="text-purple">
+            <Link href={`/pods/${pod}/${dir.name}`}>
+              <a className="inline-block w-72 h-72 mr-12 rounded-lg bg-gray"></a>
+            </Link>
+            <footer className="px-2 py-3">
+              <div>
+                <strong>{dir.name}</strong>
+              </div>
+              <div>
+                {new Intl.DateTimeFormat('en-GB', {
+                  dateStyle: 'long',
+                }).format(Number(dir.creation_time) * 1000)}
+              </div>
+            </footer>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default DirsGrid;
diff --git a/components/Dropdown/index.tsx b/components/Dropdown/index.tsx
index 31aa241..9919f76 100644
--- a/components/Dropdown/index.tsx
+++ b/components/Dropdown/index.tsx
@@ -6,7 +6,7 @@ import useOnClickOutside from 'use-onclickoutside';
 
 export interface DropdownItem {
   title: string;
-  href?: string;
+  slug?: string;
 }
 
 type Props = {
@@ -44,13 +44,16 @@ const Dropdown = ({
         {children}
       </Button>
       {show && (
-        <div className="absolute top-full left-0 right-0 min-w-min whitespace-nowrap mt-1 py-3 bg-white rounded-md border-blue border">
+        <div className="z-10 absolute top-full left-0 right-0 min-w-min whitespace-nowrap mt-1 py-3 bg-white rounded-md border-blue border">
           <ul>
             {options.map((option: DropdownItem, ix: number) => (
               <li key={`${ix}${option.title}`}>
-                {option.href ? (
-                  <Link href={option.href}>
-                    <a className="block py-1 px-6 hover:bg-indigo-300">
+                {option.slug ? (
+                  <Link href={option.slug}>
+                    <a
+                      className="block py-1 px-6 hover:bg-indigo-300"
+                      onClick={() => setShow(false)}
+                    >
                       {option.title}
                     </a>
                   </Link>
diff --git a/components/ImageGrid/ImageGrid.module.scss b/components/ImageGrid/ImageGrid.module.scss
new file mode 100644
index 0000000..de169b4
--- /dev/null
+++ b/components/ImageGrid/ImageGrid.module.scss
@@ -0,0 +1,4 @@
+.imageGridItem {
+  height: 180px;
+  padding: 6px;
+}
diff --git a/components/ImageGrid/index.tsx b/components/ImageGrid/index.tsx
new file mode 100644
index 0000000..51db2de
--- /dev/null
+++ b/components/ImageGrid/index.tsx
@@ -0,0 +1,27 @@
+import classes from './ImageGrid.module.scss';
+
+interface Props {
+  images: string[];
+  className?: string;
+}
+
+const ImageGrid = ({ images }: Props) => {
+  return (
+    <div className={classes.content}>
+      <div className="flex flex-wrap">
+        {images && !!images.length
+          ? images.map((file, key: number) => (
+              <img
+                className={classes.imageGridItem}
+                src={file}
+                key={String(key) + file}
+                alt={String(key)}
+              />
+            ))
+          : 'No photos'}
+      </div>
+    </div>
+  );
+};
+
+export default ImageGrid;
diff --git a/components/Sidebar/Sidebar.module.scss b/components/Sidebar/Sidebar.module.scss
index 286ea0b..1303b50 100644
--- a/components/Sidebar/Sidebar.module.scss
+++ b/components/Sidebar/Sidebar.module.scss
@@ -1,5 +1,15 @@
 .root {
-  // display: flex;
+  @apply absolute;
+  @apply left-0;
+  @apply top-0;
+  @apply z-0;
+  @apply w-48;
+  @apply lg:w-72;
+  @apply px-6;
+  @apply py-20;
+  @apply bg-white;
+  @apply shadow-xl;
+  @apply min-h-full;
 }
 
 .list {
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index d2d17bf..28d359d 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -12,9 +12,7 @@ const Sidebar = () => {
   const { slug = '/' } = router.query;
 
   return (
-    <aside
-      className={`fixed left-0 top-0 bottom-0 z-0 w-48 lg:w-72 px-6 pt-20 bg-white shadow-xl ${classes.root}`}
-    >
+    <aside className={classes.root}>
       <header className="font-semibold text-2xl text-purple my-6">
         Your Pods
       </header>
diff --git a/components/Spinner/index.tsx b/components/Spinner/index.tsx
new file mode 100644
index 0000000..17d553f
--- /dev/null
+++ b/components/Spinner/index.tsx
@@ -0,0 +1,11 @@
+import GearIcon from 'assets/gear-icon-72a7cf.svg';
+
+const Spinner = () => {
+  return (
+    <div className="inline-block animate-spin-slow">
+      <GearIcon />
+    </div>
+  );
+};
+
+export default Spinner;
diff --git a/components/Topbar/index.tsx b/components/Topbar/index.tsx
index e125ba6..52c825c 100644
--- a/components/Topbar/index.tsx
+++ b/components/Topbar/index.tsx
@@ -14,7 +14,7 @@ const Topbar = () => {
 
   return (
     <header
-      className={`fixed flex top-0 left-0 right-0 z-10 h-20 bg-gray ${classes.root}`}
+      className={`fixed flex top-0 left-0 right-0 z-10 h-20 bg-blue ${classes.root}`}
     >
       <div className="w-72 pl-5">
         <Link href="/">
diff --git a/contexts/Dirs.tsx b/contexts/Dirs.tsx
new file mode 100644
index 0000000..d555e90
--- /dev/null
+++ b/contexts/Dirs.tsx
@@ -0,0 +1,20 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+export type PodDir = {
+  access_time: string;
+  content_type: string;
+  creation_time: string;
+  modification_time: string;
+  name: string;
+};
+
+export interface DirsContextProps {
+  dirs: PodDir[];
+  setDirs: Dispatch<SetStateAction<PodDir[]>>;
+}
+
+export const DirsContext = createContext<DirsContextProps>(
+  {} as DirsContextProps
+);
+
+export default DirsContext.Provider;
diff --git a/contexts/Files.tsx b/contexts/Files.tsx
new file mode 100644
index 0000000..7a69693
--- /dev/null
+++ b/contexts/Files.tsx
@@ -0,0 +1,22 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+export type PodFile = {
+  access_time: string;
+  block_size: string;
+  content_type: string;
+  creation_time: string;
+  modification_time: string;
+  name: string;
+  size: string;
+};
+
+export interface FilesContextProps {
+  files: string[];
+  setFiles: Dispatch<SetStateAction<string[]>>;
+}
+
+export const FilesContext = createContext<FilesContextProps>(
+  {} as FilesContextProps
+);
+
+export default FilesContext.Provider;
diff --git a/helpers/urlPath.ts b/helpers/urlPath.ts
new file mode 100644
index 0000000..6d6589b
--- /dev/null
+++ b/helpers/urlPath.ts
@@ -0,0 +1,3 @@
+export default function urlPath(path: string): string {
+  return path.replace(/&/g, '/');
+}
diff --git a/hooks/useDirs.tsx b/hooks/useDirs.tsx
new file mode 100644
index 0000000..b0a49ab
--- /dev/null
+++ b/hooks/useDirs.tsx
@@ -0,0 +1,6 @@
+import { DirsContext } from 'contexts/Dirs';
+import { useContext } from 'react';
+
+const useDirs = () => useContext(DirsContext);
+
+export default useDirs;
diff --git a/hooks/useFairOs.tsx b/hooks/useFairOs.tsx
index 680e7bb..bcd5c3c 100644
--- a/hooks/useFairOs.tsx
+++ b/hooks/useFairOs.tsx
@@ -1,8 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-useless-catch */
-// import qs from 'qs';
 import axios from 'axios';
+import { PodDir } from 'contexts/Dirs';
 import { PodItem } from 'contexts/Pods';
+import { PodFile } from 'contexts/Files';
 import useUser from 'hooks/useUser';
+import { Dispatch, SetStateAction, useState } from 'react';
 
 interface Payload {
   username?: string;
@@ -20,7 +23,14 @@ const host = process.env.NEXT_PUBLIC_FAIROSHOST;
 
 const podNameDefault = 'Home';
 
+export interface DownloadFilesPayload {
+  podName: string;
+  directory: string;
+  files: any;
+}
+
 const useFairOs = () => {
+  const [abortList, setAbortList] = useState<AbortController[]>([]);
   const { user } = useUser();
 
   const login = async (payload: Payload) => {
@@ -126,7 +136,18 @@ const useFairOs = () => {
         withCredentials: true,
       });
 
-      return response;
+      const filteredResponse: { dirs: PodDir[]; files: PodFile[] } = {
+        dirs: response.data.dirs,
+        files: [],
+      };
+
+      // filter out non-images
+      response?.data?.files?.forEach((file: PodFile) => {
+        if (file.content_type.search('image/') !== -1)
+          filteredResponse.files.push(file);
+      });
+
+      return filteredResponse;
     } catch (error) {
       throw error;
     }
@@ -142,11 +163,15 @@ const useFairOs = () => {
       },
       withCredentials: true,
     });
-
     return response;
   };
 
   const openPod = async (podName: string) => {
+    abortList.forEach((controller) => {
+      controller.abort();
+    });
+    setAbortList([]);
+
     try {
       const openPod = await axios({
         baseURL: host,
@@ -176,7 +201,7 @@ const useFairOs = () => {
     const podsWithHref: PodItem[] = [];
 
     data.pod_name.forEach((pod: string) => {
-      if (pod.toLowerCase() === 'home') {
+      if (pod === 'Home') {
         podsWithHref.push({
           title: pod,
           slug: '/',
@@ -184,7 +209,7 @@ const useFairOs = () => {
       } else {
         podsWithHref.push({
           title: pod,
-          slug: `/pods/${pod.toLowerCase()}`,
+          slug: `/pods/${pod}`,
         });
       }
     });
@@ -192,6 +217,70 @@ const useFairOs = () => {
     return podsWithHref;
   };
 
+  const downloadFilePreview = async (
+    filename: string,
+    directory: string,
+    podName: string
+  ) => {
+    const controller = new AbortController();
+    let writePath = '';
+
+    if (directory === 'root') {
+      writePath = '/';
+    } else {
+      writePath = '/' + directory + '/';
+    }
+
+    const formData = new FormData();
+
+    formData.append('pod_name', podName);
+    formData.append('file_path', writePath + filename);
+
+    setAbortList((list) => {
+      return [...list, controller];
+    });
+
+    try {
+      const downloadFile = await axios.post(host + 'file/download', formData, {
+        data: formData,
+        responseType: 'blob',
+        withCredentials: true,
+        signal: controller.signal,
+      });
+
+      return downloadFile.data;
+    } catch (err) {
+      return err;
+    }
+  };
+
+  const downloadAllFiles = (
+    payload: DownloadFilesPayload,
+    setFiles: Dispatch<SetStateAction<string[]>>,
+    callback: () => void
+  ) => {
+    const { files, directory, podName } = payload;
+
+    if (files !== null && files !== undefined) {
+      files.map(async (entry: any) => {
+        const url = window.URL.createObjectURL(
+          await downloadFilePreview(entry.name, directory, podName)
+        );
+
+        // Incremental loading
+        setFiles((list) => {
+          return [...list, url];
+        });
+      });
+
+      callback && callback();
+
+      return files;
+    }
+
+    return null;
+  };
+
   return {
     login,
     logout,
@@ -200,6 +289,8 @@ const useFairOs = () => {
     getPods,
     getPodsWithHref,
     openPod,
+    downloadFilePreview,
+    downloadAllFiles,
   };
 };
 
diff --git a/hooks/useFiles.tsx b/hooks/useFiles.tsx
new file mode 100644
index 0000000..b88f7c8
--- /dev/null
+++ b/hooks/useFiles.tsx
@@ -0,0 +1,6 @@
+import { FilesContext } from 'contexts/Files';
+import { useContext } from 'react';
+
+const useFiles = () => useContext(FilesContext);
+
+export default useFiles;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 66a455e..97bf3ea 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,6 +7,8 @@ import Router from 'next/router';
 import AppProvider from 'contexts/App';
 import UserProvider from 'contexts/User';
 import PodsProvider from 'contexts/Pods';
+import FilesProvider from 'contexts/Files';
+import DirsProvider from 'contexts/Dirs';
 import useFairOs from 'hooks/useFairOs';
 
 const localUser =
@@ -14,6 +16,8 @@ const localUser =
   JSON.parse(localStorage.getItem('user'));
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
+  const [files, setFiles] = useState([]);
+  const [dirs, setDirs] = useState([]);
   const [sidebarVisible, setSidebarVisible] = useState(false);
   const [pods, setPods] = useState([]);
   const [user, setUser] = useState(
@@ -63,7 +67,11 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
       <AppProvider value={{ sidebarVisible, setSidebarVisible }}>
         <UserProvider value={userProviderValue}>
           <PodsProvider value={{ pods, setPods }}>
-            <Component {...pageProps} />
+            <DirsProvider value={{ dirs, setDirs }}>
+              <FilesProvider value={{ files, setFiles }}>
+                <Component {...pageProps} />
+              </FilesProvider>
+            </DirsProvider>
           </PodsProvider>
         </UserProvider>
       </AppProvider>
diff --git a/pages/index.tsx b/pages/index.tsx
index 37508e8..903efa3 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -11,21 +11,44 @@ import AlertIcon from 'assets/icons/alert.svg';
 import PlusIcon from 'assets/icons/plus.svg';
 import Button from 'components/Button';
 import useFairOs from 'hooks/useFairOs';
+import ImageGrid from 'components/ImageGrid';
+import Spinner from 'components/Spinner';
+import useFiles from 'hooks/useFiles';
+import useDirs from 'hooks/useDirs';
+import DirsGrid from 'components/DirsGrid';
 
 const Home: NextPage = () => {
-  const { openPod, getDirectory } = useFairOs();
-  const [files, setFiles] = useState(null);
+  const { files, setFiles } = useFiles();
+  const { dirs, setDirs } = useDirs();
+  const { openPod, getDirectory, downloadAllFiles } = useFairOs();
+  const [isPodLoading, setIsPodLoading] = useState(false);
   const router = useRouter();
   const { slug = '/' } = router.query;
   const { user, isAuthenticated } = useUser();
 
+  const podName: string = slug[0] === '/' ? 'Home' : slug[0];
+  const directory: string = !slug[1] ? 'root' : slug[1];
+
   const getPod = async () => {
-    const podName: string = slug === '/' ? 'Home' : slug[0];
+    setIsPodLoading(true);
+    setDirs([]);
+    setFiles([]);
+
     await openPod(podName);
 
-    const { data } = await getDirectory({ podName, directory: 'root' });
+    const { files, dirs } = await getDirectory({ podName, directory });
+
+    setDirs(dirs);
 
-    setFiles(data.files);
+    downloadAllFiles(
+      {
+        podName,
+        directory,
+        files: files,
+      },
+      setFiles,
+      () => setIsPodLoading(false)
+    );
   };
 
   useEffect(() => {
@@ -38,7 +61,7 @@ const Home: NextPage = () => {
     if (user && user.password) {
       getPod();
     }
-  }, [user]);
+  }, [user, slug]);
 
   return (
     isAuthenticated && (
@@ -65,7 +88,19 @@ const Home: NextPage = () => {
           </div>
         </div>
 
-        {JSON.stringify(files)}
+        {isPodLoading && (
+          <div className="my-8">
+            <Spinner />
+          </div>
+        )}
+
+        <div className="w-full">
+          <DirsGrid pod={podName} dirs={dirs} />
+        </div>
+
+        <div className="w-full">
+          <ImageGrid images={files} />
+        </div>
       </Layout>
     )
   );
diff --git a/pages/login.tsx b/pages/login.tsx
index 69c6e29..f7750f0 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -35,7 +35,6 @@ const Login: NextPage = () => {
 
   const onSubmitHandler = async (event: SyntheticEvent) => {
     event.preventDefault();
-    console.log('onSubmitHandler');
 
     const { data } = await login({
       username,
diff --git a/pages/pods/[slug].tsx b/pages/pods/[...slug].tsx
similarity index 100%
rename from pages/pods/[slug].tsx
rename to pages/pods/[...slug].tsx
diff --git a/styles/theme.scss b/styles/theme.scss
index d80809f..b7405e6 100644
--- a/styles/theme.scss
+++ b/styles/theme.scss
@@ -1,3 +1,3 @@
 $color-purple: #434d7e;
-$color-gray: #e2e8f8;
+$color-gray: #e2e5ed;
 $color-blue: #e2e8f8;
diff --git a/tailwind.config.js b/tailwind.config.js
index 77a218b..510d6a6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,11 @@
 module.exports = {
-  content: [
-    // Example content paths...
-    './public/**/*.html',
-    './**/*.{ts,tsx}',
-  ],
+  content: ['./public/**/*.html', './**/*.{ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        'spin-slow': 'spin 3s linear infinite',
+      },
+    },
   },
   plugins: [require('@tailwindcss/aspect-ratio')],
 };
diff --git a/typings.d.ts b/typings.d.ts
new file mode 100644
index 0000000..e69de29