diff --git a/src/helpers/css_helper.css b/src/helpers/css_helper.css
deleted file mode 100644
index d97d5a8..0000000
--- a/src/helpers/css_helper.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/* 599px and smaller */
-@media (max-width: 599px) {
-
-}
-
-/* 600px - 719px */
-@media (min-width: 600px) and (max-width: 719px) {
-
-}
-
-/* 720x - 1023px */
-@media (min-width: 720px) and (max-width: 1023px) {
-
-}
-
-/* 1024px - 1279px */
-@media (min-width: 1024px) and (max-width: 1279px) {
-
-}
-
-/* 1280px - 1439px */
-@media (min-width: 1280px) and (max-width: 1439px) {
-
-}
-
-/* 1440px and up */
-@media (min-width: 1440px) {
-
-}
-
-<picture class="ratio-16/9">
-    <source media="(max-width: 375px)"
-            srcset="URL,
-                    URL 2x">
-    <source media="(max-width: 599px)"
-            srcset="URL,
-                    URL 2x">
-    <source media="(max-width: 719px)"
-            srcset="URL,
-                    URL 2x">
-    <source media="(max-width: 1023px)"
-            srcset="URL,
-                    URL 2x">
-    <img src="URL"
-        srcset="{URL, URL 2x"
-        alt="..." loading="lazy">
-</picture>
\ No newline at end of file
diff --git a/src/helpers/validate.js b/src/helpers/validate.js
deleted file mode 100644
index 3f37374..0000000
--- a/src/helpers/validate.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Check email format with Regex Validation
-export function isEmail(email) {
-    const regCheck = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-    return regCheck.test(String(email).toLowerCase());
-}
\ No newline at end of file
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 6eef4a2..ee4fcc9 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -8,6 +8,7 @@
     // Public Routes
     const logoutRoutes = ["/login", "/register", "/forgot"];
 
