diff --git a/src/App.tsx b/src/App.tsx
index 2bd498a..445e0df 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,9 @@
 import { Suspense } from 'react';
 
-import Header from 'comp/Header';
-import Router from './router';
+import Header from '@/components/header';
+import Router from '@/router';
 
-function App(): JSX.Element {
+function App() {
   return (
     <>
       <Header />
diff --git a/src/components/Comments.tsx b/src/components/Comments.tsx
index 7beb3ac..07dda2e 100644
--- a/src/components/Comments.tsx
+++ b/src/components/Comments.tsx
@@ -1,26 +1,25 @@
-import { Link } from 'react-router-dom';
-import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
 
-import type { UseQueryResult } from '@tanstack/react-query';
-import type { Comment } from 'types';
-import { DummyResponse } from 'src/types/DummyResponse';
-
-interface CommentsProperties {
-  postId: number;
-}
+import type { Comment } from '@/types';
+import { DummyResponse } from '@/types/dummy-response';
 
 interface CommentsResponse extends DummyResponse {
   comments: Comment[];
 }
 
-export default function Comments({ postId }: CommentsProperties): JSX.Element {
+interface Properties {
+  postId: number;
+}
+
+export default function Comments({ postId }: Properties) {
   const {
     data: comments,
-    isLoading,
+    isPending,
     isError,
     error,
-  }: UseQueryResult<Comment[], Error> = useQuery({
+  } = useQuery({
     enabled: postId !== undefined,
     queryKey: ['comments', postId],
     queryFn: async () => {
@@ -31,7 +30,7 @@ export default function Comments({ postId }: CommentsProperties): JSX.Element {
 
   return (
     <>
-      {isLoading ? (
+      {isPending ? (
         <p>Loading...</p>
       ) : isError ? (
         <p>Error: {error.message}</p>
diff --git a/src/components/Common/Button.tsx b/src/components/Common/Button.tsx
index 752da10..452ede0 100644
--- a/src/components/Common/Button.tsx
+++ b/src/components/Common/Button.tsx
@@ -1,5 +1,6 @@
-import { type Ref, type ButtonHTMLAttributes, forwardRef } from 'react';
-import { Button as ButtonUI } from 'lib/shadcn/components/ui/button';
+import { type ButtonHTMLAttributes, forwardRef, type Ref } from 'react';
+
+import { Button as ButtonUI } from '@/components/ui/button';
 
 interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: JSX.Element | string;
@@ -8,7 +9,7 @@ interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProperties>(
-  ({ children, type = 'button', className = '', background, ...properties }, reference) => {
+  ({ children, type = 'button', className, background, ...properties }, reference) => {
     return (
       <ButtonUI
         type={type}
diff --git a/src/components/Common/form/FormAlert.tsx b/src/components/Common/form/FormAlert.tsx
deleted file mode 100644
index 16e1194..0000000
--- a/src/components/Common/form/FormAlert.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export default function FormAlert({
-  children,
-}: {
-  children: JSX.Element | boolean | string | Array<string | boolean>;
-}): JSX.Element {
-  return (
-    <p role="alert" className="pt-2 text-xs text-red-600">
-      {children}
-    </p>
-  );
-}
diff --git a/src/components/Common/form/Input.tsx b/src/components/Common/form/Input.tsx
index 57fcef0..481839a 100644
--- a/src/components/Common/form/Input.tsx
+++ b/src/components/Common/form/Input.tsx
@@ -1,5 +1,4 @@
-import { forwardRef } from 'react';
-import type { Ref, InputHTMLAttributes } from 'react';
+import { forwardRef, type InputHTMLAttributes, type Ref } from 'react';
 
 interface InputProperties extends InputHTMLAttributes<HTMLInputElement> {
   children?: JSX.Element | boolean | string;
@@ -7,13 +6,15 @@ interface InputProperties extends InputHTMLAttributes<HTMLInputElement> {
   reference?: Ref<HTMLInputElement> | null | undefined;
 }
 
+const formInputStyle = { backgroundImage: 'none' };
+
 const Input = forwardRef<HTMLInputElement, InputProperties>(
   ({ id, type, placeholder, className, hidden = false, disabled = false, ...register }, reference) => {
     return (
       <>
         <input
           className={`w-full rounded-lg px-4 py-2 font-medium ${className ?? 'bg-purple-dark/90 text-white'}`}
-          style={{ backgroundImage: 'none' }}
+          style={formInputStyle}
           id={id}
           ref={reference}
           type={type ?? 'text'}
diff --git a/src/components/Common/form/Textarea.tsx b/src/components/Common/form/Textarea.tsx
deleted file mode 100644
index ffffae9..0000000
--- a/src/components/Common/form/Textarea.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { forwardRef } from 'react';
-import type { Ref, TextareaHTMLAttributes } from 'react';
-
-interface TextareaProperties extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  children?: JSX.Element | boolean | string;
-  reference?: Ref<HTMLTextAreaElement> | null | undefined;
-}
-
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProperties>(
-  ({ className, id, rows, placeholder, hidden, disabled, ...register }, reference) => {
-    return (
-      <>
-        <textarea
-          className={`w-full rounded-lg px-4 py-2 font-medium ${
-            className ?? 'bg-purple-dark text-white hover:bg-purple'
-          }`}
-          style={{ backgroundImage: 'none' }}
-          id={id}
-          rows={rows}
-          ref={reference}
-          placeholder={placeholder}
-          hidden={hidden}
-          disabled={disabled}
-          {...register}
-        />
-      </>
-    );
-  },
-);
-
-Textarea.displayName = 'Textarea';
-
-export default Textarea;
diff --git a/src/components/Common/form/Title.tsx b/src/components/Common/form/Title.tsx
index 3009e15..22eaf49 100644
--- a/src/components/Common/form/Title.tsx
+++ b/src/components/Common/form/Title.tsx
@@ -1,3 +1,8 @@
-export default function Title({ children, className = '' }: { children: string; className?: string }): JSX.Element {
+interface Properties {
+  children: string;
+  className?: string;
+}
+
+export default function Title({ children, className }: Properties) {
   return <h3 className={`pb-2 ps-2 text-base font-semibold ${className}`}>{children}</h3>;
 }
diff --git a/src/components/Common/form/form-alert.tsx b/src/components/Common/form/form-alert.tsx
new file mode 100644
index 0000000..f08ce93
--- /dev/null
+++ b/src/components/Common/form/form-alert.tsx
@@ -0,0 +1,7 @@
+export default function FormAlert({ children }: { children: React.ReactNode }) {
+  return (
+    <p role="alert" className="pt-2 text-xs text-red-600">
+      {children}
+    </p>
+  );
+}
diff --git a/src/components/Common/form/index.ts b/src/components/Common/form/index.ts
index 713c116..32d1b97 100644
--- a/src/components/Common/form/index.ts
+++ b/src/components/Common/form/index.ts
@@ -1,4 +1,4 @@
-export { default as FormAlert } from './FormAlert';
-export { default as Input } from './Input';
-export { default as Textarea } from './Textarea';
-export { default as Title } from './Title';
+export { default as FormAlert } from './form-alert';
+export { default as Input } from './input';
+export { default as Textarea } from './text-area';
+export { default as Title } from './title';
diff --git a/src/components/Common/form/text-area.tsx b/src/components/Common/form/text-area.tsx
new file mode 100644
index 0000000..c3fe2f0
--- /dev/null
+++ b/src/components/Common/form/text-area.tsx
@@ -0,0 +1,33 @@
+import { forwardRef, type Ref, type TextareaHTMLAttributes } from 'react';
+
+interface TextareaProperties extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  children?: JSX.Element | boolean | string;
+  reference?: Ref<HTMLTextAreaElement> | null | undefined;
+}
+
+const formTextareaStyle = { backgroundImage: 'none' };
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProperties>(function TextareaComponent(
+  { className, id, rows, placeholder, hidden, disabled, ...register },
+  reference,
+) {
+  return (
+    <>
+      <textarea
+        className={`w-full rounded-lg px-4 py-2 font-medium ${className ?? 'bg-purple-dark text-white hover:bg-purple'}`}
+        style={formTextareaStyle}
+        id={id}
+        rows={rows}
+        ref={reference}
+        placeholder={placeholder}
+        hidden={hidden}
+        disabled={disabled}
+        {...register}
+      />
+    </>
+  );
+});
+
+Textarea.displayName = 'Textarea';
+
+export default Textarea;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 24efebc..03f62dd 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,5 @@
 import { Link, useLocation } from 'react-router-dom';
 
-import Button from './common/Button';
-import useAuthStore from '../stores/AuthStore';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,16 +8,19 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from 'lib/shadcn/components/ui/dropdown-menu';
+} from '@/components/ui/dropdown-menu';
+import useAuthStore from '@/stores/auth-store';
 
-export default function Header(): JSX.Element {
+import Button from './common/button';
+
+export default function Header() {
   const { pathname } = useLocation();
   const [logout, user] = useAuthStore((state) => [state.logout, state.user]);
 
   return (
     <header className="flex flex-col justify-center">
       <h1 className=" max-w-full px-2 py-4 text-center text-4xl font-black lg:px-16 lg:text-5xl">
-        A Basic Blog Site using{' '}
+        An Infinite Blog Site using{' '}
         <a
           className="text-purple-dark hover:text-purple active:text-purple-light"
           href="https://tanstack.com/query/v4/"
diff --git a/src/components/forms/auth/LoginForm.tsx b/src/components/forms/auth/login-form.tsx
similarity index 86%
rename from src/components/forms/auth/LoginForm.tsx
rename to src/components/forms/auth/login-form.tsx
index 9f37526..5ce209d 100644
--- a/src/components/forms/auth/LoginForm.tsx
+++ b/src/components/forms/auth/login-form.tsx
@@ -1,16 +1,19 @@
+import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
+import { FormAlert, Input, Title } from 'src/components/common/form';
 
-import Button from 'comp/common/Button';
-
-import type { SubmitHandler } from 'react-hook-form';
-import { Input, Title, FormAlert } from 'comp/common/form';
+import Button from '@/components/common/button';
 
 export interface FormInputs {
   username: string;
   password: string;
 }
 
-export default function LoginForm({ onSubmit }: { onSubmit: SubmitHandler<FormInputs> }): JSX.Element {
+interface Properties {
+  onSubmit: SubmitHandler<FormInputs>;
+}
+
+export default function LoginForm({ onSubmit }: Properties) {
   const {
     register,
     handleSubmit,
diff --git a/src/components/forms/post/AddPostForm.tsx b/src/components/forms/post/add-post-form.tsx
similarity index 90%
rename from src/components/forms/post/AddPostForm.tsx
rename to src/components/forms/post/add-post-form.tsx
index 17d93a2..baaa542 100644
--- a/src/components/forms/post/AddPostForm.tsx
+++ b/src/components/forms/post/add-post-form.tsx
@@ -1,8 +1,8 @@
-import { useForm, type SubmitHandler, useFieldArray } from 'react-hook-form';
 import { useEffect } from 'react';
+import { type SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 
-import Button from 'comp/common/Button';
-import { Input, Textarea, Title, FormAlert } from 'comp/common/form';
+import Button from '@/components/common/button';
+import { FormAlert, Input, Textarea, Title } from '@/components/common/form';
 
 export interface FormInputs {
   title: string;
@@ -10,11 +10,11 @@ export interface FormInputs {
   tags: Array<{ tag: string }>;
 }
 
-interface PostAddFormProperties {
+interface Properties {
   onSubmit: SubmitHandler<FormInputs>;
 }
 
-export default function PostAddForm({ onSubmit }: PostAddFormProperties): JSX.Element {
+export default function PostAddForm({ onSubmit }: Properties) {
   const {
     register,
     handleSubmit,
diff --git a/src/components/home/Username.tsx b/src/components/home/Username.tsx
index 2428d7e..52eae45 100644
--- a/src/components/home/Username.tsx
+++ b/src/components/home/Username.tsx
@@ -1,19 +1,23 @@
-import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
 import { Link } from 'react-router-dom';
 
-import type { UseQueryResult } from '@tanstack/react-query';
-import type { User } from 'types';
+import type { User } from '@/types';
+
+interface Properties {
+  className?: string;
+  userId: number;
+}
 
-export default function Username({ className, userId }: { className?: string; userId: number }): JSX.Element {
+export default function Username({ className, userId }: Properties) {
   if (Number(userId) < 1) throw new Error('id is not a valid number');
 
   const {
     data: user,
-    isLoading,
+    isPending,
     isError,
     error,
-  }: UseQueryResult<User, Error> = useQuery({
+  } = useQuery({
     queryKey: ['users', Number(userId), { select: 'username' }],
     queryFn: async () => {
       const data = await axios.get(`https://dummyjson.com/users/${userId}?select=username`);
@@ -23,7 +27,7 @@ export default function Username({ className, userId }: { className?: string; us
 
   return (
     <>
-      {isLoading ? (
+      {isPending ? (
         <p>Loading...</p>
       ) : isError ? (
         <p>Error: {error.message}</p>
diff --git a/src/libraries/shadcn/components/ui/button.tsx b/src/components/ui/button.tsx
similarity index 97%
rename from src/libraries/shadcn/components/ui/button.tsx
rename to src/components/ui/button.tsx
index 799c447..6821cc5 100644
--- a/src/libraries/shadcn/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,9 +1,9 @@
-import { forwardRef } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../../utils';
-
 import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '../../utils/utils';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-slate-800',
@@ -25,7 +25,7 @@ const buttonVariants = cva(
         default: 'h-9 px-4 py-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
+        icon: 'size-9',
       },
     },
     defaultVariants: {
diff --git a/src/libraries/shadcn/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
similarity index 94%
rename from src/libraries/shadcn/components/ui/dropdown-menu.tsx
rename to src/components/ui/dropdown-menu.tsx
index 4fbb27e..4f99c3b 100644
--- a/src/libraries/shadcn/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,10 +1,9 @@
-import { forwardRef } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
+import type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
 
-import { cn } from '../../utils';
-
-import type { ElementRef, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import { cn } from '../../utils/utils';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -29,7 +28,7 @@ const DropdownMenuSubTrigger = forwardRef<
     {...properties}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
@@ -99,9 +98,9 @@ const DropdownMenuCheckboxItem = forwardRef<
     checked={checked}
     {...properties}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -121,9 +120,9 @@ const DropdownMenuRadioItem = forwardRef<
     )}
     {...properties}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotFilledIcon className="size-4 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -164,18 +163,18 @@ DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+  DropdownMenuTrigger,
 };
diff --git a/src/hooks/useFetch.ts b/src/hooks/use-fetch.ts
similarity index 70%
rename from src/hooks/useFetch.ts
rename to src/hooks/use-fetch.ts
index 0357592..b8c2a25 100644
--- a/src/hooks/useFetch.ts
+++ b/src/hooks/use-fetch.ts
@@ -1,5 +1,5 @@
-import { useState } from 'react';
 import axios, { type AxiosRequestConfig } from 'axios';
+import { useState } from 'react';
 
 interface FetchProperties<TRequest> {
   url: string;
@@ -8,27 +8,25 @@ interface FetchProperties<TRequest> {
   config?: AxiosRequestConfig;
 }
 
-interface useFetchResponse<TRequest, DResponse> {
+interface UseFetch<TRequest, TResponse> {
   isLoading: boolean;
   isError: boolean;
   isSuccess: boolean;
   error: { message: string };
-  response: DResponse | undefined;
-  fetch: FetchFunction<TRequest>;
+  response: TResponse | undefined;
+  fetch: (properties: FetchProperties<TRequest>) => Promise<void>;
 }
 
-type FetchFunction<TRequest> = ({ url, data, method, config }: FetchProperties<TRequest>) => Promise<void>;
-
-function useFetch<TRequest, DResponse>(): useFetchResponse<TRequest, DResponse> {
+function useFetch<TRequest, TResponse>(): UseFetch<TRequest, TResponse> {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);
   const [isSuccess, setIsSuccess] = useState<boolean>(false);
   const [error, setError] = useState({ message: '' });
-  const [response, setResponse] = useState<DResponse | undefined>();
+  const [response, setResponse] = useState<TResponse | undefined>();
 
-  const fetch: FetchFunction<TRequest> = async ({ url, data, method, config }: FetchProperties<TRequest>) => {
+  const fetch = async ({ url, data, method, config }: FetchProperties<TRequest>) => {
     setIsLoading(true);
-    const promise = axios[method ?? 'get']<DResponse>(url, data, config)
+    const promise = axios[method ?? 'get']<TResponse>(url, data, config)
       .then((response) => {
         if (response.status === 200 || response.status === 201) {
           setResponse(response.data);
diff --git a/src/index.css b/src/index.css
index 3e2fcd3..4ec6d80 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,3 +3,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  @apply flex justify-center h-screen w-full overflow-x-hidden bg-white overflow-y-scroll;
+}
+
+#root {
+  @apply flex max-w-full flex-col text-black lg:max-w-screen-lg;
+}
diff --git a/src/main.tsx b/src/main.tsx
index ef713a6..5917826 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,30 +1,24 @@
+import './index.css';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { StrictMode as React } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-// eslint-disable-next-line import/named
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import App from './App.tsx';
-import './index.css';
+import App from '@/app.tsx';
 
 const queryClient = new QueryClient();
 
-const body = document.querySelector('body') as HTMLElement;
-body.className = 'flex justify-center h-screen w-full overflow-x-hidden bg-white overflow-y-scroll';
-
-const dom = document.querySelector('#root') as HTMLElement;
-dom.className = 'flex max-w-full flex-col text-black lg:max-w-screen-lg';
-
-const root = createRoot(dom);
+const root = createRoot(document.querySelector('#root') as HTMLDivElement);
 
 root.render(
   <React>
-    <BrowserRouter>
-      <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
         <App />
-        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryClientProvider>
-    </BrowserRouter>
+      </BrowserRouter>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   </React>,
 );
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9d8a014..daac2ad 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,29 +1,44 @@
-import { Fragment, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import axios from 'axios';
 import { useInfiniteQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Fragment, useCallback, useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
+import { Link } from 'react-router-dom';
 
-import Button from 'comp/common/Button';
-import { Input } from 'comp/common/form';
-import Username from 'comp/home/Username';
-
-import type { UseInfiniteQueryResult } from '@tanstack/react-query';
-import { DummyResponse, PostResponse } from 'types';
+import Button from '@/components/common/button';
+import { Input } from '@/components/common/form';
+import Username from '@/components/home/username';
+import { DummyResponse, PostResponse } from '@/types';
 
 interface ServerResponse extends DummyResponse {
   posts: PostResponse[];
 }
 
-export default function Home(): JSX.Element {
+export default function Home() {
   const { ref, inView } = useInView();
   const limit = 30;
   const [filter, setFilter] = useState('');
+
+  const fetchPosts = async ({ pageParam: pageParameter = 0 }) => {
+    const url = `https://dummyjson.com/posts?limit=${limit}&skip=${pageParameter}&select=id,title,userId&sort=-id`;
+    const response = await axios.get<ServerResponse>(url);
+    return response.data;
+  };
+
+  const nextPage = (firstPage: { skip: number; limit: number; total: number }) => {
+    if (firstPage === undefined || firstPage.skip + firstPage.limit >= firstPage.total || firstPage.skip < 0) return;
+    return firstPage.skip + firstPage.limit;
+  };
+
+  const previousPage = (lastPage: { skip: number; limit: number; total: number }) => {
+    if (lastPage === undefined || lastPage.skip - lastPage.limit >= lastPage.total || lastPage.skip <= 0) return;
+    return lastPage.skip - lastPage.limit;
+  };
+
   const {
     data: posts,
     error,
     isError,
-    isLoading,
+    isPending,
     isFetching,
     isFetchingNextPage,
     isFetchingPreviousPage,
@@ -31,23 +46,12 @@ export default function Home(): JSX.Element {
     hasPreviousPage,
     fetchNextPage,
     fetchPreviousPage,
-  }: UseInfiniteQueryResult<ServerResponse, Error> = useInfiniteQuery({
+  } = useInfiniteQuery({
     queryKey: ['posts'],
-    queryFn: async ({ pageParam: pageParameter = 0 }) => {
-      const url = `https://dummyjson.com/posts?limit=${limit}&skip=${
-        pageParameter as number
-      }&select=id,title,userId&sort=-id`;
-      const response = await axios.get<ServerResponse>(url);
-      return response.data;
-    },
-    getNextPageParam: (firstPage) => {
-      if (firstPage === undefined || firstPage.skip + firstPage.limit >= firstPage.total || firstPage.skip < 0) return;
-      return firstPage.skip + firstPage.limit;
-    },
-    getPreviousPageParam: (lastPage) => {
-      if (lastPage === undefined || lastPage.skip - lastPage.limit >= lastPage.total || lastPage.skip <= 0) return;
-      return lastPage.skip - lastPage.limit;
-    },
+    queryFn: fetchPosts,
+    initialPageParam: 0,
+    getNextPageParam: nextPage,
+    getPreviousPageParam: previousPage,
   });
 
   useEffect(() => {
@@ -59,9 +63,13 @@ export default function Home(): JSX.Element {
     }
   }, [inView, fetchNextPage]);
 
+  const onSearchInputChange = useCallback((data: React.ChangeEvent<HTMLInputElement>) => {
+    setFilter(data.target.value);
+  }, []);
+
   return (
     <>
-      {isLoading ? (
+      {isPending ? (
         <p>Loading...</p>
       ) : isError ? (
         <p>Error: {error.message}</p>
@@ -69,21 +77,13 @@ export default function Home(): JSX.Element {
         <p>Posts is undefined</p>
       ) : (
         <div className="flex w-full flex-col justify-center gap-2">
-          <Input
-            placeholder="Search"
-            onChange={(data) => {
-              setFilter(data.target.value);
-            }}
-          />
-          <Button
-            onClick={async () => await fetchPreviousPage()}
-            disabled={!(hasPreviousPage ?? false) || isFetchingPreviousPage}
-          >
+          <Input placeholder="Search" onChange={onSearchInputChange} />
+          <Button onClick={void fetchPreviousPage} disabled={!(hasPreviousPage ?? false) || isFetchingPreviousPage}>
             {isFetchingPreviousPage
               ? 'Loading more...'
               : hasPreviousPage ?? false
-              ? 'Load Older'
-              : 'Nothing more to load'}
+                ? 'Load Older'
+                : 'Nothing more to load'}
           </Button>
           {posts.pages.map(({ posts, skip }) => (
             <Fragment key={skip / limit}>
@@ -97,16 +97,12 @@ export default function Home(): JSX.Element {
                     <Link to={`/Post/${id}`} className="text-xl font-bold text-black hover:text-purple">
                       {title}
                     </Link>
-                    <Username className=" min-w-[9rem] ps-2 text-end" userId={userId} />
+                    <Username className=" min-w-36 ps-2 text-end" userId={userId} />
                   </div>
                 ))}
             </Fragment>
           ))}
-          <Button
-            ref={ref}
-            onClick={async () => await fetchNextPage()}
-            disabled={!(hasNextPage ?? false) || isFetchingNextPage}
-          >
+          <Button ref={ref} onClick={void fetchNextPage} disabled={!(hasNextPage ?? false) || isFetchingNextPage}>
             {isFetchingNextPage ? 'Loading more...' : hasNextPage ?? false ? 'Load Newer' : 'Nothing more to load'}
           </Button>
           {isFetching && !isFetchingNextPage ? <p>Background Updating...</p> : undefined}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 5fbc397..6149d54 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,25 +1,27 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import useAuthStore from '../stores/AuthStore';
-import useFetch from '../hooks/useFetch';
-import LoginForm from 'comp/forms/auth/LoginForm';
-
-import type { FormInputs } from 'comp/forms/auth/LoginForm';
-import type { JwtToken } from 'types';
+import type { FormInputs } from '@/components/forms/auth/login-form';
+import LoginForm from '@/components/forms/auth/login-form';
+import useFetch from '@/hooks/use-fetch';
+import useAuthStore from '@/stores/auth-store';
+import type { JwtToken } from '@/types';
 
 interface ServerResponse extends JwtToken {
   token: string;
 }
 
-export default function Login(): JSX.Element {
+export default function Login() {
   const login = useAuthStore((state) => state.login);
   const { response, error, isLoading, isError, isSuccess, fetch } = useFetch<FormInputs, ServerResponse>();
   const navigate = useNavigate();
 
-  const onSubmit: (formData: FormInputs) => Promise<void> = async (formData: FormInputs) => {
-    await fetch({ url: 'https://dummyjson.com/auth/login', method: 'post', data: formData });
-  };
+  const onSubmit: (formData: FormInputs) => Promise<void> = useCallback(
+    async (formData: FormInputs) => {
+      await fetch({ url: 'https://dummyjson.com/auth/login', method: 'post', data: formData });
+    },
+    [fetch],
+  );
 
   useEffect(() => {
     if (isSuccess && response !== undefined) {
diff --git a/src/pages/Post/AddPost.tsx b/src/pages/post/add-post.tsx
similarity index 51%
rename from src/pages/Post/AddPost.tsx
rename to src/pages/post/add-post.tsx
index 562e19c..a8b3e52 100644
--- a/src/pages/Post/AddPost.tsx
+++ b/src/pages/post/add-post.tsx
@@ -1,26 +1,16 @@
-import axios from 'axios';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
+import { useCallback } from 'react';
 
-import PostAddForm from 'comp/forms/post/AddPostForm';
-import useAuthStore from '../../stores/AuthStore';
-
-import type { AxiosResponse } from 'axios';
-import type { UseMutationResult } from '@tanstack/react-query';
-import type { FormInputs } from 'comp/forms/post/AddPostForm';
-import type { PostRequest, PostResponse } from 'types';
-
-type SubmitFunctionType = (formData: FormInputs) => Promise<void>;
+import type { FormInputs } from '@/components/forms/post/add-post-form';
+import PostAddForm from '@/components/forms/post/add-post-form';
+import useAuthStore from '@/stores/auth-store';
+import type { PostRequest, PostResponse } from '@/types';
 
-export default function AddPost(): JSX.Element {
+export default function AddPost() {
   const user = useAuthStore((state) => state.user);
   const qc = useQueryClient();
-  const {
-    isLoading,
-    isError,
-    isSuccess,
-    error,
-    mutateAsync,
-  }: UseMutationResult<AxiosResponse<PostResponse>, Error, FormInputs, void> = useMutation({
+  const { isError, isSuccess, error, mutateAsync } = useMutation({
     mutationFn: async (formData: FormInputs) => {
       if (user === undefined) {
         throw new Error('User not logged in.');
@@ -39,15 +29,17 @@ export default function AddPost(): JSX.Element {
     },
   });
 
-  const onSubmit: SubmitFunctionType = async (formData: FormInputs) => {
-    console.log(formData);
-    await mutateAsync(formData);
-  };
+  const onSubmit = useCallback(
+    async (formData: FormInputs) => {
+      console.log(formData);
+      await mutateAsync(formData);
+    },
+    [mutateAsync],
+  );
 
   return (
     <>
       <PostAddForm onSubmit={onSubmit} />
-      {isLoading && <p>Loading...</p>}
       {isError && <p>{error.message}</p>}
       {isSuccess && <p>Submit successful.</p>}
     </>
diff --git a/src/pages/Post/ViewPost.tsx b/src/pages/post/view-post.tsx
similarity index 81%
rename from src/pages/Post/ViewPost.tsx
rename to src/pages/post/view-post.tsx
index 99b1e1a..4cd2fa1 100644
--- a/src/pages/Post/ViewPost.tsx
+++ b/src/pages/post/view-post.tsx
@@ -1,14 +1,12 @@
-import { useNavigate, useParams } from 'react-router-dom';
-import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { useNavigate, useParams } from 'react-router-dom';
+import Comments from 'src/components/comments';
 
-import Button from 'comp/common/Button';
-import Comments from 'comp/Comments';
-
-import type { UseQueryResult } from '@tanstack/react-query';
-import type { PostResponse } from 'types';
+import Button from '@/components/common/button';
+import type { PostResponse } from '@/types';
 
-export default function ViewPost(): JSX.Element {
+export default function ViewPost() {
   const { id } = useParams();
   const navigate = useNavigate();
 
@@ -17,10 +15,10 @@ export default function ViewPost(): JSX.Element {
 
   const {
     data: post,
-    isLoading,
+    isPending,
     isError,
     error,
-  }: UseQueryResult<PostResponse, Error> = useQuery({
+  } = useQuery({
     queryKey: ['posts', Number(id)],
     queryFn: async () => {
       const data = await axios.get(`https://dummyjson.com/posts/${id}`);
@@ -30,7 +28,7 @@ export default function ViewPost(): JSX.Element {
 
   return (
     <>
-      {isLoading ? (
+      {isPending ? (
         <p>Loading...</p>
       ) : isError ? (
         <p>Error: {error.message}</p>
diff --git a/src/pages/User/ViewUser.tsx b/src/pages/user/view-user.tsx
similarity index 80%
rename from src/pages/User/ViewUser.tsx
rename to src/pages/user/view-user.tsx
index 011801f..a29cb8e 100644
--- a/src/pages/User/ViewUser.tsx
+++ b/src/pages/user/view-user.tsx
@@ -1,13 +1,11 @@
-import { useNavigate, useParams } from 'react-router-dom';
-import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { useNavigate, useParams } from 'react-router-dom';
 
-import Button from 'comp/common/Button';
-
-import type { UseQueryResult } from '@tanstack/react-query';
-import type { User } from 'types';
+import Button from '@/components/common/button';
+import type { User } from '@/types';
 
-export default function ViewUser(): JSX.Element {
+export default function ViewUser() {
   const { id } = useParams();
   const navigate = useNavigate();
 
@@ -15,10 +13,10 @@ export default function ViewUser(): JSX.Element {
 
   const {
     data: u,
-    isLoading,
+    isPending,
     isError,
     error,
-  }: UseQueryResult<User, Error> = useQuery({
+  } = useQuery({
     queryKey: ['users', id],
     queryFn: async () => {
       const response = await axios.get(`https://dummyjson.com/users/${id}`);
@@ -28,7 +26,7 @@ export default function ViewUser(): JSX.Element {
 
   return (
     <>
-      {isLoading ? (
+      {isPending ? (
         <p>Loading...</p>
       ) : isError ? (
         <p>Error: {error.message}</p>
diff --git a/src/router.tsx b/src/router.tsx
index c2b91a1..c62c795 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,10 +1,10 @@
-import { Routes, Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
-import Login from './pages/Login';
-import Home from './pages/Home';
-import ViewPost from './pages/post/ViewPost';
-import ViewUser from './pages/user/ViewUser';
-import AddPost from './pages/post/AddPost';
+import Home from './pages/home';
+import Login from './pages/login';
+import AddPost from './pages/post/add-post';
+import ViewPost from './pages/post/view-post';
+import ViewUser from './pages/user/view-user';
 
 export default function Router(): JSX.Element {
   return (
diff --git a/src/stores/AuthStore.tsx b/src/stores/auth-store.tsx
similarity index 87%
rename from src/stores/AuthStore.tsx
rename to src/stores/auth-store.tsx
index 5089532..9e96b84 100644
--- a/src/stores/AuthStore.tsx
+++ b/src/stores/auth-store.tsx
@@ -1,8 +1,8 @@
-import { create } from 'zustand';
 import Cookies from 'js-cookie';
-import jwtDecode from 'jwt-decode';
+import { jwtDecode } from 'jwt-decode';
+import { create } from 'zustand';
 
-import type { JwtToken } from 'types';
+import type { JwtToken } from '@/types';
 
 interface AuthStore {
   user: JwtToken | undefined;
@@ -12,7 +12,7 @@ interface AuthStore {
 
 const defaultUser: () => JwtToken | undefined = () => {
   const token = Cookies.get('token');
-  if (token !== undefined) {
+  if (token) {
     return jwtDecode(token);
   }
 };
diff --git a/src/types/Comment.d.ts b/src/types/comment.ts
similarity index 100%
rename from src/types/Comment.d.ts
rename to src/types/comment.ts
diff --git a/src/types/DummyResponse.d.ts b/src/types/dummy-response.ts
similarity index 100%
rename from src/types/DummyResponse.d.ts
rename to src/types/dummy-response.ts
diff --git a/src/types/index.ts b/src/types/index.ts
index 7994a54..cb72001 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,6 +1,6 @@
-export type { DummyResponse } from './DummyResponse';
-export type { Response as PostResponse } from './Post';
-export type { Request as PostRequest } from './Post';
-export type { Comment } from './Comment';
-export type { User } from './User';
-export type { JwtToken } from './JwtToken';
+export type { Comment } from './comment';
+export type { DummyResponse } from './dummy-response';
+export type { JwtToken } from './jwt-token';
+export type { Response as PostResponse } from './post';
+export type { Request as PostRequest } from './post';
+export type { User } from './user';
diff --git a/src/types/JwtToken.d.ts b/src/types/jwt-token.ts
similarity index 100%
rename from src/types/JwtToken.d.ts
rename to src/types/jwt-token.ts
diff --git a/src/types/other/Company.d.ts b/src/types/other/company.ts
similarity index 65%
rename from src/types/other/Company.d.ts
rename to src/types/other/company.ts
index 7628b77..d100e84 100644
--- a/src/types/other/Company.d.ts
+++ b/src/types/other/company.ts
@@ -1,4 +1,4 @@
-import type { PhysicalAddress } from './PhysicalAddress';
+import type { PhysicalAddress } from './physical-address';
 
 export interface Company {
   address: PhysicalAddress;
diff --git a/src/types/other/PhysicalAddress.d.ts b/src/types/other/physical-address.ts
similarity index 100%
rename from src/types/other/PhysicalAddress.d.ts
rename to src/types/other/physical-address.ts
diff --git a/src/types/Post.d.ts b/src/types/post.ts
similarity index 100%
rename from src/types/Post.d.ts
rename to src/types/post.ts
diff --git a/src/types/User.d.ts b/src/types/user.ts
similarity index 86%
rename from src/types/User.d.ts
rename to src/types/user.ts
index 0c5dd9f..af60b7a 100644
--- a/src/types/User.d.ts
+++ b/src/types/user.ts
@@ -1,5 +1,5 @@
-import type { PhysicalAddress } from './other/PhysicalAddress';
-import type { Company } from './other/Company';
+import type { Company } from './other/company';
+import type { PhysicalAddress } from './other/physical-address';
 
 // Damn. Whyyy so much info?
 export interface User {
diff --git a/src/libraries/shadcn/utils.ts b/src/utils/utils.ts
similarity index 100%
rename from src/libraries/shadcn/utils.ts
rename to src/utils/utils.ts