diff --git a/front/js/svelte/records/FilePreview.svelte b/front/js/svelte/records/FilePreview.svelte
index a3ece5b..259cb72 100644
--- a/front/js/svelte/records/FilePreview.svelte
+++ b/front/js/svelte/records/FilePreview.svelte
@@ -1,7 +1,9 @@
 <script>
     import Preview from "../files/Preview.svelte";
     import {fileurl} from "../files/imageserver"
+    import {getContext} from "svelte"
 
+    const channel = getContext("channel");
     export let record;
     export let schema;
 </script>
diff --git a/front/js/svelte/records/Info.svelte b/front/js/svelte/records/Info.svelte
index 5ff5478..c9097dd 100644
--- a/front/js/svelte/records/Info.svelte
+++ b/front/js/svelte/records/Info.svelte
@@ -2,7 +2,7 @@
     import {friendlyDate} from "../../helpers";
     import Avatar from "../account/Avatar.svelte";
     import {usernameById} from "../account/users";
-    import {isEqual, sortBy} from "lodash";
+    import {isEqual} from "lodash";
     import Icon from "../common/Icon.svelte";
     import RevisionCell from "./revisions/RevisionCell.svelte";
     import {getContext} from "svelte";
@@ -123,19 +123,19 @@
         </div>
     </div>
 </div>
