diff --git a/package.json b/package.json
index 437dc0d..1542d5c 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,10 @@
     "@sveltejs/adapter-node": "^1.0.0-next.95",
     "@types/auth0": "^2.35.3",
     "cookie": "^0.4.1",
+    "gridjs": "^5.1.0",
+    "gridjs-svelte": "^2.1.1",
     "husky": "^8.0.1",
-    "pretty-quick": "^3.1.3"
+    "pretty-quick": "^3.1.3",
+    "svelte-simple-modal": "^1.4.1"
   }
 }
diff --git a/src/app.css b/src/app.css
index 2262bb0..fcba834 100644
--- a/src/app.css
+++ b/src/app.css
@@ -30,6 +30,8 @@
   --global-border-radius: 6px;
 
   --global-letter-spacing: 0.03em;
+
+  --global-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 }
 
 :root .dark {
diff --git a/src/lib/authInterface.d.ts b/src/lib/authInterface.d.ts
index 1425c80..d787ba1 100644
--- a/src/lib/authInterface.d.ts
+++ b/src/lib/authInterface.d.ts
@@ -7,4 +7,5 @@ export interface UserObjectInterface {
   sub?: string;
   updated_at?: string;
   username?: string;
+  role?: string[];
 }
diff --git a/src/lib/builderForm/BuilderForm.svelte b/src/lib/builderForm/BuilderForm.svelte
index dd615c6..93f6f04 100644
--- a/src/lib/builderForm/BuilderForm.svelte
+++ b/src/lib/builderForm/BuilderForm.svelte
@@ -18,10 +18,11 @@
   let keywordList: string[] = $currentBuilderStatus.keywords;
   let ingredientList: string[] = $currentBuilderStatus.ingredients;
   let instructionList: InstructionsInterface[] = $currentBuilderStatus.instructions;
-  let recipeYield: string = $currentBuilderStatus.yield;
+  // let recipeYield: string = $currentBuilderStatus.yield;
+  let recipeYield: string = '2';
   let category: string = $currentBuilderStatus.category;
   let cuisine: string = $currentBuilderStatus.cuisine;
-  let calories: string = $currentBuilderStatus.nutrition.calories;
+  let calories: string = $currentBuilderStatus.nutrition.calories.toString();
   let totalTime: number = $currentBuilderStatus.totalTime;
 
   // Keywords
@@ -233,7 +234,7 @@
 
   <!-- Calories -->
   <div class="formGroup">
-    <label class="formLabel" for="yield">Calories for dish</label>
+    <label class="formLabel" for="calories">Calories for dish</label>
     <input
       class="formInput"
       id="calories"
diff --git a/src/lib/button/Button.svelte b/src/lib/button/Button.svelte
index b58c575..9c32b0e 100644
--- a/src/lib/button/Button.svelte
+++ b/src/lib/button/Button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let formType: string | undefined = undefined;
-  export let variant: string = 'primary';
+  export let variant: 'primary' | 'link' | 'accent' | 'success' | 'danger' = 'primary';
 </script>
 
 <button class={`${variant} ${$$props.class}`} type={formType} on:click><slot /></button>
@@ -47,4 +47,23 @@
     background-color: var(--accent);
     color: var(--white);
   }
+
+  button.danger {
+    background-color: hsla(var(--red-hue), 95%, 92%);
+    outline: 1px solid hsla(var(--red-hue), 95%, 80%);
+  }
+
+  button.danger:hover,
+  button.danger:focus {
+    background-color: hsla(var(--red-hue), 95%, 85%);
+  }
+
+  button.success {
+    background-color: hsla(var(--green-hue), 95%, 92%);
+    outline: 1px solid hsla(var(--green-hue), 95%, 80%);
+  }
+  button.success:hover,
+  button.success:focus {
+    background-color: hsla(var(--green-hue), 95%, 85%);
+  }
 </style>
diff --git a/src/lib/data/biscuits.json b/src/lib/data/biscuits.json
index 6a2b0d1..43594f8 100644
--- a/src/lib/data/biscuits.json
+++ b/src/lib/data/biscuits.json
@@ -6,7 +6,8 @@
   },
   "description": "Biscuits for biscuits and gravy",
   "keywords": ["biscuit", "bread", "breakfast"],
-  "yield": "6 biscuits",
+  "totalTime": "100",
+  "yield": "6",
   "category": "Bread",
   "cuisine": "American",
   "ingredients": [
diff --git a/src/lib/data/empty.json b/src/lib/data/empty.json
index 053c47d..1b080ff 100644
--- a/src/lib/data/empty.json
+++ b/src/lib/data/empty.json
@@ -5,7 +5,7 @@
     "reference": ""
   },
   "description": "",
-  "totalTime": 0,
+  "totalTime": "",
   "keywords": [],
   "yield": "",
   "category": "",
