diff --git a/README.md b/README.md
index c29358b..6ed1d8d 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,8 @@
 
 [ TODO LIST ]
 
-- [ ] Make a web version ( if possible )
 - [ ] Add Linux and MacOS Builds
-- [ ] Handle Sqlite with password
+- [ ] Handle SQLite with password
 - [x] Render performance for big sqlite files
 - [x] Execute SQL command tab
 - [x] Schema Generator
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index d7b2a26..8e19bea 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -9,8 +9,6 @@ default-run = "app"
 edition = "2021"
 rust-version = "1.60"
 
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
 [build-dependencies]
 tauri-build = { version = "1.4.0", features = [] }
 
diff --git a/src/app/browse.tsx b/src/app/browse.tsx
index 1a8673c..e8800ba 100644
--- a/src/app/browse.tsx
+++ b/src/app/browse.tsx
@@ -22,9 +22,9 @@ import {
 } from "@/components/ui/table";
 
 interface BrowseProps {
-  setSelectedTable: (value: SetStateAction<string | null>) => void;
+  setSelectedTable: (value: SetStateAction<string>) => void;
   tables: string[];
-  selectedTable: string | null;
+  selectedTable: string;
   records: Columns;
 }
 
@@ -38,7 +38,6 @@ export default function Browse(props: BrowseProps) {
   const endIndex = startIndex + ROWS_PER_PAGE;
 
   const totalPages = Math.ceil(
-    // @ts-ignore
     records[selectedTable]?.[Object.keys(records[selectedTable])[0]]?.length /
       ROWS_PER_PAGE
   );
@@ -53,7 +52,10 @@ export default function Browse(props: BrowseProps) {
         {selectedTable && (
           <Select
             value={selectedTable}
-            onValueChange={(table: string) => setSelectedTable(table)}
+            onValueChange={(table: string) => {
+              setCurrentPage(1);
+              setSelectedTable(table);
+            }}
           >
             <SelectTrigger className="w-[180px]">
               <SelectValue placeholder="Select Table" />
@@ -77,51 +79,63 @@ export default function Browse(props: BrowseProps) {
             0}{" "}
           Rows
         </span>
+        <span className="text-sm">
+          ( Page {currentPage} of {totalPages} )
+        </span>
       </div>
-      <div className="mt-2 h-[420px] overflow-auto">
-        {selectedTable && records[selectedTable] && (
-          <>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  {Object.keys(records[selectedTable]).map((column, index) => (
-                    <TableHead key={index}>{column}</TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {records[selectedTable][Object.keys(records[selectedTable])[0]]
-                  .slice(startIndex, endIndex)
-                  .map((_, rowIndex) => (
-                    <TableRow key={rowIndex}>
-                      {Object.keys(records[selectedTable]).map(
-                        (column, columnIndex) => (
-                          <TableCell
-                            key={columnIndex}
-                            className="max-w-[150px] truncate"
-                          >
-                            <span>
-                              {
-                                records[selectedTable][column][
-                                  rowIndex + startIndex
-                                ]
-                              }
-                            </span>
-                          </TableCell>
-                        )
-                      )}
-                    </TableRow>
-                  ))}
-              </TableBody>
-            </Table>
-          </>
+      <section className="flex flex-col">
+        <div className="mt-2 overflow-auto mb-[55px]">
+          {selectedTable && records[selectedTable] && (
+            <>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    {Object.keys(records[selectedTable]).map(
+                      (column, index) => (
+                        <TableHead key={index}>{column}</TableHead>
+                      )
+                    )}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {records[selectedTable][
+                    Object.keys(records[selectedTable])[0]
+                  ]
+                    .slice(startIndex, endIndex)
+                    .map((_, rowIndex) => (
+                      <TableRow key={rowIndex}>
+                        {Object.keys(records[selectedTable]).map(
+                          (column, columnIndex) => (
+                            <TableCell
+                              key={columnIndex}
+                              className="max-w-[150px] truncate"
+                            >
+                              <span>
+                                {
+                                  records[selectedTable][column][
+                                    rowIndex + startIndex
+                                  ]
+                                }
+                              </span>
+                            </TableCell>
+                          )
+                        )}
+                      </TableRow>
+                    ))}
+                </TableBody>
+              </Table>
+            </>
+          )}
+        </div>
+
+        {totalPages > 1 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handleChangePage}
+          />
         )}
-      </div>
-      <Pagination
-        currentPage={currentPage}
-        totalPages={totalPages}
-        onPageChange={handleChangePage}
-      />
+      </section>
     </div>
   );
 }
@@ -137,11 +151,12 @@ const Pagination: React.FC<PaginationProps> = ({
   totalPages,
   onPageChange,
 }) => {
-  // @ts-ignore
-  const pageNumbers = [...Array(totalPages).keys()].map((num) => num + 1);
-
+  const pageNumbers = Array.from(
+    { length: totalPages },
+    (_, index) => index + 1
+  );
   return (
-    <ul className="flex overflow-x-scroll">
+    <ul className="flex overflow-x-scroll fixed bottom-0 w-full">
       {pageNumbers.map((page) => (
         <li
           key={page}
diff --git a/src/app/execute.tsx b/src/app/execute.tsx
index 563d762..9328880 100644
--- a/src/app/execute.tsx
+++ b/src/app/execute.tsx
@@ -55,28 +55,30 @@ export default function ExecuteSQL({ table }: { table: string }) {
         </button>
         {typeof result === "string" ? (
           <p>{result}</p>
-        ) : result instanceof Array ? (
-          <Table>
-            <TableHeader>
-              <TableRow>
-                {Object.keys(result[0]).map((key) => (
-                  <TableHead key={key}>{key}</TableHead>
-                ))}
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {result.map((row, index) => (
-                <TableRow key={index}>
-                  {Object.values(row).map((value, index) => (
-                    <TableCell key={index} className="max-w-[150px] truncate">
-                      {value}
-                    </TableCell>
+        ) : (
+          result instanceof Array && (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {Object.keys(result[0]).map((key) => (
+                    <TableHead key={key}>{key}</TableHead>
                   ))}
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        ) : null}
+              </TableHeader>
+              <TableBody>
+                {result.map((row, index) => (
+                  <TableRow key={index}>
+                    {Object.values(row).map((value, index) => (
+                      <TableCell key={index} className="max-w-[150px] truncate">
+                        {value}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )
+        )}
       </form>
     </div>
   );
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 96736bb..041746f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,6 @@ import type { Metadata } from "next";
 import { Merriweather_Sans } from "next/font/google";
 
 import ThemeProvider from "@/components/theme/provider";
-import Toggle from "@/components/theme/toggle";
 
 const font = Merriweather_Sans({ subsets: ["latin"] });
 export const metadata: Metadata = {
@@ -26,14 +25,6 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           {children}
-          <footer className="p-4 fixed bottom-0 w-full bg-background border-t border-secondary">
-            <div className="flex justify-between items-center">
-              <Toggle />
-              <span className="hover:animate-bounce animate-pulse">
-                SQLite Viewer V0.4
-              </span>
-            </div>
-          </footer>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/app/load.tsx b/src/app/load.tsx
index 2c42869..8c7ba2d 100644
--- a/src/app/load.tsx
+++ b/src/app/load.tsx
@@ -1,7 +1,9 @@
 "use client";
 
+import { ReloadIcon } from "@radix-ui/react-icons";
 import { Columns, TableInfos, TableInfo } from "@/types";
 import { useState, useEffect } from "react";
+import Toggle from "@/components/theme/toggle";
 
 import { invoke } from "@tauri-apps/api/tauri";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -14,7 +16,7 @@ export default function Load({ path }: { path: string }) {
   const [records, setRecords] = useState<Columns>({});
   const [tables, setTables] = useState<string[]>([]);
   const [tablesInfo, setTablesInfo] = useState<TableInfos>({});
-  const [selectedTable, setSelectedTable] = useState<string | null>(null);
+  const [selectedTable, setSelectedTable] = useState<string>("");
 
   useEffect(() => {
     onSelectedDatabase();
@@ -71,6 +73,7 @@ export default function Load({ path }: { path: string }) {
             <TabsTrigger value="execute" className="grow">
               Execute SQL
             </TabsTrigger>
+            <Toggle />
           </TabsList>
           <TabsContent value="structure">
             <Structure tablesInfo={tablesInfo} />
@@ -88,7 +91,10 @@ export default function Load({ path }: { path: string }) {
           </TabsContent>
         </Tabs>
       ) : (
-        <h1 className="text-2xl w-full mt-20 text-center">Loading Data..</h1>
+        <div className="flex gap-2 items-center justify-center mt-20">
+          <h1 className="text-2xl">Reading Content</h1>
+          <ReloadIcon className="animate-spin w-8 h-8" />
+        </div>
       )}
     </div>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2cdd051..e8d1f18 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -41,8 +41,7 @@ export default function Home() {
           >
             Select Database
           </button>
-          <p>SQLite Viewer GUI Program written in Rust using Tauri + NextJS</p>
-          <p>I dont know what to put in this place!</p>
+          <p>Leave a Start on GitHub ⭐</p>
         </div>
       )}
     </main>
diff --git a/src/components/theme/toggle.tsx b/src/components/theme/toggle.tsx
index 6606e2c..79dced0 100644
--- a/src/components/theme/toggle.tsx
+++ b/src/components/theme/toggle.tsx
@@ -3,7 +3,6 @@
 import { useTheme } from "next-themes";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 
-import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,13 +15,13 @@ export default function Toggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+        <button className="flex items-center px-2 hover:opacity-70">
           <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
-        </Button>
+        </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start">
+      <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => setTheme("light")}>
           Light
         </DropdownMenuItem>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
deleted file mode 100644
index 4ecf369..0000000
--- a/src/components/ui/button.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/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-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        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",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }