diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1a1c8afa..d08cd01f 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -16,6 +16,7 @@ import { ProjectNewComponent } from './projects/components/project-new/project-n
 import { ProjectAddComponent } from './projects/components/project-add/project-add.component';
 import { RecordIDEComponent } from './record-ide/components/record-ide.component';
 import { ConfigComponent } from './config/components/config.component';
+import { ModelDownloadComponent } from './model-download/pages/model-download/model-download.component';
 
 const routes: Routes = [
   {
@@ -27,6 +28,7 @@ const routes: Routes = [
   { path: 'notification-center', component: NotificationCenterComponent, data: { name: 'NotificationCenterComponent' } },
   { path: 'projects/new', component: ProjectNewComponent, data: { name: 'ProjectNewComponent' } },
   { path: 'config', component: ConfigComponent, data: { name: 'ConfigComponent' } },
+  
   {
     path: 'projects/:projectId',
     component: ProjectComponent,
@@ -54,6 +56,7 @@ const routes: Routes = [
         path: 'knowledge-base/:knowledgeBaseId',
         component: KnowledgeBaseDetailsComponent, data: { name: 'KnowledgeBaseDetailsComponent' }
       },
+      { path: 'model-download', component: ModelDownloadComponent, data: { name: 'ModelDownloadComponent' } },
       { path: '**', component: ProjectOverviewComponent, data: { name: 'ProjectOverviewComponent' } },
       //TODO: redirecting to projects overview page and errors
     ],
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 55b29450..6210fb43 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,6 +22,7 @@ import { ConfigModule } from './config/config.module'
 import { IntercomModule } from 'ng-intercom';
 import { NotificationCenterModule } from './notification-center/notification-center.module';
 import { RecordIDEModule } from './record-ide/record-ide.module';
+import { ModelDownloadModule } from './model-download/model-download.module';
 
 @NgModule({
   declarations: [AppComponent],
@@ -40,6 +41,7 @@ import { RecordIDEModule } from './record-ide/record-ide.module';
     ZeroShotModule,
     LabelingModule,
     RecordIDEModule,
+    ModelDownloadModule,
     NotificationCenterModule,
     MonacoEditorModule.forRoot(),
     KnowledgeBasesModule,
diff --git a/src/app/base/components/dropdown/dropdown-helper.ts b/src/app/base/components/dropdown/dropdown-helper.ts
index fb596128..589e5856 100644
--- a/src/app/base/components/dropdown/dropdown-helper.ts
+++ b/src/app/base/components/dropdown/dropdown-helper.ts
@@ -23,6 +23,7 @@ import { FormArray } from "@angular/forms";
  * @textHoverColor {string, optional} - text color on hover for the dropdown options
  * @textSize {string, optional} - text size for the dropdown options
  * @isButtonSampleProjects {boolean, optional} - checks if the button is the specific one for sample project
+ * @isModelDownloaded {boolean[], optional} - checks if the model is downloaded and if so the color of the text is green
  */
 export type DropdownOptions = {
     optionArray: string[] | FormArray[] | any[];
@@ -46,5 +47,6 @@ export type DropdownOptions = {
     textHoverColor?: string;
     textSize?: string;
     isButtonSampleProjects?: boolean;
+    isModelDownloaded: boolean[];
 };
 
diff --git a/src/app/base/components/dropdown/dropdown.component.html b/src/app/base/components/dropdown/dropdown.component.html
index 6731f163..9d8f05b6 100644
--- a/src/app/base/components/dropdown/dropdown.component.html
+++ b/src/app/base/components/dropdown/dropdown.component.html
@@ -1,5 +1,6 @@
 <div class="relative" [ngClass]="dropdownOptions.buttonVersion == 'default' ? ' w-max' : '' ">
-    <button #dropdownOpenButton type="button" [attr.data-tip]="dropdownOptions.buttonTooltip" *ngIf="dropdownOptions.buttonVersion == 'default'"
+    <button #dropdownOpenButton type="button" [attr.data-tip]="dropdownOptions.buttonTooltip"
+        *ngIf="dropdownOptions.buttonVersion == 'default'"
         class="inline-flex rounded-md border shadow-sm px-4 items-center text-xs font-semibold cursor-pointer focus:ring-offset-2 focus:ring-offset-gray-400"
         id="menu-button" aria-expanded="true" aria-haspopup="true" [disabled]="dropdownOptions.isDisabled"
         [ngClass]="buttonClassList" (isMenuOpen)="toggleVisible($event, dropdownOptionsDiv)" appDropdown>
@@ -18,29 +19,28 @@
         </svg>
     </button>
 
-    <svg *ngIf="dropdownOptions.buttonVersion== '...'" (isMenuOpen)="toggleVisible($event, dropdownOptionsDiv)" appDropdown
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5 float-right cursor-pointer text-gray-500" viewBox="0 0 20 20"
-        fill="currentColor">
-        <path
-            d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+    <svg *ngIf="dropdownOptions.buttonVersion== '...'" (isMenuOpen)="toggleVisible($event, dropdownOptionsDiv)"
+        appDropdown xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 float-right cursor-pointer text-gray-500"
+        viewBox="0 0 20 20" fill="currentColor">
+        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
     </svg>
     <a *ngIf="dropdownOptions.buttonVersion== 'userIcon'" tabindex="0" class="w-full cursor-pointer">
-        <div data-intercom-target="User Avatar Button" (isMenuOpen)="toggleVisible($event, dropdownOptionsDiv)" appDropdown>
+        <div data-intercom-target="User Avatar Button" (isMenuOpen)="toggleVisible($event, dropdownOptionsDiv)"
+            appDropdown>
             <img class="h-8 w-8" [src]="dropdownOptions.avatarUri">
         </div>
     </a>
 
     <div #dropdownOptionsDiv
         class="origin-top-right absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden"
-        [ngClass]="[dropdownClassList, dropdownOptions.isButtonSampleProjects ? 'width-sample-projects' : '', dropdownOptions.buttonVersion != '...' ? 'min-w-full': '']" 
+        [ngClass]="[dropdownClassList, dropdownOptions.isButtonSampleProjects ? 'width-sample-projects' : '', dropdownOptions.buttonVersion != '...' ? 'min-w-full': '']"
         role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
         <div class="py-1 cursor-pointer" role="none">
             <div *ngFor="let caption of dropdownOptionCaptions;let i = index" (click)="performActionOnOption($event,i)"
-                [ngClass]="[dropdownOptions.textSize,dropdownOptions.textColor,dropdownOptions.optionDescriptions ? '' : 'flex' ,dropdownOptions.isOptionDisabled?.length && dropdownOptions.isOptionDisabled[i]?'opacity-50 cursor-not-allowed':'',!dropdownOptions.hasCheckboxes ? dropdownOptions.hoverColor + ' ' +dropdownOptions.textHoverColor:'']"
+                [ngClass]="[dropdownOptions.textSize,dropdownOptions.textColor,dropdownOptions.optionDescriptions ? '' : 'flex' ,dropdownOptions.isOptionDisabled?.length && dropdownOptions.isOptionDisabled[i]?'opacity-50 cursor-not-allowed':'',!dropdownOptions.hasCheckboxes ? dropdownOptions.hoverColor + ' ' +dropdownOptions.textHoverColor:'', dropdownOptions.isModelDownloaded?.length && dropdownOptions.isModelDownloaded[i] ? 'text-green-700 hover:text-lime-300': '']"
                 [ngStyle]="{'border-bottom': dropdownOptions.isButtonSampleProjects && i%2 == 0 && i!=dropdownOptionCaptions.length-1 ? '1px dashed #e2e8f0' : (dropdownOptions.isButtonSampleProjects && i%2 != 0 && i!=dropdownOptionCaptions.length-1 ? '1px solid #e2e8f0' : null) }"
-                class="block px-2 py-1.5 flex-row flex-nowrap items-center gap-x-2 w-max min-w-full"
-                role="menuitem" tabindex="-1" id="menu-item-0">
+                class="block px-2 py-1.5 flex-row flex-nowrap items-center gap-x-2 w-max min-w-full" role="menuitem"
+                tabindex="-1" id="menu-item-0">
                 <ng-template [ngIf]="dropdownOptions.hasCheckboxes">
                     <div class="h-4 w-4 border-gray-300 border rounded hover:bg-gray-200"
                         [ngStyle]="{'background-color':getActiveNegateGroupColor(dropdownOptions.optionArray[i]), 'border-color':getActiveNegateGroupColor(dropdownOptions.optionArray[i])}">
@@ -53,7 +53,8 @@
                 </ng-template>
                 {{ caption }}
 
-                <p *ngIf="dropdownOptions.optionDescriptions && dropdownOptions.optionDescriptions[i] != ''" class="mt-2">
+                <p *ngIf="dropdownOptions.optionDescriptions && dropdownOptions.optionDescriptions[i] != ''"
+                    class="mt-2">
                     {{dropdownOptions.optionDescriptions[i]}}
                 </p>
             </div>
@@ -67,8 +68,8 @@
         <ng-template ngSwitchDefault>
         </ng-template>
         <ng-template ngSwitchCase="clickbait">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-fish-hook inline-block" width="20"
-                height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-fish-hook inline-block"
+                width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                 stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M16 9v6a5 5 0 0 1 -10 0v-4l3 3"></path>
@@ -77,8 +78,8 @@
             </svg>
         </ng-template>
         <ng-template ngSwitchCase="conversational-ai">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle inline-block" width="20"
-                height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle inline-block"
+                width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                 stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>
@@ -88,9 +89,9 @@
             </svg>
         </ng-template>
         <ng-template ngSwitchCase="ag-news">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-news inline-block" width="20" height="20"
-                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
-                stroke-linejoin="round">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-news inline-block" width="20"
+                height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+                stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path
                     d="M16 6h3a1 1 0 0 1 1 1v11a2 2 0 0 1 -4 0v-13a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1v12a3 3 0 0 0 3 3h11">
@@ -159,15 +160,15 @@
             </svg>
         </ng-template>
         <ng-template ngSwitchCase="delete-selected">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" fill="none"
-                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round"
                     d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
             </svg>
         </ng-template>
         <ng-template ngSwitchCase="labeling-function">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block"
-                viewBox="0 0 20 20" fill="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
+                fill="currentColor">
                 <path fill-rule="evenodd"
                     d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
                     clip-rule="evenodd" />
@@ -175,8 +176,8 @@
         </ng-template>
 
         <ng-template ngSwitchCase="active-learning">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block"
-                viewBox="0 0 20 20" fill="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
+                fill="currentColor">
                 <path fill-rule="evenodd"
                     d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
                     clip-rule="evenodd" />
@@ -184,8 +185,8 @@
         </ng-template>
 
         <ng-template ngSwitchCase="zero-shot">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block"
-                viewBox="0 0 20 20" fill="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
+                fill="currentColor">
                 <path fill-rule="evenodd"
                     d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
                     clip-rule="evenodd" />
diff --git a/src/app/base/components/dropdown/dropdown.component.ts b/src/app/base/components/dropdown/dropdown.component.ts
index bc3e8036..6cc05228 100644
--- a/src/app/base/components/dropdown/dropdown.component.ts
+++ b/src/app/base/components/dropdown/dropdown.component.ts
@@ -79,6 +79,7 @@ export class DropdownComponent implements OnChanges {
     if (this.dropdownOptions.optionDescriptions && this.dropdownOptions.optionArray.length != this.dropdownOptions.optionDescriptions.length) this.hasInputErrors = "array options != optionDescriptions length\n";
     if (this.dropdownOptions.optionIcons && this.dropdownOptions.optionIcons.length != this.dropdownOptions.optionIcons.length) this.hasInputErrors = "array options != optionIcons length\n";
     if (!this.dropdownOptions.buttonVersion) this.dropdownOptions.buttonVersion = "default";
+    if (this.dropdownOptions.isModelDownloaded && this.dropdownOptions.isModelDownloaded.length != this.dropdownOptions.optionArray.length) this.hasInputErrors = "array options != isModelDownloaded length\n";
 
     this.buttonClassList = "";
     if (!this.dropdownOptions.buttonBgColor) this.dropdownOptions.buttonBgColor = "bg-white ";
diff --git a/src/app/base/services/base/apollo-checker.ts b/src/app/base/services/base/apollo-checker.ts
index f59cc7e8..3087ec0a 100644
--- a/src/app/base/services/base/apollo-checker.ts
+++ b/src/app/base/services/base/apollo-checker.ts
@@ -29,8 +29,8 @@ export class ApolloChecker {
     }
 
     private static checkBlackWhiteList(type: string, queryText: string) {
-        if (!ConfigManager.getIsDemo()) return;
-        if (ConfigManager.getIsAdmin()) return;
+        if (!ConfigManager.getIsDemo(true)) return;
+        if (ConfigManager.getIsAdmin(true)) return;
         if (!queryText) throw new Error("Can't find query text");
         if (!ConfigManager.checkBlackWhiteList(type, queryText)) throw new DemoError(type, queryText);
     }
diff --git a/src/app/base/services/config-service.ts b/src/app/base/services/config-service.ts
index a2cf3217..b53bed4d 100644
--- a/src/app/base/services/config-service.ts
+++ b/src/app/base/services/config-service.ts
@@ -68,7 +68,8 @@ export class ConfigManager {
         return ConfigManager.config[key][subkey]
     }
 
-    public static getIsManaged(): boolean {
+    public static getIsManaged(ignoreCheck: boolean = false): boolean {
+        if (!ignoreCheck && !ConfigManager.isInit()) console.log("ConfigManager not initialized");
         return ConfigManager.isManaged;
     }
 
@@ -86,14 +87,16 @@ export class ConfigManager {
     public static setIsAdmin(value: boolean) {
         ConfigManager.isAdmin = value;
     }
-    public static getIsAdmin() {
+    public static getIsAdmin(ignoreCheck: boolean = false): boolean {
+        if (!ignoreCheck && !ConfigManager.isInit()) console.log("ConfigManager not initialized");
         return ConfigManager.isAdmin;
     }
 
     public static setIsDemo(value: boolean) {
         ConfigManager.isDemo = value;
     }
-    public static getIsDemo() {
+    public static getIsDemo(ignoreCheck: boolean = false): boolean {
+        if (!ignoreCheck && !ConfigManager.isInit()) console.log("ConfigManager not initialized");
         return ConfigManager.isDemo;
     }
 
diff --git a/src/app/base/services/weak-source/weak-source-apollo.service.ts b/src/app/base/services/weak-source/weak-source-apollo.service.ts
index 1f2b8db1..1778b257 100644
--- a/src/app/base/services/weak-source/weak-source-apollo.service.ts
+++ b/src/app/base/services/weak-source/weak-source-apollo.service.ts
@@ -428,4 +428,40 @@ export class WeakSourceApolloService {
     });
   }
 
+  getModelProviderInfo() {
+    const query = this.apollo
+      .watchQuery({
+        query: queries.GET_MODEL_PROVIDER_INFO,
+        fetchPolicy: 'network-only', // Used for first execution
+        nextFetchPolicy: 'cache-first', // Used for subsequent executions (refetch query updates the cache != triggers the function)
+      });
+    const vc = query.valueChanges.pipe(
+      map((result) => result['data']['modelProviderInfo'])
+    );
+    return [query, vc]
+  }
+
+  downloadModel(name: string) {
+    return this.apollo.mutate({
+      mutation: mutations.MODEL_PROVIDER_DOWNLOAD_MODEL,
+      variables: {
+        modelName: name
+      }
+    });
+  }
+
+  deleteModel(name: string) {
+    return this.apollo.mutate({
+      mutation: mutations.MODEL_PROVIDER_DELETE_MODEL,
+      variables: {
+        modelName: name
+      },
+      refetchQueries: [
+        {
+          query: queries.GET_MODEL_PROVIDER_INFO
+        },
+      ],
+    });
+  }
+
 }
diff --git a/src/app/base/services/weak-source/weak-source-mutations.ts b/src/app/base/services/weak-source/weak-source-mutations.ts
index 81b24866..4371fd0d 100644
--- a/src/app/base/services/weak-source/weak-source-mutations.ts
+++ b/src/app/base/services/weak-source/weak-source-mutations.ts
@@ -98,5 +98,21 @@ export const mutations = {
     }
   }
   
-  `
+  `,
+
+  MODEL_PROVIDER_DELETE_MODEL: gql`
+    mutation($modelName: String!) {
+      modelProviderDeleteModel(modelName: $modelName) {
+        ok
+      }
+    }
+`,
+
+  MODEL_PROVIDER_DOWNLOAD_MODEL: gql`
+  mutation($modelName: String!) {
+    modelProviderDownloadModel(modelName: $modelName) {
+      ok
+    }
+}
+`,
 };
diff --git a/src/app/base/services/weak-source/weak-source-queries.ts b/src/app/base/services/weak-source/weak-source-queries.ts
index f750a5e7..edd8b20f 100644
--- a/src/app/base/services/weak-source/weak-source-queries.ts
+++ b/src/app/base/services/weak-source/weak-source-queries.ts
@@ -98,4 +98,17 @@ export const queries = {
   }
   `,
 
+  GET_MODEL_PROVIDER_INFO: gql`
+  query{
+    modelProviderInfo {
+      name
+      revision
+      link
+      date
+      size
+      status
+      zeroShotPipeline
+    }
+  }
+  `,
 };
diff --git a/src/app/model-download/components/model-download-component/model-download-component.component.html b/src/app/model-download/components/model-download-component/model-download-component.component.html
new file mode 100644
index 00000000..cb6f7458
--- /dev/null
+++ b/src/app/model-download/components/model-download-component/model-download-component.component.html
@@ -0,0 +1,241 @@
+<div *ngIf="project$ | async as project" class="p-4 bg-gray-100 h-full overflow-y-auto flex-1 flex flex-col">
+    <div>
+        <div class="text-lg leading-6 text-gray-900 font-medium inline-block">
+            Downloaded models
+        </div>
+    </div>
+
+    <div class="mt-1">
+        <div class="inline-block min-w-full align-middle">
+            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                <table class="min-w-full divide-y divide-gray-300">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Name</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Revision</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Link</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Download date</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Size</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Status</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200">
+                        <tr *ngFor="let model of downloadedModels">
+                            <td class="text-center px-3 py-2 text-sm text-gray-500">
+                                <span class="inline-block mr-2">{{model.name}}</span>
+                                <label *ngIf="model.zeroShotPipeline" class="tooltip tooltip-right" data-tip="Can be used for zero-shot">
+                                    <svg xmlns="http://www.w3.org/2000/svg"
+                                        class="icon icon-tabler icon-tabler-bow inline-block" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                        <path d="M17 3h4v4"></path>
+                                        <path d="M21 3l-15 15"></path>
+                                        <path d="M3 18h3v3"></path>
+                                        <path d="M16.5 20c1.576 -1.576 2.5 -4.095 2.5 -6.5c0 -4.81 -3.69 -8.5 -8.5 -8.5c-2.415 0 -4.922 .913 -6.5 2.5l12.5 12.5z"></path>
+                                    </svg>
+                                </label>
+                            </td>
+                            <td class="text-center px-3 py-2 text-sm text-gray-500">
+                                <ng-template [ngIf]="model.revision">{{model.revision}}</ng-template>
+                            </td>
+                            <td class="text-center px-3 py-2 text-sm text-gray-500">
+                                <a [href]="model.link" target="_blank" *ngIf="model.link" class="h4 w-4 m-auto block"
+                                    style="padding:0px"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 m-auto"
+                                    fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                                </svg></a>
+                            </td>
+                            <td class="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
+                                <ng-template [ngIf]="model.date != 0 && (model.status === 'finished' || model.status === 'downloading')">{{model.parseDate}}</ng-template>
+                                <ng-template [ngIf]="model.status === 'initializing'">{{model.date}}</ng-template>
+                            </td>
+                            <td class="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
+                                <ng-template [ngIf]="model.status === 'finished'">{{model.sizeFormatted}}</ng-template>
+                            </td>
+                            <td class="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
+                                <div *ngIf="model.status === 'finished'" data-tip="Successfully created." class="tooltip">
+                                    <div
+                                        class="btn cursor-default btn-circle btn-xs no-animation btn-primary mx-2">
+                                        <svg xmlns="http://www.w3.org/2000/svg"
+                                            class="inline-block w-4 h-4 stroke-current" fill="none"
+                                            viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                stroke-width="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div *ngIf="model.status === 'failed'" data-tip="Embedding creation ran into errors." class="tooltip">
+                                    <div class="btn cursor-default btn-circle btn-xs no-animation btn-error mx-2">
+                                        <svg xmlns="http://www.w3.org/2000/svg"
+                                            class="inline-block w-4 h-4 stroke-current" fill="none"
+                                            viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                stroke-width="2"
+                                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div *ngIf="model.status === 'downloading'" data-tip="Model is downloading" class="tooltip">
+                                    <kern-loading color="yellow" size="btn-xs"></kern-loading>
+                                </div>
+                                <div *ngIf="model.status === 'initializing'" data-tip="Model is initializing" class="tooltip">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-loader" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                        <line x1="12" y1="6" x2="12" y2="3"></line>
+                                        <line x1="16.25" y1="7.75" x2="18.4" y2="5.6"></line>
+                                        <line x1="18" y1="12" x2="21" y2="12"></line>
+                                        <line x1="16.25" y1="16.25" x2="18.4" y2="18.4"></line>
+                                        <line x1="12" y1="18" x2="12" y2="21"></line>
+                                        <line x1="7.75" y1="16.25" x2="5.6" y2="18.4"></line>
+                                        <line x1="6" y1="12" x2="3" y2="12"></line>
+                                        <line x1="7.75" y1="7.75" x2="5.6" y2="5.6"></line>
+                                    </svg>
+                                </div>
+                            </td>
+                            <td class="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
+                                <label [for]="'model-download'+model.name"
+                                    (click)="currentModel = model"
+                                    class="modal-button btn btn-sm btn-ghost px-0 inline-block flex"
+                                    [ngClass]="!isManaged ? 'pointer-events-none cursor-not-allowed opacity-50' : '' ">
+
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                                    </svg>
+                                </label>
+                            </td>
+                            
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-1 align-top">
+            <div>
+                <label data-tip="Add new model" [for]="'add-new-model'" [ngClass]="!isManaged ? 'pointer-events-none cursor-not-allowed opacity-50' : '' "
+                    class="tooltip tooltip-bottom mr-1 inline-flex items-center px-2.5 py-2 border border-gray-300 shadow-sm text-xs font-semibold rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none cursor-pointer">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
+                    </svg>
+                    Add new model
+                </label>
+                <input type="checkbox"
+                    [id]="'add-new-model'"
+                    class="modal-toggle">
+                <div class="modal">
+                    <div class="modal-box text-black bg-white justify-center" style="overflow: initial;">
+                        <div
+                            class="flex flex-grow justify-center text-lg leading-6 text-gray-900 font-medium">
+                            Add new model</div>
+                        
+                        <form [formGroup]="form" class="grid grid-cols-2  gap-2 items-center mt-2"
+                            style="grid-template-columns: max-content auto;">
+                            <span data-tip="Name of your Hugging Face model"
+                                    class="z-50 tooltip tooltip-right card-title mb-0 label-text flex"><span
+                                        class="cursor-help underline"
+                                        style="text-decoration-style: dotted;text-underline-offset: 2px;text-decoration-color: #22c55e">Name</span></span>
+                                <div class="dropdown" *ngIf="models as suggestions">
+                                    <div tabindex="0" class="flex flex-row select select-bordered select-sm pl-0 pr-8">
+                                        <input #inputEmbeddingHandle type="text" placeholder="Type to search..."
+                                            class="w-full font-bold input input-sm"
+                                            style="outline:none; box-shadow:none;height:1.9rem;"
+                                            [value]="form.get('name').value"
+                                            (focus)="$event.target.select()"
+                                            (keydown.enter)="selectFirstUnhiddenEmbeddingHandle(inputEmbeddingHandle)"
+                                            (input)="checkEmbeddingHandles($event.target)">
+                                    </div>
+                                    <ul tabindex="0"
+                                        class="p-2 w-full menu dropdown-content bg-base-100 shadow max-h-80 overflow-y-auto">
+                                        <li #me *ngFor="let modelHandle of suggestions; let k = index"
+                                            [ngClass]="modelHandle.hidden || modelHandle.forceHidden?'hidden':null"
+                                            (mouseenter)="setCurrentEmbeddingHandle(modelHandle,hoverBox,me)"
+                                            (mouseleave)="setCurrentEmbeddingHandle(null)">
+
+                                            <label class="cursor-pointer label" 
+                                                [ngClass]="[checkIfModelIsDownloaded(modelHandle.configString) ? 'text-green-700' : '', k == indexSeparator ? 'line-separator' : '']"
+                                                (click)="selectEmbeddingHandle(modelHandle,inputEmbeddingHandle)">
+                                                {{modelHandle.configString}}
+                                            </label>
+                                        </li>
+                                    </ul>
+                                </div>
+                        </form>
+                        
+                        <div class="modal-action">
+                            <label [for]="'add-new-model'"
+                                [ngClass]="checkIfModelIsDownloaded(form.get('name').value) ? 'opacity-50 cursor-not-allowed pointer-events-none' : 'cursor-pointer'"
+                                class="bg-green-100 text-green-700 border border-green-400 text-xs font-semibold mr-2 px-4 py-2 rounded flex  hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 inline-block"
+                                (click)="downloadModel()">Add
+                                </label>
+                            <label [for]="'add-new-model'"
+                                class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div #hoverBox class="absolute top-0 w-fit h-fit card shadow bg-white" style="z-index: 1000;"
+[ngClass]="currentModelHandle?null:'hidden'">
+<ng-template [ngIf]="currentModelHandle">
+    <div class="card-body p-6 flex flex-col w-64">
+        <div class="flex justify-center">
+            <span class="card-title mb-2 label-text">Info</span>
+        </div>
+        <span class="label-text text-sm" *ngIf="!currentModelHandle.isZeroShot">{{currentModelHandle.description}}</span>
+        <div class="grid grid-cols-2  gap-2 items-center" *ngIf="currentModelHandle.isZeroShot"
+            style="grid-template-columns: max-content auto;">
+            <span class="label-text text-sm font-bold">Avg Time</span>
+            <span class="label-text text-sm">{{currentModelHandle.avgTime}}</span>
+            <span class="label-text text-sm font-bold">Based on</span>
+            <span class="label-text text-sm">{{currentModelHandle.base}}</span>
+            <span class="label-text text-sm font-bold">Size</span>
+            <span class="label-text text-sm">{{currentModelHandle.size}}</span>
+        </div>
+    </div>
+</ng-template>
+</div>
+
+<input type="checkbox"
+    [id]="'model-download'+currentModel?.name"
+    class="modal-toggle">
+    <div class="modal">
+        <div class="modal-box text-black bg-white justify-center text-center">
+            <div
+                class="flex flex-grow justify-center text-lg leading-6 text-gray-900 font-medium">
+                Warning </div>
+            <p class="mt-2 text-gray-500 text-sm">Are you sure you want to
+                delete
+                this model?</p>
+            <p class="text-gray-500 text-sm">This will delete all data
+                associated
+                with it!</p>
+            <div class="modal-action">
+                <label [for]="'model-download'+currentModel?.name"
+                    class="bg-red-100 text-red-700 border border-red-400 text-xs font-semibold mr-2 px-4 py-2 rounded flex cursor-pointer hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 inline-block"
+                    (click)="deleteModel(currentModel?.name)">Delete
+                    </label>
+                <label [for]="'model-download'+currentModel?.name"
+                    class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
+            </div>
+        </div>
+    </div>
diff --git a/src/app/model-download/components/model-download-component/model-download-component.component.scss b/src/app/model-download/components/model-download-component/model-download-component.component.scss
new file mode 100644
index 00000000..e5e567c7
--- /dev/null
+++ b/src/app/model-download/components/model-download-component/model-download-component.component.scss
@@ -0,0 +1,3 @@
+.line-separator {
+    border-bottom: 1px gray dashed;
+}
\ No newline at end of file
diff --git a/src/app/model-download/components/model-download-component/model-download-component.component.spec.ts b/src/app/model-download/components/model-download-component/model-download-component.component.spec.ts
new file mode 100644
index 00000000..9b3dff90
--- /dev/null
+++ b/src/app/model-download/components/model-download-component/model-download-component.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModelDownloadComponentComponent } from './model-download-component.component';
+
+describe('ModelDownloadComponentComponent', () => {
+  let component: ModelDownloadComponentComponent;
+  let fixture: ComponentFixture<ModelDownloadComponentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModelDownloadComponentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModelDownloadComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/model-download/components/model-download-component/model-download-component.component.ts b/src/app/model-download/components/model-download-component/model-download-component.component.ts
new file mode 100644
index 00000000..4a7aca2a
--- /dev/null
+++ b/src/app/model-download/components/model-download-component/model-download-component.component.ts
@@ -0,0 +1,168 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { combineLatest, Subscription, timer } from 'rxjs';
+import { first } from 'rxjs/operators';
+import { ConfigManager } from 'src/app/base/services/config-service';
+import { NotificationService } from 'src/app/base/services/notification.service';
+import { ProjectApolloService } from 'src/app/base/services/project/project-apollo.service';
+import { RouteService } from 'src/app/base/services/route.service';
+import { WeakSourceApolloService } from 'src/app/base/services/weak-source/weak-source-apollo.service';
+import { dateAsUTCDate, formatBytes } from 'src/app/util/helper-functions';
+
+@Component({
+  selector: 'kern-model-download-component',
+  templateUrl: './model-download-component.component.html',
+  styleUrls: ['./model-download-component.component.scss']
+})
+export class ModelDownloadComponentComponent implements OnInit {
+
+  project$: any;
+  projectQuery$: any;
+  downloadedModelsList$: any;
+  downloadedModelsQuery$: any;
+  projectId: string;
+  form: FormGroup;
+  models: any[] = [];
+  isManaged: boolean = false;
+  currentModelHandle: any;
+  downloadedModels: any[];
+  subscriptions$: Subscription[] = [];
+  currentModel: any;
+  indexSeparator: number;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private projectApolloService: ProjectApolloService,
+    private routeService: RouteService,
+    private informationSourceApolloService: WeakSourceApolloService,
+    private formBuilder: FormBuilder
+  ) { }
+
+  ngOnInit(): void {
+    this.initForm();
+    this.routeService.updateActivatedRoute(this.activatedRoute);
+    this.projectId = this.activatedRoute.parent.snapshot.paramMap.get('projectId');
+    [this.projectQuery$, this.project$] = this.projectApolloService.getProjectByIdQuery(this.projectId);
+    [this.downloadedModelsQuery$, this.downloadedModelsList$] = this.informationSourceApolloService.getModelProviderInfo();
+    this.prepareModels();
+    this.isManaged = ConfigManager.getIsManaged();
+
+    this.subscriptions$.push(
+      this.downloadedModelsList$.subscribe((downloadedModels) => {
+        this.downloadedModels = downloadedModels;
+        this.downloadedModels.forEach(model => {
+          model.sizeFormatted = formatBytes(model.size);
+          model.parseDate = this.parseUTC(model.date);
+        })
+      }));
+
+    NotificationService.subscribeToNotification(this, {
+      whitelist: ['model_provider_download'],
+      func: this.handleWebsocketNotification
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions$.forEach((subscription) => subscription.unsubscribe());
+    NotificationService.unsubscribeFromNotification(this, this.projectId)
+  }
+
+  initForm() {
+    this.form = this.formBuilder.group({
+      name: ['', Validators.required]
+    })
+  }
+
+  deleteModel(name: string) {
+    this.informationSourceApolloService
+      .deleteModel(name)
+      .pipe(first()).subscribe();
+  }
+
+  downloadModel() {
+    if (this.form.invalid) return;
+    this.informationSourceApolloService
+      .downloadModel(this.form.get('name').value)
+      .pipe(first()).subscribe();
+  }
+
+  parseUTC(utc: string) {
+    const utcDate = dateAsUTCDate(new Date(utc));
+    return utcDate.toLocaleString();
+  }
+
+  prepareModels() {
+    let tasks$ = [];
+    let q, vc;
+    [q, vc] = this.informationSourceApolloService.getZeroShotRecommendations(this.projectId);
+    tasks$.push(this.projectApolloService.getRecomendedEncodersForEmbeddings(this.projectId));
+    tasks$.push(vc);
+    combineLatest(tasks$).subscribe((models: any) => {
+      models[0].forEach(model => model.isZeroShot = false);
+      this.models = models[0].filter(el =>
+        el.configString != 'bag-of-characters' && el.configString != 'bag-of-words' && el.configString != 'tf-idf');
+      models[1].forEach(model => model.isZeroShot = true);
+      models[1].sort((a, b) => a.prio - b.prio);
+      this.indexSeparator = this.models.length-1;
+      this.models.push(...models[1]);
+    });
+
+
+  }
+
+  selectFirstUnhiddenEmbeddingHandle(inputElement: HTMLInputElement) {
+    for (let modelHandle of this.models) {
+      if (!modelHandle.hidden && !modelHandle.forceHidden) {
+        this.selectEmbeddingHandle(modelHandle, inputElement);
+        return;
+      }
+    }
+  }
+
+  selectEmbeddingHandle(modelHandle, inputElement: HTMLInputElement) {
+    inputElement.value = modelHandle.configString;
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+    this.checkEmbeddingHandles(inputElement);
+  }
+
+  checkEmbeddingHandles(eventTarget: HTMLInputElement) {
+    this.form.get('name').setValue(eventTarget.value);
+    if (!this.models || this.models.length == 0) return;
+    const lowerEventValue = eventTarget.value.toLowerCase();
+    for (let modelHandle of this.models) {
+      modelHandle.hidden = !modelHandle.configString.toLowerCase().includes(lowerEventValue)
+    }
+
+  }
+
+  setCurrentEmbeddingHandle(modelHandle, hoverBox: HTMLElement, listElement: HTMLElement) {
+    this.currentModelHandle = modelHandle;
+    if (modelHandle) {
+      const dataBoundingBox: DOMRect = listElement.getBoundingClientRect();
+      hoverBox.style.top = (dataBoundingBox.top) + "px"
+      hoverBox.style.left = (dataBoundingBox.left + dataBoundingBox.width) + "px"
+    }
+  }
+
+  handleWebsocketNotification(msgParts) {
+    if (msgParts[1] === 'model_provider_download' && msgParts[2] === 'started') {
+      this.downloadedModels.push({
+        "name": msgParts[3],
+        "date": dateAsUTCDate(new Date()).toLocaleString(),
+        "status": "initializing"
+      });
+      timer(2500).subscribe(() => this.downloadedModelsQuery$.refetch());
+    } else if (msgParts[1] === 'model_provider_download' && msgParts[2] === 'finished') {
+      timer(2500).subscribe(() => this.downloadedModelsQuery$.refetch());
+    }
+  }
+
+  checkIfModelIsDownloaded(modelName: string) {
+    const findModel = this.downloadedModels && this.downloadedModels.find(el => el.name === modelName);
+    return findModel !== undefined ? true : false;
+  }
+
+}
diff --git a/src/app/model-download/model-download.module.ts b/src/app/model-download/model-download.module.ts
new file mode 100644
index 00000000..999b041e
--- /dev/null
+++ b/src/app/model-download/model-download.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BaseModule } from '../base/base.module';
+import { ModelDownloadComponent } from './pages/model-download/model-download.component';
+import { ModelDownloadComponentComponent } from './components/model-download-component/model-download-component.component';
+
+
+
+@NgModule({
+  declarations: [ModelDownloadComponent, ModelDownloadComponentComponent],
+  imports: [
+    CommonModule,
+    BaseModule
+  ]
+})
+export class ModelDownloadModule { }
diff --git a/src/app/model-download/pages/model-download/model-download.component.html b/src/app/model-download/pages/model-download/model-download.component.html
new file mode 100644
index 00000000..2b749aef
--- /dev/null
+++ b/src/app/model-download/pages/model-download/model-download.component.html
@@ -0,0 +1 @@
+<kern-model-download-component></kern-model-download-component>
\ No newline at end of file
diff --git a/src/app/model-download/pages/model-download/model-download.component.scss b/src/app/model-download/pages/model-download/model-download.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/model-download/pages/model-download/model-download.component.spec.ts b/src/app/model-download/pages/model-download/model-download.component.spec.ts
new file mode 100644
index 00000000..04744bbe
--- /dev/null
+++ b/src/app/model-download/pages/model-download/model-download.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModelDownloadComponent } from './model-download.component';
+
+describe('ModelDownloadComponent', () => {
+  let component: ModelDownloadComponent;
+  let fixture: ComponentFixture<ModelDownloadComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModelDownloadComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModelDownloadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/model-download/pages/model-download/model-download.component.ts b/src/app/model-download/pages/model-download/model-download.component.ts
new file mode 100644
index 00000000..e603a769
--- /dev/null
+++ b/src/app/model-download/pages/model-download/model-download.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'kern-model-download',
+  templateUrl: './model-download.component.html',
+  styleUrls: ['./model-download.component.scss']
+})
+export class ModelDownloadComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/projects/components/project-settings/project-settings.component.html b/src/app/projects/components/project-settings/project-settings.component.html
index 72961ec9..4095ad0a 100644
--- a/src/app/projects/components/project-settings/project-settings.component.html
+++ b/src/app/projects/components/project-settings/project-settings.component.html
@@ -272,8 +272,23 @@
 
 
         <div class="mt-8">
-            <div class="text-lg leading-6 text-gray-900 font-medium inline-block">
-                Embeddings </div>
+            <div class="text-lg leading-6 text-gray-900 font-medium inline-block w-full">
+                <label>Embeddings</label> 
+                    <button class="ml-3 text-green-700 hover:text-green-500 text-base font-medium"
+                        [routerLink]="['../model-download']"
+                        [disabled]="!isManaged"
+                        [ngClass]="!isManaged ? 'tooltip tooltip-right cursor-not-allowed' : 'opacity-100 cursor-pointer'"
+                        [attr.data-tip]="!isManaged ? 'Check out our hosted version to use this function' : ''">
+                        <span class="leading-5">
+                            downloaded models
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none"
+                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                            </svg>
+                        </span>
+                    </button>
+                
             <div class="mt-1">
                 <div class="text-sm leading-5 font-medium text-gray-700 inline-block">You can enrich your records with
                     embeddings, e.g. to use them for vector search or active transfer learning.</div>
@@ -471,7 +486,7 @@
                                             (mouseenter)="setCurrentEmbeddingHandle(embeddingHandle,hoverBox,me)"
                                             (mouseleave)="setCurrentEmbeddingHandle(null)">
 
-                                            <label class="cursor-pointer label"
+                                            <label class="cursor-pointer label" [ngClass]="checkIfModelIsDownloaded(embeddingHandle.configString) ? 'text-green-700' : ''"
                                                 (click)="selectEmbeddingHandle(embeddingHandle,inputEmbeddingHandle)">
                                                 {{embeddingHandle.configString}}
                                             </label>
diff --git a/src/app/projects/components/project-settings/project-settings.component.ts b/src/app/projects/components/project-settings/project-settings.component.ts
index 63af98a7..526337cc 100644
--- a/src/app/projects/components/project-settings/project-settings.component.ts
+++ b/src/app/projects/components/project-settings/project-settings.component.ts
@@ -11,6 +11,8 @@ import { schemeCategory24 } from 'src/app/util/colors';
 import { DownloadState } from 'src/app/import/services/s3.enums';
 import { HttpClient } from '@angular/common/http';
 import { S3Service } from 'src/app/import/services/s3.service';
+import { WeakSourceApolloService } from 'src/app/base/services/weak-source/weak-source-apollo.service';
+import { ConfigManager } from 'src/app/base/services/config-service';
 
 @Component({
   selector: 'kern-project-settings',
@@ -117,6 +119,10 @@ export class ProjectSettingsComponent implements OnInit, OnDestroy, AfterViewIni
   }
   labelMap: Map<string, []> = new Map<string, []>();
   @ViewChild('modalInput', { read: ElementRef }) myModalnewRecordTask: ElementRef;
+  downloadedModelsList$: any;
+  downloadedModelsQuery$: any;
+  downloadedModels: any[];
+  isManaged: boolean = true;
 
   constructor(
     private routeService: RouteService,
@@ -125,7 +131,8 @@ export class ProjectSettingsComponent implements OnInit, OnDestroy, AfterViewIni
     private router: Router,
     private formBuilder: FormBuilder,
     private http: HttpClient,
-    private s3Service: S3Service
+    private s3Service: S3Service,
+    private informationSourceApolloService: WeakSourceApolloService
   ) { }
 
   ngAfterViewInit() {
@@ -154,6 +161,10 @@ export class ProjectSettingsComponent implements OnInit, OnDestroy, AfterViewIni
     this.requestPKeyCheck(projectId);
     this.checkProjectTokenization(projectId);
 
+    [this.downloadedModelsQuery$, this.downloadedModelsList$] = this.informationSourceApolloService.getModelProviderInfo();
+    this.subscriptions$.push(
+      this.downloadedModelsList$.subscribe((downloadedModels) => this.downloadedModels = downloadedModels));
+
     let preparationTasks$ = [];
     preparationTasks$.push(this.prepareAttributesRequest(projectId));
     preparationTasks$.push(this.prepareLabelingTasksRequest(projectId));
@@ -173,8 +184,16 @@ export class ProjectSettingsComponent implements OnInit, OnDestroy, AfterViewIni
         }
       })
     }
+    this.checkIfManagedVersion();
   }
 
+  checkIfManagedVersion() {
+    if (!ConfigManager.isInit()) {
+      timer(250).subscribe(() => this.checkIfManagedVersion());
+      return;
+    }
+    this.isManaged = ConfigManager.getIsManaged();
+  }
 
   prepareEmbeddingFormGroup(attributes) {
     if (attributes.length > 0) {
@@ -975,4 +994,9 @@ export class ProjectSettingsComponent implements OnInit, OnDestroy, AfterViewIni
     delete currentData[this.project.id];
     localStorage.setItem('projectOverviewData', JSON.stringify(currentData));
   }
+
+  checkIfModelIsDownloaded(modelName: string) {
+    const findModel = this.downloadedModels && this.downloadedModels.find(el => el.name === modelName);
+    return findModel !== undefined ? true : false;
+  }
 }
diff --git a/src/app/projects/components/projects/projects.component.ts b/src/app/projects/components/projects/projects.component.ts
index 7f72c201..e7f572c9 100644
--- a/src/app/projects/components/projects/projects.component.ts
+++ b/src/app/projects/components/projects/projects.component.ts
@@ -124,8 +124,6 @@ export class ProjectsComponent implements OnInit, OnDestroy {
         this.avatarUri = "assets/avatars/" + avatarSelector + ".png"
         if (this.organizationInactive) {
           this.createDefaultOrg(user);
-        } else {
-          this.isManaged = ConfigManager.getIsManaged();
         }
       });
     this.checkIfDemoUser();
@@ -136,6 +134,7 @@ export class ProjectsComponent implements OnInit, OnDestroy {
       timer(250).subscribe(() => this.checkIfDemoUser());
       return;
     }
+    this.isManaged = ConfigManager.getIsManaged();
     this.isDemoUser = ConfigManager.getIsDemo() && !ConfigManager.getIsAdmin();
   }
 
diff --git a/src/app/util/helper-functions.ts b/src/app/util/helper-functions.ts
index 0fc33e7c..2a2d01aa 100644
--- a/src/app/util/helper-functions.ts
+++ b/src/app/util/helper-functions.ts
@@ -10,4 +10,12 @@ export function dateAsUTCDate(date: Date) {
     d.setUTCSeconds(date.getSeconds());
     d.setUTCMilliseconds(date.getMilliseconds());
     return d;
+}
+
+export function formatBytes(bytes, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return parseFloat((bytes / Math.pow(1024, i)).toFixed(dm)) + ' ' + sizes[i];
 }
\ No newline at end of file
diff --git a/src/app/weak-supervision/components/weak-supervision/weak-supervision.component.html b/src/app/weak-supervision/components/weak-supervision/weak-supervision.component.html
index bcaffbf9..3d6a4b86 100644
--- a/src/app/weak-supervision/components/weak-supervision/weak-supervision.component.html
+++ b/src/app/weak-supervision/components/weak-supervision/weak-supervision.component.html
@@ -285,7 +285,7 @@ <h1 class="text-lg text-gray-900 mb-2 text-center mb-4">Add new zero shot classi
                                         [ngClass]="recommendation.hidden?'hidden':null"
                                         (mouseenter)="setCurrentRecommendation(recommendation,hoverBox,me)"
                                         (mouseleave)="setCurrentRecommendation(null)">
-                                        <label class="cursor-pointer label flex-grow"
+                                        <label class="cursor-pointer label flex-grow" [ngClass]="checkIfModelIsDownloaded(recommendation.configString) ? 'text-green-700' : ''"
                                             (click)="selectRecommendation(recommendation,inputConfig)">
                                             {{recommendation.configString}}
                                         </label>
diff --git a/src/app/weak-supervision/components/weak-supervision/weak-supervision.component.ts b/src/app/weak-supervision/components/weak-supervision/weak-supervision.component.ts
index bed84237..55e41bba 100644
--- a/src/app/weak-supervision/components/weak-supervision/weak-supervision.component.ts
+++ b/src/app/weak-supervision/components/weak-supervision/weak-supervision.component.ts
@@ -72,6 +72,9 @@ export class WeakSupervisionComponent implements OnInit, OnDestroy {
   @ViewChild("modalCreateAL") modalCreateAL: ElementRef;
   @ViewChild("modalCreateZS") modalCreateZS: ElementRef;
   @ViewChild("deleteSelectedHeuristics") deleteSelectedHeuristics: ElementRef;
+  downloadedModelsList$: any;
+  downloadedModelsQuery$: any;
+  downloadedModels: any[];
 
   constructor(
     private router: Router,
@@ -105,6 +108,9 @@ export class WeakSupervisionComponent implements OnInit, OnDestroy {
     this.prepareCurrentWeakSupervisionInfo(projectId);
     this.prepareEmbeddingsRequest(projectId);
 
+    [this.downloadedModelsQuery$, this.downloadedModelsList$] = this.informationSourceApolloService.getModelProviderInfo();
+    this.subscriptions$.push(
+      this.downloadedModelsList$.subscribe((downloadedModels) => this.downloadedModels = downloadedModels));
 
     NotificationService.subscribeToNotification(this, {
       projectId: projectId,
@@ -430,7 +436,7 @@ export class WeakSupervisionComponent implements OnInit, OnDestroy {
     const numLabels = stats[0].label == '-' ? 0 : stats.length;
     const numLabelsPx = (numLabels * 70) + "px";
     let additionalPx = 0 + "px";
-    if(stats.length > 3) additionalPx = 20 + "px";
+    if (stats.length > 3) additionalPx = 20 + "px";
     return parseInt("88px", 10) + parseInt(numLabelsPx, 10) + parseInt(additionalPx, 10) + "px";
   }
 
@@ -494,8 +500,8 @@ export class WeakSupervisionComponent implements OnInit, OnDestroy {
   }
 
   executeOption(value: string) {
-    switch(value) {
-      case 'Labeling function': 
+    switch (value) {
+      case 'Labeling function':
         this.modalCreateLF.nativeElement.checked = true;
         this.modalChangeForCreation(true, InformationSourceType.LABELING_FUNCTION);
         break;
@@ -521,4 +527,9 @@ export class WeakSupervisionComponent implements OnInit, OnDestroy {
         break;
     }
   }
+
+  checkIfModelIsDownloaded(modelName: string) {
+    const findModel = this.downloadedModels && this.downloadedModels.find(el => el.name === modelName);
+    return findModel !== undefined ? true : false;
+  }
 }
diff --git a/src/app/zero-shot-details/component/zero-shot-details.component.html b/src/app/zero-shot-details/component/zero-shot-details.component.html
index c67056ef..0d24aadc 100644
--- a/src/app/zero-shot-details/component/zero-shot-details.component.html
+++ b/src/app/zero-shot-details/component/zero-shot-details.component.html
@@ -100,8 +100,20 @@
                 <div class="mt-3 grid gap-x-4 gap-y-2 items-center"
                     style="grid-template-columns: max-content max-content max-content">
                     <div class="font-normal">Input attribute</div>
-                    <div *ngIf="!isModelDownloading" class="font-normal inline-flex items-center" style="height: 24px;">
-                        Model</div>
+                    <div *ngIf="!isModelDownloading" class="font-normal" style="height: 24px;">
+                        Model
+                        <button class="ml-3 text-green-700 hover:text-green-500 text-sm font-medium cursor-pointer"
+                            [routerLink]="['../../model-download']" [disabled]="!isManaged"
+                            [ngClass]="!isManaged ? 'tooltip tooltip-right cursor-not-allowed' : 'opacity-100 cursor-pointer'"
+                            [attr.data-tip]="!isManaged ? 'Check out our hosted version to use this function' : ''">
+                            <span class="leading-5">downloaded models
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none"
+                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
                     <div *ngIf="isModelDownloading" class="font-normal inline-flex items-center">Model Downloading
                         <kern-loading color="yellow"></kern-loading>
                     </div>
@@ -120,7 +132,8 @@
                         optionArray:zeroShotRecommendations,
                         buttonCaption:zeroShotSettings.targetConfig,
                         buttonTooltip: 'Select the model',
-                        valuePropertyPath:'configString'
+                        valuePropertyPath:'configString',
+                        isModelDownloaded: modelsDownloadedState
                     }" (optionClicked)="changeZeroShotSettings('targetConfig',$event)">
                     </kern-dropdown>
 
diff --git a/src/app/zero-shot-details/component/zero-shot-details.component.ts b/src/app/zero-shot-details/component/zero-shot-details.component.ts
index 774076ec..48e1a83c 100644
--- a/src/app/zero-shot-details/component/zero-shot-details.component.ts
+++ b/src/app/zero-shot-details/component/zero-shot-details.component.ts
@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormControl } from '@angular/forms';
-import { first } from 'rxjs/operators';
+import { first, refCount } from 'rxjs/operators';
 import { ProjectApolloService } from 'src/app/base/services/project/project-apollo.service';
 import { RouteService } from 'src/app/base/services/route.service';
 import { WeakSourceApolloService } from 'src/app/base/services/weak-source/weak-source-apollo.service';
@@ -25,6 +25,7 @@ import { dateAsUTCDate } from 'src/app/util/helper-functions';
 import { NotificationService } from 'src/app/base/services/notification.service';
 import { schemeCategory24 } from 'src/app/util/colors';
 import { parseToSettingsJson, parseZeroShotSettings, ZeroShotSettings } from './zero-shot-settings';
+import { ConfigManager } from 'src/app/base/services/config-service';
 
 @Component({
   selector: 'kern-zero-shot-details',
@@ -88,6 +89,11 @@ export class ZeroShotDetailsComponent
   specificRunTaskInformation$: any;
   status: string;
   confidenceIntervals = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+  downloadedModelsList$: any;
+  downloadedModelsQuery$: any;
+  downloadedModels: any[];
+  modelsDownloadedState: boolean[] = [];
+  isManaged: boolean = true;
 
   constructor(
     private router: Router,
@@ -110,6 +116,15 @@ export class ZeroShotDetailsComponent
     this.subscriptions$.push(project$.subscribe((project) => this.project = project));
     combineLatest(tasks$).subscribe(() => this.prepareInformationSource(projectId));
 
+    [this.downloadedModelsQuery$, this.downloadedModelsList$] = this.informationSourceApolloService.getModelProviderInfo();
+    this.subscriptions$.push(
+      this.downloadedModelsList$.subscribe((downloadedModels) => {
+        this.downloadedModels = downloadedModels;
+        this.createModelsDownloadedStateList();
+      }));
+
+    this.checkIfManagedVersion();
+
     NotificationService.subscribeToNotification(this, {
       projectId: projectId,
       whitelist: this.getWhiteListNotificationService(),
@@ -127,6 +142,14 @@ export class ZeroShotDetailsComponent
     return toReturn;
   }
 
+  checkIfManagedVersion() {
+    if (!ConfigManager.isInit()) {
+      timer(250).subscribe(() => this.checkIfManagedVersion());
+      return;
+    }
+    this.isManaged = ConfigManager.getIsManaged();
+  }
+
   ngOnDestroy() {
     this.subscriptions$.forEach((subscription) => subscription.unsubscribe());
     for (const e of this.stickyHeader) {
@@ -444,4 +467,13 @@ export class ZeroShotDetailsComponent
   getHover(color) {
     return `hover:bg-${color}-200`
   }
+
+  createModelsDownloadedStateList() {
+    if(this.zeroShotRecommendations !== undefined) {
+      this.zeroShotRecommendations.forEach(rec => {
+        const isDownloaded = this.downloadedModels.find(el => el.name === rec.configString);
+        this.modelsDownloadedState.push(isDownloaded!=undefined ? true : false);
+      })
+    }
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 35c25668..e651a166 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -41,4 +41,8 @@ body {
   min-width: 50%;
   max-width: 80%;
   width: fit-content;
+}
+
+.modal {
+  align-items: center;
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 7ca6d7c6..a3cd4d01 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,7 +50,8 @@ module.exports = {
       /(text)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(700)/,
       /(text)-(red|yellow|green|blue)-(800)/,
       /(text)-(white|black)/,
-      /(bg)-(gray)-(700)/
+      /(bg)-(gray)-(700)/,
+      /(text)-(lime)-(300)/,
     ],
     options: {
       keyframes: true,