diff --git a/web/src/App.tsx b/web/src/App.tsx
index 763183c..4449bd9 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { Component, JSXElement, createSignal } from 'solid-js'
+import { Component } from 'solid-js'
 import { Route, Router } from '@solidjs/router'
 
 import styles from './css/menu.module.css';
diff --git a/web/src/css/menu.module.css b/web/src/css/menu.module.css
index be4e235..27d761f 100644
--- a/web/src/css/menu.module.css
+++ b/web/src/css/menu.module.css
@@ -14,6 +14,15 @@
   margin-right: 1ch;
 }
 
+.menu li a {
+  color: black;
+  text-decoration: none;
+}
+
+.menu li a:hover {
+  text-decoration: underline;
+}
+
 .active {
   font-weight: bold;
 }
\ No newline at end of file
diff --git a/web/src/harmonie/GribFile.tsx b/web/src/harmonie/GribFile.tsx
index 969d1ea..2ae134d 100644
--- a/web/src/harmonie/GribFile.tsx
+++ b/web/src/harmonie/GribFile.tsx
@@ -24,7 +24,7 @@ export const GribFile: Component<{
         class={isActive() ? styles.active : ''}
         onClick={onFileClick}
     >
-        <div class={styles.name}>{ name }</div>
+        <div class={styles.name}>{ trimName(name) }</div>
         <ul class={styles.meteoParams}>
             { getStructure().map(grib => 
                 <li>{ grib.title }</li>
@@ -32,4 +32,11 @@ export const GribFile: Component<{
         </ul>
     </li>
 
-}
\ No newline at end of file
+}
+
+function trimName(title: string): string {
+    let result = title
+    result = result.replace('harmonie_', '')
+    result = result.replace('.grib', '')
+    return result
+}
diff --git a/web/src/harmonie/Harmonie.tsx b/web/src/harmonie/Harmonie.tsx
index 5414d9b..5500fe0 100644
--- a/web/src/harmonie/Harmonie.tsx
+++ b/web/src/harmonie/Harmonie.tsx
@@ -15,16 +15,18 @@ export const Harmonie: Component<{}> = () => {
             setFileList(fileList)
         })
 
-    return <div>
-        Harmonie
-        <ul class={styles.fileList}>
-            {getFileList().map(fileName =>
-                <GribFile 
-                    name={fileName}
-                    isActive={() => getActiveGrib() === fileName}
-                    onClick={() => setActiveGrib(fileName)}
-                />
-            )}
-        </ul>
+    return <div class={styles.container}>
+        <div class={styles.column}>
+            <ul class={styles.fileList}>
+                {getFileList().map(fileName =>
+                    <GribFile 
+                        name={fileName}
+                        isActive={() => getActiveGrib() === fileName}
+                        onClick={() => setActiveGrib(fileName)}
+                    />
+                )}
+            </ul>
+        </div>
+        <div class={styles.column}>here goes pictures</div>
     </div>
 }
diff --git a/web/src/harmonie/harmonie.module.css b/web/src/harmonie/harmonie.module.css
index a94b8bf..4ff510a 100644
--- a/web/src/harmonie/harmonie.module.css
+++ b/web/src/harmonie/harmonie.module.css
@@ -1,3 +1,36 @@
+.container {
+    display: flex;
+    min-height: 100vh;
+}
+
+.container .column {
+    flex: 1;
+    box-sizing: border-box;
+    text-align: left;
+}
+
+.container .column:nth-child(1) {
+    padding: 0;
+    flex-basis: 20%;
+    background-color: #f2f2f2;
+    min-width: 320px;
+}
+
+.container .column:nth-child(2) {
+    padding: 10px;
+    flex-basis: 80%;
+    background-color: #fff;
+    min-width: 1000px;
+}
+
+
+
+
+/* fileList */
+.fileList {
+    padding: 0;
+}
+
 .fileList li {
     padding: 5px 0;
 }
@@ -16,3 +49,8 @@
 .fileList li.active .meteoParams {
     display: block;
 }
+
+/* meteoParam */
+.meteoParams li:hover {
+    text-decoration: underline;
+}
\ No newline at end of file