diff --git a/app/(client)/page.tsx b/app/(client)/page.tsx
index 86a96fa..497c075 100644
--- a/app/(client)/page.tsx
+++ b/app/(client)/page.tsx
@@ -1,6 +1,6 @@
 import Header from "../components/header"
 import PostComponent from "../components/preview-card"
-import { PostType } from "../utills/interface"
+import { PostType } from "../../sanity/lib/interface"
 import { basicFetch, previewData } from "@/sanity/lib/fetchData"
 
 export const revalidate = 60
diff --git a/app/(client)/posts/[slug]/page.tsx b/app/(client)/posts/[slug]/page.tsx
index 781708e..229d128 100644
--- a/app/(client)/posts/[slug]/page.tsx
+++ b/app/(client)/posts/[slug]/page.tsx
@@ -3,7 +3,7 @@ import { getPost } from "@/sanity/lib/fetchData";
 import { PortableText } from "@portabletext/react";
 import Image from "next/image";
 import { urlForImage } from "@/sanity/lib/image";
-import { PostType } from "@/app/utills/interface";
+import { PostType } from "@/sanity/lib/interface";
 import { notFound } from "next/navigation";
 import Header from "@/app/components/header";
 import PostParagraphs from "../../../components/post-paragraph";
diff --git a/app/(client)/tag/[slug]/page.tsx b/app/(client)/tag/[slug]/page.tsx
index 456599d..3fb6f2e 100644
--- a/app/(client)/tag/[slug]/page.tsx
+++ b/app/(client)/tag/[slug]/page.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { getPostsByTag } from "@/sanity/lib/fetchData"
-import { PostType } from "@/app/utills/interface"
+import { PostType } from "@/sanity/lib/interface"
 import Header from "@/app/components/header"
 import Post from "@/app/components/preview-card"
 
diff --git a/app/(client)/tag/page.tsx b/app/(client)/tag/page.tsx
index 4841516..d5fcbfd 100644
--- a/app/(client)/tag/page.tsx
+++ b/app/(client)/tag/page.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { basicFetch, tagsData } from "@/sanity/lib/fetchData"
-import { Tag } from "@/app/utills/interface"
+import { Tag } from "@/sanity/lib/interface"
 import Header from "@/app/components/header"
 import Link from "next/link"
 
@@ -36,9 +36,6 @@ border-primary
 text-words
 bg-background
 hover:text-neutral-500
