diff --git a/src/interfaces/IErrorMessage.ts b/src/interfaces/IErrorMessage.ts
new file mode 100644
index 0000000..810d1e2
--- /dev/null
+++ b/src/interfaces/IErrorMessage.ts
@@ -0,0 +1,5 @@
+export default interface IErrorMessage {
+  title: string;
+  message: string;
+  type: "error" | "success" | "warning";
+}
diff --git a/src/interfaces/IList.ts b/src/interfaces/IList.ts
index d92ff9c..5ea36cd 100644
--- a/src/interfaces/IList.ts
+++ b/src/interfaces/IList.ts
@@ -1,10 +1,27 @@
 export interface IList {
-  results: Array<IMovie | IShow | IPerson | IRequest>;
+  results: ListResults;
   page: number;
   total_results: number;
   total_pages: number;
 }
 
+export interface IMediaCredits {
+  cast: Array<ICast>;
+  crew: Array<ICrew>;
+  id: number;
+}
+
+export interface IPersonCredits {
+  cast: Array<IMovie | IShow>;
+  crew: Array<ICrew>;
+  id: number;
+  type?: string;
+}
+
+export type MediaTypes = IMovie | IShow | IPerson | IRequest;
+export type CreditTypes = ICast | ICrew;
+export type ListResults = Array<MediaTypes>;
+
 export enum ListTypes {
   Movie = "movie",
   Show = "show",
@@ -25,6 +42,7 @@ export interface IMovie {
   backdrop: string;
   release_date: string | Date;
   rating: number;
+  popularity?: number;
   type: ListTypes.Movie;
 }
 
@@ -35,17 +53,25 @@ export interface IShow {
   overview: string;
   poster: string;
   backdrop: string;
+  seasons?: number;
+  episodes?: number;
+  popularity?: number;
+  genres?: Array<string>;
+  production_status?: string;
+  runtime?: Array<number>;
+  exists_in_plex?: boolean;
   type: ListTypes.Show;
 }
 
 export interface IPerson {
   id: number;
-  title: string;
+  name: string;
   poster: string;
   birthday: string | null;
   deathday: string | null;
   known_for_department: string;
   adult: boolean;
+  type: ListTypes.Person;
 }
 
 export interface IRequest extends IMovie {
@@ -54,3 +80,22 @@ export interface IRequest extends IMovie {
   status: string | RequestTypes;
   user_agent: string;
 }
+
+export interface ICast {
+  character: string;
+  gender: number;
+  id: number;
+  name: string;
+  profile_path: string | null;
+  type: string;
+}
+
+export interface ICrew {
+  department: string;
+  gender: number;
+  id: number;
+  job: string;
+  name: string;
+  profile_path: string | null;
+  type: string;
+}
diff --git a/src/interfaces/INavigationIcon.ts b/src/interfaces/INavigationIcon.ts
new file mode 100644
index 0000000..677c179
--- /dev/null
+++ b/src/interfaces/INavigationIcon.ts
@@ -0,0 +1,6 @@
+export default interface INavigationIcon {
+  title: string;
+  route: string;
+  icon: any;
+  requiresAuth?: boolean;
+}
diff --git a/src/interfaces/ISection.ts b/src/interfaces/ISection.ts
new file mode 100644
index 0000000..6196636
--- /dev/null
+++ b/src/interfaces/ISection.ts
@@ -0,0 +1,6 @@
+import type { IList } from "./IList";
+
+export default interface ISection {
+  title: string;
+  apiFunction: (page: number) => Promise<IList>;
+}
diff --git a/src/interfaces/IStatePopup.ts b/src/interfaces/IStatePopup.ts
index cdc01a8..3932759 100644
--- a/src/interfaces/IStatePopup.ts
+++ b/src/interfaces/IStatePopup.ts
@@ -1,8 +1,9 @@
-export enum PopupTypes {
-  Movie = "movie",
-  Show = "show",
-  Person = "person"
-}
+import type { MediaTypes } from "./IList";
+// export enum PopupTypes {
+//   Movie = "movie",
+//   Show = "show",
+//   Person = "person"
+// }
 
 // export interface IPopupOpen {
 //   id: string | number;
@@ -11,6 +12,6 @@ export enum PopupTypes {
 
 export interface IStatePopup {
   id: number | null;
-  type: PopupTypes | null;
+  type: MediaTypes | null;
   open: boolean;
 }
diff --git a/src/modules/popup.ts b/src/modules/popup.ts
index 5d3ddde..1d73150 100644
--- a/src/modules/popup.ts
+++ b/src/modules/popup.ts
@@ -1,4 +1,5 @@
-import { PopupTypes } from "../interfaces/IStatePopup";
+import router from "../routes";
+import { ListTypes } from "../interfaces/IList";
 import type { IStatePopup } from "../interfaces/IStatePopup";
 
 const removeIncludedQueryParams = (params, key) => {
@@ -6,26 +7,29 @@ const removeIncludedQueryParams = (params, key) => {
   return params;
 };
 
+function paramsToObject(entries) {
+  const result = {};
+  for (const [key, value] of entries) {
+    // each 'entry' is a [key, value] tupple
+    result[key] = value;
+  }
+  return result;
+}
+
 const updateQueryParams = (id: number | null = null, type: string = "") => {
   let params = new URLSearchParams(window.location.search);
   params = removeIncludedQueryParams(params, "movie");
   params = removeIncludedQueryParams(params, "show");
   params = removeIncludedQueryParams(params, "person");
 
-  if (id && type in PopupTypes) {
+  if (id && type) {
     params.append(type, id.toString());
   }
 
-  let url = `${window.location.protocol}//${window.location.hostname}${
-    window.location.port ? `:${window.location.port}` : ""
-  }${window.location.pathname}${params.toString().length ? `?${params}` : ""}`;
-
-  if (window.preventPushState) {
-    window.history.replaceState({}, "search", url);
-    window.preventPushState = false;
-  } else {
-    window.history.pushState({}, "search", url);
-  }
+  router.push({
+    path: window.location.pathname,
+    query: paramsToObject(params.entries())
+  });
 };
 
 const state: IStatePopup = {
@@ -63,6 +67,17 @@ export default {
     close: ({ commit }) => {
       commit("SET_CLOSE");
       updateQueryParams(); // reset
+    },
+    resetStateFromUrlQuery: ({ commit }, query: any) => {
+      let { movie, show, person } = query;
+      movie = !isNaN(movie) ? Number(movie) : movie;
+      show = !isNaN(show) ? Number(show) : show;
+      person = !isNaN(person) ? Number(person) : person;
+
+      if (movie) commit("SET_OPEN", { id: movie, type: "movie" });
+      else if (show) commit("SET_OPEN", { id: show, type: "show" });
+      else if (person) commit("SET_OPEN", { id: person, type: "person" });
+      else commit("SET_CLOSE");
     }
   }
 };