diff --git a/package.json b/package.json
index 849b7d5..2f4ac35 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "flowbite-svelte": "^0.44.22",
     "postcss": "^8.4.33",
     "postcss-load-config": "^5.0.2",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.9",
     "svelte-check": "^3.6.3",
diff --git a/src/app.html b/src/app.html
index 05b4710..704de3f 100644
--- a/src/app.html
+++ b/src/app.html
@@ -5,7 +5,10 @@
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width" />
     %sveltekit.head%
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
+    />
     <html data-theme="dark" />
   </head>
 
diff --git a/src/lib/ArticleHeader.svelte b/src/lib/ArticleHeader.svelte
index e0286fa..14ffe7f 100644
--- a/src/lib/ArticleHeader.svelte
+++ b/src/lib/ArticleHeader.svelte
@@ -1,43 +1,57 @@
 <script lang="ts">
- 	import {nip19} from 'nostr-tools';
- 	import {ndk} from '$lib/ndk';
- 	import {idList} from '$lib/stores';
-    import DefaultButton from '$lib/defaultShareButton.svelte';
-
- 	export let event: NDKEvent;
- 	const title: string = JSON.parse(event.content).title;
- 	const href: string = nip19.noteEncode(event.id)
- 	const handleSendEvents = () => {
-		$idList=[];
-		for (const id of event.tags.filter((tag)=> tag[0]==='e').map((tag)=> tag[1])) {
-			$idList = [...$idList, id];
-		}
-	};
-
+  import { ndk } from "$lib/ndk";
+  import { nip19 } from "nostr-tools";
+  import type { NDKEvent } from "@nostr-dev-kit/ndk";
+  import { idList } from "$lib/stores";
+  import DefaultButton from "$lib/defaultShareButton.svelte";
 
+  export let event: NDKEvent;
+  const title: string = JSON.parse(event.content).title;
+  const href: string = nip19.noteEncode(event.id);
+  // console.log(event);
+  // con
+  // console.log(nip19.neventEncode(event));
 
+  const handleSendEvents = () => {
+    $idList = [];
+    for (const id of event.tags
+      .filter((tag) => tag[0] === "e")
+      .map((tag) => tag[1])) {
+      $idList = [...$idList, id];
+    }
+  };
 </script>
 
-<a data-sveltekit-preload-data="tap" href="/{href}">
-	<div class="ArticleHeader" on:click={handleSendEvents}>
-		<h2>{title}</h2>
-	</div>
-
-</a>
+<div class="ArticleBox">
+  <a href="/{href}">
+    <div class="ArticleHeader" on:click={handleSendEvents}>
+      <p class="title">{title}</p>
+    </div>
+  </a>
+  <DefaultButton {event} />
+</div>
+<br />
 
 <style>
-	.ArticleHeader {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		border: 1px solid purple;
-		border-radius: 10px;
-		padding: 5px;
-		border-top-width: 5px;
-	}
-	.ArticleHeader h2 {
-		font-size: 1.5rem;
-	}
-/* position button top right corner */
+  .ArticleBox {
+    /* position: relative; */
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    border: 1px solid purple;
+    border-radius: 10px;
+    border-top-width: 5px;
+    /* max-width: 100%; */
+  }
+  .ArticleHeader {
+    border-radius: 10px;
+    border-top-width: 5px;
+    text-align: center;
+    padding: 30px;
+    border: 1px solid purple;
+  }
+  .title {
+    color: white;
+    font-size: 1.5em;
+    font-weight: bold;
+  }
 </style>
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 2ad4d6f..67238dc 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -1,3 +1,3 @@
 import { writable } from "svelte/store";
 
-export let idList = writable([]);
+export let idList = writable<string[]>([]);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c787429..77a1cad 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,12 +1,32 @@
 <script>
- // import Login from '$lib/login.svelte';
- import {tabs, userPublickey} from '$lib/state';
- // import {ndk} from '$lib/ndk';
- import {browser} from '$app/environment';
- import {NDKNip07Signer} from '@nostr-dev-kit/ndk';
- import {onMount} from 'svelte';
+  // import Login from '$lib/login.svelte';
+  import { tabs, userPublickey } from "$lib/state";
+  // import {ndk} from '$lib/ndk';
+  import { browser } from "$app/environment";
+  import { NDKNip07Signer } from "@nostr-dev-kit/ndk";
+  import { onMount } from "svelte";
 </script>
 
-
-<!-- <Login /> -->
+<!-- <nav class="abtBox">
+     <a href="./">home</a>
+     <a href="./create">New Note</a>
+     <a href="./about">About</a>
+     </nav> -->
 <slot />
+
+<style>
+  .abtBox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    min-width: 100%;
+    max-height: 40;
+    padding: 10px;
+    background-color: black;
+    /* border-radius: 10px; */
+    /* margin: 10px; */
+    text-decoration: none;
+    font-weight: bold;
+    z-index: 1;
+  }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ed4fc27..6db9e91 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import ArticleHeader from '$lib/ArticleHeader.svelte';
-	import {ndk} from '$lib/ndk';
-    import {nip19} from "nostr-tools";
-    import {idList} from '$lib/stores';
-    const kind = 30040;
-    const count: number = 10
+  import ArticleHeader from "$lib/ArticleHeader.svelte";
+  import { ndk } from "$lib/ndk";
+  import { nip19 } from "nostr-tools";
+  import { idList } from "$lib/stores";
+  const kind = 30040;
+  const count: number = 10;
 
- 	async function loadEvents() {
-		const eventlist = await $ndk.fetchEvents({ kinds: [kind] });
-		return eventlist;
-	}
- 	const eventlist =  loadEvents();
+  async function loadEvents() {
+    const eventlist = await $ndk.fetchEvents({ kinds: [kind] });
+    return eventlist;
+  }
+  const eventlist = loadEvents();
 </script>
 
 {#await eventlist}
-	<p>Loading...</p>
+  <p>Loading...</p>
 {:then events}
-	{#each Array.from(events) as event, i}
-		<ArticleHeader event={event}/>
-	{/each}
+  {#each Array.from(events) as event, i}
+    <ArticleHeader {event} />
+  {/each}
 {/await}
diff --git a/src/routes/[...path]/+page.svelte b/src/routes/[...path]/+page.svelte
deleted file mode 100644
index 0abbae5..0000000
--- a/src/routes/[...path]/+page.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	import {ndk} from '$lib/ndk';
- import { page } from '$app/stores';
- import Article from '$lib/Article.svelte';
- import {idList} from '$lib/stores';
- import {nip19} from 'nostr-tools';
- const id = nip19.decode($page.params.path).data;
-
-
-
-</script>
-<Article />
diff --git a/vite.config.ts b/vite.config.ts
index 3406f32..80864b9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [sveltekit()]
+  plugins: [sveltekit()],
 });