-
-
-//dark
 dark:bg-backgroundDark
 dark:text-wordsDark
 dark:border-primaryDark
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
index a1d9b4a..2663e95 100644
--- a/app/components/footer.tsx
+++ b/app/components/footer.tsx
@@ -1,8 +1,8 @@
-import { Footer } from "../utills/interface"
+import { FooterTypes } from "../../sanity/lib/interface"
 import { basicFetch, footerData } from "@/sanity/lib/fetchData"
 
 export default async  function Footer() {
-    const footerText: Footer = await basicFetch(footerData)
+    const footerText: FooterTypes = await basicFetch(footerData)
   return (
     <div className={container}>
 
diff --git a/app/components/header.tsx b/app/components/header.tsx
index c637359..2a7b848 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -1,8 +1,8 @@
-import React from "react"
-import QRgrid from "./qr/qrGrid"
+import React from "react";
+import QRgrid from "./qr/qrGrid";
 
 interface Props {
-  title: string
+  title: string;
 }
 
 export default function Header({ title = "" }: Props) {
@@ -14,58 +14,48 @@ export default function Header({ title = "" }: Props) {
 
       <h2 className={headerTitle}>{title}</h2>
     </header>
-  )
+  );
 }
 
 const headerBox = `
-  flex
   fixed
+  flex
   right-1/2
   transform 
   translate-x-1/2 
-  
   h-20
   w-full 
   max-w-[61rem]
-  sm:h-40
-  
   border-b
   border-primary 
   dark:border-primaryDark
-
   overflow-hidden
   backdrop-blur-[0.5rem]
-`
-
+  sm:h-40
+`;
+const headerTitle = `
+my-auto  
+mx-20
+w-1/3 
+px-1
+uppercase 
+font-bold
+text-left
+rotate-0
+bg-background
+dark:bg-backgroundDark
+sm:p-4
+sm:mx-auto
+sm:text-center
+sm:text-2xl
+sm:-rotate-3
+`;
 const QRstyle = `
   absolute 
   inset-0
-  
   flex 
   items-center 
   justify-center
-
   opacity-0
   sm:opacity-100
-`
-
-const headerTitle = `
-  my-auto  
-  mx-20
-  w-1/3 
-  px-1
-
-  uppercase 
-  font-bold
-  text-left
-  rotate-0
-  
-  bg-background
-  dark:bg-backgroundDark
-
-  sm:p-4
-  sm:mx-auto
-  sm:text-center
-  sm:text-2xl
-  sm:-rotate-3
-`
+`;
diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
index e593643..c41c773 100644
--- a/app/components/navbar.tsx
+++ b/app/components/navbar.tsx
@@ -1,32 +1,29 @@
-import AllTagsButton from "./buttons/all-tags-button"
-import HomeButton from "./buttons/home-button"
-import ThemeSwitch from "./buttons/theme-switch"
+import AllTagsButton from "./buttons/all-tags-button";
+import HomeButton from "./buttons/home-button";
+import ThemeSwitch from "./buttons/theme-switch";
 
 export default function NavBar() {
   return (
     <div className={navContainer}>
-        <HomeButton />
+      <HomeButton />
       <div className="flex gap-4">
         <AllTagsButton />
         <ThemeSwitch />
       </div>
     </div>
-  )
+  );
 }
 
 const navContainer = `
   z-50
-
   fixed
+  flex 
+  justify-between
   right-1/2
   transform 
   translate-x-1/2 
-
   w-full 
   max-w-[61rem]
   px-4
   py-8
-
-  flex 
-  justify-between
-`
+`;
diff --git a/app/components/post-infoBox.tsx b/app/components/post-infoBox.tsx
index d042d15..84ce028 100644
--- a/app/components/post-infoBox.tsx
+++ b/app/components/post-infoBox.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import { Links, PostType } from "../utills/interface";
+import { Links, PostType } from "../../sanity/lib/interface";
 
 interface InfoBoxProps {
   info: PostType;
@@ -10,98 +10,92 @@ interface InfoBoxProps {
 export default function InfoBox({ info, links }: InfoBoxProps) {
   return (
     <>
-     <div className="pb-4 max-width mx-auto">
-      <div className="flex justify-between items-end">
-        <h1 className="text-left text-3xl font-bold">{info?.title}</h1>
-        <span className="text-sm">{new Date(info?.publishedAt).toDateString()}</span>
-      </div>
-      
-      </div>
-    <div className="flex flex-row max-width mx-auto border-y border-primary dark:border-primaryDark py-4">
-      <div className="w-0 sm:w-3/5">
-        {info && (
-          <Image
-          src={info.image}
-          alt={info.alt}
-          width={300}
-          height={300}
-          layout="fixed"
-          />
-        )}
+      <div className="pb-4 max-width mx-auto">
+        <div className="flex justify-between items-end">
+          <h1 className="text-left text-3xl font-bold">{info?.title}</h1>
+          <span className="text-sm">
+            {new Date(info?.publishedAt).toDateString()}
+          </span>
+        </div>
       </div>
+      <div className="flex flex-row max-width mx-auto border-y border-primary dark:border-primaryDark py-4">
+        <div className="w-0 sm:w-3/5">
+          {info && (
+            <Image
+              src={info.image}
+              alt={info.alt}
+              width={300}
+              height={300}
+              layout="fixed"
+            />
+          )}
+        </div>
 
-      <div
-        className="
+        <div
+          className="
         flex 
         flex-col 
         text-left
         sm:text-right
         w-3/5
         sm:w-2/5
-        ">
+        "
+        >
           <h2> Ive mostly been...</h2>
           <div className="pt-2">
-          <h3>Playing:</h3>
-        {links?.playing?.map((link) => (
-          <div key={link._key}>
-            <ul>
-              <li>
-            <Link 
-            href={link.url}
-            target="_blank"
-            className="underline hover:text-neutral-500 hover:dark:text-accent "
-            >
-              <i>
-            {link.text}
-              </i>
-            </Link>
-              </li>
-              </ul>
+            <h3>Playing:</h3>
+            {links?.playing?.map((link) => (
+              <div key={link._key}>
+                <ul>
+                  <li>
+                    <Link
+                      href={link.url}
+                      target="_blank"
+                      className="underline hover:text-neutral-500 hover:dark:text-accent "
+                    >
+                      <i>{link.text}</i>
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+            ))}
           </div>
-        ))}
-        </div>
           <div className="pt-4">
-          <h3>Watching:</h3>
-        {links?.watching?.map((link) => (
-          <div key={link._key}>
-            <ul>
-              <li>
-            <Link 
-            href={link.url}
-            target="_blank"
-            className="underline hover:text-neutral-500 hover:dark:text-accent "
-            >
-                          <i>
-            {link.text}
-              </i>
-            </Link>
-              </li>
-              </ul>
+            <h3>Watching:</h3>
+            {links?.watching?.map((link) => (
+              <div key={link._key}>
+                <ul>
+                  <li>
+                    <Link
+                      href={link.url}
+                      target="_blank"
+                      className="underline hover:text-neutral-500 hover:dark:text-accent "
+                    >
+                      <i>{link.text}</i>
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+            ))}
           </div>
-        ))}
-        </div>
           <div className="pt-4">
-          <h3>Listening to:</h3>
-        {links?.listening?.map((link) => (
-          <div key={link._key}>
-            <ul>
-              <li>
-            <Link 
-            href={link.url}
-            target="_blank"
-            className="underline hover:text-neutral-500 hover:dark:text-accent "
-            >
-              <i>
-
-            {link.artist}
-              </i>
-            </Link>
-              </li>
-              </ul>
+            <h3>Listening to:</h3>
+            {links?.listening?.map((link) => (
+              <div key={link._key}>
+                <ul>
+                  <li>
+                    <Link
+                      href={link.url}
+                      target="_blank"
+                      className="underline hover:text-neutral-500 hover:dark:text-accent "
+                    >
+                      <i>{link.artist}</i>
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+            ))}
           </div>
-        ))}
-        </div>
-        
         </div>
       </div>
     </>
diff --git a/app/components/post-paragraph.tsx b/app/components/post-paragraph.tsx
index e1ab391..630ef80 100644
--- a/app/components/post-paragraph.tsx
+++ b/app/components/post-paragraph.tsx
@@ -1,19 +1,21 @@
-import React from 'react';
+import React from "react";
 import Image from "next/image";
-import { PortableText } from '@portabletext/react';
-import { Paragraph } from "@/app/utills/interface";
+import { PortableText } from "@portabletext/react";
+import { Paragraph } from "@/sanity/lib/interface";
 
-export default function PostParagraphs({ paragraphs }: { paragraphs: Array<Paragraph> }) {
+export default function PostParagraphs({
+  paragraphs,
+}: {
+  paragraphs: Array<Paragraph>;
+}) {
   return (
     <>
       {paragraphs.map((paragraph, index) => (
         <div key={index}>
           <div className={paragraphHeader}>
-          <h1>
-            {paragraph?.heading}
-          </h1>
+            <h1>{paragraph?.heading}</h1>
           </div>
-            
+
           <div className={imageStyle}>
             <Image
               src={paragraph?.image}
@@ -33,8 +35,7 @@ export default function PostParagraphs({ paragraphs }: { paragraphs: Array<Parag
   );
 }
 
-
-const paragraphHeader=`
+const paragraphHeader = `
 flex 
 pb-4
 max-width 
@@ -42,15 +43,13 @@ mx-auto
 text-left 
 text-3xl
 font-bold
-`
-const imageStyle=`
+`;
+const imageStyle = `
 flex
 justify-center
 max-width
 mx-auto
-
-`
-
+`;
 const portableTxtStyles = `
 mt-4
 text-justify