diff --git a/src/lib/data/example.json b/src/lib/data/example.json
index dcb89b9..626d1de 100644
--- a/src/lib/data/example.json
+++ b/src/lib/data/example.json
@@ -11,7 +11,7 @@
   "category": "Dessert",
   "cuisine": "American",
   "nutrition": {
-    "calories": "270 calories"
+    "calories": "270"
   },
   "ingredients": [
     "2 cups of flour",
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
index 29add9f..b3939ba 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import { user } from '$lib/stores';
   import AuthButton from '$lib/auth/authButton.svelte';
   import Logo from '$lib/logo/Logo.svelte';
 </script>
@@ -14,6 +15,11 @@
       <li class:active={$page.url.pathname.includes('/builder')}>
         <a sveltekit:prefetch href="/builder">Builder</a>
       </li>
+      {#if $user?.role?.includes('admin')}
+        <li class:active={$page.url.pathname.includes('/admin')}>
+          <a sveltekit:prefetch href="/admin">admin</a>
+        </li>
+      {/if}
     </ul>
   </nav>
   <div class="brand">
diff --git a/src/lib/modals/DecisionPopup.svelte b/src/lib/modals/DecisionPopup.svelte
new file mode 100644
index 0000000..c8b9997
--- /dev/null
+++ b/src/lib/modals/DecisionPopup.svelte
@@ -0,0 +1,42 @@
+<script>
+  export let decision = 'approve';
+  import Icon from '$lib/icon/Icon.svelte';
+</script>
+
+{#if decision === 'approve'}
+  <section class="decision approve">
+    <Icon name="check-circle" size="50px" />
+    <span> You have approved this recipe </span>
+  </section>
+{/if}
+
+{#if decision === 'deny'}
+  <section class="decision deny">
+    <Icon name="x-circle" size="50px" />
+    <span> You have denied this recipe </span>
+  </section>
+{/if}
+
+<style>
+  .decision {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 25px;
+  }
+
+  .approve :global(svg) {
+    stroke: hsla(var(--green-hue), 95%, 40%);
+  }
+
+  .deny :global(svg) {
+    stroke: hsla(var(--red-hue), 95%, 40%);
+  }
+
+  .decision span {
+    margin: var(--global-padding-x) 0;
+    letter-spacing: var(--global-letter-spacing);
+    text-transform: lowercase;
+    font-weight: 500;
+  }
+</style>
diff --git a/src/lib/recipes/Recipe.svelte b/src/lib/recipes/Recipe.svelte
index 59338ee..548dd43 100644
--- a/src/lib/recipes/Recipe.svelte
+++ b/src/lib/recipes/Recipe.svelte
@@ -48,7 +48,7 @@
 
       <!-- Yield information -->
       {#if data.yield}
-        <div class="section recipe_author">
+        <div class="section recipe_yield">
           <span>Yields <b>{data.yield}</b> portions</span>
         </div>
       {/if}
@@ -162,12 +162,16 @@
   }
 
   .recipe_name,
+  .recipe_nutrition,
+  .recipe_yield,
   .recipe_author,
   .recipe_category,
   .recipe_author a {
     color: var(--white);
   }
   .recipe_author,
+  .recipe_nutrition,
+  .recipe_yield,
   .recipe_category {
     padding-left: 6px;
   }
diff --git a/src/lib/recipes/RecipeList.svelte b/src/lib/recipes/RecipeList.svelte
index 09fb061..76224dd 100644
--- a/src/lib/recipes/RecipeList.svelte
+++ b/src/lib/recipes/RecipeList.svelte
@@ -37,9 +37,11 @@
   {/if}
 
   {#if !isLoading && $recipeList.length}
-    {#each $recipeList as recipe}
-      <a href={`recipes/${recipe.ID}`}> {recipe.name} </a>
-    {/each}
+    <ul>
+      {#each $recipeList as recipe}
+        <li><a href={`recipes/${recipe.ID}`}> {recipe.name} </a></li>
+      {/each}
+    </ul>
   {/if}
 
   {#if !isLoading && !isError && !$recipeList.length}
diff --git a/src/lib/responsesInterface.d.ts b/src/lib/responsesInterface.d.ts
index 850ebf8..8736a56 100644
--- a/src/lib/responsesInterface.d.ts
+++ b/src/lib/responsesInterface.d.ts
@@ -5,6 +5,7 @@ export interface RecipeListInterface extends RecipeInterface {
   CreatedAt: Date;
   UpdatedAt: Date;
   DeletedAt?: any;
+  userID: string;
 }
 
 export interface RecipeByIDInterface extends RecipeInterface {
@@ -12,4 +13,13 @@ export interface RecipeByIDInterface extends RecipeInterface {
   CreatedAt: Date;
   UpdatedAt: Date;
   DeletedAt?: any;
+  userID: string;
+}
+
+export interface UnapprovedRecipeInterface extends RecipeInterface {
+  ID: number;
+  CreatedAt: Date;
+  UpdatedAt: Date;
+  DeletedAt?: any;
+  userID: string;
 }
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index a571a86..391e75b 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -7,9 +7,11 @@ import * as emptyRecipe from '$lib/data/empty.json';
 export const currentBuilderStatus = writable(emptyRecipe);
 export const recipeList = writable([] as RecipeListInterface[]);
 export const recipe = writable({} as RecipeByIDInterface);
+export const unapprovedRecipeList = writable([] as RecipeListInterface[]);
 
 // Authentication
 export const isAuthenticated = writable(false);
 export const user = writable(({} as UserObjectInterface) || {});
 export const popupOpen = writable(false);
 export const error = writable();
+export const isAdmin = writable(false);
diff --git a/src/routes/admin.svelte b/src/routes/admin.svelte
new file mode 100644
index 0000000..89fca35
--- /dev/null
+++ b/src/routes/admin.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { user } from '$lib/stores';
+  import { API_BASE_URL } from '$lib/consts';
+  import { unapprovedRecipeList } from '$lib/stores';
+  import Grid from 'gridjs-svelte';
+  import { html } from 'gridjs';
+
+  const getUnapprovedRecipes = API_BASE_URL + '/recipes/' + '?approved=false';
+  let isLoading: Boolean = true;
+  let isError: Boolean = false;
+  let recipes: any;
+
+  onMount(async () => {
+    if (!$user?.role?.includes('admin')) {
+      goto('/');
+    }
+
+    fetch(getUnapprovedRecipes)
+      .then((response) => response.json())
+      .then((data) => {
+        unapprovedRecipeList.set(data);
+        isLoading = false;
+      })
+      .catch((error) => {
+        console.log(error);
+        isError = true;
+        isLoading = false;
+        return [];
+      });
+  });
+
+  let newArr = $unapprovedRecipeList.map((recipe) => {
+    return {
+      id: recipe.ID,
+      name: recipe.name,
+      created: recipe.CreatedAt,
+      user: recipe.userID
+    };
+  });
+
+  const generateHref = (id: string) => {
+    return `/admin/${id}`;
+  };
+
+  const formatTime = (date: string) => {
+    return date.split('T')[0];
+  };
+
+  const formatUser = (user: string) => {
+    return user.split('auth0|')[1];
+  };
+
+  const columns = [
+    {
+      name: 'id',
+      formatter: (cell: string) => html(`<a href=${generateHref(cell)}>${cell}</a>`)
+    },
+    'name',
+    {
+      name: 'created',
+      formatter: (cell: string) => html(`<span>${formatTime(cell)}</span>`)
+    },
+    {
+      name: 'user',
+      formatter: (cell: string) => html(`<span>${formatUser(cell)}</span>`)
+    }
+  ];
+</script>
+
+<svelte:head>
+  <title>admin | twotop</title>
+  <meta name="Admin | twotop" content="approve recipes" />
+</svelte:head>
+
+<section>
+  <h1>Recipes to approve</h1>
+  <Grid {columns} data={newArr} />
+</section>
+
+<style>
+  :global(.gridjs-table) {
+    background-color: var(--primary);
+    border-radius: var(--global-border-radius);
+    box-shadow: var(--global-box-shadow);
+    margin-left: auto;
+    margin-right: auto;
+    border-collapse: collapse;
+  }
+
+  :global(.gridjs-thead) {
+    background-color: var(--primary-light);
+  }
+
+  :global(.gridjs-tr) {
+    border-bottom: 1px solid var(--primary-light);
+  }
+  :global(.gridjs-th-content) {
+    padding: var(--global-padding-x);
+  }
+
+  :global(.gridjs-td) {
+    padding: var(--global-padding-x);
+  }
+</style>
diff --git a/src/routes/admin/[id].svelte b/src/routes/admin/[id].svelte
new file mode 100644
index 0000000..c58f818
--- /dev/null
+++ b/src/routes/admin/[id].svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import Recipe from '$lib/recipes/Recipe.svelte';
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { API_BASE_URL } from '$lib/consts';
+  import { recipe } from '$lib/stores';
+  import { page } from '$app/stores';
+  import Loading from '$lib/loading/Loading.svelte';
+  import Error from '$lib/error/Error.svelte';
+  import DecisionPopup from '$lib/modals/DecisionPopup.svelte';
+  import Button from '$lib/button/Button.svelte';
+  import Modal, { bind } from 'svelte-simple-modal';
+  import { goto } from '$app/navigation';
+
+  const urlID: string = $page.url.pathname.split('/admin/')[1];
+
+  const getRecipeByID = API_BASE_URL + '/recipes/' + urlID;
+
+  let isLoading: Boolean = true;
+  let isError: Boolean = false;
+  const modal = writable(null);
+  const showModal = (decision: 'approve' | 'deny') => modal.set(bind(DecisionPopup, { decision }));
+
+  onMount(async () => {
+    fetch(getRecipeByID)
+      .then((response) => response.json())
+      .then((data) => {
+        recipe.set(data);
+        isLoading = false;
+      })
+      .catch((error) => {
+        console.log(error);
+        isError = true;
+        isLoading = false;
+        return [];
+      });
+  });
+
+  async function handleDecision(decision: 'approve' | 'deny') {
+    let postRecipe = `${API_BASE_URL}/${decision}/${urlID}`;
+
+    // const postData = {
+    //   decision
+    // };
+
+    // const res = await fetch(postRecipe, {
+    //   method: 'POST',
+    //   body: JSON.stringify(postData)
+    // });
+
+    // const json = await res.json();
+    // const result = json;
+
+    console.log(postRecipe);
+    showModal(decision);
+    setTimeout(() => goto('/admin'), 1500);
+  }
+</script>
+
+<svelte:head>
+  <title>recipe | twotop</title>
+  <meta name="admin | twotop" content="twotop admin" />
+</svelte:head>
+
+{#if isError}
+  <Error />
+{/if}
+
+{#if isLoading}
+  <Loading />
+{/if}
+
+{#if !isLoading && !isError}
+  <section>
+    <Recipe data={$recipe} />
+    <div class="recipeActions">
+      <span> actions </span>
+      <Button variant="success" on:click={() => handleDecision('approve')}>Approve</Button>
+      <Button variant="danger" on:click={() => handleDecision('deny')}>Deny</Button>
+    </div>
+  </section>
+  <Modal show={$modal} closeButton={false} />
+{/if}
+
+<style>
+  section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+  }
+
+  .recipeActions {
+    background-color: var(--base);
+    box-shadow: var(--global-box-shadow);
+    border-radius: var(--global-border-radius);
+    padding: 15px;
+    z-index: 2;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    top: 50px;
+    right: 12px;
+  }
+
+  .recipeActions span {
+    text-align: center;
+  }
+</style>
diff --git a/src/routes/recipes/[id].svelte b/src/routes/recipes/[id].svelte
index 23b3229..db12fa3 100644
--- a/src/routes/recipes/[id].svelte
+++ b/src/routes/recipes/[id].svelte
@@ -20,7 +20,6 @@
       .then((data) => {
         recipe.set(data);
         isLoading = false;
-        console.log(recipe);
       })
       .catch((error) => {
         console.log(error);
diff --git a/yarn.lock b/yarn.lock
index c810f7d..4ead812 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1221,6 +1221,18 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+gridjs-svelte@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/gridjs-svelte/-/gridjs-svelte-2.1.1.tgz#1356ed519aafe20ffd1c8195945e4ac598e2d3ec"
+  integrity sha512-tYkgdqNKSnfmAYYc8EP4axn/Xlugp7VLwAlpNkP4SBLHHYD/ejD2DJ+FMatDNqcJ1Z1kuMnJWO+VBcAOirEByw==
+
+gridjs@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/gridjs/-/gridjs-5.1.0.tgz#77563e766c1faf6e8042577404098bb05ec514d0"
+  integrity sha512-ElT4RccHVZXR6mAn0Neh7jRv0yLPYLl9tWr9EC1tIJ7UC035kScGc/VMSJlPmOTyUU6qPUz1mtmzg/i8+IT24g==
+  dependencies:
+    preact "^10.10.6"
+
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
@@ -1693,6 +1705,11 @@ postcss@^8.4.16:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preact@^10.10.6:
+  version "10.11.0"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.0.tgz#26af45a0613f4e17a197cc39d7a1ea23e09b2532"
+  integrity sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -2009,6 +2026,11 @@ svelte-search@^1.1.0:
   resolved "https://registry.yarnpkg.com/svelte-search/-/svelte-search-1.1.0.tgz#c41cc089a6a15d40911912d7ce497e6ae49d2150"
   integrity sha512-e5hci9fZPMXb3fuRZvcYJGqh448M8vV3biY4lN4Nr9fqrG/HBnTjWYstKb399aUe9tsBxRbxRAWgtKicisL23g==
 
+svelte-simple-modal@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-1.4.1.tgz#1f5c23df26619a2a7f262b5259287b9497b9d19a"
+  integrity sha512-em/uxH1xvQZoXTOq81Kk0u9ltjf/EyQkNiKTQJQmdCygDMqyUfMCFzLnbIQ4ApfV4BcRh6eYbwbCeeWTOyfpsg==
+
 svelte-typeahead@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/svelte-typeahead/-/svelte-typeahead-4.3.2.tgz#52efd89acc5a41e34d778c8284f95007081aecc7"