diff --git a/app/Presenters/templates/@layout.latte b/app/Presenters/templates/@layout.latte
index 78569a1..9f67c14 100755
--- a/app/Presenters/templates/@layout.latte
+++ b/app/Presenters/templates/@layout.latte
@@ -17,7 +17,7 @@
 	<script src="{='src/scripts/main.js'|asset}" type="module"></script>
 </head>
 
-<body data-controller="body" class="bg-blue-100">
+<body data-controller="body">
 	<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
 
 
diff --git a/src/scripts/App.vue b/src/scripts/App.vue
index 905d781..a35cb47 100644
--- a/src/scripts/App.vue
+++ b/src/scripts/App.vue
@@ -38,14 +38,21 @@
   </div>
   </div>
 </nav>
-  <left-dict :data="trData"></left-dict> 
-  <translation-content></translation-content>
+<div class=" flex flex-row bg-green-100 ">
+  <div id="mobile-menu-2" class="bg-white flex flex-col w-full px-4 border-b lg:border-r lg:h-screen lg:w-64">
+    <left-dict :data="trData"></left-dict>
+  </div>
+  <div class=" flex flex-col w-full px-4" >
+      <translation-content :data="termsData"> </translation-content>
+  </div>
+</div>
 </template>
 
 <script setup>
 import vueTabz from './components/vue-tabz.vue'
 import logoUrl from './assets/logo.png'
 import trData from './components/Translations'
+import termsData from './components/Terms'
 import LeftDict from './components/LeftDict.vue'
 import SearchForm from './components/SearchForm.vue'
 import TranslationContent from './components/Translation.vue'
diff --git a/src/scripts/components/LeftDict.vue b/src/scripts/components/LeftDict.vue
index 3d0a01b..5a9cf2d 100644
--- a/src/scripts/components/LeftDict.vue
+++ b/src/scripts/components/LeftDict.vue
@@ -5,8 +5,6 @@ export default {
 </script>
 
 <template>
-<div id="mobile-menu-2" class="min-h-screen flex flex-row bg-green-100 ">
-  <div class="bg-white overflow-hidden flex flex-col w-full px-4 border-b lg:border-r lg:h-screen lg:w-64">
    
     <ul class="flex flex-col py-4">
       <li v-for="(t, i) in data.translations" :key="i"> 
@@ -17,8 +15,6 @@ export default {
       </li>
       
     </ul>
-  </div>
-</div>
 
 
 </template>
diff --git a/src/scripts/components/Terms.js b/src/scripts/components/Terms.js
index bce38cf..2942153 100644
--- a/src/scripts/components/Terms.js
+++ b/src/scripts/components/Terms.js
@@ -1,4 +1,4 @@
-{
+export default {
     "status": "ok",
     "terms": [
       {
@@ -2554,4 +2554,4 @@
         ]
       }
     ]
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/scripts/components/Translation.vue b/src/scripts/components/Translation.vue
index b6d9d96..d232b75 100644
--- a/src/scripts/components/Translation.vue
+++ b/src/scripts/components/Translation.vue
@@ -6,196 +6,45 @@ export default {
 
 <template>
 
-<div class="boxes">
-
-	
-		<table class="e-table" id="snippet--termsComnainer">	
-		<tbody><tr>
-			<th>Vyraz</th><th>Preklad</th><th>Typ</th><th>Member</th>
-		</tr>
-
-		<tr data-url="/search/default/727465?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727465">
-		
-			<td>test</td>
-			<td>test</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727466?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727466">
-		
-			<td>test</td>
-			<td>rozbor</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727467?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727467">
-		
-			<td>test</td>
-			<td>testovanie</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727468?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727468">
-		
-			<td>test</td>
-			<td>testovací</td>
-			<td></td>
-			<td>B</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727469?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727469">
-		
-			<td>test</td>
-			<td>otestovať</td>
-			<td></td>
-			<td>C</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727470?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727470">
-		
-			<td>test</td>
-			<td>testovať</td>
-			<td></td>
-			<td>C</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727471?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727471">
-		
-			<td>test</td>
-			<td>vyskúšať</td>
-			<td></td>
-			<td>C</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727472?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727472">
-		
-			<td>test</td>
-			<td>kritérium</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727473?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727473">
-		
-			<td>test</td>
-			<td>analýza</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727474?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727474">
-		
-			<td>test</td>
-			<td>preverovať</td>
-			<td></td>
-			<td>C</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727475?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727475">
-		
-			<td>test</td>
-			<td>nukleárna skúška</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727476?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727476">
-		
-			<td>test</td>
-			<td>skúšobný výstup</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727477?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727477">
-		
-			<td>test</td>
-			<td>skúška pred kamerou</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727478?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727478">
-		
-			<td>test</td>
-			<td>výsledok skúšky</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727479?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727479">
-		
-			<td>test</td>
-			<td>redakcia</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727480?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727480">
-		
-			<td>test</td>
-			<td>vodičská skúška</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727481?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727481">
-		
-			<td>test</td>
-			<td>lastúra</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727482?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727482">
-		
-			<td>test</td>
-			<td>ladenie</td>
-			<td></td>
-			<td>A</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727483?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727483">
-		
-			<td>test</td>
-			<td>ladiť</td>
-			<td></td>
-			<td>C</td>
-
-		</tr>
-
-		<tr data-url="/search/default/727484?translation=1&amp;term=test&amp;slug=anglicko-slovensky&amp;paginator-page=1&amp;do=getInfo" id="snippet--term-727484">
-		
-			<td>test</td>
-			<td>osvedčiť</td>
-			<td></td>
-			<td>C</td>
-
-		</tr>
-		</tbody></table>
-
-	</div>
+<div class="border-b dark:border-slate-600 shadow-sm overflow-hidden my-8">
+<div class="flex flex-col justify-center">
+    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 min-w-full sm:px-6 lg:px-8">
+            <div class="overflow-hidden shadow-md sm:rounded-lg flex justify-center">
+                <table class="min-w-fit">
+                    <thead class="bg-gray-100 dark:bg-gray-700">
+                        <tr>
+                            <th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
+                                Výraz
+                            </th>
+                            <th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
+                                Preklad
+                            </th>
+                            <th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
+                                Člen
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(t, i) in data.terms" :key="i" 
+							class="border-b odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700 dark:border-gray-600">
+                            <td class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                                {{ t.string1 }}
+                            </td>
+                            <td class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+                                {{ t.string2 }}
+                            </td>
+                            <td class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+                                {{ t.member }}
+                            </td>
+                        </tr>
 
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>		
+</div>
 
 </template>
\ No newline at end of file

Vyraz	Preklad	Member
test	test	A
test	rozbor	A
test	testovanie	A
test	testovací	B
test	otestovať	C
test	testovať	C
test	vyskúšať	C
test	kritérium	A
test	analýza	A
test	preverovať	C
test	nukleárna skúška	A
test	skúšobný výstup	A
test	skúška pred kamerou	A
test	výsledok skúšky	A
test	redakcia	A
test	vodičská skúška	A
test	lastúra	A
test	ladenie	A
test	ladiť	C
test	osvedčiť	C