@@ -63,4 +62,4 @@ prose-p:leading-7
 prose-li:list-disc
 prose-li:leading-7
 prose-li:ml-4
-`;
\ No newline at end of file
+`;
diff --git a/app/components/preview-card.tsx b/app/components/preview-card.tsx
index b8c0802..7d08a60 100644
--- a/app/components/preview-card.tsx
+++ b/app/components/preview-card.tsx
@@ -1,15 +1,15 @@
-import Link from "next/link"
-import Image from "next/image"
-import classNames from "classnames" //allows multiple classnames
-import { Lilita_One, VT323 } from "next/font/google"
-import { PostType } from "../utills/interface"
+import Link from "next/link";
+import Image from "next/image";
+import classNames from "classnames"; //allows multiple classnames
+import { Lilita_One, VT323 } from "next/font/google";
+import { PostType } from "../../sanity/lib/interface";
 
 interface Props {
-  post: PostType
+  post: PostType;
 }
 
-const font = Lilita_One({ weight: "400", subsets: ["latin"] })
-const dateFont = VT323({ weight: "400", subsets: ["latin"] })
+const font = Lilita_One({ weight: "400", subsets: ["latin"] });
+const dateFont = VT323({ weight: "400", subsets: ["latin"] });
 
 export default function Post({ post }: Props) {
   const sortedTags = post?.tags?.sort((a, b) => a.name.length - b.name.length);
@@ -17,75 +17,66 @@ export default function Post({ post }: Props) {
   return (
     <div className={cardStyle}>
       <Link href={`/posts/${post?.slug?.current}`}>
-        
         <div className={container}>
           <div className={leftSide}>
-            <div className={cardText}>
             <h2 className={classNames(font.className, titleStyle)}>
               {post?.title}
-            </h2> 
+            </h2>
             <p className={classNames(dateFont.className, dateStyle)}>
               {new Date(post?.publishedAt).toDateString()}
             </p>
             <p className={excerptStyle}>{post?.excerpt}</p>
-            </div>
             <div className={tagContainer}>
-            {sortedTags.map((tag, num) => (
+              {sortedTags.map((tag, num) => (
                 <span key={num} className={tagStyle}>
                   #{tag?.name}
                 </span>
               ))}
             </div>
-            </div>
-
+          </div>
           <div className={imageStyle}>
-              {post?.image && 
+            {post?.image && (
               <Image
                 src={post?.image}
                 alt={post?.alt}
                 width={200}
                 height={200}
                 layout="fixed"
-              />}
+              />
+            )}
           </div>
         </div>
-
       </Link>
     </div>
-  )
+  );
 }
 
 const cardStyle = `
+flex
+flex-col
 mb-4
 border
 border-gray-900
 rounded-md
 shadow-sm
 shadow-gray
-
-flex
-flex-col
-
 text-words
 bg-background
 hover:text-words
 hover:bg-gray-100
 hover:shadow-md
-
 dark:border-primaryDark
 dark:text-wordsDark
 dark:bg-backgroundDark
 hover:dark:bg-neutral-950
-`
-const cardText=`
-`
+`;
 
 const container = `
 flex 
 flex-row
 justify-between 
 w-full
-`
+`;
 
 const leftSide = `
 flex
@@ -93,31 +84,31 @@ flex-col
 justify-between
 w-3/5 
 p-4
-`
+`;
 
 const titleStyle = `
 text-xl 
-sm:text-2xl 
 dark:text-wordsDark
-`
+sm:text-2xl 
+`;
 
 const dateStyle = `
 mb-2 
 dark:text-wordsDark
-`
+`;
 
 const excerptStyle = `
 mb-4 
 line-clamp-2
-sm:line-clamp-3
 break-words
 dark:text-gray-400 
-`
+sm:line-clamp-3
+`;
 
-const tagContainer=`
+const tagContainer = `
 flex
 flex-wrap
-`
+`;
 
 const tagStyle = `
 mr-2
@@ -127,19 +118,18 @@ border
 border-primary
 rounded-sm 
 text-xs
-sm:text-sm
 lowercase 
 text-words
-
 dark:text-wordsDark
 dark:border-primaryDark
-`
+sm:text-sm
+`;
 const imageStyle = `
-px-2
 flex 
 items-center
 justify-end
 w-2/5 
+px-2
 sm:w-2/5  
 sm:p-4
-`
+`;
diff --git a/app/components/tags.tsx b/app/components/tags.tsx
index a367543..abddc6e 100644
--- a/app/components/tags.tsx
+++ b/app/components/tags.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Tag } from "@/app/utills/interface";
+import { Tag } from "@/sanity/lib/interface";
 
 export default function Tags({ tags }: { tags: Array<Tag> }) {
   const sortedTags = tags?.sort((a, b) => b.name.length - a.name.length);
@@ -22,10 +22,9 @@ border
 border-primary
 rounded-sm 
 text-xs
-sm:text-sm
 lowercase 
 text-words
-
 dark:text-wordsDark
 dark:border-primaryDark
+sm:text-sm
 `;
diff --git a/app/utills/interface.ts b/sanity/lib/interface.ts
similarity index 96%
rename from app/utills/interface.ts
rename to sanity/lib/interface.ts
index 0faca39..fdc4a0b 100644
--- a/app/utills/interface.ts
+++ b/sanity/lib/interface.ts
@@ -48,7 +48,7 @@ export interface Tag {
     postCount?: number
   }
 
-  export interface Footer {
+  export interface FooterTypes {
     words: string
     email: string
   }
\ No newline at end of file