+    // redirect if logged in and redirect if logged out
     if (user && logoutRoutes.includes(path)) {
       return this.redirect(302, "accounts");
     } else if (!user && loginRoutes.includes(path)) {
@@ -17,25 +18,31 @@
 </script>
 
 <script>
-  import { onMount, afterUpdate, beforeUpdate } from "svelte";
-  import * as api from "api.js";
+  import { afterUpdate } from "svelte";
   import { stores } from "@sapper/app";
   import { accounts } from "../store/accounts";
+  import * as api from "api.js";
   import Nav from "../components/Nav.svelte";
 
   const { session } = stores();
 
   export let segment;
 
+  // populate the accounts store
+  // afterUpdate is used here to avoid persisting data
   afterUpdate(async () => {
+    // check for session user and that store is empty
     if ($session.user._id && $accounts.length === 0) {
-      console.log("this is only once done to avoid persisting data");
+      // call api for users store data
       const res = await api.get(`accounts/`, $session.token, $session.user._id);
       const accountData = await res.data;
+      // handle api data error
       if (!accountData) {
-        return console.log("No Account Data Returned 😭");
+        return console.log("Could not fetch data from api...");
       }
+      // set store data from api response
       accounts.setupAccounts(accountData);
+      console.log("Store Data Retrieved and Set...");
     }
   });
 </script>
diff --git a/src/routes/account/[_id].svelte b/src/routes/account/[_id].svelte
index ce2dbd2..a4d63e1 100644
--- a/src/routes/account/[_id].svelte
+++ b/src/routes/account/[_id].svelte
@@ -1,33 +1,25 @@
 <script context="module">
   import * as api from "api.js";
-
+  // preload account data by id
   export async function preload(page, session) {
-    console.log("page in [_id.svelte]", page);
-    console.log("session in [_id.svelte]", session);
-    const { _id } = page.params;
+    //console.log("page in [_id.svelte]", page);
+    //console.log("session in [_id.svelte]", session);
 
-    const res = await api.get(
-      `accounts/${_id}`,
-      session.token,
-      session.user._id
-    );
+    // _id variable from page params
+    const { _id } = page.params;
+    // call api for account data by id
+    const res = await api.get(`accounts/${_id}`,session.token,session.user._id);
     const accountData = res.data;
-
-    console.log("individual acount _id", accountData);
-
+    // console log for prefetch verication comment out for production
+    console.log(accountData.accountName + " Loaded...");
     return { accountData };
   }
 </script>
 
 <script>
   export let accountData;
-  // console.log("client _id", accountData);
-
+  // assign dynamic variable to project data
   $: projects = accountData.projects;
-
-  if (accountData) {
-    //activeName = accountData.accountName;
-  }
 </script>
 
 <svelte:head>
@@ -40,9 +32,10 @@
   {#if projects}
     {#each projects as project}
       <li>
+        <!-- Prefetch the data on link hover rel="prefetch" -->
         <a
           class="hover:underline text-blue-500"
-          href="project/{project._id}"
+          href="account/{accountData._id}/project/{project._id}"
           rel="prefetch"
           id={project._id}>
           {project.projectName}
@@ -50,7 +43,7 @@
       </li>
     {:else}
       <li>
-        <p>No projects found or call has not been made</p>
+        <p>No projects found or not logged in...</p>
       </li>
     {/each}
   {/if}
diff --git a/src/routes/account/index.svelte b/src/routes/account/index.svelte
deleted file mode 100644
index a51ddc7..0000000
--- a/src/routes/account/index.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-    // your script goes here
-</script>
-
-<div>Account Page</div>
\ No newline at end of file
diff --git a/src/routes/account/project/[_id].svelte b/src/routes/account/project/[_id].svelte
new file mode 100644
index 0000000..63259e2
--- /dev/null
+++ b/src/routes/account/project/[_id].svelte
@@ -0,0 +1,35 @@
+<script context="module">
+  import * as api from "api.js";
+  // preload account data by id
+  export async function preload(page, session) {
+    //console.log("page in [_id.svelte]", page);
+    //console.log("session in [_id.svelte]", session);
+    console.log({
+      host: page.host, 
+      path: page.path, 
+      params: page.params, 
+      query: page.query
+    })
+
+    // _id variable from page params
+    //const { _id } = page.params;
+    // call api for account data by id
+    //const res = await api.get(`projects/${_id}`,session.token,session.user._id);
+    //const projectData = res.data;
+    // console log for prefetch verication comment out for production
+    //console.log(projectData.projectName + " Loaded...");
+    //return { projectData };
+  }
+</script>
+
+<script>
+  export let projectData;
+  // assign dynamic variable to project data
+  $: projects = projectData;
+</script>
+
+<!-- <svelte:head>
+  <title>{projectData.projectName}</title>
+</svelte:head> -->
+
+<div>Project Data Will go here...</div>
diff --git a/src/routes/accounts.svelte b/src/routes/accounts.svelte
index 8e18e6a..859c486 100644
--- a/src/routes/accounts.svelte
+++ b/src/routes/accounts.svelte
@@ -1,18 +1,32 @@
-<script>
-  import { accounts } from "../store/accounts";
-  import { goto, stores } from "@sapper/app";
-  const { session } = stores();
+<script context="module">
+  import * as api from "api.js";
+  // preload account data
+  export async function preload(page, session) {
+    // call api for account data
+    const res = await api.get(`accounts/`,session.token,session.user._id);
+    const accountData = res.data;
+    return { accountData };
+  }
+</script>
 
-  $: console.log("$ession in account", $session);
+<script>
+  export let accountData;
+  // assign dynamic variable to project data
+  $: accounts = accountData;
 </script>
 
+<svelte:head>
+  <title>Accounts</title>
+</svelte:head>
+
 <ul>
-  {#if $accounts.length > 0}
-    {#each $accounts as account}
+  {#if accounts}
+    {#each accounts as account}
       <li>
+        <!-- Prefetch the data on link hover rel="prefetch"" -->
         <a
           class="hover:underline text-blue-500"
-          href="/account/{account._id}"
+          href="account/{account._id}"
           rel="prefetch"
           id={account._id}>
           {account.accountName}
@@ -20,8 +34,8 @@
       </li>
     {:else}
       <li>
-        <p>No Accounts found or call has not been made</p>
+        <p>No projects found or not logged in...</p>
       </li>
     {/each}
   {/if}
-</ul>
+</ul>
\ No newline at end of file
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index b115819..96f3d8d 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -1,11 +1,9 @@
 <script>
-  import * as api from "api.js";
   import { onMount, onDestroy } from "svelte";
   import { goto, stores } from "@sapper/app";
   import { post } from "auth.js";
   import TextInput from "../components/UI/TextInput.svelte";
   import Button from "../components/UI/Button.svelte";
-  //   import { accountStore } from "../store/accountStore";
 
   const { session } = stores();
 
@@ -15,32 +13,19 @@
   let user = [];
 
   async function submit() {
+    // call api to login user
     const response = await post(`auth/login`, { email, password });
-
+    // handle api data error
     if (!response.success) {
       return console.log("Something went wrong logging in...");
     }
-
+    // update the session data of user and route
     if (response.user) {
       $session.user = response.user;
       $session.token = response.token;
-      //   updateStore($session.token, $session.user._id);
-      goto("/accounts");
+      return goto("/accounts");
     }
   }
-
-  // async function updateStore(token, userID) {
-  //     const res = await api.get(`accounts/`, token, userID);
-  //     const accountData = await res.data;
-
-  //     if (!accountData) {
-  //         return console.log('No Account Data Returned 😭')
-  //     }
-
-  //     return accountStore.set(accountData);
-  // }
-
-  //$: console.log('$', $accountStore);
 </script>
 
 <svelte:head>
diff --git a/src/routes/project/[_id].svelte b/src/routes/project/[_id].svelte
new file mode 100644
index 0000000..63259e2
--- /dev/null
+++ b/src/routes/project/[_id].svelte
@@ -0,0 +1,35 @@
+<script context="module">
+  import * as api from "api.js";
+  // preload account data by id
+  export async function preload(page, session) {
+    //console.log("page in [_id.svelte]", page);
+    //console.log("session in [_id.svelte]", session);
+    console.log({
+      host: page.host, 
+      path: page.path, 
+      params: page.params, 
+      query: page.query
+    })
+
+    // _id variable from page params
+    //const { _id } = page.params;
+    // call api for account data by id
+    //const res = await api.get(`projects/${_id}`,session.token,session.user._id);
+    //const projectData = res.data;
+    // console log for prefetch verication comment out for production
+    //console.log(projectData.projectName + " Loaded...");
+    //return { projectData };
+  }
+</script>
+
+<script>
+  export let projectData;
+  // assign dynamic variable to project data
+  $: projects = projectData;
+</script>
+
+<!-- <svelte:head>
+  <title>{projectData.projectName}</title>
+</svelte:head> -->
+
+<div>Project Data Will go here...</div>