-<div class="lx-card  mt-4">
+<div class="revisions">
     {#if schema.revisions > 0}
         <div class="header-small  mb-3">Revisions</div>
         {#each revisions as revision}
-            {#if revision._sys.version != record._sys.version}
+            {#if revision._sys.version !== record._sys.version}
                 <div
-                        class="row  p-2 rounded"
+                        class="revision"
                         class:active={revision._sys.version ===
                         selectedRevision?._sys.version}
                 >
 
-                    <div class="col-2">version {revision._sys.version}</div>
-                    <div class="col-5">
+                    <div class="version">
+                        <span>version {revision._sys.version}</span>
                         <Avatar
                                 name={usernameById(users, revision._sys.updatedBy)}
                                 side={24}
@@ -147,7 +147,7 @@
                         <button
                                 disabled={revision._sys.version ===
                                 selectedRevision?._sys.version}
-                                class="btn btn-sm btn-outline-primary"
+                                class="button"
                                 on:click={(e) => compare(e, revision)}
                         >Compare
                         </button
@@ -164,14 +164,14 @@
 </div>
 <div bind:this={revisionSection}>
     {#if selectedRevision}
-        <div class="mt-4">
+        <div class="selected-revision">
             {#if fieldsWithDiff.length > 0}
                 <p class="text-center fw-bold mb-3 mt-5">
                     If you choose to rollback to this revision
                 </p>
                 <button
                         on:click={rollback}
-                        class="btn  btn-primary mb-5 d-block mx-auto"
+                        class="button"
                 >
                     Rollback to version {selectedRevision._sys.version}
                 </button>
@@ -189,29 +189,25 @@
                                 {field.label}
                             </div> -->
                         <div
-                                class="lx-card row p-4 mb-4 w-100"
+                                class="revision-field"
                                 style="overflow:hidden"
                         >
-                            <div class="col-5">
+                            <div class="compare-left">
                                 <RevisionCell
                                         {field}
                                         side={record.data[field.name]}
                                         colorClass="text-danger"
                                 />
                             </div>
-                            <div class="col-2">
-                                <div
-                                        class="h-100 d-flex align-items-center justify-content-center text-secondary"
-                                >
-                                    <span class="me-1">{field.label}</span>
-                                    <Icon
-                                            icon="angle-right"
-                                            width="12"
-                                            height="12"
-                                    />
-                                </div>
+                            <div class="compare-center">
+                                <span class="me-1">{field.label}</span>
+                                <Icon
+                                        icon="angle-right"
+                                        width="12"
+                                        height="12"
+                                />
                             </div>
-                            <div class="col-5">
+                            <div class="compare-right">
                                 <RevisionCell
                                         edges={selectedRevision._edges}
                                         {field}
@@ -235,22 +231,25 @@
                 </p>
                 {#each Object.entries(edgeFieldsDiff) as [field, edges]}
                     <div
-                            class="lx-card row p-4 mb-4 w-100"
+                            class="revision-references"
                             style="overflow:hidden"
                     >
-                        <div class="col-4">
+                        <div class="reference-field">
                             {field}:
                         </div>
-                        <div class="col-8">
-                            <p class="mb-2 text-danger">Record</p>
+                        <div class="reference-compare">
+
+                            <p class="">Record</p>
                             {#each edges.record as edge}
-                                <RevisionEdgeRow {edge} />
+                                <RevisionEdgeRow {edge}/>
                             {:else}
                                 <p>No references</p>
                             {/each}
-                            <p class="mt-4 mb-2 text-success">Revision</p>
+                        </div>
+                        <div class="reference-compare">
+                            <p class="text-success">Revision</p>
                             {#each edges.revision as edge}
-                                <RevisionEdgeRow {edge} />
+                                <RevisionEdgeRow {edge}/>
                             {:else}
                                 <p>No references</p>
                             {/each}
@@ -263,17 +262,3 @@
     {/if}
 </div>
 
-<style>
-    .label {
-        width: 180px;
-        margin-right: 10px;
-        margin-bottom: 4px;
-        display: inline-block;
-    }
-
-
-    .active {
-        background-color: #eee;
-        border: 1px solid #ccc;
-    }
-</style>
diff --git a/front/js/svelte/records/Preview.js b/front/js/svelte/records/Preview.js
index 694154f..3bd4b23 100644
--- a/front/js/svelte/records/Preview.js
+++ b/front/js/svelte/records/Preview.js
@@ -3,7 +3,6 @@ import {stripHtml} from "../../helpers";
 
 export function previewTitle(schemas, record, graph) {
     let schema = schemas.find((aSchema) => aSchema.name === record?.schema);
-
     if (!schema?.titleTemplate) {
         return noTemplate(schema, record);
     }
@@ -16,17 +15,17 @@ export function previewTitle(schemas, record, graph) {
         .map((segment) => segment[1]) // map to fieldNames
         .filter(fieldName => { // keep only references
             let schemaField = schema.fields.find(f => f.name === fieldName)
-            return schemaField?.info.name === "reference";
+            return ["reference","file"].includes(schemaField?.info.name);
         }).reduce((carry, field) => {  // map to records
-            let edge = graph.edges.find(edge => edge.source === record.id && edge.field === field)
-            let referenceRecord = graph.records.find(rec => rec.id === edge?.target)
+            let edge = graph?.edges.find(edge => edge.source === record.id && edge.field === field)
+            let referenceRecord = graph?.records.find(rec => rec.id === edge?.target)
             carry[field] = previewTitle(schemas, referenceRecord, graph);
             return carry;
         }, {});
+
     recordData = {...recordData, ...referencePreviews}
 
     let render = Mustache.render(schema.titleTemplate, recordData);
-
     if (!render || render === "") {
         return noTemplate(schema, record);
     }
diff --git a/front/js/svelte/records/elements/Reference.svelte b/front/js/svelte/records/elements/Reference.svelte
index 928ac4d..6a24717 100644
--- a/front/js/svelte/records/elements/Reference.svelte
+++ b/front/js/svelte/records/elements/Reference.svelte
@@ -62,6 +62,7 @@
         {#each references as reference (reference.id)}
             <div>
                 <PreviewReference
+                        {graph}
                     record={reference}
                     hasDelete={true}
                     on:remove={removeReference}
diff --git a/front/js/svelte/records/elements/ReferenceInlineButtons.svelte b/front/js/svelte/records/elements/ReferenceInlineButtons.svelte
index ed0d96a..526cddb 100644
--- a/front/js/svelte/records/elements/ReferenceInlineButtons.svelte
+++ b/front/js/svelte/records/elements/ReferenceInlineButtons.svelte
@@ -5,6 +5,8 @@
     import Dialog from "../../dialog/Dialog.svelte";
     import DialogRecord from "../../dialog/DialogRecord.svelte";
     import axios from "axios";
+    import Dropdown from "../../common/Dropdown.svelte";
+
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
     export let schemas;
@@ -56,43 +58,31 @@
 </script>
 
 {#if schemas.length > 1}
-    <button
-            type="button"
-            class:is-first={!recordId}
-            class="button"
-            on:click|preventDefault={(e) => (showOptions = !showOptions)}
+    <div
+            style="display: flex;align-items: center;gap:4px"
     >
-        <Icon width={24} height={24} icon="circle-plus"/>
-    </button>
-
-    {#if showOptions}
-        <div class="bg-light lx-card d-flex">
-            {#each schemas as schema}
-                <div
-                        class="lx-card p-4 text-center me-4"
-                        style="max-width: 250px;"
-                >
-                    <p>{schema.label}</p>
-
-                    <div class="mb-2">
-                        <button
-                                class="btn btn-sm btn-primary"
-                                on:click={(e) =>
-                                createInlineReference(e, schema.name)}
-                        >New
-                        </button>
-                        <button
-                                class="btn btn-sm btn-outline-primary"
-                                on:click={(e) => openBrowseModal(e, schema.name)}
-                        >
-                            <Icon icon="magnifying-glass"/>
-                        </button
-                        >
-                    </div>
+        {#each schemas as schema}
+            <Dropdown>
+                <div slot="button" class:is-first={!recordId}>
+                    {schema.label}
                 </div>
-            {/each}
-        </div>
-    {/if}
+                <button
+                        class=" button"
+                        on:click={(e) =>
+                                createInlineReference(e, schema.name)}
+                >Create New Record
+                </button>
+                <button
+                        class="button"
+                        on:click={(e) => openBrowseModal(e, schema.name)}
+                >
+                    <Icon icon="magnifying-glass"/>
+                    Search
+                </button
+                >
+            </Dropdown>
+        {/each}
+    </div>
 {:else}
     <div style="display:flex;align-items: center;gap: 4px">
         <button
diff --git a/front/js/svelte/records/elements/ReferenceTags.svelte b/front/js/svelte/records/elements/ReferenceTags.svelte
index 8282cf2..efa8595 100644
--- a/front/js/svelte/records/elements/ReferenceTags.svelte
+++ b/front/js/svelte/records/elements/ReferenceTags.svelte
@@ -114,7 +114,7 @@
                         on:click={(e) => insert(e, option)}
                         on:keypress={(e) => insert(e, option)}
                 >
-                    {previewTitle(channel.schemas, option)}
+                    {previewTitle(channel.schemas, option ,graph)}
                 </div>
 
             {:else}
diff --git a/front/js/svelte/records/revisions/RevisionEdgeRow.svelte b/front/js/svelte/records/revisions/RevisionEdgeRow.svelte
index c4e0d0d..ff88e2e 100644
--- a/front/js/svelte/records/revisions/RevisionEdgeRow.svelte
+++ b/front/js/svelte/records/revisions/RevisionEdgeRow.svelte
@@ -1,6 +1,4 @@
 <script>
-    import Preview from "../../files/Preview.svelte";
-    import PreviewCardSmall from "../PreviewCardSmall.svelte";
     import {getContext} from "svelte";
 
     const channel = getContext("channel")
diff --git a/front/sass/_dropdown.scss b/front/sass/_dropdown.scss
index 4cbe27d..aed31c4 100644
--- a/front/sass/_dropdown.scss
+++ b/front/sass/_dropdown.scss
@@ -64,4 +64,10 @@
     flex-shrink: 0;
 
   }
+}
+
+.editor-field{
+  .dropdown-menu {
+    background: var(--p30);
+  }
 }
\ No newline at end of file
diff --git a/front/sass/_revisions.scss b/front/sass/_revisions.scss
new file mode 100644
index 0000000..f0ee286
--- /dev/null
+++ b/front/sass/_revisions.scss
@@ -0,0 +1,87 @@
+.revisions{
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  .revision{
+    justify-content: space-between;
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    background: var(--p20);
+    padding: 12px;
+    border-radius: 12px;
+
+    .version{
+      display: flex;
+      gap: 10px;
+    }
+
+    &.active{
+      background: var(--p30);
+    }
+  }
+}
+
+.selected-revision{
+  margin-top: 30px;
+  align-items: center;
+  background: var(--p20);
+  padding: 12px;
+  border-radius: 12px;
+
+  .button{
+    background: var(--p30);
+  }
+
+  .revision-field{
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--p30);
+    flex: 1;
+    .compare-left{
+      width: 45%;
+      border-radius: 12px;
+      padding: 20px;
+      background: var(--p30);
+    }
+    .compare-right{
+      width: 45%;
+      border-radius: 12px;
+      padding: 20px;
+      background: var(--p30);
+    }
+    .compare-center{
+
+      width: 10%;
+      height: 100%;
+      display: flex;
+      gap: 20px;
+      align-items: center;
+
+
+    }
+  }
+
+
+}
+.reference-field{
+  width: 100px;
+}
+
+.revision-references{
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--p30);
+}
+
+.reference-compare{
+
+  width: 45%;
+  border-radius: 12px;
+  padding: 20px;
+  background: var(--p30);
+}
diff --git a/front/sass/app.scss b/front/sass/app.scss
index 3deda79..a7e611b 100644
--- a/front/sass/app.scss
+++ b/front/sass/app.scss
@@ -68,6 +68,7 @@
 @import "./autocomplete";
 @import "./reference-tags";
 @import "./members";
+@import "./revisions";
 
 body {
   background-color: var(--p10);