diff --git a/src/components/Media/Media.css b/src/components/Media/Media.css
new file mode 100644
index 0000000..3102893
--- /dev/null
+++ b/src/components/Media/Media.css
@@ -0,0 +1,4 @@
+.media img, .media video {
+    max-width: 100%;
+    max-height: 100%;
+}
\ No newline at end of file
diff --git a/src/components/MediaPreview/index.tsx b/src/components/Media/index.tsx
similarity index 85%
rename from src/components/MediaPreview/index.tsx
rename to src/components/Media/index.tsx
index f694d38..e37f14f 100644
--- a/src/components/MediaPreview/index.tsx
+++ b/src/components/Media/index.tsx
@@ -2,6 +2,8 @@ import React, {FunctionComponent} from "react";
 import {MediaFile} from "../../database/file";
 import {MediaFileType} from "../../database/file-type";
 
+import "./Media.css"
+
 export type MediaPreviewProps = {
     basePath: string,
     file: MediaFile
@@ -11,19 +13,19 @@ const MediaPreview: FunctionComponent<MediaPreviewProps> = ({basePath, file}) =>
     switch (file.getType()) {
         case MediaFileType.unknown:
             return (
-                <div>
+                <div className="media">
                     unknown file type
                 </div>
             )
         case MediaFileType.video:
             return (
-                <div>
+                <div className="media">
                     videos not yet supported
                 </div>
             )
         case MediaFileType.image:
             return (
-                <div>
+                <div className="media">
                     <img src={"media://" + basePath + "/" + file.getPath()} alt={file.getPath()} />
                 </div>
             )
diff --git a/src/components/MediaDetails/index.tsx b/src/components/MediaDetails/index.tsx
index 9f04d32..29cbac1 100644
--- a/src/components/MediaDetails/index.tsx
+++ b/src/components/MediaDetails/index.tsx
@@ -1,6 +1,6 @@
 import React, {FunctionComponent, useEffect, useState} from "react";
 import {MediaFile} from "../../database/file";
-import MediaPreview from "../MediaPreview";
+import MediaPreview from "../Media";
 import Autocomplete from "../Autocomplete";
 
 export type MediaDetailsProps = {
diff --git a/src/components/MediaList/MediaList.css b/src/components/MediaList/MediaList.css
new file mode 100644
index 0000000..43ac848
--- /dev/null
+++ b/src/components/MediaList/MediaList.css
@@ -0,0 +1,4 @@
+.media-list {
+    display: flex;
+    flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/src/components/MediaList/index.tsx b/src/components/MediaList/index.tsx
index 93d4120..d4de3d9 100644
--- a/src/components/MediaList/index.tsx
+++ b/src/components/MediaList/index.tsx
@@ -4,6 +4,8 @@ import MediaListItem from "../MediaListItem";
 import {Query} from "../../database/query";
 import PageControl from "../PageControl";
 
+import "./MediaList.css"
+
 const pageLimit = 10
 
 export type MediaListProps = {
@@ -31,11 +33,13 @@ const MediaList: FunctionComponent<MediaListProps> = ({basePath, query, onSelect
             { size > 0 &&
                 <>
                     <PageControl current={page} max={maxPage} onChange={setPage} />
-                    {
-                        files.map(f => (
-                            <MediaListItem key={f.getPath()} basePath={basePath} file={f} onClick={onSelect}/>
-                        ))
-                    }
+                    <div className="media-list">
+                        {
+                            files.map(f => (
+                                <MediaListItem key={f.getPath()} basePath={basePath} file={f} onClick={onSelect}/>
+                            ))
+                        }
+                    </div>
                     <PageControl current={page} max={maxPage} onChange={setPage} />
                 </>
             }
diff --git a/src/components/MediaListItem/MediaListItem.css b/src/components/MediaListItem/MediaListItem.css
new file mode 100644
index 0000000..3ef6aba
--- /dev/null
+++ b/src/components/MediaListItem/MediaListItem.css
@@ -0,0 +1,6 @@
+.media-list-item {
+    width: 150px;
+    height: 150px;
+    margin: 10px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/MediaListItem/index.tsx b/src/components/MediaListItem/index.tsx
index d0daf94..5062083 100644
--- a/src/components/MediaListItem/index.tsx
+++ b/src/components/MediaListItem/index.tsx
@@ -1,6 +1,8 @@
 import React, {FunctionComponent} from "react";
 import {MediaFile} from "../../database/file";
-import MediaPreview from "../MediaPreview";
+import MediaPreview from "../Media";
+
+import "./MediaListItem.css"
 
 export type MediaListItemProps = {
     basePath: string,
@@ -10,7 +12,7 @@ export type MediaListItemProps = {
 
 const MediaListItem: FunctionComponent<MediaListItemProps> = ({basePath, file, onClick}) => {
     return (
-        <div onClick={() => onClick(file)}>
+        <div onClick={() => onClick(file)} className="media-list-item">
             <MediaPreview basePath={basePath} file={file} />
         </div>
     )
diff --git a/src/components/PageControl/PageControl.css b/src/components/PageControl/PageControl.css
new file mode 100644
index 0000000..407677c
--- /dev/null
+++ b/src/components/PageControl/PageControl.css
@@ -0,0 +1,3 @@
+.page-control {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/PageControl/index.tsx b/src/components/PageControl/index.tsx
index a6001c0..3699b4f 100644
--- a/src/components/PageControl/index.tsx
+++ b/src/components/PageControl/index.tsx
@@ -1,5 +1,7 @@
 import React, {FunctionComponent} from "react";
 
+import "./PageControl.css"
+
 export type PageControlProps = {
     current: number,
     max: number,
@@ -8,7 +10,7 @@ export type PageControlProps = {
 
 const PageControl: FunctionComponent<PageControlProps> = ({current, max, onChange}) => {
     return (
-        <div>
+        <div className="page-control">
             <button
                 onClick={() => onChange(current - 1)}
                 disabled={current == 0}
diff --git a/src/components/Sidebar/Sidebar.css b/src/components/Sidebar/Sidebar.css
new file mode 100644
index 0000000..6393c3a
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.css
@@ -0,0 +1,6 @@
+.sidebar {
+    position: fixed;
+    width: 300px;
+    height: 100%;
+    background-color: #4BD5F2;
+}
\ No newline at end of file
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index f4bac3c..f8aa7e5 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -1,5 +1,6 @@
 import React, {FunctionComponent} from "react";
 import {CountedTag} from "../../database/query";
+import "./Sidebar.css"
 
 export type SidebarProps = {
     countedTags: CountedTag[],
@@ -9,7 +10,7 @@ export type SidebarProps = {
 
 const Sidebar: FunctionComponent<SidebarProps> = ({countedTags, selected, onSelect}) => {
     return (
-        <div>
+        <div className="sidebar">
             <ul>
                 {
                     countedTags.map(t => (
diff --git a/src/views/Home/Home.css b/src/views/Home/Home.css
new file mode 100644
index 0000000..c813973
--- /dev/null
+++ b/src/views/Home/Home.css
@@ -0,0 +1,10 @@
+body {
+    background-color: #DEDEEE;
+    padding: 0;
+    margin: 0;
+}
+
+.main {
+    margin-left: 300px;
+    box-sizing: inherit;
+}
\ No newline at end of file
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index 9d3c589..664f777 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -7,7 +7,9 @@ import {Database} from "../../database/database";
 import MediaDetails from "../../components/MediaDetails";
 import Repository from "../../repository";
 import {ipcRenderer} from "electron";
-import MediaPreview from "../../components/MediaPreview";
+import MediaPreview from "../../components/Media";
+
+import "./Home.css"
 
 const OPEN_REPOSITORY_MESSAGE_NAME = "MSG_OPEN_REPO"
 
@@ -113,40 +115,42 @@ const Home: FunctionComponent<HomeProps> = () => {
                             setTags(_tags)
                         }}
                     />
-                    { selected &&
-                        <>
-                            <button onClick={() => setSelected(null)}>Back</button>
-                            <MediaDetails basePath={basePath} file={selected} onUpdate={mediaUpdate} allTags={allTags} />
-                        </>
-                    }
-                    { !selected && showUntagged &&
-                        <>
-                            <h1>Untagged</h1>
-                            <button onClick={() => setShowUntagged(false)}>Back</button>
-                            { untagged.map(u => new MediaFile(u)).map(u => (
-                                <div
-                                    onClick={() => {
-                                    setSelected(u)
-                                }}
-                                    key={u.getPath()}
-                                >
-                                    <MediaPreview basePath={basePath} file={u} />
-                                </div>
-                            ))}
-                        </>
-                    }
-                    { !selected && !showUntagged &&
-                        <>
-                            { untagged.length > 0 &&
-                                <a
-                                    onClick={() => setShowUntagged(true) }
-                                >
-                                    {untagged.length} untagged files
-                                </a>
-                            }
-                            <MediaList basePath={basePath} query={query} onSelect={setSelected} />
-                        </>
-                    }
+                    <div className="main">
+                        { selected &&
+                            <>
+                                <button onClick={() => setSelected(null)}>Back</button>
+                                <MediaDetails basePath={basePath} file={selected} onUpdate={mediaUpdate} allTags={allTags} />
+                            </>
+                        }
+                        { !selected && showUntagged &&
+                            <>
+                                <h1>Untagged</h1>
+                                <button onClick={() => setShowUntagged(false)}>Back</button>
+                                { untagged.map(u => new MediaFile(u)).map(u => (
+                                    <div
+                                        onClick={() => {
+                                        setSelected(u)
+                                    }}
+                                        key={u.getPath()}
+                                    >
+                                        <MediaPreview basePath={basePath} file={u} />
+                                    </div>
+                                ))}
+                            </>
+                        }
+                        { !selected && !showUntagged &&
+                            <>
+                                { untagged.length > 0 &&
+                                    <a
+                                        onClick={() => setShowUntagged(true) }
+                                    >
+                                        {untagged.length} untagged files
+                                    </a>
+                                }
+                                <MediaList basePath={basePath} query={query} onSelect={setSelected} />
+                            </>
+                        }
+                    </div>
                 </>
             }
         </div>