diff --git a/README.md b/README.md
index fa3ce84..96ababe 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,51 @@
-# StudyOffline
\ No newline at end of file
+<div align="center">
+    <a href="#"><img src="https://raw.githubusercontent.com/piuswalter/StudyOffline/main/logo.png" alt="StudyOffline" width="200"></a>
+    <br />
+    <h1>StudyOffline</h1>
+    <small>Built with ❤️ and 🍺 by
+        <a href="https://github.com/p-fruck">Philipp</a>,
+        <a href="https://github.com/piuswalter">Pius</a> and
+        <a href="https://github.com/piuswalter/StudyOffline/graphs/contributors">contributors</a>
+    </small>
+</div>
+
+---
+
+[![GitHub license](https://img.shields.io/github/license/piuswalter/StudyOffline)](https://github.com/piuswalter/StudyOffline/blob/main/LICENSE.md)
+![GitHub last commit (branch)](https://img.shields.io/github/last-commit/piuswalter/StudyOffline/development)
+[![GitHub issues](https://img.shields.io/github/issues/piuswalter/StudyOffline)](https://github.com/piuswalter/StudyOffline/issues)
+![Lines of code](https://img.shields.io/tokei/lines/github/piuswalter/StudyOffline)
+![GitHub language count](https://img.shields.io/github/languages/count/piuswalter/StudyOffline)
+
+StudyOffline is an open source tool that allows you to download the flashcards you have created on StudySmarter and study them offline.
+
+In addition, StudyOffline is a PWA (Progressive Web App) with which you can also learn your flashcards on any smartphone.
+
+## ⚒️ Setup your own StudyOffline instance
+
+[![Deploy with Docker](https://img.shields.io/badge/deploy%20with-docker-0db7ed)]()
+
+At the moment we do not have published StudyOffline to any container registry yet but you can easily build it by hand.
+
+The requirement is that Docker is installed.
+
+To do this, you just need to run
+
+`docker build https://github.com/piuswalter/StudyOffline.git#main -t studyoffline --no-cache`
+
+Now your container is built and can be started with
+
+`docker run -p 3000:3000 --name studyoffline -d studyoffline`
+
+You can access StudyOffline in your browser on `https://localhost:3000/`.
+
+## ⚙️ Built with latest technologies
+
+- [Express](https://expressjs.com/) - The web framework used at the backend
+- [Angular](https://angular.io/) - The web framework used at the frontend
+- [Node.js](https://nodejs.org/en/) - The backend power
+- [IndexedDB](https://developer.mozilla.org/de/docs/Web/API/IndexedDB_API) - The database to store your flashcards
+
+## 📜 License
+
+This project is licensed under the AGPL-3.0 License - see the [LICENSE.md](LICENSE.md) file for details
diff --git a/backend/src/utils/encoder.service.ts b/backend/src/utils/encoder.service.ts
index 0251e67..316cf98 100644
--- a/backend/src/utils/encoder.service.ts
+++ b/backend/src/utils/encoder.service.ts
@@ -65,7 +65,8 @@ export default class FlashcardEncoder extends Readable {
 
   // eslint-disable-next-line class-methods-use-this
   async encodeFromURL(imageURL: string): Promise<string> {
-    const { data } = await Axios.get(imageURL);
-    return Buffer.from(data, 'binary').toString('base64');
+    const { data, headers } = await Axios.get(imageURL, { responseType: 'arraybuffer' });
+    const prefix = `data:${headers['content-type']};base64, `;
+    return prefix + Buffer.from(data, 'binary').toString('base64');
   }
 }
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 9fd6263..9954883 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -1,7 +1,8 @@
 {
   "root": true,
   "ignorePatterns": [
-    "projects/**/*"
+    "projects/**/*",
+    "*.spec.ts"
   ],
   "overrides": [
     {
diff --git a/frontend/angular.json b/frontend/angular.json
index e609487..33f5110 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -27,7 +27,7 @@
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": [
-              "src/favicon.ico",
+              "src/favicon.png",
               "src/assets",
               "src/manifest.webmanifest"
             ],
@@ -95,7 +95,7 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
-              "src/favicon.ico",
+              "src/favicon.png",
               "src/assets",
               "src/manifest.webmanifest"
             ],
diff --git a/frontend/ngsw-config.json b/frontend/ngsw-config.json
index 607ab33..f57a3ff 100644
--- a/frontend/ngsw-config.json
+++ b/frontend/ngsw-config.json
@@ -7,7 +7,7 @@
       "installMode": "prefetch",
       "resources": {
         "files": [
-          "/favicon.ico",
+          "/favicon.png",
           "/index.html",
           "/manifest.webmanifest",
           "/*.css",
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b509ac3..d89a494 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -6102,6 +6102,11 @@
       "integrity": "sha512-qi86tE6hRcFHy8jI1m2VG+LaPUR1LhqDa5G8tVjuUXmOrpuAgqsA1pN0+ldgr3aKUH+QLI9hCY/OcRYisERejw==",
       "dev": true
     },
+    "dexie": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/dexie/-/dexie-3.0.3.tgz",
+      "integrity": "sha512-BSFhGpngnCl1DOr+8YNwBDobRMH0ziJs2vts69VilwetHYOtEDcLqo7d/XiIphM0tJZ2rPPyAGd31lgH2Ln3nw=="
+    },
     "di": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
@@ -8485,7 +8490,8 @@
     "ini": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
     },
     "inquirer": {
       "version": "7.3.3",
diff --git a/frontend/package.json b/frontend/package.json
index 48997c5..2e6c86a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --prod",
     "test": "ng test",
     "lint": "eslint \"./src/**/*.{js,ts}\" --quiet --fix",
     "e2e": "ng e2e"
@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^11.0.9",
     "@angular/router": "^11.0.9",
     "@angular/service-worker": "^11.0.9",
+    "dexie": "^3.0.3",
     "rxjs": "^6.6.7",
     "tslib": "^2.1.0",
     "zone.js": "~0.10.2"
diff --git a/frontend/src/app/_models/flashcard.class.ts b/frontend/src/app/_models/flashcard.class.ts
new file mode 100644
index 0000000..de52c73
--- /dev/null
+++ b/frontend/src/app/_models/flashcard.class.ts
@@ -0,0 +1,33 @@
+import { Origin } from './origin.enum';
+
+export interface IAnswer {
+  text: string;
+  isCorrect: boolean;
+}
+
+interface FlashcardIndices {
+  id?: number;
+  subjectId: number;
+}
+
+export abstract class Flashcard {
+  id?: number;
+  subjectId: number;
+
+  constructor(ind: FlashcardIndices) {
+    this.id = ind.id;
+    this.subjectId = ind.subjectId;
+  }
+
+  abstract readonly origin: Origin;
+  abstract question: string;
+  abstract answers: IAnswer[];
+  abstract hints: string[];
+  abstract solution: string;
+  abstract tags: number[];
+
+  get withoutId(): Flashcard {
+    delete this.id;
+    return this;
+  }
+}
diff --git a/frontend/src/app/_models/flashcard.interface.ts b/frontend/src/app/_models/flashcard.interface.ts
deleted file mode 100644
index b12b90a..0000000
--- a/frontend/src/app/_models/flashcard.interface.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-interface FlashcardAnswer {
-  text: string;
-  is_correct: boolean;
-}
-
-export interface Flashcard {
-  id: number;
-  flashcardinfo: {
-    id: number;
-    creator: number;
-    question_html: FlashcardAnswer[];
-    answer_html: FlashcardAnswer[];
-    hint_html: any[];
-    solution_html: string;
-    tags: any[];
-  };
-}
diff --git a/frontend/src/app/_models/internal/flashcard.class.ts b/frontend/src/app/_models/internal/flashcard.class.ts
new file mode 100644
index 0000000..14d8005
--- /dev/null
+++ b/frontend/src/app/_models/internal/flashcard.class.ts
@@ -0,0 +1,29 @@
+import { Flashcard, IAnswer } from '../flashcard.class';
+import { Origin } from '../origin.enum';
+
+export interface IInternalFlashcard {
+  id: number;
+  question: string;
+  answers: IAnswer[];
+  hints: string[];
+  solution: string;
+  tags: number[];
+}
+
+export class InternalFlashcard extends Flashcard {
+  readonly origin = Origin.internal;
+  question: string;
+  answers: IAnswer[];
+  hints: string[];
+  solution: string;
+  tags: number[];
+
+  constructor(flashcard: IInternalFlashcard, subjectId: number) {
+    super({ subjectId });
+    this.question = flashcard.question;
+    this.answers = flashcard.answers;
+    this.hints = flashcard.hints;
+    this.solution = flashcard.solution;
+    this.tags = flashcard.tags;
+  }
+}
diff --git a/frontend/src/app/_models/origin.enum.ts b/frontend/src/app/_models/origin.enum.ts
new file mode 100644
index 0000000..af0d92b
--- /dev/null
+++ b/frontend/src/app/_models/origin.enum.ts
@@ -0,0 +1,5 @@
+// eslint-disable-next-line no-shadow
+export enum Origin {
+  internal,
+  studySmarter
+}
diff --git a/frontend/src/app/_models/query-catalog.interface.ts b/frontend/src/app/_models/query-catalog.interface.ts
deleted file mode 100644
index f6b92fe..0000000
--- a/frontend/src/app/_models/query-catalog.interface.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-interface Flashcard {
-  question: string;
-  answer: string;
-}
-
-export interface QueryCatalog {
-  id: number;
-  name: string;
-  flashcards: Flashcard[];
-}
diff --git a/frontend/src/app/_models/studysmarter/flashcard.class.ts b/frontend/src/app/_models/studysmarter/flashcard.class.ts
new file mode 100644
index 0000000..8424870
--- /dev/null
+++ b/frontend/src/app/_models/studysmarter/flashcard.class.ts
@@ -0,0 +1,41 @@
+import { IStudySmarterFlashcard } from '.';
+import { Flashcard, IAnswer } from '../flashcard.class';
+import { Origin } from '../origin.enum';
+
+export class StudySmarterFlashcard extends Flashcard {
+  studySmarter: IStudySmarterFlashcard;
+  readonly origin = Origin.studySmarter;
+
+  constructor(flashcard: IStudySmarterFlashcard, subjectId: number) {
+    super({ subjectId });
+    this.studySmarter = flashcard;
+  }
+
+  private get flashcardinfo() {
+    return this.studySmarter.flashcardinfo;
+  }
+
+  get question(): string {
+    if (!this.flashcardinfo.question_html.length) return '';
+    return this.flashcardinfo.question_html[0].text;
+  }
+
+  get answers(): IAnswer[] {
+    return this.flashcardinfo.answer_html.map((answr) => ({
+      text: answr.text,
+      isCorrect: answr.is_correct
+    }));
+  }
+
+  get hints(): string[] {
+    return this.flashcardinfo.hint_html;
+  }
+
+  get solution(): string {
+    return this.flashcardinfo.solution_html;
+  }
+
+  get tags(): number[] {
+    return [];
+  }
+}
diff --git a/frontend/src/app/_models/studysmarter/flashcard.interface.ts b/frontend/src/app/_models/studysmarter/flashcard.interface.ts
new file mode 100644
index 0000000..2d661c5
--- /dev/null
+++ b/frontend/src/app/_models/studysmarter/flashcard.interface.ts
@@ -0,0 +1,22 @@
+interface StudySmarterFlashcardAnswer {
+  text: string;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  is_correct: boolean;
+}
+
+export interface IStudySmarterFlashcard {
+  id?: number;
+  subjects: number[];
+
+  flashcardinfo: {
+    id?: number;
+    creator: number;
+    /* eslint-disable @typescript-eslint/naming-convention */
+    question_html: StudySmarterFlashcardAnswer[];
+    answer_html: StudySmarterFlashcardAnswer[];
+    hint_html: string[];
+    solution_html: string;
+  };
+  community_applied_tag_ids: number[];
+  /* eslint-enable @typescript-eslint/naming-convention */
+}
diff --git a/frontend/src/app/_models/index.ts b/frontend/src/app/_models/studysmarter/index.ts
similarity index 60%
rename from frontend/src/app/_models/index.ts
rename to frontend/src/app/_models/studysmarter/index.ts
index 0fc594b..e384e24 100644
--- a/frontend/src/app/_models/index.ts
+++ b/frontend/src/app/_models/studysmarter/index.ts
@@ -1,5 +1,7 @@
+export * from './flashcard.class';
 export * from './flashcard.interface';
 export * from './login-request.interface';
 export * from './login-response.interface';
-export * from './studysmarter-response.interface';
+export * from './response.interface';
+export * from './subject.class';
 export * from './subject.interface';
diff --git a/frontend/src/app/_models/login-request.interface.ts b/frontend/src/app/_models/studysmarter/login-request.interface.ts
similarity index 100%
rename from frontend/src/app/_models/login-request.interface.ts
rename to frontend/src/app/_models/studysmarter/login-request.interface.ts
diff --git a/frontend/src/app/_models/login-response.interface.ts b/frontend/src/app/_models/studysmarter/login-response.interface.ts
similarity index 100%
rename from frontend/src/app/_models/login-response.interface.ts
rename to frontend/src/app/_models/studysmarter/login-response.interface.ts
diff --git a/frontend/src/app/_models/studysmarter-response.interface.ts b/frontend/src/app/_models/studysmarter/response.interface.ts
similarity index 100%
rename from frontend/src/app/_models/studysmarter-response.interface.ts
rename to frontend/src/app/_models/studysmarter/response.interface.ts
diff --git a/frontend/src/app/_models/studysmarter/subject.class.ts b/frontend/src/app/_models/studysmarter/subject.class.ts
new file mode 100644
index 0000000..008a9c2
--- /dev/null
+++ b/frontend/src/app/_models/studysmarter/subject.class.ts
@@ -0,0 +1,24 @@
+import { IStudySmarterSubject } from '.';
+import { Flashcard } from '../flashcard.class';
+import { Subject } from '../subject.class';
+
+export class StudySmarterSubject extends Subject {
+  studySmarter: IStudySmarterSubject;
+
+  constructor(subject: IStudySmarterSubject, id?: number) {
+    super(id);
+    this.studySmarter = subject;
+  }
+
+  get name(): string {
+    return this.studySmarter.name;
+  }
+
+  get archived(): boolean {
+    return this.studySmarter.archived;
+  }
+
+  get flashcards(): Flashcard[] {
+    return [];
+  }
+}
diff --git a/frontend/src/app/_models/subject.interface.ts b/frontend/src/app/_models/studysmarter/subject.interface.ts
similarity index 86%
rename from frontend/src/app/_models/subject.interface.ts
rename to frontend/src/app/_models/studysmarter/subject.interface.ts
index 522720b..921b680 100644
--- a/frontend/src/app/_models/subject.interface.ts
+++ b/frontend/src/app/_models/studysmarter/subject.interface.ts
@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-export interface Subject {
+export interface IStudySmarterSubject {
   id: number;
   name: string;
   /* eslint-disable @typescript-eslint/naming-convention */
diff --git a/frontend/src/app/_models/subject.class.ts b/frontend/src/app/_models/subject.class.ts
new file mode 100644
index 0000000..9f96792
--- /dev/null
+++ b/frontend/src/app/_models/subject.class.ts
@@ -0,0 +1,13 @@
+import { Flashcard } from './flashcard.class';
+
+export abstract class Subject {
+  id?: number;
+
+  constructor(id?: number) {
+    this.id = id;
+  }
+
+  abstract name: string;
+  abstract archived: boolean;
+  abstract flashcards: Flashcard[];
+}
diff --git a/frontend/src/app/_services/api.service.ts b/frontend/src/app/_services/api.service.ts
index 96b6551..07f7d31 100644
--- a/frontend/src/app/_services/api.service.ts
+++ b/frontend/src/app/_services/api.service.ts
@@ -3,20 +3,21 @@ import {
   HttpErrorResponse,
   HttpEvent,
   HttpHeaders,
-  HttpRequest
+  HttpRequest,
+  HttpResponse
 } from '@angular/common/http';
-import { Injectable, NgZone } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 import { throwError } from 'rxjs/internal/observable/throwError';
 import { retry, catchError } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
 import {
-  Flashcard,
+  IStudySmarterFlashcard,
+  IStudySmarterSubject,
   LoginRequest,
   LoginResponse,
-  StudySmarterResponse,
-  Subject
-} from '../_models';
+  StudySmarterResponse
+} from '../_models/studysmarter';
 import { StudySmarterService } from './study-smarter.service';
 
 const handleError = (error: HttpErrorResponse): Observable<never> => {
@@ -36,18 +37,15 @@ const handleError = (error: HttpErrorResponse): Observable<never> => {
 export class ApiService {
   constructor(
     private http: HttpClient,
-    private studySmarter: StudySmarterService,
-    private zone: NgZone
+    private studySmarter: StudySmarterService
   ) {}
 
-  private get httpOptions(): { headers: HttpHeaders } | any {
-    if (!this.studySmarter.apiToken) return {};
-    return {
-      headers: new HttpHeaders({
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        Authorization: `Token ${this.studySmarter.apiToken}`
-      })
-    };
+  private get httpHeaders(): HttpHeaders {
+    if (!this.studySmarter.apiToken) return {} as HttpHeaders;
+    return new HttpHeaders({
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      Authorization: `Token ${this.studySmarter.apiToken}`
+    });
   }
 
   login(data: LoginRequest, save: boolean, callback = () => {}): Subscription {
@@ -74,32 +72,36 @@ export class ApiService {
   private fetchUserEndpoint<T>(
     endpoint: string
   ): Observable<StudySmarterResponse<T>> {
-    return ((this.http.get(
-      this.getApiUrl(endpoint),
-      this.httpOptions
-    ) as unknown) as Observable<StudySmarterResponse<T>>).pipe(
-      retry(1),
-      catchError(handleError)
-    );
+    return this.http
+      .get<StudySmarterResponse<T>>(this.getApiUrl(endpoint), {
+        headers: this.httpHeaders
+      })
+      .pipe(retry(1), catchError(handleError));
   }
 
   private fetchUserProgressEndpoint<T>(
     endpoint: string
-  ): Observable<HttpEvent<T>> {
-    return this.http.request<T>(
+  ): Observable<HttpEvent<T[]>> {
+    return this.http.request<T[]>(
       new HttpRequest('GET', this.getApiUrl(endpoint), {
-        ...this.httpOptions,
+        headers: this.httpHeaders,
         reportProgress: true,
         observe: 'events'
       })
     );
   }
 
-  getSubjects(): Observable<StudySmarterResponse<Subject>> {
-    return this.fetchUserEndpoint<Subject>('subjects');
+  getSubjects(): Observable<StudySmarterResponse<IStudySmarterSubject>> {
+    return this.fetchUserEndpoint<IStudySmarterSubject>('subjects');
   }
 
-  getFlashcards(subjectId: number): Observable<HttpEvent<Flashcard>> {
-    return this.fetchUserProgressEndpoint(`subjects/${subjectId}/flashcards`);
+  getFlashcards(
+    subjectId: number
+  ): Observable<
+    HttpEvent<IStudySmarterFlashcard[]> | HttpResponse<IStudySmarterFlashcard[]>
+  > {
+    return this.fetchUserProgressEndpoint<IStudySmarterFlashcard>(
+      `subjects/${subjectId}/flashcards`
+    );
   }
 }
diff --git a/frontend/src/app/_services/db.service.ts b/frontend/src/app/_services/db.service.ts
new file mode 100644
index 0000000..02bf092
--- /dev/null
+++ b/frontend/src/app/_services/db.service.ts
@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import Dexie from 'dexie';
+import { from, Observable } from 'rxjs';
+import { Flashcard } from '../_models/flashcard.class';
+import {
+  IStudySmarterFlashcard,
+  IStudySmarterSubject,
+  StudySmarterFlashcard,
+  StudySmarterSubject
+} from '../_models/studysmarter';
+import { Subject } from '../_models/subject.class';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DbService extends Dexie {
+  subjects!: Dexie.Table<Subject, number>;
+  flashcards!: Dexie.Table<Flashcard, number>;
+
+  constructor() {
+    super('StudyOffline');
+    this.version(1).stores({
+      subjects: '++id,&studySmarter.id',
+      flashcards: '++id,subjectId'
+    });
+  }
+
+  addSubject(subject: IStudySmarterSubject): Observable<number> {
+    return from(this.subjects.add(new StudySmarterSubject(subject)));
+  }
+
+  async getSubjects(): Promise<Subject[]> {
+    const raw = await this.subjects.toArray();
+    return raw.map(
+      (sub) =>
+        new StudySmarterSubject(
+          (sub as StudySmarterSubject).studySmarter,
+          sub.id
+        )
+    );
+  }
+
+  addFlashcards(
+    flashcards: IStudySmarterFlashcard[],
+    subjectId: number
+  ): Observable<number> {
+    return from(
+      this.flashcards.bulkAdd(
+        flashcards.map((card) => new StudySmarterFlashcard(card, subjectId))
+      )
+    );
+  }
+
+  async getFlashcards(subjectId: number): Promise<Flashcard[]> {
+    const raw = await this.flashcards.where({ subjectId }).toArray();
+    return raw.map(
+      (card) =>
+        new StudySmarterFlashcard(
+          (card as StudySmarterFlashcard).studySmarter,
+          card.subjectId
+        )
+    );
+  }
+
+  clearAll(): void {
+    void this.delete();
+  }
+}
diff --git a/frontend/src/app/_services/study-smarter.service.ts b/frontend/src/app/_services/study-smarter.service.ts
index 6ce6ab4..38c38ca 100644
--- a/frontend/src/app/_services/study-smarter.service.ts
+++ b/frontend/src/app/_services/study-smarter.service.ts
@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { LoginResponse } from '../_models';
+import { LoginResponse } from '../_models/studysmarter';
 
 @Injectable({ providedIn: 'root' })
 export class StudySmarterService {
@@ -46,4 +46,9 @@ export class StudySmarterService {
       this.id = userId;
     }
   }
+
+  logout(): void {
+    localStorage.removeItem('StudySmarterToken');
+    localStorage.removeItem('StudySmarterUserId');
+  }
 }
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 201f390..10215e4 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { DownloadComponent } from './download/download.component';
-import { FeedbackComponent } from './feedback/feedback.component';
 import { HelpComponent } from './help/help.component';
 import { HomeComponent } from './home/home.component';
 import { SettingsComponent } from './settings/settings.component';
 import { StudySmarterLoginComponent } from './study-smarter-login/study-smarter-login.component';
-import { UploadComponent } from './upload/upload.component';
 import { StudySmarterGuard } from './_services/study-smarter.guard';
 
 const routes: Routes = [
@@ -15,10 +13,8 @@ const routes: Routes = [
     component: DownloadComponent,
     canActivate: [StudySmarterGuard]
   },
-  { path: 'feedback', component: FeedbackComponent },
   { path: 'help', component: HelpComponent },
   { path: 'settings', component: SettingsComponent },
-  { path: 'upload', component: UploadComponent },
   { path: 'login', component: StudySmarterLoginComponent },
   { path: '', component: HomeComponent },
   { path: '**', redirectTo: '' }
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 619c5a4..915e713 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -11,14 +11,11 @@
     <a [routerLink]="['/download']" mat-icon-button>
       <mat-icon>download</mat-icon>
     </a>
-    <a [routerLink]="['/upload']" mat-icon-button>
-      <mat-icon>upload</mat-icon>
-    </a>
     <a [routerLink]="['/settings']" mat-icon-button>
       <mat-icon>settings</mat-icon>
     </a>
-    <a [routerLink]="['/feedback']" mat-icon-button>
-      <mat-icon>sentiment_satisfied_alt</mat-icon>
+    <a (click)="openLogoutDialog()" *ngIf="isLoggedIn" mat-icon-button>
+      <mat-icon>exit_to_app</mat-icon>
     </a>
   </mat-toolbar>
 </p>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index d15158c..dd44dfa 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { LogoutDialogComponent } from './logout-dialog/logout-dialog.component';
+import { StudySmarterService } from './_services/study-smarter.service';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +10,24 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.sass']
 })
 export class AppComponent {
-  title = 'frontend';
+  title = 'StudyOffline';
+
+  constructor(
+    private dialog: MatDialog,
+    private studySmarter: StudySmarterService,
+    private titleService: Title
+  ) {
+    this.titleService.setTitle('StudyOffline');
+  }
+
+  get isLoggedIn(): boolean {
+    return this.studySmarter.isLoggedIn;
+  }
+
+  openLogoutDialog(): void {
+    this.dialog.open(LogoutDialogComponent, {
+      panelClass: 'transparent',
+      disableClose: true
+    });
+  }
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 92a7869..e36ed25 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -21,8 +21,6 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { UploadComponent } from './upload/upload.component';
-import { FeedbackComponent } from './feedback/feedback.component';
 import { HelpComponent } from './help/help.component';
 import { DownloadComponent } from './download/download.component';
 import { HttpClientModule } from '@angular/common/http';
@@ -31,6 +29,7 @@ import { StudySmarterLoginComponent } from './study-smarter-login/study-smarter-
 import { StudySmarterService } from './_services/study-smarter.service';
 import { SubjectSelectorComponent } from './download/subject-selector/subject-selector.component';
 import { ProgressSpinnerDialogComponent } from './download/progress-spinner-dialog/progress-spinner-dialog.component';
+import { LogoutDialogComponent } from './logout-dialog/logout-dialog.component';
 
 const initLocalStorage = (studySmarter: StudySmarterService) => {
   return (): void => studySmarter.loadCredentials();
@@ -41,13 +40,12 @@ const initLocalStorage = (studySmarter: StudySmarterService) => {
     AppComponent,
     HomeComponent,
     SettingsComponent,
-    UploadComponent,
-    FeedbackComponent,
     HelpComponent,
     DownloadComponent,
     StudySmarterLoginComponent,
     SubjectSelectorComponent,
-    ProgressSpinnerDialogComponent
+    ProgressSpinnerDialogComponent,
+    LogoutDialogComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/download/download.component.html b/frontend/src/app/download/download.component.html
index 7a14960..b0836c3 100644
--- a/frontend/src/app/download/download.component.html
+++ b/frontend/src/app/download/download.component.html
@@ -32,6 +32,7 @@ <h1 class="mat-headline">Select subjects for download!</h1>
         (click)="downloadSubjects()"
         class="full-width"
         color="primary"
+        [disabled]="!selectedSubjectIds.length"
       >
         Download
       </button>
diff --git a/frontend/src/app/download/download.component.ts b/frontend/src/app/download/download.component.ts
index a2ab38c..cd46af9 100644
--- a/frontend/src/app/download/download.component.ts
+++ b/frontend/src/app/download/download.component.ts
@@ -1,11 +1,12 @@
-import { HttpEvent, HttpEventType } from '@angular/common/http';
+import { HttpEventType } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatSelectionList } from '@angular/material/list';
 import { Subscription } from 'rxjs';
-import { last, map } from 'rxjs/operators';
-import { Flashcard, Subject } from '../_models';
+import { first } from 'rxjs/operators';
+import { IStudySmarterSubject } from '../_models/studysmarter';
 import { ApiService } from '../_services/api.service';
+import { DbService } from '../_services/db.service';
 import { ProgressSpinnerDialogComponent } from './progress-spinner-dialog/progress-spinner-dialog.component';
 
 @Component({
@@ -15,28 +16,32 @@ import { ProgressSpinnerDialogComponent } from './progress-spinner-dialog/progre
 })
 export class DownloadComponent implements OnInit {
   @ViewChild('subjectList') subjectList: MatSelectionList | undefined;
-  private subjects: Subject[] = [];
+  private subjects: IStudySmarterSubject[] = [];
 
-  constructor(private apiService: ApiService, private dialog: MatDialog) {}
+  constructor(
+    private apiService: ApiService,
+    private dialog: MatDialog,
+    private dbService: DbService
+  ) {}
 
   ngOnInit(): void {
     this.fetchSubjects();
   }
 
-  private cmpSubjectLastUsed(a: Subject, b: Subject) {
+  private cmpSubjectLastUsed(a: IStudySmarterSubject, b: IStudySmarterSubject) {
     return new Date(b.last_used).getTime() - new Date(a.last_used).getTime();
   }
 
-  private filteredSubjects(active: boolean): Subject[] {
+  private filteredSubjects(active: boolean): IStudySmarterSubject[] {
     return this.subjects
       .filter((subject) => subject.archived !== active)
       .sort(this.cmpSubjectLastUsed.bind(this));
   }
 
-  get activeSubjects(): Subject[] {
+  get activeSubjects(): IStudySmarterSubject[] {
     return this.filteredSubjects(true);
   }
-  get archivedSubjects(): Subject[] {
+  get archivedSubjects(): IStudySmarterSubject[] {
     return this.filteredSubjects(false);
   }
 
@@ -82,31 +87,38 @@ export class DownloadComponent implements OnInit {
       const subscription = this.apiService
         .getFlashcards(subjectId)
         .pipe(
-          map((card: HttpEvent<Flashcard>) => {
-            if (card.type === HttpEventType.DownloadProgress) {
+          first((event) => {
+            if (event.type === HttpEventType.DownloadProgress) {
               dialogRef.componentInstance.progress =
                 (100 / toFetch) * ++fetched;
               subjectFetched++;
             }
-            return card;
-          }),
-          last()
+            return event.type === HttpEventType.Response;
+          })
         )
-        .subscribe((flashcards) => {
+        .subscribe((event) => {
+          if (!(event && event.type === HttpEventType.Response)) return;
+          const cards = event.body || [];
+
+          const subjectIdx = this.subjects
+            .map((sub) => sub.id)
+            .indexOf(subjectId);
+
+          if (subjectIdx !== -1) {
+            this.dbService
+              .addSubject(this.subjects[subjectIdx])
+              .subscribe((dbSubjectId) => {
+                this.dbService.addFlashcards(cards, dbSubjectId).subscribe();
+              });
+          }
+
           fetched += this.getFlashcardCount([subjectId]) - subjectFetched;
           dialogRef.componentInstance.progress = (100 / toFetch) * ++fetched;
-          console.log('Final flashcards: ', flashcards);
-          if (dialogRef.componentInstance.progress === 100) {
+          if (fetched === toFetch) {
             dialogRef.close();
           }
-          // flashcards.map((card) => console.log('test'));
-          // console.log(flashcards.length);
-          // const answr = flashcards.results[0].flashcardinfo.answer_html[0].text;
-          // // images are now encoded within backend!
-          // console.log(answr);
         });
       subscriptions.push(subscription);
-      // this.apiService.getFlashcards2(subjectId).subscribe(data => console.log);
     }
     dialogRef
       .afterClosed()
diff --git a/frontend/src/app/download/subject-selector/subject-selector.component.html b/frontend/src/app/download/subject-selector/subject-selector.component.html
index 3871b20..0a124c9 100644
--- a/frontend/src/app/download/subject-selector/subject-selector.component.html
+++ b/frontend/src/app/download/subject-selector/subject-selector.component.html
@@ -1,13 +1,13 @@
 <mat-list-option [value]="subject.id">
-    <!-- <mat-icon mat-list-icon>folder</mat-icon> -->
-    <div mat-line>
-      <p class="subject-selection-item">
-        <span [matBadge]="subject.flashcards" matBadgeOverlap="false">
-          {{ subject.name }}
-        </span>
-      </p>
-    </div>
-    <div mat-line *ngIf="subject.last_used">
-      <p>Last used: {{ subject.last_used | date }}</p>
-    </div>
+  <!-- <mat-icon mat-list-icon>folder</mat-icon> -->
+  <div mat-line>
+    <p class="subject-selection-item">
+      <span [matBadge]="subject.flashcards" matBadgeOverlap="false">
+        {{ subject.name }}
+      </span>
+    </p>
+  </div>
+  <div mat-line *ngIf="subject.last_used">
+    <p>Last used: {{ subject.last_used | date }}</p>
+  </div>
 </mat-list-option>
diff --git a/frontend/src/app/download/subject-selector/subject-selector.component.ts b/frontend/src/app/download/subject-selector/subject-selector.component.ts
index ebb221c..61260ea 100644
--- a/frontend/src/app/download/subject-selector/subject-selector.component.ts
+++ b/frontend/src/app/download/subject-selector/subject-selector.component.ts
@@ -1,15 +1,13 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Subject } from 'src/app/_models';
+import { Component, Input } from '@angular/core';
+import { IStudySmarterSubject } from 'src/app/_models/studysmarter';
 
 @Component({
   selector: 'app-subject-selector',
   templateUrl: './subject-selector.component.html',
   styleUrls: ['./subject-selector.component.sass']
 })
-export class SubjectSelectorComponent implements OnInit {
-  @Input() subject!: Subject;
+export class SubjectSelectorComponent {
+  @Input() subject!: IStudySmarterSubject;
 
   constructor() {}
-
-  ngOnInit(): void {}
 }
diff --git a/frontend/src/app/feedback/feedback.component.html b/frontend/src/app/feedback/feedback.component.html
deleted file mode 100644
index fd0d1e8..0000000
--- a/frontend/src/app/feedback/feedback.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="container">
-  <p>feedback works!</p>
-</div>
diff --git a/frontend/src/app/feedback/feedback.component.sass b/frontend/src/app/feedback/feedback.component.sass
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/app/feedback/feedback.component.spec.ts b/frontend/src/app/feedback/feedback.component.spec.ts
deleted file mode 100644
index 4d188e0..0000000
--- a/frontend/src/app/feedback/feedback.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FeedbackComponent } from './feedback.component';
-
-describe('FeedbackComponent', () => {
-  let component: FeedbackComponent;
-  let fixture: ComponentFixture<FeedbackComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FeedbackComponent]
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FeedbackComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/feedback/feedback.component.ts b/frontend/src/app/feedback/feedback.component.ts
deleted file mode 100644
index 12da7e2..0000000
--- a/frontend/src/app/feedback/feedback.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-feedback',
-  templateUrl: './feedback.component.html',
-  styleUrls: ['./feedback.component.sass']
-})
-export class FeedbackComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}
diff --git a/frontend/src/app/help/help.component.html b/frontend/src/app/help/help.component.html
index f8a37e6..d926801 100644
--- a/frontend/src/app/help/help.component.html
+++ b/frontend/src/app/help/help.component.html
@@ -18,17 +18,13 @@ <h2 class="mat-title">Function of the different sites</h2>
       <td><mat-icon aria-hidden="false">download</mat-icon></td>
       <td>Download your StudySmarter flashcards</td>
     </tr>
-    <tr>
-      <td><mat-icon aria-hidden="false">upload</mat-icon></td>
-      <td>Upload your studysmarter.json file</td>
-    </tr>
     <tr>
       <td><mat-icon aria-hidden="false">settings</mat-icon></td>
       <td>Configure your settings</td>
     </tr>
     <tr>
-      <td><mat-icon aria-hidden="false">sentiment_satisfied_alt</mat-icon></td>
-      <td>Send us some Feedback</td>
+      <td><mat-icon aria-hidden="false">exit_to_app</mat-icon></td>
+      <td>Logout (with possibility to delete flashcards)</td>
     </tr>
   </table>
 </div>
diff --git a/frontend/src/app/help/help.component.ts b/frontend/src/app/help/help.component.ts
index 3ec2f03..7390ee6 100644
--- a/frontend/src/app/help/help.component.ts
+++ b/frontend/src/app/help/help.component.ts
@@ -1,12 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-help',
   templateUrl: './help.component.html',
   styleUrls: ['./help.component.sass']
 })
-export class HelpComponent implements OnInit {
+export class HelpComponent {
   constructor() {}
-
-  ngOnInit(): void {}
 }
diff --git a/frontend/src/app/home/flashcard.interface.ts b/frontend/src/app/home/flashcard.interface.ts
deleted file mode 100644
index d8c6b65..0000000
--- a/frontend/src/app/home/flashcard.interface.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface FlashCard {
-  question: string;
-  answer: string;
-}
diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index 3ce685d..d6b68ad 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -1,9 +1,12 @@
 <div class="container">
   <mat-form-field appearance="fill" class="coursePicker">
     <mat-label>Select course</mat-label>
-    <mat-select [(value)]="course" (selectionChange)="changeCourse(course)">
-      <mat-option *ngFor="let course of courseNames" [value]="course">
-        {{ course }}
+    <mat-select
+      [(value)]="subjectId"
+      (selectionChange)="switchSubject(subjectId)"
+    >
+      <mat-option *ngFor="let subject of subjects" [value]="subject.id">
+        {{ subject.name }}
       </mat-option>
     </mat-select>
   </mat-form-field>
@@ -30,9 +33,13 @@
       </button>
     </mat-card-actions>
     <mat-card-content class="center">
-      <div #question></div>
+      <div [innerHTML]="question" class="flashcard-text"></div>
       <hr class="halfwidth" />
-      <div #answer [hidden]="hideAnswer"></div>
+      <div
+        [innerHTML]="answer"
+        [hidden]="hideAnswer"
+        class="flashcard-text"
+      ></div>
     </mat-card-content>
   </mat-card>
 </div>
diff --git a/frontend/src/app/home/home.component.sass b/frontend/src/app/home/home.component.sass
index db50250..f8fdac8 100644
--- a/frontend/src/app/home/home.component.sass
+++ b/frontend/src/app/home/home.component.sass
@@ -2,7 +2,14 @@
     width: 100%
 
 .flashcard
-    margin: 5% 0
+    margin: 5px 0
+
+::ng-deep.flashcard-text
+    line-height: 2em
+    font-size: 2em
+    
+    img
+        max-width: 100%
 
 .title
     justify-content: center
diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
index 224a06b..58a54cd 100644
--- a/frontend/src/app/home/home.component.ts
+++ b/frontend/src/app/home/home.component.ts
@@ -1,53 +1,68 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  OnInit,
-  ViewChild
-} from '@angular/core';
-import { courses as courseList } from './test';
-import { FlashCard } from './flashcard.interface';
+import { Component } from '@angular/core';
+import { DbService } from '../_services/db.service';
+import { Subject } from '../_models/subject.class';
+import { Flashcard } from '../_models/flashcard.class';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.sass']
 })
-export class HomeComponent implements OnInit, AfterViewInit {
-  @ViewChild('question') question!: ElementRef<HTMLDivElement>;
-  @ViewChild('answer') answer!: ElementRef<HTMLDivElement>;
-
-  course = '';
-  courseNames: string[];
+export class HomeComponent {
+  subjectId = 0;
   hideAnswer = true;
-  private cards: FlashCard[] = [];
-  private courses: any = courseList;
-  private index = 0;
+  question: SafeHtml = '';
+  answer: SafeHtml = '';
+  private cardIndex = 0;
+  private subjectMap: { [key: number]: Subject } = {};
+  private flashcards: Flashcard[] = [];
 
-  constructor() {
-    this.courseNames = Object.keys(courseList);
+  constructor(
+    private dbService: DbService,
+    private domSanitizer: DomSanitizer
+  ) {
+    this.dbService
+      .getSubjects()
+      .then((subjects) => {
+        subjects.forEach((sub) => (this.subjectMap[sub.id || -1] = sub));
+        if (subjects.length) this.subjectId = subjects[0].id || -1;
+        void this.dbService.getFlashcards(this.subjectId).then((cards) => {
+          this.flashcards = cards;
+          this.renderCard();
+        });
+      })
+      .catch((err) => console.error(err));
   }
 
-  ngOnInit(): void {}
+  get subject(): Subject {
+    return this.subjectMap[this.subjectId];
+  }
 
-  ngAfterViewInit(): void {
-    this.course = this.courseNames ? this.courseNames[0] : '';
-    this.changeCourse(this.course);
-    this.renderCard();
+  get subjects(): Subject[] {
+    return Object.values(this.subjectMap);
   }
 
-  changeCourse(course: string): void {
-    if (this.courses[course]) {
-      this.cards = this.courses[course];
-    }
+  async switchSubject(subjectId: number): Promise<void> {
+    if (!this.subjectMap[subjectId]) return;
+    this.subjectId = subjectId;
+    this.cardIndex = 0; // reset index to circumvent array index out of bounds
+    this.flashcards = await this.dbService.getFlashcards(this.subjectId);
+    this.renderCard();
   }
 
   renderCard(): void {
     this.hideAnswer = true;
-    if (this.cards[this.index]) {
-      const { question, answer } = this.cards[this.index];
-      this.question.nativeElement.innerHTML = question;
-      this.answer.nativeElement.innerHTML = answer;
+    if (this.flashcards[this.cardIndex]) {
+      const { question, answers } = this.flashcards[this.cardIndex];
+      this.question = this.domSanitizer.bypassSecurityTrustHtml(question);
+      if (answers.length !== 1) {
+        this.answer = '<p>Multiple Choice has not implemented yet</p>';
+      } else {
+        this.answer = this.domSanitizer.bypassSecurityTrustHtml(
+          answers[0].text
+        );
+      }
     }
   }
 
@@ -56,10 +71,10 @@ export class HomeComponent implements OnInit, AfterViewInit {
   }
 
   switchCard(inc: number): void {
-    const cl = this.cards.length;
+    const cl = this.flashcards.length;
     if (!inc) inc = this.randomNumber(1, cl - 1);
-    this.index = (this.index + inc) % cl;
-    if (this.index < 0) this.index = cl - 1;
+    this.cardIndex = (this.cardIndex + inc) % cl;
+    if (this.cardIndex < 0) this.cardIndex = cl - 1;
     this.renderCard();
   }
 }
diff --git a/frontend/src/app/home/test.ts b/frontend/src/app/home/test.ts
deleted file mode 100755
index 38472e2..0000000
--- a/frontend/src/app/home/test.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-export const courses = {
-  'AM - Klausur': [
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Allgemeine Lösung: System von Differentialgleichungen</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_CckUS8V.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=a5c163785fa2942a427faf61bbfaf9330238ba1b01d264b649459297a0ba2c10" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div><p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">z.B.</p><div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="1" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_Yb4QZuN.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=11ac2dcff6ecf1523738aa7d4fc74073dc1d5bda6da77724bef82554a5250e3f" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Formel Eigenwerte</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_zLdKknw.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=f783f875adcfa67cf8778074a48a3f5499890492adeef52e5a5acbf0c1f32f6b" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div><p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;"><br fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"></p>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Schritte bei der Lösung von Differentialgleichungen</p>',
-      answer:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">1. Separation der Variablen</p><p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">2. Integral</p><p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">3. Substitution</p><p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">4. Integrieren</p><p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">5. Auflösen</p><p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;"><br fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"></p><div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_XatUNlo.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=f9596b7e8c2b7c8c1c1802d72236ff86360aed568397f472c119f24519c27989" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div><p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;"><br fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"></p><div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="1" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_JUeTQKk.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=44716dedef4f26cfdfd4f9b75786e573d83f20a701b0b5b2e21ad320314d2d19" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Substitutionsregel</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_PWYkGHP.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=450f109b8fd272d08052106889768912809cead6050873c290064f26a68c20f7" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Separation der Variablen (Differentialgleichung)</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_6Vido7O.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=1eb7efa5ba68ec8dc38ce907cc05f3e60c8c75609cca70b69543784f1c3d079c" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Ableitung von</p><div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_ACaT6do.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=cb891d1cbcbe138e361527fa5a989869d7d5eaa2dbe95267e7c6453dac740f9f" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="1" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_qSWn3BL.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=bc57faf51445ea96a0c9b70c5e2cefe8ec688768ee338c85ee24a1512b528dc6" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Kreisfunktion (Einheitskreis)</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_w9ezwPl.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=c771a983433088069f0aefdd0257c7a0dd2c18544e6da1fa746c6367a8bdb901" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Einheitskreismenge und Mittelpunkt</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_0NFkiWP.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=a348236cec5b5c7d6802412557f452df8d77ca56db77052a1d25aa5256c94fa5" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Definition Transformationssatz</p>',
-      answer:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Diffeomorphismus: Umkehrfunktion muss existieren.</p><div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_a30vcu8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=125fb201d3f48c085521d0a2e56dba4eddf973160fd3b4181a47393ccdde3c77" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Rechenregeln Integration Summe</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_AYCXqN9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=92691003bb4c6d46ed281d2bbdf78f68b1d5ed292c79a9287ed1918a37dfb274" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Wann ist eine Funktion f integrierbar?</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_JgwSI36.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=624298750ba5711091ad989bf6d6708544070458b4a916d6850a3d2d226937bb" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Lesbeguesche äußere Maß</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_d26xVlu.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=9e784bca39acb05efb5bfa9ac80998be72fa25fd842ec4455d97dac34871dae7" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Was ist die Idee bei der Integration?</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Überdeckung mit Hüllquadern.</p><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_6eGprfI.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=def7dca983e3c3759f88ac216c7867c2f40767cef47a867c0f1e95751d85a727" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Kettenregel</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_NNDzqVa.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=d277e6c254b8c58f9bf1590b7558e3b7ee475b5b2c03aeeb498729af246967ba" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Ablauf Backpropagation</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_mnzopgx.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=6d313292fe99db337f4570b33115bfc9eaa6ea331bda4309280f42326e912c79" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Unterscheidung Extrema</p>',
-      answer:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Unterscheidung mithilfe der Determinanten der Hauptminoren. Bedingung muss für alle Determinanten gelten!</p><div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_fAsmmQX.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=34d5304d56bd0c6fe6010ebe953e825ddce775ca4c196a5f04b24584f6f787af" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Definition Hessematrix</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_0fZPIoL.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220140Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=e08949f26b041e77692bd7b550c8af2db36bdce9f11bb380732325903ed3c65e" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Eigenschaften des Differentials</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_mMbzx81.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220141Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=f51a39151d62e4677416cc03c0728362e590973a272d3ec25cf87e8207883915" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Definition: Gradient</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_0kLYL4W.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220141Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=65627351fd2c3b4dae26b5e81d67841dcce4e38d9c55f572a433251e069fa323" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Differenzierbarkeit von Funktionen und das Differential einer Funktion</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_tb0HdLm.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220141Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=54c0967415aa20758b30929ceaecff88d02d72eac6a5c4ba673ca52d671641b6" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Logarithmusgesetze (4 Stück)</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_skWbtvR.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220143Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=ad2e4fdbe93779ff78109911ecfd34a7978d87a3b748a89029fb0b0eea71bec2" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    },
-    {
-      question:
-        '<p fr-original-style="" style="font-family: Raleway, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box;">Wechsel der Logarithmusbasis</p>',
-      answer:
-        '<div fr-original-style="" style="font-family: Raleway, sans-serif; box-sizing: border-box;"><img fr-original-class="fr-draggable" fr-original-style="" localid="0" src="https://studysmarter-mediafiles.s3.amazonaws.com/media/190267/flashcard_images/grafik_ZnuuJ92.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4OLDUDE42UZHAIET%2F20201212%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201212T220143Z&X-Amz-Expires=90000&X-Amz-SignedHeaders=host&X-Amz-Signature=f925c305e84668db5cdb64e14c0e10625bb37e50e2e229ee8ead51773f33a4a6" style="font-family: Raleway, sans-serif; border: 0px none; vertical-align: middle; cursor: pointer; padding: 0px 1px; position: relative; max-width: 100%; box-sizing: border-box;"></div>'
-    }
-  ]
-};
diff --git a/frontend/src/app/logout-dialog/logout-dialog.component.html b/frontend/src/app/logout-dialog/logout-dialog.component.html
new file mode 100644
index 0000000..fef8ea7
--- /dev/null
+++ b/frontend/src/app/logout-dialog/logout-dialog.component.html
@@ -0,0 +1,21 @@
+<h2 mat-dialog-title>Logout</h2>
+<mat-dialog-content class="mat-typography">
+  <div class="spacer-2x"></div>
+  <h3>You're about to get signed out</h3>
+  <p>
+    This will only sign you out of your account. If you also want to delete your
+    flashcards to save space, check the box below
+  </p>
+  <mat-checkbox [(ngModel)]="deleteFlashcards">Delete Flashcards</mat-checkbox>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button
+    mat-button
+    (click)="logout()"
+    [mat-dialog-close]="true"
+    cdkFocusInitial
+  >
+    Sign out
+  </button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/logout-dialog/logout-dialog.component.sass b/frontend/src/app/logout-dialog/logout-dialog.component.sass
new file mode 100644
index 0000000..6bf0e4d
--- /dev/null
+++ b/frontend/src/app/logout-dialog/logout-dialog.component.sass
@@ -0,0 +1,2 @@
+.mat-dialog-content
+    overflow: inherit
diff --git a/frontend/src/app/logout-dialog/logout-dialog.component.spec.ts b/frontend/src/app/logout-dialog/logout-dialog.component.spec.ts
new file mode 100644
index 0000000..51d4528
--- /dev/null
+++ b/frontend/src/app/logout-dialog/logout-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogoutDialogComponent } from './logout-dialog.component';
+
+describe('LogoutDialogComponent', () => {
+  let component: LogoutDialogComponent;
+  let fixture: ComponentFixture<LogoutDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LogoutDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoutDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/logout-dialog/logout-dialog.component.ts b/frontend/src/app/logout-dialog/logout-dialog.component.ts
new file mode 100644
index 0000000..312a736
--- /dev/null
+++ b/frontend/src/app/logout-dialog/logout-dialog.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { DbService } from '../_services/db.service';
+import { StudySmarterService } from '../_services/study-smarter.service';
+
+@Component({
+  selector: 'app-logout-dialog',
+  templateUrl: './logout-dialog.component.html',
+  styleUrls: ['./logout-dialog.component.sass']
+})
+export class LogoutDialogComponent {
+  deleteFlashcards = false;
+
+  constructor(
+    private dbService: DbService,
+    private studySmarter: StudySmarterService
+  ) {}
+
+  logout(): void {
+    if (this.deleteFlashcards) {
+      this.dbService.clearAll();
+    }
+    this.studySmarter.logout();
+    document.location.reload();
+  }
+}
diff --git a/frontend/src/app/settings/settings.component.ts b/frontend/src/app/settings/settings.component.ts
index 7476752..0a602e7 100644
--- a/frontend/src/app/settings/settings.component.ts
+++ b/frontend/src/app/settings/settings.component.ts
@@ -1,12 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.sass']
 })
-export class SettingsComponent implements OnInit {
+export class SettingsComponent {
   constructor() {}
-
-  ngOnInit(): void {}
 }
diff --git a/frontend/src/app/study-smarter-login/study-smarter-login.component.html b/frontend/src/app/study-smarter-login/study-smarter-login.component.html
index cf49b7d..a4511b3 100644
--- a/frontend/src/app/study-smarter-login/study-smarter-login.component.html
+++ b/frontend/src/app/study-smarter-login/study-smarter-login.component.html
@@ -1,41 +1,34 @@
 <div class="content">
-    <mat-card class="login-form">
-      <h1 class="mat-headline">StudySmarter Login</h1>
-      <div class="spacer-2x"></div>
-      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
-        <mat-form-field class="full-width">
-          <input
-            matInput
-            formControlName="username"
-            placeholder="Enter your E-Mail"
-          />
-        </mat-form-field>
-        <div class="spacer"></div>
-        <mat-form-field class="full-width">
-          <input
-            matInput
-            formControlName="password"
-            placeholder="Enter your password"
-            [type]="hide ? 'password' : 'text'"
-          />
-          <button
-            mat-icon-button
-            matSuffix
-            type="button"
-            (click)="hide = !hide"
-          >
-            <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
-          </button>
-        </mat-form-field>
+  <mat-card class="login-form">
+    <h1 class="mat-headline">StudySmarter Login</h1>
+    <div class="spacer-2x"></div>
+    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+      <mat-form-field class="full-width">
+        <input
+          matInput
+          formControlName="username"
+          placeholder="Enter your E-Mail"
+        />
+      </mat-form-field>
+      <div class="spacer"></div>
+      <mat-form-field class="full-width">
+        <input
+          matInput
+          formControlName="password"
+          placeholder="Enter your password"
+          [type]="hide ? 'password' : 'text'"
+        />
+        <button mat-icon-button matSuffix type="button" (click)="hide = !hide">
+          <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
+        </button>
+      </mat-form-field>
 
-          <mat-checkbox formControlName="rememberMe">
-            Remember me
-          </mat-checkbox>
+      <mat-checkbox formControlName="rememberMe"> Remember me </mat-checkbox>
 
-          <div class="spacer"></div>
-        <button mat-raised-button class="full-width" color="primary">
-          Login
-        </button>
-      </form>
-    </mat-card>
-  </div>
+      <div class="spacer"></div>
+      <button mat-raised-button class="full-width" color="primary">
+        Login
+      </button>
+    </form>
+  </mat-card>
+</div>
diff --git a/frontend/src/app/study-smarter-login/study-smarter-login.component.sass b/frontend/src/app/study-smarter-login/study-smarter-login.component.sass
index f412d55..d4e9208 100644
--- a/frontend/src/app/study-smarter-login/study-smarter-login.component.sass
+++ b/frontend/src/app/study-smarter-login/study-smarter-login.component.sass
@@ -1,6 +1,8 @@
 .login-form
-    margin: 7% 36%
+    margin: 7% auto
     padding: 50px 15px
+    min-width: 320px
+    max-width: 450px
 
 .spacer
     margin-top: 20px
diff --git a/frontend/src/app/upload/upload.component.html b/frontend/src/app/upload/upload.component.html
deleted file mode 100644
index 6aa9a1d..0000000
--- a/frontend/src/app/upload/upload.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="container">
-  <p>upload works!</p>
-</div>
diff --git a/frontend/src/app/upload/upload.component.sass b/frontend/src/app/upload/upload.component.sass
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/app/upload/upload.component.spec.ts b/frontend/src/app/upload/upload.component.spec.ts
deleted file mode 100644
index e6b0002..0000000
--- a/frontend/src/app/upload/upload.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { UploadComponent } from './upload.component';
-
-describe('UploadComponent', () => {
-  let component: UploadComponent;
-  let fixture: ComponentFixture<UploadComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [UploadComponent]
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(UploadComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/upload/upload.component.ts b/frontend/src/app/upload/upload.component.ts
deleted file mode 100644
index cd757c9..0000000
--- a/frontend/src/app/upload/upload.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-upload',
-  templateUrl: './upload.component.html',
-  styleUrls: ['./upload.component.sass']
-})
-export class UploadComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}
diff --git a/frontend/src/assets/icons/icon-128x128.png b/frontend/src/assets/icons/icon-128x128.png
old mode 100644
new mode 100755
index 9f9241f..22e121e
Binary files a/frontend/src/assets/icons/icon-128x128.png and b/frontend/src/assets/icons/icon-128x128.png differ
diff --git a/frontend/src/assets/icons/icon-144x144.png b/frontend/src/assets/icons/icon-144x144.png
old mode 100644
new mode 100755
index 4a5f8c1..4291b95
Binary files a/frontend/src/assets/icons/icon-144x144.png and b/frontend/src/assets/icons/icon-144x144.png differ
diff --git a/frontend/src/assets/icons/icon-152x152.png b/frontend/src/assets/icons/icon-152x152.png
old mode 100644
new mode 100755
index 34a1a8d..034b177
Binary files a/frontend/src/assets/icons/icon-152x152.png and b/frontend/src/assets/icons/icon-152x152.png differ
diff --git a/frontend/src/assets/icons/icon-192x192.png b/frontend/src/assets/icons/icon-192x192.png
old mode 100644
new mode 100755
index 9172e5d..3182875
Binary files a/frontend/src/assets/icons/icon-192x192.png and b/frontend/src/assets/icons/icon-192x192.png differ
diff --git a/frontend/src/assets/icons/icon-384x384.png b/frontend/src/assets/icons/icon-384x384.png
old mode 100644
new mode 100755
index e54e8d3..674d625
Binary files a/frontend/src/assets/icons/icon-384x384.png and b/frontend/src/assets/icons/icon-384x384.png differ
diff --git a/frontend/src/assets/icons/icon-512x512.png b/frontend/src/assets/icons/icon-512x512.png
old mode 100644
new mode 100755
index 51ee297..f4f5e77
Binary files a/frontend/src/assets/icons/icon-512x512.png and b/frontend/src/assets/icons/icon-512x512.png differ
diff --git a/frontend/src/assets/icons/icon-72x72.png b/frontend/src/assets/icons/icon-72x72.png
old mode 100644
new mode 100755
index 2814a3f..d5c088a
Binary files a/frontend/src/assets/icons/icon-72x72.png and b/frontend/src/assets/icons/icon-72x72.png differ
diff --git a/frontend/src/assets/icons/icon-96x96.png b/frontend/src/assets/icons/icon-96x96.png
old mode 100644
new mode 100755
index d271025..fbb4204
Binary files a/frontend/src/assets/icons/icon-96x96.png and b/frontend/src/assets/icons/icon-96x96.png differ
diff --git a/frontend/src/favicon.ico b/frontend/src/favicon.ico
deleted file mode 100644
index 997406a..0000000
Binary files a/frontend/src/favicon.ico and /dev/null differ
diff --git a/frontend/src/favicon.png b/frontend/src/favicon.png
new file mode 100755
index 0000000..487d3fe
Binary files /dev/null and b/frontend/src/favicon.png differ
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 0eff801..8cc6653 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -5,7 +5,7 @@
   <title>Frontend</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="favicon.png">
   <link rel="manifest" href="manifest.webmanifest">
   <meta name="theme-color" content="#1976d2">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
diff --git a/frontend/src/manifest.webmanifest b/frontend/src/manifest.webmanifest
index a5c237d..7311768 100644
--- a/frontend/src/manifest.webmanifest
+++ b/frontend/src/manifest.webmanifest
@@ -1,7 +1,7 @@
 {
-  "name": "frontend",
-  "short_name": "frontend",
-  "theme_color": "#1976d2",
+  "name": "StudyOffline",
+  "short_name": "StudyOffline",
+  "theme_color": "#7b1fa2",
   "background_color": "#fafafa",
   "display": "standalone",
   "scope": "./",
diff --git a/logo.png b/logo.png
new file mode 100755
index 0000000..487d3fe
Binary files /dev/null and b/logo.png differ